/* Beacon shared components (lane A), "Evolved" look: pill buttons, soft cards, sentence-case labels, one family.
   Class names are the 0.5/0.6 contract (docs/BLUEPRINT.md §4) so every view keeps working. */

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s5);border:1px solid var(--btn-2-edge);border-radius:var(--r-pill);background:var(--btn-2);color:var(--btn-2-ink);font:var(--fw-semibold) var(--fs-body)/1.2 var(--font);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--d-1)}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.btn.primary:hover{background:var(--btn);opacity:.9}
.btn.danger{color:var(--late);border-color:var(--late);background:var(--surface)}
.btn.danger:hover{background:var(--late-wash)}
.btn.sm{min-height:36px;padding:0 var(--s4);font-size:var(--fs-small)}
.btn.icon{width:var(--tap);padding:0;border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.icon:hover{background:var(--sunk);color:var(--ink)}
.btn.icon.sm{width:36px;min-height:36px}
.btn.full{width:100%}
.btn .ico{width:18px;height:18px}
/* tertiary: ink text with a gold underline (gold is never text) */
.tbtn{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 var(--s1);border:0;background:none;color:var(--ink);font:var(--fw-semibold) var(--fs-body)/1.2 var(--font);text-decoration:underline;text-decoration-color:var(--gold-fill);text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
.tbtn:hover{text-decoration-color:currentColor}
.tbtn.danger{color:var(--late);text-decoration-color:currentColor}
.link{color:var(--ink);font-weight:var(--fw-semibold);display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);text-decoration:underline;text-decoration-color:var(--gold-fill);text-decoration-thickness:2px;text-underline-offset:5px}
.link:hover{text-decoration-color:currentColor}
.acts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
label.btn input[type=file]{display:none}

/* ---------- pills (the old chips): sentence case, soft fill ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:0;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);font:var(--fw-semibold) var(--fs-tiny)/1.5 var(--font);letter-spacing:0;text-transform:none;white-space:nowrap}
.chip.agent,.chip.gold,.chip.seller{background:var(--gold-tint);color:var(--ink)}
.chip.admin,.chip.buyer,.chip.info{background:var(--second-wash);color:var(--second)}
.chip.design,.chip.mute{background:var(--sunk);color:var(--ink-2)}
.chip.premium,.chip.ex{background:transparent;box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink-2)}
.chip.ok{background:var(--ok-wash);color:var(--ok)}
.chip.wait{background:var(--soon-wash);color:var(--soon)}
.chip.late,.chip.no{background:var(--late-wash);color:var(--late)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--r-pill);background:var(--gold-tint);color:var(--ink);font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-fill)}

/* ---------- fields ---------- */
.field{display:grid;gap:6px;min-width:0}
.field>label,.field>.kicker,.flabel,.legend{font:var(--fw-semibold) var(--fs-small)/1.4 var(--font);color:var(--ink-2);letter-spacing:0;text-transform:none}
.field.inline{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s3)}
.opt{font-weight:var(--fw-regular);color:var(--muted)}
.help{font-size:var(--fs-small);color:var(--muted);max-width:var(--measure)}
.err{font-size:var(--fs-small);color:var(--late);background:var(--late-wash);padding:var(--s2) var(--s3);border-radius:var(--r-sm)}
.two,.three{display:grid;gap:var(--s4) var(--s5)}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.two,.three{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);font-size:var(--fs-body);cursor:pointer}
.check input{flex:none}
.grid-dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--s4) var(--s5)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s5);font-size:var(--fs-small)}
.kv dt{color:var(--muted);font-weight:var(--fw-semibold)}
.kv dd{margin:0}

/* ---------- dialog (modal) and sheet ---------- */
dialog.dlg{width:min(36rem,100vw - 32px);max-height:calc(100dvh - 48px);padding:var(--s6);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:auto}
dialog.dlg.wide{width:min(48rem,100vw - 32px)}
dialog.dlg::backdrop,dialog.pop.sheet::backdrop{background:rgba(20,18,16,.45)}
dialog.dlg h2{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--fw-bold);letter-spacing:-.015em;margin-bottom:var(--s2)}
dialog.dlg form{gap:var(--s5)}
.dlg-acts{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;padding-top:var(--s2)}
@media (max-width:720px){
  dialog.dlg,dialog.pop.sheet{inset:auto 0 0 0;width:100%;max-width:none;max-height:92dvh;margin:0;padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-sheet);animation:sheet-up var(--d-3) var(--ease)}
  dialog.dlg .dlg-acts{position:sticky;bottom:calc(-1 * var(--s5));background:var(--surface);padding:var(--s3) 0;margin-top:var(--s2)}
}
@keyframes sheet-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* ---------- popover ---------- */
dialog.pop{position:fixed;inset:auto;margin:0;max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;padding:var(--s4);border-radius:var(--r-md);box-shadow:var(--shadow-pop);background:var(--surface);z-index:50;animation:pop-in var(--d-1) var(--ease)}
dialog.pop form{gap:var(--s3)}
dialog.pop .dlg-acts{padding-top:0}
dialog.pop legend{margin-bottom:var(--s1)}
dialog.pop .check-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
dialog.pop .check-cols>legend{grid-column:1/-1}
@media (max-width:720px){dialog.pop .check-cols{grid-template-columns:minmax(0,1fr)}}
.pop-links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-small);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.pop-links a{font-weight:var(--fw-semibold);text-decoration:underline;text-decoration-color:var(--gold-fill);text-decoration-thickness:2px;text-underline-offset:4px;min-height:36px;display:inline-flex;align-items:center}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- menu ---------- */
details.menu{position:relative;display:inline-block}
details.menu summary{list-style:none}
details.menu summary::-webkit-details-marker{display:none}
details.menu .menu-list{position:absolute;right:0;top:calc(100% + 8px);min-width:15rem;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:var(--s2);z-index:40;display:grid}
details.menu .menu-list button,details.menu .menu-list a{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--tap);padding:0 var(--s3);border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:var(--fw-medium) var(--fs-body)/1.3 var(--font);text-align:left;text-decoration:none;cursor:pointer}
details.menu .menu-list button:hover,details.menu .menu-list a:hover{background:var(--hover)}
details.menu .menu-list .danger{color:var(--late)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:var(--s2);margin:var(--s7) 0 var(--s5);padding:0;background:none;border:0;box-shadow:inset 0 -1px 0 var(--hairline);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:var(--s2);min-height:52px;padding:0 var(--s4);border:0;border-bottom:3px solid transparent;margin:0;color:var(--ink-2);font:var(--fw-medium) var(--fs-body)/1.2 var(--font);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;background:none;border-radius:0}
.tabs a:first-child{padding-left:0}
.tabs a .num{display:none}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current=page]{color:var(--ink);font-weight:var(--fw-semibold);border-bottom-color:var(--gold-fill)}

/* ---------- segmented control: soft pills ---------- */
.seg{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:var(--r-pill);background:var(--sunk)}
.seg>button,.seg>a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 var(--s4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:var(--fw-medium) var(--fs-small)/1.2 var(--font);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;white-space:nowrap}
.seg>button:hover,.seg>a:hover{color:var(--ink)}
.seg>[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:var(--fw-semibold);box-shadow:0 1px 2px rgba(23,21,15,.12)}
.seg.sm>button,.seg.sm>a{padding:0 var(--s3)}

/* ---------- cards, sections, tables, rows ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.module,.sec{border:0;padding:0;background:none;border-radius:0}
.module-head,.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);margin-bottom:var(--s4)}
.module-head h2,.sec-head h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-semibold)}
.module-head .hint,.sec-head .hint{flex-basis:100%;font-size:var(--fs-small);color:var(--muted);max-width:var(--measure)}
.module-head .count,.sec-head .count{color:var(--muted);font-size:var(--fs-small)}
table.ledger tfoot td{border-top:1px solid var(--edge);border-bottom:0;font-weight:var(--fw-semibold)}
table.ledger.tight td,table.ledger.tight th{padding-top:var(--s2);padding-bottom:var(--s2)}
.rows{display:grid}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);min-height:var(--row);border-bottom:0;border-radius:var(--r-md);padding:var(--s2) var(--s2)}
.row:hover{background:var(--hover)}
.row.is-sel{background:var(--sel)}
.row-main{min-width:0}
.row-side{display:flex;align-items:center;gap:var(--s3);white-space:nowrap;font-size:var(--fs-small);color:var(--muted)}

/* ---------- numbers line, progress ---------- */
.numbers{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-small);color:var(--muted)}
.numbers b,.numbers .numlink b{color:var(--ink);font-weight:var(--fw-semibold)}
.numlink{display:inline-flex;align-items:baseline;gap:.35ch;min-height:var(--tap);border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.numbers .numlink{align-items:center}
.numlink:hover{text-decoration:underline;text-decoration-color:var(--gold-fill);text-decoration-thickness:2px;text-underline-offset:4px}
.numlink.late b{color:var(--late)}
.bar{display:inline-block;position:relative;width:7rem;height:6px;border-radius:var(--r-pill);background:var(--track);overflow:hidden;vertical-align:middle}
.bar i{position:absolute;left:0;top:0;bottom:0;min-width:6px;background:var(--fill);border-radius:inherit}
.bar.done i{background:var(--ok)}

/* ---------- key-dates line (deadline rule): dots on a soft track ---------- */
.rule-line{position:relative;height:6rem;min-width:36rem;margin:var(--s3) 0}
.rule-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--track);border-radius:2px}
.rule-line.compact{height:4.5rem;min-width:0}
.rl-tick{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:3px;width:var(--tap);min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink);font-family:var(--font);text-decoration:none;cursor:pointer}
.rl-tick::after{content:"";grid-row:2;width:12px;height:12px;border-radius:50%;background:var(--fill);border:2px solid var(--fill)}
.rl-tick .k{grid-row:1;font-size:var(--fs-tiny);font-weight:var(--fw-semibold);color:var(--ink-2);white-space:nowrap}
.rl-tick .v{grid-row:3;font-size:var(--fs-tiny);color:var(--ink);white-space:nowrap}
.rl-tick .rel{grid-row:4;font-size:.8125rem;color:var(--muted);white-space:nowrap}
.rl-tick.alt{grid-template-rows:auto auto auto auto}
.rl-tick.alt .k{grid-row:3}.rl-tick.alt .v{grid-row:1}.rl-tick.alt .rel{display:none}
.rl-tick.past::after{transform:scale(.75)}
.rl-tick.next::after{width:16px;height:16px;background:var(--gold-fill);border-color:var(--gold-fill);box-shadow:0 0 0 5px var(--gold-tint)}
.rl-tick.next .k,.rl-tick.next .v{color:var(--ink);font-weight:var(--fw-bold)}
.rl-tick.future::after{background:var(--surface);border-color:var(--ink-2)}
.rl-tick.unset::after{background:var(--surface);border:2px dashed var(--muted)}
.rl-tick.unset .v{color:var(--muted)}
.rl-tick:hover .k{color:var(--ink)}
.rl-today{position:absolute;top:22%;bottom:22%;width:2px;margin-left:-1px;background:var(--ink);border-radius:2px}
.rl-today span{position:absolute;top:-1.4em;left:50%;transform:translateX(-50%);font:var(--fw-semibold) .8125rem/1 var(--font);color:var(--ink);white-space:nowrap}
.rl-prep{position:absolute;top:calc(50% + 14px);width:10px;height:10px;transform:translateX(-50%) rotate(45deg);border:2px solid var(--ink-2);background:var(--surface)}
.rl-prep.late{border-color:var(--late)}
.rule-wrap{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.rule-line.compact .rl-tick.quiet .k,.rule-line.compact .rl-tick.quiet .v{visibility:hidden}
.rule-line.compact .rl-tick.quiet:hover .k,.rule-line.compact .rl-tick.quiet:focus-visible .k{visibility:visible}
.rule-line.compact .rl-today span{display:none}
.rule-line-empty{margin:var(--s3) 0;color:var(--muted);font-size:var(--fs-small)}

/* ---------- figure, empty, skeleton ---------- */
figure.fig-chart{margin:0;padding:0;border:0}
figure.fig-chart figcaption{margin-bottom:var(--s4)}
figure.fig-chart figcaption .kicker{font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--ink);font-weight:var(--fw-semibold)}
figure.fig-chart figcaption p:not(.kicker){font-size:var(--fs-small);color:var(--muted);max-width:var(--measure);margin-top:2px}
.empty{padding:var(--s5) 0;display:grid;gap:var(--s2)}
.empty .kicker{color:var(--ink);font-size:var(--fs-body)}
.empty p:not(.kicker){color:var(--muted);font-size:var(--fs-small)}
.skel{display:block;height:1em;background:var(--sunk);border-radius:var(--r-sm);margin:var(--s2) 0}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:var(--s5);bottom:var(--s5);z-index:70;display:grid;gap:var(--s2);max-width:min(26rem,calc(100vw - 32px));pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s5);background:var(--btn);color:var(--btn-ink);border:0;border-radius:var(--r-md);box-shadow:var(--shadow-pop);font-size:var(--fs-body);opacity:0;transform:translateY(8px);transition:opacity var(--d-2) var(--ease),transform var(--d-2) var(--ease);pointer-events:auto;position:static;left:auto;bottom:auto;max-width:none}
.toast.on{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(8px)}
.toast.late::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--late);flex:none}
.toast-t{flex:1 1 auto}
.toast-act{border:0;background:none;color:inherit;font:var(--fw-bold) var(--fs-body)/1 var(--font);min-height:36px;padding:0 var(--s2);cursor:pointer;text-decoration:underline;text-decoration-color:var(--band-gold);text-decoration-thickness:2px;text-underline-offset:4px}
.toast-x{border:0;background:none;color:inherit;opacity:.7;font-size:1.25rem;line-height:1;min-width:36px;min-height:36px;border-radius:var(--r-sm);cursor:pointer}
.toast-x:hover{opacity:1}
@media (max-width:720px){.toasts{left:var(--s4);right:var(--s4);bottom:calc(var(--tabbar) + var(--s3));max-width:none}}

/* ---------- avatar, rails, script block, redaction ---------- */
.avatar{--av:36px;display:inline-grid;place-items:center;width:var(--av);height:var(--av);border:0;padding:0;border-radius:50%;font:var(--fw-bold) var(--fs-tiny)/1 var(--font);cursor:default;background:var(--sunk);color:var(--ink-2)}
.avatar[data-color=accent]{background:var(--gold-tint);color:var(--ink)}
.avatar[data-color=second]{background:var(--second-wash);color:var(--second)}
.avatar[data-color=ink]{background:var(--ink);color:var(--bg)}
button.avatar{cursor:pointer}
.rail-seller,.rail-buyer{position:relative;padding-left:var(--s4)}
.rail-seller::before,.rail-buyer::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--gold-fill)}
.rail-buyer::before{background:var(--second-fill)}
.footnote{background:var(--sunk);padding:var(--s4) var(--s5);border-radius:var(--r-md);white-space:pre-wrap;max-width:72ch;font-size:var(--fs-small);line-height:1.6}
.footnote .mono{font-weight:var(--fw-semibold)}
.redacted{position:relative;background:repeating-linear-gradient(45deg,transparent 0 6px,var(--hairline) 6px 7px);padding:var(--s3) var(--s4);border-radius:var(--r-md)}
.redacted>.kicker{color:var(--ink);background:var(--surface);display:inline-block;padding:0 6px;border-radius:6px}
.redacted>*:not(.kicker){color:var(--ink-2)}

/* ---------- What's new and More ---------- */
ul.changes{margin:var(--s2) 0 var(--s5);padding-left:1.2em;font-size:var(--fs-body);line-height:1.6;max-width:var(--measure)}
ul.changes li+li{margin-top:var(--s2)}
.releases{gap:var(--s5)}
.releases>.module{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s5) var(--s6)}
.releases>.module .module-head .kicker{font-size:var(--fs-h2);color:var(--ink)}
.releases>.module>.kicker{color:var(--ink);margin-top:var(--s3)}
.more-list a{display:flex;align-items:center;min-height:52px;padding:0 var(--s2);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-weight:var(--fw-semibold)}
.more-list a:hover{background:var(--hover)}

/* ---------- account block in the acting-as popover ---------- */
.pop-acct{padding-bottom:var(--s3);margin-bottom:var(--s1);border-bottom:1px solid var(--hairline)}
.pop-email{font-weight:var(--fw-semibold);overflow-wrap:anywhere}
.pop-acct .acts{gap:var(--s4)}