/* EASTSCAPE: THE STATION LEDGER's styles (2026-10-17, Round 16: cw_template "ledger", cw_recipe / cw_make / cw_missing "straight"; the window
   is v3/assets/js/eastscape-st-ledger.js, drawn by every station module eastscape-st-*.js). One window at every station, in BOTH looks: the
   base below reads the kit's tokens (--k-*), so Midnight and Tavern each draw it in their own colours; each look's few own touches are at the end.
   Type (tools/midnight/round10/TYPE.md): title 20, heading 15 (tabs, the plate), label 12 caps, body 15, small 13 (Marcellus for the first
   three, Lora for the rest). Pictures 64 (the chosen recipe), 32 (rows, inputs), 20 (inline). Linked once from eastscape.html; bump its ?v= there. */

/* ---------------------------------------------------------------- the window */
html body :is(#craftWin,#smithWin).win.ldg-win[data-st]{width:840px;max-width:none;height:560px;min-height:0;padding:0;display:flex;flex-direction:column}
.ldg-win[data-st]>.st-mod,.ldg-win[data-st]>.st-mod>[data-stm]:not([hidden]),.ldg-win[data-st] .ldg-host:not([hidden]){flex:1;display:flex;flex-direction:column;min-height:0}
:is(#craftWin,#smithWin) .st-mod>[data-stm]>[hidden]{display:none!important}   /* a module's second host (the anvil's Star Track) stays out of the way when hidden */
.ldg{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;font:400 15px/1.4 Lora,Georgia,serif;color:var(--k-ink)}
.ldg *{box-sizing:border-box}
.ldg [hidden]{display:none!important}
.ldg img{image-rendering:auto}
.ldg-u{flex:none;width:var(--s)!important;height:var(--s)!important;max-width:none!important}
.ldg-i{position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:none}
.ldg-i>.ico,.ldg-i>.glow,.ldg-i>.glow>.ico,.ldg-i>img{display:block;width:var(--s)!important;height:var(--s)!important;max-width:none!important;max-height:none!important;margin:0!important;vertical-align:0}
html.isnap :is(#panel,body) .ldg .ldg-i img[src*="/items/"]{--n:var(--s);width:var(--s)!important;height:var(--s)!important}   /* the sharp scale's snap never resizes a ledger picture: it is 64 or 32 exactly */

/* the head: name, your level and its bar, chips, the close */
.ldg-head{gap:12px}
.ldg-head>b{display:inline-flex;align-items:center;gap:8px;flex:none}
.ldg-head>b span{font:inherit}
.ldg-head .k-x{margin-left:0}
.ldg-lv{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--k-ink2);white-space:nowrap}
.ldg-lv b{font:400 15px/1 var(--k-disp);letter-spacing:.04em;color:var(--k-ink)}
.ldg-lv small{font-size:13px;color:var(--k-ink3)}
.ldg-xb{position:relative;display:block;width:150px;height:6px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.ldg-xb>i{position:absolute;inset:0 auto 0 0;background:var(--ldg-acc)}
.ldg-chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.ldg-chips:empty{display:none}
.ldg-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 5px;font:700 13px/1.35 Lora,Georgia,serif;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink2);white-space:nowrap}
.ldg-chip.good{color:var(--k-good);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k-good) 55%,transparent)}
.ldg-chip.bad{color:var(--k-bad);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k-bad) 55%,transparent)}
.ldg-chip.off{opacity:.62}

/* the tabs and the search, one row */
.ldg-tr{display:flex;align-items:flex-end;gap:10px}
.ldg-tabs{display:flex;align-items:flex-end;gap:inherit;flex:1;min-width:0;flex-wrap:nowrap;overflow:hidden}
.ldg-tr button[role="tab"]{display:inline-flex;align-items:center;gap:6px;font-family:var(--k-disp);font-size:15px;letter-spacing:.03em;text-transform:none;white-space:nowrap}
.ldg-tr button[role="tab"] small{font:700 13px/1 Lora,Georgia,serif;letter-spacing:0;text-transform:none}
html[data-ui-theme] .ldg-tr button[role="tab"].cmp:not([aria-selected="true"]){padding-left:7px;padding-right:7px;gap:4px}
.ldg-tr button[role="tab"].lk .ldg-i{filter:grayscale(.8) brightness(.7)}
.ldg-tr button[role="tab"] .ldg-pad{margin-right:3px}
.ldg-one{display:inline-flex;align-items:center;gap:6px;padding:8px 4px;font:400 15px/1 var(--k-disp);letter-spacing:.03em;color:var(--k-ink)}
.ldg-find{flex:none;width:170px;margin:0 0 6px auto}
.ldg-mag{display:inline-block;position:relative;flex:none;width:11px;height:11px;border:2px solid currentColor;border-radius:50%;color:var(--k-ink3)}
.ldg-mag::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:currentColor;transform:rotate(45deg)}
.ldg-pad{display:inline-block;position:relative;flex:none;width:9px;height:7px;margin-top:4px;background:currentColor}
.ldg-pad::before{content:"";position:absolute;left:1.5px;top:-5px;width:6px;height:6px;border:1.5px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0;box-sizing:border-box}

/* ---------------------------------------------------------------- the left: the recipes by tier */
.ldg-body{flex:1;display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;padding:10px 14px;min-height:0}
.ldg-list{display:flex;flex-direction:column;gap:4px;min-height:0;overflow:auto;padding:2px 6px 8px 2px;overscroll-behavior:contain;scrollbar-width:thin}
.ldg-gh{display:flex;align-items:center;gap:8px;flex:none;margin:8px 2px 1px;font:400 12px/1.2 var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
.ldg-gh::after{content:"";flex:1;height:1px;background:var(--k-line)}
.ldg-r{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;flex:none;min-height:52px;width:100%;padding:4px 12px 4px 4px;border:0;border-radius:0;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-line);color:inherit;text-align:left;font:inherit;cursor:pointer}
.ldg-r:hover{box-shadow:inset 0 0 0 1px var(--ldg-acc)}
.ldg-r.on{box-shadow:inset 0 0 0 2px var(--ldg-acc),0 0 10px var(--ldg-glow)}
.ldg-rn{display:flex;flex-direction:column;gap:1px;min-width:0}
.ldg-rn b{font:600 15px/1.25 Lora,Georgia,serif;color:var(--k-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldg-rn b small{font-size:13px;font-weight:700;color:var(--k-ink2)}
.ldg-rn>small{font-size:13px;line-height:1.3;color:var(--k-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldg-rc{display:flex;align-items:center;justify-content:flex-end;min-width:36px}
.ldg-c{font:700 15px/1 Lora,Georgia,serif;color:var(--k-good);font-variant-numeric:tabular-nums}
.ldg-sh{font:italic 600 13px/1 Lora,Georgia,serif;color:var(--k-bad)}
.ldg-lk{display:inline-flex;align-items:center;gap:5px;font:700 13px/1 Lora,Georgia,serif;font-style:normal;color:var(--k-ink3)}
.ldg-r.lock{background:transparent}
.ldg-r.lock .ldg-rn b{color:var(--k-ink2)}
.ldg-r.lock .ldg-s .ldg-i{filter:brightness(0) invert(.2);opacity:.7}
.ldg-r.short .ldg-s .ldg-i{opacity:.55;filter:grayscale(.6)}
.ldg-best .ldg-rn b{font-family:var(--k-disp);font-weight:400;letter-spacing:.03em}
.ldg-none{margin:10px 4px;font-size:13px;color:var(--k-ink3)}

/* the slots: the shared grammar's flat cell (every .k-slot is one; never a wooden outline) at the ledger's two sizes */
.ldg .k-slot.ldg-s{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;flex:none}
.ldg .k-slot.ldg-s.big{width:72px;height:72px}
.ldg .k-slot.ldg-s u{position:absolute;right:2px;bottom:1px;padding:0 3px;font:700 13px/15px Lora,Georgia,serif;color:#fff;text-decoration:none;text-shadow:0 1px 0 #000,0 0 3px #000;white-space:nowrap}
.ldg .k-slot.ldg-s.lock .ldg-i{filter:brightness(0) invert(.2);opacity:.7}

/* ---------------------------------------------------------------- the right: the sheet, the make area at its foot */
.ldg-sheet{display:flex;flex-direction:column;min-height:0;padding:12px 14px;background:var(--k-paper-hi);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.ldg-shs{flex:1;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto;padding-right:4px;overscroll-behavior:contain;scrollbar-width:thin}
.ldg-shh{display:flex;align-items:center;gap:14px}
.ldg-shh>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ldg-t{font:400 20px/1.2 var(--k-disp);letter-spacing:.04em;color:var(--k-ink)}
.ldg-t small{font:inherit;font-size:15px;color:var(--k-ink2)}
.ldg-sub{font-size:13px;line-height:1.35;color:var(--k-ink3)}
.ldg-mk{font-style:normal;color:var(--ldg-acc);white-space:nowrap}
.ldg-tag{display:inline-flex;align-items:center;gap:6px;font:600 13px/1.2 Lora,Georgia,serif;color:var(--ldg-acc)}
.ldg-tag small{font-size:13px;font-weight:400;color:var(--k-ink3)}
.ldg-flav{margin:0;font-style:italic;font-size:15px;line-height:1.4;color:var(--k-ink2)}
.ldg-lab{margin-top:4px;font:400 12px/1.2 var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
.ldg-ins{display:flex;flex-direction:column;gap:4px}
.ldg-ins.two{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.ldg-in{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:15px;line-height:1.3}
.ldg-ins.two .ldg-in{grid-template-columns:44px minmax(0,1fr)}
.ldg-ins.two .ldg-in em{grid-column:2;margin-top:-4px}
.ldg-in em{font-style:normal;font-size:13px;color:var(--k-ink3);white-space:nowrap}
.ldg-in.short em{color:var(--k-bad);font-weight:700}
.ldg-facts{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.ldg-f{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.35;color:var(--k-ink2)}
.ldg-f>img,.ldg-f>.ldg-i,.ldg-f>.ldg-u{margin-top:1px}
.ldg-f b{color:var(--k-ink)}
.ldg-f small{font-size:13px;color:var(--k-ink3)}
.ldg-f .bad,.ldg-ember{color:var(--ldg-ember)!important;font-weight:700}
.ldg-f .good{color:var(--k-good)!important}
.ldg-x{display:flex;flex-direction:column;gap:6px;margin-top:4px}   /* a station's own block under the facts */
.ldg-tiles{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:5px}
.ldg-tiles>span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;text-align:center;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-line)}
.ldg-tiles b{font-size:13px;line-height:1.3;color:var(--k-ink2)}
.ldg-tiles em{font:700 15px Lora,Georgia,serif;font-style:normal;color:var(--ldg-ember)}
.ldg-tiles .good em{color:var(--k-good)}
.ldg-tiles small{font-size:13px;line-height:1.25;color:var(--k-ink3)}
.ldg-tiles>span.on{box-shadow:inset 0 0 0 1px var(--ldg-acc)}
.ldg-cmp{display:grid;grid-template-columns:auto auto auto auto;justify-content:start;gap:2px 14px;font-size:15px}
.ldg-cmp>span{display:contents}
.ldg-cmp i{font-style:normal;color:var(--k-ink3)}
.ldg-cmp .up{color:var(--k-good);font-weight:700}.ldg-cmp .dn{color:var(--k-bad);font-weight:700}
.ldg-cmp .hd{font:400 12px/1.4 var(--k-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink3)}
.ldg-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 0}
.ldg-empty p{margin:0;font-size:15px;color:var(--k-ink2)}

/* the make area */
.ldg-make{display:flex;flex-direction:column;gap:8px;flex:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--k-line)}
.ldg-make:empty{display:none}
.ldg-cnt{display:flex;align-items:center;gap:8px}
.ldg-step{display:grid;place-items:center;width:34px;height:34px;flex:none;padding:0;border:0;border-radius:0;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink);font:700 15px/1 Lora,Georgia,serif;cursor:pointer}
.ldg-step:disabled{opacity:.4;cursor:default}
html[data-ui-theme] .ldg-step{background:var(--g-field,var(--k-card));box-shadow:inset 0 0 0 1px var(--g-field-line,var(--k-card-line))}
html[data-ui-theme] .ldg-num{background:var(--g-field,var(--k-paper))}
html[data-ui-theme] .ldg-step:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--ldg-acc)}
.ldg-num{display:inline-flex;align-items:baseline;justify-content:center;gap:5px;min-width:96px;height:34px;padding:0 10px;background:var(--k-paper);box-shadow:inset 0 0 0 1px var(--ldg-acc);line-height:34px}
.ldg-num b{font:700 15px/34px Lora,Georgia,serif;color:var(--k-ink);font-variant-numeric:tabular-nums}
.ldg-num small{font-size:13px;color:var(--k-ink3)}
.ldg-sl{flex:1;min-width:60px;height:22px;margin:0 2px;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.ldg-sl:disabled{opacity:.4;cursor:default}
.ldg-sl::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--ldg-acc) var(--p),var(--k-card-line) var(--p))}
.ldg-sl::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--ldg-acc) var(--p),var(--k-card-line) var(--p))}
.ldg-sl::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--k-paper-hi);box-shadow:0 0 0 2px var(--k-ink2),0 1px 3px rgba(0,0,0,.5)}
.ldg-sl::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--k-paper-hi);box-shadow:0 0 0 2px var(--k-ink2),0 1px 3px rgba(0,0,0,.5)}
.ldg-mrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ldg-mcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.ldg-pre .off{opacity:.5}
.ldg-out{display:block;font-size:13px;line-height:1.4;color:var(--k-ink3)}
.ldg-out b{color:var(--k-ink)}
.ldg .ldg-go{flex:none;min-width:150px;height:40px;font-size:15px;white-space:nowrap}
.ldg-warn{padding:7px 12px;font-size:15px;line-height:1.35;color:var(--k-bad);background:color-mix(in srgb,var(--k-bad) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k-bad) 55%,transparent)}
.ldg-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;min-width:0}
.ldg-a{display:inline-flex;align-items:center;gap:7px;padding:2px 0;border:0;background:none;color:var(--ldg-link);font:600 15px/1.3 Lora,Georgia,serif;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.ldg-a:hover{color:var(--k-ink)}
.ldg-a .ldg-mag{color:currentColor;margin:0 4px 0 2px}
.ldg-a.ldg-fill{align-self:flex-start;text-decoration:none;padding:3px 10px 3px 4px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink2)}
.ldg-a.ldg-fill.on{color:var(--k-ink);box-shadow:inset 0 0 0 2px var(--ldg-acc)}
.ldg-prog{display:flex;flex-direction:column;gap:6px}
.ldg-bar{position:relative;display:block;height:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--k-card-line);overflow:hidden}
.ldg-bar>i{position:absolute;inset:0 auto 0 0;background:var(--ldg-acc);transition:width .45s linear}
.ldg-prog.any .ldg-bar>i{width:100%!important;background:repeating-linear-gradient(135deg,var(--ldg-acc) 0 10px,color-mix(in srgb,var(--ldg-acc) 55%,transparent) 10px 20px);animation:ldgStripe 1.2s linear infinite}
@keyframes ldgStripe{to{background-position:28px 0}}
.ldg-pl{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;color:var(--k-ink2)}
.ldg-pl b{color:var(--k-ink)}
.ldg .ldg-stop{flex:none}

/* the foot: the station's chips, then Bank / Sell what was made here */
.ldg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-top:1px solid var(--k-line);background:rgba(0,0,0,.12)}
.ldg-foot:not(:has(.ldg-chip,.ldg-out2:not([hidden]))){display:none}   /* nothing to say: no foot */
.ldg-foot .ldg-out2{margin-left:auto;display:flex;align-items:center;gap:8px;padding:0;border:0;background:none}
.ldg-foot .ldg-out2 .k-note{font-size:13px}
.ldg-foot .ldg-out2 .k-btn{font:600 15px Lora,Georgia,serif}
/* a spell page's ink, from the ground to the page (the altars) */
.ldg-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ldg-chain>span{display:flex;align-items:center;gap:8px;max-width:190px}
.ldg-chain em{font-style:normal;font-size:13px;line-height:1.3;color:var(--k-ink2)}
.ldg-arrow{width:14px;height:2px;flex:none;background:var(--k-ink3);position:relative}
.ldg-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:6px solid var(--k-ink3);border-right:0}
/* the altars' Atlas: the map with the seven altars pinned, and what each prints */
.ldg-atl{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:12px 14px;min-height:0}
.ldg-atl-l,.ldg-atl-r{display:flex;flex-direction:column;gap:8px;min-height:0}
.ldg-atl-l{max-width:420px}
.ldg-atl-r{overflow:auto;scrollbar-width:thin}
.ldg-atl-map{position:relative;flex:none;margin:14px 0 8px;background:0 0/100% 100% no-repeat;box-shadow:inset 0 0 0 1px var(--k-card-line)}
.ldg-atl-map::before{content:"";position:absolute;inset:0;background:rgba(5,7,11,.45)}
.ldg-atl-pin{position:absolute;z-index:1;display:grid;place-items:center;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:#0a0e15;box-shadow:0 0 0 2px var(--el),0 2px 6px rgba(0,0,0,.6)}
.ldg-atl-pin.here{box-shadow:0 0 0 2px var(--el),0 0 0 6px var(--ldg-acc),0 0 16px 4px color-mix(in srgb,var(--el) 80%,transparent)}
.ldg-atl-ix{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;flex:none;padding:6px 10px;background:var(--k-card);box-shadow:inset 3px 0 0 var(--el),inset 0 0 0 1px var(--k-line)}
.ldg-atl-ix>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.ldg-atl-ix b{font:400 15px/1.2 var(--k-disp);letter-spacing:.03em;color:var(--k-ink)}
.ldg-atl-ix b small{margin-left:6px;font:400 13px Lora,Georgia,serif;letter-spacing:0;color:var(--k-ink3)}
.ldg-atl-ix span{font-size:13px;line-height:1.35;color:var(--k-ink2)}
.ldg-atl-ix em{font:700 13px Lora,Georgia,serif;font-style:normal;color:var(--k-ink3);white-space:nowrap}
.ldg-atl-ix.here{box-shadow:inset 3px 0 0 var(--el),inset 0 0 0 1px var(--ldg-acc)}
/* a custom tab (the anvil's Reforge, the Atlas, the Jewellery tree): the station draws the body itself */
.ldg-cust{flex:1;display:flex;flex-direction:column;min-height:0;overflow:auto}
@media (prefers-reduced-motion:reduce){.ldg *{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- Midnight: iron, night glass, moonlight */
html[data-ui-theme="midnight"] .ldg{--ldg-acc:var(--g-sel,#8fb4ff);--ldg-glow:var(--g-sel-glow,rgba(143,180,255,.42));--ldg-ember:var(--g-warn,#ffb070);--ldg-link:#a9c3ff;--ldg-on:rgba(143,180,255,.2);--ldg-on-ink:#f3f6fc}
html[data-ui-theme="midnight"] .ldg-xb>i,html[data-ui-theme="midnight"] .ldg-bar>i{background:linear-gradient(90deg,#4f7fd8,var(--mn-acc,#8fb4ff))}
html[data-ui-theme="midnight"] .ldg-r{background:#0f1522;box-shadow:inset 0 0 0 1px rgba(200,215,240,.14)}
html[data-ui-theme="midnight"] .ldg-r:hover{box-shadow:inset 0 0 0 1px rgba(143,180,255,.55)}
html[data-ui-theme="midnight"] .ldg-r.on{background:linear-gradient(90deg,rgba(143,180,255,.16),rgba(143,180,255,.05));box-shadow:inset 0 0 0 2px var(--mn-acc,#8fb4ff),0 0 12px rgba(143,180,255,.35)}
html[data-ui-theme="midnight"] .ldg-r.lock{background:rgba(8,11,18,.5)}
html[data-ui-theme="midnight"] .ldg .k-slot.ldg-s.lock{background:#0b1019}
html[data-ui-theme="midnight"] .ldg-sheet{background:linear-gradient(#1a2235,#121927);box-shadow:inset 0 0 0 1px rgba(143,180,255,.3),0 10px 24px rgba(0,0,0,.35)}
html[data-ui-theme="midnight"] .ldg-num{background:#0a0e15}
html[data-ui-theme="midnight"] .ldg-chip{background:#0a0e15}
html[data-ui-theme="midnight"] .ldg-foot{background:rgba(8,11,18,.45)}
html[data-ui-theme="midnight"] .ldg-warn{color:#ff9a8f;background:rgba(242,85,90,.1);box-shadow:inset 0 0 0 1px rgba(242,85,90,.5)}
html[data-ui-theme="midnight"] .ldg-in.short em,html[data-ui-theme="midnight"] .ldg-sh{color:#ff8f86}
html[data-ui-theme="midnight"] .ldg-tr{padding:0 12px}

/* ---------------------------------------------------------------- Tavern: smoked parchment, ink, verdigris the one action colour */
html[data-ui-theme="tavern"] .ldg{--ldg-acc:var(--g-sel,#2f8c7d);--ldg-glow:var(--g-sel-glow,rgba(47,140,125,.3));--ldg-ember:var(--g-warn,#8a3a08);--ldg-link:var(--tv-act-dk,#1d5e53);--ldg-on:var(--tv-ink,#1a120a);--ldg-on-ink:#f3e6c4}
html[data-ui-theme="tavern"] .ldg-r{background:rgba(255,246,220,.28);box-shadow:inset 0 0 0 1px var(--tv-card-line,#7e6844)}
html[data-ui-theme="tavern"] .ldg-r:hover{background:rgba(255,246,220,.45)}
html[data-ui-theme="tavern"] .ldg-r.on{background:rgba(255,246,220,.55);box-shadow:inset 0 0 0 2px var(--tv-act,#2f8c7d)}
html[data-ui-theme="tavern"] .ldg-r.lock{background:rgba(60,36,10,.07);box-shadow:inset 0 0 0 1px rgba(30,18,8,.25)}
html[data-ui-theme="tavern"] .ldg-c{color:var(--tv-good,#2b6e33)}
html[data-ui-theme="tavern"] .ldg-sheet{background:var(--tv-panel,rgba(60,36,10,.09));box-shadow:inset 0 0 0 1px var(--tv-card-line,#7e6844)}
html[data-ui-theme="tavern"] .ldg-num{background:var(--tv-field,#e8dab4)}
html[data-ui-theme="tavern"] .ldg-chip{background:rgba(255,246,220,.3)}
html[data-ui-theme="tavern"] .ldg-foot{background:rgba(60,36,10,.1)}
html[data-ui-theme="tavern"] .ldg-xb,html[data-ui-theme="tavern"] .ldg-bar{background:rgba(60,36,10,.18)}
html[data-ui-theme="tavern"] .ldg .k-slot.ldg-s.lock{background:rgba(60,36,10,.18)}
html[data-ui-theme="tavern"] .ldg-tr{padding:8px 12px 0}
/* the other looks (OG, Neon, Minimal) take the base and these */
html:not([data-ui-theme="midnight"]):not([data-ui-theme="tavern"]) .ldg{--ldg-acc:var(--k-gold,#c79a2c);--ldg-glow:rgba(199,154,44,.3);--ldg-ember:#c0561e;--ldg-link:var(--k-ink,#2a1c10);--ldg-on:var(--k-head,#3a2414);--ldg-on-ink:#f6e9cc}
/* Midnight's own slider (its diamond thumb and dark track, as every Midnight slider), with the fill up to the count */
html[data-ui-theme="midnight"] .ldg .ldg-sl::-webkit-slider-runnable-track{background:linear-gradient(90deg,#3e5f9e,#8fb4ff var(--p),#05070b var(--p))}

/* (2026-10-17, rules 479) THE WORK STRIP (eastscape-st-ledger.js): a small card over the bottom left of the world while a job runs with its window shut,
   and the walked-away / done notice. The shared grammar's tokens, so it is at home in both looks; placed by wsPlace just above the action bar (never over the chat, bottom left). */
.wstrip{position:absolute;left:calc(50% - 180px);bottom:110px;z-index:40;width:360px;max-width:calc(100% - 24px);display:grid;gap:6px;padding:10px 12px 11px;border-radius:6px;background:var(--g-card,#efe2c4);color:var(--k-ink,#2b2014);box-shadow:inset 0 0 0 1px var(--g-card-line,rgba(0,0,0,.25)),0 10px 24px rgba(0,0,0,.45);font:var(--k-f-small,600 13px/1.3 Lora,serif);pointer-events:auto}
.wstrip[hidden]{display:none}
.wstrip-h{display:flex;align-items:center;gap:8px;min-width:0}
.wstrip-h>b{flex:1;min-width:0;font:600 14px/1.25 var(--k-disp,Georgia),serif;overflow-wrap:anywhere}
.wstrip-i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:4px;background:var(--g-cell-lit,rgba(255,255,255,.5));box-shadow:inset 0 0 0 1px var(--g-cell-lit-line,rgba(0,0,0,.2))}
.wstrip-i :is(img,.ico){width:24px!important;height:24px!important;margin:0!important}
.wstrip .k-btn.sm{flex:none;min-height:28px;padding:0 10px;font-size:13px}
.wstrip-bar{height:8px;border-radius:4px;background:rgba(0,0,0,.25);overflow:hidden}
.wstrip-bar>i{display:block;height:100%;background:var(--g-sel,#3f8f7a);transition:width .45s linear}
.wstrip small{color:var(--k-ink2,#5a4630)}
.wstrip-bad{color:var(--g-bad,#9c2a1e)}.wstrip-good{color:var(--g-good,#2f6a35)}
.wstrip-x{flex:none;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.12);color:inherit;font:700 16px/26px Lora,serif;cursor:pointer}
@media (prefers-reduced-motion:reduce){.wstrip-bar>i{transition:none}}

/* (2026-10-19, dev, the owner's UI test) THE JOB'S XP on the work strip and in the window's work bar ("needs to show XP gains beside seconds left";
   "total XP gained, and how much till next level"): the xp is the skill's own, read off it (xpGot in the ledger). Both looks. */
.wstrip small b.wstrip-xp,.ldg-prog b.ldg-xpg{font-weight:700;color:var(--g-good,#2f6a35)}
html.look-mo .wstrip small b.wstrip-xp{color:#f0cf7c;font-variant-numeric:tabular-nums lining-nums}
html.look-mo .wstrip small [data-wsnext]{color:#9a7f6c}

/* (2026-10-19, dev, old-school look) "The world messages shouldn't show when the window on top ones show": the game's messages (#log, the lines
   over the chat: [admin] lines, the casino's) showed through the station window's inked edge; while a station window is up they wait under it */
html.look-mo .game:has(> #craftWin:not([hidden]), > #smithWin:not([hidden])) > #log{visibility:hidden}

/* (2026-10-19, dev, old-school look, the owner's UI test: "I can't tell any difference for failure") THE STAR TRACK'S OUTCOME IS THE WHOLE CARD
   (eastscape-st-anvil.js result(): .fa-out-miss / -broke / -win and the verdict line). A failure: the kit's danger red on the card's edge, the title,
   the verdict, and the star that cracked red and dim; destroyed: darker, the piece greyed (as before); landed: the kit's brass, the new star lit.
   Selectors out-weigh es-oldschool-win.css's star rules (loaded after this sheet). */
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-stage.fa-out{box-shadow:inset 0 0 0 2px var(--fo-c),inset 0 0 0 3px #120806!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-stage.fa-out-miss{--fo-c:#D16A57;background:linear-gradient(180deg,rgba(209,106,87,.16),rgba(209,106,87,0) 46%),#211617!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-stage.fa-out-broke{--fo-c:#D16A57;background:linear-gradient(180deg,rgba(120,20,22,.42),rgba(120,20,22,.08) 60%),#191112!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-stage.fa-out-win{--fo-c:#d6a54e;background:linear-gradient(180deg,rgba(214,165,78,.18),rgba(214,165,78,0) 50%),#211617!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out .fa-res b{font:700 28px/1.1 "Trebuchet MS","Segoe UI",Tahoma,sans-serif!important;letter-spacing:.22em;text-shadow:0 2px 0 #120806!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out:is(.fa-out-miss,.fa-out-broke) .fa-res b{color:#D16A57!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out-win .fa-res b{color:#f0cf7c!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out .fa-res small{color:#ecdcc6!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-verdict{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto;padding:7px 16px;border:1px solid var(--fo-c);font:13px/1.35 "Trebuchet MS","Segoe UI",Tahoma,sans-serif;color:#ecdcc6}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-verdict b{font-weight:700;text-transform:uppercase;letter-spacing:.08em}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-verdict.bad{background:#3d1517;color:#ecdcc6}html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-verdict.bad b{color:#D16A57}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-verdict.good{background:linear-gradient(#d6a54e,#a87a2c);border-color:#f0cf7c;color:#2a1606}html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-verdict.good b{color:#2a1606}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out .fa-star.crack{background:linear-gradient(135deg,#3a1d1d 0 43%,#D16A57 43% 49%,#120806 49% 53%,#D16A57 53% 58%,#3a1d1d 58%)!important;opacity:.7}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out-win .fa-star.burst{background:radial-gradient(circle at 50% 40%,#fffbe8 0 16%,#f0cf7c 36%,#d6a54e 66%,#a87a2c)!important;filter:drop-shadow(0 0 9px rgba(240,207,124,.9))!important;animation:fa-burst-os 1.6s ease-in-out infinite}
@keyframes fa-burst-os{50%{filter:brightness(1.25) drop-shadow(0 0 12px rgba(240,207,124,.95))}}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out-win .fa-hero>.fa-hi.fa-glowwin{background:radial-gradient(circle,rgba(240,207,124,.3),transparent 66%)!important}
html.look-mo #smithWin [data-stm="anvil"] > .ra-fh .fa-out:is(.fa-out-miss,.fa-out-broke) .fa-next{box-shadow:inset 3px 0 0 #D16A57,inset 0 0 0 1px rgba(209,106,87,.4)!important}
@media (prefers-reduced-motion:reduce){html.look-mo #smithWin .fa-out-win .fa-star.burst{animation:none}}
/* (2026-10-19) the work strip drags by its head (wsDrag in eastscape-st-ledger.js); a double-click there puts it back */
.wstrip .wstrip-h{cursor:move}.wstrip .wstrip-h button{cursor:pointer}.wstrip.ws-moving{transition:none!important;opacity:.92}
