/* AmpConnect appearance (2026-09-13): template (classic / modern / compact) × mode (day / night).
   Classic Day lives entirely in index.html (its :root declares the --c-* tokens with today's literals). This file
   overrides the tokens for night and for the Modern palette, and holds the Modern and Compact layout rules.
   Specs: docs/superpowers/specs/2026-09-11-ui-templates-design.md, 2026-09-13-appearance-templates-design.md */

/* ── Palettes ── */
html[data-template="modern"]{
  --c-ground:#F2F0EA; --c-surface:#FFFFFF; --c-surface-2:#F7F6F2; --c-surface-3:#EEECE6;
  --c-ink:#15181F; --c-ink-2:#3A3F49; --c-ink-3:#4E525C; --c-muted:#62666F; --c-muted-2:#9A9EA8; --c-hair:#E3DFD6; --c-hair-2:#ECE9E2;
  --c-accent:#1F3B7A; --c-accent-soft:#E7EDF9; --c-accent-line:#B9C7E6; --c-accent-solid:#1F3B7A;
  --c-bad:#C9302C; --c-bad-soft:#FBE9E8; --c-btn:#15181F; --c-btn-ink:#F2F0EA;
  --c-gold:#8A6300; --c-warn-solid:#8A6300;   /* Modern day: amber text and filled amber badges readable on white */
  --c-bar:#FFFFFF; --c-bar-2:#EEECE6; --c-bar-ink:#15181F; --c-bar-muted:#62666F;
  --sk-shadow:0 1px 2px rgba(21,24,31,.04), 0 10px 30px -18px rgba(21,24,31,.25);
  --sk-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Fraunces",Georgia,"Times New Roman",serif;
}
/* Modern 2 (2026-09-13): FleetGen structure, Apple-style colour — neutral greys, one blue, iOS system hues as calm tints
   with their darker text shades (Reetesh 11:54: "modern colours, like apple style"). Mockup: https://claude.ai/code/artifact/5d13665b-1a3c-45c4-8e9a-e5af38529fea */
html[data-template="modern2"]{
  --c-ground:#F5F5F7; --c-surface:#FFFFFF; --c-surface-2:#F9F9FB; --c-surface-3:#F2F2F7;
  --c-ink:#1D1D1F; --c-ink-2:#3A3A3C; --c-ink-3:#48484A; --c-muted:#606065; --c-muted-2:#8E8E93; --c-hair:#E5E5EA; --c-hair-2:#EFEFF4;
  --c-accent:#0058CC; --c-accent-soft:#DCEBFF; --c-accent-line:#9CC4FF; --c-accent-solid:#0071E3; --c-accent-ink:#FFFFFF;
  --c-navy:#0040DD; --c-navy-solid:#0040DD;
  --c-btn:#1D1D1F; --c-btn-ink:#FFFFFF; --c-bar:#FFFFFF; --c-bar-2:#F2F2F7; --c-bar-ink:#1D1D1F; --c-bar-muted:#606065;
  --c-bad:#C20012; --c-bad-soft:#FFE0DD; --c-bad-line:#FF9E97; --c-bad-solid:#E0281B;
  --c-ok:#1E7233; --c-ok-soft:#DCF5E3; --c-ok-line:#8ADBA3; --c-ok-solid:#23963F;
  --c-warn:#B02E00; --c-warn-soft:#FFE9CF; --c-warn-line:#FFB870; --c-warn-solid:#C24E00; --c-gold:#8A5E00; --c-highlight:#FFF1C2;
  --c-note:#8944AB; --c-note-soft:#EFE1FD; --c-note-line:#CFA6F5; --c-note-solid:#9D4EDD;
  --c-muted-solid:#606065;
  --sk-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.16);
  --sk-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sk-r:12px; --sk-r-sm:9px;
}
html[data-template="modern2"][data-mode="night"]{
  --c-ground:#0F0F10; --c-surface:#1C1C1E; --c-surface-2:#232326; --c-surface-3:#2C2C2E;
  --c-ink:#F5F5F7; --c-ink-2:#D1D1D6; --c-ink-3:#C7C7CC; --c-muted:#B0B0B5; --c-muted-2:#8E8E93; --c-hair:#3A3A3C; --c-hair-2:#2C2C2E;
  --c-accent:#5EAEFF; --c-accent-soft:#192F46; --c-accent-line:#2A5A9A; --c-accent-solid:#0A66D6; --c-accent-ink:#FFFFFF;
  --c-navy:#7AB0FF; --c-navy-solid:#2F62C8;
  --c-btn:#F5F5F7; --c-btn-ink:#1C1C1E; --c-bar:#1C1C1E; --c-bar-2:#2C2C2E; --c-bar-ink:#F5F5F7; --c-bar-muted:#A1A1A6;
  --c-bad:#FF6961; --c-bad-soft:#452221; --c-bad-line:#8A3A34; --c-bad-solid:#D63A30;
  --c-ok:#30D158; --c-ok-soft:#203D28; --c-ok-line:#2E7A44; --c-ok-solid:#1F8A42;
  --c-warn:#FF9F0A; --c-warn-soft:#453419; --c-warn-line:#8A6520; --c-warn-solid:#B35300; --c-gold:#FFD60A; --c-highlight:#453D1A;
  --c-note:#D08CFF; --c-note-soft:#392744; --c-note-line:#6E4A8A; --c-note-solid:#9E4FD8;
  --c-muted-solid:#636366; --c-on-solid:#FFFFFF;
  --sk-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
html[data-mode="night"]{
  --c-ground:#12151B; --c-surface:#1A1E26; --c-surface-2:#20252E; --c-surface-3:#262C36;
  --c-ink:#ECEAE3; --c-ink-2:#C8C5BD; --c-ink-3:#B4B0A6; --c-muted:#9AA0AC; --c-muted-2:#9AA0AC; --c-hair:#2B313B; --c-hair-2:#252A33;
  --c-accent:#8FB0F0; --c-accent-soft:#1E2A45; --c-accent-line:#2F4A7A; --c-accent-solid:#2F6FB5; --c-accent-ink:#FFFFFF;
  --c-navy:#A7BEF2; --c-navy-solid:#2B4A9E;
  --c-btn:#ECEAE3; --c-btn-ink:#12151B; --c-on-solid:#FFFFFF;
  --c-bar:#0C0F14; --c-bar-2:#262C36; --c-bar-ink:#ECEAE3; --c-bar-muted:#9AA0AC;
  --c-bad:#F07A75; --c-bad-soft:#3A1F1F; --c-bad-line:#6B3532; --c-bad-solid:#B23A36;
  --c-warn-solid:#8A6A1F; --c-muted-solid:#5B6270;
  --c-ok:#7CC98F; --c-ok-soft:#1B3024; --c-ok-line:#2F5A3C; --c-ok-solid:#2E7D48;
  --c-warn:#E2B36A; --c-warn-soft:#3A2E17; --c-warn-line:#6B5424; --c-gold:#D9B45A;
  --c-note:#C79BF5; --c-note-soft:#2E2140; --c-note-line:#5A3F80; --c-note-solid:#8E3BD6;
  --c-highlight:#3D3419;
  --sk-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.7);
  color-scheme:dark;
}
html[data-template="modern"][data-mode="night"]{ --c-bar:#1A1E26; --c-bar-ink:#ECEAE3; }
/* Compact keeps Classic's day palette but lifts the two light greys to readable (Classic Day itself stays untouched). */
html[data-template="compact"][data-mode="day"]{ --c-muted:#6b6960; --c-muted-2:#767369; --c-gold:#8A6300; --c-warn-solid:#8A6300; }
/* --sk-* names are aliases of the contract so every template (Classic included) can use the shared rules below. */
html{
  --sk-ground:var(--c-ground); --sk-surface:var(--c-surface); --sk-surface-2:var(--c-surface-2); --sk-surface-3:var(--c-surface-3);
  --sk-ink:var(--c-ink); --sk-ink-2:var(--c-ink-2); --sk-muted:var(--c-muted); --sk-hair:var(--c-hair); --sk-hair-2:var(--c-hair-2);
  --sk-navy:var(--c-accent); --sk-navy-ink:var(--c-accent-ink); --sk-navy-soft:var(--c-accent-soft); --sk-red:var(--c-bad); --sk-red-soft:var(--c-bad-soft);
  --sk-btn:var(--c-btn); --sk-btn-ink:var(--c-btn-ink);
  --sk-shadow:0 1px 2px rgba(20,18,10,.04), 0 10px 30px -18px rgba(20,18,10,.2); --sk-r:14px; --sk-r-sm:8px;
  --sk-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --sk-serif:Georgia,"Times New Roman",serif;
}

/* ── sidebar (hidden in Classic) ── */
.sk-side{display:none}

/* ═══════════════ Modern + Night ═══════════════ */
html:is([data-template="modern"],[data-template="modern2"]) body{background:var(--sk-ground);color:var(--sk-ink);font-family:var(--sk-sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}

/* topbar → light utility bar */
html:is([data-template="modern"],[data-template="modern2"]) .topbar{background:var(--sk-surface);border-bottom:1px solid var(--sk-hair);height:56px;color:var(--sk-ink);padding:0 18px}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-logo{color:var(--sk-ink);display:flex;align-items:center;gap:8px}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-logo>span:not(.amp-logo-chip){color:var(--sk-muted);font-weight:700;letter-spacing:.06em;font-size:11px}
html:is([data-template="modern"],[data-template="modern2"]) .amp-logo-chip{background:#fff;border:1px solid var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-info{color:var(--sk-muted);font-weight:600}
html:is([data-template="modern"],[data-template="modern2"]) .btn-out{color:var(--sk-ink-2);border:1px solid var(--sk-hair);border-radius:999px;padding:5px 11px;background:var(--sk-surface);font-weight:600}
html:is([data-template="modern"],[data-template="modern2"]) .btn-out:hover{background:var(--sk-surface-2);color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill,html:is([data-template="modern"],[data-template="modern2"]) .sys-pill,html:is([data-template="modern"],[data-template="modern2"]) #esc-ticker{background:var(--sk-surface-2);color:var(--sk-ink);border:1px solid var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill:hover,html:is([data-template="modern"],[data-template="modern2"]) .sys-pill:hover{background:var(--sk-surface-3);border-color:var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill .qn-n.zero{background:var(--sk-surface-3);color:var(--sk-muted)}

/* top tabs go away, sidebar comes in */
html:not([data-template="classic"]) #a-nav{display:none}
html:not([data-template="classic"]) .sk-side{display:flex;flex-direction:column;gap:4px;position:fixed;left:0;top:56px;bottom:0;width:236px;background:var(--sk-surface);border-right:1px solid var(--sk-hair);overflow:auto;padding:12px 10px 16px;z-index:40}
.sk-grp{display:flex;flex-direction:column}
.sk-gh{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 10px;border:0;background:transparent;border-radius:var(--sk-r-sm);color:var(--sk-muted);font:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-align:left;cursor:pointer;width:100%}
.sk-gh:hover{background:var(--sk-surface-2)}
.sk-gh svg{width:13px;height:13px;margin-left:auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease;opacity:.7}
.sk-grp[data-open="0"] .sk-gh svg{transform:rotate(-90deg)}
.sk-items{display:flex;flex-direction:column;gap:1px;padding-bottom:6px}
.sk-grp[data-open="0"] .sk-items{display:none}
.sk-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border:0;border-radius:var(--sk-r-sm);background:transparent;color:var(--sk-ink-2);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;width:100%}
.sk-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75}
.sk-item .sk-n{margin-left:auto;font-size:11px;font-weight:800;color:var(--sk-muted);background:var(--sk-surface-2);border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.sk-item .sk-n.hot{color:var(--sk-red);background:var(--sk-red-soft)}
.sk-item:hover{background:var(--sk-surface-2);color:var(--sk-ink)}
.sk-item.on{background:var(--sk-navy-soft);color:var(--sk-navy);font-weight:800}
.sk-item.on svg{opacity:1}
.sk-item[hidden]{display:none}
.sk-foot{margin-top:auto;padding:10px 10px 0;color:var(--sk-muted);font-size:11px;border-top:1px solid var(--sk-hair-2)}
html:not([data-template="classic"]) #page-admin .main{max-width:none;margin:0 0 0 236px;padding:24px 26px 30px}
@media (max-width:900px){
  html:not([data-template="classic"]) .sk-side{display:none}
  html:not([data-template="classic"]) #a-nav{display:flex;background:var(--sk-surface);border-color:var(--sk-hair)}
  html:not([data-template="classic"]) #page-admin .main{margin-left:0;padding:16px}
  /* phone: the bar wraps instead of forcing a sideways scroll (its contents are the folded ⋯ More menu + ticker) */
  html:not([data-template="classic"]) .topbar{height:auto;min-height:52px;flex-wrap:wrap;padding:6px 12px;gap:6px 10px}
  html:not([data-template="classic"]) .topbar-logo,html:not([data-template="classic"]) .topbar-right{flex-wrap:wrap;max-width:100%;min-width:0}
  html:not([data-template="classic"]) .topbar-right{width:100%;justify-content:flex-end;gap:6px}
}

/* generic surfaces */
html:is([data-template="modern"],[data-template="modern2"]) .card{background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:var(--sk-r);box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .btn{border-radius:999px;font-weight:700;border-color:var(--sk-hair);background:var(--sk-surface);color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .btn:hover{background:var(--sk-surface-2)}
html:is([data-template="modern"],[data-template="modern2"]) .btn-p{background:var(--sk-btn);color:var(--sk-btn-ink);border-color:var(--sk-btn)}
html:is([data-template="modern"],[data-template="modern2"]) .btn-p:hover{background:var(--sk-btn);opacity:.9}
html:is([data-template="modern"],[data-template="modern2"]) input,html:is([data-template="modern"],[data-template="modern2"]) select,html:is([data-template="modern"],[data-template="modern2"]) textarea{background:var(--sk-surface);border-color:var(--sk-hair);color:var(--sk-ink);border-radius:10px}
html:is([data-template="modern"],[data-template="modern2"]) input:focus,html:is([data-template="modern"],[data-template="modern2"]) select:focus,html:is([data-template="modern"],[data-template="modern2"]) textarea:focus{border-color:var(--sk-navy);box-shadow:0 0 0 3px var(--sk-navy-soft)}
html:is([data-template="modern"],[data-template="modern2"]) .badge{font-weight:700}
html:is([data-template="modern"],[data-template="modern2"]) .subtabs{background:var(--sk-surface);border-color:var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .stab{color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) .stab.active{color:var(--sk-ink);border-bottom-color:var(--sk-ink)}
html[data-mode="night"] .nav-menu{background:var(--sk-surface);border-color:var(--sk-hair)}
html[data-mode="night"] .nav-menu-item{color:var(--sk-ink)}
html[data-mode="night"] .nav-menu-item:hover{background:var(--sk-surface-2)}
html:is([data-template="modern"],[data-template="modern2"]) table{color:var(--sk-ink)}
html[data-mode="night"] th,html[data-mode="night"] td{border-color:var(--sk-hair-2)}
html[data-mode="night"] .cmdk{background:var(--sk-surface);color:var(--sk-ink)}
html[data-mode="night"] .cmdk-in{border-color:var(--sk-hair)}
html[data-mode="night"] .cmdk-in input{color:var(--sk-ink)}
html[data-mode="night"] .cmdk-row.sel{background:var(--sk-surface-2)}

/* ── Shipments: tiles ── */
html:is([data-template="modern"],[data-template="modern2"]) .sx-tiles{gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile{background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:var(--sk-r);padding:12px 14px 13px;box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile:hover{transform:none;box-shadow:var(--sk-shadow);border-color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile.on{border-color:var(--sk-navy);box-shadow:0 0 0 1.5px var(--sk-navy)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tn{font-family:var(--sk-serif);font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1.05}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tl{text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;color:var(--sk-muted);margin-top:6px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tdot{width:8px;height:8px}

/* ── Shipments: search row ── */
html:is([data-template="modern"],[data-template="modern2"]) .srow input,html:is([data-template="modern"],[data-template="modern2"]) .srow select{height:38px;border-radius:999px;padding:0 14px;font-weight:600;box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .srow select{font-weight:700}
html:is([data-template="modern"],[data-template="modern2"]) .as-q-summary{color:var(--sk-ink-2);font-size:12.5px}
html:is([data-template="modern"],[data-template="modern2"]) .as-q-summary .miss{color:var(--sk-red)}
html:is([data-template="modern"],[data-template="modern2"]) .as-q-summary button{border-radius:999px;border-color:var(--sk-hair);background:var(--sk-surface);color:var(--sk-ink);font-weight:700}

/* ── Shipments: load rows ── */
html:is([data-template="modern"],[data-template="modern2"]) .ship-card{background:var(--sk-surface);border:1px solid var(--sk-hair)!important;border-radius:var(--sk-r);margin-bottom:8px;box-shadow:var(--sk-shadow);position:relative}
html:is([data-template="modern"],[data-template="modern2"]) .ship-card:hover{box-shadow:var(--sk-shadow);border-color:var(--sk-muted)!important}
html:is([data-template="modern"],[data-template="modern2"]) .ship-card.open{border-color:var(--sk-navy)!important}
html:is([data-template="modern"],[data-template="modern2"]) .sx-row{grid-template-columns:184px minmax(240px,1fr) 208px 128px 24px;gap:14px;min-height:66px;padding:0 14px 0 16px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-order{font-family:var(--sk-sans);font-weight:800;font-size:14px;letter-spacing:.005em;color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-meta{color:var(--sk-muted);font-size:11.5px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-meta b{font-family:var(--sk-sans);font-weight:700;color:var(--sk-ink-2)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-lane{white-space:normal;font-weight:700;font-size:13.5px;color:var(--sk-ink);text-wrap:balance}
html:is([data-template="modern"],[data-template="modern2"]) .sx-arr{color:var(--sk-muted);padding:0 4px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-sub{color:var(--sk-muted);font-size:11.5px;margin-top:3px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-loc{color:var(--sk-navy)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-dates{font-size:12px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-d span{color:var(--sk-muted);width:52px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-d b{font-weight:700;color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-badge{font-weight:800;height:26px;padding:0 10px 0 8px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-chev{color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) .ship-body{border-top:1px solid var(--sk-hair-2)}
html:is([data-template="modern"],[data-template="modern2"]) .dgrid,html:is([data-template="modern"],[data-template="modern2"]) .ditem,html:is([data-template="modern"],[data-template="modern2"]) .pod-bar{border-color:var(--sk-hair-2)}
html:is([data-template="modern"],[data-template="modern2"]) .dlbl{color:var(--sk-muted)}
html[data-mode="night"] .dval{color:var(--sk-ink)}
@media (max-width:1100px){
  html:is([data-template="modern"],[data-template="modern2"]) .sx-row{grid-template-columns:1fr 1fr 24px;grid-auto-rows:auto;padding:12px 14px;gap:8px 12px}
  html:is([data-template="modern"],[data-template="modern2"]) .sx-route{grid-column:1/3}
}

/* ═══════════════ Round 2 (2026-09-11, after Reetesh's live screenshot) ═══════════════ */
/* Anything Modern/Night-only is marked .sk-only; Classic never renders it. */
html[data-template="classic"] .sk-only{display:none}   /* hide-only: elements keep their own display (grid, flex) in the other templates */
html:not([data-template="classic"]) #page-admin .main{max-width:1560px;margin:0 auto 0 236px}

/* topbar: never wrap; fold the utility buttons */
html:not([data-template="classic"]) .topbar{flex-wrap:nowrap;gap:12px;overflow:visible}
html:not([data-template="classic"]) .topbar-right{gap:6px;flex-wrap:nowrap;min-width:0}
html:not([data-template="classic"]) .topbar .btn-out{white-space:nowrap;padding:5px 10px;font-size:12px;line-height:1.2}
html:not([data-template="classic"]) .topbar .btn-out.sk-folded{display:none}
html:is([data-template="modern"],[data-template="modern2"]) #shift-btn{background:var(--sk-surface)!important;border-color:var(--sk-hair)!important;color:var(--sk-ink)!important;max-width:220px;overflow:hidden;text-overflow:ellipsis}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-info{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill{padding:3px 8px;margin-left:4px;font-size:11.5px}
.sk-more{position:relative;display:inline-block}
.sk-more summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.sk-more summary::-webkit-details-marker{display:none}
.sk-more .sk-n{font-size:10.5px;font-weight:800;color:var(--sk-red);background:var(--sk-red-soft);border-radius:999px;padding:0 6px}
.sk-more-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:12px;box-shadow:var(--sk-shadow);padding:4px;z-index:60}
.sk-more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--sk-ink);font:inherit;font-size:13px;font-weight:600;text-align:left;border-radius:8px;cursor:pointer}
.sk-more-item:hover{background:var(--sk-surface-2)}
.sk-more-item .sk-n{margin-left:auto}
.sk-more-item[hidden]{display:none}

/* Shipments: page header + quick views */
html:not([data-template="classic"]) .sk-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:2px 0 16px}
.sk-h1{margin:0;font-family:var(--sk-serif);font-weight:500;font-size:34px;letter-spacing:-.02em;line-height:1;color:var(--sk-ink)}
.sk-sub{color:var(--sk-muted);font-size:13px;padding-bottom:5px}
.sk-sub b{color:var(--sk-ink);font-weight:800}
.sk-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sk-actions .btn{height:34px;padding:0 14px}
html:not([data-template="classic"]) .sk-views{display:inline-flex;gap:4px;padding:4px;background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:999px;margin:0 0 14px;flex-wrap:wrap}
.sk-view{border:0;background:transparent;border-radius:999px;height:30px;padding:0 13px;font:inherit;font-weight:700;font-size:13px;color:var(--sk-ink-2);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.sk-view .k{font-size:11px;font-weight:800;color:var(--sk-muted)}
.sk-view:hover{background:var(--sk-surface-2)}
.sk-view.on{background:var(--sk-btn);color:var(--sk-btn-ink)}
.sk-view.on .k{color:inherit;opacity:.75}

/* Shipments: tiles in two rows of five, with a meaning line */
html:is([data-template="modern"],[data-template="modern2"]) .sx-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile{display:flex;flex-direction:column;gap:3px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tl{order:-1;margin:0 0 2px}
html:not([data-template="classic"]) .sx-tile .ts{display:block;font-size:11.5px;color:var(--sk-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1300px){ html:is([data-template="modern"],[data-template="modern2"]) .sx-tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Shipments: one table instead of stacked cards */
html:not([data-template="classic"]) #a-ships-table{background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:var(--sk-r);box-shadow:var(--sk-shadow);overflow:hidden}
html:not([data-template="classic"]) #a-ships-table>div{margin-bottom:0!important}
html:not([data-template="classic"]) #a-ships-table .ship-card{border:0!important;border-radius:0;margin:0;box-shadow:none;background:transparent}
html:not([data-template="classic"]) #a-ships-table>div+div{border-top:1px solid var(--sk-hair-2)}
html:not([data-template="classic"]) #a-ships-table>div>div[style*="flex"]{padding-left:10px}
html:not([data-template="classic"]) #a-ships-table .ship-card:hover{background:var(--sk-surface-2)}
html:not([data-template="classic"]) #a-ships-table .ship-card.open{background:var(--sk-surface-2);box-shadow:inset 3px 0 0 var(--sk-navy)}
html:not([data-template="classic"]) .sx-head{display:grid;grid-template-columns:16px 46px 176px minmax(200px,1fr) 200px 186px 118px 24px;gap:0 12px;align-items:center;min-height:38px;padding:0 14px 0 10px;background:var(--sk-surface-2);color:var(--sk-muted);font-size:11.5px;font-weight:800;border-bottom:1px solid var(--sk-hair-2)}
html:not([data-template="classic"]) .sx-head>div:first-child{grid-column:1/3}
html:not([data-template="classic"]) .sx-row{grid-template-columns:46px 176px minmax(200px,1fr) 200px 186px 118px 24px;gap:0 12px;min-height:70px;padding:8px 14px 8px 34px}   /* 34px clears the absolutely-positioned row checkbox */
.sx-av{width:38px;height:38px;border-radius:11px;color:var(--c-on-solid);font-weight:800;font-size:12px;display:grid;place-items:center;letter-spacing:.02em}
.sx-prog{display:flex;align-items:center;margin-top:7px;max-width:240px}
.sx-prog i{width:8px;height:8px;border-radius:50%;border:2px solid var(--pc,var(--sk-muted));background:var(--sk-surface);flex:none;display:block}
.sx-prog i.f{background:var(--pc,var(--sk-muted))}
.sx-prog b{flex:1;height:2px;background:var(--sk-hair);position:relative;margin:0 3px;display:block}
.sx-prog b::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--pc,var(--sk-muted))}
.sx-car .c{font-weight:700;font-size:13px;color:var(--sk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-car .c.none{color:var(--sk-muted);font-weight:600}
.sx-car .c2{color:var(--sk-muted);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-docs{display:flex;gap:4px;margin-top:6px}
.sx-docs .doc{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--sk-surface-3);color:var(--sk-muted)}
.sx-docs .doc.ok{background:var(--c-ok-soft);color:var(--c-ok)}
html[data-mode="night"] .sx-docs .doc.ok{background:var(--c-ok-soft);color:var(--c-ok)}
html:not([data-template="classic"]) .sx-dates{font-size:12px;min-width:0}
html:not([data-template="classic"]) .sx-d{gap:8px}
html:not([data-template="classic"]) .sx-stat .btn-s{display:block;margin-top:6px;border-radius:999px;border:1px solid var(--sk-hair);background:var(--sk-surface);color:var(--sk-ink-2);font-weight:700;font-size:11.5px;padding:3px 10px}
html:not([data-template="classic"]) #a-ships-table .empty{padding:28px;text-align:center;color:var(--sk-muted)}
@media (max-width:1250px){
  html:not([data-template="classic"]) .sx-head{display:none}
  html:not([data-template="classic"]) .sx-row{grid-template-columns:46px 1fr 1fr 24px;grid-auto-rows:auto;padding:12px 14px 12px 4px;gap:6px 12px}
  html:not([data-template="classic"]) .sx-route{grid-column:2/4}
  html:not([data-template="classic"]) .sx-stat{justify-self:end}
}

html[data-mode="night"] .card,html[data-mode="night"] .dgrid,html[data-mode="night"] .ditem{color:var(--sk-ink)}
html[data-mode="night"] .loc-bar{background:var(--sk-surface-2);border-color:var(--sk-hair);color:var(--sk-ink-2)}

/* ── Night: the few things every template hard-codes light ── */
html[data-mode="night"] .amp-logo-chip{background:#fff;border:1px solid var(--c-hair)}
html[data-mode="night"] .login-brand{display:inline-block;background:#fff;border-radius:10px;padding:6px 14px;margin:0 auto 20px}
html[data-mode="night"] #page-login .login-card{text-align:center}
html[data-mode="night"] #page-login .login-card>*:not(.login-brand){text-align:left}

/* ── Appearance picker (all templates) ── */
.ap-menu{position:relative;display:inline-block}
.ap-pop,.sk-more-menu{--c-muted:var(--c-muted-page);--c-muted-2:var(--c-muted-2-page);--c-ink-3:var(--c-ink-3-page)}   /* undo the bar's grey scoping inside dropdowns */
.ap-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.ap-menu>summary::-webkit-details-marker{display:none}
.ap-glyph{font-size:13px;line-height:1}
.ap-pop{position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-hair);border-radius:12px;box-shadow:0 12px 32px -12px rgba(0,0,0,.35);padding:8px;z-index:60;text-align:left}
.ap-h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);padding:6px 8px 4px}
.ap-row{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--c-ink);font:inherit;text-align:left;cursor:pointer}
.ap-row b{font-size:13px;font-weight:700}
.ap-row span{font-size:11.5px;color:var(--c-ink-3)}
.ap-row:hover{background:var(--c-surface-2)}
.ap-row.on{border-color:var(--c-accent);background:var(--c-accent-soft)}
.ap-row.on b::after{content:" \2713";color:var(--c-accent)}
.ap-seg{display:flex;gap:4px;padding:4px 8px 6px}
.ap-opt{flex:1;padding:6px 0;border:1px solid var(--c-hair);border-radius:8px;background:var(--c-surface);color:var(--c-ink-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ap-opt.on{background:var(--c-btn);color:var(--c-btn-ink);border-color:var(--c-btn)}
html[data-template="classic"] .topbar .ap-menu>summary{color:var(--c-bar-ink);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 10px}
html[data-template="classic"] .topbar .ap-menu>summary:hover{background:var(--c-bar-2)}

/* ═══════════════ Compact (2026-09-13): dense operator view. Layout/type/density only — colours are tokens. ═══════════════ */
html[data-template="compact"] body{font-size:12.5px;line-height:1.35;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
html[data-template="compact"] .topbar{height:44px;padding:0 12px;background:var(--c-bar);color:var(--c-bar-ink);border-bottom:1px solid var(--c-hair)}
html[data-template="compact"] .topbar .btn-out{padding:4px 9px;font-size:11.5px;border-radius:6px;color:var(--c-bar-ink);border:1px solid rgba(255,255,255,.18);background:transparent}
html[data-template="compact"] .topbar .btn-out:hover{background:var(--c-bar-2)}
html[data-template="compact"] .topbar .qnav-pill,html[data-template="compact"] .topbar .sys-pill{background:var(--c-bar-2);color:var(--c-bar-ink);border:1px solid rgba(255,255,255,.12);padding:2px 7px;font-size:11px}
html[data-template="compact"] .topbar-logo{color:var(--c-bar-ink)}
html[data-template="compact"] .topbar{--c-muted:var(--c-bar-muted);--c-muted-2:var(--c-bar-muted);--c-ink-3:var(--c-bar-ink)}   /* the dark bar gets bar greys, not surface greys */
html[data-template="compact"] .topbar-logo>span:not(.amp-logo-chip){color:var(--c-bar-muted)}
html[data-template="compact"] .topbar-info{color:var(--c-bar-muted);font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-template="compact"] #shift-btn{max-width:200px;overflow:hidden;text-overflow:ellipsis}
html[data-template="compact"] .sk-side{top:44px;width:184px;gap:1px;padding:8px 6px 12px}
html[data-template="compact"] .sk-gh{height:24px;font-size:10px;padding:0 6px 0 8px}
html[data-template="compact"] .sk-item{height:26px;font-size:12px;padding:0 8px;border-radius:4px;gap:8px}
html[data-template="compact"] .sk-item svg{width:14px;height:14px}
html[data-template="compact"] .sk-item .sk-n{font-size:10px;padding:0 6px;min-width:18px}
html[data-template="compact"] #page-admin .main{max-width:none;margin:0 0 0 184px;padding:12px 16px 24px}
html[data-template="compact"] .sk-h1{font-family:inherit;font-size:18px;font-weight:700;letter-spacing:-.01em}
html[data-template="compact"] .sk-sub{font-size:12px;padding-bottom:2px}
html[data-template="compact"] .sk-head{margin:0 0 10px;gap:12px}
html[data-template="compact"] .sk-actions .btn{height:26px;padding:0 10px}
html[data-template="compact"] .sk-views{padding:2px;margin:0 0 8px;border-radius:6px}
html[data-template="compact"] .sk-view{height:24px;padding:0 9px;font-size:12px;border-radius:4px}
html[data-template="compact"] .card{background:transparent;border:0;border-top:1px solid var(--c-hair);border-radius:0;box-shadow:none;padding:10px 0;margin-bottom:8px}
html[data-template="compact"] .card .card{border-top:0;padding:6px 0}
html[data-template="compact"] .btn{padding:0 10px;height:26px;line-height:24px;font-size:12px;border-radius:6px;font-weight:600}
html[data-template="compact"] input,html[data-template="compact"] select,html[data-template="compact"] textarea{padding:3px 8px;font-size:12.5px;border-radius:6px;min-height:28px}
html[data-template="compact"] textarea{min-height:56px}
html[data-template="compact"] th{padding:5px 8px;font-size:10.5px}
html[data-template="compact"] td{padding:5px 8px;height:30px}
html[data-template="compact"] .subtabs{padding:0}
html[data-template="compact"] .stab{padding:8px 10px;font-size:12px}
/* tiles → one stat strip */
html[data-template="compact"] .sx-tiles{display:flex;flex-wrap:wrap;gap:0;margin-bottom:8px;border:1px solid var(--c-hair);border-radius:6px;background:var(--c-surface);overflow:hidden}
html[data-template="compact"] .sx-tile{flex:0 0 auto;display:flex;flex-direction:row;align-items:baseline;gap:8px;padding:6px 12px;border:0;border-right:1px solid var(--c-hair);border-radius:0;background:transparent;box-shadow:none}
html[data-template="compact"] .sx-tile:last-child{border-right:0}
html[data-template="compact"] .sx-tile:hover{transform:none;box-shadow:none;background:var(--c-surface-2);border-color:var(--c-hair)}
html[data-template="compact"] .sx-tile.on{box-shadow:inset 0 -2px 0 var(--c-accent);border-color:var(--c-hair)}
html[data-template="compact"] .sx-tile .tn{font-size:15px;font-weight:700;font-family:inherit;letter-spacing:0;line-height:1}
html[data-template="compact"] .sx-tile .tl{order:0;margin:0;font-size:10.5px;text-transform:none;letter-spacing:0;white-space:nowrap}
html[data-template="compact"] .sx-tile .ts{display:none}
html[data-template="compact"] .sx-tile .tdot{width:6px;height:6px;margin-right:0}
/* load rows */
html[data-template="compact"] #a-ships-table{border-radius:6px;box-shadow:none}
html[data-template="compact"] .ship-card{border-radius:0;margin-bottom:0;box-shadow:none}
html[data-template="compact"] .sx-head{min-height:28px;font-size:10.5px;padding:0 10px 0 8px;grid-template-columns:12px 34px 150px minmax(180px,1fr) 176px 160px 108px 18px;gap:0 10px}
html[data-template="compact"] .sx-row{min-height:40px;padding:4px 10px 4px 30px;gap:0 10px;grid-template-columns:34px 150px minmax(180px,1fr) 176px 160px 108px 18px}
html[data-template="compact"] .sx-av{width:28px;height:28px;border-radius:6px;font-size:10.5px}
html[data-template="compact"] .sx-order{font-size:12.5px;font-weight:700}
html[data-template="compact"] .sx-lane{font-size:12.5px;font-weight:600}
html[data-template="compact"] .sx-meta,html[data-template="compact"] .sx-sub,html[data-template="compact"] .sx-car .c2{font-size:11px;margin-top:1px}
html[data-template="compact"] .sx-car .c{font-size:12.5px}
html[data-template="compact"] .sx-docs{margin-top:3px}
html[data-template="compact"] .sx-prog{margin-top:4px;max-width:200px}
html[data-template="compact"] .sx-dates{font-size:11.5px}
html[data-template="compact"] .sx-badge{height:20px;padding:0 7px;font-size:10.5px;font-weight:700}
html[data-template="compact"] .sx-stat .btn-s{margin-top:4px;font-size:11px;padding:2px 8px}
html[data-template="compact"] .srow input,html[data-template="compact"] .srow select{height:28px;min-height:28px;border-radius:6px;padding:0 10px;box-shadow:none;font-weight:500}
html[data-template="compact"] .srow{gap:6px}
html[data-template="compact"] .srow select{flex:0 1 auto;max-width:168px;font-size:12px}
html[data-template="compact"] .srow input[type="text"],html[data-template="compact"] .srow input[type="search"]{flex:1 1 220px;min-width:200px}
@media (max-width:1250px){
  html[data-template="compact"] .sx-row{grid-template-columns:34px 1fr 1fr 18px;padding:8px 10px 8px 4px;gap:4px 10px}
}
html:is([data-template="modern"],[data-template="modern2"]) .sys-pill.is-down{background:var(--c-bad-solid);color:var(--c-on-solid);border-color:var(--c-bad-solid)}
html:is([data-template="modern"],[data-template="modern2"]) .sys-pill.is-degraded{background:var(--c-warn-soft);color:var(--c-warn);border-color:var(--c-warn-line)}

/* ═══════════════ Operations boards: Dock Watch, Escalations, Bazaar, Extra Charges (2026-09-13) ═══════════════ */
/* Modern */
html:is([data-template="modern"],[data-template="modern2"]) .op-tile,html:is([data-template="modern"],[data-template="modern2"]) .xc-tile{border-radius:var(--sk-r);box-shadow:var(--sk-shadow);padding:12px 14px 13px;min-width:124px}
html:is([data-template="modern"],[data-template="modern2"]) .op-tile.on{border:1px solid var(--tc);box-shadow:0 0 0 1.5px var(--tc)}
html:is([data-template="modern"],[data-template="modern2"]) .op-tile-n,html:is([data-template="modern"],[data-template="modern2"]) .xc-tile-val{font-family:var(--sk-serif);font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1.05}
html:is([data-template="modern"],[data-template="modern2"]) .op-tile-l,html:is([data-template="modern"],[data-template="modern2"]) .xc-tile-lbl{font-size:12px;font-weight:700;color:var(--c-muted);margin-top:4px}
html:is([data-template="modern"],[data-template="modern2"]) .op-card{border-radius:var(--sk-r);box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .op-card.open{box-shadow:0 0 0 1.5px var(--c-accent),var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .op-table,html:is([data-template="modern"],[data-template="modern2"]) .xc-grouped-table{background:var(--c-surface);border:1px solid var(--c-hair);border-radius:var(--sk-r);box-shadow:var(--sk-shadow);overflow:hidden;border-collapse:separate!important;border-spacing:0}
html:is([data-template="modern"],[data-template="modern2"]) .op-table th,html:is([data-template="modern"],[data-template="modern2"]) .xc-grouped-table th{background:var(--c-surface-2);color:var(--c-muted);font-size:11.5px!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;border-bottom:1px solid var(--c-hair-2)!important}
html:is([data-template="modern"],[data-template="modern2"]) .op-table td{border-bottom:1px solid var(--c-hair-2)}
html:is([data-template="modern"],[data-template="modern2"]) .op-table tbody tr:hover td{background:var(--c-surface-2)}
html:is([data-template="modern"],[data-template="modern2"]) #fpw-tiles,html:is([data-template="modern"],[data-template="modern2"]) #esc-tiles,html:is([data-template="modern"],[data-template="modern2"]) #bazaar-tiles{gap:10px!important}
/* Compact */
html[data-template="compact"] #fpw-tiles,html[data-template="compact"] #esc-tiles,html[data-template="compact"] #bazaar-tiles,html[data-template="compact"] #xc-summary>div{gap:0!important;border:1px solid var(--c-hair);border-radius:6px;background:var(--c-surface);overflow:hidden;flex-wrap:wrap}
html[data-template="compact"] .op-tile,html[data-template="compact"] .xc-tile{display:flex;align-items:baseline;gap:7px;min-width:0!important;padding:6px 12px;border:0;border-right:1px solid var(--c-hair);border-radius:0;background:transparent!important;box-shadow:none;transform:none!important}
html[data-template="compact"] .op-tile.on,html[data-template="compact"] .xc-tile.active{border:0;border-right:1px solid var(--c-hair);box-shadow:inset 0 -2px 0 var(--tc,currentColor)!important;background:var(--c-surface-2)!important}
html[data-template="compact"] .op-tile-n,html[data-template="compact"] .xc-tile-val{font-size:15px;font-weight:700;line-height:1}
html[data-template="compact"] .op-tile-l,html[data-template="compact"] .xc-tile-lbl{font-size:10.5px;margin:0;white-space:nowrap}
html[data-template="compact"] #xc-summary .btn-out{margin-left:auto;align-self:center;padding:0 10px}
html[data-template="compact"] .op-card{border-radius:0;margin-bottom:0;border-width:0 0 1px 0}
html[data-template="compact"] .op-card:first-child{border-top-width:1px}
html[data-template="compact"] .op-card>div:first-child{padding:6px 8px!important;gap:8px!important}
html[data-template="compact"] .op-table th,html[data-template="compact"] .xc-grouped-table th{padding:4px 7px!important;font-size:10px!important}
html[data-template="compact"] .op-table td,html[data-template="compact"] .xc-grouped-table td,html[data-template="compact"] .xc-po-row td{padding:4px 7px!important;font-size:12px}
html[data-template="compact"] .op-table{font-size:12px!important}
html[data-template="compact"] #shift-btn{background:var(--c-bar-2)!important;border-color:transparent!important;color:var(--c-bar-ink)!important;max-width:200px;overflow:hidden;text-overflow:ellipsis}
/* Night: the Extra Charges contract banner keeps its manila gradient in Day (Classic-exact); at night it sits on a raised surface */
html[data-mode="night"] .xc-po-banner td{background:var(--c-surface-3)!important}
html[data-mode="night"] .xc-po-banner td::before{background:var(--c-accent)!important}

/* ═══════════════ Modern 2 (2026-09-13): FleetGen-style — white grouped sidebar, no top bar, chips, airy tables ═══════════════ */
html[data-template="modern2"] body{font-family:var(--sk-sans)}
html[data-template="modern2"] #page-admin .topbar{display:none} /* admin only: the sidebar carries sign-out + appearance; customer and carrier pages keep the bar */
html[data-template="modern2"] .sk-side{top:0;width:250px;padding:14px 12px 14px;gap:2px}
html[data-template="modern2"] #page-admin .main{margin:0 0 0 250px;max-width:none;padding:20px 22px 28px}
@media (max-width:900px){ /* phone: no sidebar, so no offset, and the bar (sign out, appearance) comes back — must sit AFTER the two rules above (same specificity) */
  html[data-template="modern2"] #page-admin .main{margin:0;padding:16px}
  html[data-template="modern2"] #page-admin .topbar{display:flex}
}
/* sidebar chrome (built for every non-classic template, shown only here) */
.sk-brand,.sk-jump,.sk-foot2{display:none}
html[data-template="modern2"] .sk-brand{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 12px}
.sk-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--c-ink)}
.sk-logo i{width:26px;height:26px;border-radius:7px;background:var(--c-btn);color:var(--c-btn-ink);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.sk-bell{position:relative;color:var(--c-muted);border:0;background:transparent;cursor:pointer;padding:4px;font:inherit}
.sk-bell svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.sk-bell b{position:absolute;top:-4px;right:-6px;background:var(--c-bad-solid);color:var(--c-on-solid);font-size:9.5px;font-weight:800;border-radius:999px;padding:1px 5px}
.sk-bell b[hidden]{display:none}
html[data-template="modern2"] .sk-jump{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--c-hair);border-radius:9px;color:var(--c-muted);font:inherit;font-size:12px;margin:0 2px 6px;cursor:pointer;background:var(--c-surface);white-space:nowrap;overflow:hidden;width:calc(100% - 4px);text-align:left}
.sk-jump svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.sk-jump kbd{margin-left:auto;font:inherit;font-size:10.5px;font-weight:800;color:var(--c-muted);border:1px solid var(--c-hair);border-radius:5px;padding:1px 5px;background:var(--c-surface-2)}
html[data-template="modern2"] .sk-gh{font-size:10.5px;letter-spacing:.08em;color:var(--c-muted);height:30px;padding:0 10px}
html[data-template="modern2"] .sk-item{height:36px;font-size:13.5px;font-weight:600;color:var(--c-ink-2);border-radius:9px;gap:10px}
html[data-template="modern2"] .sk-item svg{width:17px;height:17px;stroke-width:1.7;opacity:1;color:var(--c-muted)}
html[data-template="modern2"] .sk-item:hover{background:var(--c-surface-2);color:var(--c-ink)}
html[data-template="modern2"] .sk-item.on{background:var(--c-surface-3);color:var(--c-ink);font-weight:700}
html[data-template="modern2"] .sk-item.on svg{color:var(--c-ink)}
html[data-template="modern2"] .sk-item .sk-n{font-size:10.5px;font-weight:800;padding:1px 7px;background:var(--c-surface-3);color:var(--c-ink-3)}
html[data-template="modern2"] .sk-item .sk-n.hot{background:var(--c-bad-soft);color:var(--c-bad)}
html[data-template="modern2"] .sk-foot{display:none}
html[data-template="modern2"] .sk-foot2{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px}
.sk-card{border:1px solid var(--c-hair);border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:10px;background:var(--c-surface);cursor:pointer;color:var(--c-ink);font:inherit;text-align:left;width:100%}
.sk-card .lbl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.sk-card .v{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:6px;margin-top:1px}
.sk-card .dot{width:7px;height:7px;border-radius:50%;background:var(--c-muted-2);display:inline-block;flex:none}
.sk-card .dot.is-live{background:var(--c-ok)}.sk-card .dot.is-down{background:var(--c-bad)}.sk-card .dot.is-degraded{background:var(--c-warn)}
.sk-card .av{width:34px;height:34px;border-radius:9px;background:var(--c-surface-3);color:var(--c-ink);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.sk-card .who{min-width:0;line-height:1.25;flex:1}
.sk-card .who b{display:block;font-size:13px}
.sk-card .who span{display:block;color:var(--c-muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-card .chev{color:var(--c-muted-2);margin-left:auto}
.sk-user{position:relative}
.sk-user>summary{list-style:none}
.sk-user>summary::-webkit-details-marker{display:none}
.sk-user-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--c-surface);border:1px solid var(--c-hair);border-radius:12px;box-shadow:var(--sk-shadow);padding:6px;z-index:70;display:flex;flex-direction:column;gap:2px}
.sk-user-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--c-ink);font:inherit;font-size:13px;font-weight:600;text-align:left;border-radius:8px;cursor:pointer}
.sk-user-menu button:hover{background:var(--c-surface-2)}
.sk-user-menu .sk-n{margin-left:auto;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--c-surface-3);color:var(--c-ink-3)}
.sk-user-menu .sk-n[hidden]{display:none}
.sk-user-menu .sep{height:1px;background:var(--c-hair-2);margin:4px 2px}
.sk-user-menu .ap-menu{display:block}
.sk-user-menu .ap-menu>summary{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--c-ink);font:inherit;font-size:13px;font-weight:600;text-align:left;border-radius:8px;cursor:pointer}
.sk-user-menu .ap-menu>summary:hover{background:var(--c-surface-2)}
.sk-user-menu .ap-pop{position:static;border:0;box-shadow:none;padding:2px 0 4px;min-width:0;background:transparent}   /* opens inline: the sidebar's overflow would clip a floating panel */
.sk-user-menu{max-height:calc(100vh - 110px);overflow:auto}
/* page header, quick views, tiles, search, table */
html[data-template="modern2"] .sk-h1{font-family:var(--sk-sans);font-size:18px;font-weight:700;letter-spacing:-.01em}
html[data-template="modern2"] .sk-sub{font-size:12.5px;padding-bottom:1px}
html[data-template="modern2"] .sk-head{align-items:center;margin:0 0 14px}
html[data-template="modern2"] .btn{border-radius:999px;font-weight:700;font-size:12.5px;box-shadow:none}
html[data-template="modern2"] .btn-p{background:var(--c-btn);color:var(--c-btn-ink);border-color:var(--c-btn)}
html[data-template="modern2"] .sk-views{border-radius:10px;padding:3px}
html[data-template="modern2"] .sk-view{border-radius:8px;height:30px}
html[data-template="modern2"] .sx-tiles{gap:8px;grid-template-columns:repeat(10,minmax(0,1fr))}
@media (max-width:1300px){html[data-template="modern2"] .sx-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
html[data-template="modern2"] .sx-tile{border-radius:10px;padding:10px 12px 11px;box-shadow:none;gap:2px}
html[data-template="modern2"] .sx-tile .tn{font-family:var(--sk-sans);font-size:20px;font-weight:800;letter-spacing:-.02em}
html[data-template="modern2"] .sx-tile .tl{font-size:11.5px;font-weight:600;color:var(--c-muted);margin:0}
html[data-template="modern2"] .sx-tile .ts{display:none}
html[data-template="modern2"] .sx-tile.on{border-color:var(--c-hair);box-shadow:0 0 0 1.5px var(--c-ink) inset}
html[data-template="modern2"] .sx-tile:hover{border-color:var(--c-hair);box-shadow:none;background:var(--c-surface-2)}
html[data-template="modern2"] .srow input,html[data-template="modern2"] .srow select{height:34px;box-shadow:none;border-radius:999px}
html[data-template="modern2"] #a-ships-table{box-shadow:none;border-radius:12px}
html[data-template="modern2"] .sx-head{background:var(--c-surface-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);min-height:38px}
html[data-template="modern2"] .sx-av{width:34px;height:34px;border-radius:9px;background:var(--c-surface-3)!important;color:var(--c-ink);font-size:11.5px}
html[data-template="modern2"] .sx-order{font-size:14px}
html[data-template="modern2"] .sx-badge{border-radius:999px;height:24px;font-size:11.5px;font-weight:800;padding:0 10px 0 8px}
html[data-template="modern2"] .sx-docs .doc{border-radius:999px;font-weight:800;color:var(--c-ink-3)}
html[data-template="modern2"] .sx-chev{color:var(--c-muted-2)}
html[data-template="modern2"] .sx-stat .btn-s{border-radius:8px;height:28px;font-weight:700}
html[data-template="modern2"] .card,html[data-template="modern2"] .op-card,html[data-template="modern2"] .op-table,html[data-template="modern2"] .xc-grouped-table{box-shadow:none;border-radius:12px}
html[data-template="modern2"] .op-tile,html[data-template="modern2"] .xc-tile{box-shadow:none;border-radius:10px;padding:10px 12px 11px;min-width:110px}
html[data-template="modern2"] .op-tile-n,html[data-template="modern2"] .xc-tile-val{font-family:var(--sk-sans);font-size:20px;font-weight:800}
/* load detail as a modal */
.m2-modal{display:none}
html[data-template="modern2"] .m2-modal.open{display:block;position:fixed;inset:0;z-index:900;background:rgba(16,24,40,.45)}
.m2-box{position:relative;max-width:1080px;margin:36px auto;max-height:calc(100vh - 72px);overflow:auto;background:var(--c-surface);border:1px solid var(--c-hair);border-radius:16px;box-shadow:0 30px 80px -30px rgba(16,24,40,.5)}
.m2-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--c-hair);position:sticky;top:0;background:var(--c-surface);z-index:1}
.m2-h .sq{width:40px;height:40px;border-radius:10px;background:var(--c-btn);color:var(--c-btn-ink);display:grid;place-items:center;font-weight:800;flex:none}
.m2-h .t{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m2-h .t small{font-weight:600;color:var(--c-muted);font-size:12.5px}
.m2-h .s{color:var(--c-muted);font-size:12px;margin-top:2px}
.m2-h .x{margin-left:auto;display:flex;gap:8px}
.m2-body{padding:14px 18px 18px}
html[data-template="modern2"] .m2-body .ship-body{border-top:0;display:block}
html[data-template="modern2"] .srow{gap:8px}
html[data-template="modern2"] .srow select{flex:0 1 auto;max-width:190px}
html[data-template="modern2"] .srow input[type="text"],html[data-template="modern2"] .srow input[type="search"]{flex:1 1 240px;min-width:220px}
/* Modern 2: the Tasks board loses Classic's amber panel and tinted cards — neutral surfaces, colour only as a thin edge */
html[data-template="modern2"] .tk-side{background:var(--c-surface);border-color:var(--c-hair)}
html[data-template="modern2"] .tk-side-h,html[data-template="modern2"] .tk-group-h{color:var(--c-muted)}
html[data-template="modern2"] .tk-card:hover{border-color:var(--c-hair);box-shadow:var(--sk-shadow);transform:none}
html[data-template="modern2"] .tk-card-pri-2{background:var(--c-surface);border-color:var(--c-hair);box-shadow:inset 3px 0 0 var(--c-bad)}
html[data-template="modern2"] .tk-card-pri-1{background:var(--c-surface);border-color:var(--c-hair);box-shadow:inset 3px 0 0 var(--c-warn)}
html[data-template="modern2"] .tk-card-mine{box-shadow:inset 3px 0 0 var(--c-accent)}
html[data-template="modern2"] .tk-card-meta .dot{color:var(--c-muted-2)}
html[data-template="modern2"] .tk-search{border-color:var(--c-hair)}
html[data-template="modern2"] .tk-card-notes{background:var(--c-surface-3);border-left-color:var(--c-warn)}
html[data-template="modern2"] .al-toggle{background:var(--c-surface-3);border-color:var(--c-hair)}