/* Lane SH: scenarios, New ADP, market data, vessels, team, share, sign in (class prefix .sh-) */
.sh-page-h { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.sh-page-h > div:first-child { flex: 1 1 320px; min-width: 0; }
.sh-page-h .xm-acts { margin-left: auto; }
.sh-list { display: flex; flex-direction: column; gap: 16px; }
.sh-scen { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); padding: 20px 24px; }
.sh-scen:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); }
.sh-scen:hover .sh-open { color: var(--acc-tx); transform: translateX(2px); }
.sh-scen-h { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.sh-scen-t { flex: 1; min-width: 0; }
.sh-scen h2 { margin: 0 0 8px; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-label); }
.sh-sval { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sh-sval b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.sh-sval b small { font-size: var(--fs-label); font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
/* JUDGE FIX round 2 (SH-01, REQ INT to PLAT 58): the waiting words of a live tile ("Reading the v2 result") in the small muted
   word type, not the 22 px number type; the number takes the number type when the answer comes (data-hl done) */
.sh-sval[data-hl="busy"] b { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.sh-open { color: var(--muted); display: inline-flex; transition: color var(--t-fast), transform var(--t-fast); }
/* W3 s25 (PLAT done item 2): the card menu of SH-01, live only; the reason line of a Delete row that is off */
.sh-scen-h .sh-menu { flex: none; margin-right: -12px; color: var(--ink2); }
.sh-menu-why { margin: 4px 8px 4px; max-width: 240px; font-size: 12px; line-height: 1.4; color: var(--ink2); }
.sh-scen .tscroll { margin-top: 16px; }
/* W3 s55 (PV-8): the live version table slot of a card: its loading line and a fault box sit where the table goes */
.sh-scen .sh-vt-l { margin: 16px 0 0; font-size: 13px; }
.sh-scen .sh-vt .err-st { margin-top: 16px; }
/* polish PA (round 1): one column grid for every scenario card, so Value, Gain, State and Saved line up down the page [KB alignment, UI-Review R2] */
.sh-scen .tscroll table { table-layout: fixed; width: 100%; }
.sh-scen .t th.sh-vstate, .sh-scen .t td.sh-vstate { padding-left: 32px; }
/* PLAT s64 (FINDING-PLAT-47, COORDINATOR items 14 (1) and 16: a table keeps its key column with the Neo dock open): the
   version table reads its own width (.tscroll is an inline-size container). With the dock open the card body is about
   560 px at 1280 and 720 px at 1440, and the six fixed columns (736 px) left the Name column about 60 px, so names broke
   one word per line and the heads overlapped. Under 900 px each row takes two lines: Version, Name, Value and Gain on the
   first, State under the name and Saved under the numbers on the second. Under 480 px (390 phone) three lines: Version
   and Name; Value and Gain; State and Saved. Every column and the DOM stay, so the heads stand over their cells
   [KB T5 keep the key column; UI-Review: content never runs past its frame] */
@container (max-width: 899.98px) {
  .sh-scen .tscroll table.t, .sh-scen .tscroll table.t thead, .sh-scen .tscroll table.t tbody { display: block; width: 100%; }
  .sh-scen .tscroll table.t tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 112px 112px; align-items: center; border-bottom: 1px solid var(--hair2); }
  .sh-scen .tscroll table.t thead tr { align-items: end; border-bottom-color: var(--hair); }
  .sh-scen .tscroll table.t th, .sh-scen .tscroll table.t td { display: block; width: auto !important; min-width: 0; border-bottom: 0; padding: 8px; }
  .sh-scen .tscroll table.t th { white-space: normal; }
  .sh-scen .tscroll table.t tr > :nth-child(5) { grid-column: 2; padding-top: 0; padding-left: 8px; }
  .sh-scen .tscroll table.t tr > :nth-child(6) { grid-column: 3 / span 2; padding-top: 0; text-align: right; }
}
@container (max-width: 479.98px) {
  .sh-scen .tscroll table.t tr { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
  .sh-scen .tscroll table.t tr > :nth-child(2) { grid-column: 2 / span 2; }
  .sh-scen .tscroll table.t tr > :nth-child(3) { grid-column: 2; padding-top: 0; }
  .sh-scen .tscroll table.t tr > :nth-child(4) { grid-column: 3; padding-top: 0; }
  .sh-scen .tscroll table.t tr > :nth-child(5) { grid-column: 2; }
  .sh-scen .tscroll table.t tr > :nth-child(6) { grid-column: 3; }
}
/* PLAT s161 (D-UT77 rail option (a), CORRECTION PLAT 08:58, REQ PLAT to LIVE 10): the rail company card (.xm-tenant) and its menu
   class (.xm-tenant-pop) left the markup with the rail land of 12:06 CET; their rules left with them. Test sh00-no-tenant-card-r42 */
/* PLAT s159 (D-UT77 rail option (a), COORDINATOR item 72 (3)): the 4875 brand and one round account button in the theme row.
   PORT73 CHROME (item 73, s89 Luecken 1 bis 4): die Marke ist wieder die 4875-Wortmarke (proto r6/pg.css 5 bis 7: svg display
   none, das X kursiv per ::first-letter); das ist ui.css .xm-logo, die Kachel-Regeln .xm-brand sind weg. Der runde CC-Knopf
   ist weg (D-UT81): das Konto ist eine kleine Textzeile ueber Light, Dark, Auto, Firmenname links, Sign out rechts. Die
   Eintraege sind Text ohne Symbol (pg.css 9 a[data-page]); Neo traegt das 4875-N-Zeichen per ::before (pg.css 13 bis 16
   a.neo-rl). Rechts steht die 4875-Neo-Leiste (style.css 64, 65 .dock und .dock button): 44 px, senkrechtes Neo. Sie
   weicht, sobald das Neo-Dock offen ist, auf der Neo-Seite (pg.css 226 #dock.pg-away) und unter 900 px (style.css 214).
   Test chrome73-frame */
.xm-acct-h { display: flex; flex-direction: column; gap: 2px; }
.xm-rail .xm-nav { font-size: 13.5px; font-weight: 600; }
.xm-neo-btn { gap: 10px; margin-top: 18px; padding: 9px 12px; border-radius: 12px; background: var(--card); color: var(--ink); }
.xm-neo-btn::before { content: ''; flex: none; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='6' fill='%23123627'/%3E%3Cpath d='M6.6 14V6l6.8 8V6' stroke='%2348D49C' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
.xm-acct-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0 4px; font-size: var(--fs-label); line-height: 1.4; }
.xm-acct-line > button { border: 0; background: transparent; padding: 2px 0; font: inherit; cursor: pointer; }
.xm-acct-line > .xm-acct { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; color: var(--ink); font-weight: 600; }
.xm-acct-line > .xm-out { flex: none; color: var(--muted); font-weight: 500; }
.xm-acct-line > button:hover { color: var(--acc-tx); text-decoration: underline; }
.xm-acct-line > button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.xm-dtab { flex: none; width: 44px; background: var(--card); border-left: 1px solid var(--hair); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
.xm-dtab-b { writing-mode: vertical-rl; background: transparent; border: 1px solid var(--hair); border-radius: 8px; padding: 10px 4px; color: var(--ink2); font-weight: 600; cursor: pointer; }
.xm-dtab-b:hover { background: var(--page); border-color: var(--ctl); }
.xm-dtab-b:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.xm-shell:has(> #xm-dock:not([hidden]):not(:empty)) > .xm-dtab { display: none; }
.xm-shell:has([data-pg-neochat]) > .xm-dtab { display: none; }
@media (max-width: 900px) { .xm-dtab { display: none; } }
@media print { .xm-dtab { display: none !important; } }
/* PORT73 CHROME (Luecke 5): der Pfeilknopf des Szenario-Menues direkt am Namen (D-UT71, D-UT73), randlos, 24 px */
.xm-tmenu { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -6px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.xm-tmenu:hover, .xm-tmenu[aria-expanded="true"] { background: var(--hair2); color: var(--ink); }
.xm-tmenu:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* SH-02 template picker: equal card heights in a row, hover lift, selected accent frame (IA 3.3) */
.sh-step { font-size: var(--fs-label); font-weight: 600; color: var(--muted); padding: 4px 12px; border-radius: 999px; background: var(--hair2); }
.sh-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: stretch; }
/* five templates: no hole in the grid [KB T2 grid, no unfinished row]; row 1 the two engine checked ones, row 2 the three checked by hand */
/* container query, so an open Neo dock (400 px) also gets the right form */
.sh-tpls-c { container-type: inline-size; }
@container (min-width: 992px) { .sh-tpls.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sh-tpls.n5 > :nth-child(-n+2) { grid-column: span 3; } .sh-tpls.n5 > :nth-child(n+3) { grid-column: span 2; } }
@container (min-width: 656px) and (max-width: 991.98px) { .sh-tpls.n5 > :last-child { grid-column: 1 / -1; } }
/* FA r2 S2: 7 templates read as 4 plus 3 (no lone card in a third row) [KB T2 grid, equal heights in a row] */
@container (min-width: 1100px) { .sh-tpls.n7 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .sh-tpls.n7 > :nth-child(-n+4) { grid-column: span 3; } .sh-tpls.n7 > :nth-child(n+5) { grid-column: span 4; } }
@container (min-width: 656px) and (max-width: 1099.98px) { .sh-tpls.n7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-tpls.n7 > :last-child { grid-column: 1 / -1; } }
.sh-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 24px 24px; text-align: left; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--sh-card); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); color: var(--ink); min-width: 0; }
.sh-tpl:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); transform: translateY(-1px); }
.sh-tpl:active { transform: none; }
.sh-tpl.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), var(--sh-lift); }
/* PLAT s164 (D-UT74 SH-04 (b)): the "From a workbook" start card is a link in the template card form */
a.sh-tpl { color: var(--ink); text-decoration: none; }
.sh-tpl-top { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 24px; }
.sh-rec { margin-left: auto; font-size: var(--fs-label); font-weight: 600; color: var(--acc-tx); }
.sh-tpl-n { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }
.sh-tpl-w { font-size: 13px; color: var(--ink2); line-height: 1.45; min-height: 38px; }
.sh-tpl-sides { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.sh-tpl-marks { display: flex; gap: 4px; min-height: 12px; }
.sh-tpl-l { display: flex; align-items: center; gap: 8px; font-size: var(--fs-chip); color: var(--muted); line-height: 1.4; }
.sh-tpl-l .ic { color: var(--muted-l); }
/* s85 JUDGE R9 SH-02: the labelled fact grid of the 4875 prototype (pg.js dl.pgfacts): label column, value column, one row
   per fact; the label is quiet, the value keeps the fact line type [KB T2 label and value pairs in a two column grid] */
.sh-tpl-facts.sh-tpl-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; row-gap: 4px; margin: 4px 0 0; width: 100%; }
.sh-tpl-dl .sh-tpl-r { display: contents; }
.sh-tpl-dl dt { font-size: var(--fs-chip); color: var(--muted-l); line-height: 1.4; }
.sh-tpl-dl dd { margin: 0; min-width: 0; }
.sh-tpl-dl dd.sh-tpl-l { color: var(--ink2); }
/* s54 (FINDING-PLAT-44 (b)): the fault line of a card the server can not build for this company (why and next step) */
.sh-tpl-f { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-chip); color: var(--ink); line-height: 1.4; }
.sh-tpl-f .ic { color: var(--warn); flex: none; margin-top: 2px; }
.sh-tpl-pre { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.sh-foot-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); }
/* SH-02, SH-03 stepper [KB T7.4 multi-step: where am I, what is next] */
.sh-stepper { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.sh-stepper li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sh-stepper li.bar { width: 24px; height: 1px; background: var(--ctl); }
.sh-stepper .dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ctl); font-size: var(--fs-tick); font-variant-numeric: tabular-nums; background: var(--card); }
.sh-stepper li.now { color: var(--ink); } .sh-stepper li.now .dot { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--on-acc); } /* PLAT s18 LOOK 4.5:1: the LIVE fill token (dark 4.41:1 before) */
.sh-stepper li.done { color: var(--acc-tx); } .sh-stepper li.done .dot { background: var(--acc-t); border-color: var(--acc-l); color: var(--acc-tx); }
/* SH-03 start options: one column of radio cards, equal paddings, icon tile left */
.sh-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.sh-opt { display: flex; gap: 16px; padding: 20px 24px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-card); cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); min-width: 0; }
.sh-opt:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); transform: translateY(-1px); }
.sh-opt:focus-visible { outline: 0; box-shadow: var(--focus); }
.sh-opt.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), var(--sh-lift); }
.sh-opt.off { cursor: default; opacity: .6; box-shadow: none; } .sh-opt.off:hover { border-color: var(--hair); transform: none; }
.sh-o-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--acc-t); color: var(--acc-tx); }
.sh-opt.off .sh-o-ic { background: var(--hair2); color: var(--muted); }
.sh-o-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-o-h { display: flex; align-items: center; gap: 8px; min-height: 24px; } .sh-o-h b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sh-radio { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ctl); flex: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.sh-opt.on .sh-radio { border-color: var(--acc); box-shadow: inset 0 0 0 3.5px var(--card), inset 0 0 0 8px var(--acc); }
.sh-o-x { font-size: 13px; color: var(--ink2); line-height: 1.45; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-o-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-o-l b { font-weight: 600; color: var(--ink2); }
.sh-strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.sh-mo { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.sh-mo i { display: block; width: 100%; height: 8px; border-radius: 2px; background: var(--acc-l); }
.sh-opt.on .sh-mo i, .sh-pstrip .sh-mo i { background: var(--acc); opacity: .85; }
.sh-mo b { font-size: var(--fs-tick); font-weight: 500; color: var(--muted); line-height: 1; }
.sh-mo small { font-size: var(--fs-tick); font-weight: 600; color: var(--ink2); line-height: 1; }
.sh-mo:not(.y) { padding-bottom: 15px; }
.sh-vsel { display: flex; flex-direction: column; gap: 4px; } .sh-vsel select { font-variant-numeric: tabular-nums; }
.sh-foot-acts .sp { flex: 1; }
/* PLAT s48 LOOK SH-04 at 390: the hint takes its own row above the buttons (it broke into three lines between them) */
@media (max-width: 640px) {
  .sh-foot-acts { flex-wrap: wrap; }
  .sh-foot-acts .sp { order: -1; flex: 1 0 100%; text-align: right; }
  .sh-foot-acts .sp:empty { display: none; }
  .sh-foot-acts > :first-child { margin-right: auto; }
}
/* SH-03 step 3: form plus summary */
.sh-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .sh-two { grid-template-columns: minmax(0, 1fr); } }
.sh-form .xf-q, .sh-sum .xf-q { margin-bottom: 16px; }
.sh-row3 { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sh-pstrip { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 16px; border-radius: var(--r-md); background: var(--added); border: 1px solid var(--hair2); }
.sh-diff { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font-size: 13px; color: var(--ink2); line-height: 1.45; }
.sh-diff .ic { color: var(--muted); margin-top: 2px; flex: none; }
.f-err { display: flex; align-items: center; gap: 4px; font-size: var(--fs-label); color: var(--loss); font-weight: 500; }
.f-help { font-size: var(--fs-label); color: var(--muted); }
.sh-dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px 16px; margin: 0; font-size: 13px; }
.sh-dl dt { color: var(--muted); font-size: var(--fs-label); font-weight: 500; padding-top: 1px; }
.sh-dl dd { margin: 0; color: var(--ink); font-weight: 500; min-width: 0; }
.sh-dl dd small { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-label); margin-top: 2px; }
.sh-dl .sh-tpl-sides { margin: 0; }
.sh-form .err-st, .xm-view > .err-st { margin-bottom: 16px; }
.sh-opt.wide { grid-column: 1 / -1; }
.nw { white-space: nowrap; }
.sh-stb { display: inline-flex; align-items: center; gap: 8px; margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: var(--r-md); background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background var(--t-fast); }
.sh-stb:hover { background: var(--acc-t); } .sh-stb:focus-visible { outline: 0; box-shadow: var(--focus); }
/* PLAT s19 LOOK (NOTE-PLAT-21): at 1100 px and less the stepper can wrap to the main edge; the step button then has no
   negative side margin, so its box stays inside the main column (same rule as the dock rule below) */
@media (max-width: 1100px) { .sh-stb { margin-left: 0; margin-right: 0; } }
@media (max-width: 640px) { .sh-stepper { flex-wrap: wrap; row-gap: 8px; } .sh-stepper li.bar { width: 12px; } } /* 390 px: the three steps fit or wrap, never past the main */
/* SH-06 Market data, SH-07 Spread curve */
.sh-feed { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; padding: 16px 24px; margin-bottom: 16px; }
.sh-feed .field { margin: 0; flex: 0 1 360px; }
.sh-feed-m { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 22px; }
.sh-feed select.inp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* s52: a long feed name ends with an ellipsis, never a cut digit */
/* PLAT s103 (JUDGE round 15 P5.1): Feed and Date pickers in the Price curves card head, the Index pick in the line card head
   (prototype .pgpick); the daily feed age chip sits under the page question line */
.sh-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sh-pk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.sh-pk select.inp { width: auto; min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-page-h .sh-head-m { padding-bottom: 0; margin-top: 8px; }
[data-mk-live] > [data-card="SH-06-curves"] { margin-bottom: 16px; }
@media (max-width: 480px) { .sh-pick { width: 100%; } .sh-pk { flex: 1 1 140px; } .sh-pk select.inp { width: 100%; max-width: none; } }
.chip.amber { background: var(--ns-f); color: var(--ns-t); border-color: transparent; }
.sh-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .sh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--hair); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.sh-tile:hover { border-color: var(--acc-l); box-shadow: var(--sh-lift); transform: translateY(-1px); }
.sh-tile.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.sh-tile .lab { display: flex; align-items: center; gap: 8px; }
.sh-tile .val { font-variant-numeric: tabular-nums; }
.sh-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.sh-svg { display: block; overflow: visible; font-variant-numeric: tabular-nums; }
.sh-lc, .sh-sp-c { min-width: 0; }
/* polish PA (round 2): ".card.xf + .card.xf" left this list. It gave every second card in a grid a 16 px bottom margin, so
   two cards of one row ended 16 px apart (IN-f7 346 against 330 px) and stacked grids showed 32 px gaps. The base
   .card.xf rule of ui.css still spaces stacked cards by 16 px [4/8 grid, one gap per relation; consistent card heights] */
[data-spread] .card, .sh-tiles + .card { margin-bottom: 16px; }
.sh-hb { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-chip); color: var(--ink2); font-variant-numeric: tabular-nums; min-height: 28px; }
.sh-hb b { color: var(--ink); font-weight: 600; } .sh-hb.q { color: var(--muted); }
.sh-fx { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-sm); background: var(--hair2); font-size: var(--fs-chip); font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
/* W3 s30 SH-07 on live SH-06: the pair picks and the slope and constant fields sit inside the formula chip */
.sh-fx .sh-sp-sel, .sh-fx .sh-sp-in { height: 26px; padding: 0 6px; margin: 0 4px; font-size: var(--fs-chip); font-weight: 600; min-width: 0; }
.sh-fx .sh-sp-sel { width: auto; padding-right: 24px; background-position: right 6px center; } /* s52: room for the 14 px chevron of select.inp */
.sh-fx .sh-sp-in { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.sh-fx .sh-sp-in[aria-invalid="true"] { border-color: var(--loss); }
.sh-sp-err { flex-basis: 100%; font-size: var(--fs-chip); color: var(--loss); font-weight: 600; }
.xf-key { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.sh-sp { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.sh-ladder { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 16px; background: var(--added); font-variant-numeric: tabular-nums; }
.sh-lh { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.sh-lh small { font-size: var(--fs-label); color: var(--muted); font-weight: 500; }
.sh-lr { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 24px; color: var(--ink2); }
.sh-lr b { font-weight: 500; color: var(--ink); }
.sh-lr.sub { border-top: 1px solid var(--hair); margin-bottom: 8px; } .sh-lr.sub b { font-weight: 700; }
.sh-lr.tot { border-top: 1px solid var(--ctl); margin-top: 4px; padding-top: 4px; font-weight: 600; color: var(--ink); } .sh-lr.tot b { font-weight: 700; color: var(--acc-tx); font-size: 15px; }
.sh-ft td.sh-spc, .sh-ft th.sh-spc { background: var(--acc-t); color: var(--acc-tx); font-weight: 600; }
.sh-ft th:first-child, .sh-ft td:first-child { white-space: nowrap; } /* PLAT s48 LOOK: the month is the key column, one line, one row height */
/* SH-05 Import from X-LNG */
.sh-xl { display: flex; flex-direction: column; gap: 8px; }
.sh-xr { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--hair); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.sh-xr:hover { border-color: var(--acc-l); } .sh-xr:focus-visible { outline: 0; box-shadow: var(--focus); }
.sh-xr.on { border-color: var(--acc); background: var(--acc-t); } .sh-xr.on .sh-radio { border-color: var(--acc); box-shadow: inset 0 0 0 3.5px var(--card), inset 0 0 0 8px var(--acc); }
.sh-xr .sh-radio { margin: 0; } .sh-xr b { font-weight: 600; }
.sh-xd { font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-xn { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .sh-xt { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sh-xr > .pill { flex: none; }
.sh-xk { margin-bottom: 16px; }
.sh-xm { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.sh-xo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.sh-xo .lbl { margin-left: auto; }
.sh-ck { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.sh-ck input { width: 16px; height: 16px; accent-color: var(--acc); margin: 0; }
.sh-two.sh-xg { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 1100px) { .sh-two.sh-xg { grid-template-columns: minmax(0, 1fr); } }
.sh-xg td { white-space: nowrap; }
/* SH-08: the Sheet card stays in view while the long Review card scrolls (master and detail in one row) [KB T2 grouping] */
@media (min-width: 1101px) { .sh-two.sh-xg > .card:first-child { position: sticky; top: 24px; } }
.sh-xg .sh-xk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ---------- SH-09 to SH-13 platform pages (session 3). 4/8 grid, one type scale, tabular figures [KB T3, T4] ---------- */
.sh-quiet { color: var(--muted); font-size: var(--fs-label); font-weight: 400; }
.sh-vreg .xf-body { padding-top: 0; }
.sh-vr { display: grid; grid-template-columns: 232px minmax(0, 1fr) 216px; grid-template-areas: "name data cons" "used used acts"; gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--hair2); align-items: start; }
.sh-vr:first-child { border-top: 0; }
.sh-vn { grid-area: name; display: flex; gap: 12px; align-items: flex-start; }
.sh-vn > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-vn b { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.sh-vic { width: 36px; height: 36px; border-radius: 8px; background: var(--acc-t); color: var(--acc-tx); display: grid; place-items: center; flex: none; }
.sh-vtags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.sh-vr2 .sh-vn1 > div { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .sh-vr2 .sh-vn1 .sh-vtags { margin-top: 0; } /* PLAT s136 SH-09: the live ship card head is one line, IMO and engine (test sh09-card-head-r31) */
.sh-vd { grid-area: data; display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px 16px; margin: 0; }
.sh-vd > div { min-width: 0; }
.sh-vd dt { font-size: var(--fs-label); color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.sh-vd dd { margin: 0; font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-vd dd small, .sh-inu span { font-size: var(--fs-label); color: var(--muted); font-weight: 400; margin-left: 4px; }
.sh-cons { grid-area: cons; border-collapse: collapse; font-size: var(--fs-label); font-variant-numeric: tabular-nums; width: 100%; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.sh-cons th { font-size: var(--fs-tick); color: var(--muted); font-weight: 600; text-align: right; padding: 4px 8px; background: var(--hair2); }
.sh-cons td { text-align: right; padding: 4px 8px; border-top: 1px solid var(--hair2); }
.sh-cons th:first-child, .sh-cons td:first-child { text-align: left; color: var(--muted); }
.sh-cons.ed td { padding: 4px; } .sh-cons.ed .inp { min-height: 28px; text-align: right; font-size: var(--fs-label); }
.sh-vu { grid-area: used; display: flex; align-items: center; gap: 8px; padding-left: 48px; }
.sh-vchips { display: flex; flex-wrap: wrap; gap: 4px; }
.sh-vu > .lbl { flex: none; white-space: nowrap; } /* PLAT s48 LOOK SH-09: "Used in" stays on one line beside its chips */
.sh-vacts { grid-area: acts; display: flex; gap: 8px; justify-content: flex-end; }
.sh-vk { margin-bottom: 16px; }
.sh-vline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--hair2); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.sh-vline .lbl { width: 80px; flex: none; }
.sh-ship { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--hair); font-size: var(--fs-label); font-weight: 600; }
.sh-ship.tco { border-color: var(--acc); color: var(--acc-tx); }
.sh-pop { width: 288px; display: flex; flex-direction: column; gap: 8px; }
.sh-pop > b { font-size: var(--fs-body); }
.sh-popi { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; min-height: 32px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--hair); background: var(--surface); font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--ink); cursor: pointer; }
.sh-popi:hover:not(:disabled) { border-color: var(--acc); background: var(--acc-t); }
.sh-popi:disabled { cursor: default; color: var(--muted); }
.sh-popi:focus-visible { outline: 0; box-shadow: var(--focus); }
/* editor */
.sh-ve { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 24px; }
.sh-ve-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.sh-inu { display: flex; align-items: center; } .sh-inu .inp { flex: 1; text-align: right; } .sh-inu span { width: 64px; flex: none; }
.inp.num { font-variant-numeric: tabular-nums; }
.sh-ferr { min-height: 16px; font-size: var(--fs-label); color: var(--loss); }
.sh-ve-r { display: flex; flex-direction: column; gap: 8px; }
.sh-ve-diff { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.sh-ba { width: 100%; border-collapse: collapse; font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.sh-ba td { padding: 4px 4px; border-top: 1px solid var(--hair2); }
.sh-ba .was { color: var(--muted); text-decoration: line-through; text-align: right; } .sh-ba .now { font-weight: 600; color: var(--acc-tx); text-align: right; }
/* share */
.sh-shb { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sh-share { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-share li { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.sh-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--hair2); color: var(--ink2); font-size: var(--fs-tick); font-weight: 700; flex: none; letter-spacing: .02em; }
.sh-av.me { background: var(--acc); color: #fff; }
.sh-who { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sh-who b { font-size: var(--fs-body); }
.sh-lvw { display: flex; align-items: center; gap: 4px; } .sh-lv { width: 120px; }
.sh-add { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hair2); } .sh-add .inp { flex: 1; }
.sh-foot { display: flex; gap: 8px; align-items: center; margin: 0; font-size: var(--fs-label); color: var(--muted); }
/* team */
.sh-tg { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; }
.sh-tg > section.card.xf, .sh-tg > .card.xf + .card.xf { margin: 0; align-self: stretch; } .sh-rolec { grid-column: 1 / -1; }
.sh-rolec .sh-roles { flex-direction: row; gap: 24px; } .sh-rolec .sh-roles > div { flex: 1; }
.sh-ferr:empty { min-height: 0; }
.sh-col { display: flex; flex-direction: column; gap: 16px; }
.sh-mem { display: inline-flex; align-items: center; gap: 12px; }
.sh-tt td { vertical-align: middle; } .sh-tt .inp { width: 168px; }
.sh-guard { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; background: var(--loss-l); color: var(--loss); font-size: var(--fs-label); font-weight: 500; margin-bottom: 12px; }
.sh-guard svg { flex: none; margin-top: 1px; }
.sh-roles { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sh-roles dt { font-size: var(--fs-body); font-weight: 600; } .sh-roles dd { margin: 4px 0 0; font-size: var(--fs-label); color: var(--muted); line-height: 1.5; }
/* sign in */
.sh-si { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; background: var(--page); }
.sh-si-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; box-shadow: var(--sh-pop); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.sh-si-card h1 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.015em; }
.sh-si-card > p { margin: -8px 0 0; }
.sh-si-card .btn { justify-content: center; width: 100%; min-height: 40px; }
.sh-si-card .field { margin-bottom: 0; }
.xm-logo.sh-si-logo { padding: 0 0 8px; font-size: 22px; }
.xm-logo.sh-si-logo::first-letter { font-size: 27px; }
/* s141 SH-13 (ANS GATE2 to PLAT 25): the sign in box as a 4875 card with the head div.ch and an h2; the s73 look stays (title size and
   weight, 8 px from the title to the line under it, 16 px to the next part); .sh-si-card wins over ui.css .card by order (test sh13-card-r34) */
/* the host on body is the full screen box itself (it held only the fixed .sh-si, so its own box was 0 px high and the MOCK-LOOK
   reader, which takes a host with a box above 0, read the empty #xm-view); the same layer as .sh-si, so the paint order stays */
.sh-si-host { position: fixed; inset: 0; z-index: 65; }
.sh-si-card > .ch { margin: 0; }
.sh-si-card > .ch > div { display: flex; flex-direction: column; gap: 8px; }
.sh-si-card > .ch h2 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.015em; }
.sh-si-card > .ch p { margin: 0; }
.sh-si-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--acc-t); color: var(--acc-tx); }
.sh-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-label); }
.sh-or::before, .sh-or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
@media (max-width: 1100px) {
  .sh-vr { grid-template-columns: minmax(0, 1fr) 216px; grid-template-areas: "name cons" "data data" "used acts"; }
  .sh-vu { padding-left: 0; }
  .sh-tg { grid-template-columns: 1fr; } .sh-rolec .sh-roles { flex-direction: column; }
}
@media (max-width: 640px) { .sh-ve, .sh-ve-g { grid-template-columns: 1fr; } .sh-vr { grid-template-columns: 1fr; grid-template-areas: "name" "data" "cons" "used" "acts"; } }

.sh-ba td:first-child { color: var(--ink2); } .sh-ba td:nth-child(3) { width: 16px; color: var(--muted); }
/* SH-08 upload */
.sh-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 24px 16px; margin-bottom: 16px; border: 1.5px dashed var(--ctl); border-radius: 12px; color: var(--muted); }
.sh-drop b { color: var(--ink); font-size: var(--fs-body); }
.sh-files { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sh-files .sh-popi { justify-content: flex-start; } .sh-files .sh-popi svg { color: var(--acc-tx); flex: none; }
.sh-popi.on { border-color: var(--acc); background: var(--acc-t); box-shadow: inset 0 0 0 1px var(--acc); }
.sh-fn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sh-mapt { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: var(--fs-body); }
.sh-mapt td { padding: 4px 8px 4px 0; height: 40px; border-top: 1px solid var(--hair2); vertical-align: middle; }
.sh-mapt td:nth-child(2) { width: 24px; color: var(--muted); } .sh-mapt td:nth-child(3) { width: 160px; } .sh-mapt td.num { text-align: right; padding-right: 0; }
.sh-map { min-height: 28px; } .sh-map.need { border-color: var(--ns-t); box-shadow: 0 0 0 2px var(--ns-f); }
.sh-veto { margin-top: 16px; padding: 12px 16px; border-radius: 8px; background: var(--loss-l); color: var(--loss); font-size: var(--fs-label); }
.sh-veto b { display: flex; gap: 8px; align-items: center; font-size: var(--fs-body); }
.sh-veto ul { margin: 8px 0 0; padding-left: 24px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.sh-warn { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--ns-f); color: var(--ns-t); font-size: var(--fs-label); font-weight: 500; }
.sh-gap { display: block; margin-top: 16px; }
.sh-done { display: flex; align-items: center; gap: 16px; }
.sh-done > div:nth-child(2) { flex: 1; } .sh-done b { font-size: var(--fs-body); } .sh-done p { margin: 4px 0 0; }

/* SH-04 Import workbook */
.sh-two.sh-wb { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1100px) { .sh-two.sh-wb { grid-template-columns: minmax(0, 1fr); } }
.sh-wbd { padding: 32px 16px; transition: border-color var(--t-fast), background-color var(--t-fast); }
.sh-wbd.over { border-color: var(--acc); background: var(--acc-t); }
.sh-wbd-a { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.sh-wbt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (max-width: 720px) { .sh-wbt { grid-template-columns: minmax(0, 1fr); } }
.sh-wbi { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); }
.sh-wbi.quiet { border-style: dashed; background: transparent; }
.sh-wbi-h { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.sh-wbi-h b { color: var(--ink); font-weight: 600; }
.sh-wbi-h .num { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sh-wbi.quiet .sh-wbi-h b { color: var(--muted); }
.sh-wbh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sh-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--hair); background: var(--track); color: var(--muted); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; }
.sh-wbtab td, .sh-wbtab th { vertical-align: middle; }
.sh-wbtab td.num { white-space: nowrap; }
.sh-wbv { display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px 2px 2px; border-radius: 8px; background: var(--acc-t); white-space: nowrap; }
.sh-wbv .num { font-variant-numeric: tabular-nums; }
.sh-new { color: var(--acc-tx); font-weight: 600; }
.sh-edit { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); vertical-align: middle; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.sh-edit:hover { border-color: var(--ctl); color: var(--ink); background: var(--added); }
.sh-edit:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.sh-wbc { display: inline-flex; align-items: center; gap: 4px; }
.sh-wbe { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.sh-wbe .inp { width: 128px; text-align: right; }
.sh-wbe .sh-ferr { flex-basis: 100%; text-align: right; }
.sh-wbr { display: flex; flex-direction: column; gap: 16px; }
.sh-wbr-h { display: inline-flex; align-items: center; gap: 8px; }
.sh-wbl { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-wbl li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-body); }
.sh-wbl li > svg { flex: none; margin-top: 3px; color: var(--acc-tx); }
.sh-wbba { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-wbba li { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 10px; }
.sh-wbba li > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-wbba li > span:last-child { font-variant-numeric: tabular-nums; }
.sh-wbba li > span:last-child svg { color: var(--muted); flex: none; }
.sh-wbtab td.nw { white-space: nowrap; }
.sh-wbk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.sh-wbk > div { padding: 8px 12px; border: 1px solid var(--hair); border-radius: 10px; }
.sh-wbk > div.on { border-color: var(--ns-b); background: var(--ns-f); }
.sh-wbk dt { font-size: var(--fs-label); color: var(--muted); }
.sh-wbk dd { margin: 4px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .sh-wbh .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }

/* SH-01 Liftings per month */
.sh-lift { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); cursor: default; }
.sh-lift-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sh-lift-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 8px; font-size: var(--fs-label); color: var(--muted); }
.sh-lift-n { color: var(--ink); font-size: var(--fs-body); }
.sh-lift-n b { font-weight: 600; }
.sh-lk { display: inline-flex; align-items: center; gap: 6px; }
.sh-lk i { width: 10px; height: 10px; border-radius: 3px; }
.sh-lk b { color: var(--ink); font-weight: 600; }
.sh-lift-sc { overflow-x: auto; overflow-y: hidden; }
.sh-lift-svg { display: block; overflow: visible; }
.sh-lift-svg .g { stroke: var(--hair); stroke-width: 1; }
.sh-lift-svg .b { stroke: var(--ctl); stroke-width: 1; }
.sh-lift-svg .ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.sh-lift-svg .ax.yr { font-weight: 600; fill: var(--ink2); }
.sh-lift-svg .tot { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-lift-svg .hit { fill: transparent; }
.sh-lift-svg .col { cursor: pointer; outline: none; }
.sh-lift-svg .col:hover .hit, .sh-lift-svg .col:focus-visible .hit { fill: var(--added); }
.sh-lift-svg .col:focus-visible .hit { stroke: var(--acc); stroke-width: 1.5; }
.sh-lift-svg .lt, .sh-lk i.lt { opacity: .5; }

/* SH-07 Windows view: K pick and per leg pills sit in the key row; ladder names the window days */
.sh-kk { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.sh-kl { font-size: var(--fs-label); color: var(--muted); font-weight: 500; }
.sh-lt { display: inline-flex; flex-direction: column; gap: 0; }
.sh-lw { font-size: var(--fs-label); color: var(--muted); font-weight: 500; line-height: 1.4; }
.sh-lr.tot.neg b { color: var(--loss); }
.xf-key .seg { align-self: center; }
/* phone: the card tools and the spread ladder stack under the title, tiles go two a row, nothing pushes the page wider */
@media (max-width: 640px) {
  .xf-head > .xf-tools { flex: 1 1 100%; justify-content: flex-start; }
  .sh-feed { padding: 16px; } /* s52: 16 px like every card at 390 (ui.css 340) */
  .sh-sp { grid-template-columns: minmax(0, 1fr); }
  .sh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-tile .val { flex-wrap: wrap; }
  .sh-kk { margin-left: 0; }
}

/* SH-06 Price sets (V23) */
.t.sh-ps td, .t.sh-ps tbody td { vertical-align: top; } .t.sh-ps td > .sh-ps-src, .t.sh-ps td > span:not(.sh-ps-ix):not(.chip) { display: inline-flex; min-height: 24px; align-items: center; } .sh-ps-n { line-height: 24px; } .sh-ps-n { display: block; font-weight: 600; color: var(--ink); }
.sh-ps-m { display: block; font-size: var(--fs-label); color: var(--muted); margin-top: 2px; }
/* PLAT s107 (JUDGE Round 18 SH-06): one month of the index as its value in the line card body, no sentence */
.sh-one { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 12px 0 4px; }
.sh-one-m { font-size: var(--fs-label); font-weight: 600; color: var(--ink2); }
.sh-one-v { font-size: var(--fs-title); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sh-one-u { font-size: var(--fs-label); color: var(--muted); }
.sh-ps-src { display: inline-flex; align-items: center; gap: 4px; color: var(--ink2); white-space: nowrap; }
.sh-ps-ix { display: flex; flex-wrap: wrap; gap: 4px; }
.chip.lnk { text-decoration: none; color: var(--acc-tx); cursor: pointer; } .chip.lnk:hover { border-color: var(--acc-l); }
.sh-ps-s { min-width: 240px; }
.sh-ps-none { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px 0 8px; }
.sh-ps-none span { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
@media (max-width: 640px) { .sh-ps-s { min-width: 0; width: 100%; } }
.sh-ps th:first-child, .sh-ps td:first-child { min-width: 248px; } .sh-ps td:nth-child(2), .sh-ps td:nth-child(4), .sh-ps td:nth-child(5) { white-space: nowrap; }
.sh-ps td:nth-child(3) { min-width: 200px; }

/* SH-05 link the X-LNG login (V27) [KB T7.4 one primary action; before and after] */
.sh-lk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.sh-lk li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; position: relative; }
.sh-lk li + li { border-top: 1px solid var(--hair2); }
.sh-lk .dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ctl); background: var(--card); font-size: var(--fs-label); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-lk li.now .dot { border-color: var(--acc); color: var(--acc-tx); background: var(--acc-t); }
.sh-lk b { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 24px; }
.sh-lk p { margin: 0; font-size: var(--fs-label); color: var(--muted); line-height: 1.5; }
.sh-lk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.sh-lk-acts .btn .spin { margin-right: 0; }
.sh-lba th { text-align: right; font-size: var(--fs-tick); font-weight: 600; color: var(--muted); padding: 0 4px 8px; text-transform: none; }
.sh-lba th:first-child { text-align: left; }
.sh-lba td { padding: 8px 4px; } .sh-lba .was, .sh-lba .now { white-space: nowrap; }
.sh-xb { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--acc-l); border-radius: var(--r-lg); background: var(--acc-t); animation: sh-in var(--t-med, .24s) ease-out; }
.sh-xb:focus { outline: 0; } .sh-xb:focus-visible { box-shadow: var(--focus); }
.sh-xb > .ic { color: var(--acc-tx); margin-top: 2px; flex: none; }
.sh-xb b { font-size: var(--fs-body); font-weight: 600; } .sh-xb p { margin: 4px 0 0; font-size: var(--fs-label); color: var(--ink2); }
@keyframes sh-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sh-xb { animation: none; } }
.sh-xe { max-width: 760px; }
.sh-two.sh-lkg { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.sh-lkg > .card { display: flex; flex-direction: column; } .sh-lkg .xf-body { flex: 1; display: flex; flex-direction: column; }
.sh-lkg .xf-body > .sh-diff { margin-top: auto; padding-top: 16px; }
@media (max-width: 1100px) { .sh-two.sh-lkg { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .sh-lba .was, .sh-lba .now { white-space: normal; } .sh-lba td:first-child { width: 34%; } }

/* SH-09: the fuel row at the laden speed matches the "Fuel at laden speed" value */
.sh-cons tr.at td { background: var(--acc-t); color: var(--ink); font-weight: 600; }

/* SH-15 Not found: one centred column, 560 px, 8 px grid [KB T9 designed error, QR 33] */
.sh-nf { max-width: 560px; margin: 24px auto 0; padding: 40px 40px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.sh-nf .em-ic { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px; background: var(--acc-t); color: var(--acc-tx); display: inline-flex; align-items: center; justify-content: center; }
.sh-nf-k { color: var(--muted); font-size: var(--fs-label); white-space: nowrap; }
.sh-nf .xm-title { margin: 0; }
.sh-nf-t { margin: 0; color: var(--ink2); max-width: 44ch; text-wrap: balance; }
.sh-nf-l { margin-top: 8px; max-width: 100%; overflow-wrap: anywhere; font-family: inherit; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--muted); }
.sh-nf-a { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.sh-nf-list { width: 100%; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair2); display: flex; flex-direction: column; text-align: left; }
.sh-nf-list .lbl { margin: 0 0 8px; }
.sh-nf-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px; margin: 0 -8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.sh-nf-row:hover, .sh-nf-row:focus-visible { background: var(--hair2); }
.sh-nf-row svg { color: var(--muted); flex: none; }
.sh-nf-n { flex: 1; min-width: 0; font-weight: 500; }
@media (max-width: 600px) { .sh-nf { padding: 32px 16px 24px; } }

/* Assembler fix (session 2, D9): at phone width a scenario name wraps to two lines instead of an ellipsis,
   and the scrolling tab row shows an edge fade so the hidden tabs read as "more to the right" [KB T3 affordance] */
@media (max-width: 640px) {
  .sh-scen h2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* s52 SH-01 390: the card wraps; the name block takes the full row, the value starts the second row (no overlap on the period chip) */
  .sh-scen-h { flex-wrap: wrap; gap: 8px 16px; } .sh-scen-t { flex: 1 1 100%; } .sh-sval { flex: 1 1 auto; align-items: flex-start; text-align: left; }
  .xm-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 24px; }
}
/* polish PA (round 1). SH-08: with no file yet, Review fills the row height of Sheet (496 px, not 345 px) and centres its
   empty state, so the two cards of one row end on one line [QUALITY BAR: consistent card heights in a row; KB layout] */
@media (min-width: 1101px) {
  .sh-two.sh-xg > section[data-card="SH-08-rev"]:not(:has(table)) { align-self: stretch; display: flex; flex-direction: column; }
  .sh-two.sh-xg > section[data-card="SH-08-rev"]:not(:has(table)) > :last-child { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}
/* polish PA (round 2). SH-04: before a workbook is read, What the draft gets fills the row height of Drop the workbook
   (not 312 px against 565 px) and centres its empty state, as on SH-08 [QUALITY BAR: consistent card heights in a row] */
@media (min-width: 1101px) {
  .sh-two.sh-wb > aside.sh-sum:not(:has(dl)) { align-self: stretch; display: flex; flex-direction: column; }
  .sh-two.sh-wb > aside.sh-sum:not(:has(dl)) > :last-child { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}
/* FA r2 S2: "Your template" sits on the top border as a tag, so it never wraps the head row of a narrow card
   (4 plus 3 grid) and the first lines of every card in a row stay on one baseline [KB T2 alignment] */
.sh-tpl { position: relative; }
.sh-tpl .sh-rec { position: absolute; top: -9px; right: 16px; padding: 0 8px; line-height: 16px; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; color: var(--acc-tx); background: var(--card); border-radius: 8px; margin: 0; }
/* FA r2 S7: SH-07 control row (segments out of the head, formula chips on their own line), the side column holds the
   build-up and the across-the-curve block on the 8 px grid [KB T6.1; QUALITY BAR spacing grid] */
.xf-key .sh-tb { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.xf-key .sh-br { flex-basis: 100%; height: 0; }
.sh-sp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sh-span { background: var(--card); }
.sh-lr2 { line-height: 18px; padding: 4px 0; align-items: baseline; }
.sh-lr2 span small { display: block; font-size: var(--fs-label); color: var(--muted); line-height: 16px; }
/* FA r2 S7: SH-03 strip reserves the year row only when it prints a year (no 37 px band); Import card facts; SH-05 last
   import; SH-08 file facts and drag-over; SH-09 unit line in each number head; SH-01 hero tile hover [KB QR 37; T6.9] */
.sh-mo:not(.y) { padding-bottom: 0; }
.sh-strip.has-y .sh-mo:not(:has(small)) { padding-bottom: 15px; }
.sh-o-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.sh-o-dl div { min-width: 0; } .sh-o-dl dt { font-size: var(--fs-label); color: var(--muted); line-height: 16px; }
.sh-o-dl dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sh-xlast { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sh-xlast dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 13px; line-height: 20px; }
.sh-xlast dl div { display: contents; } .sh-xlast dt { color: var(--muted); } .sh-xlast dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.sh-files .sh-popi { display: flex; align-items: center; gap: 8px; } .sh-files .sh-fn { flex: 1; min-width: 0; text-align: left; }
.sh-fm { flex: none; font-size: var(--fs-label); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-drop { transition: border-color .15s, background-color .15s; }
.sh-drop:hover { border-color: var(--acc); }
.sh-drop.over { border-color: var(--acc); border-style: solid; background: var(--acc-t); color: var(--acc-tx); }
.sh-drop.over b { color: var(--acc-tx); }
.sh-cons th small { display: block; font-size: var(--fs-label); font-weight: 500; color: var(--muted); line-height: 14px; }
.sh-sval { border-radius: var(--r-md); padding: 4px 8px; margin: -4px -8px; cursor: default; transition: background-color .15s; }
.sh-sval:hover, .sh-sval:focus-visible { background: var(--hair2); outline: none; }
.sh-xlast > .btn { margin-left: -16px; }
/* FA r2 S7: SH-05 link state. Before and After are text, so they read left-aligned at body size with 12 px rows, and the
   foot note follows the table instead of sitting 130 px lower [KB tables: text left, numbers right; QUALITY BAR type scale] */
.sh-lba { font-size: 13px; }
.sh-lba th, .sh-lba th:first-child { text-align: left; font-size: var(--fs-label); }
.sh-lba td { padding: 12px 8px 12px 0; line-height: 20px; }
.sh-lba .was, .sh-lba .now { text-align: left; }
.sh-lkg .xf-body > .sh-diff { margin-top: 0; padding-top: 16px; }
.sh-lba td:first-child { white-space: nowrap; width: 1%; padding-right: 16px; } .sh-lba .now { white-space: normal; }
.sh-lba td.now { width: auto; color: var(--acc-tx); } .sh-lba td.was { width: 1%; white-space: nowrap; padding-right: 16px; }
/* FA r2 S8: SH-02 at 1280. The lone 7th card spans both columns; it now reads as one wide card in two halves
   (who it is and the sides left, facts and presets right, one hairline between) instead of a stretched card with an
   empty right half [KB T2 grid, no empty band; equal weight per row]. The facts wrapper is display: contents in
   every other card, so their layout stays as it was */
.sh-tpl-facts { display: contents; }
@container (min-width: 656px) and (max-width: 1099.98px) {
  .sh-tpls.n7 > :last-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 48px; row-gap: 8px; align-items: start; }
  .sh-tpls.n7 > :last-child > :not(.sh-tpl-facts) { grid-column: 1; }
  .sh-tpls.n7 > :last-child > .sh-tpl-facts { display: flex; flex-direction: column; gap: 8px; grid-column: 2; grid-row: 1 / 5; align-self: stretch; padding-left: 24px; margin-left: -24px; border-left: 1px solid var(--hair); }
  .sh-tpls.n7 > :last-child > .sh-tpl-facts .sh-tpl-pre { margin-top: 4px; }
  .sh-tpls.n7 > :last-child > .sh-tpl-facts.sh-tpl-dl { display: grid; align-content: start; }
}
/* FA r2 S8 hover parity (IA addendum): pressed and focus states for the template, start and scenario cards, the
   same feedback on all three [KB T3 every control shows hover, focus and pressed] */
.sh-tpl:focus-visible, .sh-scen:focus-visible { outline: 0; box-shadow: var(--focus), var(--sh-lift); border-color: var(--acc); }
.sh-tpl:active, .sh-opt:active:not(.off), .sh-scen:active { transform: translateY(0) scale(.995); box-shadow: var(--sh-card); transition-duration: 60ms; }
.sh-opt { transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
/* R2 QA S1 (FINAL-R2 SH-02): 4 plus 3 cards on one 4 column grid; the key of the check labels takes the 8th slot.
   Quiet panel, not a card: dashed hairline, no hover, no lift, so it never reads as a choice [KB T3 grid, T7 affordance] */
.sh-tpl-key { display: none; }
@container (min-width: 1100px) {
  .sh-tpls.n7 > :nth-child(n+5) { grid-column: span 3; }
  .sh-tpls.n7 > .sh-tpl-key { display: flex; order: 99; flex-direction: column; gap: 12px; padding: 20px 24px 24px;
    border: 1px dashed var(--ctl); border-radius: var(--r-lg); background: transparent; }
}
.sh-tpl-kh { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 20px; }
.sh-tpl-kr { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--fs-chip); color: var(--ink2); line-height: 1.45; }
/* R2 QA S1: "Checked by hand" is a check class, not our side, so it leaves the blue info pair (indigo in dark) for the
   accent outline; "Engine checked" stays the filled accent. Two kinds of one meaning, one hue [KB T5 colour meaning] */
.pill.hand { background: transparent; color: var(--acc-tx, var(--acc-d)); box-shadow: inset 0 0 0 1px var(--acc-l); }

/* R2 QA S2 (FINAL-R2 SH-03): a new draft row on Scenarios and SH-16 Versions or Compare of a draft.
   Quiet value slot ("None yet" in the muted ink), one info line in the 13 px body size [KB T3 hierarchy, T9 empty states] */
.sh-scen-d .sh-sval-d b { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.sh-scen-d .sh-sval-d:hover, .sh-scen-d .sh-sval-d:focus-visible { background: none; }
.sh-scen-dl { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.45; color: var(--ink2); }
.sh-scen-dl .ic { color: var(--muted); margin-top: 2px; flex: none; }
.xm-head .pill.draft[data-tip], #xm-stateline .pill.draft[data-tip] { cursor: default; }
.xm-head .pill.draft[data-tip]:focus-visible, #xm-stateline .pill.draft[data-tip]:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.sh-dv .empty-st { padding: 32px 16px 16px; }
.sh-dv .empty-st p { max-width: 560px; }
.sh-dv-l { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }

/* R3 QA (SH-16): the saved versions of a draft, one table on the 4 px grid; the second line of a cell is quiet
   text [KB T3 hierarchy: one strong value per row, quiet secondary text] */
.sh-dvw { margin: 8px 0 16px; }
.sh-dvt td { vertical-align: top; }
.sh-dvt td b.num { font-weight: 600; }
.sh-dvt .sh-dvs { display: block; margin-top: 4px; font-size: var(--fs-label); color: var(--muted); }
.sh-dvt .pill { margin-left: 8px; vertical-align: 1px; }
.sh-lgn { margin: 8px 0 0; font-size: var(--fs-label); }

/* PLAT W0 s2 (H3, spec 4.2 PLAT item 5): with the Neo dock open the main is 672 px at 1280 and 832 px at 1440.
   Test server/api/platform/test/pages/shell-fit.page.mjs found SH-05 Before and After table 99 px (1280) and 19 px
   (1440) right of the main, under the dock, and SH-06 five price tiles 3 px right of the main at 1280. Now the Before
   and After cells wrap while the dock is open (the phone rule of line 383), and the price tiles go 3 per row under
   1440 px while the dock is open (the 1100 px rule of line 108) [KB anti-pattern hidden content; KB no sideways scroll] */
.xm-shell:has(> #xm-dock:not([hidden])) .sh-lba .was,
.xm-shell:has(> #xm-dock:not([hidden])) .sh-lba .now { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1439px) {
  .xm-shell:has(> #xm-dock:not([hidden])) .sh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* DOCK-RULE start (PLAT sh.css; measured by server/api/platform/test/pages/dock-sh.page.mjs) */
/* PLAT W2 s11 (FINDING-LIVE-4, COORDINATOR item 14 (1)): narrow form of three cards after LIVE's DOCK-RULE, measured by
   web/live/test/dock-look.page.mjs (red 06:34:25: SH-05 131 and 51 px, SH-06 35 and 3 px, SH-04 8 px at 1280 and 1440).
   SH-05 Before and After: fixed columns in the card width, the field name wraps and keeps its column [KB key column stays];
   SH-06 price tiles: the unit goes under the number; SH-04 step button: no negative side margin at the main edge. */
.xm-shell:has(> #xm-dock:not([hidden])) .sh-lba { table-layout: fixed; width: 100%; }
.xm-shell:has(> #xm-dock:not([hidden])) .sh-lba td:first-child,
.xm-shell:has(> #xm-dock:not([hidden])) .sh-lba th:first-child { width: 34%; white-space: normal; overflow-wrap: anywhere; padding-right: 8px; }
.xm-shell:has(> #xm-dock:not([hidden])) .sh-lba td.was { width: 33%; white-space: normal; padding-right: 8px; }
/* PLAT s81 (JUDGE round 7 SH-06; s56 mock-look-1280dock: "19.77USD/MMBtu" and three more tile values wrap over 2 lines):
   the unit no longer goes under the number. The 35 px overflow of s11 came from five tiles a row; with the dock open the
   tiles now take at least 176 px each (3 a row at 1280, 4 a row when the main is wide), so number and unit keep one line. */
.xm-shell:has(> #xm-dock:not([hidden])) .sh-tiles { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.xm-shell:has(> #xm-dock:not([hidden])) .sh-tile .val { flex-wrap: nowrap; white-space: nowrap; }
.xm-shell:has(> #xm-dock:not([hidden])) .sh-stb { margin-left: 0; margin-right: 0; }
/* PLAT s48 (remote LOOK s41, SH-09 at 1280 dock): the vessel row took the wide grid and the data column got about 64 px, so
   "Capacity 140,000 to 1..." was cut under the fuel table. With the dock open under 1440 px the row takes the 1100 px form. */
@media (max-width: 1439px) {
  .xm-shell:has(> #xm-dock:not([hidden])) .sh-vr { grid-template-columns: minmax(0, 1fr) 216px; grid-template-areas: "name cons" "data data" "used acts"; }
  .xm-shell:has(> #xm-dock:not([hidden])) .sh-vu { padding-left: 0; }
  /* SH-12 Team (and every .sh-two page) at 1280 dock: the main column is as narrow as a 1100 px window, so the two column
     grids take their one column form; names keep one line and the Role select is not cut. */
  .xm-shell:has(> #xm-dock:not([hidden])) .sh-two, .xm-shell:has(> #xm-dock:not([hidden])) .sh-tg { grid-template-columns: minmax(0, 1fr); }
  .xm-shell:has(> #xm-dock:not([hidden])) .sh-two.sh-xg > .card:first-child { position: static; }
}
/* DOCK-RULE end */

/* PLAT W1 s4 (S26): screen reader text of an empty fuel cell in the live registry */
.sh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* PLAT W1 s7 (spec 8.9 TEXT, FINDING-INT-14): help that moved out of the running text into a tip (D-UT7 hovers) */
.sh-ii { display: inline-flex; align-items: center; vertical-align: -2px; color: var(--muted); cursor: help; border-radius: 4px; margin-left: 4px; }
.sh-ii:hover, .sh-ii:focus-visible { color: var(--ink); }
.sh-ii:focus-visible { outline: 2px solid var(--focus, var(--g)); outline-offset: 2px; }

/* PLAT s18 (NOTE-INT-38 (2), spec 8.9 LOOK contrast 4.5:1): the age of an old feed chip in the frame head. The amber
   token alone gives 4.15:1 on the grey head of RP-03 and VN-05; one quarter of the ink darkens it in light and lights it
   in dark (5.6:1 and 9.8:1), so the amber cue stays and the text reads (test/pages/chip-contrast.page.mjs). */
:root { --sh-age-old: #6C591F; } /* three quarters --ns-t, one quarter --ink; plain rgb so the LOOK gate measures it */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sh-age-old: #E3CC8D; } }
:root[data-theme="dark"] { --sh-age-old: #E3CC8D; }
.xm-head .xm-price.old .xm-age, #xm-stateline .xm-price.old .xm-age { color: var(--sh-age-old); }
/* PORT73 CHROME (Luecke 6): der Preissatz steht als Wert am Reiter Prices (frame.js priceBadge, 4875 .tabs .tv); sein
   Alter liest sich wie im Kopf-Chip (dieselbe Marke fuer alt), der Wert selbst bleibt in der Reiterfarbe */
.xm-tabs .xm-price.old .xm-age { color: var(--sh-age-old); }
.xm-tabs .badge.xm-price { color: var(--acc-tx); }
.xm-tabs .badge.xm-price.bad { color: var(--loss); }
.xm-tabs .badge.xm-price[data-tw], .xm-tabs .badge.xm-price[data-tip] { cursor: default; }
/* PLAT s20 (COORDINATOR item 21, IN-H4): the white card of the head price chip, one row per curve of the set */
.tw-tip .xm-pst { border-collapse: collapse; margin-top: 8px; width: 100%; }
.tw-tip .xm-pst td { padding: 3px 6px 3px 0; vertical-align: middle; white-space: nowrap; }
.tw-tip .xm-pst td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tw-tip .xm-pst .xm-pm { color: var(--muted); font-size: var(--fs-chip); }
.tw-tip .xm-pk { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.tw-tip .xm-spk { display: block; width: 96px; height: 22px; }
/* W3 s22 (NOTE-LIVE-42): the link box of a refused clipboard; the whole link fits the popover width and stays readable */
.pop .xm-cl { display: block; box-sizing: border-box; width: calc(100% - 16px); margin: 0 8px 8px; padding: 6px 8px; border: 1px solid var(--ctl); border-radius: var(--r-sm, 6px); background: var(--card); font-size: 13px; }
/* PLAT JUDGE FIX round 1 (JUDGE.md Round 1 rows SH-12 8, SH-06 8, SH-09 8.5; LOOK cross screen item 1: a table keeps its key
   column and every value with the Neo dock open and on a phone). Each table reads its own width (.tscroll is an inline-size
   container), so the dock and the phone get the same forms.
   SH-12 Team: under 640 px the Role, Status and act tracks get narrower, so a name keeps one line; under 480 px each member
   takes two lines (the name; then role, status and Remove), and the heads stand over their cells.
   SH-06 Price sets (six columns, about 1060 px): under 1060 px each set takes three lines (name and made line; Source, Indices, Months; Shared with, Used in); PLAT s118: the head row hides and each value stands under its caption (td data-label, the prototype pg.css 560 px stacked form), so a row of the fourth set still names its columns.
   SH-06 All forward prices (a month by index matrix of any width): the month column stays in place and the box shows a shade
   at each edge that still has columns (background-attachment local covers it at the end), so TTF, NBP and the spread are one
   swipe away and the user sees that they are there.
   SH-09 speed tables: values at body size, heads at label size (the judge read "very small type").
   Test server/api/platform/test/pages/sh-narrow.page.mjs [KB T5 keep the key column; UI-Review: content never runs past its frame] */
/* PLAT s81 (JUDGE round 7 SH-01 and SH-02 at 390; s56 mock-look-390: 33 text pairs over each other, the table scrolls 6 px
   with no cue): the Scenarios list table also has the class sh-tt, so these Team forms (higher specificity) beat its own
   phone form of the 560 px block: the head row showed, the seven cells went into the three Team tracks and the nowrap Owner
   ran over Versions. The Team forms now leave the Scenarios table (.sh-scl-t) alone. Test sh01-390-grid.pw.test.mjs. */
@container (max-width: 639.98px) {
  .tscroll > table.t.sh-tt:not(.sh-scl-t) th:nth-child(2) { width: 140px !important; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) th:nth-child(3) { width: 96px !important; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) th:nth-child(4) { width: 104px !important; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) th, .tscroll > table.t.sh-tt:not(.sh-scl-t) td { padding-left: 8px; padding-right: 8px; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) .inp { width: 100%; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) .sh-mem { gap: 8px; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) .sh-mem b { overflow-wrap: anywhere; }
}
@container (max-width: 1059.98px) {
  .tscroll > table.t.sh-ps, .tscroll > table.t.sh-ps thead, .tscroll > table.t.sh-ps tbody { display: block; width: 100%; }
  .tscroll > table.t.sh-ps tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; border-bottom: 1px solid var(--hair2); }
  .tscroll > table.t.sh-ps > thead { display: none; }
  .tscroll > table.t.sh-ps th, .tscroll > table.t.sh-ps td { display: block; width: auto !important; min-width: 0; border-bottom: 0; padding: 8px 0; text-align: left; }
  .tscroll > table.t.sh-ps tr > :first-child { grid-column: 1 / -1; }
  .tscroll > table.t.sh-ps tr > :nth-child(n+2) { padding-top: 0; }
  .tscroll > table.t.sh-ps td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; line-height: 16px; color: var(--muted); margin-bottom: 2px; }
  .tscroll > table.t.sh-ps tr > :nth-child(5) { grid-column: 1; }
  .tscroll > table.t.sh-ps tr > :nth-child(6) { grid-column: 2 / -1; }
  .tscroll > table.t.sh-ps .sh-ps-src { white-space: normal; }
  .tscroll > table.t.sh-ps td.num { white-space: normal; }
}
/* PLAT s81 (JUDGE round 7 SH-06 at 390; s56 mock-look-390: "Mar 2019 to Dec 2029" wraps over 2 lines in 4 Price sets rows):
   in a box under 560 px the three tracks were about 100 px, too narrow for the period. There each set takes two tracks
   (Source and Indices; Months and Shared with; Used in), so the period keeps one line. Test sh01-390-grid.pw.test.mjs. */
@container (max-width: 559.98px) {
  .tscroll > table.t.sh-ps tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tscroll > table.t.sh-ps tr > :nth-child(5) { grid-column: auto; }
  .tscroll > table.t.sh-ps tr > :nth-child(6) { grid-column: 1 / -1; }
  .tscroll > table.t.sh-ps td.num { white-space: nowrap; }
}
@media (max-width: 640px) { .sh-tile .lab { flex-wrap: wrap; row-gap: 2px; } }
@container (max-width: 479.98px) {
  .tscroll > table.t.sh-tt:not(.sh-scl-t), .tscroll > table.t.sh-tt:not(.sh-scl-t) thead, .tscroll > table.t.sh-tt:not(.sh-scl-t) tbody { display: block; width: 100%; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) tr { display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px; column-gap: 8px; align-items: center; border-bottom: 1px solid var(--hair2); }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) thead tr { align-items: end; border-bottom-color: var(--hair); }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) th, .tscroll > table.t.sh-tt:not(.sh-scl-t) td { display: block; width: auto !important; min-width: 0; border-bottom: 0; padding: 8px 0; }
  /* PLAT s70 (plat-s70-ngreen red: 8 px side scroll at 382 and 324 px): the column widths of the 640 block (th:nth-child, higher
     specificity) must not hold in the grid form, else Status and the act cell run past their 84 and 96 px tracks */
  .tscroll > table.t.sh-tt:not(.sh-scl-t) th:nth-child(n+2) { width: auto !important; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) tr > :first-child { grid-column: 1 / -1; padding-bottom: 4px; }
  .tscroll > table.t.sh-tt:not(.sh-scl-t) tbody tr > :nth-child(n+2) { padding-top: 0; }
  .tscroll > table.t.sh-ft th, .tscroll > table.t.sh-ft td { padding-left: 6px; padding-right: 6px; }
}
.tscroll:has(> table.t.sh-ft) {
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 12px 100% no-repeat scroll;
}
.tscroll > table.t.sh-ft th:first-child, .tscroll > table.t.sh-ft td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.sh-cons { font-size: var(--fs-body); }
.sh-cons th { font-size: var(--fs-label); }
/* s73 (REQ LIVE to PLAT 5 (b), COORDINATOR item 64 (1), JUDGE R3 cross item 2): the scenario head on one row at 1440 as the
   4875 prototype. The main column is 1168 px at 1440; the (b) head needed about 1230 px, so its actions wrapped. While the
   head box is 1240 px or less, "(current)" and the Share word go (icon, aria-label and tip stay): about 130 px less. */
#xm-top { container-type: inline-size; container-name: xm-top; }
/* PLAT s155 (D-UT73 option (b)): the 4875 head has crumb and name, the scenario menu and Save as version only, so it keeps
   one row at every width; the 1240 px and 760 px rules of the Version select, Share, the More menu and the template pill left with them. */
/* PLAT s80 (REQ LIVE to PLAT 7, IN-a8): at a head box of 760 px or less (Neo dock open) the prices chip keeps its date; its
   age words are in its tip and its white card. PLAT s155: the chip stands in the step line (LIVE), inside #xm-top. */
@container xm-top (max-width: 760px) {
  .xm-price .xm-age { display: none; }
}
/* PLAT s92 (REQ INT to PLAT 69 IN-f5 "390 header on three rows", ANS LIVE to RUV 05:10): fourth step at a head box of 480 px
   or less (a phone; about 358 px at 390). Crumb, name, the scenario menu and Save as version need about 400 px
   (PLAT s155), so Save version keeps its icon only (its words stay in the DOM, so the button keeps its name).
   Save version stays a visible button. Test server/api/platform/test/head-480.test.mjs. */
@container xm-top (max-width: 480px) {
  .xm-acts > [data-act="save-version"] { width: 32px; padding: 0; gap: 0; font-size: 0; }
}

/* PLAT P1 (session 74). COORDINATOR item 64 (5), D-UT31: the Scenarios
   list card of the 4875 prototype (proto/app/ui/r6/pg.css 45 to 90), one table. The narrow forms are container queries
   of the list card, so the Neo dock width counts too (not viewport media). No cell is duplicated: the phone form puts
   every cell in a grid with its data-label caption, so each number keeps one trace. */
.sh-scl { container-type: inline-size; }
.sh-scl .tscroll { overflow-x: auto; }
table.sh-scl-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.sh-scl-t th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
table.sh-scl-t td { padding: 11px 12px; border-bottom: 1px solid var(--hair2); vertical-align: top; }
table.sh-scl-t th:first-child, table.sh-scl-t td:first-child { padding-left: 18px; }
table.sh-scl-t th:last-child, table.sh-scl-t td:last-child { padding-right: 18px; }
table.sh-scl-t .r { text-align: right; }
table.sh-scl-t tbody tr { cursor: pointer; }
table.sh-scl-t tbody tr:hover { background: var(--added); }
table.sh-scl-t tbody tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acc-l); }
/* PLAT s149 (JUDGE round 37 SH-01: "a left bar on the open scenario"; proto r6/pg.css 55): the row of the open scenario */
table.sh-scl-t tbody tr.sh-cur td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
table.sh-scl-t td b { font-weight: 650; }
table.sh-scl-t td .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 400; }
table.sh-scl-t td .num { font-weight: 650; font-size: 14px; }
table.sh-scl-t td[data-col="state"] { white-space: nowrap; color: var(--ink2); }
/* PLAT s79 (JUDGE round 6 SH-01, cross finding 2): Owner and Period keep one line; the menu sits beside Open, so the State
   column holds only the state; the page head is the crumb of the prototype (one big title: the card head) */
table.sh-scl-t td[data-col="owner"], table.sh-scl-t td[data-col="period"] { white-space: nowrap; }
/* PORT73D SH2 (item 73, SH-01 look rows "long names and notes wrap", pairs "value-split: the value 'Term DES SPA constant
   0.80 USD/MMBtu.' wraps over 2 lines"): the 4875 list card is a pgcard (proto r6/pg.css 42 and 43: padding 16px 0 6px,
   the head 0 18px), so its table runs to the card edges; and in a wide card the version name (a value with data-v, 4875
   cell form b vN plus sub name, pg.js 158) keeps one line. The scenario name wraps as in 4875 (pg.css has no nowrap on
   it) and only when its column cannot hold it: Owner, Period, Value, Versions and State hold one line, so the Scenario
   column takes the rest, and the table never scrolls sideways (run port73d-sh2-2: a one line name made the table 33 px
   wider than the 1134 px card at 1440). A narrow card (dock open, small screen) lets the version name wrap too. Test
   sh2-port73d-scl.pw */
.card.sh-scl { padding: 16px 0 6px; }
.card.sh-scl > .ch { padding: 0 18px; }
@container (min-width: 1100px) {
  table.sh-scl-t td[data-col="versions"] .sub { white-space: nowrap; }
}
table.sh-scl-t td[data-col="open"] .sh-oc { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
table.sh-scl-t td[data-col="open"] .sh-menu { color: var(--ink2); }
/* PLAT s113 (JUDGE Round 20 SH-01 and SH-02; UI-Review R5.3): no period and no saved version are facts in the cell ink, not grey
   sub lines; the Open button of each row is quiet (ghost) with the accent text and shows its border on row hover and focus */
table.sh-scl-t td .sh-nil { font-size: 13px; color: var(--ink2); }
/* PLAT s146 (NOTE COORD 00:04 CET (4)): the Open button is the 4875 btn sm (proto style.css 78 and 82): border var(--ctl),
   card background, ink text; the hover is the shared .btn hover (test sh01-row-look-r20) */
table.sh-scl-t .sh-open-b { background: var(--card); font-weight: 550; }
.sh-page-h .sh-crumb { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--ink); letter-spacing: 0; }
.sh-page-h:has(.sh-crumb) { align-items: center; margin-bottom: 16px; }
table.sh-scl-t .sh-sval { display: block; margin: 0; padding: 0; text-align: right; }
table.sh-scl-t .sh-sval b { font-size: 14px; font-weight: 650; letter-spacing: 0; }
table.sh-scl-t .sh-sval[data-hl]:not([data-hl="done"]) b { font-size: 13px; font-weight: 600; color: var(--muted); white-space: normal; }
@container (max-width: 760px) {
  table.sh-scl-t th:nth-child(2), table.sh-scl-t td:nth-child(2) { display: none; }
}
@container (max-width: 560px) {
  table.sh-scl-t, table.sh-scl-t tbody { display: block; }
  table.sh-scl-t thead { display: none; }
  table.sh-scl-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 16px 14px 18px; border-bottom: 1px solid var(--hair2); }
  table.sh-scl-t tbody tr.sh-cur { box-shadow: inset 3px 0 0 var(--acc); }
  table.sh-scl-t tbody tr.sh-cur td:first-child { box-shadow: none; }
  table.sh-scl-t tbody td { display: block; padding: 0 !important; border: 0; text-align: left; min-width: 0; }
  table.sh-scl-t td[data-col="name"] { grid-column: 1; grid-row: 1; }
  table.sh-scl-t td[data-col="open"] { grid-column: 2; grid-row: 1; }
  table.sh-scl-t td[data-col="value"] { grid-column: 1; grid-row: 2; }
  /* PLAT s148 (JUDGE round 37 SH-01 at 390: the label USD million stood right and its value 62.04 left; proto r6/pg.css 82:
     the value cell is text-align left): table.sh-scl-t .r (0,2,1) beat the tbody td rule (0,1,3) here, so the data-label
     caption stayed right while .sh-sval went left (the block below); this rule (0,2,3) puts the caption over its value */
  table.sh-scl-t tbody td[data-col="value"] { text-align: left; }
  table.sh-scl-t td[data-col="versions"] { grid-column: 2; grid-row: 2; text-align: right; }
  table.sh-scl-t td[data-col="period"] { grid-column: 1 / -1; grid-row: 3; }
  table.sh-scl-t td[data-col="state"] { grid-column: 1 / -1; grid-row: 4; white-space: normal; }
  table.sh-scl-t td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 1px; }
}
/* P1: the closed version table of a row (button "All versions", or "Why" on a fault) opens in a popover */
.sh-vtc .sh-vtog { margin-top: 4px; }
.sh-vtp[hidden] { display: none; }
.pop.sh-vt-pop { max-width: min(760px, calc(100vw - 16px)); }
.sh-vtpop { overflow-x: auto; }
.sh-scl > .sh-none { padding: 12px 18px; }
/* P1: the closed "More" section below the Scenarios list (cards the prototype list does not have) */
.sh-more { margin-top: 16px; }
.sh-more > summary { cursor: pointer; font-weight: 600; color: var(--ink2); padding: 8px 0; }
.sh-more > .card { margin-top: 8px; }
/* P1: in the phone form of the list card the value starts on the left, as every other cell of the row grid */
@container (max-width: 560px) {
  table.sh-scl-t .sh-sval { text-align: left; }
}
/* JUDGE FIX round 4 SH-02 (REQ INT to PLAT 59 and 60, COORDINATOR item 64 (5)): the New ADP card above the Scenarios list, as the
   4875 prototype (proto/app/ui/r6/pg.css .pgnew, .pgtpls, .pgnewf, .pgnote). Test sh02-new-card.test.mjs. */
.sh-new { padding: 16px 18px 18px; margin-bottom: 16px; container-type: inline-size; }
.sh-new > .ch { padding: 0; }
/* PORT73D SH2 (item 73, SH-02 look row "8 tiles in 4 columns, 4875 has 3 tiles in 3 columns"): the 4875 tile grid (proto
   r6/pg.css 130 .pgtpls repeat(3, minmax(0, 1fr)), 145 one column at 760 px). The 7 template tiles and the From a workbook
   tile stay (templates are data): 8 tiles in rows of 3. One column below a 760 px screen, the 4875 media rule (with the
   dock open at 1440 4875 keeps 3 columns too). */
.sh-new .sh-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 760px) { .sh-new .sh-tpls { grid-template-columns: minmax(0, 1fr); } }
.sh-new .sh-tpl { padding: 12px 14px; }
.sh-newf { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
.sh-newf label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.sh-newf .inp { width: min(340px, 80vw); font-weight: 400; }
.sh-newf .inp:disabled { opacity: .62; }
.sh-newf .btn[aria-disabled="true"] { opacity: .62; cursor: default; }
.sh-new-note { flex-basis: 100%; font-size: 12px; color: var(--muted); margin: 0; }
.sh-new-err { flex-basis: 100%; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--loss); margin: 0; }
.sh-new-err a { color: inherit; text-decoration: underline; }
@container (max-width: 560px) { .sh-newf { flex-direction: column; align-items: stretch; } .sh-newf .inp { width: 100%; } }
/* PLAT s77 (JUDGE round 5 SH-06, 4875 prototype marketPage): Price curves card, index chips, gas and oil charts side by side
   (gas wider), one column in a narrow main (dock open, phone) */
.sh-cv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sh-cv-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--hair); background: var(--bg, transparent); color: var(--muted); border-radius: 999px; padding: 4px 10px; }
.sh-cv-chip.on { color: var(--ink); border-color: var(--ctl); }
.sh-cv-chip:not(.on) .sh-sw { opacity: .35; }
.sh-cv2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; container-type: inline-size; }
.sh-cv2.one { grid-template-columns: minmax(0, 1fr); }
.sh-cv-p { min-width: 0; }
.sh-cv-h { font-size: 13px; font-weight: 600; color: var(--ink2); margin: 0 0 6px; }
.sh-cv { min-width: 0; }
.sh-cvs { display: block; overflow: visible; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sh-cv2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1439px) { .xm-shell:has(> #xm-dock:not([hidden])) .sh-cv2 { grid-template-columns: minmax(0, 1fr); } }
/* PLAT s77 (JUDGE round 5 SH-09, 4875 prototype vesselsPage): the Fleet table; in a narrow card (phone, dock open) each
   row becomes a small grid with the column name as caption, so nothing is cut and the page does not scroll sideways */
.sh-fl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sh-fl th, .sh-fl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.sh-fl th { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sh-fl th small { display: block; font-weight: 400; }
.sh-fl .num { text-align: right; white-space: nowrap; }
.sh-fl td .sh-quiet { display: block; font-size: 12px; }
/* PLAT s116 (own read of the judge shot judge-r21-l sh-09-1440-light.png, s69): the Ship cell broke "155k m³ Steam" and
   "IMO 9765432" into four lines and Engine into two, because the Used in column took the width. Ship name, IMO and
   Engine keep one line each (4875 prototype Fleet table); Used in is the one column that wraps. */
.sh-fl td[data-label="Ship"] b, .sh-fl td[data-label="Ship"] .sh-quiet, .sh-fl td[data-label="Engine"], .sh-fl td[data-label="Class"] { white-space: nowrap; }
.sh-fl-n { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.sh-fl-n:hover b, .sh-fl-n:focus-visible b { text-decoration: underline; }
/* PLAT s90: the Fleet row of the ship the ship card shows (v-show) */
.sh-fl tr.sh-fl-on td { background: var(--acc-t); }
.sh-fl tr.sh-fl-on .sh-fl-n b { color: var(--acc-tx); }
.sh-vr { scroll-margin-top: 96px; transition: box-shadow var(--t-fast); }
.sh-vr.sh-vr-on { box-shadow: 0 0 0 2px var(--acc); }
/* PLAT s150 (JUDGE round 37 SH-09: "the Fleet table stays a table at 608 px with the dock"; 4875 pg.css 64 to 92: the
   page keeps the table down to the phone and folds a row only at 560 px): in a box from 521 to 700 px (1280 with the
   400 px Neo dock: 558 px) the heads wrap, the Rate line under the number wraps and the cells sit closer, so the six
   4875 columns fit with no side scroll; only a box of 520 px or less (390: 326 px) takes the narrow row. Test
   sh09-fleet-wrap-r21 (558 px: a table with its head row). */
@container (max-width: 700px) {
  .sh-fl th { white-space: normal; }
  .sh-fl th, .sh-fl td { padding: 8px 6px; }
  .sh-fl td.num .sh-quiet { white-space: normal; }
}
@container (max-width: 520px) {
  .sh-fl thead { display: none; }
  .sh-fl, .sh-fl tbody, .sh-fl tr { display: block; }
  .sh-fl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .sh-fl td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; }
  .sh-fl td[data-label="Ship"] { grid-column: 1 / -1; }
  .sh-fl td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); }
  .sh-fl td[data-label="Ship"]::before { content: none; }
  .sh-fl td[data-label="Ship"] b, .sh-fl td[data-label="Ship"] .sh-quiet, .sh-fl td[data-label="Engine"] { white-space: normal; }
  /* PLAT s149 (JUDGE round 37 SH-09 at 608 px: "the left half empty"): the 4875 narrow Fleet row (proto r6/pg.css 89 and
     90): Ship, Available and Approved ports take the full row, Class beside Capacity, numbers
     left. Test sh09-fleet-cols-r37 case 7. */
  .sh-fl td[data-label="Available"], .sh-fl td[data-label="Approved ports"] { grid-column: 1 / -1; }
  .sh-fl td.num { text-align: left; }
}
/* PLAT s78 (JUDGE round 5 SH-09, 4875 prototype vesselsPage): a live vessel card as the prototype class card: tiles,
   then Fuel by speed beside Port and load, then the charter rate by loading month; one column in a narrow card */
.sh-vr.sh-vr2 { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name acts" "tiles tiles" "cols cols" "chart chart" "used used"; container-type: inline-size; }
.sh-vr2 .sh-vu { padding-left: 0; }
.sh-vtiles { grid-area: tiles; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sh-vt { min-width: 0; border: 1px solid var(--hair); border-radius: 8px; padding: 10px 12px; }
.sh-vt-k { font-size: var(--fs-label); color: var(--muted); font-weight: 500; }
.sh-vt-v { margin-top: 4px; font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-vt-v small { font-size: var(--fs-label); color: var(--muted); font-weight: 400; margin-left: 4px; }
.sh-vt-s { margin-top: 2px; font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-vcols { grid-area: cols; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.sh-vcols > div { min-width: 0; }
.sh-vr2 .sh-vd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-vh { font-size: var(--fs-label); font-weight: 600; color: var(--ink2); margin: 0 0 6px; }
.sh-vch { grid-area: chart; min-width: 0; }
.sh-rate { display: block; width: 100%; max-width: 760px; height: auto; font-variant-numeric: tabular-nums; }
.sh-rate-hit { fill: transparent; }
.sh-rate-b:hover .sh-rate-hit { fill: var(--hair2); }
/* PLAT s101 (HOVER-SPEC 3 Keyboard): the focused month of the charter chart; its card comes from the hover kit */
.sh-rate-b { outline: none; }
.sh-rate-b:focus-visible .sh-rate-hit { fill: var(--hair2); stroke: var(--ink); stroke-width: 1.5; }
/* PLAT s101 (JUDGE Round 15 SH-06, HOVER-SPEC 2.5 and 3): the month column of a Price curves chart; the crosshair and the
   dots show on hover and focus, the card comes from the hover kit */
.sh-cv-m { outline: none; }
.sh-cv-hit { fill: transparent; }
.sh-cv-x { visibility: hidden; pointer-events: none; }
.sh-cv-m:hover .sh-cv-x, .sh-cv-m:focus-visible .sh-cv-x { visibility: visible; }
.sh-cv-xl { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }
.sh-cv-xd { stroke: var(--surface); stroke-width: 1.5; }
@container (max-width: 600px) {
  .sh-vtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-vcols { grid-template-columns: minmax(0, 1fr); }
}
.xm-shell:has(> #xm-dock:not([hidden])) .sh-vr.sh-vr2 { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name acts" "tiles tiles" "cols cols" "chart chart" "used used"; }
@media (max-width: 640px) { .sh-vr.sh-vr2, .xm-shell:has(> #xm-dock:not([hidden])) .sh-vr.sh-vr2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "tiles" "cols" "chart" "used" "acts"; } }
/* PLAT s78 (JUDGE round 5 SH-01): a time that must not wrap (Saved column of the version table) */
.sh-nw { white-space: nowrap; }
/* PLAT s79 (s56 look shots SH-01 and SH-02): no sheet of the app styles the card head .ch of the 4875 prototype
   (proto/app/ui/style.css 105 to 108), so the count "21 scenarios" and the Close button of New ADP fell under the
   question, and the old link rule .sh-new (line 341) painted the whole New ADP card green and bold. Ported for the
   two shell cards only; the cards of the other lanes keep their own heads. Test sh01-r6.test.mjs case 7. */
.sh-scl > .ch, .sh-new > .ch, .sh-pgc > .ch { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-scl > .ch h2, .sh-new > .ch h2, .sh-pgc > .ch h2 { margin: 0; font-size: 15px; font-weight: 650; }
.sh-scl > .ch .q, .sh-new > .ch .q, .sh-pgc > .ch .q { color: var(--muted); font-size: 12.5px; }
.sh-pgc > .ch > .cs, .sh-scl > .ch > .cs { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* PLAT s161 (JUDGE rounds 37 to 42 SH-12, D-UT74 SH-12 option (a)): the Team cards take the same 4875 card head (.sh-pgc, the
   page card of proto r6/pg.js vesselsPage) and stand in one column; the Invite form is one row that wraps. Test sh12-team-4875-r42 */
.card.sh-pgc + .card.sh-pgc { margin-top: 16px; }
.sh-tmf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sh-tmf > .field { margin: 0; flex: 1 1 220px; min-width: 0; max-width: 360px; }
.sh-new > .ch > .btn, .sh-new > .ch > .cs { margin-left: auto; }
.card.sh-new { color: var(--ink); font-weight: 400; }

/* PLAT s97 (JUDGE FIX round 15, COORDINATOR item 70 (b), HOVER-SPEC.md 1): the body of the one shared hover card
   XM.ui.hoverCard (views/sh/hover.js). The kit card #tipW.tw-tip (ui.css, LIVE) holds it. 220 to 320 px; title line,
   key number large with its unit and a delta chip, the visual, at most 5 rows, a footer fact. Tokens only, so the dark
   set of tokens.css applies with no extra rule. */
.tw-tip:has(> .hc-b), .tw-tip.hc { min-width: 220px; max-width: 320px; padding: var(--s3) 12px; font-size: var(--fs-chip); line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 480px) { .tw-tip:has(> .hc-b), .tw-tip.hc { max-width: min(320px, calc(100vw - 32px)); } }
.tw-tip.hc-tight { min-width: 0; max-width: 220px; }
.tw-tip.hc-tight svg.hc-pic { display: none; }
.hc-b { font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.hc-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hc-t { flex: 1 1 auto; min-width: 0; font-size: var(--fs-chip); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-w { color: var(--muted); font-weight: 500; }
.hc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.hc-tag { flex: none; font-size: var(--fs-small); font-weight: 600; padding: 1px 6px; border-radius: 9px; background: var(--track); color: var(--ink2); }
.hc-tag.ns { background: var(--ns-f); color: var(--ns-t); }
.hc-tag.info { background: var(--info-t); color: var(--info); }
.hc-tag.loss { background: var(--loss-l); color: var(--loss); }
.hc-tag.acc { background: var(--acc-t); color: var(--acc-tx); }
.hc-k { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: var(--s1); }
.hc-v { font-size: var(--fs-title); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.hc-v.wait { color: var(--muted); font-weight: 500; font-size: var(--fs-body); }
.hc-u { font-size: var(--fs-label); font-weight: 500; color: var(--muted); }
.hc-d { margin-left: var(--s2); font-size: var(--fs-small); font-weight: 650; padding: 1px 6px; border-radius: 9px; background: var(--track); color: var(--ink2); }
.hc-d.up { background: var(--acc-t); color: var(--acc-tx); }
.hc-d.down { background: var(--loss-l); color: var(--loss); }
.hc-vs { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
svg.hc-pic { display: block; width: 100%; height: auto; margin-top: var(--s2); overflow: visible; }
svg.hc-pic text { font-size: var(--fs-tick); font-family: inherit; }
svg.hc-pic .hc-l { fill: var(--muted); }
svg.hc-pic .hc-n { fill: var(--ink); font-weight: 600; }
table.hc-r { border-collapse: collapse; width: 100%; margin-top: var(--s2); }
table.hc-r td { padding: 2px 0; font-size: var(--fs-chip); color: var(--muted); }
table.hc-r td.n { text-align: right; color: var(--ink); font-weight: 600; padding-left: 12px; white-space: nowrap; }
/* PLAT s131 (REQ RUV to PLAT 09:48 CET, FINDING-ENU-28): the value cell above is nowrap, so a long text row ran past the
   card edge (176 px with a 66 character rule fact). Kit rule: a text cell (no unit span .hc-ru) wraps at the spaces inside
   the 320 px card; a number cell (number and unit) stays on one line; the label beside a marked text cell keeps a line of
   at least 7.5em, so a short label does not break into one word per line. Test sh-hc-text-wrap-r29.pw. */
table.hc-r td.n:not(:has(.hc-ru)) { white-space: normal; overflow-wrap: break-word; }
table.hc-r td:first-child:has(+ td.n[data-v], + td.n[data-src-none]) { min-width: 7.5em; }
.hc-ru { color: var(--muted); font-weight: 400; }
table.hc-r tr.tot td { border-top: 1px solid var(--hair2); padding-top: 4px; font-weight: 700; color: var(--ink); }
.hc-f { margin-top: var(--s2); padding-top: 6px; border-top: 1px solid var(--hair2); font-size: var(--fs-small); color: var(--muted); }
/* PLAT s100 (JUDGE Round 15 SH-09 and SH-12, COORDINATOR item 70 (a)): the source chip of the ship card and the info button at a table head */
.sh-vfrom { margin-top: 8px; } .sh-tt th .xf-info { width: 24px; height: 24px; margin-left: 2px; vertical-align: middle; }
/* PLAT s115 (JUDGE Round 21 SH-12, judge shot sh-12-1440-light): the 24 px Role info button grew the line box of its th, so
   "Role" sat about 4 px above "Name" and "Status" (th cells align at the bottom). Negative block margins keep its margin box
   inside the label line; it still draws 24 px, centred on the label, in the th padding (test sh12-role-head-r21). */
.sh-tt th .xf-info { margin-top: -6px; margin-bottom: -6px; }
/* PLAT s106 (JUDGE Round 18 SH-06 P5, 4875 prototype spread month panel): live, a month panel row is label, bar, number; fixed label and number columns so the bars of all rows share one x scale */
/* PLAT s127 (JUDGE Round 27 Prices SH-06: "the month panel figures stand about 10 px past the right edge of the panel
   box"): the old tracks 9em, 40 px and 4.5em plus two 8 px gaps asked 231 px in a 206 px panel (240 px less padding and
   border). Now the label takes at most 7em and shrinks (it wraps), the bar takes the rest down to 24 px, and the figure
   takes its own width, so every figure ends inside the panel. Test sh06-panel-fit-r27.pw. */
.sh-lr.bar { display: grid; grid-template-columns: minmax(0, 7em) minmax(24px, 1fr) max-content; align-items: center; } .sh-lr.bar > span:first-child { overflow-wrap: anywhere; line-height: 18px; }
.sh-lr.bar b { text-align: right; }
.sh-lbar { position: relative; height: 8px; }
.sh-lbar i { position: absolute; top: 0; bottom: 0; min-width: 1px; border-radius: 2px; }
.sh-lbar i.pt { opacity: .5; }

/* PLAT s137 (item 72 (1), REQ INT to PLAT 90): a start step is a form section of the New ADP card above the Scenarios list
   (4875 prototype newPanel). Inside the card the step head is a small title, its crumb goes (Close and Back lead out), and
   the inner cards lose their own frame. */
.sh-newsec .sh-newsec-b { margin-top: 12px; }
.sh-newsec .sh-newsec-b .xm-crumb { display: none; }
.sh-newsec .sh-newsec-b .sh-page-h { margin: 0 0 12px; padding: 0; }
.sh-newsec .sh-newsec-b .sh-page-h h1.xm-title { font-size: 15px; line-height: 1.3; margin: 0; }
.sh-newsec .sh-newsec-b .card { box-shadow: none; border: 1px solid var(--hair); margin-bottom: 12px; }
/* s139 (REQ LIVE to PLAT 12, item 72 P2): bridge for the step bar wrapper div.xm-ibar of frame.js. Zero specificity, so
   LIVE's .xm-ibar rule in ui.css (sticky, border, gaps, display grid as proto .ibar) wins at once; until then the wrapper
   draws no box and #xm-stateline stays sticky to #xm-main (test sh-ibar-r33) */
:where(#xm-ibar) { display: contents; }
/* s139: the 16 px gap between the tab line and the state line (rp.css 975 "#xm-top + .vn-line", which needs the two as
   siblings) inside the wrapper; (0,2,0) beats vn.css .vn-line margin 0 0 16px; LIVE's .xm-ibar look replaces it */
:where(#xm-ibar) > .vn-line:first-child { margin-top: 16px; }
/* s140 (COORDINATOR item 72 P2, REQ INT to PLAT 91 and 92): the scenario head crumb in the 4875 form (proto/app/ui/style.css
   72 and 73: .crumb muted at weight 500 in the 13.5 px body size, .crumb b 17 px at weight 650): "Scenarios / name" on one row,
   about one space between the separator and the name (test sh-head-r33) */
#xm-top .xm-head > .xm-crumb.in { font-size: var(--fs-body); font-weight: 500; margin-right: -8px; }
#xm-top .xm-head > .xm-title { font-size: 17px; font-weight: 650; }
/* s141 (COORDINATOR item 72 P2, REQ PLAT to LIVE 3, ANS LIVE to PLAT 3 15:09 CET, D-6): the scenario tab row in the 4875 form
   (proto/app/ui/style.css 83 to 87): .tabs button padding 9px 12px at weight 550, the open tab at the same weight; the value
   .tv in the tab text size at weight 650 in the accent text green (the 4875 --acc-d is the app --acc-tx in both themes: light
   #1F6B4C, dark the bright green; the app --acc-d is the dark fill green), the Versions value green as well, a loss red. LIVE
   keeps ui.css .xm-tabs a as the base; the id part wins. The open Neo dock keeps its 10 px sides (vn.css 774, higher id part).
   (test sh-tabs-r34) */
#xm-top .xm-tabs a { padding: 9px 12px; font-weight: 550; }
#xm-top .xm-tabs a.on { font-weight: 550; }
#xm-top .xm-tabs .badge, #xm-top .xm-tabs .badge.n { font-size: inherit; font-weight: 650; color: var(--acc-tx); }
#xm-top .xm-tabs .badge.neg { color: var(--loss); }
/* PLAT s147 (NOTE COORD to LIVE, RPV, RDV, RUV and PLAT 00:04 CET (4): "the State cell lacks the green dot"; JUDGE round 36
   BELOW SH-01): the 4875 state dot (proto style.css 94 to 97 and r6/pg.css 144) in the Scenarios State cell. The page writes
   span.dot with ok (Calculated), run (Queued, Calculating, Asking the server), bad (Failed) or no class (No version yet,
   Not calculated, No plan: the 4875 idle grey). v3 had no .dot rule, so the span drew nothing. Test sh01-state-dot-r36. */
.sh-scen td[data-col="state"] .dot { width: 8px; height: 8px; border-radius: 4px; display: inline-block; background: var(--muted); margin-right: 5px; vertical-align: 1px; flex: none; }
.sh-scen td[data-col="state"] .dot.ok { background: var(--acc); }
.sh-scen td[data-col="state"] .dot.run { background: var(--ns-t); animation: sh-dot-pulse 1s infinite; }
.sh-scen td[data-col="state"] .dot.bad { background: var(--loss); }
@keyframes sh-dot-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sh-scen td[data-col="state"] .dot.run { animation: none; } }