:root{
  --ink:#15181F; --slate:#1F242E; --slate-2:#262C38; --line:#333B49;
  --parchment:#F2ECDD; --parchment-2:#E9E1CE; --paper-ink:#23282F; --paper-mut:#6B6F77;
  --verdigris:#3E8E7E; --verdigris-br:#54B49F; --bronze:#C9A227; --danger:#C8553D;
  --text:#E8E4D9; --mut:#9AA1AB;
  --r:10px; --rs:6px;
  --display:"Fraunces",Georgia,serif; --body:"Inter",system-ui,sans-serif; --mono:"Spline Sans Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--verdigris-br)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* masthead */
header.mast{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#181C24,#15181F)}
.mast-inner{display:flex;align-items:center;gap:16px;padding:22px 0}
.crest{width:42px;height:42px;flex:none}
.mast h1{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.2px;margin:0;line-height:1.1}
.mast .sub{color:var(--mut);font-size:13px;margin-top:2px}

.tabbar{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#15181F,#181C24)}
.tabbar-inner{display:flex;gap:6px;align-items:stretch}
.tab{position:relative;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--mut);font:inherit;font-size:15px;font-weight:600;letter-spacing:.01em;padding:14px 18px;cursor:pointer}
.tab:hover:not(.is-disabled){color:var(--text)}
.tab.is-active{color:var(--text);border-bottom-color:var(--verdigris)}
.tab.is-disabled{opacity:.5;cursor:not-allowed}
.tab .soon{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:8px;vertical-align:middle}
.tab-gap{flex:1 1 auto}
.more-wrap{position:relative;display:flex}
.more-btn .caret{font-size:11px;opacity:.8}
.more-menu{position:absolute;right:0;top:calc(100% - 1px);min-width:190px;background:#1B1F28;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:6px;z-index:40}
.more-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--text);font:inherit;font-size:14px;padding:9px 12px;border-radius:7px;cursor:pointer}
.more-menu button:hover{background:rgba(62,142,126,.16)}
@media(max-width:560px){.tab{padding:13px 12px;font-size:14px}}

/* sub-rail: a segmented control, visually subordinate to the top tabs */
.subrail{padding:14px 0 0}
.subrail-wrap{display:flex;justify-content:center}
.subrail-inner{display:inline-flex;gap:3px;background:#14171E;border:1px solid var(--line);border-radius:10px;padding:3px}
.subtab-select{display:none}
.seg{background:transparent;border:0;border-radius:7px;color:var(--mut);font:inherit;font-size:13.5px;font-weight:600;padding:7px 16px;cursor:pointer}
.seg:hover{color:var(--text)}
.seg.is-active{background:rgba(62,142,126,.18);color:var(--text);box-shadow:inset 0 0 0 1px rgba(62,142,126,.4)}

/* modules */
.module[hidden]{display:none}
.module-placeholder{max-width:720px;padding:48px 0 90px}
.module-placeholder .lede{font-size:16px;color:var(--text)}
.module-placeholder .muted-note{color:var(--mut);font-size:14px;border-left:2px solid var(--line);padding-left:12px;margin-top:18px}
.module-doc{max-width:720px;padding:40px 0 90px;line-height:1.6}
.module-doc h2{margin:0 0 6px}
.module-doc h3{margin:26px 0 6px;font-size:16px}

/* Civic Explorer (block-stream) */
#explorer-root{padding:34px 0 90px}
.btn-sm{padding:7px 12px;font-size:13px}
.exp-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 14px}
.exp-controls select,.exp-controls input[type=text],.exp-controls input:not([type]){background:#14171E;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:13px;padding:8px 10px}
/* 1d: give the select chevron a right inset so it isn't flush to the border */
.exp-controls select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238893a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.exp-controls input{min-width:140px}
.exp-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.exp-date input{background:#14171E;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:12px;padding:6px 8px}
.exp-pager{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:14px 0 4px}
.exp-page{background:#14171E;border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit;font-size:12px;min-width:30px;padding:6px 8px;cursor:pointer}
.exp-page.is-active{background:var(--verdigris);border-color:var(--verdigris);color:#08110e;font-weight:600}
.exp-page:disabled{opacity:.4;cursor:not-allowed}
.exp-ellipsis{color:var(--paper-mut);padding:0 2px}
.exp-page-note{font-size:11px;color:var(--paper-mut);margin-left:8px}
.exp-status{font-size:12px;color:var(--mut);font-family:var(--mono);margin-left:auto}
.exp-rows{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.exp-row{display:grid;grid-template-columns:170px 150px 1fr 90px 92px;gap:10px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px}
.exp-row:last-child{border-bottom:0}
.exp-row:nth-child(even){background:rgba(255,255,255,.012)}
.exp-ts{color:var(--mut);font-size:11.5px}
.exp-ga{display:flex;flex-direction:column;gap:3px}
.exp-graph{font-size:11px;color:var(--bronze);font-family:var(--mono);letter-spacing:.04em}
.exp-action{font-weight:600}
.exp-who{word-break:break-word}
.exp-arrow{color:var(--mut)}
.exp-msg{color:var(--mut);font-size:12px;margin-top:3px}
.exp-blk a{color:var(--verdigris-br);text-decoration:none}
.exp-blk a:hover{text-decoration:underline}
.exp-empty{padding:30px 16px;text-align:center;color:var(--mut);font-size:14px}
@media(max-width:720px){.exp-row{grid-template-columns:1fr 1fr;gap:6px}.exp-ts{grid-column:1/3}.exp-blk,.exp-raw{grid-column:auto}}
@media(max-width:480px){
  .exp-controls{flex-direction:column;align-items:stretch}
  .exp-controls > *{width:100%}
  .exp-controls select,.exp-controls input{width:100%;min-width:0}
  .exp-date{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .exp-date input{width:100%}
  #exp-load,#exp-more{width:100%}
  .exp-status{text-align:center}
}
.exp-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.exp-modal[hidden]{display:none}
.exp-modal-card{background:#171B22;border:1px solid var(--line);border-radius:12px;max-width:680px;width:100%;max-height:80vh;display:flex;flex-direction:column}
.exp-modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.exp-modal-body{margin:0;padding:16px;overflow:auto;font-size:12px;line-height:1.5;white-space:pre-wrap}

/* standalone masthead (subdomain mode) */
.mast-standalone .mast-inner{align-items:center}
.back-full{margin-left:auto;font-size:13px;color:var(--verdigris-br);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:7px 12px;white-space:nowrap}
.back-full:hover{border-color:var(--verdigris-br)}
body.standalone .tabbar{display:none}
.origin-note{background:rgba(201,162,39,.12);border-bottom:1px solid rgba(201,162,39,.4);color:#e7c75a;font-size:13px;line-height:1.45;padding:9px 0}
.origin-note code{background:rgba(201,162,39,.15);padding:1px 5px;border-radius:4px}

.layout{display:grid;grid-template-columns:212px 1fr;gap:34px;padding:34px 0 80px}
/* Grid/flex items default to min-width:auto, refusing to shrink below their
   children's intrinsic width — the .types card grid then overflows and the page
   right-scrolls. min-width:0 lets the content column (and its nested auto-fit
   grid) reflow 3→2→1. Same guard on any track holding a nested grid or long
   unbreakable strings (hashes/permlinks in previews). */
.layout > main{min-width:0}
.types{min-width:0}
.rail-cell{min-width:0}
.payload-preview,.mono,pre{min-width:0;overflow-wrap:anywhere}
/* text containers wrap long tokens instead of forcing width past the viewport */
.lede,.card__body,.card__header,.card__footer,.help,.wt,.tdesc,#flow-global-note,#rev-flow-note,#found-note{overflow-wrap:anywhere}
/* backstop: no element may produce a page-level horizontal scrollbar. overflow-x:clip
   (not hidden) creates NO scroll container, so sticky rails + internal overflow-x:auto
   strips (rail, Explorer) keep working. The causal fixes above do the real work; this
   only guards against sub-pixel residue we can't measure without a browser. */
html,body{overflow-x:clip;max-width:100%}
/* B1: reserve the vertical scrollbar gutter permanently so switching between a
   tall tab (scrollbar present) and a short one (absent) doesn't reflow/recenter
   the whole app. Fallback for older engines: always show the y-scrollbar. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable){ html{overflow-y:scroll} }
@media(max-width:760px){.layout{grid-template-columns:1fr;gap:18px;padding-top:18px}}
#found-section{max-width:720px}
.binding-core{white-space:pre-wrap;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--paper-mut);background:#12151B;border:1px solid var(--line);border-left:3px solid var(--bronze);border-radius:8px;padding:12px 14px;margin:8px 0 14px;max-height:200px;overflow:auto}
.cost-preview{border:1px solid var(--line);border-radius:10px;background:#14171E;padding:12px 14px;margin:10px 0}
.cost-row{display:flex;justify-content:flex-start;gap:14px;padding:4px 0;font-size:14px}
.cost-row > :first-child{color:var(--mut);flex:0 0 auto}
.cost-row .mono{font-family:var(--mono);font-size:13px}
.cost-row.cost-bal{border-top:1px dashed var(--line);margin-top:4px;padding-top:8px;color:var(--mut)}

/* progress rail — a real sequence: the on-chain founding order */
.rail-cell{align-self:start}
nav.rail{position:sticky;top:24px;align-self:start}
@media(max-width:760px){nav.rail{position:static}}
.rail-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;color:var(--mut)}
.rail-num{font-family:var(--mono);font-size:12px;width:26px;height:26px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--mut);transition:.25s}
.rail-item .rt{font-size:14px;line-height:1.3;margin-top:3px}
.rail-item .rd{font-size:12px;color:var(--paper-mut)}
.rail-item.is-active{color:var(--text)}
.rail-item.is-clickable{cursor:pointer}
.rail-item.is-clickable:hover .rail-num{border-color:var(--verdigris-br);color:var(--verdigris-br)}
.rail-item.is-clickable:hover .rt{color:var(--text)}
.rail-item:focus-visible{outline:2px solid var(--verdigris-br);outline-offset:3px;border-radius:6px}
.rail-item.is-active .rail-num{border-color:var(--verdigris);color:var(--verdigris-br);box-shadow:0 0 0 4px rgba(62,142,126,.12)}
.rail-item.is-done .rail-num{background:var(--verdigris);border-color:var(--verdigris);color:#0f1216}
@media(max-width:760px){nav.rail{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:10px}.rail-item{flex-direction:column;min-width:120px}.rail-item .rd{display:none}}

section[data-step]{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){section[data-step],.seal{animation:none!important}}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--verdigris-br);margin:0 0 8px}
h2.h{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.12;margin:0 0 8px}
.lede{color:var(--mut);max-width:62ch;margin:0 0 26px}
/* Trust Center */
.tc-rail{display:flex;flex-direction:column;gap:4px}
.tc-navitem{text-align:left;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--mut);font:inherit;font-size:15px;padding:9px 12px;cursor:pointer}
.tc-navitem.is-active{background:var(--slate);border-color:var(--line);color:var(--text)}
.tc-navitem.is-locked{opacity:.5;cursor:not-allowed}
.tc-rail-note{font-size:11.5px;color:var(--paper-mut);margin-top:10px;padding:0 4px;line-height:1.5}
.tc-empty{color:var(--mut);font-size:14px;padding:12px 0}
.tc-subrail{display:inline-flex;gap:3px;background:#14171E;border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:22px}
.tc-panel{min-width:0}
/* B2: inline verify tick + persistent green border once the account is confirmed on-chain */
.acct-wrap{position:relative;max-width:420px}
.acct-input{width:100%}
.acct-wrap .acct-tick{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;color:var(--verdigris,#3E8E7E);opacity:0;transition:opacity .12s;pointer-events:none}
.acct-input.is-verified{border-color:var(--verdigris,#3E8E7E)!important;padding-right:32px}
.acct-input.is-verified + .acct-tick{opacity:1}
.acct-input.is-notfound{border-color:#c15b5b!important}
/* F5: consistent muted sub-tab helper text */
.tc-panel .help{color:var(--mut)}
.tc-panel > fieldset > .help:first-of-type{font-size:12.5px;color:var(--mut);line-height:1.55}
/* C4: date-range + pager for vouches / received */
.tc-dr{font-size:12px;color:var(--mut);display:inline-flex;gap:5px;align-items:center}
.tc-dr input{background:#14171E;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:12px;padding:6px 8px}
.tc-pager{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:12px 0 2px}
.tc-pagerbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 2px}
.tc-pagerbar .tc-pager{margin:0}
#tc-inbox,#tc-vouches{min-height:6rem}
.tc-pg{background:#14171E;border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit;font-size:12px;min-width:30px;padding:6px 8px;cursor:pointer}
.tc-pg.is-active{background:var(--verdigris);border-color:var(--verdigris);color:#08110e;font-weight:600}
.tc-pg:disabled{opacity:.4;cursor:not-allowed}
.tc-pg-ellipsis{color:var(--paper-mut);padding:0 2px}
.tc-scan-status{font-size:12px;color:var(--mut);font-family:var(--mono);margin:2px 0 8px}
/* B4: discrete per-row single-vouch download */
.tc-dl{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--paper-mut);cursor:pointer;padding:5px;display:inline-flex;line-height:0}
.tc-dl:hover{color:var(--text);border-color:var(--line)}
/* D2: the trust payload preview wraps/scrolls inside its box, never past the viewport */
#tc-payload{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;overflow-x:auto}
.tc-vouch,.tc-receipt{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.tc-vouch:first-child,.tc-receipt:first-child{border-top:0}
.tc-vouch .who,.tc-receipt .who{font-family:var(--mono);font-size:14px}
.tc-vouch .msg,.tc-receipt .msg{color:var(--mut);font-size:13px;overflow-wrap:anywhere}
.tc-vouch .grow,.tc-receipt .grow{flex:1;min-width:0}
@media(max-width:760px){.tc-rail{flex-direction:row;flex-wrap:wrap;overflow-x:auto}.tc-rail-note{width:100%}}

/* type cards */
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-bottom:26px;min-width:0}
.tcard{display:flex;flex-direction:column;text-align:left;background:var(--slate);border:1px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;color:var(--text);transition:.18s;min-height:200px}
.tcard:hover{border-color:#46506180;transform:translateY(-1px)}
.tcard.is-selected{border-color:var(--verdigris);box-shadow:0 0 0 3px rgba(62,142,126,.16)}
/* three-zone skeleton: fixed-baseline header · flex body (one font) · pinned footer */
.tcard__header{display:flex;align-items:center;gap:6px;min-height:26px;font-family:var(--display);font-size:18px}
.tcard__header .tname{font-family:var(--display);font-size:18px}
.tcard__body{flex:1;font-size:13px;line-height:1.5;color:var(--mut);margin:8px 0 0}
.tcard__footer{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.tcard__footer.foot-register{color:var(--bronze)}
.tcard__footer.foot-route{color:var(--verdigris)}
.tcard.is-soon{opacity:.55;cursor:not-allowed}
.tcard.is-soon:hover{transform:none;border-color:var(--line)}
.tcard.is-soon .tname{opacity:1}
.tcard .soon{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);border:1px solid var(--line);border-radius:4px;padding:1px 5px;vertical-align:middle}
.tier-block .radio-row{gap:18px}
.substrate{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--verdigris);border-radius:10px;background:#14171E}
.substrate .sub-lab{font-weight:600;font-size:14px;margin-bottom:8px}
.substrate .radio-row{flex-direction:column;gap:8px;align-items:flex-start}
/* unified Citizen card: inline substrate reveal */
.tcard.tcard-citizen{display:block}
.card-substrate{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line)}
.card-substrate .radio-row{flex-direction:column;gap:7px;align-items:flex-start;font-size:13px}
.card-substrate label{cursor:pointer;display:flex;gap:7px;align-items:center}
/* redirect/signpost cards */
.tcard.is-signpost{border-style:dashed}
.tcard.is-signpost .tname .arrow,.tcard .arrow{color:var(--verdigris);font-weight:700}
.tcard.is-signpost .tcer{color:var(--verdigris)}
/* sub-civilization id inline validation */
.civ-id-wrap{position:relative}
.civ-id-wrap input{padding-right:30px}
.civ-id-state{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;line-height:1}
.civ-id-state[data-state="checking"]::after{content:"…";color:var(--mut)}
.civ-id-state[data-state="found"]::after{content:"✓";color:var(--verdigris)}
.civ-id-state[data-state="notfound"]::after{content:"✗";color:#d9534f}
.civ-id-state[data-state="error"]::after{content:"!";color:var(--bronze)}
.civ-id-wrap input.is-found{border-color:var(--verdigris)}
.civ-id-wrap input.is-notfound{border-color:#d9534f}
.civ-id-msg{min-height:0}
.civ-id-msg.is-found{color:var(--verdigris)}
.civ-id-msg.is-notfound{color:#d9534f}
.civ-id-msg.is-error{color:var(--bronze)}
.civ-id-msg .retry{background:none;border:0;color:var(--verdigris);cursor:pointer;text-decoration:underline;font:inherit;padding:0 0 0 6px}

/* form */
.field{margin-bottom:18px}
label.lab{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
label.lab .hint{font-weight:400;color:var(--paper-mut)}
input[type=text],input[type=password],textarea,select{
  width:100%;background:var(--slate);border:1px solid var(--line);color:var(--text);
  border-radius:var(--rs);padding:11px 12px;font:inherit;font-size:15px}
textarea{min-height:80px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--verdigris);box-shadow:0 0 0 3px rgba(62,142,126,.15)}
.help{font-size:12px;color:var(--paper-mut);margin-top:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:680px){.grid2,.grid3{grid-template-columns:1fr}}
fieldset.block{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 22px}
fieldset.block > legend{font-family:var(--display);font-size:17px;padding:0 8px;color:var(--text)}

.req{color:var(--danger);font-weight:600}
.reqkey{font-size:13px;color:var(--paper-mut);margin-left:6px}
input.ro{background:#191E27;color:var(--mut);cursor:default;border-style:dashed}
input.ro:focus{box-shadow:none;border-color:var(--line)}

details.info{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--rs);background:#1b212b}
details.info > summary{cursor:pointer;list-style:none;padding:9px 12px;font-size:13.5px;color:var(--verdigris-br);display:flex;align-items:center;gap:8px;user-select:none}
details.info > summary::-webkit-details-marker{display:none}
.popover{margin-top:8px;font-size:13px}
.popover > summary{cursor:pointer;color:var(--verdigris-br);user-select:none}
.popover > div{margin-top:7px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--verdigris);border-radius:8px;background:#14171E;color:var(--paper-mut);line-height:1.5}
details.info[open] > summary{border-bottom:1px solid var(--line)}
.i{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--verdigris);border-radius:50%;font-family:var(--display);font-style:italic;font-size:12px;color:var(--verdigris-br);flex:none}
.info-body{padding:12px 16px;font-size:13.5px;color:var(--mut)}
.info-body p{margin:0 0 8px}
.info-body ul,.info-body ol{margin:0 0 10px;padding-left:20px}
.info-body li{margin-bottom:6px}
.info-body b{color:var(--text)}
.oath-six li{margin-bottom:7px}

.preview-pill{display:inline-block;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5);color:#e7c75a;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:500;margin-right:10px;letter-spacing:.02em}

.btn{font:inherit;font-size:15px;font-weight:500;border-radius:var(--rs);padding:11px 18px;border:1px solid transparent;cursor:pointer;transition:.16s}
.btn.is-disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--verdigris);color:#0e1115;border-color:var(--verdigris)}
.btn-primary:hover{background:var(--verdigris-br)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--verdigris)}
.actions{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap}
.err{background:rgba(200,85,61,.12);border:1px solid rgba(200,85,61,.5);color:#f0b9ac;border-radius:var(--rs);padding:10px 12px;font-size:14px;margin-bottom:16px}

/* document previews */
.doc{background:var(--parchment);color:var(--paper-ink);border-radius:var(--r);margin-bottom:16px;overflow:hidden;border:1px solid #d8cfb8}
.doc-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:12px 16px;background:var(--parchment-2);border-bottom:1px solid #d8cfb8}
.doc-head .dt{font-family:var(--display);font-size:16px}
.doc-meta{font-family:var(--mono);font-size:11px;color:#7a715a;text-align:right;word-break:break-all;max-width:55%}
.doc-meta .doc-hash{color:#8a6d1f}
.doc-body{font-family:var(--mono);font-size:12.5px;line-height:1.5;white-space:pre-wrap;margin:0;padding:14px 16px;max-height:240px;overflow:auto;background:var(--parchment)}
details.payload summary{cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--verdigris-br);margin:6px 0 12px}
#payload-preview{font-family:var(--mono);font-size:12.5px;background:var(--slate);border:1px solid var(--line);border-radius:var(--rs);padding:14px;white-space:pre-wrap;max-height:300px;overflow:auto}

/* signing */
.signbox{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--slate-2)}
.warn{display:flex;gap:12px;background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.45);border-radius:var(--rs);padding:12px 14px;margin-bottom:16px}
.warn svg{flex:none;margin-top:2px}
.warn b{color:#e7c75a}
.warn .wt{font-size:13.5px;color:#e3dcc7}
.radio-row{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.radio-row label{display:flex;gap:8px;align-items:center;font-size:14px}
.key-line{display:flex;gap:8px}
.key-line .btn{padding:11px 12px}

/* flow progress */
.flow{list-style:none;padding:0;margin:18px 0}
.flow-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rs);margin-bottom:8px;color:var(--mut)}
.flow-dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.flow-item.is-active{color:var(--text);border-color:var(--verdigris)}
.flow-item.is-active .flow-dot{background:var(--bronze);animation:pulse 1s infinite}
.flow-item.is-done .flow-dot{background:var(--verdigris)}
.flow-item.is-error{border-color:var(--danger);color:#f0b9ac}
.flow-item.is-error .flow-dot{background:var(--danger)}
.flow-note{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--paper-mut)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
#flow-global-note{font-size:13px;color:var(--mut);min-height:1.2em;font-family:var(--mono)}

/* success / seal */
.seal-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 4px}
.seal{width:130px;height:130px;animation:stamp .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes stamp{0%{transform:scale(2.4) rotate(-12deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0)}}
.succ-card{background:var(--slate);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:18px 0}
.succ-title{font-family:var(--serif,var(--mono));font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-mut);margin:-2px 0 12px}
/* B1: force an unambiguous zero for civilization ids inside serif display titles
   (Fraunces renders a lining 0 that reads as "o" at heading size) */
.civ0{font-family:var(--mono);font-feature-settings:"zero" 1;font-size:.92em;letter-spacing:.01em;text-transform:none}
.succ-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.succ-row:last-child{border-bottom:0}
.succ-row .k{color:var(--mut)}
.succ-row .v{font-family:var(--mono);font-size:12.5px;word-break:break-all;text-align:right}
#download-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dl-one{font-family:var(--mono);font-size:12.5px}
footer{border-top:1px solid var(--line);color:var(--paper-mut);font-size:12.5px;padding:22px 0}
/* badge, prose, and stamp are separate centered blocks (never inline-wrapped, so
   "CIV0…" can't orphan against the preview badge); centered on every width. */
footer .foot-inner{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
footer .foot-desc{margin:0}
footer .footer-stamp{opacity:.85}
/* ---- responsive pass (desktop-first overrides) ---- */
.hamburger{display:none}
@media(max-width:768px){
  .hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:11px;order:-1}
  .hamburger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:.2s}
  .tabbar-inner{position:relative;flex-wrap:wrap;align-items:center}
  .tabbar-inner > .tab,.tabbar-inner > .more-wrap,.tabbar-inner > .tab-gap{display:none}
  .tabbar-inner.is-open{flex-direction:column;align-items:stretch;gap:2px;padding-bottom:10px}
  .tabbar-inner.is-open > .tab,.tabbar-inner.is-open > .more-wrap{display:flex;width:100%}
  .tabbar-inner.is-open > .tab{justify-content:flex-start;min-height:44px}
  .tabbar-inner.is-open .more-menu{position:static;box-shadow:none;border:0;padding-left:14px}
  .subrail-wrap{justify-content:flex-start;width:100%}
  .subrail-inner{display:none}
  .tc-subrail{display:none}
  .subtab-select{display:block;width:100%;min-height:44px;font-family:var(--body);font-size:15px;background:#14171E;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  .h{font-size:clamp(22px,6vw,30px)}
  .lede{font-size:15px}
  /* 1c: the Keychain detection hint drops to its own line below the label on
     mobile (no more "re-check" breaking mid-phrase against the constrained width) */
  .kc-hint{display:block;margin-top:3px;margin-left:26px}
  .wrap{padding-left:16px;padding-right:16px}
  /* B6: the Explorer keeps side gutters + bottom padding — controls and the
     results panel never sit flush against the viewport edge */
  #explorer-root{padding-left:16px;padding-right:16px;padding-bottom:48px}
  #explorer-root .exp-rows,#explorer-root .exp-controls{margin-left:0;margin-right:0}
  .seg,.tab,.btn{min-height:44px}
  .tcard{min-height:44px}
  input,select,textarea{min-height:42px}
  label.radio,.radio-row label{min-height:40px;display:flex;align-items:center}
}
@media(max-width:420px){
  .h{font-size:clamp(20px,7vw,26px)}
  .mast-inner,.tabbar-inner{padding-left:12px;padding-right:12px}
}

/* Settings panel (TASK 2/3) */
.settings-panel .node-list{list-style:none;margin:.4rem 0 1rem;padding:0}
.settings-panel .node-item{display:block;width:100%;text-align:left;margin:.25rem 0;padding:.55rem .7rem;background:var(--slate-2);color:inherit;border:1px solid var(--line);border-radius:8px;cursor:pointer;font:inherit}
.settings-panel .node-item:hover{border-color:var(--verdigris)}
.settings-panel .node-item.is-selected{border-color:var(--verdigris);box-shadow:0 0 0 1px var(--verdigris)}
.settings-panel .toggle-row{display:flex;align-items:center;gap:.5rem;margin:.4rem 0}
.settings-panel .node-status{color:var(--paper-mut);font-size:.85rem;margin:.3rem 0 0}
.settings-panel .node-status.is-backup{color:var(--verdigris)}
.settings-panel .range-wrap{display:flex;align-items:center;gap:10px;margin:.4rem 0 1rem}
.settings-panel .range-label{min-width:240px}
.settings-panel .range-value{font-family:var(--mono);font-size:.85rem;min-width:40px}
.settings-panel input[type=range]{flex:1;min-width:0}
/* Range-cached readout + clear controls — Explorer (A2) */
.exp-rangeinfo{display:inline-block;font-family:var(--mono);font-size:.8rem;color:var(--paper-mut);max-width:100%;overflow-wrap:anywhere;white-space:normal;margin:.3rem 0}
#exp-clear,#tc-vch-clear,#tc-rcv-clear{white-space:nowrap}

/* Trust Center range toolbar — one flat flex row (v0.6.4). No nested wrappers:
   date labels, Scan, and Clear share a single wrapping flex line with one
   uniform 10px gap, so controls can never stack or sit flush. */
.tc-toolbar-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:2px 0 12px}