/* ═══════════════════════════════════════════════════════════════════════════
   TERMINAL SKIN (1.11.9.15): header wordmark, End of Day clock, Companies list,
   News wire. The vocabulary the newer windows settled on (god console, Ledger,
   Decoder): small letter-spaced labels, thin low-alpha borders, cards with
   8px radius, glow kept for the one thing that is live, tabular digits.

   Every colour goes through the theme tokens (--amber, --green, --pale,
   --panel-edge...), so the Jade and Red themes re-skin all of this for free.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Exchange board (1.11.9.26) ────────────────────────────────────────────
   The title and the End of Day clock are one LED board: the name, the close
   countdown with its drain bar, the passive income line, and a tape of the
   day's movers (header-board.js fills and scrolls it). Replaces the type
   wordmark and the separate clock card. The clock keeps its ids (#eodCard,
   #eod-timer, #eodBarFill, #passiveIncomeEOD) because index.html's countdown,
   core.js and mobile.js write to them by id.

   Doto is a dot-matrix face, shipped locally (OFL, fonts/doto-OFL.txt). At 700
   the dots stay separate at header size; heavier weights merge into strokes.
   Every colour is a theme token, so Red and Jade re-skin it. */
@font-face{font-family:'Doto';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/doto-700.woff2) format('woff2')}
.fmb{--fmb-lit:var(--amber);--fmb-glass:color-mix(in srgb,var(--bg) 60%,#000);
  position:relative;padding:4px 5px;border-radius:6px;user-select:none;flex:0 0 auto;
  background:linear-gradient(180deg,#161a16,#070907);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55)}
:root.red-theme .fmb{background:linear-gradient(180deg,#1c1313,#0b0606)}
:root.jade-theme .fmb{background:linear-gradient(180deg,#132019,#06100b)}
/* Two rivets in one pseudo-element: ::after is the urgent glow. */
.fmb::before{content:'';position:absolute;left:2px;right:2px;top:2px;height:3px;pointer-events:none;
  background:radial-gradient(circle,#2a2f2a 1.3px,transparent 1.5px) left center/3px 3px no-repeat,radial-gradient(circle,#2a2f2a 1.3px,transparent 1.5px) right center/3px 3px no-repeat}
.fmb-scr{display:flex;flex-direction:column;border-radius:3px;overflow:hidden;background-color:var(--fmb-glass);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--amber) 7%,transparent) .7px,transparent 1.1px);background-size:3px 3px;box-shadow:inset 0 0 10px #000}
.fmb-top{display:flex;align-items:center;gap:11px;padding:4px 10px 3px}
.fmb-name,.fmb-cn{font-family:'Doto','Share Tech Mono',ui-monospace,monospace;font-weight:700;font-size:29px;line-height:1;letter-spacing:.05em;white-space:nowrap;display:flex;gap:.45em}
.fmb-a{color:var(--amber);text-shadow:0 0 3px var(--amber),0 0 10px color-mix(in srgb,var(--amber) 55%,transparent)}
.fmb-b{color:var(--pale);text-shadow:0 0 3px var(--pale),0 0 10px color-mix(in srgb,var(--pale) 40%,transparent)}
/* Jade: the Chinese name. Doto has no CJK, so the glyphs are cut into dots
   with a mask; the grid does not line up with the strokes, which is what an
   LED board showing a font it was not built for looks like anyway. */
.fmb-cn{display:none;font-family:'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;font-weight:900;letter-spacing:.12em;color:var(--pale);
  -webkit-mask-image:radial-gradient(circle,#000 .95px,transparent 1.25px);mask-image:radial-gradient(circle,#000 .95px,transparent 1.25px);-webkit-mask-size:3px 3px;mask-size:3px 3px;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--pale) 70%,transparent))}
:root.jade-theme .fmb-name{display:none}
:root.jade-theme .fmb-cn{display:flex}
.fmb-sep{align-self:stretch;width:1px;background:color-mix(in srgb,var(--amber) 18%,transparent)}
.fmb-clk{display:flex;flex-direction:column;gap:1px;white-space:nowrap;min-width:64px}
.fmb-lbl{display:flex;align-items:center;gap:4px;font-family:'Doto','Share Tech Mono',monospace;font-weight:700;font-size:8.5px;line-height:1;letter-spacing:.1em;color:var(--amber);opacity:.8;text-transform:uppercase}
.fmb .eod-live{width:4px;height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 4px var(--green);animation:eodBlink 2s ease-in-out infinite;flex:0 0 auto}
/* Overrides eod-timer.css, which still styles a free-standing #eod-timer. */
#eodCard #eod-timer{font-family:'Doto','Share Tech Mono',monospace;font-weight:700;font-size:21px;line-height:1;letter-spacing:.06em;padding:0;min-width:0;border:0;background:none;border-radius:0;
  animation:none;box-shadow:none;text-align:left;font-variant-numeric:tabular-nums;color:var(--green);text-shadow:0 0 3px var(--green),0 0 10px color-mix(in srgb,var(--green) 50%,transparent)}
#eodCard #passiveIncomeEOD{font-family:'Doto','Share Tech Mono',monospace;font-weight:700;font-size:8px!important;line-height:1;letter-spacing:.08em;color:var(--amber)!important;opacity:.75}
.fmb-rule{height:1px;background:color-mix(in srgb,var(--amber) 12%,transparent);margin:0 6px}
/* width:0 + min-width:100%: the tape takes the board's width instead of setting it. */
.fmb-tape{width:0;min-width:100%;box-sizing:border-box;overflow:hidden;padding:2px 0 3px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fmb-run{display:flex;width:max-content;will-change:transform;animation:fmbTape var(--fmb-dur,40s) linear infinite}
.fmb-run>div{display:flex;gap:14px;padding-right:14px;font-family:'Doto','Share Tech Mono',monospace;font-weight:700;font-size:9.5px;line-height:1;letter-spacing:.06em;white-space:nowrap}
.fmb-run span{color:var(--amber);text-shadow:0 0 3px color-mix(in srgb,var(--amber) 60%,transparent)}
.fmb-run span.up{color:var(--good,#9bffba);text-shadow:0 0 3px color-mix(in srgb,var(--good,#9bffba) 60%,transparent)}
.fmb-run span.dn{color:var(--bad,#ff6a6a);text-shadow:0 0 3px color-mix(in srgb,var(--bad,#ff6a6a) 60%,transparent)}
.fmb-tape:hover .fmb-run{animation-play-state:paused}
@keyframes fmbTape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* The drain bar: scaleX, never width (1.11.9.21). */
#eodCard .eod-bar{width:0;min-width:100%;height:2px;background:color-mix(in srgb,var(--green) 12%,transparent);overflow:hidden;border-radius:0}
#eodCard .eod-bar i{display:block;height:100%;width:100%;background:var(--green);box-shadow:0 0 5px var(--green);transform-origin:left center;transform:scaleX(0);transition:transform 1s linear;will-change:transform}
/* Last three minutes: the clock, its light and the bar go red, and the board
   rim pulses. Opacity on a fixed glow, not an animated shadow (1.11.9.21). */
#eodCard.urgent #eod-timer{color:#ff5a5a;text-shadow:0 0 3px #ff4444,0 0 12px rgba(255,40,40,.5)}
#eodCard.urgent .eod-bar i,#eodCard.urgent .eod-live{background:#ff5a5a;box-shadow:0 0 5px #ff5a5a}
#eodCard.urgent::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 16px rgba(255,60,60,.4);pointer-events:none;opacity:0;animation:eodUrgent .9s ease-in-out infinite}
/* Narrower desktop windows: the name stacks, the board keeps the clock. */
@media (max-width:1180px){.fmb-name{flex-direction:column;gap:2px;font-size:21px;line-height:.95}.fmb-cn{font-size:22px}}
@media (prefers-reduced-motion:reduce){.fmb-run{animation:none}.fmb .eod-live{animation:none}}
@keyframes eodBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes eodUrgent{0%,100%{opacity:0}50%{opacity:1}}

/* ── Section headers (Companies, News) ─────────────────────────────────── */
.fm-sec{display:flex;align-items:center;gap:8px;margin:.15rem 0 .55rem}
.fm-sec-t{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.26em;color:var(--amber);text-shadow:0 0 6px color-mix(in srgb,var(--amber) 40%,transparent);white-space:nowrap}
.fm-sec-rule{flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 45%,transparent),transparent)}
.fm-sec-meta{font-size:.6rem;letter-spacing:.14em;color:var(--muted);opacity:.7;white-space:nowrap;display:flex;align-items:center;gap:5px}
.fm-sec-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:eodBlink 2s ease-in-out infinite}

/* ── Companies list ────────────────────────────────────────────────────────
   Rows are a named grid, so whatever gets appended (the watchlist star is
   inserted by market-tools.js before the last child) lands in its own area
   instead of pushing the price onto the next line, where it read as the NEXT
   company's price. */
#tickers{padding-right:2px}
#tickers .ticker.tk{display:grid;grid-template-columns:36px minmax(0,1fr) 46px auto 14px;grid-template-areas:"sym name spark px star" "lore lore lore lore lore";
  align-items:center;column-gap:7px;row-gap:0;padding:6px 5px 6px 8px;margin:0 0 2px;border:1px solid transparent;border-radius:6px;transition:background .15s,border-color .15s}
#tickers .ticker.tk:hover{background:color-mix(in srgb,var(--green) 5%,transparent);border-color:color-mix(in srgb,var(--green) 14%,transparent)}
#tickers .tk .sym{grid-area:sym;font-size:.74rem;letter-spacing:.06em}
#tickers .tk .tk-name{grid-area:name;color:var(--pale);opacity:.82;font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tickers .tk .tk-spark{grid-area:spark;width:46px;height:18px;display:block;opacity:.85}
#tickers .tk .tk-px{grid-area:px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-variant-numeric:tabular-nums}
#tickers .tk .px{font-size:.78rem;color:var(--pale);padding:0 3px;border-radius:3px}
#tickers .tk .tk-pct{font-size:.6rem;letter-spacing:.02em}
#tickers .tk .tk-pct.up{color:#86ff6a}#tickers .tk .tk-pct.dn{color:#ff6b6b}#tickers .tk .tk-pct.fl{color:var(--muted);opacity:.6}
#tickers .tk .wl-star{grid-area:star;justify-self:end;padding:0!important}
#tickers .tk .tk-lore{grid-area:lore;font-size:.72rem;color:var(--pale);line-height:1.55;margin-top:6px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--pale) 10%,transparent);opacity:.9}
#tickers .tk.active{background:color-mix(in srgb,var(--green) 8%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent);box-shadow:inset 3px 0 0 var(--green)}
#tickers .tk.active .px{font-size:.95rem;font-weight:700;color:var(--pale)}
#tickers .tk.active .tk-name{opacity:1}
/* 1.11.9.144: the market directory reads bigger on desktop, in two lines (Jacob's pick, C on the
   Market List Type board). Line one: symbol, sparkline, price. Line two: the full name and the
   change. The name gets the width the sparkline used to take, so it is no longer cut to a few
   letters at 1280, and every size goes up (change 9.6 to 11.8 px, description 11.5 to 13.8).
   Rows are about a third taller. The .tk-px box stays in the markup for market-tools.js and the
   price flash; display:contents lets its two children take their own grid areas. Phones keep
   their own list (mobile-deck.css). */
body:not(.fm-mobile) #tickers .ticker.tk{grid-template-columns:minmax(0,1fr) 54px auto 14px;grid-template-areas:"sym spark px star" "name name pct star" "lore lore lore lore";row-gap:1px;column-gap:9px;padding:7px 6px 7px 10px}
body:not(.fm-mobile) #tickers .tk .tk-px{display:contents}
body:not(.fm-mobile) #tickers .tk .px{grid-area:px;justify-self:end;font-size:.98rem}
body:not(.fm-mobile) #tickers .tk .tk-pct{grid-area:pct;justify-self:end;font-size:.74rem;padding:0 3px}
body:not(.fm-mobile) #tickers .tk .sym{font-size:.92rem;font-weight:700}
body:not(.fm-mobile) #tickers .tk .tk-name{font-size:.82rem;opacity:.72}
body:not(.fm-mobile) #tickers .tk .tk-spark{width:54px;height:20px;justify-self:end}
body:not(.fm-mobile) #tickers .tk .tk-lore{font-size:.86rem;line-height:1.6}
body:not(.fm-mobile) #tickers .tk.active .px{font-size:1.1rem}
body:not(.fm-mobile) #tickers .tk.active .tk-name{opacity:1}
/* PRICE FLASH ON THE COMPOSITOR (1.11.9.21). It animated the price's colour
   and background, which restyled every flashing price on every frame. With
   Chrome's accessibility tree active (a screen reader, many extensions, some
   Windows features) each restyle queued an accessibility record, and a heap
   capture showed 3.8 million of them, 173 MB, accumulated in six minutes, 80%
   on these spans. Now a tinted overlay behind the digits fades out by opacity,
   which the compositor animates without restyling the page. */
#tickers .tk .px{position:relative;isolation:isolate}
#tickers .tk .px::before{content:'';position:absolute;inset:0;border-radius:3px;opacity:0;pointer-events:none;z-index:-1}
#tickers .tk.flash-up .px::before,#tickers .tk.flash-up-b .px::before{background:rgba(80,255,140,.35)}
#tickers .tk.flash-dn .px::before,#tickers .tk.flash-dn-b .px::before{background:rgba(255,80,80,.35)}
#tickers .tk.flash-up .px::before,#tickers .tk.flash-dn .px::before{animation:tkFlash .8s ease-out}
#tickers .tk.flash-up-b .px::before,#tickers .tk.flash-dn-b .px::before{animation:tkFlash2 .8s ease-out}
@keyframes tkFlash{0%{opacity:1}100%{opacity:0}}
@keyframes tkFlash2{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#tickers .tk .px::before{animation:none!important}}
body.fm-mobile #tickers .ticker.tk{grid-template-columns:38px minmax(0,1fr) 44px auto 18px;min-height:40px}
body.fm-mobile #tickers .tk .tk-spark{width:44px}

/* ── News wire ─────────────────────────────────────────────────────────── */
#news .news-line{border-radius:0 6px 6px 0;margin-bottom:3px;padding:6px 9px 7px 10px}
#news .news-line .n-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px}
#news .news-line .n-time{font-size:.62rem;letter-spacing:.08em;opacity:.55;font-variant-numeric:tabular-nums}
#news .news-line .n-badge{font-size:.55rem;letter-spacing:.14em;padding:1px 6px;border-radius:8px;border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);color:var(--amber);background:none}
#news .news-line .n-head{font-size:.8rem;line-height:1.45}
#news .news-line.fresh{animation:nwFresh 1.6s ease-out}
@keyframes nwFresh{0%{background:color-mix(in srgb,var(--green) 16%,transparent)}100%{}}

/* ── Shipping console (1.11.9.18) ─────────────────────────────────────────────
   The Markets and Stribor Net shipping panels: status strip, departures board,
   ship/run console with a live quote, and the warehouse fold. Built from the
   theme tokens so the Jade and Red themes re-skin it; .fsh.red pins the Net's
   own palette, which is red under every theme because the Net is the Net. */
.fsh{--fa:var(--green);--fp:var(--pale);--fm:var(--muted);--fw:var(--amber);--fe:color-mix(in srgb,var(--green) 26%,transparent);--fl:color-mix(in srgb,var(--green) 13%,transparent);--fb:var(--panel-bg,rgba(9,32,17,.5));--fi:var(--input-bg,#010401);--fk:#02140a;display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.fsh.red{--fa:#e04a4a;--fp:#ffc9c9;--fm:#e09a9a;--fw:#f0a454;--fe:#5a1d1d;--fl:#3a0f0f;--fb:rgba(44,12,12,.5);--fi:#0a0202;--fk:#1a0404}
.fsh-card{background:var(--fb);border:1px solid var(--fe);border-radius:8px;min-width:0}
.fsh-sec{display:flex;align-items:center;gap:10px}
.fsh-sec-t{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:.8rem;letter-spacing:.26em;color:var(--fw);text-transform:uppercase;white-space:nowrap}
.fsh-sec-r{flex:1;height:1px;background:color-mix(in srgb,var(--fw) 28%,transparent)}
.fsh-head{display:flex;flex-direction:column;gap:4px}
.fsh-head-t{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:1.15rem;letter-spacing:.22em;color:var(--fa);text-transform:uppercase}
.fsh-head-b{font-size:.76rem;color:var(--fm);opacity:.8;line-height:1.55}
.fsh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fsh-stat{padding:9px 14px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--fl);min-width:0}
.fsh-stat:last-child{border-right:0}
.fsh-k{font-size:.6rem;letter-spacing:.16em;color:var(--fm);opacity:.8;text-transform:uppercase}
.fsh-v{font-size:1.05rem;color:var(--fp);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsh-v small{font-size:.68rem;opacity:.6}
.fsh-v.warm{color:var(--fw)}
.fsh-v .bad,.fsh-bad{color:#ff6b6b}
.fsh-bar{height:3px;background:var(--fl);border-radius:2px;margin-top:4px;overflow:hidden}
.fsh-bar i{display:block;height:100%;background:var(--fa)}
.fsh-bar i.warn{background:var(--fw)}.fsh-bar i.full{background:#ff6b6b}
.fsh-hold{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 14px;font-size:.78rem;color:var(--fp);border-top:1px solid var(--fl);align-items:center}
.fsh-hold img{max-width:26px;max-height:22px;vertical-align:middle;margin-right:5px;image-rendering:pixelated}
.fsh-hold .at{color:var(--fw)}.fsh-hold .dim{opacity:.5}
.fsh-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 180px 86px 56px;align-items:center;font-size:.76rem;color:var(--fp)}
.fsh-row>*{padding:7px 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsh-row+.fsh-row{border-top:1px solid var(--fl)}
.fsh-th{font-size:.6rem;letter-spacing:.16em;color:var(--fm);background:color-mix(in srgb,var(--fa) 6%,transparent)}
.fsh-r{text-align:right;font-variant-numeric:tabular-nums}
.fsh-eta{color:var(--fw);font-weight:700}
.fsh-pips{display:flex;gap:3px}
.fsh-pips i{flex:1;height:3px;border-radius:1px;background:var(--fl)}
.fsh-pips i.done{background:var(--fa)}.fsh-pips i.on{background:var(--fw);box-shadow:0 0 5px var(--fw)}.fsh-pips i.lost{background:#ff6b6b}
.fsh-stg{display:flex;flex-direction:column;gap:4px}
.fsh-ph{font-size:.62rem;letter-spacing:.08em;color:var(--fw);text-transform:uppercase}
.fsh-ph.lost{color:#ff6b6b}
.fsh-empty{padding:10px 12px;font-size:.76rem;color:var(--fm);opacity:.65}
.fsh-con{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.fsh-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.fsh-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.fsh-pair{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}
.fsh-ft{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:8px;align-items:end}
.fsh-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.fsh-l{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fm);opacity:.85}
.fsh-in{background:var(--fi);border:1px solid var(--fl);border-radius:5px;color:var(--fp);font-family:inherit;font-size:.82rem;padding:0 10px;height:36px;box-sizing:border-box;width:100%;min-width:0}
.fsh-in:focus{outline:none;border-color:var(--fa)}
.fsh-swap{height:36px;background:var(--fi);border:1px solid var(--fl);border-radius:5px;color:var(--fm);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.fsh-swap:hover,.fsh-swap:focus-visible{color:var(--fa);border-color:var(--fa)}
.fsh-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--fl);border-radius:5px;overflow:hidden}
.fsh-seg button{background:var(--fi);border:0;border-right:1px solid var(--fl);color:var(--fm);font-family:inherit;font-size:.72rem;padding:6px 4px;display:flex;flex-direction:column;gap:2px;align-items:center;cursor:pointer;min-width:0}
.fsh-seg button:last-child{border-right:0}
.fsh-seg button small{font-size:.6rem;opacity:.75;white-space:nowrap}
.fsh-seg button.on{background:color-mix(in srgb,var(--fa) 14%,transparent);color:var(--fa);box-shadow:inset 0 -2px 0 var(--fa)}
.fsh-seg button:focus-visible{outline:1px solid var(--fa);outline-offset:-2px}
.fsh-chk{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--fp);cursor:pointer}
.fsh-chk input{accent-color:var(--fw);width:16px;height:16px;margin:0}
.fsh-quote{background:var(--fi);border:1px solid var(--fl);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.fsh-qt{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fw)}
.fsh-qbody{display:flex;flex-direction:column;gap:12px;font-size:.78rem;color:var(--fm);min-height:84px;line-height:1.5}
.fsh-qrows{display:flex;flex-direction:column}
.fsh-qrow{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--fl);font-size:.76rem}
.fsh-qrow>span:first-child{opacity:.75}
.fsh-qrow>span:last-child{color:var(--fp);font-variant-numeric:tabular-nums;text-align:right}
.fsh-rl{display:flex;align-items:center;padding:0 2px}
.fsh-rl b{flex:1;height:2px;background:var(--fe)}
.fsh-rl i{flex:0 0 auto;width:10px;height:10px;border-radius:50%;box-sizing:border-box}
.fsh-rl i.s{background:var(--fa)}.fsh-rl i.e{border:2px solid var(--fa)}
.fsh-rl i.h{width:9px;height:9px;border-radius:1px;transform:rotate(45deg);border:1.6px solid var(--fw)}
.fsh.red .fsh-rl b{background:repeating-linear-gradient(90deg,var(--fe) 0 6px,transparent 6px 10px)}
.fsh-rn{display:flex;gap:6px;font-size:.66rem;color:var(--fp);margin-top:4px}
.fsh-rn span{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsh-rn span:first-child{text-align:left}.fsh-rn span:last-child{text-align:right}
.fsh-rn span.h{color:var(--fw)}
.fsh-rh{display:flex;justify-content:space-between;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.fsh-rh b{font-size:.78rem;letter-spacing:0}
.fsh-meter{height:6px;border-radius:3px;background:var(--fl);overflow:hidden;margin-top:6px}
.fsh-meter i{display:block;height:100%}
.fsh-note{font-size:.66rem;opacity:.65;margin-top:5px}
.fsh-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--fl);padding-top:12px}
.fsh-due{display:flex;flex-direction:column;min-width:0}
.fsh-due b{font-size:1.1rem;color:var(--fw);font-variant-numeric:tabular-nums}
.fsh-go{height:44px;padding:0 26px;background:var(--fa);color:var(--fk);border:0;border-radius:5px;font-family:inherit;font-weight:700;font-size:.86rem;letter-spacing:.16em;cursor:pointer;text-shadow:none;flex:0 0 auto}
.fsh-go:hover{filter:brightness(1.12)}.fsh-go:focus-visible{outline:2px solid var(--fp);outline-offset:2px}
.fsh-hint{font-size:.74rem;min-height:14px;color:var(--fm)}
.fsh-btn{background:transparent;border:1px solid var(--fe);color:var(--fm);font-family:inherit;font-size:.64rem;letter-spacing:.12em;padding:3px 10px;border-radius:4px;cursor:pointer}
.fsh-btn:hover{color:var(--fa);border-color:var(--fa)}
.fsh-wh>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;list-style:none}
.fsh-wh>summary::-webkit-details-marker{display:none}
.fsh-wh>summary .fsh-sum{font-size:.72rem;color:var(--fm);opacity:.8;text-align:right}
.fsh-wh>summary .fsh-sum::after{content:' \203A';display:inline-block;transition:transform .15s}
.fsh-wh[open]>summary .fsh-sum::after{transform:rotate(90deg)}
.fsh-wh[open]>summary{border-bottom:1px solid var(--fl)}
.fsh-whb{padding:10px 14px;overflow-x:auto}
.fsh-barred{border:1px solid #4ecdc4;background:#06181a;border-radius:8px;padding:10px 14px}
@media (max-width:760px){.fsh-grid{grid-template-columns:1fr}.fsh-row{grid-template-columns:minmax(0,1fr) 130px 80px}.fsh-row>.fsh-dst,.fsh-row>.fsh-rk{display:none}}
@media (prefers-reduced-motion:reduce){.fsh-wh>summary .fsh-sum::after{transition:none}}

/* ── Options Desk (1.11.9.24) ─────────────────────────────────────────────────
   The desk in the shipping console's vocabulary: it sits inside .fsh and reuses
   its cards, stats, segmented buttons, quote panel and pips, so the Jade and Red
   themes re-skin it. Only what the console has no shape for is added here: the
   board and position grids, 2/3/9-wide segments, call and put colouring. */
.fopt{--fg:var(--good,#9bffba);--fr:var(--bad,#ff6a6a)}
.fopt-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.fopt-col{min-width:220px}
.fopt-sub{font-size:.68rem;color:var(--fm);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fopt .fsh-sec-t{flex:0 0 auto}
.fopt-up{color:var(--fg)}.fopt-dn{color:var(--fr)}.fopt-flat{color:var(--fm)}
.fopt-w{color:var(--fw)}.fopt-dim{opacity:.55}.fopt-at{color:var(--fw);opacity:.85}
.fopt small{font-size:.68rem}
.fopt-brd,.fopt-pos{overflow:hidden}
.fopt-r{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);align-items:center;width:100%;
  background:transparent;border:0;border-top:1px solid var(--fl);color:var(--fp);font-family:inherit;font-size:.78rem;text-align:left;padding:0;min-height:36px;cursor:pointer;font-variant-numeric:tabular-nums}
.fopt-r.fsh-th{cursor:default;min-height:0;border-top:0;font-size:.6rem;letter-spacing:.16em;color:var(--fm);text-transform:uppercase}
.fopt-r>span{padding:7px 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fopt-r:not(.fsh-th):hover{background:color-mix(in srgb,var(--fa) 6%,transparent)}
.fopt-r:focus-visible{outline:1px solid var(--fa);outline-offset:-2px}
.fopt-r.sel{background:color-mix(in srgb,var(--fw) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fw) 45%,transparent)}
.fopt-r.sel .fopt-n{color:var(--fw)}
.fopt-n img{max-width:18px;max-height:18px;vertical-align:middle;margin-right:6px;image-rendering:pixelated}
.fopt .fsh-seg.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fopt .fsh-seg.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fopt .fsh-seg.s9{grid-template-columns:repeat(9,minmax(0,1fr))}
.fopt .fsh-seg button{min-height:40px;justify-content:center}
.fopt .fsh-seg.s2 button{min-height:48px;font-size:.8rem;letter-spacing:.1em}
.fopt .fsh-seg.s2 button small{letter-spacing:0;white-space:normal;text-align:center}
.fopt .fsh-seg.s9 button{padding:6px 1px;font-size:.72rem}
.fopt .fsh-seg.s9 button small{font-size:.56rem}
.fopt .fsh-seg button.at:not(.on){color:var(--fw);background:color-mix(in srgb,var(--fw) 8%,transparent)}
.fopt .fsh-seg button.call.on{color:var(--fg);background:color-mix(in srgb,var(--fg) 12%,transparent);box-shadow:inset 0 -2px 0 var(--fg)}
.fopt .fsh-seg button.put.on{color:var(--fr);background:color-mix(in srgb,var(--fr) 12%,transparent);box-shadow:inset 0 -2px 0 var(--fr)}
.fopt-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.fopt-units{display:flex;gap:4px}
.fopt-units .fsh-in{width:84px;flex:0 0 auto}
.fopt-units .fsh-btn{flex:1;height:36px;font-size:.7rem}
.fopt-qh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fopt .fsh-go.put{background:var(--fr)}
.fopt .fsh-go:disabled{opacity:.35;cursor:default;filter:none}
.fopt-p{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);align-items:center;
  font-size:.78rem;color:var(--fp);border-top:1px solid var(--fl);font-variant-numeric:tabular-nums}
.fopt-p.fsh-th{border-top:0;font-size:.6rem;letter-spacing:.16em;color:var(--fm);text-transform:uppercase}
.fopt-p>span{padding:7px 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fopt-p .fsh-pips i{min-width:12px;height:4px}
.fopt-note{padding:6px 12px;font-size:.66rem;color:var(--fm);opacity:.65;border-top:1px solid var(--fl)}
.fopt-set{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;padding:8px 12px;border-top:1px solid var(--fl);font-size:.72rem;color:var(--fm);background:color-mix(in srgb,var(--fa) 3%,transparent)}
.fopt-set b{font-weight:400}
.fopt-leg{display:flex;align-items:center;gap:12px;padding:7px 12px;font-size:.76rem;color:var(--fp);border-top:1px solid var(--fl);flex-wrap:wrap}
.fopt-leg>span:first-child{flex:1;min-width:0}
.fopt-leg:first-child{border-top:0}
.fopt-how{padding:12px 16px;font-size:.74rem;line-height:1.7;color:var(--fm)}
@media (max-width:760px){
  .fopt-r{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr)}
  .fopt-r>.fopt-tr{display:none}
  .fopt .fsh-seg.s9{grid-template-columns:repeat(5,minmax(0,1fr))}
  .fopt-pair{grid-template-columns:1fr}
  .fopt-p{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.8fr)}
  .fopt-p>.fopt-hx{display:none}
  .fopt-sub{display:none}
}
@media (max-width:520px){
  .fopt-r{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr)}
  .fopt-r>.fopt-mx{display:none}
  .fopt-p{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,.8fr)}
  .fopt-p>.fopt-sx,.fopt-p>.fopt-px{display:none}
}

/* ── Support (1.11.9.25) ──────────────────────────────────────────────────────
   The Bugs tab in the console vocabulary: .fsh cards, stats, segments, inputs
   and the go button. Added here only what the console has no shape for: the
   board rows with a vote column, category tags, and the admin strip. */
.fsup{--fx:var(--bad,#ff6a6a)}
.fsup .fsh-seg button{min-height:38px;justify-content:center;font-size:.74rem;letter-spacing:.06em}
.fsup-tabs button{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}
.fsup-cats button.fsup-x.on{color:var(--fx);background:color-mix(in srgb,var(--fx) 12%,transparent);box-shadow:inset 0 -2px 0 var(--fx)}
.fsup-hint{font-size:.74rem;color:var(--fm);opacity:.85;line-height:1.5}
.fsup-hint.warn{color:var(--fx);opacity:1}
.fsup-ta{height:auto;min-height:96px;padding:9px 10px;line-height:1.5;resize:vertical}
.fsup-att{font-size:.68rem;color:var(--fm);opacity:.8;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsup-cnt{font-size:.66rem;color:var(--fm);opacity:.6;margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums}
.fsup .fsh-go:disabled{opacity:.4;cursor:default;filter:none}
.fsup .fsh-hint.fsup-ok{color:var(--good,#9bffba)}
.fsup .fsh-hint.fsup-bad{color:var(--fx)}
.fsup-bar{display:flex;gap:10px;align-items:center;padding:10px 12px;flex-wrap:wrap}
.fsup-bar .fsh-in{flex:1 1 200px}
.fsup-bar .fsh-seg button{min-height:34px}
.fsup-dup{padding:0 12px 8px;font-size:.66rem;color:var(--fm);opacity:.6}
.fsup-row{display:flex;gap:12px;padding:10px 12px;border-top:1px solid var(--fl);align-items:flex-start}
.fsup-row.done .fsup-text{opacity:.6}
.fsup-vote{flex:0 0 48px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0;background:var(--fi);
  border:1px solid var(--fl);border-radius:5px;color:var(--fm);font-family:inherit;cursor:pointer}
.fsup-vote span{font-size:.6rem;line-height:1}
.fsup-vote b{font-size:.9rem;font-weight:400;font-variant-numeric:tabular-nums;color:var(--fp)}
.fsup-vote:hover,.fsup-vote:focus-visible{border-color:var(--fa);color:var(--fa);outline:none}
.fsup-vote.on{border-color:var(--fa);color:var(--fa);background:color-mix(in srgb,var(--fa) 12%,transparent)}
.fsup-vote.on b{color:var(--fa)}
.fsup-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.fsup-tags{display:flex;gap:6px;flex-wrap:wrap}
.fsup-tag{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;padding:1px 7px;border-radius:3px;border:1px solid var(--fe);color:var(--fm)}
.fsup-tag.c-bug{color:var(--fa);border-color:color-mix(in srgb,var(--fa) 40%,transparent)}
.fsup-tag.c-display,.fsup-tag.c-performance{color:var(--fw);border-color:color-mix(in srgb,var(--fw) 40%,transparent)}
.fsup-tag.c-exploit{color:var(--fx);border-color:color-mix(in srgb,var(--fx) 45%,transparent)}
.fsup-tag.c-suggestion{color:var(--fp);border-color:color-mix(in srgb,var(--fp) 30%,transparent)}
.fsup-tag.c-fixed{color:var(--good,#9bffba);border-color:color-mix(in srgb,var(--good,#9bffba) 45%,transparent)}
.fsup-text{font-size:.8rem;color:var(--fp);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.fsup-by{font-size:.66rem;color:var(--fm);opacity:.7}
.fsup-note{color:var(--good,#9bffba);opacity:1}
.fsup-adm{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.fsup-adm .fsh-in{flex:1 1 180px;height:28px;font-size:.74rem}
.fsup-adm .fsh-btn{height:26px}
.fsup-adm .fsup-del:hover{color:var(--fx);border-color:var(--fx)}
.fsup-meta{font-size:.62rem;color:var(--fm);opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:620px){
  .fsup-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .fsup-cats button{border-bottom:1px solid var(--fl)}
  .fsup-bar .fsh-seg{flex:1 1 100%!important}
  .fsup .fsh-foot{flex-wrap:wrap}
  .fsup-att{white-space:normal}
}