/* The app shell (owner-approved redesign 2026-10-29, L1/L3), on every
 * workspace page:
 *   - a 56 px navy icon rail (Ask, Cases, Manuals; Settings at the foot) from
 *     821 px; phones keep the burger and the drawer they had;
 *   - one navy bar: the page or case title on the left, on Ohmix MG the
 *     vehicle chip, Case details and Share on the right, then the overflow
 *     menu (every other destination) and the avatar (organisation, language,
 *     theme, log out);
 *   - the case list and Case details slide out over the page at every width,
 *     so the answer keeps the full width.
 * Colours come from the trust palette in ohmix-ui.css (navy, signal blue);
 * nothing here defines a colour of its own. Loaded after the workspace's own
 * rules, which it overrides where the shell changed.
 */
:root{--rail-w:56px;--top-h:52px}

/* ---- the rail ------------------------------------------------------------
 * Ohmix MG first and dominant (the mark as a 40 px tile, ringed when active);
 * a quiet secondary group lower down (18 px icons, muted, tooltips);
 * expanded (220 px), the mark reads "Ohmix MG" and the groups list inline. */
:root{--rail-wide:220px}
.rail{display:none}
@media (min-width:821px){
  .app.on,.app.on:has(.panel.on > #manual-ask-content:not([hidden])){grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .app.on.rail-wide,.app.on.rail-wide:has(.panel.on > #manual-ask-content:not([hidden])){grid-template-columns:var(--rail-wide) minmax(0,1fr)}
  .app>.side,.app:has(.panel.on > #manual-ask-content:not([hidden]))>.side{display:none !important}
  .app>.rail{display:flex;flex-direction:column;align-items:center;gap:.25rem;grid-column:1;grid-row:1;
    position:sticky;top:0;height:100vh;height:100dvh;box-sizing:border-box;padding:.6rem 0 .6rem;
    background:var(--navy);color:var(--navy-muted);z-index:46}
  .app>.rail ~ div{grid-column:2;grid-row:1;min-width:0}
  .app .top .burger,.app:has(.panel.on > #manual-ask-content:not([hidden])) .top .burger{display:none !important}
  .app .top .top-mark{display:none}
  #mgSideToggle{display:none !important}
  .mg-scrim,#mgSideScrim{left:var(--rail-w) !important}
  .app.rail-wide .mg-scrim,.app.rail-wide #mgSideScrim{left:var(--rail-wide) !important}
  .app.rail-wide .mg-side{left:var(--rail-wide)}
}
.rail .rail-mg{display:flex;align-items:center;gap:.6rem;width:auto;margin:0 0 .4rem;padding:4px;border:0;border-radius:14px;background:transparent;cursor:pointer;color:var(--navy-ink)}
.rail .rail-mg .ohx-mark{display:block;width:40px;height:40px;border-radius:11px;flex:0 0 auto}
.rail .rail-mg-name{display:none;font:600 1.02rem/1 var(--font-sans);color:var(--navy-ink);white-space:nowrap}
.rail .rail-mg:hover .ohx-mark{box-shadow:0 0 0 2px color-mix(in srgb,var(--navy-ink) 25%,transparent)}
.rail .rail-mg.sel .ohx-mark{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--accent)}
.rail .rail-mg:focus-visible{outline:2px solid var(--focus-navy,#8DB5F7);outline-offset:2px}
.rail-sp{flex:1 1 auto}
.rail-sec{display:flex;flex-direction:column;align-items:center;gap:.1rem;width:100%}
.rail .rail-btn{display:flex;align-items:center;justify-content:center;gap:.65rem;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:10px;
  background:transparent;color:var(--navy-muted);font:500 .84rem/1 var(--font-sans);text-align:left;cursor:pointer;position:relative;opacity:.85}
.rail .rail-btn svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail .rail-label{display:none;white-space:nowrap}
.rail .rail-btn:hover{color:var(--navy-ink);background:color-mix(in srgb,var(--navy-2) 70%,transparent);opacity:1}
.rail .rail-btn.sel,.rail .rail-btn[aria-expanded=true]{background:var(--navy-2);color:var(--navy-ink);opacity:1}
.rail .rail-btn:focus-visible,.rail .rail-subbtn:focus-visible{outline:2px solid var(--focus-navy,#8DB5F7);outline-offset:1px}
.rail .rail-btn.locked::after,.rail .rail-subbtn.locked::after{content:none}
.rail .rail-group{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.rail .rail-group[hidden]{display:none}
/* Collapsed: the group's pages in a flyout beside the rail. */
.rail .rail-sub{position:absolute;left:calc(100% + 4px);top:0;z-index:60;display:flex;flex-direction:column;gap:.1rem;min-width:11rem;padding:.35rem;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(11,31,58,.25)}
.rail .rail-sub[hidden]{display:none}
.rail .rail-subbtn{display:flex;align-items:center;width:100%;min-height:34px;box-sizing:border-box;margin:0;padding:.4rem .65rem;border:0;border-radius:8px;
  background:transparent;color:var(--ink);font:500 .86rem/1.2 var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.rail .rail-subbtn:hover{background:var(--bg-2)}
.rail .rail-subbtn.sel{background:var(--accent-soft);color:var(--accent);font-weight:600}
.rail .rail-expand{margin-top:.35rem;opacity:.7}
.rail .rail-expand svg{transition:transform .15s ease}
/* Expanded. */
.app.rail-wide>.rail{align-items:stretch;padding-inline:.6rem}
.app.rail-wide .rail .rail-mg{padding:4px 6px 4px 4px}
.app.rail-wide .rail .rail-mg-name{display:inline-flex;align-items:center;gap:.35rem}
.app.rail-wide .rail .rail-sec{align-items:stretch}
.app.rail-wide .rail .rail-btn{width:100%;justify-content:flex-start;padding:0 .7rem}
.app.rail-wide .rail .rail-label{display:inline}
.app.rail-wide .rail .rail-group{align-items:stretch}
.app.rail-wide .rail .rail-sub{position:static;min-width:0;padding:.1rem 0 .3rem 2.3rem;background:transparent;border:0;box-shadow:none}
.app.rail-wide .rail .rail-subbtn{color:var(--navy-muted);min-height:30px;padding:.3rem .5rem;font-size:.82rem}
.app.rail-wide .rail .rail-subbtn:hover{background:color-mix(in srgb,var(--navy-2) 70%,transparent);color:var(--navy-ink)}
.app.rail-wide .rail .rail-subbtn.sel{background:var(--navy-2);color:var(--navy-ink)}
.app.rail-wide .rail .rail-expand svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .rail .rail-expand svg{transition:none} }
/* The "MG" badge beside the wordmark. */
.ohx-badge{display:inline-block;padding:.12em .38em;border-radius:5px;background:var(--accent);color:var(--accent-ink);font:700 .62em/1 var(--font-sans);letter-spacing:.02em;vertical-align:.15em}
/* Phones: the drawer leads with Ohmix MG; the rest is quieter. */
.side .nav-mg{gap:.6rem;margin:.2rem 0 .6rem;padding:.5rem .55rem;font-size:1rem;font-weight:600;color:var(--ink)}
.side .nav-mg .ohx-mark{width:28px;height:28px;border-radius:8px;flex:0 0 auto}
.side .nav-mg.sel{background:var(--accent-soft);color:var(--ink)}
.side .nav-sec .navbtn{font-size:.86rem;color:var(--ink-dim)}
.side .nav-sec .ico{opacity:.7}
.side .nav-admin[hidden]{display:none}
.top .top-mark{display:block;width:28px;height:28px;border-radius:8px;flex:0 0 auto}

/* ---- the navy bar ---------------------------------------------------------- */
.app .top,.app:has(.panel.on > #manual-ask-content:not([hidden])) .top{background:var(--navy);color:var(--navy-ink);border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;gap:.55rem;z-index:40}
@media (min-width:641px){ .app .top,.app:has(.panel.on > #manual-ask-content:not([hidden])) .top{height:var(--top-h);min-height:0;flex-wrap:nowrap} }
.top .top-page{font-weight:600;font-size:.98rem;color:var(--navy-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.app .top .top-case,.app .top .top-veh,.app .top .top-share{display:none}
.app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-page{display:none}
.app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-case{display:flex;align-items:center;gap:.45rem;min-width:0;flex:0 1 auto}
.app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-veh{display:flex;align-items:center;gap:.5rem;min-width:0;flex:0 1 auto}
.app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-share{display:inline-flex}
.top .mg-title{display:flex;flex-wrap:nowrap;align-items:baseline;gap:.55rem;min-width:0;flex:0 1 auto}
.top .mg-title h1{order:1;flex:0 1 auto;min-width:0;margin:0;font-size:1rem;font-weight:600;color:var(--navy-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .mg-title .mg-save{order:2;flex:0 1 auto;font-size:.74rem;color:var(--navy-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .mg-title>.eyebrow{display:none}
.top .chip{background:transparent;color:var(--navy-ink);border-color:var(--screen-line)}
/* Buttons on navy: quiet outlines; the accent stays for the primary action. */
.top .top-btn,.top #mgEvToggle,.top .burger,.top #mgSideToggle{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:34px;min-height:34px;box-sizing:border-box;padding:0 .75rem;border:1px solid var(--screen-line);border-radius:8px;
  background:transparent;color:var(--navy-ink);font:500 .8rem/1 var(--font-sans);line-height:1;white-space:nowrap;cursor:pointer;flex:0 0 auto}
.top .top-more,.top .burger,.top .mg-side-toggle{width:34px;padding:0}
.top .top-btn .ic,.top .mg-side-toggle .ic{width:1rem;height:1rem}
.top .top-btn:hover,.top .mg-ev-toggle:hover,.top .burger:hover,.top .mg-side-toggle:hover,.top .top-btn[aria-expanded=true]{background:var(--navy-2)}
.top .mg-ev-toggle[aria-expanded=true]{background:var(--navy-2);border-color:var(--navy-muted);color:var(--navy-ink)}
.top :is(.top-btn,.mg-ev-toggle,.burger,.mg-side-toggle,.mg-vchip,.top-avatar):focus-visible{outline:2px solid var(--focus-navy,#8DB5F7);outline-offset:2px}
.top .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* The vehicle chip: "MG4 Urban · AH4EM · no VIN  [Add VIN]". */
.top .mg-vchip{display:inline-flex;align-items:center;gap:.45rem;height:34px;max-width:min(30rem,42vw);box-sizing:border-box;padding:0 .4rem 0 .7rem;
  border:1px solid var(--screen-line);border-radius:999px;background:var(--navy-2);color:var(--navy-ink);font:500 .82rem/1 var(--font-sans);cursor:pointer}
.top .mg-vchip .ic{width:1rem;height:1rem;flex:0 0 auto;color:var(--navy-muted)}
.top .mg-vchip-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .mg-vchip.is-empty{padding-right:.8rem;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.top .mg-vchip.is-empty .mg-vchip-t{color:var(--navy-ink)}
.top .mg-vchip-add{flex:0 0 auto;padding:.28rem .55rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:600}
.top .mg-vchip-add[hidden]{display:none}
.top .mg-vchip:hover{border-color:var(--navy-muted)}

/* The avatar. */
.top .top-avatar{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font:600 .78rem/1 var(--font-sans);cursor:pointer;flex:0 0 auto}

/* ---- popovers ------------------------------------------------------------- */
.top .top-pop{position:relative;display:flex;align-items:center;flex:0 0 auto;min-width:0}
.top .top-veh>.top-pop{flex:0 1 auto}
.top .top-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:60;display:flex;flex-direction:column;gap:.1rem;
  min-width:15rem;max-width:min(24rem,calc(100vw - 1.5rem));box-sizing:border-box;padding:.4rem;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(11,31,58,.24)}
.top .top-menu[hidden]{display:none}
.top .top-menu hr{border:0;border-top:1px solid var(--line);margin:.3rem .2rem;width:auto}
.top .top-mi,.top .navbtn.top-mi{display:flex;align-items:center;width:100%;min-height:36px;box-sizing:border-box;margin:0;padding:.45rem .7rem;
  border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 .88rem/1.2 var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.top .top-mi:hover,.top .top-mi:focus-visible{background:var(--bg-2);outline:none}
.top .top-mi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}   /* 1 Nov (J4): the menu item shows a signal-blue ring, not only a tint */
.top .navbtn.top-mi.sel{background:var(--accent-soft);color:var(--accent);font-weight:600}
.top .navbtn.top-mi.locked::after{content:none}
.top .top-mi[hidden]{display:none}
.top .top-mi-ask{display:none}
.app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-mi-ask:not([hidden]){display:flex}
@media (min-width:821px){ .app .top #topCaseDetails,.app:has(.panel.on > #manual-ask-content:not([hidden])) .top #topCaseDetails{display:none} }
.app:has(.panel.on[data-panel=ask]) .top #topWorkshopCase:not([hidden]){display:flex}
/* The account. */
.top .top-account{gap:.45rem;padding:.75rem;min-width:17rem}
.top .top-account .who{display:block;font-size:.84rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none}
.top .top-account .top-k{font-size:.76rem;font-weight:500;color:var(--ink-dim);margin:.2rem 0 0}
.top .top-account .orgsel{width:100%;max-width:none;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong)}
.top .top-account .top-row{display:flex;align-items:center;gap:.5rem;margin-top:.2rem}
.top .top-account .top-row .top-k{margin:0;flex:1 1 auto}
.top .top-account #theme{color:var(--ink-dim)}
.top .top-account #uiLang2{color:var(--ink);background:var(--surface);flex:1 1 auto;max-width:none}
.top .top-account #logout{flex:0 0 auto}
/* The vehicle: model, VIN and SSNW, and the known-issue details, in one place. */
.top .mg-vpop{left:auto;right:0;width:min(25rem,calc(100vw - 1.5rem));max-width:none;padding:.85rem;gap:.7rem}
.top .mg-vpop .mg-vehicle,.top .mg-vpop .mg-vin{display:flex;flex-direction:column;align-items:stretch;gap:.3rem;width:100%}
.top .mg-vpop .mg-vin{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.45rem;row-gap:.3rem}
.top .mg-vpop .mg-vin label{grid-column:1 / -1}
.top .mg-vpop :is(.mg-vehicle,.mg-vin) label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;
  font-size:.78rem;font-weight:500;color:var(--ink-dim)}
.top .mg-vpop select,.top .mg-vpop input{width:100%;min-width:0;height:38px;box-sizing:border-box;font-size:.88rem;border-radius:8px}
.top .mg-vpop .mg-vin input{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.02em}
.top .mg-vpop .mg-vin input::placeholder{text-transform:none;letter-spacing:0}
.top .mg-vpop #askVinRead{height:38px;border-radius:8px;white-space:nowrap}
.top .mg-vpop #askVinStatus{margin:0;font-size:.78rem}
.top .mg-vpop #askVinStatus:empty{display:none}
.top .mg-vpop .kg-vehicle{margin:0;border-top:1px solid var(--line);padding-top:.6rem}
.top .mg-vpop .kg-vehicle>summary{cursor:pointer;font-size:.84rem;font-weight:500;color:var(--ink)}
.top .mg-vpop .kg-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:.55rem 0}
.top .mg-vpop .kg-grid label{font-size:.76rem;color:var(--ink-dim);display:flex;flex-direction:column;gap:.2rem}
.top .mg-vpop .kg-grid input{height:34px}

/* ---- slide-outs: the case list and Case details, every width -------------- */
.mg-shell,.mg-shell.mg-side-collapsed,.mg-shell.mg-ev-open,.mg-shell.mg-ev-open.mg-side-collapsed{grid-template-columns:minmax(0,1fr)}
.mg-side{position:fixed;top:0;bottom:0;left:0;z-index:47;width:min(320px,86vw);box-shadow:12px 0 40px rgba(11,31,58,.28);display:none}
@media (min-width:821px){ .mg-side{left:var(--rail-w)} }
.mg-shell.mg-side-open>.mg-side,.mg-shell.mg-side-open.mg-side-collapsed>.mg-side{display:flex}
.mg-shell.mg-side-collapsed:not(.mg-side-open)>.mg-side{display:none}
.mg-side-close{display:inline-grid;place-items:center}
.mg-scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(11,31,58,.38);border:0;padding:0;margin:0;width:auto;cursor:default}
.mg-scrim[hidden]{display:none}
.mg-evidence{position:fixed;top:0;bottom:0;right:0;z-index:47;width:min(440px,100vw);box-shadow:-12px 0 40px rgba(11,31,58,.28)}
#mgEvScrim:not([hidden]){display:block;position:fixed;inset:0;z-index:45;background:rgba(11,31,58,.38);border:0;padding:0;margin:0;width:auto;cursor:default}
:root:has(.panel.on .mg-shell.mg-ev-open){--pv-w:clamp(380px,40vw,720px)}

/* ---- phones (≤820 px): the burger and the drawer, the bar trimmed --------- */
@media (max-width:820px){
  .top .top-share,.app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-share{display:none}
  .top .mg-ev-toggle,.top #mgEvToggle{display:none}
  .top .mg-vchip{max-width:44vw}
  .top .mg-title .mg-save{display:none}
  .top .burger,.top .mg-side-toggle{border-color:var(--screen-line);color:var(--navy-ink)}
}
@media (max-width:640px){
  .app .top,.app:has(.panel.on > #manual-ask-content:not([hidden])) .top{flex-wrap:nowrap;height:52px;min-height:52px;padding:.35rem .5rem;gap:.35rem}
  .top .mg-vchip{max-width:38vw;padding-left:.55rem}
  .top .mg-vchip>.ic{display:none}
  .top .mg-vchip-add{display:none}
  .top .top-avatar,.top .top-btn,.top .burger,.top .mg-side-toggle{width:var(--tap,44px);height:var(--tap,44px)}
  .top .top-menu{position:fixed;left:.6rem;right:.6rem;top:58px;max-width:none;width:auto}
  .app:has(.mg-shell.mg-guide-entry) .top .top-veh{display:none}
}

/* ---- L7: the case list rows --------------------------------------------------- */
.mg-side .mg-side-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .4rem;margin-top:.25rem}
.mg-side .mg-chip-model{padding:.05rem .45rem;border:1px solid var(--line-strong);border-radius:999px;font-size:.7rem;font-weight:500;color:var(--ink-dim);background:var(--surface)}
.mg-side .mg-pill{padding:.05rem .45rem;border-radius:999px;font-size:.7rem;font-weight:600;background:var(--accent-soft);color:var(--accent)}
.mg-side .mg-pill.is-cause_supported{background:var(--seal-soft);color:var(--seal-ink)}
.mg-side .mg-pill.is-repair_completed,.mg-side .mg-pill.is-resolved{background:var(--bg-2);color:var(--ink-dim)}
/* Amber marks an open investigation (trust palette); the fill is amber, the text the text-safe --warn. */
.mg-side .mg-pill.is-open{background:color-mix(in srgb,var(--amber) 20%,var(--surface));color:var(--warn)}
.mg-side .mg-pill.is-escalation_required{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}
.mg-side .mg-side-when{margin-left:auto;font-size:.72rem;color:var(--ink-faint);white-space:nowrap}
.mg-side .mg-side-test{display:flex;align-items:center;gap:.4rem;margin:.1rem .5rem .35rem;font-size:.76rem;color:var(--ink-dim);cursor:pointer}
.mg-side .mg-side-test[hidden]{display:none}
.mg-side .mg-side-test input{width:auto;margin:0}
.mg-side .mg-side-ro{margin-left:.35rem;font-size:.7rem;font-weight:500;color:var(--ink-faint)}
.mg-side .mg-pill.is-reported{background:var(--bg-2);color:var(--ink-dim)}
.mg-side .mg-pill.is-closed{background:var(--bg-2);color:var(--ink-faint)}
.mg-side .mg-pill.is-analysing{background:var(--accent-soft);color:var(--accent)}
/* Phones: the chip truncates inside its box (it overflowed onto ⋯ at 390 px),
   and in Ohmix MG the drawer's mark stands for the brand, so the bar keeps its room. */
.top .mg-vchip{min-width:0;overflow:hidden}
@media (max-width:640px){ .app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-mark{display:none} }
@media (max-width:640px){ .top .top-veh,.top .top-veh>.top-pop{flex-shrink:0} .top .mg-vchip{min-width:6.5rem;max-width:34vw} .top .top-case{flex:1 1 0;min-width:0} }
@media (max-width:640px){ .app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-veh{flex:0 0 auto} .app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-case{flex:1 1 0;min-width:0} }

/* Polish (2026-10-29): plain links in the app take the accent, so they read in dark mode
   (the browser's default #00e on navy did not). Buttons and styled links keep their own. */
main a:not([class]){color:var(--accent);text-underline-offset:.15em}
main a:not([class]):hover{text-decoration-thickness:2px}

/* 31 Oct (owner: Ohmix MG is the dominant item).
   Collapsed rail: every button names itself beside the rail on hover or keyboard focus,
   "Ohmix MG" for the mark; a group whose flyout is open does not repeat its name. */
@media (min-width:821px){
  .app:not(.rail-wide) .rail :is(.rail-mg .rail-mg-name,.rail-btn .rail-label){
    position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:61;pointer-events:none;
    padding:.42rem .7rem;border-radius:8px;background:var(--navy);color:var(--navy-ink);font:600 .86rem/1 var(--font-sans);
    box-shadow:0 8px 24px rgba(11,31,58,.3),0 0 0 1px color-mix(in srgb,var(--navy-ink) 14%,transparent)}
  .app:not(.rail-wide) .rail .rail-mg{position:relative}
  .app:not(.rail-wide) .rail .rail-mg:is(:hover,:focus-visible) .rail-mg-name{display:inline-flex;align-items:center;gap:.35rem;padding:.75rem .9rem;font-size:.95rem}
  .app:not(.rail-wide) .rail .rail-btn:is(:hover,:focus-visible):not([aria-expanded=true]) .rail-label{display:inline}
}
/* The active Ohmix MG tile: a lit plate, a thick accent ring, and the accent bar at the rail's edge. */
.rail .rail-mg{position:relative}
.rail .rail-mg.sel{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.rail .rail-mg.sel .ohx-mark{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 55%,transparent)}
.rail .rail-mg.sel::before{content:"";position:absolute;left:-4px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.app.rail-wide .rail .rail-mg.sel::before{left:-.6rem}
.app.rail-wide .rail .rail-mg.sel .rail-mg-name{color:#fff}

/* Pilot mode (31 Oct): the Beta badge in the bar and the dealers' beta note. */
.top .pilot-badge{flex:0 0 auto;margin-left:.45rem;padding:.12rem .45rem;border-radius:6px;border:1px solid color-mix(in srgb,var(--navy-ink) 40%,transparent);color:var(--navy-ink);font:600 .68rem/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.top .pilot-badge[hidden]{display:none}
.pilot-banner{position:relative;display:flex;align-items:flex-start;gap:.6rem;margin:.6rem 0 .2rem;padding:.55rem 2.8rem .55rem .8rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--surface);font-size:.86rem;line-height:1.45;color:var(--ink)}
.pilot-banner[hidden]{display:none}
.pilot-banner>span:nth-child(2){flex:1 1 auto}
.pilot-banner-k{flex:0 0 auto;font-weight:700;color:var(--accent)}
.pilot-banner-x{position:absolute;top:.2rem;right:.2rem;min-width:36px;min-height:36px}
@media (max-width:640px){ .pilot-banner{flex-direction:column;gap:.15rem} .pilot-banner-x{min-width:44px;min-height:44px;top:0;right:0} }

/* 5 Nov (owner): expanded, the rail names each button UNDER its icon (a narrow column, not a 220 px panel); the
   Knowledge and Administration groups keep their flyout. Collapsed, the name shows beside the button on hover or
   keyboard focus (above). */
@media (min-width:821px){
  :root{--rail-wide:92px}
  .app.rail-wide>.rail{align-items:center;padding-inline:.3rem}
  .app.rail-wide .rail .rail-mg{flex-direction:column;align-items:center;gap:.3rem;padding:4px}
  .app.rail-wide .rail .rail-mg-name{display:flex;font-size:.7rem;gap:.2rem;flex-wrap:wrap;justify-content:center}
  .app.rail-wide .rail .rail-sec{align-items:center}
  .app.rail-wide .rail .rail-btn{flex-direction:column;justify-content:center;gap:.28rem;width:100%;height:auto;min-height:54px;padding:.45rem .2rem}
  .app.rail-wide .rail .rail-label{display:block;font-size:.68rem;font-weight:500;line-height:1.15;text-align:center;white-space:normal;overflow-wrap:anywhere}
  .app.rail-wide .rail .rail-group{align-items:center}
  .app.rail-wide .rail .rail-sub{position:absolute;left:calc(100% + 6px);top:0;min-width:11rem;padding:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(11,31,58,.25)}
  .app.rail-wide .rail .rail-subbtn{color:var(--ink);min-height:34px;padding:.4rem .65rem;font-size:.86rem}
  .app.rail-wide .rail .rail-subbtn:hover{background:var(--bg-2);color:var(--ink)}
  .app.rail-wide .rail .rail-subbtn.sel{background:var(--accent-soft);color:var(--accent)}
}

/* ---- 5 Nov (owner): the bar reads in full ------------------------------------
   The vehicle chip's name ("ZS EV 2021") is never cut: the chip takes the room it
   needs and the case title gives way (it is short now, its full text in the
   tooltip). The VIN's last six follow the name on wide screens. "Saved · 12:04"
   is never cut either; on a phone the bar has no room for it or the title, and
   they stay out. */
.top .mg-vchip,.top .mg-vchip-t{flex:0 0 auto;max-width:none;overflow:visible}
.top .mg-vchip-t{text-overflow:clip}
.top .mg-vchip-vin{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy-muted);font-weight:400}
.top .mg-vchip-vin[hidden]{display:none}
.top .mg-title .mg-save{flex:0 0 auto;overflow:visible;text-overflow:clip}
.top .top-case{flex:1 1 auto;min-width:0}
@media (max-width:820px){
  .top .mg-vchip{max-width:none}
  .top .mg-vchip-vin{display:none}
  .top .mg-title .mg-save{display:inline}
}
@media (max-width:640px){
  .top .mg-vchip{min-width:0;max-width:none}
  .top .mg-title .mg-save{display:none}
  /* A phone's bar has no room for the title beside the chip (it was a two-letter stub): it stays in the
     case list and the tooltip, as before the chip was whole. */
  .top .mg-title h1{display:none}
  /* The case's button keeps its room; "Choose the vehicle" (no vehicle yet: interface words, not the car) may
     shorten, a named vehicle never does. */
  .app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-case{flex:0 0 auto}
  .app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-veh:has(.mg-vchip.is-empty),
  .app:has(.panel.on > #manual-ask-content:not([hidden])) .top .top-veh:has(.mg-vchip.is-empty)>.top-pop{flex:0 1 auto;min-width:0}
  .top .mg-vchip.is-empty{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden}
  .top .mg-vchip.is-empty .mg-vchip-t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}