/* Signer Sidekick - shared styles.
   Dark-only. Tokens vendored from the Stacks Labs Design System (signer-sidekick /design/tokens).
   Fonts: Open Sauce Sans + Instrument Sans (OFL) and JetBrains Mono (OFL) - self-hosted in ./fonts/.
   No gradients, glass, emoji, or brand marks. Accent flips: testnet = violet, mainnet = Stacks orange. */

/* ---- fonts (self-hosted; graceful system fallbacks if files are absent) ---- */
@font-face{font-family:"Open Sauce Sans";src:url("fonts/opensaucesans-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url("fonts/opensaucesans-medium.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Regular.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400 500;font-display:swap}

:root{
  /* neutral (sand) */
  --sand-100:#f3f2f0;--sand-400:#95918c;--sand-500:#777470;--sand-600:#595754;--sand-700:#3c3a38;--sand-800:#2d2c2a;--sand-900:#211f1f;--sand-950:#181716;--sand-1000:#0f0f0e;
  /* accents */
  --stacks-400:#ff8761;--stacks-500:#fc6432;--stacks-600:#cc4900;
  --testnet-300:#bbadff;--testnet-400:#9985ff;--testnet-500:#765bff;--testnet-600:#593fe0;
  --bitcoin-500:#ff9835;
  /* feedback */
  --green-400:#5bb98b;--green-500:#30a46c;--green-900:#174832;
  --blue-400:#75acf3;--blue-500:#2c8dff;--blue-900:#0c447a;
  --red-400:#f06e76;--red-500:#e32a35;--red-900:#5e1019;
  --yellow-300:#fff394;--yellow-600:#dbc600;--yellow-900:#6b5c05;
  /* dark semantic */
  --surface-shell:var(--sand-1000);--surface-quiet:var(--sand-1000);--surface-standout:var(--sand-900);--surface-input:var(--sand-800);--surface-raised:var(--sand-950);
  --text-primary:var(--sand-100);--text-secondary:var(--sand-400);--text-tertiary:var(--sand-500);
  --border-primary:var(--sand-600);--border-secondary:var(--sand-700);--border-tertiary:var(--sand-950);
  /* semantic aliases (used by per-app inline styles) */
  --border:var(--border-secondary);--surface:var(--surface-raised);
  --ok:var(--green-400);--bad:var(--red-400);--warn:var(--yellow-300);--info:var(--blue-400);
  /* fonts */
  --font-display:"Open Sauce Sans",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* radii / spacing / type */
  --radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:24px;
  /* accent flips per network (default testnet) */
  --accent:var(--testnet-500);--accent-hi:var(--testnet-400);--accent-bg:rgba(118,91,255,.14);--on-accent:#ffffff;
}
body.net-mainnet{--accent:var(--stacks-500);--accent-hi:var(--stacks-400);--accent-bg:rgba(252,100,50,.14);--on-accent:#181716}

*{box-sizing:border-box}
body{margin:0;background:var(--surface-shell);color:var(--text-primary);font:var(--fs-md)/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:24px 20px 40px}
a{color:var(--accent-hi);text-underline-offset:2px}
h1{font-family:var(--font-display);font-weight:500;font-size:var(--fs-2xl);letter-spacing:-.02em;margin:0 0 6px}
h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-sm);letter-spacing:0;text-transform:uppercase;color:var(--text-secondary);margin:0 0 10px}
.sub{color:var(--text-secondary);font-size:var(--fs-sm);margin:0 0 18px}
small{color:var(--text-secondary);font-size:var(--fs-xs)}
code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-raised);border:1px solid var(--border-tertiary);border-radius:var(--radius-sm);padding:1px 5px}

/* wordmark / network bar */
.wordmark{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em;color:var(--text-secondary)}
.netbar{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;border:1px solid var(--accent);background:var(--accent-bg);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:600;margin-bottom:20px}
.netbar .nb-left{display:flex;align-items:center;gap:10px;min-width:0}
.netbar .tier{margin-left:auto;margin-right:auto;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:var(--radius-sm);border:1px solid var(--accent);color:var(--accent-hi)}
.netbar .wallet{margin-left:auto}
.netbar .wallet button{min-height:36px;padding:7px 13px}

/* cards: one continuous shell surface separated by borders (quiet), or a standout form surface */
.card{background:var(--surface-quiet);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4)}
.card.standout{background:var(--surface-standout);border-color:transparent}

/* controls (44px targets, visible focus) */
button{font:inherit;font-weight:600;min-height:44px;padding:10px 16px;border-radius:var(--radius-md);border:1px solid transparent;background:var(--accent);color:var(--on-accent);cursor:pointer}
button:hover{background:var(--accent-hi)}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost{background:var(--surface-input);color:var(--text-primary);border-color:var(--border-primary)}
button.ghost:hover{border-color:var(--accent)}
label{display:block;font-size:var(--fs-sm);color:var(--text-secondary);margin:14px 0 6px}
input,select,textarea{width:100%;min-height:44px;font:inherit;color:var(--text-primary);background:var(--surface-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:10px 12px}
input,select,textarea{font-family:var(--font-mono);font-size:var(--fs-sm)}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input[type=checkbox]{width:18px;height:18px;min-height:0;flex:0 0 18px;accent-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select{width:auto}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* key/value rows - identifiers in mono */
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border-secondary);font-size:var(--fs-sm)}
.kv:last-child{border-bottom:none}
.kv .v{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-primary);text-align:right;word-break:break-all}

/* status + notes (state carries text, never colour alone) */
.status{display:none;font-size:var(--fs-sm);padding:10px 12px;border-radius:var(--radius-md);margin-top:12px;border:1px solid var(--border-primary)}
.status.show{display:block}
.status.info{background:rgba(44,141,255,.1);border-color:var(--blue-500);color:var(--blue-400)}
.status.ok{background:rgba(48,164,108,.1);border-color:var(--green-500);color:var(--green-400)}
.status.err{background:rgba(227,42,53,.1);border-color:var(--red-500);color:var(--red-400)}
.note{background:var(--surface-raised);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:11px 13px;font-size:var(--fs-sm);color:var(--text-secondary);margin:12px 0}
.note b{color:var(--text-primary)}
.note.warn{border-color:var(--yellow-600)}
.note.danger{border-color:var(--red-500)}

/* checks - glyph + text, not colour alone */
.check{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:var(--fs-sm)}
.check .mark{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--font-mono)}
.mark.ok{background:rgba(48,164,108,.18);color:var(--green-400)}
.mark.bad{background:rgba(227,42,53,.18);color:var(--red-400)}
.mark.warn{background:rgba(219,198,0,.18);color:var(--yellow-300)}
.mark.idle{background:var(--surface-input);color:var(--text-tertiary)}

/* badges */
.badge{font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid transparent}
.b-ok{background:rgba(48,164,108,.16);color:var(--green-400);border-color:var(--green-900)}
.b-bad{background:rgba(227,42,53,.16);color:var(--red-400);border-color:var(--red-900)}
.b-warn{background:rgba(219,198,0,.14);color:var(--yellow-300);border-color:var(--yellow-900)}
.b-idle{background:var(--surface-input);color:var(--text-tertiary);border-color:var(--border-secondary)}

/* progress bar (cycle) */
.bar{position:relative;height:28px;background:var(--surface-input);border:1px solid var(--border-secondary);border-radius:var(--radius-md);overflow:hidden;margin-top:8px}
.bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent-bg);border-right:1px solid var(--accent)}
.bar .mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-xs)}
.ends{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:4px}

/* flow diagram / lists / spinner */
.flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:4px 0}
.node{flex:1;min-width:120px;background:var(--surface-standout);border:1px solid var(--border-secondary);border-radius:var(--radius-md);padding:10px 12px;text-align:center;font-size:var(--fs-xs);color:var(--text-secondary)}
.node b{display:block;font-family:var(--font-display);font-size:var(--fs-sm);color:var(--text-primary);margin-bottom:2px}
.arrow{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:120px;color:var(--text-tertiary);font-size:var(--fs-xs)}
.arrow .a{font-size:18px;color:var(--accent)}
.slist{max-height:280px;overflow:auto;border:1px solid var(--border-secondary);border-radius:var(--radius-md);margin-top:8px}
.srow{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid var(--border-secondary);font-family:var(--font-mono);font-size:var(--fs-xs)}
.srow:last-child{border-bottom:none}
.spin{width:13px;height:13px;border:2px solid var(--border-primary);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* info affordance - optional detail on hover/focus (progressive disclosure) */
.info{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--border-primary);color:var(--text-tertiary);font-family:var(--font-body);font-size:11px;font-weight:600;cursor:help;vertical-align:middle;margin-left:5px;position:relative}
.info:hover,.info:focus-visible{border-color:var(--accent);color:var(--accent-hi)}
.info[data-tip]:hover::after,.info[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:280px;background:var(--surface-standout);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:8px 10px;font-family:var(--font-body);font-size:var(--fs-xs);line-height:1.45;font-weight:400;text-align:left;white-space:normal;z-index:20;box-shadow:0 8px 16px rgba(0,0,0,.35)}

.foot{color:var(--text-tertiary);font-size:var(--fs-xs);margin-top:24px;border-top:1px solid var(--border-secondary);padding-top:14px}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* top bar + wallet control (single button, top-right, with a menu once connected) */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.wallet{position:relative}
.wallet .caret{margin-left:8px;opacity:.7;font-size:10px}
.wallet button.connected{background:var(--surface-input);color:var(--text-primary);border:1px solid var(--border-primary);font-family:var(--font-mono);font-weight:500}
.wallet button.connected:hover{border-color:var(--accent)}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;background:var(--surface-standout);border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden;z-index:30;box-shadow:0 8px 16px rgba(0,0,0,.35)}
.menu[hidden]{display:none}
.menuitem{display:block;width:100%;text-align:left;min-height:42px;padding:9px 12px;background:transparent;border:none;border-radius:0;color:var(--text-primary);font-weight:400;font-family:var(--font-body)}
.menuitem:hover{background:var(--surface-input)}