/* Popup scaffolding over Selfhold's tokens (tokens.css): monochrome, the
   system sans, hairlines, radius 0, zero accent. Nothing here adds color. */

body { width: 360px; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-2) var(--s-3); border-bottom: var(--rule);
}
.brand { display: flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-2) 2px 0; border: 0; background: transparent; cursor: pointer; font-size: var(--fs-12); }
/* Until the wallet is open, the mark alone (app.ts showHeaderControls). */
.brand-mark { display: flex; align-items: center; padding: 2px var(--s-2) 2px 0; }
.bar [hidden] { display: none; }
.brand:hover .brand-label, .brand:focus-visible .brand-label { text-decoration: underline; text-underline-offset: 2px; }

.net {
  font-size: var(--fs-12); padding: 2px var(--s-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.net.testnet { background: var(--ink); color: var(--paper); }
/* A chain's name is its path, and paths are case-sensitive: shown as written.
   Too long for the bar, the path loses its start and keeps its end. */
#net-badge { display: inline-flex; align-items: baseline; gap: var(--s-1); max-width: 240px; text-transform: none; letter-spacing: 0; }
#net-badge .chain-path { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; text-align: left; }
#net-badge .chain-path bdi { direction: ltr; unicode-bidi: isolate; }

main { padding: var(--s-4) var(--s-3); }

h1 { font-size: var(--fs-20); margin: 0 0 var(--s-3); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s-3); }
.muted { font-size: var(--fs-12); }

.hero { padding: var(--s-5) 0 var(--s-4); text-align: center; }
.hero .wordmark { font-size: var(--fs-28); display: block; }
/* The mark above the wordmark, a quarter of its size clear below it (docs/brand/guidebook.md §3). */
.hero .mark { display: block; margin: 0 auto var(--s-4); }
/* Unlock: the same lockup smaller, mark 56 over the wordmark at 20. */
.hero.gate .mark { margin-bottom: var(--s-3); }
.hero.gate .wordmark { font-size: var(--fs-20); margin: 0; }
/* A milestone: the mark revealed once, never looped (docs/brand/guidebook.md §8). */
.hero.milestone .wordmark { font-size: var(--fs-20); margin: 0; }
.hero.milestone .mark { animation: reveal 500ms ease-out both; }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero.milestone .mark { animation: none; } }

button.block, .btn.block { display: block; width: 100%; text-align: center; }
/* One filled button a screen: the step that moves it forward. Every other
   button, the way back included, is outlined (.btn). */
button.block:not(.btn) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button:disabled { opacity: 0.45; cursor: default; }

textarea, input, select.picker { width: 100%; font-size: var(--fs-14); }
textarea { min-height: 84px; resize: vertical; }
select.picker { border: var(--rule); padding: var(--s-2); }
/* A field's label reads like every other label in the app. */
label.k { display: block; margin-bottom: var(--s-1); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-display); }
.stack > label.k + * { margin-top: 0; }

.mnemonic {
  border: var(--rule); padding: var(--s-3);
  font-size: var(--fs-16); line-height: 1.8; word-spacing: 6px;
}
.warn { border: var(--rule); padding: var(--s-2) var(--s-3); font-size: var(--fs-12); }

.kv { border: var(--rule); }
.kv .row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: var(--rule); }
.kv .row:last-child { border-bottom: 0; }
.kv .k { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-display); }
.kv .v { font-variant-numeric: tabular-nums; }

.addr { word-break: break-all; font-size: var(--fs-12); border: var(--rule); padding: var(--s-2) var(--s-3); }
.row-actions { display: flex; gap: var(--s-2); }
.row-actions button { flex: 1; }

.wallet-home { gap: var(--s-4); }
.account-picker { border: 0; padding: 0 0 var(--s-2); }
.balance-card { border: var(--rule); padding: var(--s-4) var(--s-3); }
.balance-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.balance-label { display: block; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-display); }
.text-action { border: 0; padding: 0; font-size: var(--fs-12); text-decoration: underline; text-underline-offset: 2px; }
.icon-action {
  display: inline-grid; flex: 0 0 32px; width: 32px; height: 32px;
  place-items: center; padding: 0;
}
.icon { display: block; flex: none; }
.transaction-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.transaction-heading h1 { margin: 0; }
.transaction-list { border: var(--rule); }
.transaction-item + .transaction-item { border-top: var(--rule); }
.transaction-item > summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); cursor: pointer; list-style: none; }
.transaction-item > summary::-webkit-details-marker { display: none; }
.transaction-item > summary::after { content: "+"; flex: 0 0 auto; }
.transaction-item[open] > summary::after { content: "−"; }
.transaction-item > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.transaction-summary { flex: 1; min-width: 0; }
.transaction-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.transaction-line + .transaction-line { margin-top: var(--s-1); }
.transaction-title { font-size: var(--fs-14); display: inline-flex; align-items: center; gap: var(--s-2); }
/* A fixed slot, so titles line up whether or not a state has a shape. */
.transaction-glyph { display: inline-flex; width: 16px; height: 16px; flex: none; }
.transaction-item.replaced .transaction-amount { text-decoration: line-through; }
.transaction-amount { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; text-align: right; }
.transaction-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-status { text-align: right; max-width: 60%; overflow-wrap: anywhere; }
.transaction-details { padding: 0 var(--s-3) var(--s-3); font-size: var(--fs-12); }
.transaction-field { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.transaction-details .toast:empty { display: none; }
.transaction-details .row-actions { flex-wrap: wrap; align-items: center; }
.transaction-details .row-actions .icon-action { flex: 0 0 32px; }
.transaction-payload { margin: 0; padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-12); max-height: 260px; overflow: auto; }
/* Empty: a 32 px glyph, a title and one line (docs/brand/guidebook.md §7). */
.transaction-empty { border: var(--rule); padding: var(--s-4) var(--s-3); }
.transaction-empty .icon { margin-bottom: var(--s-3); }
.transaction-empty .section-label { margin: 0 0 var(--s-1); }
.transaction-empty p { margin: 0; }
.transaction-heading ~ .toast:empty { display: none; }
.balance-value .unread { font-size: var(--fs-16); line-height: var(--lh-body); }
.notices:empty { display: none; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: var(--rule); border-left: 3px solid var(--ink); font-size: var(--fs-12); }
.notice + .notice { margin-top: var(--s-2); }
.notice .btn { flex: 0 0 auto; }
.balance-value { display: block; margin-top: var(--s-2); font-size: var(--fs-44); line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-2); border-top: var(--rule); font-size: var(--fs-12); }
.account-identity { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; }
.account-name { min-width: 0; overflow-wrap: anywhere; }
.account-line > .icon-action { flex: 0 0 32px; }
.account-address { word-break: break-all; }
.primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.primary-actions button { min-height: 48px; }
.section-label { margin: 0; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-display); }
/* A label belongs to what follows it: room above, little below. */
.stack > * + .section-label { margin-top: var(--s-3); }
.stack > .section-label + * { margin-top: var(--s-1); }
.advanced { border: var(--rule); }
.advanced summary { cursor: pointer; padding: var(--s-2) var(--s-3); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-display); }
.advanced-content { margin: 0 var(--s-3) var(--s-3); }
.advanced-content.kv { margin-top: 0; }
/* The chain menu: the chains as a tree, a child under its parent. */
.chain-menu { position: fixed; z-index: 20; top: 45px; right: var(--s-2); width: min(280px, calc(100vw - 16px)); max-height: calc(100vh - 55px); overflow: auto; border: var(--rule); background: var(--paper); }
.chain-menu ul { list-style: none; margin: 0; padding: 0; }
.chain-menu li { max-width: none; margin: 0; }
.chain-menu li + li, .chain-menu li > ul { border-top: var(--rule); }
.chain-menu-items:empty { display: none; }
.chain-menu-item { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--s-2); border: 0; text-align: left; text-transform: none; letter-spacing: 0; }
.chain-name { display: flex; min-width: 0; overflow-wrap: anywhere; }
/* The lines an outline of chains is drawn with, wherever chains are listed. */
.tree-guide { flex: 0 0 auto; white-space: pre; opacity: 0.45; }
.chain-note { flex: 0 0 auto; font-size: var(--fs-12); opacity: 0.6; }
/* Where the wallet is: the one inverted row. */
.chain-menu-item.current { background: var(--ink); color: var(--paper); cursor: default; }
/* A chain the node sees and does not host. */
.chain-menu-item.unhosted .chain-name { opacity: 0.55; }
.chain-menu-manage { border-top: var(--rule); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-display); }
.chain-menu > .toast:not(:empty) { margin: var(--s-2) var(--s-3); }
.chain-menu > .toast:empty { display: none; }

.order-drop {
  position: fixed; inset: var(--s-2); z-index: 50; display: grid; place-items: center;
  border: 2px dashed currentColor; background: var(--paper); padding: var(--s-4);
  text-align: center; pointer-events: none;
}
.order-drop.error { border-style: solid; }

.toast { font-size: var(--fs-12); min-height: 1.2em; }
.err { border: var(--rule); padding: var(--s-2) var(--s-3); font-size: var(--fs-12); }
.tag { font-size: var(--fs-12); border: var(--rule); padding: 0 var(--s-2); text-transform: uppercase; letter-spacing: 0.04em; }

/* Backup & transfer. QR codes are always black on white (scanners need the
   contrast, whatever the theme). */
body.page { width: auto; min-height: 100vh; }
body.page main { max-width: 560px; margin: 0 auto; }
.qr svg, .qr-print svg { display: block; width: 100%; height: auto; background: #fff; color: #000; image-rendering: pixelated; }
.qr { max-width: 320px; margin-left: auto; margin-right: auto; }
.qr-frame { width: 100%; }
.scan-video { width: 100%; border: var(--rule); }
.check { display: flex; align-items: center; gap: var(--s-2); text-transform: none; letter-spacing: 0; }
.check input { width: auto; }
.sas { font-size: var(--fs-28); text-align: center; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; border: var(--rule); padding: var(--s-3); }
.secret-overlay {
  position: fixed; inset: 0; z-index: 10; overflow: auto;
  background: var(--paper); padding: var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.secret-overlay .qr { max-width: min(90vw, 70vh); width: 100%; }
/* Over everything, the chain menu and dialogs included: a locked wallet shows nothing. */
.lock-cover { z-index: 100; }
#print-area { display: none; }
@media print {
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { display: block; }
  .print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .qr-print { break-inside: avoid; }
  .print-page > .qr-print { max-width: 60%; }
}


.node-status:empty { display: none; }
.kv .v.mono { min-width: 0; overflow-wrap: anywhere; text-align: right; }
h2.section-label { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--rule); }

/* A chain or node beside its button. The text column takes what is left and
   wraps a long name or address anywhere; the button never shrinks or wraps. */
.node-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: var(--rule); }
.node-row:last-child { border-bottom: 0; }
.node-text { min-width: 0; }
.node-name, .node-detail { display: block; overflow-wrap: anywhere; }
.node-detail { margin-top: 2px; font-size: var(--fs-12); }
.node-row .btn { white-space: nowrap; }
.node-note { margin: 0; padding: var(--s-2) var(--s-3); }
.kv:empty { display: none; }
/* Addresses elsewhere: never push a box wider than the screen. */
.warn .mono, .kv .v, .addr, .transaction-field .mono { overflow-wrap: anywhere; }
.kv .row > .k { flex: 0 0 auto; }
.kv .row > .v { min-width: 0; text-align: right; }
/* The same row elsewhere in a list (pending purchases) keeps its hairline. */
.kv .chain-menu-item { align-items: center; border-bottom: var(--rule); }

/* Lists of rows that lead somewhere (Settings, Activity): what each is, what
   it is set to or doing, and that it opens. One hairline box a group. */
.nav-group > .nav-label { margin: 0 0 var(--s-1); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-display); font-weight: 400; opacity: 0.6; }
.nav-list { border: var(--rule); }
.nav-row { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--s-3); border: 0; text-align: left; text-transform: none; letter-spacing: 0; }
.nav-row + .nav-row { border-top: var(--rule); }
.nav-what { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-set { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s-2); min-width: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.nav-row.leads .nav-set::after { content: "›"; content: "›" / ""; flex: 0 0 auto; opacity: 0.45; }
/* A row of home actions with one button in it: the button takes the row. */
.primary-actions > :only-child { grid-column: 1 / -1; }
.account-name-field { width: 100%; min-width: 0; padding: 2px var(--s-1); font: inherit; }
/* A warning box holds nothing until there is a warning. */
.warn:empty { display: none; }
/* Fee speeds, shown only while blocks are full: one press each. */
.fee-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.fee-choices:empty { display: none; }
.fee-choices .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2) var(--s-1); text-transform: none; letter-spacing: 0; }
.fee-choices .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fee-choice-label { font-size: var(--fs-12); }
.fee-choice-value { font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.fee-mode { align-items: flex-start; }
.fee-mode input { margin-top: 3px; }
.fee-mode-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-14); }
.transaction-details .mono { overflow-wrap: anywhere; }