@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
/* ============================================================
   OMBRENNA - project stylesheet (single source of truth)
   Art direction: «Iron Woodcut» - bone on neutral coal-black, corner
   radius 0, hairline borders only. Two chromatic materials ONLY:
   blood (Health / cost / danger) and ember (the Wick / light / candle).
   Everything else is the ivory ink scale - no second hue.
   Legacy token NAMES are kept but remapped to Iron Woodcut values, so
   the whole component sheet re-skins from this one block.
   ============================================================ */
:root{
  /* the dossier head's height budget: the portrait's own side */
  --sheet-portrait:96px;
  /* ground - neutral coal-black; never pure black */
  --void:#0A0A0B; --ink:#5C564E; --panel:#101011; --panel-2:#141416;
  --edge:rgba(211,207,199,.12); --edge-2:rgba(211,207,199,.2);
  /* ivory ink scale (was "parchment") */
  --parch:#D3CCC0; --parch-dim:#8F877C; --parch-faint:#6B655C;
  /* generic accent → ivory emphasis (bone). Iron Woodcut has NO amber UI
     accent: "active / yours / primary" reads as bright ink or a bone
     plate, never a colour - save the named uses of --amber below (a
     masterpiece's quality stars; everything not seen yet: the Deeds tab's
     unseen count, the bell's unread count, a deed card's NEW mark - KB-347).
     Ember stays reserved for light: the Wick / candle, a job that runs, a
     thing ready to take or spend (KB-347). */
  --lantern:#F0EAE0; --lantern-soft:#F0EAE0; --lantern-deep:#8F877C;
  /* blood - Health, cost, danger (ramp darkens toward 0, never lightens) */
  --rust:#6E1C23; --rust-soft:#A04545;
  /* material meters: HP = blood, Wick = ember. No green/teal/gold hues. */
  --hp:#6E1C23; --wick:#E85A10; --gold:#D3CCC0; --moss:#8F877C; --sea:#6B655C;
  /* ember material - the only light in the world */
  --ember-hot:#E85A10; --ember-mid:#B33207; --ember-deep:#6E1604;
  --ember-flame:#F0641A; --ember-text:#D2571C; --ember-glow:rgba(232,96,24,.20);
  --ember:var(--ember-flame);
  /* amber - TWO meanings only: a masterpiece's quality stars (owner ROUND28 note 7, KB-274) and "not seen yet":
     the Deeds tab's count of deeds not seen yet (owner Q25, N32b, round 33), the bell's unread count (the header and
     the dock's Me) and a deed card's NEW mark (owner Q2, KB-347 B4, 2026-10-07). The worn title is an EMBER plate
     (the owner, 2026-10-07: "darker, the Wick's colour is better") - see .chip.title */
  --amber:#E3A13A;
  /* blood material - full ramp for the Health well */
  --blood-arterial:#6E1C23; --blood-mid:#4A1015; --blood-venous:#1E0507;
  --blood-text:#A04545; /* readable arterial red - the HP figure (parallels --ember-text) */
  /* two voices */
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'EB Garamond',Georgia,serif;
  --mono:'Courier Prime',ui-monospace,Menlo,monospace;
  --r:0;   /* corner radius 0 everywhere (only the notification badge is a circle) */
}
/* --mnav: the height the phone's bottom menu takes from the screen - 57px where it shows (820px and below), 0 where it
   does not (wider, or stepped aside on the dark's own screens, KB-344 L3-13). The layouts that sit on the screen's foot
   count it instead of a typed 57. */
body{--mnav:0px}
@media(max-width:820px){body{--mnav:57px}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--void);color:var(--parch);font-family:var(--serif);
  font-size:16px;-webkit-font-smoothing:antialiased}
/* woodcut grain + candle vignette over the whole page (Iron Woodcut texture) */
/* z-index tier (KB-155): vignette 99 < delve-map paper 100 < grain 101 < all chrome.
   the delve map is lifted above the borrowed viewport vignette so its edge labels
   stay legible; the grain stays over the paper; every interactive layer sits above
   the map - nav 110, mobile nav 111, bugfab 115/116, mocknote 118, modal 120, toast 130 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:101;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:radial-gradient(132% 100% at 50% 42%,transparent 56%,rgba(0,0,0,.42))}
a{color:var(--lantern);text-decoration:none;transition:color .2s} a:hover{color:var(--lantern-soft)}
::selection{background:rgba(110,28,35,.5);color:#F0EAE0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#29292c}
::-webkit-scrollbar-track{background:transparent}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mut{color:var(--parch-dim)} .faint{color:var(--parch-faint)}

/* ---------- page shell ---------- */
.page{display:flex;flex-direction:column;min-height:100vh}
.page > main{flex:1 1 auto}

/* ---------- top chrome (persistent, all screens) ---------- */
/* .ct-chrome carries the ONE sticky for header + season strip together, so no
   hard-coded top offset can ever drift from the real header height again */
.ct-chrome{position:sticky;top:0;z-index:110}
.ct-chrome .ct-top,.ct-chrome .ct-season{position:static;top:auto}
.ct-top{position:sticky;top:0;z-index:110;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--edge)}
.ct-brand{font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:.2em;
  color:var(--lantern-soft);white-space:nowrap;transition:color .2s}
a.ct-brand:hover{color:var(--ember-flame)}
.ct-nav{display:flex;flex-wrap:wrap;gap:2px;padding:3px 12px 4px;
  background:var(--panel);border-bottom:1px solid var(--edge)}
.ct-nav a{flex:1 1 auto;text-align:center;white-space:nowrap}
.ct-nav a{padding:6px 11px;border-radius:0;font:400 .92rem/1 var(--serif);color:var(--parch-dim);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ct-nav a:hover{color:var(--parch)}
.ct-nav a.on{color:#F0EAE0;background:transparent;border-bottom:1px solid #F0EAE0}
/* N36, round 33 (owner Q6 a): the menu's four pairs (Quests Work | Vigil The Dark | Pack Market | Dossier Stall) are
   told apart by a thin vertical rule; desktop only (the phone's dock has its own five tabs and hides the whole nav) */
.nav-sep{display:inline-block;flex:none;align-self:center;width:1px;height:1em;background:var(--edge-2);margin:0 8px;vertical-align:middle}
.ct-stats{display:flex;gap:0;margin-left:auto;border:1px solid var(--edge)}
.stat{background:transparent;border:0;border-left:1px solid var(--edge);border-radius:0;padding:.38rem .7rem;min-width:62px}
.stat:first-child{border-left:0}
.stat .k{font:600 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint)}
.stat .v{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-top:.2rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--parch)}
.stat .v small{font-size:.6em;color:var(--parch-faint);font-weight:400}
.stat.coins .g-short{display:none}
.stat.hp .v{color:var(--blood-text)} .stat.wick .v{color:var(--ember-text)}
.stat .hp-ceil.held{color:var(--ember-text)}  /* N05: the second number of the HP cell wears the Wick colour while the Wick holds the heal back */
.ct-tools{display:flex;gap:.4rem;align-items:stretch;align-self:stretch}
.ct-bell{position:relative;width:40px;align-self:stretch;border-radius:0;background:transparent;
  border:1px solid var(--edge-2);color:var(--parch);font-size:.95rem;cursor:pointer;transition:color .2s,border-color .2s}
.ct-bell:hover{color:var(--lantern);border-color:var(--parch)}

/* ---------- season readout strip ---------- */
.ct-season{display:flex;align-items:baseline;gap:8px;
  font:italic .82rem/1.3 var(--serif);color:var(--parch-dim)}
.ct-season .age{color:var(--rust-soft)}
.ct-season .cr{margin-left:auto;font:500 .62rem/1.45 var(--mono);color:var(--parch-faint);font-style:normal;text-align:right}

/* ---------- footer (secondary destinations) ---------- */
.ct-foot{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--panel);border-top:1px solid #1a1a1c}
.ct-foot a{font:500 .78rem/1 var(--sans);color:var(--parch-dim)}
.ct-foot a:hover{color:var(--parch)}
.ct-foot .hint{margin-left:auto;font:500 .72rem/1 var(--sans);color:var(--parch-faint)}

/* ---------- control buttons (icons) ---------- */
.mbtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font:600 1rem/1 var(--sans);
  color:var(--parch);background:var(--panel);border:1px solid var(--edge-2);border-radius:0;cursor:pointer;transition:.15s}
.mbtn:hover{border-color:#4a4a50;color:var(--lantern-soft)}
.mbtn.on{color:var(--lantern-soft);border-color:var(--lantern-deep)}

/* ---------- content layout ---------- */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:22px 20px 40px}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* ---------- panel ---------- */
.panel{background:var(--panel-2);border:1px solid var(--edge);border-radius:var(--r);padding:16px 17px}
.panel > .ph{display:flex;align-items:baseline;gap:.6rem;margin-bottom:12px}
.panel > .ph h2{font-size:1rem}
.panel > .ph .eyebrow{font:600 .56rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--parch-faint)}
.panel > .ph .aside{margin-left:auto;font:500 .75rem/1 var(--sans);color:var(--parch-dim)}
.panel > .ph .ph-act{margin-left:auto;align-self:center;display:flex;gap:8px}

/* ---------- key/value rows ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem}
.kv dt{color:var(--parch-dim)} .kv dd{margin:0;text-align:right;font-family:var(--mono);color:var(--parch)}
.kv dd.word{font-family:var(--serif)}
.gain{color:var(--moss)} .loss{color:var(--rust-soft)}

/* ---------- chips (status language - one wording per status set-wide) ---------- */
/* KB-347 B1: the capitals sit on the box's centre. 2 px of padding move from the bottom to the top (the height
   stays), the right side gives back the letter-spacing the last letter carries, and 700 is the face that is drawn. */
.chip{display:inline-flex;align-items:center;gap:5px;font:700 .6rem/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;padding:6px 8px 2px;padding-right:calc(8px - .08em);border-radius:0;border:1px solid var(--edge-2);color:var(--parch-dim)}
.chip.danger{color:var(--rust-soft);border-color:#5a232a;background:#1c0a0c}
.chip.parked{color:var(--parch-faint);border-color:var(--edge-2);background:transparent}
/* KB-347 B3: yours - a title, an honour, a rung or a deed reward you earned, the patron, the picked, the insured item:
   bright ivory on an outline (the one solid ivory is the WORN plate) */
.chip.on{color:var(--lantern);border-color:var(--parch-dim);background:transparent}
/* the worn title: no plate, a frame in the Wick's ember (--ember-mid: the darker steps vanish on the ground), ivory
   ink (owner 2026-10-07, fifth look: "remove the background, only the frame stays in the colour"; KB-347) */
.chip.title{color:var(--lantern);background:transparent;border-color:var(--ember-mid);font-weight:700}
.chip.title .mtip{color:var(--parch);font-weight:400}
/* N11b (round 33 W9): the worn title after a name, "Name, the Title" - smaller and dimmer than the
   name, the same font at a normal weight. Dimmer by OPACITY, never by a colour of its own: the title
   takes the colour of the name it follows and shows 75% of it, so it is dimmer than the name in every
   place (a fixed grey was brighter than the faint maker cell of the Exchange's buy book). Plain inline
   text, so on a phone it may wrap under the name. templates/partials/soul-name.html and
   public/js/fight.js draw it. */
.soul-title{font-family:inherit;font-weight:400;font-style:normal;font-size:.82em;opacity:.75}
/* KB-347 B4 (owner Q2): not seen yet is amber - a deed card's NEW mark is the amber outline chip, after the
   name (the counts on the Deeds tab and the bell are the amber circle, .nav-badge.amber) */
.chip.new{color:var(--amber);border-color:rgba(227,161,58,.55);background:transparent}
.deed-t .chip.new{margin-left:8px;vertical-align:middle}
/* KB-347 B3: the tag - a kind (DAILY, BUY, SELL, a helper's trade, a foe's kit): grey text between two drawn brackets,
   no fill; the height is the line plus 4 px on top and 2 px below, so the capitals sit on the centre */
.tag{--tk:var(--parch-faint);display:inline-block;box-sizing:border-box;font:700 .58rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--parch-dim);padding:4px 7px 2px;padding-right:calc(7px - .14em);white-space:nowrap;
  background:linear-gradient(var(--tk),var(--tk)) left top/1px 100% no-repeat,
    linear-gradient(var(--tk),var(--tk)) right top/1px 100% no-repeat,
    linear-gradient(var(--tk),var(--tk)) left top/4px 1px no-repeat,
    linear-gradient(var(--tk),var(--tk)) left bottom/4px 1px no-repeat,
    linear-gradient(var(--tk),var(--tk)) right top/4px 1px no-repeat,
    linear-gradient(var(--tk),var(--tk)) right bottom/4px 1px no-repeat}

/* ---------- meters (HP / Wick / progress) ---------- */
.meter{position:relative;height:12px;background:#1b1b1d;border-radius:0;overflow:hidden}
.meter > i{position:absolute;inset:0 auto 0 0;border-radius:0}
.meter.hp > i{background:var(--hp)} .meter.wick > i{background:var(--wick)}
.meter .mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:#f2e2b4}      /* healing-ceiling marker */
.meter .gutter{position:absolute;top:0;bottom:0;left:0;width:25%;
  background:repeating-linear-gradient(45deg,#333338,#333338 3px,transparent 3px,transparent 6px)}
.meter-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:.85rem}
.meter-row .v{font-family:var(--mono)}

/* ---------- the Six (stat dice) ---------- */
.die{background:var(--panel);border:1px solid var(--edge-2);border-radius:9px;padding:11px 12px}
.die .row{display:flex;align-items:baseline;gap:.5rem}
.die .abbr{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--lantern-soft)}
.die .name{font-size:.78rem;color:var(--parch-dim)}
.die .val{margin-left:auto;font:700 1.35rem/1 var(--mono);font-variant-numeric:tabular-nums}
.die .val .draft{color:var(--lantern-soft)}
.die .hint{font-size:.76rem;color:var(--parch-faint);font-style:italic;margin-top:5px;line-height:1.35}
.die .adj{display:flex;gap:6px;margin-top:8px}
.stepper{width:26px;height:26px;border-radius:6px;border:1px solid var(--edge-2);background:var(--panel);
  color:var(--parch);font-family:var(--mono);cursor:pointer}
.stepper:hover:not(:disabled){border-color:var(--lantern-deep);color:var(--lantern-soft)}
.stepper:disabled{opacity:.35;cursor:not-allowed}
/* a <select> wearing .stepper needs room for its text - the 26px square is for the ± buttons */
select.stepper{width:auto;min-width:130px;height:auto;padding:.35rem .5rem}

/* ---------- buttons - Iron Woodcut: bone plate (primary) / hairline ghost (rest) ---------- */
.btn{font:500 .74rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--parch);
  background:transparent;border:1px solid var(--edge-2);border-radius:0;padding:10px 15px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.btn:hover:not(:disabled){border-color:var(--parch);color:var(--lantern)}
.btn.primary{background:var(--parch);border-color:var(--parch);color:var(--void)}
.btn.primary:hover:not(:disabled){background:#F0EAE0;border-color:#F0EAE0;color:var(--void)}
.btn.good{background:transparent;border-color:#6E1604;color:#E85A10}
.btn.good:hover:not(:disabled){border-color:#E85A10;color:#F0641A}
.btn.danger{background:transparent;border-color:#5a232a;color:var(--rust-soft)}
.btn.danger:hover:not(:disabled){border-color:var(--rust-soft);color:#B04A42}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn-reason{font-size:.75rem;color:var(--rust-soft);margin-top:5px;font-style:italic}

/* ---------- derived-parameter table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;font:600 .56rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--parch-faint);padding:0 0 8px;border-bottom:1px solid var(--edge)}
.tbl td{padding:9px 0;border-bottom:1px solid #1a1a1c;vertical-align:top}
.tbl td.n{font-family:var(--mono);text-align:right;white-space:nowrap;color:var(--parch)}
.tbl td .h{color:var(--parch-faint);font-size:.78rem;font-style:italic}
.tbl td .feeds{font:600 .56rem/1 var(--mono);letter-spacing:.06em;color:var(--lantern-deep)}

/* ---------- equipment / satchel slots ---------- */
/* gate pack-picker */
.pack-list{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--void);margin-top:4px}
.pack-row{display:flex;align-items:baseline;gap:12px;background:transparent;border:0;border-top:1px solid var(--edge);padding:11px 14px;width:100%;text-align:left;font-family:inherit;cursor:pointer;color:var(--parch)}
.pack-row:first-child{border-top:0}
.pack-row:hover{background:var(--panel-2)}
.pack-row .pr-ic{font-size:1.1rem;flex:none}
.pack-row .io-img{width:32px;height:32px;flex:none}
/* reward / shop - two inventories side by side (node offering + your satchel) */
.dual-inv{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dual-inv > .panel{margin:0}
@media(max-width:760px){.dual-inv{grid-template-columns:1fr}}
.pack-row .pr-b{font-family:var(--serif);font-size:1rem;color:var(--parch);flex:none}
.pack-row .pr-d{font-family:var(--mono);font-size:.74rem;color:var(--parch-faint)}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{width:60px;height:60px;border-radius:8px;border:1px solid var(--edge-2);background:#121214;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;text-align:center}
.slot .g{font-size:1.3rem;line-height:1}
.slot .lbl{font:600 .5rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--parch-faint)}
.slot.filled{border-color:#514b40;background:#1a1a1c}
.slot.secure{border-color:var(--lantern-deep);box-shadow:0 0 0 1px var(--lantern-deep) inset}
.slot.secure::after{content:"⛨";position:absolute;top:-8px;right:-6px;font-size:.7rem;color:var(--lantern-soft);z-index:2}
.slot .io-img{width:52px;height:52px;flex:none}
.slot.filled:has(.io-img){background:transparent;border-color:transparent}
.slot.empty .g{color:var(--parch-faint);opacity:.5}

/* ---------- item rows (the Pack) ---------- */
.item{display:flex;align-items:center;gap:13px;padding:11px 12px;border:1px solid var(--edge);
  border-radius:9px;background:var(--panel);margin-bottom:8px}
.item .ic{width:46px;height:46px;flex:none;border-radius:7px;border:1px solid var(--edge-2);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#121214}
.item .body{flex:1 1 auto;min-width:0}
.item .nm{font-family:var(--serif);font-size:1rem;font-weight:700}
.item .meta{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:5px;font-size:.78rem;color:var(--parch-dim)}
.item .meta .num{color:var(--parch)}
.item .end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
/* tier is a grey text mark in the game (.tmark, T3), never a coloured box (owner Q5, KB-347 B4) */
/* quality: 5-step coarse scale, exact Q always written beside it */
.q{display:inline-flex;gap:2px;vertical-align:middle}
.q i{width:6px;height:9px;border-radius:1px;background:#29292c}
.q i.on{background:var(--lantern)}

/* ---------- image placeholders (drop real art here) ---------- */
.ph-img{border-radius:8px;border:1px dashed var(--edge-2);
  background:repeating-linear-gradient(135deg,#121214,#121214 9px,#0e0e10 9px,#0e0e10 18px);
  display:flex;align-items:center;justify-content:center;color:var(--parch-faint);
  font:600 .6rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px}

/* ---------- notices (info/good/warn/danger) ---------- */
.notice{border-radius:0;padding:11px 13px;font-size:.85rem;line-height:1.5}
.notice.info{background:var(--panel-2);border:1px solid var(--edge);color:var(--parch-dim)}
.notice.good{background:var(--panel-2);border:1px solid var(--edge-2);color:var(--parch)}
.notice.warn{background:#1c1206;border:1px solid #5a3410;color:var(--ember-text)}
.notice.danger{background:#1c0a0c;border:1px solid #5a232a;color:var(--rust-soft)}

/* ---------- forms (auth) ---------- */
.field{margin-bottom:13px}
.field label{display:block;font:600 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint);margin-bottom:6px}
.field input{width:100%;background:#121214;border:1px solid var(--edge-2);border-radius:7px;padding:11px 12px;color:var(--parch);font-family:var(--serif);font-size:1rem}
.field input:focus{outline:none;border-color:var(--lantern-deep);box-shadow:0 0 0 2px rgba(232,169,75,.15)}
.field input::placeholder{color:var(--parch-faint)}
.err-line{min-height:20px;font-size:.82rem;color:var(--rust-soft);margin:0 0 12px;line-height:1.4}  /* reserved space - the form never jumps */

/* ---------- gate: landing / login / register ---------- */
.gate{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.gate-brand{padding:20px 26px;font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:.26em;color:var(--parch)}
.gate-foot{display:flex;gap:18px;justify-content:center;padding:16px;font-size:.76rem}
.gate-foot a{color:var(--parch-faint)} .gate-foot a:hover{color:var(--parch-dim)}
.hero-epi{font-family:var(--serif);font-style:italic;font-size:1.16rem;color:var(--parch-faint);max-width:34ch;margin:26px auto 0;line-height:1.55}
.prose{max-width:60ch;margin:24px auto 0;color:var(--parch-dim);line-height:1.8;font-size:.95rem}
.prose b{color:var(--parch);font-weight:500}
/* counters: hairline-topped mono strip, cells hairline-separated */
.counters{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin-top:40px;
  font:400 .72rem/1 var(--mono);color:var(--parch-faint);border-top:1px solid var(--edge);padding-top:16px}
.counters span{padding:0 16px;border-left:1px solid var(--edge)}
.counters span:first-child{border-left:0}
.counters b{color:var(--parch-dim);font-weight:400}
.gate-card{width:100%;max-width:400px;text-align:left}
.gate-card h1{font-family:var(--serif);font-weight:600;font-size:2rem;letter-spacing:.04em;margin-bottom:6px}
.gate-lede{color:var(--parch-dim);font-style:italic;font-family:var(--serif);margin-bottom:24px;line-height:1.5}

/* ============================================================
   TEMPLATER ADDITIONS - screens-src only.
   Everything above is the imported design system (single source
   of truth). Below: minimal token-based rules for classes the
   templater/data emit that no design component covers.
   ============================================================ */

/* legacy token bridge - data/*.js htmlblocks reference these inline */
:root{ --bloodhi:var(--rust-soft); --blood:var(--rust); --soul:var(--sea); --souldim:#152020; --line:var(--edge); }

/* page rhythm (generic screens are a linear flow, not a grid) */
h1{font-size:1.55rem}
.wrap.narrow{max-width:680px}
.panel{margin:12px 0}
.panel.hot{border-color:var(--lantern-deep);box-shadow:0 0 24px rgba(232,169,75,.06) inset}
.panel.danger{border-color:#6e2c1c}
.notice{margin:10px 0}
.notice b:first-child{display:block;margin-bottom:2px;font-family:var(--serif)}
.notice.spec{background:transparent;border:1px dashed var(--edge-2);color:var(--parch-dim);font-size:.8rem}
.notice.spec b:first-child{font:600 .62rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--parch-faint)}
.notice.meta{background:#171425;border:1px solid #3a3350;color:#9a8fae}
.notice.meta b:first-child{color:#b3a8c9}
.crumbs{font-size:.78rem;color:var(--parch-faint);margin-bottom:10px}
.crumbs a{color:var(--parch-dim)}

/* utilities the data html relies on */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}
.sub{color:var(--parch-dim);font-size:.82rem;line-height:1.5}
.muted{color:var(--parch-dim)}
.r{text-align:right}
.good{color:var(--moss)} .bad{color:var(--rust-soft)}

/* KB-347 B3: lit for you - a buff that runs, a candle, the Lantern, a job at the bench: ember on an outline */
.chip.lit{color:var(--ember-text);border-color:#5a3410;background:#1c1206}

/* buttons - sizes/looks the data asks for */
a.btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn.small{padding:5px 10px;font-size:.64rem;border-radius:0}
.btn.big{padding:13px 22px;font-size:.8rem;letter-spacing:.16em;border-radius:0}
/* N26c + N41, round 33: the exit of a fight's outcome (Onward, Back to the board) spans its card; two
   classes outrank a.btn's inline-flex, and the plate's own look (.btn, .btn.primary) is untouched */
.btn.wide{display:flex;width:100%;justify-content:center;box-sizing:border-box;text-align:center}
/* a row whose one action spans the block (the Roads' shift, round 33 W1 follow-up) */
.btnrow.full > form{margin:0;flex:1 1 100%}
.btnrow.full > .btn{flex:1 1 100%}
.btn.ghost{background:transparent;border-color:transparent;color:var(--parch-dim);
  text-transform:none;letter-spacing:0;font-size:.85rem}
.btn.ghost:hover{border-color:transparent;color:var(--parch)}
.btn.disabled{opacity:.3;pointer-events:none}
.btn .cost{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:0;text-transform:none;opacity:.78}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 2px}
.btnrow.to-right{justify-content:flex-end}
.btn-own-row{flex-basis:100%;display:flex;justify-content:flex-end}

/* meters - fill driven by --v (ui.js data-bind) + extra kinds from data */
.meter>i{width:var(--v,0%);background:var(--lantern-deep)}
.meter.heat>i{background:var(--rust)}
.meter.build>i{background:var(--moss)}

/* tables - horizontal scroll wrapper (template convention) + multi-column breathing room */
.tablewrap{overflow-x:auto;margin:10px 0}
.tablewrap .tbl{min-width:520px}
.tbl th,.tbl td{padding-right:14px}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
/* the law tables STACK on a phone (KB-140): each row becomes a small card, the
   header row hides, numeric cells carry their own data-l label - taller page,
   zero hidden data, no sideways scroll */
@media(max-width:680px){
  .tablewrap{overflow-x:visible}
  .tablewrap .tbl{min-width:0}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:block;border-bottom:1px solid var(--edge);padding:8px 0}
  .tbl tr:has(> th){display:none}
  .tbl td{display:block;border-bottom:0;padding:2px 0}
  .tbl td.num,.tbl td.n,.tbl td.r{display:inline-block;text-align:left;white-space:normal;padding-right:14px}
  .tbl td[data-l]::before{content:attr(data-l) " ";font:600 .56rem/1 var(--mono);
    letter-spacing:.12em;text-transform:uppercase;color:var(--parch-faint)}
  .tbl-affix td.num:nth-last-child(2)::before{content:"T1 ";font:600 .56rem/1 var(--mono);
    letter-spacing:.12em;color:var(--parch-faint)}
  .tbl-affix td.num:last-child::before{content:"T5 ";font:600 .56rem/1 var(--mono);
    letter-spacing:.12em;color:var(--parch-faint)}
}

/* slots - button variant + stack count */
button.slot{cursor:pointer;font-family:inherit;appearance:none;padding:0;margin:0}
.slot .qty{position:absolute;bottom:2px;right:4px;font:600 .58rem/1 var(--mono);color:var(--lantern-soft)}

/* item-name quality tint (per-item only, tier-family colors) */
.q1{color:#8a8069} .q2{color:#9aa564} .q3{color:#5f9f8a} .q4{color:#c9a24a} .q5{color:#c9683f}

/* portraits (data htmlblocks + portrait partial) */
.portrait{width:72px;height:72px;flex:none;border:1px solid var(--edge-2);border-radius:10px;
  background:radial-gradient(circle at 50% 35%,#18181a,#0b0b0d 80%);
  display:flex;align-items:center;justify-content:center;font-size:34px;
  box-shadow:0 0 14px rgba(232,169,75,.1)}
.portrait.big{width:110px;height:110px;font-size:52px}
.portrait.small{width:44px;height:44px;font-size:22px;border-radius:8px}
.portrait.dead{filter:grayscale(1) brightness(.6);border-color:#6e2c1c}

/* ledger / feed rows */
.feed .row{display:flex;gap:10px;padding:7px 2px;border-bottom:1px solid var(--edge);font-size:.85rem;align-items:baseline}
.feed .row:last-child{border-bottom:0}
.feed .who{color:var(--lantern-soft);font-family:var(--serif);flex:none}
/* N11b: a feed name that wears a title may shrink, so the title wraps under the name on a phone */
.feed .who.wraps{flex:0 1 auto}
.feed .what{flex:1;color:var(--parch)}
.feed .when{color:var(--parch-faint);font-family:var(--mono);font-size:.7rem;flex:none}

/* fight log */
.log{font-size:.82rem;max-height:340px;overflow:auto;border:1px solid var(--edge);border-radius:8px;background:var(--panel);padding:8px 12px}
.log p{margin:5px 0;padding-left:10px;border-left:2px solid var(--edge-2)}
.log p.you{border-left-color:var(--lantern-deep)}
.log p.foe{border-left-color:var(--rust)}
.log p.sys{border-left-color:var(--sea);color:var(--parch-dim)}
.dmg{color:var(--rust-soft);font-family:var(--mono)}
.heal{color:var(--moss);font-family:var(--mono)}
.crit{color:var(--lantern-soft);font-weight:700}

/* timers */
.timer{display:inline-flex;align-items:center;gap:6px;font:500 .78rem/1.4 var(--mono);
  border:1px solid var(--edge-2);border-radius:99px;padding:2px 10px;color:var(--parch);background:var(--panel)}
.timer::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lantern);
  box-shadow:0 0 7px rgba(232,169,75,.8);animation:pulse 2.2s ease-in-out infinite}
.timer.danger{color:var(--rust-soft);border-color:#6e2c1c}
.timer.danger::before{background:var(--rust-soft);box-shadow:0 0 7px rgba(201,104,63,.8)}

/* fight zones (v3 donor presentation) */
.zones{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.zone{flex:1;min-width:76px;text-align:center;border:1px solid var(--edge-2);border-radius:8px;
  padding:8px 6px;cursor:pointer;background:var(--panel);font-size:.78rem;color:var(--parch-dim)}
.zone:hover{border-color:var(--lantern-deep);color:var(--parch)}
.zone.atk{border-color:var(--rust);color:var(--rust-soft)}
.zone.blk{border-color:var(--sea);color:#9fc4c0}
.zone .tell{display:block;font:600 .56rem/1.6 var(--mono);letter-spacing:.18em;color:var(--parch-faint);margin-top:3px}

/* tabs */
.tabs{display:flex;gap:2px;position:relative;z-index:1;margin:12px 0 0}
.tabs a{flex:1 1 0;text-align:center;padding:8px 13px;font:500 .82rem/1 var(--sans);color:var(--parch-dim);border:1px solid transparent;border-bottom:0;
  border-radius:0;position:relative;top:1px}
.tabs a.on{color:var(--lantern-soft);background:var(--panel-2);border-color:var(--edge)}
.tabs a:hover{color:var(--parch)}
/* on a phone tabs keep one line each and the strip wraps to even rows */
@media(max-width:680px){
  .tabs{flex-wrap:wrap}
  .tabs a{flex:1 1 auto;white-space:nowrap;padding:10px}
}

/* flow steps */
.flowsteps{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:10px 0}
.fstep{border:1px solid var(--edge-2);border-radius:0;padding:8px 12px;background:var(--panel);font-size:.78rem;min-width:96px}
.fstep b{display:block;font-family:var(--serif);font-size:.86rem}
.fstep small{color:var(--parch-dim)}
.fstep.on{border-color:var(--lantern-deep);box-shadow:0 0 12px rgba(232,169,75,.12)}
.fstep.on b{color:var(--lantern-soft)}
.fstep.done{opacity:.55} .fstep.done b{color:var(--moss)}
.farr{align-self:center;color:var(--parch-faint)}

/* divider / empty */
.divider{display:flex;align-items:center;gap:12px;color:var(--parch-faint);
  font:600 .62rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;margin:22px 0 10px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--edge)}
.empty{text-align:center;color:var(--parch-faint);padding:26px 10px;font-size:.85rem}
.empty .ic{font-size:30px;display:block;margin-bottom:6px;opacity:.5}

/* directory cards (index) */
.dir{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:12px 0 26px}
.dir a{display:block;border:1px solid var(--edge-2);border-radius:10px;padding:11px 13px;
  background:var(--panel-2);color:var(--parch);transition:.15s}
.dir a:hover{border-color:var(--lantern-deep);transform:translateY(-1px)}
.dir a b{display:block;font-family:var(--serif);color:var(--lantern-soft);font-size:.95rem}
.dir a small{color:var(--parch-dim);font-size:.75rem;line-height:1.4;display:block;margin:3px 0 5px}

/* palette swatches (components page) */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:10px 0}
.sw{border:1px solid var(--edge);border-radius:8px;overflow:hidden;font-size:.68rem}
.sw i{display:block;height:42px}
.sw span{display:block;padding:5px 8px;color:var(--parch-dim);font-family:var(--mono)}

/* season/lore fragments used inside data htmlblocks */
.seasonline{text-align:center;font:italic .82rem/1.5 var(--serif);color:var(--parch-dim);
  border-bottom:1px solid var(--edge);padding:4px 8px}
.seasonline b{color:var(--ember-text);font-family:var(--mono);font-style:normal}
/* the candle flame - the only light; an organic shape is allowed to break radius-0 */
.epigraph{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--parch-faint);max-width:520px;margin:0 auto 18px}

/* forms - data uses label.fld + bare inputs */
label.fld{display:block;margin:10px 0}
label.fld>span{display:block;font:600 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint);margin-bottom:6px}
.fld-inline{display:flex;gap:8px;align-items:stretch}
.fld-inline input{flex:1;min-width:0}
.fld-inline .btn{white-space:nowrap;flex:none}
input[type=text],input[type=password],input[type=number],input[type=email],select,textarea{
  width:100%;background:var(--panel);border:1px solid var(--edge-2);border-radius:0;
  color:var(--parch);padding:11px 13px;font-family:var(--serif);font-size:1rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--parch);box-shadow:0 0 0 1px var(--parch) inset}
input::placeholder{color:var(--parch-faint)}
input[type=checkbox],input[type=radio]{accent-color:var(--parch);width:15px;height:15px}
:focus-visible{outline:1px solid var(--parch);outline-offset:2px;border-radius:0}

/* toast + modal (ui.js) */
#toast{position:fixed;left:50%;top:9px;bottom:auto;transform:translate(-50%,-90px);visibility:hidden;
  transition:transform .25s,visibility .25s;background:var(--panel-2);border:1px solid var(--edge-2);
  border-radius:0;padding:8px 18px;z-index:130;font:400 .86rem/1.4 var(--serif);color:var(--parch);
  max-width:min(560px,92vw);text-align:center}
#toast.up{transform:translate(-50%,0);visibility:visible}
#toast.good{border-color:var(--edge-2)} #toast.danger{border-color:#5a232a;color:var(--rust-soft)} #toast.info{border-color:var(--edge-2)}
.modalback{position:fixed;inset:0;background:rgba(13,11,10,.88);z-index:120;display:none;
  align-items:center;justify-content:center;padding:16px}
.modalback.open{display:flex}
.modal{max-width:560px;width:100%;max-height:90vh;overflow:auto;background:var(--panel-2);
  border:1px solid var(--edge-2);border-radius:0;padding:20px 22px}
.modal h2{margin-top:0}
/* the confirm dialog (confirm.js) - one panel for every irreversible act */
.modal.mconf{max-width:420px;animation:mconf-in .16s ease-out}
@keyframes mconf-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mconf-eye{font:600 .56rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--parch-faint);padding-bottom:10px;border-bottom:1px solid var(--edge);margin-bottom:14px}
.mconf-body{margin:0;font:400 1.02rem/1.5 var(--serif);color:var(--parch)}
.mconf-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

/* chrome extras: bell-as-link, mobile nav (.mbtn pattern), mock badges */
a.ct-bell{display:flex;align-items:center;justify-content:center;text-decoration:none}
.ct-mobile{display:none;position:fixed;bottom:0;left:0;right:0;z-index:111;
  grid-template-columns:repeat(5,1fr);gap:2px 3px;
  background:var(--panel);border-top:1px solid var(--edge-2);
  padding:4px 5px calc(4px + env(safe-area-inset-bottom))}
.ct-mobile .mbtn{width:auto;height:auto;min-height:48px;gap:4px;padding:4px 2px;
  font:500 .7rem/1.2 var(--sans);border-color:transparent;background:transparent;text-align:center}
.ct-mobile .mbtn.on{color:var(--lantern-soft);border-color:var(--lantern-deep);background:#1e1e21}
.ct-mobile .mbtn.locked{opacity:.3}
.mocknote{position:fixed;top:56px;right:8px;z-index:118;font:500 .62rem/1.5 var(--mono);color:var(--parch-faint);
  border:1px dashed var(--edge-2);border-radius:6px;padding:2px 7px;background:rgba(6,6,7,.8)}
.bugfab{position:fixed;bottom:14px;right:14px;z-index:115;width:44px;height:44px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--edge-2);font-size:19px;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.5)}
.bugfab:hover{border-color:var(--lantern-deep)}
.bugfab-panel{position:fixed;bottom:66px;right:14px;z-index:116;width:min(320px,86vw);
  background:var(--panel-2);border:1px solid var(--edge-2);padding:11px;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.bugfab-panel textarea{width:100%;box-sizing:border-box;background:var(--panel);color:var(--parch);
  border:1px solid var(--edge-2);font:400 .82rem/1.45 var(--serif);padding:7px;resize:vertical}
.bugfab-panel .btnrow{display:flex;gap:7px;justify-content:flex-end;margin-top:8px}
.bugfab-msg{font:500 .68rem/1.5 var(--mono);color:var(--parch-faint);margin-top:7px}
@media(max-width:820px){
  .ct-nav,.nav-sep{display:none}
  .ct-mobile{display:grid}
  .ct-top{gap:6px;padding:7px 10px;flex-wrap:nowrap}
  .ct-season{display:none}
  .ct-brand{flex:none;font-size:.88rem;letter-spacing:.1em;min-height:44px;display:inline-flex;align-items:center}
  .ct-stats{flex:0 1 auto;min-width:0}
  .stat{min-width:0;padding:.28rem .42rem}
  .stat .v{font-size:.9rem;white-space:nowrap}
  .stat.coins .g-full{display:none}
  .stat.coins .g-short{display:inline}
  .ct-bell{width:38px;flex:none}
  .wrap{padding-bottom:calc(var(--mnav) + 21px + env(safe-area-inset-bottom))}
  .mocknote{display:none}
  .bugfab{bottom:calc(var(--mnav) + 11px + env(safe-area-inset-bottom))}
  .bugfab-panel{bottom:calc(var(--mnav) + 63px + env(safe-area-inset-bottom))}
  /* the touch law (KB-140): primary controls reach 44px on small screens */
  .btn.small{min-height:44px;padding:10px 12px}
  button.cc-step-btn{width:40px;height:40px}
  .ph .btn.small{height:auto;min-height:44px}
  input.qty-in{width:56px;height:40px}
  input[type=number]{min-height:40px}
  /* panel headers stack: the aside drops under the title instead of squeezing beside it */
  .panel > .ph{flex-wrap:wrap;row-gap:2px}
  .panel > .ph .aside{margin-left:0;flex-basis:100%;line-height:1.35}
}

/* ============================================================
   CHARACTER CREATION - bespoke, step-gated (v3 flow → Iron Woodcut, the Six)
   ============================================================ */
.cc{max-width:940px;margin:0 auto}
.cc-title{font-size:1.7rem;margin-bottom:6px}
.cc>.sub{margin-bottom:8px}
.cc-step{margin:0;padding:22px 0;border-top:1px solid var(--edge)}
.cc-step[hidden]{display:none}
.cc-head{display:flex;align-items:center;gap:11px;font:500 .72rem/1 var(--serif);letter-spacing:.24em;
  text-transform:uppercase;color:var(--parch-dim);margin-bottom:16px}
.cc-step-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border:1px solid var(--edge-2);font:400 .72rem/1 var(--mono);color:var(--parch-faint)}
.cc-points-line{margin-left:auto;font:400 .74rem/1 var(--mono);letter-spacing:.06em;text-transform:none;color:var(--parch-faint)}
.cc-points-line b{color:var(--parch)}
.cc-points-line.done b{color:var(--ember-text)}

/* name + gender */
.cc-namebar{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.cc-namebar .fld{flex:1;min-width:300px;margin:0}
.cc-namebar .fld input{height:46px}
.cc-namecheck{height:46px;align-self:flex-end;border-color:var(--parch-faint);color:var(--parch);flex:none}
.cc-namecheck:hover:not(:disabled){background:var(--panel-2);border-color:var(--parch);color:var(--lantern)}
.cc-sex{display:flex;align-items:stretch;height:46px;border:1px solid var(--edge-2)}
.cc-sex-lbl{display:flex;align-items:center;font:600 .56rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--parch-faint);padding:0 12px}
.cc-sex-opt{background:transparent;border:0;border-left:1px solid var(--edge-2);color:var(--parch-dim);
  font:400 .92rem/1 var(--serif);padding:11px 15px;cursor:pointer;transition:color .2s,background .2s}
.cc-sex-opt:hover{color:var(--parch)}
.cc-sex-opt.active{background:var(--parch);color:var(--void)}
.cc-msg{min-height:17px;margin:12px 0 0;font:400 .8rem/1.4 var(--mono)}
.cc-msg--ok{color:var(--parch)}
.cc-msg--err{color:var(--bloodhi)}

/* card grids: gap:1px reveals the hairline; cards sit on the ground colour */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:1px;
  background:var(--edge);border:1px solid var(--edge)}
.cc-grid-2{grid-template-columns:1fr 1fr}
.cc-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.cc-grid-2,.cc-grid-3{grid-template-columns:1fr}}
.cc-card{background:var(--void);border:0;text-align:left;padding:15px 16px;cursor:pointer;
  color:var(--parch);transition:background .2s}
.cc-card:hover{background:var(--panel-2)}
/* The bench (KB-083): six callings shown but not yet takeable - the promise
   stays visible, the pointer stays honest. */
.cc-card.active{background:var(--parch)}
.cc-card.active:hover{background:#F0EAE0}
.cc-card-name{font:500 1.06rem/1.2 var(--serif);color:var(--parch);margin:0 0 5px;display:flex;align-items:baseline;gap:8px}
.cc-card.active .cc-card-name{color:var(--void)}
.cc-card-sym{font-size:1.15rem;color:var(--parch-dim)}
.cc-card.active .cc-card-sym{color:var(--ember-text)}
.cc-card-desc{font:italic 400 .85rem/1.45 var(--serif);color:var(--parch-faint);margin:0}
.cc-card.active .cc-card-desc{color:#4a423a}
.cc-card-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.cc-lean{font:400 .6rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--parch-dim);
  border:1px solid var(--edge-2);padding:2px 7px}
.cc-lean b{color:var(--parch);font-weight:400}
.cc-card.active .cc-lean{border-color:rgba(13,11,10,.28);color:var(--void)}
.cc-card.active .cc-lean b{color:var(--void)}

/* portraits (placeholder sigils until art) */
.cc-portraits{display:flex;flex-wrap:wrap;gap:1px;background:var(--edge);border:1px solid var(--edge);width:max-content;max-width:100%}
.cc-portrait{background:var(--void);border:0;padding:0;cursor:pointer;position:relative}
.cc-portrait .g{width:104px;height:126px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 36%,#18181a,var(--void) 80%);color:var(--parch-faint);font-size:2.3rem}
.cc-portrait img.g{display:block;object-fit:cover;background:#141415}
.cc-portrait .cap{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font:400 .58rem/1.8 var(--mono);color:var(--parch-faint);background:linear-gradient(transparent,rgba(0,0,0,.6))}
.cc-portrait:hover .g{color:var(--parch-dim)}
.cc-portrait.active::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 2px var(--parch)}
.cc-portrait.active .cap{color:var(--parch);z-index:2}
.cc-portrait.active .g{color:var(--parch)}
.cc-portrait-hint{font:italic 400 .82rem/1.5 var(--serif);color:var(--parch-faint)}
/* the tooltip law (KB-140): a title= hint that carries UNIQUE knowledge also
   prints as a visible mono line on a touch screen - hover does not exist there */
.mtip{display:none}
@media(max-width:680px){
  .mtip{display:block;font:400 .68rem/1.45 var(--mono);letter-spacing:0;text-transform:none;
    white-space:normal;text-align:left;color:var(--parch-faint);margin-top:2px}
}
.cc-note{font:400 .68rem/1.5 var(--mono);color:var(--parch-faint);margin-top:8px}

/* stats + vitals (the grid shell itself is the Dossier's .panel + .dcols now, KB-146) */
.cc-stat-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--edge)}
.cc-stats .cc-stat-row:last-child{border-bottom:0}
.cc-stat-name{font:500 .96rem/1.2 var(--serif);color:var(--parch)}
.cc-stat-hint{display:block;font:italic 400 .76rem/1.35 var(--serif);color:var(--parch-faint);margin-top:2px}
.cc-stat-note{display:block;font:400 .58rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--parch-dim);margin-top:4px}
.cc-stat-val{font:500 1.3rem/1 var(--mono);color:var(--parch);min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.cc-step-btn{width:28px;height:28px;border:1px solid var(--edge-2);background:transparent;color:var(--parch);
  font:400 1.05rem/1 var(--mono);cursor:pointer;transition:color .2s,border-color .2s}
.cc-step-btn:hover:not(:disabled){border-color:var(--parch);color:var(--lantern)}
.cc-step-btn:disabled{opacity:.22;cursor:not-allowed}

.cc-vitals{border-left:1px solid var(--edge);padding:16px 18px;background:var(--panel)}
@media(max-width:760px){.cc-vitals{border-left:0;border-top:1px solid var(--edge)}}
.cc-vitals-h{font:500 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--parch-faint);margin-bottom:15px}
.cc-bar-row{margin-bottom:14px}
.cc-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.cc-bar-k{font:500 .82rem/1 var(--serif);color:var(--parch)}
.cc-bar-k small{font:400 .62rem/1 var(--mono);color:var(--parch-faint);margin-left:6px}
.cc-bar-v{font:400 .84rem/1 var(--mono);color:var(--parch);font-variant-numeric:tabular-nums}
.cc-well{height:11px;background:var(--void);border:1px solid var(--edge-2);position:relative;overflow:hidden}
.cc-well>i{position:absolute;inset:0 auto 0 0;transition:width .18s ease-out;width:0}
.cc-well.hp>i{background:linear-gradient(90deg,var(--blood-venous),var(--blood-arterial))}
.cc-well.wick>i{background:linear-gradient(90deg,var(--ember-deep),var(--ember-hot))}
.cc-well.pool>i{background:var(--parch-dim)}
.cc-der{display:flex;justify-content:space-between;font:400 .82rem/1.7 var(--mono);color:var(--parch-dim);
  border-top:1px solid var(--edge);padding-top:11px;margin-top:2px}
.cc-der b{color:var(--parch);font-weight:400}
/* parameter ledger (v4 sheet framing) */
.cc-led{border-top:1px solid var(--edge);margin-top:4px}
.cc-led-row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--edge)}
.cc-led-row:last-child{border-bottom:0}
.cc-led-n{font:400 .85rem/1.3 var(--serif);color:var(--parch);cursor:pointer;
  text-decoration:underline dotted;text-decoration-color:var(--parch-faint);text-underline-offset:3px}
.cc-led-v{font:400 .86rem/1 var(--mono);color:var(--parch);font-variant-numeric:tabular-nums}
.cc-led-s{font:400 .62rem/1 var(--mono);letter-spacing:.06em;color:var(--parch-faint);min-width:44px;text-align:right}
.cc-led-sub{font:400 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--parch-faint);margin:12px 0 2px}
.cc-led-row{cursor:pointer}
.cc-led-row:hover .cc-led-n{color:#F0EAE0;text-decoration-color:#F0EAE0}
.cc-led-row.open{border-bottom-color:transparent}
.cc-led-frac{color:var(--parch-faint)}
.cc-led-hint{font:italic 400 .8rem/1.45 var(--serif);color:var(--parch-faint);padding:2px 0 9px;border-bottom:1px solid var(--edge)}
.cc-final{margin-top:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ============================================================
   TUTORIAL - reusable lesson template (one feature per lesson)
   ============================================================ */
.tut{max-width:660px;margin:0 auto;text-align:center;padding-top:6px}
.tut-eyebrow{font:500 .64rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--parch-faint);margin-bottom:10px}
.tut-arch{display:inline-flex;align-items:center;gap:0;border:1px solid var(--edge);margin-bottom:16px}
.tut-arch[hidden]{display:none}
.tut-arch>span{font:400 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--parch-faint);padding:0 11px}
.tut-arch button{background:transparent;border:0;border-left:1px solid var(--edge);color:var(--parch-dim);
  font:400 .78rem/1 var(--serif);padding:8px 13px;cursor:pointer;transition:color .2s,background .2s}
.tut-arch button:hover{color:var(--parch)}
.tut-arch button.on{background:var(--parch);color:var(--void)}
.tut-teaches{display:inline-block;font:400 .68rem/1.4 var(--mono);color:var(--ember-text);border:1px solid #5a3410;padding:3px 11px;margin-bottom:22px}
.tut-scene{position:relative;height:120px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.tut-scene::before{content:"";position:absolute;left:50%;top:44%;width:360px;height:230px;transform:translate(-50%,-50%);
  z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,var(--ember-glow),transparent 70%)}
.tut-title{font:500 1.9rem/1.16 var(--serif);color:var(--parch);margin:6px 0 20px}
.tut-prose{font:400 1.1rem/1.72 var(--serif);color:var(--parch-dim);max-width:52ch;margin:0 auto}
.tut-prose b{color:var(--parch);font-weight:500}
.tut-law{font:400 .84rem/1.65 var(--mono);color:var(--ember-text);border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);padding:13px 10px;margin:24px auto 0;max-width:50ch}
.tut-grant{display:inline-block;font:400 .86rem/1.5 var(--serif);color:var(--parch);
  border:1px solid var(--edge-2);padding:9px 18px;margin:22px auto 0}
.tut-grant b{color:#F0EAE0}
.tut-choice{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin:26px auto 0;border:1px solid var(--edge);width:fit-content}
.tut-choice .btn{border:0;border-left:1px solid var(--edge)}
.tut-choice .btn:first-child{border-left:0}
.tut-result{font:italic 400 1.02rem/1.65 var(--serif);color:var(--parch-faint);max-width:50ch;margin:22px auto 0}
.tut-foot{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:36px;flex-wrap:wrap}
.tut-dots{display:flex;gap:7px}
.tut-dots i{width:7px;height:7px;background:var(--edge-2);transition:background .2s}
.tut-dots i.on{background:var(--parch)}
.tut-unlocks{font:400 .7rem/1 var(--mono);letter-spacing:.06em;color:var(--parch-faint);margin-top:16px}

/* city doors - action tiles (gap:1px hairline grid) */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge)}
/* A door that ACTS posts through a form; display:contents keeps the button a
   true grid child, and the reset keeps a <button> looking like its <a> kin. */
.doors form{display:contents}
button.door{width:100%;text-align:left;border:0;font:inherit;cursor:pointer}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
.door{position:relative;overflow:hidden;display:block;background:var(--void);
  padding:11px 18px 11px 82px;color:var(--parch);transition:background .2s}
.door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:96px;z-index:0;pointer-events:none;
  background:var(--door-img) center/auto 78% no-repeat;opacity:.26;transition:opacity .25s;
  -webkit-mask-image:linear-gradient(to right,#000 30%,transparent 70%);
          mask-image:linear-gradient(to right,#000 30%,transparent 70%)}
.door:hover::before{opacity:.82}
.door>*{position:relative;z-index:1}
.door:hover{background:var(--panel-2)}
.door-act{font:500 1.1rem/1.2 var(--serif);color:var(--parch)}
.door:hover .door-act{color:#F0EAE0}
.door-what{font:400 .82rem/1.45 var(--serif);color:var(--parch-dim);margin-top:3px}
.door-where{font:400 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--parch-faint);margin-top:6px}
.door-out{box-shadow:inset 3px 0 0 var(--ember-mid)}
.door-soon{opacity:.4;cursor:default;pointer-events:none}
.door-soon .door-act{color:var(--parch-dim)}
.door-out .door-act{color:var(--ember-text)}
.door-out:hover .door-act{color:var(--ember-hot)}
/* scaffolding, not a place in the city: a cold rail instead of the ember one, so
   the eye reads it as workshop furniture and not as somewhere the world goes. */

/* quest-board - pinned notices (faction voices) */
.notices{display:flex;flex-direction:column;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.notice-card{display:flex;gap:16px;align-items:center;background:var(--void);padding:13px 16px}
.notice-card:hover{background:var(--panel-2)}
.notice-card--done{box-shadow:inset 3px 0 0 var(--ember-flame)}
.notice-card--done .notice-when{color:var(--parch)}
.notice-body{flex:1;min-width:0}
.notice-when{font:400 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ember-text)}
.notice-what{font:400 1.02rem/1.35 var(--serif);color:var(--parch);margin-top:5px}
.notice-voice{font:italic 400 .82rem/1.4 var(--serif);color:var(--parch-faint);margin-top:3px}
.notice-pay{font:400 .78rem/1.4 var(--mono);color:var(--parch-dim);text-align:right;white-space:nowrap;flex:none}
/* shadow tally - the 0..100 grind against your past */
.shadow-bar{position:relative;height:14px;background:var(--void);border:1px solid var(--edge-2);overflow:hidden}
.shadow-bar>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blood-venous),var(--blood-arterial))}
.shadow-bar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(211,207,199,.28) calc(10% - 1px),rgba(211,207,199,.28) 10%)}
.shadow-meta{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font:400 .8rem/1 var(--mono);color:var(--parch-dim)}
.shadow-meta b{color:var(--parch)}
@media(max-width:680px){.shadow-meta{flex-direction:column;gap:4px;line-height:1.5}}

/* ---- The Bench: work-progress · recipe flow · learn (ember stays Wick-only, so work bars are bone) ---- */
.work-bar{position:relative;height:10px;background:var(--void);border:1px solid var(--edge-2);overflow:hidden}
.work-bar>i{position:absolute;inset:0 auto 0 0;background:var(--parch-faint);opacity:.55}
.work-meta{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font:400 .8rem/1 var(--mono);color:var(--parch-dim)}
.work-meta b{color:var(--parch)}
/* THE BENCH'S CRAFT PANEL (round 33, the owner's note of 2026-10-07: "more professional"): a head row (the item at
   40 px, its name in the serif voice, which batch runs in small mono, Stop at the right; Stop wraps under on a narrow
   phone), the work bar with the next batch's countdown beside it, the bank strip's stat cells (they shrink and clip,
   never overflow), and the made goods as the pack's compact haul rows */
.craft-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px}
.craft-head .io-img{width:40px;height:40px}
.craft-id{display:flex;flex-direction:column;gap:4px;flex:0 1 auto;min-width:0;max-width:40%}
.craft-name{font:400 1.12rem/1.2 var(--serif);color:var(--parch);overflow-wrap:anywhere}
.craft-batch{font:400 .72rem/1.2 var(--mono);letter-spacing:.04em;color:var(--parch-dim);overflow-wrap:anywhere}
.craft-head form{margin:0;flex:none}
.craft-barrow{display:flex;align-items:center;gap:10px;flex:1 1 8em;min-width:8em}
.craft-barrow .work-bar{flex:1 1 auto;min-width:0}
.craft-clock{flex:none;min-width:3.2em;text-align:right;font:400 .8rem/1 var(--mono);color:var(--parch-dim);font-variant-numeric:tabular-nums}
.craft-clock b{color:var(--parch)}
.craft-made-h{margin:14px 0 6px;font:600 .64rem/1.25 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint)}
.bench-filter,.item-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:2px 0 12px}
.bench-filter select,.bench-filter input[type=search],
.item-filter select,.item-filter input[type=search]{width:auto;font:400 .82rem/1 var(--sans);color:var(--parch);
  background:var(--void);border:1px solid var(--edge-2);border-radius:0;padding:7px 9px}
.bench-filter input[type=search],.item-filter input[type=search]{min-width:160px}
.bench-filter label{font:400 .78rem/1 var(--mono);color:var(--parch-dim);display:inline-flex;gap:6px;align-items:center}
/* recipe block - the input→output ledger (same void-inset block as Learn, for one style) */
.recipe{background:var(--void);border:1px solid var(--edge);padding:12px 15px;margin-bottom:9px}
.recipe:last-of-type{margin-bottom:0}
.recipe-head{display:flex;align-items:baseline;gap:10px}
.recipe-name{font:400 1.05rem/1.3 var(--serif);color:var(--parch)}
.recipe-gate{margin-left:auto;font:400 .74rem/1.5 var(--mono);color:var(--parch-dim);text-align:right;white-space:nowrap}
.recipe-gate .no{color:var(--rust-soft)}
.rflow{display:flex;align-items:center;gap:9px 12px;flex-wrap:wrap;margin:9px 0}
.rio{display:inline-flex;align-items:center;gap:8px;font:400 .82rem/1.15 var(--mono);color:var(--parch-dim)}
.rio b{color:var(--parch);font-weight:400;font-family:var(--serif);font-size:.98rem}
.rio .need{color:var(--parch-faint);display:block;margin-top:3px}
.rio--short b,.rio--short .need{color:var(--rust-soft)}
.rarrow{color:var(--parch-faint)}
.recipe-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
/* a queued recipe: its name, what it holds back and Take out on ONE line (round 33 follow-up) */
.recipe-head.q-row{align-items:center;flex-wrap:wrap}
.recipe-head.q-row .q-out{margin:0;flex:none}
.recipe-foot input[type=number]{width:52px;font:400 .85rem/1 var(--mono);color:var(--parch);
  background:var(--void);border:1px solid var(--edge-2);border-radius:0;padding:6px 7px}
.recipe-foot select{font:400 .8rem/1 var(--sans);color:var(--parch);background:var(--void);
  border:1px solid var(--edge-2);border-radius:0;padding:6px 8px}
.recipe-foot label{font:400 .76rem/1 var(--mono);color:var(--parch-dim);display:inline-flex;gap:6px;align-items:center}
.recipe-lock{font:400 .8rem/1.4 var(--mono);color:var(--parch-faint)}
/* item / material plate - tier T1-T5 is marked by frame COLOUR (v3 rarity ramp, radius 0 on void) */
.io-img{width:38px;height:38px;flex:none;object-fit:contain;background:var(--void);border:2px solid var(--edge-2);padding:2px}
.io-img.t1{border-color:#645b50}
.io-img.t2{border-color:#556a4f}
.io-img.t3{border-color:#4b6178}
.io-img.t4{border-color:#67567c}
.io-img.t5{border-color:#8c7133}
.io-img.big{width:46px;height:46px}
/* quality stars - one per 20 quality (Q1-100), a bone visual atop the exact number */
.qstars{color:var(--parch);letter-spacing:2px;margin-left:5px}
.qstars .off{color:var(--edge-3,#3a3a3e)}
.qstars .amber{color:var(--amber)}
/* the patron's mark beside a name on the soul page (ROUND28 D18, KB-274) */
.pp-lantern{color:var(--ember);font:400 .8em/1 var(--mono);margin-left:8px;vertical-align:.1em}
/* haul-row plate */
.haul-io{display:inline-flex;align-items:center;gap:9px}
/* gathering trades - pick one to work; image from v3 */
.prof-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge);margin:4px 0 2px}
.prof-card{display:flex;align-items:center;gap:11px;background:var(--panel-2);padding:11px 13px;cursor:pointer;
  border:0;width:100%;text-align:left;font-family:inherit;opacity:.38;transition:opacity .15s,background .15s}
.prof-card:hover{opacity:.7;background:var(--void)}
.prof-card.on{opacity:1;background:var(--void);box-shadow:inset 3px 0 0 var(--ember-flame)}
.prof-img{width:42px;height:42px;flex:none;object-fit:contain}
.prof-name{display:block;font:400 1rem/1.2 var(--serif);color:var(--parch)}
.prof-sub{display:block;font:400 .72rem/1.35 var(--mono);color:var(--parch-dim);margin-top:3px}
.prof-exp{display:block;height:4px;width:100%;background:#1b1b1d;border-radius:2px;overflow:hidden;margin-top:6px}
.prof-exp .pe-fill{display:block;height:100%;background:var(--lantern-deep);transition:width .5s ease}
.prof-exp .pe-fill.cap{background:var(--ember-flame)}
/* run's yield - pending until you end the shift; grouped by material, expand for the quality breakdown (v3) */
.haul-list{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--void);margin:2px 0 0}
.haul-row{border-top:1px solid var(--edge)}
.haul-row.sworn{box-shadow:inset 3px 0 0 var(--ember-mid);background:rgba(232,90,16,.04)}
.haul-row:first-child{border-top:0}
.haul-row>summary{display:flex;align-items:center;gap:11px;padding:10px 13px;cursor:pointer;list-style:none}
.haul-row>summary::-webkit-details-marker{display:none}
.haul-row>summary::after{content:"▸";color:var(--parch-faint);font-size:.7rem;transition:transform .15s}
.haul-row[open]>summary::after{transform:rotate(90deg)}
.haul-name{font:400 1rem/1.2 var(--serif);color:var(--parch)}
.tmark{font:400 .6rem/1 var(--mono);letter-spacing:.08em;color:var(--parch-faint);margin-left:7px;vertical-align:1px}
/* KB-347 B3: the one mark that is lit for you (a free item note) */
.tmark.lit{color:var(--ember-text)}
/* the exchange order book - each item kind expands to its depth (asks + bids) */
.book-sum{margin-left:auto;font:400 .82rem/1 var(--mono);color:var(--parch-dim);white-space:nowrap}
.book-sum b{color:var(--parch)}
.depth{padding:2px 15px 14px 62px}
.depth-h{font:600 .56rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--parch-faint);margin:13px 0 3px}
.depth-row{display:grid;grid-template-columns:88px 1fr 62px 44px auto;gap:6px 13px;align-items:center;
  padding:6px 0;border-top:1px solid var(--edge);font:400 .82rem/1.2 var(--mono);color:var(--parch-dim)}
.depth-row .maker{font-family:var(--serif);font-style:italic;color:var(--parch-faint);min-width:0;overflow:hidden;text-overflow:ellipsis}
/* N11b: a mark that wears a title wraps under the name on a phone; three classes beat the phone rule's nowrap (two) */
.depth-row .maker.has-title{white-space:normal}
.depth-row .price{color:var(--parch);text-align:right}
.depth-row .qty{text-align:right}
.depth-buy{display:flex;gap:6px;margin:0;align-items:center}
.depth-buy input[type=number]{width:64px}
/* on a phone the order row folds to two lines: who and what above, the money and the verb below */
@media(max-width:680px){
  .depth{padding:2px 12px 14px 12px}
  .depth-row{grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px 10px}
  .depth-row>span:first-child{grid-row:1;grid-column:1}
  .depth-row .maker{grid-row:1;grid-column:2/5;text-align:right;white-space:nowrap}
  .depth-row .price{grid-row:2;grid-column:1;text-align:left;white-space:nowrap}
  .depth-row .qty{grid-row:2;grid-column:2;text-align:left}
  .depth-row .depth-buy{grid-row:2;grid-column:3/5;justify-self:end}
  .depth-row>.sub{grid-row:2;grid-column:3/5;justify-self:end}
  .depth-row input[type=number],.depth-row .btn.small{height:44px}
  /* summary rows: the name may shrink and clip, the numbers never do */
  .haul-list .haul-row .haul-name{white-space:normal;flex:1 1 auto;min-width:0;overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .haul-list .haul-row .book-sum{flex:0 1 auto;min-width:0;white-space:normal;text-align:right;line-height:1.35;max-width:45%;overflow-wrap:break-word}
  .haul-list .haul-row>summary{flex-wrap:wrap}
  .haul-list .haul-row .ibadges{flex:0 0 100%;order:5;margin:4px 0 0}
  .recipe-gate{white-space:normal;text-align:left;margin-left:0;flex-basis:100%}
  .recipe-head.q-row .recipe-gate{flex:1 1 0;min-width:0}
  .recipe-head.q-row .q-out{margin-left:auto}
  /* the craft head on a phone: the bar takes its own line under the name; Stop stays on the first line */
  .craft-head .craft-id{max-width:none;flex:1 1 auto}
  .craft-head .craft-barrow{order:4;flex-basis:100%}
}
/* sell tab - icon + item + list action, one process block per stack */
.sell-act{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.sell-act .cost{font:400 .7rem/1 var(--mono);color:var(--parch-faint)}
/* compact (table-like) book rows for the exchange */
.haul-list.compact .haul-row>summary{padding:7px 12px;gap:10px}
.haul-row.flat{display:flex;align-items:center;gap:10px;padding:7px 12px}
/* the Company's wage line - its own row above the badge strip */
.co-wageline{margin:14px 0 0;font:400 .85rem/1.45 var(--mono);color:var(--parch-faint)}
.co-wageline b{color:var(--lantern-soft)}
.co-wageline+.fl-points{margin-top:8px}
/* the Bell's rows */
.bell-row>div{min-width:0;overflow-wrap:anywhere}
.bell-row>.bell-mark{flex:none}
.haul-list.compact .io-img{width:30px;height:30px}
.haul-list.compact .haul-name{font-size:.94rem}
/* an opened compact row (the market's Sell list, the pack's lots): its block starts under the name and ends with the
   row - the row's width less its picture (the owner, 2026-10-07); summary padding 12 + icon 30 + gap 10 here,
   10 + 26 + 10 on a wide screen (below), full width on a phone */
.haul-list.compact .depth{padding-left:52px;padding-right:12px}
@media(min-width:821px){.haul-list.compact .depth{padding-left:46px;padding-right:10px}}
@media(max-width:680px){.haul-list.compact .depth{padding-left:12px;padding-right:12px}}
.qinf{color:var(--parch-faint)}
/* NPC town-floor row - the never-empty deliberately-worst price */
.depth-row.floor .maker{color:var(--ember-text);font-style:normal;font-family:var(--mono);font-size:.76rem}
/* the sell tab's right hand (KB-192): what the other souls are paying for a held kind */
.sell-body.with-bids{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:0 18px;align-items:start}
.bid-col .depth-row{grid-template-columns:auto auto minmax(0,1fr) auto;gap:6px 10px}
.bid-col .depth-row .price,.bid-col .depth-row .qty{text-align:left}
.bid-col .depth-row .minq{text-align:right;white-space:normal}
.bid-col .depth-row .left{color:var(--parch-faint);white-space:nowrap;text-align:right}
.bid-col .depth-row.far{opacity:.5}
.bid-col .depth-row.far .price{color:var(--parch-dim)}
@media(max-width:680px){
  .sell-body.with-bids{grid-template-columns:1fr}
  .bid-col{margin-top:4px}
  .bid-col .depth-row>span,.bid-col .depth-row>span:first-child{grid-row:auto;grid-column:auto}
  .bid-col .depth-row .minq{white-space:normal}
}
/* post an order - inline form (item · quality-from · price · qty) */
.post-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.post-form select,.post-form input{width:auto;font:400 .84rem/1 var(--sans);color:var(--parch);
  background:var(--void);border:1px solid var(--edge-2);border-radius:0;padding:7px 9px}
.post-form input[type=number]{width:76px}
.post-form .lbl{font:400 .74rem/1 var(--mono);color:var(--parch-dim)}
/* the order's side is a grey tag (KB-347 B4, owner Q6), BUY and SELL told apart by the word; a fixed width keeps
   the item icon in line between the two */
.ord-row .who .tag,.hist-row .who .tag{min-width:42px;text-align:center}
/* history - rows with icons + aligned columns + a fee column */
.hist-head,.hist-row{display:grid;grid-template-columns:minmax(0,1fr) 60px 80px 80px 56px;gap:13px;align-items:center}
.hist-row .recv{color:var(--parch)}
.hist-row .q-lbl,.ord-row .q-lbl{display:none}
.hist-head{padding:0 13px 6px;font:600 .54rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--parch-faint)}
.hist-head .r,.hist-row .r{text-align:right}
.hist-list{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--void)}
.hist-row{padding:8px 13px;border-top:1px solid var(--edge);font:400 .82rem/1.2 var(--mono);color:var(--parch-dim)}
.hist-row:first-child{border-top:0}
.hist-row .when{color:var(--parch-faint)}
.hist-row .who{display:flex;align-items:center;gap:9px;min-width:0}
.hist-row .who b{font-family:var(--serif);font-weight:400;font-size:.95rem;color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-row .price{color:var(--parch)}
.hist-row .fee{color:var(--rust-soft)}
.hist-row .io-img{width:28px;height:28px}
/* my orders - same item style as the other tabs (icon + tier frame + side tag) */
.ord-head,.ord-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 56px 60px 74px;gap:13px;align-items:center}
.ord-row>.btn{justify-self:end}
.ord-head{padding:0 13px 6px;font:600 .54rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--parch-faint)}
.ord-head .r,.ord-row .r{text-align:right}
.ord-list{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--void)}
.ord-row{padding:8px 13px;border-top:1px solid var(--edge);font:400 .82rem/1.2 var(--mono);color:var(--parch-dim)}
.ord-row:first-child{border-top:0}
.ord-row .who{display:flex;align-items:center;gap:9px;min-width:0}
.ord-row .who b{font-family:var(--serif);font-weight:400;font-size:.95rem;color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord-row .io-img{width:28px;height:28px}
/* ---- The Pack: item badges + expandable full info (market row style) ---- */
.ibadges{display:inline-flex;gap:6px;align-items:center;margin-left:10px}
.ibadge{display:inline-block;font:700 .55rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px 2px;padding-right:calc(7px - .1em);border:1px solid var(--edge-2);white-space:nowrap}
.ibadge.worn{color:#0a0a0b;background:var(--parch);border-color:var(--parch)}        /* equipped - bone plate, unmissable */
.ibadge.unworn{color:var(--parch-dim);border-color:var(--parch-faint)}               /* in the pack, not worn */
.ibadge.broken{color:var(--rust-soft);border-color:#5a232a;background:#1c0a0c}        /* broken - cannot equip until mended */
.ibadge.slottag{color:var(--parch-dim);border-color:var(--edge-2)}                     /* which body slot this worn piece fills (NOT .slot - that's the paperdoll box) */
.ibadge.sworn{color:var(--lantern);border-color:var(--parch-dim);background:transparent}  /* the one insured item - survives death; bright ivory on a grey outline (KB-347) */
/* the "On use" block - the healing/effect a consumable gives, pulled out of the
   grid so it reads at a glance (KB-043). Ember-lit left rule; HP in blood, Wick in ember. */
.on-use{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 12px;
  padding:8px 11px;border-left:2px solid var(--ember-mid);background:var(--panel-2)}
.on-use .ou-k{font:600 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--parch-faint)}
.on-use b{font:600 .92rem/1 var(--serif);color:var(--parch)}
.on-use b.ou-hp{color:var(--blood-text)}
.on-use b.ou-wk{color:var(--ember-text)}
.io-img.big{width:54px;height:54px;padding:3px}
/* The item detail cells (ROUND28 note 21, KB-274; shared by /pack, the dossier's Worn and
   Trades drawers, the gate, the dark and the market - one family, one rule, KB-146). A cell
   is as wide as its content and never breaks it: "100 / 100" stays on one line. Short cells
   share a line and stretch to fill it; a cell too long to share takes the whole line, and
   only a cell wider than the whole line wraps its value. The empty ::after soaks up the last
   line's slack, so a lone last cell keeps its own width instead of spanning the row. */
.idetail-grid{display:flex;flex-wrap:wrap;gap:2px 22px;margin:2px 0 12px}
.idetail-grid > div{flex:1 1 auto;min-width:min(100%,150px);display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--edge);padding:6px 0;font:400 .82rem/1.3 var(--mono)}
.idetail-grid::after{content:"";flex:10 1 0;min-width:0}
.idetail-grid > div > span{flex:0 0 auto;white-space:nowrap}
.idetail-grid > div > b{min-width:0;text-align:right}
.idetail-grid span{color:var(--parch-faint)}
.idetail-grid b{color:var(--parch);font-weight:400}
.idetail-grid b.no{color:var(--rust-soft)}
.idetail-grid b.qbonus{color:var(--parch)}
/* N28, round 33: a PAIR of cells (the banked coin and exp between stations) always shares ONE line. The plain
   grid's 150px cells wrap below 322px of panel, which is every phone; here the two split the row evenly,
   200px each at most, and the slack-soaking ::after goes (it would eat the whole row of a zero-basis cell) */
.idetail-grid.pair > div{flex:1 1 0;min-width:0;max-width:200px}
.idetail-grid.pair::after{display:none}
/* affixes on gear - shown on expand */
.iaffix{margin:2px 0 13px}
.iaffix-h{font:600 .56rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint);margin:0 0 6px}
.iaffix-row{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--edge)}
.iaffix-row:last-child{border-bottom:0}
.iaffix-row .an{flex:none;min-width:104px;font:400 .74rem/1.3 var(--mono);letter-spacing:.04em;color:var(--parch)}
.iaffix-row .ae{font:400 .86rem/1.4 var(--serif);color:var(--parch-dim)}
.iaffix-none{font:italic 400 .84rem/1.4 var(--serif);color:var(--parch-faint)}
.iaffix-row .no{color:var(--rust-soft)}
.iaffix-row.dim .an,.iaffix-row.dim .ae{color:var(--parch-faint)}
/* character sheet - portrait + the derived-parameter ledger (KB-015 simplified).
   The head is budgeted to the portrait's own height: the identity column may never
   make the row taller than the picture beside it (owner 2026-09-07). */
.sheet-portrait{width:var(--sheet-portrait);height:var(--sheet-portrait);flex:none;object-fit:cover;border:1px solid var(--edge-2);background:var(--void)}
.sheet-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sheet-id{flex:1;min-width:220px;display:flex;flex-direction:column;justify-content:flex-start;max-height:var(--sheet-portrait);overflow:hidden}
.sheet-id h2{font-size:1.28rem;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* N11a, round 33: the passport name row (the Dossier and /soul share it). The h2 is a flex row
   on the baseline, so the worn title (and the patron's lantern) sit .7rem from the name and ON
   its baseline; the old &nbsp; crowded the chip and rode it off the line. It wraps, so a long
   title drops under the name instead of being cut. */
.pp-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:.7rem}
/* the lantern keeps its old 8px from the name: the flex gap already gives it .7rem of that */
.pp-name .pp-lantern{margin-left:calc(8px - .7rem)}
.sheet-id .sheet-line{margin:2px 0 5px;font-size:.8rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* THE HEAD'S 96 PX BUDGET (the portrait's height; the column hides what overflows): the name row 28.45 + the line
   2 + 19.7 + 5 + the honours 24 + 6 + the bar 10 = 95.15. The honours row stands 6px clear of the experience bar (the
   owner 2026-10-07: "a candle burns" sat too close at 3) and 5 under the line; 8 overflowed the budget and the name
   row, shrinking first, cut the worn title's lower frame (the owner 2026-10-08). The name row and the bar never
   shrink, so a sub-pixel overflow can only trim the line's half-leading, never a frame. */
.sheet-meta{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:6px}
.sheet-id>h2,.sheet-id>.work-bar{flex-shrink:0}
.sheet-meta .cc-bar-k,.sheet-meta .cc-bar-v{flex:none}
.sheet-honours{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.sheet-honours::-webkit-scrollbar{display:none}
.sheet-honours>*{flex:none}
.sheet-tip{margin:7px 0 0}
/* Narrower than this the honours strip would start hiding chips behind its own
   scroll, so the head stacks instead: the budget is released and every honour
   wraps into view. Nothing is ever silently cut. */
@media (max-width:860px){
  .sheet-head{display:block}
  .sheet-portrait{margin-bottom:10px}
  .sheet-id{max-height:none;min-width:0;overflow:visible}
  .sheet-id h2,.sheet-id .sheet-line{white-space:normal;overflow:visible;text-overflow:clip}
  .sheet-meta{flex-wrap:wrap}
  .sheet-honours{flex-wrap:wrap;overflow:visible}
  .sheet-honours>*{flex:0 1 auto;max-width:100%;white-space:normal}
}
/* the worn title's chip on a phone (KB-309): its tip folds UNDER the title across the
   whole chip, so a long title keeps one line instead of stacking word by word */
@media(max-width:680px){
  .sheet-id h2 .chip{max-width:100%;flex-wrap:wrap;row-gap:3px;vertical-align:middle}
  .sheet-id h2 .chip .mtip{flex:1 1 100%;min-width:0;margin-top:0}
}
.pgroup{font:600 .56rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint);margin:17px 0 3px}
.pgroup:first-of-type{margin-top:2px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 92px 168px;gap:14px;align-items:baseline;padding:7px 0;border-top:1px solid var(--edge)}
.prow .pn{font:400 .96rem/1.3 var(--serif);color:var(--parch)}
.prow .pv{font:400 .88rem/1 var(--mono);color:var(--parch);text-align:right}
.prow .pf{font:400 .72rem/1.3 var(--mono);color:var(--parch-faint);text-align:right}
.asym{color:var(--parch-dim)}
/* reading a parameter: total = your Six + gear + talents + buffs */
.rd-legend{font:400 .76rem/1.5 var(--mono);color:var(--parch-faint);margin:-2px 0 12px}
.rd-legend .bf{color:var(--ember-text)}
.cc-led-s .bf{color:var(--ember-text)}
.hsplit{display:block;margin-top:6px;font:400 .82rem/1.45 var(--mono);color:var(--parch-dim)}
.hsplit b{color:var(--parch);font-weight:400}
.hsplit .bf{color:var(--ember-text)}
.regen{margin-left:8px;font:400 .8rem/1 var(--mono);color:var(--parch-faint)}
.sheet-line .dim{color:var(--parch-faint)}
/* professions on the sheet - reuse the bench prof cards but undimmed + non-interactive */
.prof-list.sheet{grid-template-columns:repeat(5,1fr)}
.prof-list.sheet .prof-card{opacity:1;cursor:pointer}
.prof-list.sheet .prof-card:hover{background:var(--panel-2)}
/* worn - the equipment paperdoll (tap a slot to change it) */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
.eq-slot{display:flex;align-items:center;gap:11px;background:var(--panel-2);padding:11px 13px;border:0;width:100%;
  text-align:left;font-family:inherit;cursor:pointer;min-height:62px}
.eq-slot:hover{background:var(--void)}
.eq-slot .io-img{width:36px;height:36px}
.eq-body{display:flex;flex-direction:column;min-width:0}
.eq-name{font:400 .98rem/1.2 var(--serif);color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-slotlabel{font:400 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--parch-faint);margin-top:4px}
.eq-empty{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--edge-2);color:var(--parch-faint)}
.eq-slot--empty .eq-name{color:var(--parch-faint);font-style:italic}
.eq-grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--edge);
  border:1px solid var(--edge)}
@media (max-width:760px){.eq-grid5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eq-cell .eq-body{flex:1;min-width:0}
.eq-cell .eq-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-cell{display:flex;align-items:center;gap:9px;padding:10px 11px;min-height:56px;width:100%;
  background:var(--panel-2);border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.eq-cell:hover{background:var(--void)}
.eq-cell.on{background:var(--void);box-shadow:inset 0 0 0 1px rgba(240,234,224,.22)}
.eq-cell .io-img{width:34px;height:34px;flex:none}
.eq-cell--empty .eq-name{color:var(--parch-faint);font-style:italic}
.io-img.ghosted{opacity:.5}
.eq-name.ghosted{color:var(--parch-faint);font-style:italic}
.eq-drawer{border:1px solid var(--edge);border-top:0;background:var(--void);padding:2px 12px 12px}
.eq-drawer-h{display:flex;align-items:center;justify-content:space-between;padding:9px 0 7px;
  font:600 .6rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--parch-faint)}
.eq-drawer-x{background:none;border:0;color:var(--parch-faint);font:400 1.05rem/1 var(--serif);
  cursor:pointer;padding:0 2px}
.eq-drawer-x:hover{color:var(--parch)}
.dcols{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start}
@media(max-width:900px){.dcols{grid-template-columns:1fr}}
/* the standing panel's twin buttons (Dossier + the flames), each carrying its own badge */
.ph-btn{position:relative;display:inline-block} .ph-btn + .ph-btn{margin-left:10px}
.aside.pts-due{color:#E85A10;font-weight:600;letter-spacing:.04em}
.learn-box{border:1px solid var(--edge);background:var(--void);padding:10px 13px;margin:12px 0}
.learn-h{font:600 .58rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--parch-faint);margin-bottom:8px}
summary.learn-h{cursor:pointer}
/* the fold (N27, round 33): no browser marker; a chevron in the box's right corner; folded, the
   heading's own gap below goes, so the box is as deep above the words as below them */
details.learn-box > summary.learn-h{display:flex;align-items:center;justify-content:space-between;list-style:none}
details.learn-box > summary.learn-h::-webkit-details-marker{display:none}
details.learn-box > summary.learn-h::after{content:"";flex:0 0 auto;width:6px;height:6px;margin:0 2px 0 12px;
  border-right:1.5px solid var(--parch-faint);border-bottom:1.5px solid var(--parch-faint);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
details.learn-box[open] > summary.learn-h::after{transform:translateY(2px) rotate(-135deg)}
details.learn-box > summary.learn-h:hover::after{border-color:var(--parch)}
details.learn-box:not([open]) > summary.learn-h{margin-bottom:0}
/* what a contract walk has banked between stations (N28, round 33): the header's stat strip,
   its label first; then Next station takes the row and Leave the walk keeps its own size */
.bank-strip{display:flex;align-items:stretch;border:1px solid var(--edge);margin:4px 0 12px}
.bank-strip .bank-h{display:flex;align-items:center;padding:.38rem .8rem;border-right:1px solid var(--edge);
  font:600 .64rem/1.25 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint)}
.bank-strip .stat{flex:1 1 0;min-width:0}
.bank-strip .bank-h + .stat{border-left:0}
.q-go{display:flex;align-items:center;gap:12px;margin:10px 0 2px}
.q-go form{margin:0}
.q-go form.grow{flex:1 1 auto;min-width:0}
.learn-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-top:1px solid rgba(240,234,224,.07);font-size:.92rem}
.learn-row:first-of-type{border-top:0}
.learn-row .num{color:var(--parch);white-space:nowrap}
.learn-foot{margin-top:8px;font:400 .78rem/1.5 var(--mono);color:var(--parch-faint)}
.learn-part{font:600 .56rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember-mid);margin:14px 0 6px}
.learn-h + .learn-part{margin-top:2px}
.learn-part + .learn-row{border-top:0}
input.qty-in{width:46px;height:24px;background:var(--void);border:1px solid var(--edge-2);color:var(--parch);
  font:400 .72rem/22px var(--mono);padding:0 4px;margin:0;text-align:center;appearance:textfield;-moz-appearance:textfield}
input.qty-in::-webkit-inner-spin-button,input.qty-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.prof-card--col{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:13px 10px 11px}
.prof-card--col .prof-img{width:46px;height:46px}
.prof-card--col .prof-sub{margin-top:0}
.prof-card--dim{opacity:.45}
.prof-card--dim:hover{opacity:.45}
.prof-card--col:not(.prof-card--dim) .prof-name{color:var(--lantern,#F0EAE0)}
.prof-card--col:not(.prof-card--dim):not(:disabled):hover{opacity:1;background:var(--void)}
.prof-card.on{opacity:1;background:var(--void);
  box-shadow:inset 0 0 0 1px #6E1604,inset 0 3px 0 var(--ember-flame,#F0641A)}
.prof-note{display:block;font:400 .66rem/1.4 var(--mono);color:var(--parch-faint);
  min-height:1.4em;white-space:normal}
.prof-note.work{color:#F0641A}
.rio--short .io-img{opacity:.45}
.need .short{color:#B04A42;font-weight:600}
.idea-line{border:1px solid #6E1604;background:#1c1206;color:#E85A10;padding:9px 12px;margin:2px 0 10px}
.idea-line b{color:#F0641A}
.idea-line.ready{border-color:var(--edge-2);background:var(--panel-2);color:var(--parch)}
.prof-tooline{display:block;font:400 .62rem/1.3 var(--mono);color:#E85A10;margin-top:2px}
.prof-tooline.off{color:var(--parch-faint)}
.tbl .r{text-align:right}
.tbl th.r{text-align:right}
/* KB-347 B3: a door's corner is only a place (top right); the circle or the chip inside it brings its own colour */
.door-corner{position:absolute;top:8px;right:8px;z-index:2;display:flex}
.door-corner .nav-badge{margin:0}
.door-corner .chip{white-space:nowrap}
/* header nav badges (KB-347): the circle holds "!" (red: needs you now) or a count (a grey ring: information; an
   amber ring: not seen yet). Points and flames to spend are no count: they are the drawn ember diamond below. */
/* KB-347 B1: the circle never grows its line - it ignores 3 px of line at each end (margin -3px) and sits its centre on
   the label's capitals (vertical-align 2px); the 3 px top padding puts the sign on the circle's centre */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;
  margin:-3px 0 -3px 5px;padding:3px 4px 0;border-radius:8px;font:700 .58rem/1 var(--mono);
  color:#F0EAE0;background:var(--blood-arterial);vertical-align:2px}
/* N32a, round 33: a badge that is information, not an alarm - the Deeds tab's count of deeds
   won is a tally, so it wears a quiet grey ring instead of the red pill; so do the open contracts (the menu, the
   dock's City, the Quests door) and the Roads tab's count (owner Q3, KB-347 B4) */
.nav-badge.info{background:transparent;color:var(--parch-dim);box-shadow:inset 0 0 0 1px var(--parch-faint)}
/* N32b, round 33 (owner Q25): the Deeds tab's count of deeds not seen yet - amber figures in an
   amber ring; it turns back to the grey tally (.info) once the tab is opened. The bell's unread count (the header
   and the dock's Me) wears the same ring: it is the same fact, not seen yet (owner Q2, KB-347 B4) */
.nav-badge.amber{background:transparent;color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
/* KB-347 B3: the diamond - ready to take or spend (shards, points, flames, a lesson, the dawn gift, a mercy). Solid ember, no
   text: a drawn 6 px square turned 45 degrees, centred on the label's capitals like the circle (vertical-align 2px) */
.nav-diamond{display:inline-block;width:6px;height:6px;margin:0 2px 0 8px;background:var(--ember-flame);
  transform:rotate(45deg);vertical-align:2px}
.tool-pick-list{text-align:left;max-width:480px;margin:0 auto 14px}
.tool-pick{cursor:pointer}
.tool-pick input{accent-color:#E85A10;flex:none}
.tool-pick:has(input:checked){background:var(--void);box-shadow:inset 0 0 0 1px rgba(240,234,224,.22)}
.tp-body{display:flex;flex-direction:column;min-width:0;text-align:left}
.tp-desc{font:400 .76rem/1.4 var(--mono);color:var(--parch-faint)}
/* the Map of Flames - talent constellations + nodes */
.flame-cons{margin-bottom:18px}
.flame-cons:last-child{margin-bottom:0}
.flame-cons-h{display:flex;align-items:baseline;gap:8px;font:600 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--parch-faint);margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid var(--edge)}
.flame-cons-h .pts{margin-left:auto;color:var(--parch-dim)}
.flame-path{display:flex;flex-direction:column;gap:7px}
.flame-node{background:var(--void);border:1px solid var(--edge);box-shadow:inset 3px 0 0 var(--edge-2);padding:9px 14px}
.flame-node.lit{box-shadow:inset 3px 0 0 var(--parch-faint)}
.flame-node.keystone{box-shadow:inset 3px 0 0 var(--ember-flame)}
.flame-node.avail{box-shadow:inset 3px 0 0 var(--ember-mid);cursor:pointer;transition:background .15s}
.flame-node.avail:hover{background:var(--panel-2)}
.flame-node.locked{opacity:.42}
.fn-top{display:flex;align-items:baseline;gap:10px}
.fn-name{font:400 1rem/1.25 var(--serif);color:var(--parch)}
.fn-rank{margin-left:auto;font:400 .74rem/1 var(--mono);color:var(--parch-dim);white-space:nowrap}
.fn-cost{margin-left:auto;font:600 .64rem/1 var(--mono);letter-spacing:.04em;color:var(--ember-text);border:1px solid #5a3410;background:#1c1206;padding:4px 9px;white-space:nowrap}
.fn-fx{font:400 .85rem/1.4 var(--serif);color:var(--parch-dim);margin-top:4px}
.fn-need{font:400 .72rem/1.3 var(--mono);color:var(--parch-faint);margin-top:5px}
/* the other constellations, still to explore */
.cons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
.cons-cell{background:var(--panel-2);padding:11px 14px}
.cons-cell.locked{opacity:.6}
.cons-name{font:400 1.02rem/1.2 var(--serif);color:var(--parch)}
.cons-theme{font:400 .78rem/1.4 var(--serif);color:var(--parch-dim);margin-top:3px}
.cons-state{font:400 .66rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--parch-faint);margin-top:7px}
/* The Works - two-layer build bar (resources stocked → worked into road) + frontier selector */
#road-zone,#basket,#stand{scroll-margin-top:150px}
.buildbar{position:relative;height:20px;background:var(--void);border:1px solid var(--edge-2);overflow:hidden;margin:5px 0 0}
.buildbar .res{position:absolute;top:0;bottom:0;left:0;background:rgba(240,234,224,.13)}
.buildbar .work{position:absolute;top:0;bottom:0;left:0;background:var(--parch-dim)}
.buildbar .capline{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--ember-flame);opacity:.85}
.bb-legend{display:flex;gap:8px 18px;flex-wrap:wrap;font:400 .78rem/1.3 var(--mono);color:var(--parch-dim);margin-top:9px}
.bb-legend .sw{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:6px;border:1px solid var(--edge-2)}
.bb-legend .sw.res{background:rgba(240,234,224,.13)}
.bb-legend .sw.work{background:var(--parch-faint)}
.bb-legend .sw.cap{background:var(--ember-flame);width:3px}
.bb-legend b{color:var(--parch)}
.fr-mapframe{position:relative;width:100%;height:440px;border:1px solid var(--edge);background:var(--void);overflow:hidden}
.fr-mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* a painted map (KB-336) rises over the page vignette (99) and grain (101) on every page, as the delve's does */
.fr-mapframe.painted{z-index:102}
.fr-mapframe .fr-mapcap{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:8px 12px;background:linear-gradient(0deg,rgba(13,11,10,.92),rgba(13,11,10,0));
  font:400 .72rem/1.4 var(--mono);color:var(--parch-faint);letter-spacing:.04em}
.fr-mapframe .fr-mapcap b{color:var(--parch-dim)}
/* the caption speaks the device (KB-155): a desk reads the whole sentence, a phone
   the one line a finger needs - mouse words never reach a touch screen */
.fr-mapcap .cap-phone{display:none}
.fr-map{width:100%;max-width:520px;display:block;margin:2px auto 0}
.fr-map .built{stroke:var(--ember-mid);stroke-width:3}
.fr-map .frontier{stroke:var(--parch-faint);stroke-width:2;stroke-dasharray:5 5}
.fr-map .frontier.on{stroke:var(--ember-flame);stroke-dasharray:none;stroke-width:3}
.fr-map .nd{fill:var(--panel-2);stroke:var(--edge-2)}
.fr-map .nd.city{fill:var(--ember-flame)}
.fr-map .lbl{fill:var(--parch-faint);font:400 9px var(--mono);text-anchor:middle}
.fr-map .lbl.on{fill:var(--parch)}
.fr-boardhead{font:400 .6rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--parch-faint);margin:14px 0 6px}
.frontier-list{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--void)}
.fr-road{display:grid;grid-template-columns:minmax(0,1fr) 152px auto;gap:16px;align-items:center;background:transparent;border:0;border-top:1px solid var(--edge);padding:12px 14px;width:100%;text-align:left;font-family:inherit;cursor:pointer}
.fr-road:first-child{border-top:0}
.fr-road:hover{background:var(--panel-2)}
.fr-road.on{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--ember-flame)}
.fr-road.locked{opacity:.42;cursor:default}
.fr-road .frn{display:block;font:400 1.04rem/1.25 var(--serif);color:var(--parch)}
.fr-road .frm{display:block;font:400 .74rem/1.4 var(--mono);color:var(--parch-faint);margin-top:4px}
.fr-prog{display:flex;flex-direction:column;gap:6px}
.fr-mini{position:relative;height:12px;background:var(--void);border:1px solid var(--edge-2);overflow:hidden}
.fr-mini .r{position:absolute;top:0;bottom:0;left:0;background:rgba(240,234,224,.13)}
.fr-mini .w{position:absolute;top:0;bottom:0;left:0;background:var(--parch-faint)}
.fr-mini .c{position:absolute;top:0;bottom:0;width:2px;background:var(--ember-flame)}
.fr-pct{font:400 .68rem/1 var(--mono);color:var(--parch-faint);text-align:right}
.modalback .modal{border-radius:0}
.haul-tot{margin-left:auto;font:400 .82rem/1 var(--mono);color:var(--parch-dim)}
.haul-break{list-style:none;margin:0;padding:0 13px 11px 64px;display:flex;flex-direction:column;gap:5px}
.haul-break li{display:flex;justify-content:space-between;gap:14px;max-width:300px;
  font:400 .8rem/1.2 var(--mono);color:var(--parch-dim)}
.haul-break b{color:var(--parch)}
/* pane-first tabs (bench/shop): pull the pane's panel up onto the flush tab
   strip so the active tab attaches to it (their panels use the default margin) */
.tabbed [data-pane].pane-first>.panel{margin-top:-1px}
/* learn - ideas come from materials */
.idea-line{display:flex;align-items:center;gap:10px;font:400 .82rem/1.3 var(--mono);color:var(--parch-dim);margin:2px 0 4px}
.idea-line.ready{color:var(--parch)}
/* material picker - reactive toggle chips (image keeps its tier frame; the chip reacts to the mouse) */
.mat-pick{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0 0}
.mat-pick button{display:inline-flex;align-items:center;gap:9px;font:400 .88rem/1.05 var(--serif);color:var(--parch);
  background:var(--void);border:1px solid var(--edge);border-radius:0;padding:6px 12px 6px 7px;cursor:pointer;
  transition:border-color .15s,background .15s}
.mat-pick button:hover{border-color:var(--parch-faint);background:var(--panel-2)}
.mat-pick button.on{border-color:transparent;background:var(--panel-2);box-shadow:inset 3px 0 0 var(--ember-flame)}
.mat-pick .io-img{width:32px;height:32px}
/* learn scope - each teachable recipe is its OWN process block (void inset + hairline), craft-style flow inside */
.lrn-grp{font:600 .58rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--parch-faint);margin:16px 0 8px}
.lrn-grp:first-child{margin-top:2px}
.learn-item{display:flex;gap:16px;align-items:center;background:var(--void);border:1px solid var(--edge);padding:12px 15px;margin-bottom:9px}
.learn-item:last-child{margin-bottom:0}
.learn-item--locked{opacity:.5}
.learn-main{flex:1;min-width:0}
.learn-name{font:400 1.05rem/1.25 var(--serif);color:var(--parch)}
.learn-item .rflow{margin:8px 0 7px}
.learn-gate{font:400 .74rem/1.4 var(--mono);color:var(--parch-dim)}
.learn-gate .no{color:var(--rust-soft)}
.lrn-known{font:400 .82rem/1 var(--mono);color:var(--parch-faint);white-space:nowrap;flex:none}

/* effects shared by additions */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
@keyframes flick{0%{transform:scale(1) rotate(-1.4deg)}40%{transform:scale(1.05,.98) rotate(1deg)}100%{transform:scale(.97,1.05) rotate(1.4deg)}}

/* ---- the fight - v3 zone selector, ported to Iron Woodcut (HP=blood · Wick=ember · your strike=ember · guard=bone · radius 0) ---- */
.fx{margin-top:6px}
.fx-heads{display:flex;align-items:flex-end;gap:16px}
.fx-head{flex:1;min-width:0}
.fx-head--foe{text-align:right;display:grid;grid-template-columns:1fr auto;
  grid-template-rows:auto auto auto auto;column-gap:12px;align-items:end}
.fx-head--foe .fx-name,.fx-head--foe .fx-hpline,.fx-head--foe .fx-bar,
.fx-head--foe .fx-tell{grid-column:1;min-width:0}
.fx-head--foe .fx-face{grid-column:2;grid-row:1/5}
.fx-head--you{display:grid;grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto;column-gap:12px;align-items:end}
.fx-head--you .fx-name,.fx-head--you .fx-hpline,.fx-head--you .fx-bar{grid-column:2;min-width:0}
.fx-head--you .fx-face{grid-column:1;grid-row:1/4}
.fx-face{width:56px;height:56px;align-self:center;
  border:1px solid rgba(240,234,224,.16);background:var(--panel);image-rendering:pixelated}
.fx-face.shade{filter:brightness(.5) saturate(.35)}
.rc-word.rc-pass{color:var(--parch-faint);font-style:italic}
.fx-tell{font:400 .74rem/1.4 var(--mono);color:var(--parch-faint);margin-top:4px}
.fx-read{color:var(--parch-faint);font-weight:400}
.fx-name{font-family:var(--serif);font-size:1.14rem;color:var(--lantern)}
.fx-sym{color:var(--ember-flame)}
.fx-hpline{font:400 .82rem/1.4 var(--mono);color:var(--parch);margin-top:2px}
.fx-outcome{margin-top:14px;border-top:1px solid rgba(240,234,224,.12);padding-top:14px}
.fx-outcome>p{margin:0 0 12px;color:var(--parch-dim)}
.fx-exp{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border:1px solid rgba(240,234,224,.14);background:var(--panel-2);
  padding:11px 14px;margin:0 0 12px}
.fx-exp .k{font:600 .6rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--parch-faint)}
.fx-exp .v{font:600 1.05rem/1 var(--mono);font-variant-numeric:tabular-nums;color:#F0EAE0}
/* N26b, round 33: the rows a won fight pays open one by one, like the dungeon's sack (--i is the row's
   place in the order; public/js/fight.js and partials/dungeon-sack.html set it). The rule lives here and
   not in dungeon.css because both pages read it. A fight's row owns a plate (.fx-exp), so its end keyframe
   is left implicit: the row settles on its own plate, not on transparent. */
.qs-reveal{animation:qs-open .55s ease-out both;animation-delay:calc(var(--i, 0) * 420ms)}
/* a dungeon's way out shows its sack after a breath (the owner, 2026-10-07: 1-2 s before the reward) */
.qs-grid.lead .qs-reveal{animation-delay:calc(1.5s + var(--i, 0) * 420ms)}
@keyframes qs-open{0%{opacity:0;background:rgba(232,90,16,.14)}35%{opacity:1}100%{opacity:1;background:transparent}}
.fx-exp.qs-reveal{animation-name:qs-open-plate}
@keyframes qs-open-plate{0%{opacity:0;background:rgba(232,90,16,.14)}35%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.qs-reveal{animation:none!important}}
.fx-bar{position:relative;height:12px;background:#0A0908;border:1px solid rgba(240,234,224,.16);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.65);overflow:visible;margin-top:6px}
.fx-bar>i{display:block;height:100%;width:100%;
  background:linear-gradient(180deg,var(--blood-arterial),var(--blood-mid));
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.35)}
.fx-bar>i.low{background:linear-gradient(180deg,var(--blood-mid),var(--blood-venous))}
.fx-bar .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:#f2e2b4}
.fx-wickwrap{margin-top:9px}
.fx-wickwrap .meter-row{margin-bottom:4px}
.fx-wickwrap .meter-row span:first-child{font:400 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ember-text)}
.fx-mid{flex:0 0 auto;text-align:center;padding-bottom:2px}
.fx-round{font:400 .72rem/1.3 var(--mono);letter-spacing:.08em;color:var(--parch-dim)}
.fx-timer{font:400 1.08rem/1.3 var(--mono);color:var(--parch)}
.fx-timer--low{color:var(--rust-soft)}
/* on a phone the duel heads stack: you, the clock between, the foe - full width each */
@media(max-width:680px){
  .fx-heads{flex-wrap:wrap;gap:8px 16px}
  .fx-head{flex:1 1 100%}
  .fx-head--you{order:1}
  .fx-mid{order:2;flex:1 1 100%;display:flex;justify-content:center;align-items:baseline;gap:10px;padding:0}
  .fx-head--foe{order:3}
  .fx-wickwrap .meter-row{flex-wrap:wrap;row-gap:2px}
}
.sel-instruction{margin:18px 0 9px;font:italic 400 .96rem/1.5 var(--serif);color:var(--parch-dim);text-align:center}
.sel-instruction b{color:var(--parch);font-style:normal}
.sel-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:start}
.sel-col-hdr{font:400 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--parch-dim);height:1.7rem;display:flex;align-items:center}
.sel-col--def .sel-col-hdr{justify-content:flex-end}
.sel-rail{display:flex;flex-direction:column}
.sel-rail-hdr{height:1.7rem}
.sel-zg{height:2.6rem;margin-bottom:8px;width:1.9rem;display:flex;align-items:center;justify-content:center;color:var(--parch-faint);font-size:1.02rem}
.zr{display:flex;align-items:center;gap:9px;width:100%;height:2.6rem;margin-bottom:8px;border:1px solid rgba(240,234,224,.12);background:var(--panel-2);color:var(--parch);font:400 .96rem/1 var(--serif);cursor:pointer;padding:0 12px}
.sel-col--def .zr{justify-content:flex-end}
.z-lbl{white-space:nowrap}
.z-dot{width:8px;height:8px;border:1px solid var(--parch-dim);flex:none}
.z-tell{display:flex;align-items:center;gap:3px;flex:none}
.t-dot{width:6px;height:6px;background:rgba(240,234,224,.12);border:1px solid rgba(240,234,224,.12);transition:opacity .22s,background-color .22s,border-color .22s;opacity:.5}
.sel-col--def .t-dot.on{background:var(--rust-soft);border-color:var(--rust-soft)}
.sel-col--atk .t-dot.on{background:var(--parch-dim);border-color:var(--parch-dim)}
.t-dot.on[data-age="0"]{opacity:1}.t-dot.on[data-age="1"]{opacity:.72}.t-dot.on[data-age="2"]{opacity:.52}.t-dot.on[data-age="3"]{opacity:.3}
.zr:hover{border-color:var(--parch-dim)}
.zr-sel-def{border-color:var(--lantern);box-shadow:inset 0 0 0 1px var(--lantern)}
.zr-sel-def .z-dot{background:var(--lantern);border-color:var(--lantern)}
.zr-sel-atk{border-color:var(--ember-flame);box-shadow:inset 0 0 0 1px var(--ember-flame)}
.zr-sel-atk .z-dot{background:var(--ember-flame);border-color:var(--ember-flame)}
.zr-dis{opacity:.32;cursor:default}
.zr-pulse{animation:zr-pulse .18s ease}
@keyframes zr-pulse{50%{transform:scale(.97)}}
.commit-btn{display:block;width:100%;margin-top:10px;padding:14px;border:1px solid rgba(240,234,224,.12);background:var(--panel-2);color:var(--parch-dim);font:400 .92rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.commit-btn.armed{border-color:var(--ember-flame);color:var(--ember-flame)}
.commit-btn.armed:hover{background:var(--ember-flame);color:var(--void)}
.commit-arrow{margin-left:8px}
.fx-log{margin-top:22px}
.rc{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:9px;border:1px solid rgba(240,234,224,.12);background:var(--panel-2);padding:11px 12px 9px 34px;margin-bottom:8px;align-items:center}
.rc-r{position:absolute;left:9px;top:11px;font:400 .68rem/1.4 var(--mono);color:var(--parch-faint)}
.rc-side{min-width:0}
.rc-side--opp{text-align:right}
.rc-wound{display:flex;align-items:center;gap:7px}
.rc-side--opp .rc-wound{justify-content:flex-end}
.rc-zg{color:var(--parch-faint)}
.rc-word{font:400 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.rc-word--block,.rc-word--dodge,.rc-word--missed{color:var(--parch-dim)}
.rc-word--crit.fav,.rc-word--hit.fav,.rc-word--pierce.fav{color:var(--ember-flame)}
.rc-word--crit.adv,.rc-word--hit.adv,.rc-word--pierce.adv{color:var(--rust-soft)}
.rc-pill{font:400 .78rem/1 var(--mono);padding:2px 6px;border:1px solid transparent}
.rc-pill--fav{color:var(--ember-flame);border-color:rgba(240,100,26,.4)}
.rc-pill--adv{color:var(--rust-soft);border-color:rgba(160,69,69,.45)}
.rc-pill--crit{box-shadow:0 0 0 1px var(--ember-flame)}
.rc-guard{display:flex;gap:5px;margin-top:6px}
.rc-side--opp .rc-guard{justify-content:flex-end}
.bead{color:rgba(240,234,224,.14);font-size:.85rem}
.bead.lit{color:var(--parch-dim)}
.bead.held{color:var(--lantern)}
.bead.pierced{color:var(--rust-soft)}
.rc-center{display:flex;flex-direction:column;line-height:1;color:var(--parch-faint)}
.rc-arrow.fav{color:var(--ember-flame)}
.rc-arrow.adv{color:var(--rust-soft)}
.rc-afk{font:italic 400 .86rem/1.4 var(--serif);color:var(--parch-dim)}
.rc-flavor{grid-column:1/-1;margin-top:6px;padding-top:6px;border-top:1px solid rgba(240,234,224,.07);font:italic 400 .92rem/1.5 var(--serif);color:var(--parch-dim)}
.rc-voice{color:var(--ember-text)} /* the shadow speaks (KB-035, win 40) */
/* Both of these are children of .fx-outcome, whose `>p` rule (dim ivory) outranks a
   bare class - so they are qualified here, or the shadow speaks in the wrong colour. */
.fx-outcome>p.fx-scene{margin:10px 0 2px;font:italic 400 .98rem/1.6 var(--serif);
  color:var(--ember-text)} /* the naming scene (win 90) */
/* the shadow's closing word on a duel (KB-037) - set apart by a hairline, ember like the Voice */
.fx-outcome>p.fx-voice{margin:16px 0 2px;padding-top:14px;border-top:1px solid var(--edge);
  font:italic 400 1.06rem/1.55 var(--serif);color:var(--ember-text)}
/* the peddler's cloth: the chosen lot is unmistakable, not a 12px dot (KB-036) */
.pl-lot{cursor:pointer;display:flex;gap:9px;align-items:center;padding:7px 9px;
  border:1px solid rgba(240,234,224,.07);border-left:3px solid transparent;
  background:var(--ink-well,#101011);margin-bottom:3px}
.pl-lot input[type=radio]{accent-color:var(--ember-flame,#F0641A);width:16px;height:16px;flex:0 0 auto}
.pl-lot .pl-mark{margin-left:auto;font:400 .78rem/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ember-text,#D2571C);opacity:0;white-space:nowrap}
.pl-lot:hover{border-color:rgba(240,234,224,.2)}
.pl-lot:has(input:checked){border-left-color:var(--ember-flame,#F0641A);
  border-color:rgba(240,100,26,.35);background:rgba(232,96,24,.10)}
.pl-lot:has(input:checked) .pl-mark{opacity:1}
.pl-lot:has(input:checked) .haul-name{color:var(--parch,#F0EAE0)}
/* the peddler's cloth (N68, round 33): each good is a row of the pack (icon, name, Q, unit worth, how many it holds).
   Without a script its number field posts the count; with one (.ped-live) the field turns hidden, the row's - and Add
   set it and the stat strip on top counts the worth laid against the picked lot's price. A row with a count laid
   carries the chosen lot's ember edge. */
.ped-tally,.ped-pick{display:none}
.ped-live .ped-tally{display:flex}
.ped-live .ped-pick{display:inline-flex;align-items:center;gap:6px;flex:none}
.ped-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:7px 12px}
.ped-line .haul-name{flex:1 1 160px;min-width:0}
.ped-pick .ped-n{min-width:2.4ch;text-align:center;font:600 .82rem/1 var(--mono);color:var(--parch-faint);
  font-variant-numeric:tabular-nums}
.ped-good.on{box-shadow:inset 3px 0 0 var(--ember-flame,#F0641A);background:rgba(232,96,24,.06)}
.ped-good.on .ped-n{color:var(--parch)}
.ped-aff{margin:0 12px 6px 52px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   Type & rhythm - root +14% and compact spacing. From the
   Dossier redesign (variant B); promoted client-wide per owner
   2026-07-20. Applies to every screen (the kit's baseline).
   ============================================================ */
html,body{font-size:18.24px}
.wrap{padding:14px 20px 18px}
.panel{padding:13px 15px;margin:9px 0}
.notice{margin:8px 0;padding:9px 12px}
.crumbs{margin-bottom:7px}
.btnrow{margin:10px 0 2px}
.cc-bar-row{margin-bottom:10px}
.cc-stat-row{padding:8px 14px;gap:12px}
.cc-led-row{padding:6px 0}
/* tabs attach to their block: no bottom divider, dropped 1px onto the pane so
   the active tab's background covers the panel's top edge (CEO 2026-07-21) */
.tabs{margin:8px 0 -1px}
.eq-cell{min-height:50px;padding:8px 10px}
.prof-card{padding:9px 11px}
.cc-stat-hint{font-size:.92rem}
.cc-stat-note{font-size:.7rem}
.cc-led-hint{font-size:.97rem}
.cc-led-s{font-size:.75rem}
.prof-sub{font-size:.87rem}
.eq-slotlabel{font-size:.73rem}
@media(max-width:760px){.prof-list.sheet{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the Dossier's tab panes - only the active one renders; the container height
   animates to it, so the page bottom pulls up elastically instead of leaving a
   void under the short tabs. display:none keeps each pane's state (drawers,
   steppers) across a switch. overflow is clipped only while the height moves. */
.tabpanes{transition:height .42s cubic-bezier(.16,1,.3,1)}
.tabpanes.animating{overflow:hidden}
.tabpane{display:none}
.tabpane.on{display:block;animation:dossierPaneIn .28s ease}
@keyframes dossierPaneIn{from{opacity:0}to{opacity:1}}
.btn.ghost{background:transparent;border-color:var(--edge);color:var(--parch-dim)}
.btn.ghost:hover:not(:disabled){border-color:var(--parch-dim);color:var(--parch)}

/* collapsible ledger groups - the Dossier's "What the Six give you": each stat
   group (in a fight / on the road / …) folds behind its header to shrink the
   sheet. grid-rows 0fr→1fr gives a smooth open/close (killed by reduced-motion) */
.cc-led-grp{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;padding:0;margin:12px 0 2px;cursor:pointer;font:inherit;text-align:left}
.cc-led-grp:first-of-type{margin-top:4px}
.cc-led-grp .cc-led-sub{margin:0}
.cc-led-grp:hover .cc-led-sub{color:var(--parch-dim)}
.cc-led-caret{font:400 .8rem/1 var(--mono);color:var(--parch-faint);flex:none}
.cc-led-caret::before{content:"+"}
.cc-led-grp[aria-expanded="true"] .cc-led-caret::before{content:"-"}
.cc-led-wrap{overflow:hidden;height:0;transition:height .3s ease}
.cc-led-wrap>.cc-led{margin:0}

/* --- viewport banding (telemetry, KB-019 open question) -------------------
   Which width band a screen is in, learned WITHOUT JavaScript: each band points
   the hidden probe at a different 1x1 image, and the server reads the band off
   the path that was fetched. No user agent, no width, no fingerprint - five
   bands and nothing else. Bands must not overlap or two probes fire at once. */
.vp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;
    background-repeat:no-repeat;pointer-events:none}
@media (max-width:380px){.vp{background-image:url(/px/xs.gif)}}
@media (min-width:381px) and (max-width:520px){.vp{background-image:url(/px/sm.gif)}}
@media (min-width:521px) and (max-width:820px){.vp{background-image:url(/px/md.gif)}}
@media (min-width:821px) and (max-width:1200px){.vp{background-image:url(/px/lg.gif)}}
@media (min-width:1201px){.vp{background-image:url(/px/xl.gif)}}

/* ---- Dossier · the Six redesign (Claude Design round-trip, KB-110) ---- */
.pts-tag{margin-left:auto;display:inline-flex;align-items:baseline;gap:.44rem;border:1px solid var(--edge-2);background:var(--void);padding:5px 9px}
.pts-n{font:700 .95rem/1 var(--mono);color:var(--ember-text);font-variant-numeric:tabular-nums}
.pts-l{font:400 .56rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-dim)}
.pts-tag.spent{border-color:var(--edge)}
.pts-tag.spent .pts-n{color:var(--parch-faint)}
.cc-stat-tag{font:400 .72rem/1 var(--mono);letter-spacing:.06em;color:var(--parch-faint)}
.cc-stat-tag.main{color:var(--ember-text);font-weight:700;cursor:help}
.cc-stats .cc-stat-row{padding:13px 0;align-items:center;grid-template-columns:1fr auto;border-bottom:1px solid var(--edge)}
.cc-stats .cc-stat-row.is-main{border-left:1px solid var(--ember-mid);padding-left:13px}
.cc-stats .cc-stat-hint{font-size:.88rem}
.cc-stats .cc-stepper{display:flex;align-items:center;gap:9px}
.cc-stats .cc-stepper .cc-step-btn{width:44px;height:44px;font-size:1.2rem;display:flex;align-items:center;justify-content:center;padding:0}
.cc-stats .cc-stepper .js-dec,.cc-stats .cc-stepper .js-inc{padding-top:3px}
.cc-stats .cc-stepper .cc-stat-val{width:58px;height:44px;font-size:1.4rem;display:flex;align-items:center;justify-content:center;padding:3px 0 0;font-variant-numeric:tabular-nums}
.cc-stat-val{transition:color .45s ease}
.cc-stat-val.vflash{transition:none;color:var(--lantern)}
.cc-stats .cc-step-btn:disabled{opacity:1;color:var(--parch-faint);border-color:var(--edge);background:transparent;cursor:default}
.alloc-acts{display:grid;grid-template-columns:1.1fr .75fr 1.35fr;gap:10px}
.alloc-acts .btn{width:100%;height:38px;padding:0 8px;white-space:nowrap}
@media(max-width:900px){.alloc-acts{grid-template-columns:1fr 1fr}.alloc-acts .btn:last-child{grid-column:1/-1}}
@media(max-width:600px){.cc-stats .cc-stat-row{grid-template-columns:1fr;gap:10px}.cc-stats .cc-stepper{width:100%}.cc-stats .cc-stepper .cc-stat-val{flex:1;width:auto}}
.ph:has(.pts-tag){display:flex;align-items:center;gap:10px}
.cc-stat-tag{margin-right:.35em}
/* ---- Dossier · the params ledger (CD round-trip, KB-110) ---- */
.led-cols{display:flex;flex-direction:column;justify-content:space-between;gap:13px;height:100%}
.led-g{border-top:0;padding:0}
.dcols .cc-led-grp{margin:0;padding:0;border-bottom:0;cursor:default;pointer-events:none;gap:12px;justify-content:flex-start}
.dcols .cc-led-grp::after{content:"";flex:1;border-top:1px solid var(--edge);transform:translateY(-1px)}
.dcols .cc-led-grp .cc-led-caret{display:none}
.dcols .cc-led-grp .cc-led-sub{font-size:.62rem;letter-spacing:.15em;color:var(--parch-dim)}
.dcols .cc-led-wrap{height:auto!important}
.dcols .cc-led{border-top:0;margin-top:0;padding-left:13px}
.dcols .cc-led-row{display:flex;align-items:baseline;gap:7px;padding:2px 0;border-bottom:0}
.dcols .cc-led-row::after{content:"";flex:1;order:3;border-bottom:1px dotted var(--edge-2);margin:0 5px 0 7px}
.dcols .cc-led-row:hover{background:rgba(211,204,192,.045)}
.dcols .cc-led-n{font-size:.78rem;text-decoration:none}
.dcols .cc-led-row:hover .cc-led-n{text-decoration:underline dotted;text-underline-offset:3px}
.dcols .cc-led-v{font-size:.78rem;order:4;white-space:nowrap;color:var(--lantern)}
.dcols .cc-led-s{font-size:.56rem;min-width:0;text-align:left}
.dcols .cc-led-hint{font-size:.78rem;padding:2px 0 6px;border-bottom:0}
.cc-led-v .lv-p,.cc-led-v .lv-u{color:var(--parch-faint)}
.cc-led-row.is-delta .cc-led-n,.cc-led-row.is-delta .cc-led-v{color:var(--lantern)}
.cc-led-s .bf{color:var(--ember-text)}
/* ---- Dossier · the paper-doll + trades recolor (CD round-trip, KB-110) ---- */
.eq-doll{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,250px) minmax(0,1fr);gap:10px 14px;align-items:stretch;margin:4px 0 2px}
.eq-doll .eq-cell{border:1px solid var(--edge);transition:background .15s ease,border-color .15s ease}
.eq-doll .eq-cell:hover{border-color:var(--parch-faint)}
.eq-doll .eq-cell .io-img,.eq-doll .eq-cell .eq-empty{width:71px;height:71px;transition:transform .15s ease}
.eq-doll .eq-cell:hover .io-img,.eq-doll .eq-cell:hover .eq-empty{transform:translateY(-1px)}
.eq-dcol{display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.doll-fig{position:relative;display:flex;align-items:center;justify-content:center;padding:5px;min-height:300px}
.doll-fig::before{content:"";position:absolute;inset:6%;background:radial-gradient(50% 46% at 50% 54%,var(--ember-glow),rgba(232,96,24,.04) 52%,transparent 74%);pointer-events:none}
.doll-fig img{position:relative;height:100%;max-height:340px;max-width:100%;object-fit:contain}
.doll-hands{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,260px));justify-content:center;gap:10px 14px;grid-auto-rows:1fr}
.doll-hands .eq-cell{border:1px solid var(--edge);min-height:93px}
.dcol-l .eq-cell,.doll-hands .eq-cell:first-child{flex-direction:row-reverse}
.dcol-l .eq-cell .eq-body,.doll-hands .eq-cell:first-child .eq-body{text-align:right}
@media(max-width:600px){.eq-doll{grid-template-columns:1fr 1fr}.doll-fig{display:none}.doll-hands{grid-template-columns:1fr 1fr}.dcol-l .eq-cell{flex-direction:row}.dcol-l .eq-cell .eq-body{text-align:left}}
.prof-tooline{display:block;font:400 .62rem/1.3 var(--mono);color:var(--parch-dim);margin-top:2px}
.prof-tooline.off{color:var(--ember-text)}
/* ---- Dossier · the CD polish batch (owner 2026-08-03) ---- */
@keyframes barFill{from{width:0}}
.cc-well>i,.work-bar>i{animation:barFill .65s cubic-bezier(.22,1,.36,1)}
.cc-well>i{transition:width .18s ease-out}
@keyframes dossierPaneIn{from{opacity:0}to{opacity:1}}
.tabpane.on{animation:dossierPaneIn .28s ease}
#eq-drawer,#tr-drawer{margin-top:10px;border-top:1px solid var(--edge)}
.cc-led-s .bf{color:#8FAE6B}
.cc-led-s .bf.neg{color:var(--rust-soft)}
.cc-led-brk{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-style:normal}
.brk-chip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--edge);background:var(--void);padding:3px 8px}
.brk-chip i{font:400 .56rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--parch-faint);font-style:normal}
.brk-chip b{font:700 .74rem/1 var(--mono);color:var(--parch);font-variant-numeric:tabular-nums}
.brk-chip:first-child b{color:var(--ember-text)}
.eq-bang{color:var(--ember-flame);font:700 .95rem/1 var(--mono)}
.prof-tooline.bad{color:var(--ember-flame);font-weight:700}
/* ---- The Bench · CD round-trip (owner 2026-08-04) ---- */
.prof-card--col.ready{opacity:.95;background:var(--panel-2);cursor:pointer}
.prof-list .prof-card--col.ready:hover{opacity:1;background:var(--void)}
.prof-card--col.bare{opacity:.5;background:var(--void);cursor:not-allowed}
.prof-list .prof-card--col.bare:hover{opacity:.68}
.prof-card--col.bare .prof-note{color:var(--ember-text)}
.tool-tag{display:inline-flex;align-items:center;gap:5px;margin-left:12px;flex:none;align-self:center;box-sizing:border-box;height:28px;border:1px solid var(--edge-2);background:var(--void);padding:2px 8px 0;padding-right:calc(8px - .14em);font:400 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--parch-dim)}
.tool-tag b{font:700 .85rem/1 var(--mono);color:var(--parch);letter-spacing:0}
.tool-tag .tt-m{color:var(--parch-faint);letter-spacing:0}
.ph .btn.small{align-self:center;box-sizing:border-box;height:28px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
#toil-bar,#toil-bar2,#shaft-bar{background:linear-gradient(90deg,var(--ember-deep),var(--ember-hot));opacity:1}
.haul-break{list-style:none;margin:0;padding:2px 13px 11px 64px;display:flex;flex-direction:column;gap:2px}
.haul-break li{display:flex;align-items:baseline;gap:7px;max-width:none;padding:4px 0;font:400 .8rem/1.2 var(--mono);color:var(--parch-dim)}
.haul-break li::after{content:"";flex:1;order:2;border-bottom:1px dotted var(--edge-2);margin:0 5px 0 7px}
.haul-break li>span:last-child{order:3;color:var(--lantern);font-variant-numeric:tabular-nums}
.haul-break li:hover{background:rgba(211,204,192,.045)}
.recipe-list{border:1px solid var(--edge);background:var(--void)}
.recipe-list .recipe{border:0;border-top:1px solid var(--edge);margin:0}
.recipe-list .recipe:first-child{border-top:0}
.recipe:hover{background:rgba(211,204,192,.03)}
.recipe-gate .ok{color:#8FAE6B;font-weight:400}
.recipe-gate .no{font-weight:400;color:var(--rust-soft)}
.recipe-gate .batch{color:var(--ember-text);font-weight:700;letter-spacing:0}
.rio--short .io-img{opacity:1}
.learn-list{border:1px solid var(--edge);background:var(--void);margin:0 0 4px}
.learn-list .learn-item{border:0;border-top:1px solid var(--edge);margin:0}
.learn-list .learn-item:first-child{border-top:0}
.learn-item:hover{background:rgba(211,204,192,.03)}
.lrn-fold{margin:0 0 10px}
.lrn-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:22px}
.lrn-fold>summary::-webkit-details-marker{display:none}
.lrn-fold>summary .lrn-grp,summary.lrn-grp{margin:0}
summary.lrn-grp{font-size:.72rem;color:var(--parch-dim);align-items:center}
.lrn-fold>summary::after{content:"▸";color:var(--parch-faint);font-size:.72rem;line-height:1;transition:transform .15s;align-self:center}
.lrn-fold[open]>summary::after{transform:rotate(90deg)}
.lrn-fold>summary:hover .lrn-grp,.lrn-fold>summary:hover{color:var(--parch)}
.lrn-cnt{font:400 .64rem/1 var(--mono);color:var(--parch-faint);letter-spacing:0;margin-left:3px}
.lrn-known.ok{color:#8FAE6B}
.lvl-tag{font:400 .62rem/1 var(--mono);letter-spacing:.08em;color:var(--parch-faint);margin-left:8px;vertical-align:2px;white-space:nowrap}
.lvl-tag.no{color:var(--blood-text,#A04545)}
/* ---- The Bench · CD round-trip 2 (owner 2026-08-04) ---- */
.recipe[data-short="1"],.recipe[data-notool="1"]{opacity:.55}
.recipe-foot .btn{display:inline-flex;align-items:center}
@media(min-width:821px){
.recipe-foot .btn{height:30px;padding:0 12px}
.recipe-foot input[type=number]{height:30px;box-sizing:border-box;padding:0 7px}
.recipe-foot select{height:30px;box-sizing:border-box;padding:0 7px}
}
.recipe-foot label{font:400 .74rem/1 var(--mono);color:var(--parch-dim);display:inline-flex;align-items:center;gap:6px}
#craft-bar{background:linear-gradient(90deg,var(--ember-deep),var(--ember-hot));opacity:1}
@keyframes tabPulse{0%,100%{opacity:1}50%{opacity:.35}}
.tab-dot{display:inline-block;width:7px;height:7px;margin-left:7px;vertical-align:1px;border-radius:50%}
.tab-dot.work{background:var(--ember-flame);animation:tabPulse 1.6s ease-in-out infinite}
/* KB-347 B3: in the dock and in the work strip the host is a flex row: vertical-align does nothing, the host's gap spaces
   the dot (5px, as the old glyph had) and the dot must not shrink to an oval */
.work-strip .tab-dot,.ct-mobile .mbtn .tab-dot{margin-left:5px;flex:none}
/* ---- The Exchange · CD round-trip (owner 2026-08-04) ---- */
.gu{color:var(--parch-faint);font-weight:400}
.fee-em{color:var(--ember-text);font-weight:400}
.ord-tag{display:inline-flex;align-items:center;gap:5px;margin-left:12px;flex:none;align-self:center;height:28px;border:1px solid var(--edge-2);background:var(--void);padding:2px 8px 0;padding-right:calc(8px - .14em);font:400 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--parch-dim)}
.ord-tag b{font:700 .85rem/1 var(--mono);color:var(--parch);letter-spacing:0}
.ord-tag .m{color:var(--parch-faint);letter-spacing:0}
.depth-row .btn.small{display:inline-flex;align-items:center}
@media(min-width:821px){
.depth-row input[type=number]{height:28px;box-sizing:border-box;padding:0 7px}
.depth-row .btn.small{height:28px;padding:0 12px}
}
.haul-row>summary:hover{background:rgba(211,204,192,.045)}
.hist-row:hover{background:rgba(211,204,192,.045)}
.depth-row:hover{background:rgba(211,204,192,.03)}
@keyframes exPaneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
[data-pane]{animation:exPaneIn .18s ease}
details[open]>.depth{animation:exPaneIn .16s ease}
.hist-row .recv{color:var(--lantern)}
.hist-row .fee{color:var(--blood-text)}
.depth-row>span:first-child{white-space:nowrap}
/* ---- The Pack · CD round-trip (owner 2026-08-04) ---- */
.haul-row.sworn{box-shadow:inset 3px 0 0 var(--ember-mid);background:rgba(232,90,16,.04)}
.depth .btnrow .btn{display:inline-flex;align-items:center}
@media(min-width:821px){.depth .btnrow .btn{height:28px;padding:0 12px}}
input.qty-in{height:28px}
/* ---- The Works · CD round-trip + owner adds (2026-08-04) ---- */
.mono-meta{font-family:var(--mono);font-size:.78rem;color:var(--parch-dim);letter-spacing:.02em}
.ord-tag{white-space:nowrap}
.tbl .io-img{width:28px;height:28px;vertical-align:middle;margin-right:8px}
.rb-face{width:26px;height:26px;object-fit:cover;border:1px solid var(--edge);margin-right:8px;vertical-align:middle}
.lbl-qty{font:400 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--parch-faint);white-space:nowrap}
/* ---- The Gate · CD round-trip (owner 2026-08-04) ---- */
.haul-list .haul-name{white-space:nowrap;flex:none}

/* ---- The Company · the Protégé panel, v3 layout in Iron Woodcut (KB-114 wave 2) ---- */
.pro-lbl{font:600 .66rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--parch-dim)}
.pro-card{background:var(--panel);border:1px solid var(--edge);padding:.7rem .85rem;margin-top:.7rem}
.pro-hero{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;margin-top:.6rem;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge-2);padding:.85rem 1rem}
.pro-hero--noport{grid-template-columns:1fr auto}
.pro-port{width:60px;height:60px;border:1px solid var(--edge-2);background:radial-gradient(70% 70% at 50% 35%,var(--panel-2),var(--void));display:grid;place-items:center;font-family:var(--serif);font-size:1.8rem;color:var(--ember-text)}
.pro-who h3{font-family:var(--serif);font-size:1.2rem;margin:0;font-weight:600;color:var(--lantern)}
.pro-temper-tag{font-size:.85rem;color:var(--parch-dim);font-weight:400}
.pro-temper{color:var(--ember-text);font-size:.8rem;font-style:italic;margin-top:.1rem}
.pro-rec{color:var(--parch-dim);font-size:.76rem;margin-top:.3rem}.pro-rec b{color:var(--parch)}
.pro-lvl{text-align:right}.pro-lvlnum{font:1.6rem/1 var(--mono);color:var(--ember-text)}
.pro-lvlrow{display:flex;align-items:baseline;justify-content:flex-end;gap:.45rem}
.pro-xp{width:110px;height:5px;background:var(--edge);overflow:hidden;margin:.3rem 0 .2rem auto}
.pro-xp i{display:block;height:100%;background:var(--ember-mid)}
.pro-renown{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-top:.7rem;background:var(--panel);border:1px solid var(--edge);padding:.7rem .85rem}
.pro-rungs{display:flex;gap:3px;margin-top:.35rem;flex-wrap:wrap}
.pro-rung{min-width:30px;height:24px;padding:0 .3rem;background:var(--void);border:1px solid var(--edge);display:grid;place-items:center;font:.6rem var(--mono);color:var(--parch-faint)}
.pro-rung.done{background:var(--panel-2);border-color:var(--edge-2);color:var(--ember-text)}
.pro-rung.anchor{background:var(--ember-mid);border-color:var(--ember-mid);color:var(--void);font-weight:700}
.pro-cap{font-size:.76rem;color:var(--parch-dim);flex:1;min-width:16ch}
.pro-beat{display:flex;gap:.55rem;padding:.4rem 0;border-top:1px solid var(--edge);font-size:.85rem;color:var(--parch)}
.pro-beat:first-of-type{border-top:0}
.pro-rival{margin-top:.5rem;padding:.5rem .6rem;background:var(--blood-venous);border:1px solid var(--blood-mid);font-size:.8rem;color:var(--parch)}
.pro-rival b{color:var(--blood-text)}
.pro-foe{display:flex;justify-content:space-between;padding:.35rem 0;border-top:1px solid var(--edge);font-size:.83rem;color:var(--parch)}
.pro-foe:first-of-type{border-top:0}
.pro-tag{font:.64rem var(--mono);color:var(--parch-dim);border:1px solid var(--edge);padding:.1rem .35rem}
.pro-winest{margin-top:.4rem;font-size:.78rem;color:var(--ember-text)}
.pro-dial{margin-bottom:.55rem}.pro-dial .pro-lbl{margin-bottom:.28rem}
.pro-seg{display:flex;background:var(--void);border:1px solid var(--edge);overflow:hidden}
.pro-seg form{flex:1;display:flex;margin:0}.pro-seg form+form button{border-left:1px solid var(--edge)}
.pro-seg button{flex:1;appearance:none;border:0;background:transparent;color:var(--parch-dim);font:inherit;font-size:.75rem;padding:.4rem .25rem;cursor:pointer}
.pro-seg button[aria-pressed=true]{background:var(--ember-mid);color:var(--lantern);font-weight:600}
.pro-seg button:disabled{color:var(--parch-faint);cursor:not-allowed}
.pro-seg button[aria-pressed=true]:disabled{color:var(--lantern);opacity:.6}
.pro-shards{color:var(--ember-text);font-family:var(--mono)}
.pro-haul{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.pro-chip{display:flex;align-items:center;gap:.35rem;padding:.28rem .5rem;background:var(--void);border:1px solid var(--edge);font-size:.79rem;color:var(--parch)}
.pro-chip em{color:var(--parch-dim);font-style:normal;font-size:.72rem}
.pro-alert{margin-top:.6rem;padding:.6rem .8rem;font-size:.82rem;color:var(--parch)}
.pro-alert--bad{background:var(--blood-venous);border:1px solid var(--blood-mid)}
.pro-alert--warn{background:var(--panel-2);border:1px solid var(--edge-2)}
.pro-dispatch{margin-top:.7rem;padding:.75rem .9rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge-2)}
.pro-btn{appearance:none;border:1px solid var(--edge-2);background:var(--panel);color:var(--parch);font:inherit;padding:.5rem 1rem;cursor:pointer;font-weight:600}
.pro-btn:hover:not(:disabled){border-color:var(--parch);color:var(--lantern)}
.pro-btn--sm{padding:.3rem .6rem;font-size:.78rem;margin-top:.4rem}
.pro-btn--go{background:var(--ember-mid);color:var(--lantern);border-color:var(--ember-mid)}
.pro-btn--go:hover{background:var(--ember-flame)}
.pro-btn:disabled{opacity:.45;cursor:not-allowed}
.pro-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem;margin-top:.3rem}
.pro-tblock{border:1px solid var(--edge);padding:.5rem .6rem;display:flex;flex-direction:column;gap:.35rem;background:rgba(255,255,255,.02)}
.pro-tblock.owned{border-color:var(--ember-deep)}
.pro-tblock.off{opacity:.5}
.pro-tb-h{display:flex;align-items:center;gap:.4rem}.pro-tb-h b{font-size:.9rem;color:var(--lantern)}
.pro-tblock .pro-cap{flex:1;margin:0}
.pro-tblock .pro-btn--sm{align-self:flex-start}
.pro-tb-why{color:var(--parch-faint);font-size:.75rem;font-style:italic}
/* a helper's kind and trade are the grey .tag, told apart by the word, not by a tint (KB-347 B4, owner Q6) */

/* ---- The Dark · CD round-trip (owner 2026-08-05): 2-col layout, light-choice, foe-strip ---- */
.panel.hot.step{border-color:var(--ember-mid);box-shadow:0 0 34px rgba(232,90,16,.07) inset}
.foe-strip{display:flex;flex-direction:column;gap:4px;margin:2px 0 0;padding:9px 12px;border-left:2px solid var(--rust-soft);background:var(--panel-2)}
.foe-strip .fs-k{font:600 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rust-soft)}
.foe-strip .fs-t{display:block;margin:0;font-size:.85rem}
.light-choice{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.light-choice form{margin:0;display:flex}
.light-opt{flex:1;display:flex;flex-direction:row;align-items:baseline;gap:10px;height:auto;min-height:44px;padding:11px 12px;text-align:left}
.light-opt .lo-name{font:700 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.light-opt .lo-cost{font:700 .72rem/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.light-opt .lo-pay{font:400 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-left:auto;white-space:nowrap}
.btn.danger.light-opt{background:rgba(28,10,12,.5)}
.btn.danger.light-opt .lo-pay{color:var(--ember-text)}
/* a group's step: each member's own line under the light, read as a list, not as a tag (W5-3b) */
.grp-step .light-opt .lo-pay{font-size:.72rem;line-height:1.35;letter-spacing:.02em;text-transform:none}
.vitals-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin-bottom:10px}
@media(min-width:821px){
.haul-list.compact .haul-row>summary{padding:5px 10px}
.haul-list.compact .io-img{width:26px;height:26px}
}
.notice.warn.bank .bank-ledger{display:block;font:400 .8rem/1.6 var(--mono);color:var(--parch);letter-spacing:.02em;margin:2px 0 3px}
/* THE MAP'S SHEET (KB-344 L3-12; the owner 2026-10-05: «опис вибраної ноди показувати знизу мапи», «може колонку
   сповіщень теж шторкою знизу?» - «ок»; then «стиль зробити як у сайту», «розтягни блок на всю ширину мапи», «продумай
   як краще компонувати повідомлення», «більш компактної»). No right-hand column on any screen: the map always takes the
   page's width and keeps its size. What the column held lies in ONE sheet across the map's foot, square as every panel
   (--r 0): what the last move brought, one line each; the picked ground in two lines (where to and the foe, then the
   price on its buttons), or with nothing picked the ground you stand on in short; the other grounds by name, one line
   each. The arrow unfolds every card whole. The grid: the map's frame and the sheet share row 1 (the sheet on the
   frame's foot), the bar is row 2, the plain panels follow. */
.delve-cols{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:0;align-items:stretch}
#delve-zone{display:contents}
.delve-map{display:contents}
/* the delve map is its own paper: lifted above the viewport vignette (z 100, KB-155)
   with its own centred candle vignette so the edge stays legible, not crushed by the
   page's off-centre one; the grain (101) and every chrome layer still sit above it */
.delve-map .fr-mapframe{grid-row:1;grid-column:1;min-height:min(64vh,760px);z-index:100;min-width:0}
.delve-map .fr-mapframe::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.28))}
/* the painted map (KB-336): while reach-map.js draws the painting it marks the frame .painted -
   no candle vignette, and the frame rises over the page grain (101); the chrome (110+) stays above */
.delve-map .fr-mapframe.painted{z-index:102}
.delve-map .fr-mapframe.painted::after{display:none}
.delve-map #delve-you{grid-row:2;grid-column:1;margin-bottom:6px}
/* the walk's bar holds Health and the Wick alone, each half the width (KB-344 L3-14) */
#delve-you.qp-status .stat,#delve-you.qp-status .stat.wick{flex:1 1 0}
#delve-zone>.panel,#delve-zone>.notice{grid-column:1}
.msheet{grid-row:1;grid-column:1;align-self:end;justify-self:stretch;position:relative;z-index:105;margin:0 1px 1px;
  display:flex;flex-direction:column;
  max-height:min(50%,340px);overflow-y:auto;overscroll-behavior:contain;background:var(--panel-2);
  border-top:1px solid var(--lantern-deep);box-shadow:0 -10px 24px rgba(0,0,0,.55)}
/* the reading order, whatever order the page wrote them in: what the last move brought, then the picked ground (or the
   ground you stand on), then the other grounds by name */
.msheet>.msheet-tog{order:0;flex:none}
.msheet>.m-news{order:1}
.msheet>.m-main{order:2}
.msheet>.m-line{order:3}
.msheet.open{max-height:calc(100% - 56px)}
.msheet.empty{display:none}
/* the arrow keeps the sheet's top-right corner while the sheet scrolls; the cards keep a gutter for it */
.msheet-tog{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:center;width:40px;height:34px;
  margin:0 0 -34px auto;padding:0;background:transparent;border:0;color:var(--parch-dim);cursor:pointer}
.msheet-tog:hover{color:var(--parch)}
.msheet-tog i{width:9px;height:9px;border-left:2px solid currentColor;border-top:2px solid currentColor;
  transform:translateY(3px) rotate(45deg);transition:transform .15s}
.msheet.open .msheet-tog i{transform:translateY(-3px) rotate(225deg)}
.msheet>.m-card.panel,.msheet>.m-card.notice,.msheet>.m-card.panel.hot.step{margin:0;border:0;border-top:1px solid var(--edge);
  border-radius:0;box-shadow:none;background:none;padding:8px 12px}
.msheet>.m-top.m-card.panel,.msheet>.m-top.m-card.notice,.msheet>.m-top.m-card.panel.hot.step{border-top:0}
.msheet>.m-card .ph{margin:0 0 4px}
.msheet>.panel.step{position:relative}
.msheet>.panel.step .sheet-x{display:flex;position:absolute;top:0;right:6px;width:34px;height:34px;align-items:center;
  justify-content:center;color:var(--parch-dim);font-size:1.4rem;line-height:1;text-decoration:none;z-index:2}
.msheet>.panel.step .sheet-x:hover{color:var(--parch)}
.msheet>.panel.step .step-to{min-height:26px;margin:0;padding-right:34px;display:flex;align-items:center;flex-wrap:wrap;
  gap:0 4px;cursor:pointer}
.msheet>.panel.step>.ph{padding-right:34px}
/* the arrow sits on the top card's first line only: that line alone keeps clear of it (and of the pick's cross beside
   it); everything under it - the buttons above all - runs to the sheet's right edge (the owner 2026-10-05: «кнопки
   шторки чомусь не доходять до правого краю») */
.msheet>.m-top.m-news{padding-right:44px}
.msheet>.m-top.m-main:not(.step)>.ph{padding-right:32px}
.msheet>.m-top.panel.step .sheet-x{right:40px}
.msheet>.m-top.panel.step .step-to,.msheet>.m-top.panel.step>.ph{padding-right:72px}
/* folded, wherever the sheet stands on the map (a phone on its side lays every card out whole in the page) */
@media not all and (max-width:680px) and (max-height:519px){
/* THE THREE CARDS THAT ARE NEVER FOLDED (round 33, owner Q22: the sheet stays folded, but three cards always show whole):
   N37 the vein's pay and #shaft-panel, N49 the grave's goods, N56 the ground's goods. The templates print .m-whole on them
   (the notice and #shaft-panel in delve.html, the root of ground-exchange.html), updateSheet() leaves the class alone, and
   every rule below that shrinks a card stands behind :not(.m-whole): such a card keeps its whole body, rows included,
   whether the sheet gave it the news, the main or the name-line place. No rule matches the class outside #delve-sheet. */
.msheet:not(.open)>.m-news:not(.m-whole),.msheet:not(.open)>.m-line:not(.m-whole){cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding-top:6px;padding-bottom:6px}
.msheet:not(.open)>.m-news:not(.m-whole) div{display:none}
.msheet:not(.open)>.m-news:not(.m-whole)>b:first-child{display:inline;margin:0 8px 0 0}
.msheet:not(.open)>.m-line:not(.m-whole) .ph{flex-wrap:nowrap}
.msheet:not(.open)>.m-line:not(.m-whole)>:not(.ph){display:none}
.msheet:not(.open)>.m-line:not(.m-whole) .ph{margin:0;display:flex;gap:10px;align-items:baseline;min-width:0}
.msheet:not(.open)>.m-line:not(.m-whole) .ph h2{font-size:.92rem;margin:0;white-space:nowrap}
.msheet:not(.open)>.m-line:not(.m-whole) .ph .aside{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the picked ground, short: where to and the foe, then its buttons with their price */
.msheet:not(.open)>.panel.step>:not(.step-to):not(.foe-strip):not(.btnrow):not(.light-choice):not(.sheet-keep):not(.sheet-x){display:none}
.msheet:not(.open)>.panel.step .foe-strip{margin:2px 0 0;padding:0 0 0 8px}
.msheet:not(.open)>.panel.step .foe-strip .fs-t{display:none}
.msheet:not(.open)>.panel.step .sheet-keep{margin:2px 0 0;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a line whose whole point is its end wraps instead (a member's "the leader steers ... the whole group sees it", W5-3b) */
.msheet:not(.open)>.panel.step .sheet-keep.sheet-wrap{white-space:normal}
/* the buttons fill the sheet's width (the owner 2026-10-05: «кнопки дій в шторці на мапі роби на всю ширину блоку»):
   one light takes the whole row, several share it and wrap when the row is narrow */
.msheet:not(.open)>.panel.step .light-choice{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.msheet:not(.open)>.panel.step .light-choice form{flex:1 1 180px;display:flex}
.msheet:not(.open)>.panel.step .light-choice .light-opt{flex:1;justify-content:center}
.msheet:not(.open)>.panel.step .light-choice .lo-none{display:none}
.msheet:not(.open)>.panel.step .light-opt{min-height:36px;padding:7px 12px;gap:8px;align-items:center}
.msheet:not(.open)>.panel.step .light-opt .lo-pay{display:none}
/* where one press stops and what the rest costs stay in the short sheet too (owner 2026-11-01: a new soul did not
   see the walk would end half way) */
.msheet:not(.open)>.panel.step .light-opt .lo-pay.lo-stop{display:block;text-align:center;font-size:.62rem;line-height:1.35;white-space:normal}
.msheet:not(.open)>.panel.step .btnrow{margin-top:6px}
/* the ground you stand on, short: its name, its first line, its buttons */
.msheet:not(.open)>.m-main:not(.step):not(.m-whole)>:not(.ph):not(p):not(form):not(.btnrow):not(.light-choice):not(.msheet-tog){display:none}
.msheet:not(.open)>.m-main:not(.step):not(.m-whole)>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 6px}
.msheet:not(.open)>.m-main:not(.step):not(.m-whole)>p:not(:first-of-type){display:none}
}
/* unfolded and taller than its room, the sheet scrolls inside - and a step's buttons stay at its foot */
.msheet.open>.panel.step>.btnrow,.msheet.open>.panel.step>.light-choice{position:sticky;bottom:0;z-index:1;
  background:var(--panel-2);padding:8px 0 4px;box-shadow:0 -10px 12px var(--panel-2)}
.delve-cols .light-choice{grid-template-columns:1fr}
@media(max-width:860px){
.delve-map .fr-mapframe{min-height:min(440px,45vh)}}
@media(max-width:640px){.vitals-grid{grid-template-columns:1fr}}
#delve-sheet>.panel .btnrow form{flex:1;display:flex}
#delve-sheet>.panel .btnrow form>.btn{flex:1}
#delve-sheet>.panel>form>.btn,#delve-sheet>.panel .btn.big{width:100%}
/* movement vs action (owner 2026-08-05): a STEP is an ember outline, an ACTION stays the filled bone button */
.btn.move{background:none;border:1px solid var(--ember-mid);color:var(--ember-text)}
.btn.move:hover{background:rgba(232,90,16,.10);color:var(--ember-flame)}
.btn.danger.move{border-color:var(--blood-mid);color:var(--rust-soft);background:rgba(28,10,12,.4)}
.btn.danger.move .lo-pay{color:var(--ember-text)}
/* ---- The Company · CD round-trip (owner 2026-08-05): tabs, hero'd Hands, folds, duo, roster ports ---- */
.tabs{display:flex;gap:2px;position:relative;z-index:1}
.tabs a{flex:1 1 0;text-align:center;padding:9px 13px;font:500 .82rem/1 var(--sans);color:var(--parch-dim);border:1px solid transparent;border-bottom:0;text-decoration:none;position:relative;top:1px}
.tabs a:hover{color:var(--parch)}
.tabs a.on{color:var(--lantern-soft);background:var(--panel-2);border-color:var(--edge)}
.cotab>.panel:first-child{margin-top:-1px}
.cotab>.panel{margin-top:0}
.panel .kv{grid-template-columns:96px 1fr;align-items:baseline}
.panel .kv dt{white-space:nowrap}
.panel .kv dd{text-align:left}
.panel .kv dd>.mono{white-space:nowrap}
.panel .kv dd .mut{font-family:var(--serif);font-style:italic}
.pro-duo{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.7rem}
.pro-duo .pro-card{margin-top:0}
.pro-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;user-select:none}
.pro-fold>summary::-webkit-details-marker{display:none}
.pro-fold>summary:hover{color:var(--parch)}
.pf-arrow{margin-left:auto;width:8px;height:8px;border-right:1px solid var(--parch-dim);border-bottom:1px solid var(--parch-dim);transform:rotate(45deg);transition:transform .18s ease}
.pro-fold[open] .pf-arrow{transform:rotate(225deg)}
.pf-body{margin-top:.6rem}
.pro-dgroup{margin:0 0 .6rem}
.pro-dgroup+.pro-dgroup{padding-top:.6rem;border-top:1px solid var(--edge)}
.pro-dgroup .pro-dial{display:grid;grid-template-columns:128px minmax(0,1fr);gap:0 .6rem;align-items:center;margin:0}
.pro-dgroup .pro-dial .pro-lbl{margin:0;grid-column:1;grid-row:1}
.pro-dgroup .pro-dial .pro-seg{grid-column:2;grid-row:1}
.pro-dgroup .pro-dial .pro-seg-info{grid-column:2;grid-row:2}
.pro-dgroup>.pro-cap{margin:.25rem 0 0 calc(128px + .6rem);font-size:.7rem;line-height:1.5}
/* THE DOCTRINE SHEET (owner 2026-10-10: "the doctrine table must be made professional"): each dial keeps its label and its
   segmented control; under the control, in the SAME three columns and between the same 1px lines, a readout row says what
   each option does and gives its numbers, and the cell under the pressed option is lit. One summary line heads the card. */
.pro-doc-now{margin:0 0 .75rem;padding:.45rem .65rem;background:var(--void);border:1px solid var(--edge);font-size:.78rem;line-height:1.6;color:var(--parch-dim)}
.pro-doc-now .pro-lbl{margin-right:.3rem}
.pro-doc-now b{color:var(--parch);font-weight:600}
.pro-doc-now .pro-nums{font:.7rem/1.6 var(--mono);color:var(--ember-text)}
.pro-seg-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--void);border:1px solid var(--edge);border-top:0}
.pro-seg-info--one{grid-template-columns:minmax(0,1fr)}
.pro-seg-info>.pro-cell{min-width:0;padding:.38rem .45rem .45rem;display:flex;flex-direction:column;gap:.18rem;overflow-wrap:anywhere}
.pro-seg-info>.pro-cell+.pro-cell{border-left:1px solid var(--edge)}
.pro-seg-info .pro-c1{font-size:.7rem;line-height:1.35;color:var(--parch-dim)}
.pro-seg-info .pro-c2{font:.66rem/1.4 var(--mono);color:var(--parch-faint)}
.pro-seg-info .pro-cell.on .pro-c1{color:var(--parch)}
.pro-seg-info .pro-cell.on .pro-c2{color:var(--ember-text)}
.pro-qform{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--edge);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pro-qform select.stepper{padding:.35rem .5rem;max-width:100%;min-width:0}
.pro-qform .pro-btn--sm{margin:0}
.pro-card .pro-tgrid{gap:.45rem}
.pro-tblock:not(.off){transition:border-color .15s ease,background .15s ease}
.pro-tblock:not(.off):hover{border-color:var(--edge-2);background:rgba(255,255,255,.035)}
.beat-mark{width:6px;height:6px;background:var(--ember-deep);flex:none;margin-top:.5em}
.ro-port{width:34px;height:34px;flex:none;border:1px solid var(--edge-2);background:radial-gradient(70% 70% at 50% 35%,var(--panel-2),var(--void));display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem;color:var(--ember-text)}
.ro-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ro-line b{font-family:var(--serif);font-size:.95rem;color:var(--lantern)}
@media(max-width:820px){.pro-duo{grid-template-columns:1fr}}
@media(max-width:640px){.pro-dgroup .pro-dial{grid-template-columns:minmax(0,1fr)}.pro-dgroup .pro-dial .pro-lbl{grid-column:1;grid-row:auto;margin-bottom:.35rem}.pro-dgroup .pro-dial .pro-seg,.pro-dgroup .pro-dial .pro-seg-info{grid-column:1;grid-row:auto}.pro-dgroup>.pro-cap{margin-left:0}.pro-seg-info>.pro-cell{padding:.34rem .35rem .4rem}}

/* the Blade's real kit (owner 2026-08-05): seven slots, dressed from the pack */
.bg-row{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:8px;align-items:center;padding:.4rem 0;border-top:1px solid var(--edge)}
.bg-row:first-of-type{border-top:none;margin-top:.35rem}
.bg-slot{font:.66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--parch-dim)}
.bg-item{font-size:.85rem;color:var(--parch);min-width:0;overflow-wrap:anywhere}
.bg-act{display:flex;gap:6px;align-items:center;justify-self:end}

/* Lay stone: the block after the tab row sits flush AND wears the tab's own face
   (bg/border) - the hot glow would read as a different chrome (owner 2026-08-05) */
.tabs+.tabbed>.panel:first-child,.tabs+.notice,.tabs+.panel{margin-top:0}
.tabs+.tabbed>.panel.hot:first-child,.tabs+.panel.hot{border-color:var(--edge);box-shadow:none}
/* the camp pile's controls stand shoulder to shoulder (owner 2026-08-06) */
.camp-give .btn{display:inline-flex;align-items:center}
@media(min-width:821px){
.camp-give input.qty-in{height:30px}
.camp-give .btn{height:30px;padding-top:0;padding-bottom:0}
}

/* ---- City: the Today panel + the dawn ladder (KB-163 / KB-164) ---- */
/* KB-188 small truths: the quest board's Begin row, the shadow ladder's four looks, the Exchange's landing */
.q-foot{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:8px}
.q-start{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
.q-start select{max-width:100%}
.q-note{font-size:.72rem}
@media (min-width:480px){.q-start{flex-wrap:nowrap}.q-start select{flex:1 1 auto;min-width:0}}
.shadow-rungs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
/* KB-347 B3: the shadow ladder's rungs wear the chip language: .chip.on (earned, the newest too), .chip (the next),
   .chip.parked (far) */
.haul-row.landed>summary,.ord-row.landed{box-shadow:inset 3px 0 0 var(--ember-mid)}
.today-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.today-list li{border:1px solid var(--edge);background:var(--panel-2)}
.today-list li>a,.today-list li>span,.today-list li.goal{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;text-decoration:none;color:var(--parch)}
.today-list li>a:hover{border-color:var(--edge-2);background:var(--panel)}
.today-list li.wait{opacity:.72}
.today-list li.out{border-color:#5a3410}
.today-list .tl-k{font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ember-text);min-width:64px}
.today-list .tl-v{flex:1;font-size:.88rem;line-height:1.35}
.today-list .tl-v .mono{white-space:nowrap;font-size:.8rem;color:var(--parch-dim)}
.today-list .tl-go{font:600 .7rem/1 var(--mono);letter-spacing:.05em;color:var(--parch-dim);white-space:nowrap}
.today-list li>a:hover .tl-go{color:var(--parch)}
.dawn{margin-top:10px;padding:12px;border:1px solid #5a3410;background:#1c1206}
.dawn.kit{border-color:var(--edge-2);background:var(--panel-2)}
.dawn-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;font-size:1.05rem}
.dawn-head .mut{font-size:.8rem}
.dawn-ladder{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:10px}
.dawn-ladder .rung{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;border:1px solid var(--edge);background:var(--panel);text-align:center;min-height:44px}
.dawn-ladder .rung.done{opacity:.5}
.dawn-ladder .rung.today{border-color:var(--ember-flame);box-shadow:inset 0 0 0 1px #5a3410}
.dawn-ladder .rung-day{font:600 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--parch-dim)}
.dawn-ladder .rung.today .rung-day{color:var(--ember-flame)}
.dawn-ladder .rung.taken{border-color:var(--edge-2);box-shadow:none;opacity:.75}
.dawn-ladder .rung.taken .rung-day{color:var(--parch-dim)}
.dawn-ladder .rung-taken{font:600 .56rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ember-text)}
.dawn-next{margin:10px 0 0;font-size:.85rem;color:var(--parch-dim)}
.dawn-next b{color:var(--parch);font-family:var(--mono)}
.dawn-ladder .rung .io-img{width:28px;height:28px}
.dawn-ladder .rung-name{font-size:.68rem;line-height:1.2;color:var(--parch)}
.dawn-ladder .rung-coin{font:600 .95rem/1 var(--mono);color:var(--parch);padding:6px 0}
/* the public dossier (owner 2026-09-07): trades, worn and the figure */
.soul-figure{height:140px;margin-left:auto;flex:none}
.soul-trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.soul-trade{display:flex;align-items:center;gap:8px;border:1px solid var(--edge);background:var(--panel-2);padding:7px 10px}
.soul-trade img{width:26px;height:26px;flex:none}
.soul-trade .st-name{font-size:.86rem;color:var(--parch)}
.soul-trade .st-lvl{font-size:.72rem;color:var(--parch-dim)}
.soul-worn{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:10px}
.soul-piece{display:flex;align-items:center;gap:9px;border:1px solid var(--edge);background:var(--panel-2);padding:8px 10px;flex-wrap:wrap}
.soul-piece img{width:30px;height:30px;flex:none}
.soul-piece .sp-slot{font:600 .56rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--parch-faint);flex-basis:100%;order:-1}
.soul-piece .sp-name{font-size:.84rem;color:var(--parch);flex:1;min-width:0}
.soul-piece .sp-mark{font-size:.62rem;color:var(--parch-dim);flex:none}
@media (max-width:680px){.soul-figure{display:none}}
/* who raised the road, on the step panel (owner 2026-09-07). The rail is 340px,
   so the faces are small and the row wraps. */
.step-builders{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;margin:6px 0 8px}
.step-builders .sb-k{font:600 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--parch-dim)}
.sb-face{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--parch);font-size:.78rem}
.sb-face img{width:28px;height:28px;object-fit:cover;border:1px solid var(--edge-2);background:var(--void);flex:none}
.dawn-ladder .rung-mark{font:600 .58rem/1 var(--mono);letter-spacing:.04em;color:var(--parch-dim)}
@media (max-width:520px){.dawn-ladder{grid-template-columns:repeat(4,minmax(0,1fr))}.dawn-ladder .rung-name{font-size:.62rem}.dawn-ladder .rung-mark{font-size:.54rem}}


/* =====================================================   KB-154 - the five-tab dock, the status strip, the touch law as base
   ============================================================ */
.ember{color:var(--ember-text)}
/* the status strip: up to four clocks as links on a desk; a phone keeps the two soonest and folds the rest behind "+N" */
.ct-strip{display:flex;align-items:stretch;gap:2px;padding:2px 10px;background:var(--panel);border-bottom:1px solid var(--edge);overflow:hidden}
.ct-clock{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;min-height:32px;white-space:nowrap;
  font:500 .72rem/1 var(--mono);color:var(--parch-dim);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ct-clock:hover{color:var(--parch);border-bottom-color:var(--parch-faint)}
.ct-clock .cl-k{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--parch-faint)}
.ct-clock .cl-v{font-weight:700;color:var(--parch);font-variant-numeric:tabular-nums}
.ct-clock.ready .cl-v{color:var(--ember-text)}
.ct-clock.ready .cl-k{color:var(--parch-dim)}
.ct-clock.more{display:none;margin-left:auto;color:var(--parch-faint);font-size:.66rem}
/* the work strip: Bench / Roads / Camps / Company on every work page */
.work-strip{display:flex;gap:2px;margin:0 0 12px;border-bottom:1px solid var(--edge)}
.work-strip a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:8px 6px;
  font:500 .76rem/1.2 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--parch-dim);text-align:center;
  border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.work-strip a:hover{color:var(--parch)}
.work-strip a.on{color:var(--lantern);border-bottom-color:var(--lantern)}
/* a tab that is a door to another page (the dossier's Pack) */
.tabs a.tab-link::after{content:"\2197";font-size:.7em;margin-left:4px;color:var(--parch-faint)}
/* submit lock (submit-lock.js): a form in flight dims and takes no second tap */
form.is-busy{opacity:.6;transition:opacity .15s}
form.is-busy .btn,form.is-busy button{cursor:progress}
@media(max-width:820px){
  .ct-strip{padding:2px 6px}
  .ct-clock{min-height:44px;padding:6px 9px}
  .ct-foot a,.crumbs a{min-height:44px;display:inline-flex;align-items:center}
  /* the gather panel's tool tag folds instead of pushing the page sideways */
  .tool-tag{max-width:100%;height:auto;min-height:28px;flex-wrap:wrap;padding:5px 8px 3px;row-gap:2px}
  .tool-tag .mtip{flex:1 1 100%;min-width:0}
  .today-list .tl-go{padding-right:24px}
  .ct-clock .cl-k{font-size:.62rem}
  .ct-clock.fold{display:none}
  .ct-clock.more{display:inline-flex;font-size:.68rem}
  /* the touch law as the base: every button reaches 44 px */
  .btn{min-height:44px}
  .btn.ghost{min-height:44px}
  .depth .btnrow .btn,.depth-row .btn.small,.recipe-foot .btn,.camp-give .btn{height:auto;min-height:44px;padding-top:0;padding-bottom:0}
  .recipe-foot select,.recipe-foot input[type=number],.camp-give input.qty-in,.depth-row input[type=number]{height:44px;box-sizing:border-box}
  .pro-seg button{min-height:44px}
  .pro-btn,.pro-btn--sm{min-height:44px}
  select.stepper{min-height:44px}
  .haul-list.compact .haul-row>summary{min-height:44px;padding:8px 10px;align-items:center}
  .haul-list.compact .io-img{width:30px;height:30px}
  .haul-row.flat{min-height:44px}
  .light-opt{min-height:48px}
  .work-strip a{font-size:.72rem}
  .tabs a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:860px){
  .fr-mapframe{height:auto;display:flex;flex-direction:column}
  .fr-mapframe iframe{position:static;height:min(440px,45vh);flex:none}
  .fr-mapframe .fr-mapcap{position:static;padding:6px 10px;background:none;pointer-events:auto}
}
@media(max-width:680px){
  /* the Exchange's History and Orders rows fold like the depth rows */
  .fr-mapcap .cap-desk{display:none}
  .fr-mapcap .cap-phone{display:inline}
  .hist-head,.ord-head{display:none}
  .hist-row .q-lbl,.ord-row .q-lbl{display:inline}
  .hist-row{grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px 10px}
  .hist-row .who{grid-column:1/-1}
  .hist-row .who b{white-space:normal}
  .ord-row{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px}
  .ord-row .who{grid-column:1/-1}
  .ord-row .who b{white-space:normal}
  .ord-row form{grid-column:1/-1;justify-self:end;margin:0}
  /* the fight's commit stays under the thumb */
  .commit-btn{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:5;background:var(--panel);box-shadow:0 -8px 16px rgba(10,10,11,.7)}
  /* the Works frontier rows: name and chip on one line, the bar under them */
  .fr-road{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .fr-prog{grid-column:1/-1}
}
@media(max-width:480px){
  .today-list li>a,.today-list li>span{display:block;padding:10px 12px}
  .today-list .tl-k{display:inline;min-width:0;margin-right:8px}
  .today-list .tl-v{display:inline}
  .today-list .tl-go{display:block;text-align:right;margin-top:4px;padding-right:0}
}
.camp-give .btn{height:30px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}

/* ---------- the Stall (store) ---------- */
/* ---------- The Stall (donation store) ---------- */
/* One product, composed deliberately as a single lit stall - not an auto-fill
   grid with a hole. The candle panel is the one place ember belongs early: it
   IS the flame, so it carries real ember (not the neutral lantern glow). */
.stall{width:100%}
.stall .panel.hot{border-color:var(--ember-deep);box-shadow:0 0 30px var(--ember-glow) inset}
.stall-candle{display:block}
.stall-candle .ph{margin-top:2px}
.stall-candle .btnrow .chip{align-self:stretch;padding:2px 12px 0;padding-right:calc(12px - .08em)}
.stall-candle .desc{color:var(--parch-dim);font-size:.98rem;line-height:1.5;margin:0 0 16px}
.stall-candle .btnrow{clear:both}
/* the product's woodcut illustration - the text wraps around it, so the panel
   is not "paying for text". Steady flame (a Lasting candle); the wall flickers. */
.candle-art{float:right;width:92px;height:auto;margin:0 0 8px 18px;image-rendering:auto;
  filter:drop-shadow(0 0 14px var(--ember-glow))}
.panel.never{margin-top:16px}
.panel.never .eyebrow{color:var(--rust-soft);letter-spacing:.14em}

/* the wall of the watch: a flame for every candle lit, the buyer's place among
   them (a memorial that fills, never a cap or a countdown) */
.vigil-wall{margin-top:16px}
.vigil-wall .eyebrow{color:var(--ember-text);letter-spacing:.14em}
.wall{display:flex;flex-wrap:wrap;align-items:flex-end;gap:11px 13px;
  padding:16px 4px 12px;border-bottom:1px solid var(--edge);min-height:34px}
.flame{width:7px;height:12px;flex:0 0 auto;
  background:radial-gradient(ellipse at 50% 72%, var(--ember-flame), var(--ember-mid) 68%, transparent 100%);
  border-radius:50% 50% 48% 48% / 62% 62% 40% 40%;
  box-shadow:0 0 7px var(--ember-glow), 0 0 2px var(--ember-hot);
  animation:flick 2.4s ease-in-out infinite;transform-origin:50% 100%}
.wall .flame:nth-child(2n){animation-duration:2.9s;animation-delay:.5s}
.wall .flame:nth-child(3n){animation-duration:3.3s;animation-delay:.9s}
.wall .flame:nth-child(5n){animation-duration:2.6s;animation-delay:1.35s}
.flame.yours{width:10px;height:17px;box-shadow:0 0 12px var(--ember-glow),0 0 4px var(--ember-hot)}
.flame.yours::after{content:"";position:absolute}
.flame.place{background:none;box-shadow:none;width:8px;height:14px;
  border:1px dashed var(--parch-faint);border-radius:50% 50% 45% 45% / 62% 62% 40% 40%;
  animation:none;opacity:.6}
.wall-note{margin:12px 0 0;font-size:.9rem;color:var(--parch-dim);line-height:1.5;font-style:italic}
@keyframes flick{0%,100%{opacity:1;transform:translateY(0) scaleY(1)}
  50%{opacity:.82;transform:translateY(-.5px) scaleY(1.07)}}
@media (prefers-reduced-motion:reduce){.flame{animation:none}}
/* the Covenant read as a spoken oath, not fine print */
.oath{font-family:var(--serif);font-style:italic;color:var(--rust-soft);font-size:1rem;line-height:1.5}

/* pay page: the exact sum is the hero (by size, staying bone - ember reserved) */
.pay-hero{margin:14px 0}
.pay-lbl{display:block;font:600 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--parch-faint);margin:0 0 6px}
.pay-amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border:1px solid var(--edge-2);background:var(--panel-2);padding:12px 14px}
.pay-amount .num{font:700 1.7rem/1 var(--mono);color:var(--parch);letter-spacing:.01em}
.pay-unit{font:400 .9rem/1 var(--mono);color:var(--parch-dim)}
.pay-addr-cell{margin:12px 0}
.pay-addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--edge);background:var(--panel);padding:10px 12px}
.pay-addr code{flex:1 1 auto;min-width:0;font:400 .95rem/1.4 var(--mono);color:var(--parch);
  overflow-wrap:anywhere}
.copybtn{font:400 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--parch);background:transparent;border:1px solid var(--edge-2);padding:7px 11px;
  cursor:pointer;border-radius:0}
.copybtn:hover{border-color:var(--parch-dim)}
.copybtn.ok{border-color:var(--parch)}
/* address sigil (QR): woodcut black-on-bone, address only */
.pay-qr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0}
.pay-qr-code{line-height:0;border:1px solid var(--edge-2);padding:6px;background:#D3CCC0}
.pay-qr-code canvas{display:block}
.pay-qr-note{flex:1 1 180px;min-width:180px;font-size:.82rem;color:var(--parch-dim);line-height:1.45;margin:0}
.pay-note{font-size:.9rem;color:var(--parch-dim);line-height:1.5;margin:12px 0}
/* functional warnings: bone-legible (AA on coal), roman not italic */
.pay-warn{font-size:.82rem;color:var(--parch-dim);line-height:1.5;margin:8px 0}
.pay-hold{font:400 .85rem/1.4 var(--mono);color:var(--parch-dim);margin:10px 0}
/* the "watched" reassurance: an honest live pulse (being counted, not a clock) */
.pay-watch{display:flex;align-items:flex-start;gap:9px;border-left:2px solid var(--ember-deep);
  padding:8px 0 8px 11px;margin:14px 0 8px;font-size:.9rem;color:var(--parch);line-height:1.45}
.pay-watch .tab-dot{margin:5px 0 0;flex:none}  /* the one running dot, in a flex row where vertical-align does nothing (KB-347) */
.watch-looked{color:var(--parch-dim)}
.watch-time{font-family:var(--mono);color:var(--parch)}
.pay-already{font-size:.88rem;color:var(--parch-dim);line-height:1.45;margin:6px 0}
.pay-keep{font-size:.85rem;color:var(--parch-faint);font-style:italic;line-height:1.45;margin:10px 0}
/* the paid beat catches ember - the one instant cost becomes light */
.notice.paid-lit{border-left:3px solid var(--ember-hot)}

/* the ledger of orders (recovery hub / receipt / history) */
.orders-tbl{margin:4px 0 0}
.orders-tbl td{vertical-align:middle}
.ostate{display:inline-block;font:600 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--edge-2);color:var(--parch-dim)}
.ostate.paid{color:var(--ember-text);border-color:var(--ember-deep)}
.ostate.pending{color:var(--parch);border-color:var(--edge-2)}
.ostate.refunded,.ostate.expired{color:var(--parch-faint)}
.btn.sm{padding:4px 10px;font-size:.72rem}

/* ============================================================
   SETTINGS PAGE (set-*) - the layout of /settings only
   ============================================================ */
.set-lede{max-width:68ch;margin:0 0 6px}
.set-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px}
@media(min-width:900px){.set-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}}
.set-card>.ph{margin-bottom:6px}
@media(min-width:900px){
  .set-row>.set-card{display:flex;flex-direction:column}
  .set-row>.set-card>form:last-child{margin-top:auto}
}
.set-purpose{font:italic 400 .9rem/1.45 var(--serif);color:var(--parch-dim);margin:0 0 12px;max-width:68ch}
.set-text{font-size:.9rem;line-height:1.55;color:var(--parch);margin:0 0 10px;max-width:68ch}
.set-text b.num{font-family:var(--mono);color:var(--lantern)}
.set-form{margin:0}
label.fld.set-fld{margin:14px 0 6px}
label.fld.set-fld>span{margin-bottom:0}
.set-input{max-width:400px}
input.set-input-num{width:9.5rem;max-width:100%;font-family:var(--mono);font-size:1rem}
.set-unit-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.set-unit-row .btn{margin-left:4px}
.set-unit{font-size:.86rem;color:var(--parch-dim);white-space:nowrap}
.set-help{font-size:.82rem;line-height:1.5;color:var(--parch-dim);margin:7px 0 0;max-width:62ch}
.set-help .num{font-family:var(--mono);color:var(--parch)}
.set-form .g-note{margin-top:16px}
.set-h3{font:600 1rem/1.25 var(--serif);color:var(--lantern);margin:20px 0 4px}
.set-h3-first{margin-top:0}

/* the flash after a form: the site's .notice, with a rule and a readable body */
.set-flash{border-left-width:3px;line-height:1.5}
.set-flash.good{border-left-color:var(--parch)}
.set-flash.danger{border-left-color:var(--rust-soft);color:var(--parch)}
.set-flash.danger b:first-child{color:var(--rust-soft)}
.set-flash{scroll-margin:120px 0}
.set-flash:focus{outline:none}

/* the Lantern: the side (the facts and what you can do) and the main (what it gives) */
.set-lan{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 0}
@media(min-width:900px){
  .set-lan{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 28px;align-items:stretch}
  .set-lan-main{grid-column:1;grid-row:1}
  .set-lan-side{grid-column:2;grid-row:1;border-left:1px solid var(--edge);padding-left:26px}
  .set-card:not(.hot) .set-lan-side{position:sticky;top:124px;align-self:start}
}
.set-lan-main,.set-lan-side{min-width:0}

/* B2 (KB-319): the soul's own tools and what one mend of each costs at zero */
.set-mends{margin-top:18px}
.set-mends-tbl th.set-num,.set-mends-tbl td.set-num{text-align:right;white-space:nowrap}
.set-mends-tbl td b.num{font-family:var(--mono);font-weight:600}
.set-mends-tbl td small{color:var(--parch-dim);font-family:var(--mono)}
.set-mend.is-over td,.set-mend.is-never td,.set-mend.is-breaks td{color:var(--parch-dim)}
.set-mend .set-mark-no{color:var(--rust-soft);font-weight:700}
.set-perks th:first-child{width:42%}
.set-perks td:first-child b{color:var(--lantern);font-weight:600}
.set-note{display:block;margin-top:3px;font-size:.82rem;line-height:1.45;color:var(--parch-dim)}
.set-cond{display:block;margin-top:2px;font-size:.8rem;line-height:1.45;color:var(--parch-dim)}
.set-perks td b.num{font-family:var(--mono);font-weight:600}
.set-perks td .num{font-family:var(--mono)}
.set-yours{display:inline-block;font:600 .56rem/1 var(--mono);letter-spacing:.12em;color:var(--void);
  background:var(--parch);padding:3px 5px 2px;vertical-align:1px;margin-left:2px}
.set-perks.is-lit td.set-col-lit,.set-perks.is-dark td.set-col-free{color:var(--lantern)}
.set-perks.is-lit td.set-col-free,.set-perks.is-dark td.set-col-lit{color:var(--parch-dim)}
.set-perks.is-lit td.set-col-lit b.num{color:var(--ember-flame)}
.set-perks.is-dark td.set-col-lit b.num{color:var(--parch)}
.set-perks td.set-col-lit a{color:var(--ember-text);border-bottom:1px solid #5a3410}
.set-perks td.set-col-lit a:hover{border-bottom-color:var(--ember-text)}

.set-order .set-sub-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.set-order .set-sub-h .set-h3{margin:0}
.set-spent{margin:14px 0 0;max-width:400px}
.set-spent .meter-row{font-size:.84rem;color:var(--parch-dim)}
.set-spent .meter-row .v b{color:var(--lantern)}
.set-meter{height:6px;background:#1b1b1d}
.set-meter>i{background:var(--ember-hot)}
.set-off{margin-top:10px}
.set-page .g-fx-e i.set-fx-n{display:block;font-size:.76rem;line-height:1.4;letter-spacing:.02em}
.set-fx-rules{margin:9px 0 0;padding:8px 0 0 18px;border-top:1px dashed var(--edge);
  font-size:.84rem;line-height:1.5;color:var(--parch-dim)}
.set-fx-rules li{margin:3px 0}
.set-fx-rules li::marker{color:var(--parch-faint)}

.set-light{margin-top:16px;padding-top:12px;border-top:1px solid var(--edge)}
.set-light .set-text{color:var(--parch-dim)}
.set-light .set-text b:first-child{color:var(--parch)}
.set-light.is-cta{margin-top:0;padding:14px 16px 12px;border:1px solid var(--edge-2);border-top:2px solid var(--ember-text);background:var(--panel)}
.set-light.is-cta .set-h3{margin:0 0 6px}
.set-light.is-cta .set-text{color:var(--parch)}
.set-link{font-size:.86rem;color:var(--parch-dim);border-bottom:1px solid var(--edge-2);padding-bottom:1px}
.set-link:hover{color:var(--parch);border-bottom-color:var(--parch)}
a.btn.set-ghost-edge{border-color:var(--edge-2)}
.set-email{font-family:var(--mono);font-weight:500;color:var(--parch);overflow-wrap:anywhere}
.set-reset{display:block;margin-top:2px;font-size:.76rem;color:var(--parch-dim)}
.set-reset .num{font-family:var(--mono);color:var(--parch)}
.set-flash .num{font-family:var(--mono)}
.set-mark{color:var(--ember-text);font-family:var(--mono)}
@media(max-width:820px){
  .set-input{max-width:none}
  .set-unit-row .btn{margin-left:0}
}
@media(max-width:680px){
  .set-perks td[data-l]::before{display:block;margin:7px 0 2px;font-size:.58rem;color:var(--parch-dim)}
  .set-perks td:first-child{margin-bottom:0}
  .set-perks.is-lit td.set-col-lit[data-l]::before{color:var(--ember-text)}
  .set-perks.is-dark td.set-col-free[data-l]::before{color:var(--lantern)}
}

/* ============================================================
   SITE-WIDE (phase B, chrome): on a phone the fixed dock covered the
   footer, the only door to Settings and the Guides. The body keeps
   room for the dock so the footer scrolls clear of it.
   ============================================================ */
@media(max-width:820px){
  body:has(> .ct-mobile){padding-bottom:calc(62px + env(safe-area-inset-bottom))}
}
/* PHONE-FOOTER-AND-A-DOOR (section 32, 4): the Dossier - the Me tab - carries a door to
   /settings on its crumbs line, so the phone reaches the settings without the footer. */
.crumbs.crumbs-door{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.crumbs .door-settings{color:var(--parch-dim);border-bottom:1px solid var(--edge-2)}
.crumbs .door-settings:hover{color:var(--parch);border-bottom-color:var(--parch)}
/* B19 (site-wide): a danger notice's body in --parch (the blood-soft body measured 3.1:1 on
   its ground); its border, its ground and its first bold word keep the blood. */
.notice.danger{color:var(--parch)}
.notice.danger > b:first-child{color:var(--rust-soft)}

/* THE ONE-LINE BAR OF THE DARK'S SCREENS (KB-344 L3-9, the owner 2026-10-05: "standardize these screens"): the
   dungeon's status line under its panel, moved here as it was so the delve wears the same bar under its map -
   Health, the Wick, the coin and the bag in one row of the live header's .stat cells, one height */
.qp-status{display:flex;margin-top:10px;border:1px solid var(--edge);background:var(--panel);height:66px}
.qp-status .stat{flex:1 1 0;min-width:0;padding:.5rem .8rem .55rem;position:relative}
.qp-status .stat .v{font-size:1.2rem;white-space:nowrap}
.qp-status .stat .sub{display:block;margin-top:4px;font:400 .64rem/1 var(--mono);color:var(--parch-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qp-status .stat .sub.short{color:var(--blood-text)}
.qp-status .stat .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:#1b1b1d}
.qp-status .stat .bar i{display:block;height:100%}
.qp-status .stat.hp .bar i{background:var(--hp)} .qp-status .stat.wick .bar i{background:var(--wick)}
.qp-status .stat.wick{flex:2.3 1 0}
.qp-status .stat.candles .v{color:var(--ember-text)}
.qp-status .stat.sack{flex:1.7 1 0}
.qp-status .stat.sack .v{font-size:1rem;font-weight:400;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:hidden}
.qp-status .stat.sack .v em{font-style:italic;color:var(--parch-dim);flex:none}
.qp-status .stat.sack .qs-pips{flex:0 1 auto;min-width:0;overflow:hidden}
/* 681-820px and a phone: the bar rides above the fixed dock while its screen is in view */
@media(min-width:681px) and (max-width:820px){
  .qp-status{position:sticky;bottom:calc(var(--mnav) + env(safe-area-inset-bottom));z-index:20;box-shadow:0 -1px 0 var(--edge)}
}
@media(max-width:680px){
  .qp-status{position:sticky;bottom:calc(var(--mnav) + env(safe-area-inset-bottom));z-index:20;box-shadow:0 -1px 0 var(--edge)}
  .qp-status{flex-wrap:nowrap;height:52px}
  .qp-status .stat{flex:1 1 22%;padding:.32rem .35rem .4rem;border-left:1px solid var(--edge);height:52px}
  .qp-status .stat .sub{font-size:.56rem;margin-top:5px}
  .qp-status .stat:first-child{border-left:0}
  .qp-status .stat .v{font-size:.9rem}
  .qp-status .stat .k{font-size:.5rem;letter-spacing:.03em;white-space:nowrap;overflow:hidden}
  .qp-status .stat.wick{flex:1 1 30%}
  .qp-status .stat.candles{flex:1 1 16%}
  .qp-status .stat.coins{flex:1 1 11%}
  .qp-status .stat.sack{flex:1 1 21%}
  .qp-status .stat.sack .qs-pips{display:none}
  .qp-status .stat.sack .v em{font-size:.82rem}
}
/* the delve's bar stands right under its map, inside the map's column (KB-344 L3-9) */
.delve-map .qp-status{flex:none;margin-top:8px}
/* THE PHONE (KB-344 S4; owner L3-5, L3-9): the map fills the screen between the header and the bar (a strip of what
   lies below still shows), the bar of Health, the Wick, the coin and the bag rides fixed at the foot (over the bottom
   menu where it shows: --mnav), and the map's sheet lies edge to edge just above the bar. Nothing asks the page to
   scroll. A phone turned on its side has no height for a sheet: there the sheet's cards stay in the page. */
.panel.step .sheet-x{display:none}
@media(max-width:680px) and (min-height:520px){
  .delve-map .fr-mapframe iframe{height:max(300px,calc(100vh - 229px - var(--mnav) - env(safe-area-inset-bottom)));
    height:max(300px,calc(100dvh - 229px - var(--mnav) - env(safe-area-inset-bottom)))}
  #delve-you.qp-status{position:fixed;left:0;right:0;bottom:calc(var(--mnav) + env(safe-area-inset-bottom));margin:0;z-index:106;
    border-left:0;border-right:0}
  .delve-cols{padding-bottom:52px}
  .msheet{position:fixed;left:0;right:0;bottom:calc(var(--mnav) + 52px + env(safe-area-inset-bottom));z-index:107;margin:0;
    max-height:calc(46vh - 20px);max-height:calc(46dvh - 20px);box-shadow:0 -12px 28px rgba(0,0,0,.65)}
  .msheet.open{max-height:calc(100vh - 199px - var(--mnav) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 199px - var(--mnav) - env(safe-area-inset-bottom))}
  .msheet:not(.open)>.panel.step .light-opt{min-height:44px}
  /* the bug button stands over the bar, and in the map's top corner while the sheet is up */
  body:has(#delve-you) .bugfab{bottom:calc(var(--mnav) + 52px + 14px + env(safe-area-inset-bottom))}
  body:has(#delve-you) .bugfab-panel{bottom:calc(var(--mnav) + 52px + 66px + env(safe-area-inset-bottom))}
  body:has(#delve-sheet:not(.empty)) .bugfab{bottom:auto;top:calc(59px + 12px)}
  body:has(#delve-sheet:not(.empty)) .bugfab-panel{bottom:auto;top:calc(59px + 64px)}
}
/* a phone on its side: the sheet's cards lie in the page under the map, framed as panels, all shown */
@media(max-width:680px) and (max-height:519px){
  .msheet{grid-row:auto;align-self:auto;margin:14px 0 0;max-height:none;overflow:visible;border:0;background:none;box-shadow:none}
  .msheet-tog{display:none}
  .msheet>.m-card.panel,.msheet>.m-card.notice,.msheet>.m-card.panel.hot.step{margin:0 0 9px;border:1px solid var(--edge);
    padding:13px 15px;background:var(--panel-2)}
  .msheet>.m-card.panel.hot{border-color:var(--lantern-deep)}
  .msheet>.panel.step .sheet-x{display:none}
  .msheet>.panel.step .step-to{cursor:default;padding-right:0}
}

/* THE GAME'S MENU STEPS ASIDE ON THE DARK'S OWN SCREENS (KB-344 L3-13; the owner 2026-10-05: «меню гри думаю треба
   приберати в бою та в делві/підземеллі»). On the walk (#delve-zone) and in a dungeon (#qp-status) the tabs under the
   header and the phone's bottom menu are hidden, and the bottom menu's height goes back to the screen; the ☰ in the
   header brings both back for as long as it stays open. A fight already wears the bare brand bar, with no menu at all. */
.ct-menu{display:none;position:relative;align-self:stretch}
.ct-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:40px;height:100%;min-height:38px;
  cursor:pointer;background:transparent;border:1px solid var(--panel-edge,var(--edge-2));color:var(--lantern-soft);font-size:1.05rem}
.ct-menu>summary::-webkit-details-marker{display:none}
.ct-menu[open]>summary{background:#1e1e21;border-color:var(--lantern-deep)}
body:has(#delve-zone) .ct-menu,body:has(#qp-status) .ct-menu{display:flex}
body:has(#delve-zone):not(:has(.ct-menu[open])) .ct-nav,body:has(#qp-status):not(:has(.ct-menu[open])) .ct-nav{display:none}
@media(max-width:820px){
  body:has(#delve-zone):not(:has(.ct-menu[open])),body:has(#qp-status):not(:has(.ct-menu[open])){--mnav:0px}
  body:has(#delve-zone):not(:has(.ct-menu[open])) .ct-mobile,body:has(#qp-status):not(:has(.ct-menu[open])) .ct-mobile{display:none}
  .ct-menu>summary{width:38px}
  /* the header's third cell ("out in the dark") gives way to the ☰ on the dark's screens - the bar under the map
     already says where you stand */
  body:has(#delve-zone) .ct-stats .stat:nth-child(3),body:has(#qp-status) .ct-stats .stat:nth-child(3){display:none}
}

/* N59, round 33: the hungerstone's three trades stand apart. A bordered cell each - blood, light, coin - side by
   side on a wide screen, stacked on a phone, headed by the action's name; its rate (every number read from the
   server, the trade's own readers) in plain view under the name, then its lots and its button. The edge and the
   heading wear the button's tone: rust for the blood, bone for the light, ember for the coin. */
.hunger-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 2px}
.hunger-act{margin:0;min-width:0;display:flex;flex-direction:column;gap:9px;padding:11px 13px 13px;
  background:var(--panel);border:1px solid var(--edge-2);border-radius:var(--r);box-shadow:inset 3px 0 0 var(--lantern-deep)}
.hunger-act--blood{border-color:#5a232a;box-shadow:inset 3px 0 0 var(--rust)}
.hunger-act--coin{border-color:#6E1604;box-shadow:inset 3px 0 0 var(--ember-mid)}
.hunger-act-h{font:600 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--parch)}
.hunger-act--blood .hunger-act-h{color:var(--rust-soft)}
.hunger-act--coin .hunger-act-h{color:var(--ember-text)}
.hunger-act-rate{margin:0;font:500 .95rem/1.35 var(--mono);color:var(--lantern)}
.hunger-act-per{font-weight:400;font-size:.72rem;color:var(--parch-faint)}
.hunger-act-do{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:auto}
.hunger-act-lots{font:400 .7rem/1 var(--mono);color:var(--parch-faint)}
.hunger-act-do .btn{flex:1 1 8.5rem;min-width:0}
@media(max-width:680px){.hunger-acts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){
  .hunger-act input.qty-in{width:56px;height:40px}
  .hunger-act-do .btn{min-height:44px}
}

/* THE CONTRACT CARDS (round 33 N29, KB-348 mockup 1): a contract is a block of its own, and the blocks stand under a heading
   per kind (Daily, Weekly, Story). KB-347: no colour per kind - the heading is plain ink and the tag says the kind; a
   resting card goes one step fainter (faint = off or waiting). */
.q-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:18px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--edge)}
.sub+.q-gh{margin-top:6px}
.q-gh h3{font:600 .95rem/1.1 var(--serif);color:var(--parch)}
.q-ga{margin-left:auto;font:italic 400 .76rem/1.2 var(--serif);color:var(--parch-faint)}
.q-card{background:var(--panel);border:1px solid var(--edge);padding:12px 14px;margin:0 0 8px}
.q-head{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.q-t{font:600 1rem/1.25 var(--serif);color:var(--parch)}
.q-blurb{margin:5px 0 9px}
/* a station: the one new shape - content, not a status, so a faint hairline and no caps */
.q-sts{display:flex;flex-wrap:wrap;gap:6px}
.q-st{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;padding:4px 9px 3px 8px;border:1px solid var(--edge);font:400 .76rem/1.3 var(--serif);color:var(--parch-dim)}
.q-st i{font:700 .55rem/1 var(--mono);letter-spacing:.08em;color:var(--parch-faint)}
/* the long walk's last door: its chip keeps the hairline one step stronger and ends with a mono mark, no box (KB-347) */
.q-st.is-last-door{border-color:var(--edge-2)}
.q-st-mark{font:400 .62rem/1.2 var(--mono);color:var(--parch-dim)}
/* the foot: LEVEL and REWARD chips with the foes mark on the left, Begin or the resting chip pushed right */
.q-card .q-foot{margin-top:11px}
.q-pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.q-foes{font:400 .62rem/1.2 var(--mono);color:var(--parch-dim)}
.q-foot>.q-start,.q-foot>.chip.parked{margin-left:auto}
/* the Blade picker at Begin's height (the global select would draw it about twice as tall) */
.q-card .q-start{align-items:stretch}
.q-card select{width:auto;height:auto;min-width:0;padding:2px 8px;font-size:.76rem;line-height:1}
/* a resting card goes one step fainter: the title, the blurb, the stations and the foes mark */
.q-card.is-parked .q-t{color:var(--parch-dim)}
.q-card.is-parked .q-blurb,.q-card.is-parked .q-st,.q-card.is-parked .q-st-mark,.q-card.is-parked .q-foes{color:var(--parch-faint)}

/* ===== THE GROUP'S BLOCK (the block's design, 2026-10-26, KB-369): the Gate's and the map's panel #grp-panel. A grid:
   the head over the souls and the chat side by side, the word of the last action and the bar under both; on a phone two
   tabs (Souls / Chat) take turns. #grp-block (the poll's fragment) is display: contents, so its pieces stand in the grid
   and the chat's column, outside it, keeps what is being typed. ===== */
.panel.gx{padding:0}
.gx.gx-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  grid-template-areas:"head head" "tabs tabs" "souls chat" "flash flash" "bar bar"}
.gx-block{display:contents}
.gx-head{grid-area:head;display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--edge)}
.gx-head h2{font:500 1.02rem/1 var(--serif);margin:0;color:var(--parch)}
.gx-state{font:600 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-dim);border:1px solid var(--edge-2);padding:4px 6px;white-space:nowrap}
.gx-state.lead{color:var(--void);background:var(--parch);border-color:var(--parch)}
.gx-state.out{color:var(--ember-text);border-color:var(--ember-deep)}
.gx-count{font:400 .78rem/1 var(--mono);color:var(--parch-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the menus: a details element (no script needed), its list over the page */
.gx-more{position:relative}
.gx-head > .gx-more{margin-left:auto}
.gx-head > .gx-leave{margin-left:auto}
.gx-head > .gx-leave + .gx-more{margin-left:0}
.gx-leave .btn{padding:6px 12px;font-size:.68rem}
.gx-more > summary{list-style:none}
.gx-more > summary::-webkit-details-marker{display:none}
.gx-dots{display:inline-block;background:transparent;border:1px solid transparent;color:var(--parch-dim);font:700 1rem/1 var(--serif);padding:3px 9px;cursor:pointer;letter-spacing:.1em;user-select:none}
.gx-dots:hover,.gx-more[open] > .gx-dots{border-color:var(--edge-2);color:var(--parch)}
.gx-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:220px;background:#18181b;border:1px solid var(--edge-2);box-shadow:0 10px 30px rgba(0,0,0,.6);padding:4px 0}
.gx-menu form{margin:0}
.gx-menu a,.gx-menu button{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;border:0;padding:9px 14px;font:400 .88rem/1.2 var(--serif);color:var(--parch);cursor:pointer;text-decoration:none;letter-spacing:0;text-transform:none}
.gx-menu a:hover,.gx-menu button:hover{background:rgba(211,207,199,.06)}
.gx-menu button.danger{color:var(--rust-soft)}
.gx-menu hr{border:0;border-top:1px solid var(--edge);margin:4px 0}
/* the columns */
.gx-col{padding:14px 16px;min-width:0}
.gx-souls{grid-area:souls}
.gx-chat{grid-area:chat;border-left:1px solid var(--edge);display:flex;flex-direction:column}
.gx-lbl{display:flex;align-items:baseline;gap:8px;font:600 .56rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--parch-faint);margin:0 0 10px}
.gx-lbl .r{margin-left:auto;letter-spacing:.08em;text-transform:none;font-weight:400}
.gx-list + .gx-lbl,.gx-none + .gx-lbl,.gx-seek + .gx-lbl,.gx-gap,.gx-gap-s + .gx-lbl,.grp-roll + .gx-lbl{margin-top:18px}
.gx-gap-s{margin:8px 0 0}
.gx-none{font:400 .84rem/1.5 var(--serif);color:var(--parch-faint);margin:0}
/* a soul's row: picture, who, line, readiness, menu - the line and the readiness in fixed columns, so the rows stand even */
.gx-row{display:grid;grid-template-columns:34px minmax(0,1fr) 128px 92px 28px;align-items:center;gap:10px;padding:7px 8px;border:1px solid var(--edge);border-top-width:0;background:var(--panel)}
.gx-list > :first-child{border-top-width:1px}
.gx-row.me{box-shadow:inset 2px 0 0 var(--parch-dim)}
.gx-row.walk{grid-template-columns:34px minmax(0,1fr) 150px 28px}
.gx-pic{width:34px;height:34px;object-fit:cover;object-position:50% 18%;border:1px solid var(--edge-2);background:#0c0c0d;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font:400 1rem/1 var(--serif);color:var(--parch-faint)}
.gx-pic.empty{border-style:dashed}
.gx-who{min-width:0}
.gx-name{font:500 .95rem/1.15 var(--serif);color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gx-name .you{font:400 .7rem/1 var(--mono);color:var(--parch-faint);margin-left:6px}
.gx-meta{font:400 .74rem/1.3 var(--serif);color:var(--parch-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-meta .lead{font:600 .54rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--void);background:var(--parch-dim);padding:2px 4px;margin-right:6px;vertical-align:1px}
.gx-meta .away{color:var(--ember-text)}
/* the line: three cells (the leader's are buttons, the invite's and the wish's are radios), or a plain tag */
.gx-line{display:inline-flex;border:1px solid var(--edge-2);margin:0;align-self:center;justify-self:start}
.gx-line > button,.gx-line > label > span{display:flex;align-items:center;justify-content:center;font:600 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--parch-faint);background:transparent;border:0;padding:6px 8px;min-width:24px;cursor:pointer;white-space:nowrap}
.gx-line > * + *{border-left:1px solid var(--edge)}
.gx-line > label{display:flex;position:relative;margin:0}
.gx-line > label > input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gx-line > button.on,.gx-line > label > input:checked + span{background:rgba(211,207,199,.12);color:var(--parch)}
.gx-line > button.on:disabled{opacity:1;cursor:default}
.gx-line > button:hover:not(.on),.gx-line > label:hover > input:not(:checked) + span{color:var(--parch-dim);background:rgba(211,207,199,.04)}
.gx-line > label > input:focus-visible + span{outline:1px solid var(--parch);outline-offset:-1px}
.gx-row .gx-line{width:100%}
.gx-row .gx-line > button{flex:1}
.gx-tag{justify-self:start;font:600 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--parch-dim);border:1px solid var(--edge);padding:5px 7px;white-space:nowrap}
/* readiness */
.gx-rd{font:600 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;color:var(--parch-faint);white-space:nowrap}
.gx-rd::before{content:"";width:7px;height:7px;border:1px solid var(--parch-faint);border-radius:50%;flex-shrink:0}
.gx-rd.ok{color:var(--ember-text)}
.gx-rd.ok::before{background:var(--ember-hot);border-color:var(--ember-hot);box-shadow:0 0 6px var(--ember-glow)}
.gx-rd.pend::before{border-style:dashed}
.gx-rmore{justify-self:end;margin:0}
.gx-rmore > .gx-dots{padding:2px 6px;font-size:.9rem}
/* an invitation out waits */
.gx-row.pending{background:transparent;border-style:dashed}
.gx-row.pending .gx-name{color:var(--parch-dim)}
.gx-x{background:none;border:0;color:var(--parch-faint);cursor:pointer;font:400 1.1rem/1 var(--serif);padding:2px 7px}
.gx-x:hover{color:var(--rust-soft)}
/* the invite: one row */
.gx-invite{display:grid;grid-template-columns:34px minmax(0,1fr) 128px 130px;gap:10px;align-items:center;padding:7px 8px;border:1px dashed var(--edge-2);border-top-width:0;margin:0}
.gx-list > .gx-invite:first-child{border-top-width:1px}
.gx-invite input[type=text]{height:auto;padding:7px 9px;font:400 .9rem/1 var(--serif);min-width:0;width:100%;box-sizing:border-box}
.gx-invite .gx-line{width:100%}
.gx-invite .gx-line > label{flex:1}
.gx-invite .gx-line > label > span{width:100%}
.gx-invite .btn{justify-self:stretch}
/* those looking for a group (and the walk's wishes) */
.gx-seek{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--edge)}
.gx-seek .gx-pic{width:26px;height:26px}
.gx-seek .gx-name{font-size:.88rem}
.gx-seek.far{opacity:.45}
.gx-seek .why{font:400 .74rem/1.2 var(--serif);color:var(--parch-faint);white-space:nowrap}
.gx-seek form{margin:0}
.gx-seek.grp-wish .gx-name{white-space:normal}
/* the walk's Health */
.gx-bars{display:flex;flex-direction:column;gap:4px}
.gx-bars i{display:block;height:4px;background:#241012;position:relative}
.gx-bars i b{position:absolute;inset:0 auto 0 0;background:var(--rust)}
.gx-bars small{font:400 .64rem/1 var(--mono);color:var(--parch-faint);white-space:nowrap}
.gx-give{margin-top:16px}
.gx-give-row{margin:8px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* the word of the last action */
.gx-flash{grid-area:flash;margin:0 16px 12px}
.gx-col .gx-flash{margin:14px 0 0}
/* the bar: one sentence, the buttons it needs now */
.gx-bar{grid-area:bar;display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--edge);background:#0e0e0f;margin:0}
.gx-bar .say{font:400 .88rem/1.4 var(--serif);color:var(--parch-dim);min-width:0;flex:1}
.gx-bar .say b{color:var(--parch);font-weight:500}
.gx-pips{display:inline-flex;gap:4px;margin-right:9px;vertical-align:1px}
.gx-pips i{width:7px;height:7px;border-radius:50%;border:1px solid var(--parch-faint)}
.gx-pips i.ok{background:var(--ember-hot);border-color:var(--ember-hot)}
.gx-bar .act{margin-left:auto;display:flex;gap:8px;flex-shrink:0;align-items:center}
.gx-bar .act form{margin:0}
.gx-blades{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.gx-blade{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge-2);padding:5px 8px;font:400 .82rem/1 var(--serif);color:var(--parch);cursor:pointer;margin:0}
.gx-blade small{font:400 .66rem/1 var(--mono);color:var(--parch-faint)}
/* the chat */
.gx-log{flex:1;min-height:120px;max-height:300px;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column}
.gx-msg{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;padding:5px 6px}
.gx-msg .gx-pic{width:24px;height:24px;font-size:.7rem}
.gx-msg.cont{padding-top:0}
.gx-msg.cont > .gx-pic{visibility:hidden;height:0;border:0}
.gx-msg.cont .gx-mh{display:none}
.gx-mb{min-width:0}
.gx-mh{display:flex;align-items:baseline;gap:8px}
.gx-mh b{font:500 .84rem/1.2 var(--serif);color:var(--parch)}
.gx-mh time{font:400 .66rem/1 var(--mono);color:var(--parch-faint);margin-left:auto}
.gx-mt{font:400 .9rem/1.42 var(--serif);color:#C9C2B6;overflow-wrap:anywhere;white-space:pre-wrap}
.gx-msg.mine{background:rgba(211,207,199,.035);box-shadow:inset 2px 0 0 var(--edge-2)}
.gx-msg.mine .gx-mh b{color:var(--parch-dim)}
.gx-sys{font:italic 400 .78rem/1.3 var(--serif);color:var(--parch-faint);text-align:center;padding:6px 0}
.gx-sys::before,.gx-sys::after{content:"\00B7";margin:0 7px;opacity:.6}
.gx-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:26px 10px;border:1px dashed var(--edge)}
.gx-empty b{font:500 .92rem/1 var(--serif);color:var(--parch-dim)}
.gx-empty span{font:400 .8rem/1.4 var(--serif);color:var(--parch-faint);max-width:280px}
.gx-say{display:flex;margin:8px 0 0;border:1px solid var(--edge-2);background:#0c0c0d}
.gx-say:focus-within{border-color:var(--parch-dim)}
.gx-say input[type=text]{flex:1;min-width:0;height:auto;background:transparent;border:0;box-shadow:none;outline:0;color:var(--parch);font:400 .92rem/1 var(--serif);padding:10px 11px}
.gx-say input[type=text]:focus{box-shadow:none}
.gx-say .n{font:400 .64rem/1 var(--mono);color:var(--parch-faint);align-self:center;padding:0 8px}
.gx-say .n.near{color:var(--ember-text)}
.gx-say button{background:transparent;border:0;border-left:1px solid var(--edge);color:var(--parch-dim);font:500 .66rem/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;padding:0 14px;cursor:pointer}
.gx-say button:hover{color:var(--lantern)}
.gx-err{font:400 .76rem/1.3 var(--mono);color:var(--rust-soft);margin-top:6px}
/* invitations to me */
.gx-inv{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--ember-deep);background:rgba(232,90,16,.035);margin-bottom:10px}
.gx-inv .t{font:400 .9rem/1.35 var(--serif);color:var(--parch-dim)}
.gx-inv .t b{color:var(--parch);font-weight:500}
.gx-inv .t small{display:block;font:400 .72rem/1.3 var(--mono);color:var(--parch-faint);margin-top:3px}
.gx-inv .a{display:flex;gap:6px}
.gx-inv .a form{margin:0}
/* no group: two ways */
.gx-ways{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gx-way{border:1px solid var(--edge);background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:8px}
.gx-way h3{font:500 .98rem/1 var(--serif);margin:0;color:var(--parch)}
.gx-way p{font:400 .82rem/1.45 var(--serif);color:var(--parch-faint);margin:0;flex:1}
.gx-way .row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin:0}
.gx-way .row .gx-line{align-self:stretch}
.gx-way .row .gx-line > label{align-items:stretch}
.gx-way .row .gx-line > label > span{padding:0 12px;font-size:.62rem;min-width:64px;height:100%;box-sizing:border-box}
.gx-way .row .btn{display:inline-flex;align-items:center}
.gx-way.marked{border-color:var(--edge-2)}
/* the tabs: a phone's only */
.gx-tabs{grid-area:tabs;display:none;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--edge)}
.gx-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:10px;font:500 .7rem/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--parch-faint);cursor:pointer}
.gx-tabs button.on{color:var(--parch);border-bottom-color:var(--parch)}
.gx-tabs .badge{display:inline-block;min-width:15px;height:15px;border-radius:50%;background:var(--amber);color:var(--void);font:700 .56rem/15px var(--mono);letter-spacing:0;margin-left:5px;vertical-align:1px;text-align:center}
@media (max-width:760px){
  .gx.gx-in{grid-template-columns:1fr;grid-template-areas:"head" "tabs" "souls" "chat" "flash" "bar"}
  .gx-tabs{display:grid}
  .gx-chat{border-left:0}
  .gx[data-tab="souls"] .gx-chat,.gx[data-tab="chat"] .gx-souls{display:none}
  .gx-row{grid-template-columns:30px minmax(0,1fr) auto 26px;gap:8px}
  .gx-row > .gx-line,.gx-row > .gx-tag{grid-column:2 / 4;grid-row:2;justify-self:start;width:auto}
  .gx-row.walk{grid-template-columns:30px minmax(0,1fr) 110px 26px}
  .gx-pic{width:30px;height:30px}
  .gx-invite{grid-template-columns:minmax(0,1fr) auto}
  .gx-invite > .gx-pic{display:none}
  .gx-invite > .gx-line{grid-column:1;grid-row:2}
  .gx-ways{grid-template-columns:1fr}
  .gx-inv{grid-template-columns:34px minmax(0,1fr)}
  .gx-inv .a{grid-column:1 / -1}
  .gx-bar{flex-wrap:wrap}
  .gx-bar .act{width:100%}
  .gx-bar .act > *,.gx-bar .act .btn{flex:1;justify-content:center}
  .gx-bar .act form .btn{width:100%}
  .gx-head{flex-wrap:wrap}
}

/* the figure at birth (his word 2026-10-26, KB-369): a row under the faces, only when the class has figures of the sex */
.cc-figure-row{margin-top:16px}
.cc-sub-h{font:600 .58rem/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--parch-faint);margin:0 0 8px}
/* owner 2026-11-01: the figures fill the row's width, six across, then 2 rows of 3, 3 of 2, and one a row at the narrowest */
.cc-figure-row{scroll-margin-top:16px}
.cc-figures{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media(max-width:720px){.cc-figures{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.cc-figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){.cc-figures{grid-template-columns:1fr}}
.cc-figure{background:radial-gradient(circle at 50% 60%,#18181a,var(--void) 80%);border:1px solid var(--edge);padding:0;cursor:pointer;position:relative;min-width:0}
.cc-figure img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}
.cc-figure:hover img{filter:brightness(1.12)}
.cc-figure.active::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px var(--parch)}