/* The shell around every view: header, main tabs, Admin sidebar, settings drawer, footer, sign-in card and
   the guided tour. Lifted from the revised MARINE VOICE console (dcs-dsci-vhf-processing/services/modern-ui:
   base.html, header.html, footer.html, settings_panel.html, signin.html), with its inline colours turned into
   the --mv-* tokens below. Dark only, like the original. Fonts are the gateway's own (static/fonts, OFL):
   Barlow Semi Condensed for 'Barlow Condensed', IBM Plex Sans for Inter/Barlow, IBM Plex Mono for JetBrains Mono. */
:root {
  --mv-page: #0b111b; --mv-bar: #0a1018; --mv-panel: #0e1622; --mv-inset: #0b121d; --mv-field: #101a26;
  --mv-drawer: #0c1420; --mv-line: #16202d; --mv-line2: #1b2735; --mv-line3: #223141; --mv-rule: #182432;
  --mv-hi: #eef4fb; --mv-text: #dbe6f2; --mv-body: #c9d4e0; --mv-sub: #94a5b7; --mv-dim: #6c7c8e; --mv-faint: #4c5a6b;
  --mv-label: #8fa3b8; --mv-head: #4f6076;
  --mv-ok: #3ddc84; --mv-info: #3b9dff; --mv-info-hi: #7cc0ff; --mv-warn: #f0a62b; --mv-crit: #ff383c;
  --mv-disp: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --mv-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mv-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
  --vh100: 100vh;   /* the screen height; shell.js shFit sets it when the page is scaled down (zoom) */
}
html, body { background: var(--mv-page); }
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #1d2836; border-radius: 3px; }

/* ---- header (header.html) ---- */
#hdr { position: sticky; top: 0; z-index: 1000; min-height: 88px; display: flex; align-items: center; gap: 24px;
       padding: 0 32px; background: var(--mv-bar); border-bottom: 1px solid var(--mv-rule); font-family: var(--mv-sans); }
#hdr .mv-brand { display: flex; align-items: center; gap: 20px; margin-right: -8px; }
#hdr .mv-brand img { flex: none; height: 42px; width: auto; opacity: .92; }
#hdr .mv-brand-txt { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
#hdr .mv-name { font-family: var(--mv-disp); font-size: 22px; font-weight: 600; letter-spacing: .1em; line-height: 1;
                white-space: nowrap; color: var(--mv-hi); }
#hdr .mv-small { font-size: 10.5px; font-weight: 400; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; color: var(--mv-dim); }
.mv-vrule { flex: none; width: 1px; height: 46px; background: var(--mv-line2); }
#hdr .mv-station { display: flex; flex-direction: column; gap: 3px; }
#hdr .mv-station b, #hdr .mv-station > span { white-space: nowrap; }
#hdr .mv-station b { font-size: 13px; font-weight: 500; letter-spacing: .09em; color: var(--mv-hi); }
#hdr .mv-station span { font-size: 12px; color: var(--mv-dim); }
#hdr .mv-station span span { font-family: var(--mv-mono); }
/* ---- navigation bar (left, shell.js shNav): main pages with icons; .collapsed = an icon rail (icons stay clickable) ---- */
.mv-nav { flex: none; width: 184px; position: sticky; top: 88px; align-self: flex-start; height: calc(var(--vh100) - 88px - 38px);
          display: flex; flex-direction: column; gap: 3px; padding: 10px 8px 26px; background: var(--mv-bar); border-right: 1px solid var(--mv-rule);
          transition: width .15s ease; overflow: hidden; }
.mv-nav:not(.collapsed) { cursor: w-resize; }        /* a click on an empty part closes it (shell.js) */
.mv-nav:not(.collapsed) > button, #nav-toggle { cursor: pointer; }
.mv-nav-foot { display: flex; align-items: center; justify-content: flex-end; margin: auto 2px 0; padding-top: 8px; }
#nav-toggle { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid var(--mv-line3); border-radius: 5px; background: var(--mv-field);
              color: var(--mv-label); font-size: 14px; line-height: 1; cursor: pointer; }
#nav-toggle:hover { border-color: #2f6da8; color: var(--mv-info-hi); }
.mv-nav > button { height: 30px; padding: 0 9px; display: flex; align-items: center; gap: 8px; text-align: left; white-space: nowrap; border: 1px solid transparent; border-radius: 5px; background: transparent;
                   color: var(--mv-dim); font-family: var(--mv-disp); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; cursor: pointer; }
.mv-nav > button:hover { color: var(--mv-text); border-color: var(--mv-line3); }
.mv-nav > button[aria-pressed=true] { color: var(--mv-info-hi); border-color: #2f6da8; background: rgba(59, 157, 255, .14); }
.mv-nav > button svg { flex: none; }
.mv-nav > button.hidden { display: none; }
.mv-nav.collapsed { width: 46px; padding: 10px 7px 26px; }
.mv-nav.collapsed > button { justify-content: center; padding: 0; }
.mv-nav.collapsed > button span { display: none; }
.mv-nav.collapsed .mv-nav-foot { justify-content: center; }
#hdr .mv-grow { flex: 1; }
#hdr .mv-stats { display: flex; align-items: center; gap: 22px; }
.mv-stat { display: flex; flex-direction: column; gap: 2px; }
.mv-stat > span:first-child { font-family: var(--mv-disp); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--mv-dim); }
.mv-stat .mv-v { font-family: var(--mv-mono); font-size: 11.5px; color: var(--mv-body); display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.mv-stat .mv-v.ok { color: var(--mv-ok); }
.mv-stat .mv-v i { flex: none; width: 1px; height: 11px; background: #2a3a4c; }
#hdr .mv-ctrls { display: flex; align-items: center; gap: 14px; }
.mv-lang { display: flex; align-items: center; gap: 7px; }
.mv-lang button { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--mv-disp); font-size: 12px;
                  font-weight: 600; letter-spacing: .1em; color: var(--mv-dim); }
.mv-lang button[aria-pressed=true] { color: var(--mv-info); }
.mv-lang .sep { font-size: 10px; color: #2a3a4c; }
.mv-iconbtn { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;
              border: 1px solid var(--mv-line3); border-radius: 6px; background: var(--mv-field); cursor: pointer; }
.mv-iconbtn:hover { border-color: #2f6da8; }
.mv-iconbtn svg { display: block; }
#user-menu { position: relative; }
#user-menu summary { display: flex; align-items: center; gap: 11px; padding: 4px 8px; border: 1px solid transparent;
                     border-radius: 6px; cursor: pointer; list-style: none; }
#user-menu summary::-webkit-details-marker { display: none; }
#user-menu[open] summary { border-color: #2f4459; }
.mv-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mv-line); border: 1px solid var(--mv-line3);
             display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--mv-label); }
.mv-who { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; max-width: 210px; }
.mv-who b, .mv-who span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-who b { font-size: 13.5px; font-weight: 600; color: var(--mv-hi); }
.mv-who span { font-size: 10.5px; color: #7f8fa1; }
.mv-menu { position: absolute; top: 52px; right: 0; z-index: 1200; min-width: 240px; display: flex; flex-direction: column; gap: 9px;
           padding: 12px; background: var(--mv-panel); border: 1px solid var(--mv-line3); border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.mv-menu b { font-size: 12px; color: var(--mv-hi); }
.mv-menu .mono { font-family: var(--mv-mono); font-size: 11.5px; color: #7f8fa1; overflow-wrap: anywhere; }
.mv-menu .role { font-family: var(--mv-disp); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--mv-warn); }
.mv-menu hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--mv-rule); }
#signout { display: flex; align-items: center; justify-content: center; padding: 9px; border-radius: 5px; cursor: pointer;
           border: 1px solid rgba(255,56,60,.35); background: rgba(255,56,60,.12); color: #ff8a8c;
           font-family: var(--mv-disp); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; }

/* ---- frame: Admin sidebar + the view ---- */
#frame { display: flex; align-items: stretch; min-height: calc(var(--vh100) - 88px - 38px); }
#frame > main { flex: 1 1 auto; min-width: 0; }
body.cv-wide main { max-width: none; padding: 0; }
#adminnav { flex: none; width: 214px; padding: 18px 12px; background: var(--mv-bar); border-right: 1px solid var(--mv-rule);
            display: flex; flex-direction: column; gap: 4px; font-family: var(--mv-sans); }
#adminnav .an-title { margin: 0 8px 10px; font-family: var(--mv-disp); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--mv-head); }
#adminnav button { text-align: left; width: 100%; padding: 9px 12px; border: 1px solid transparent; border-radius: 6px;
                   background: transparent; color: var(--mv-sub); font-size: 13.5px; cursor: pointer; }
#adminnav button:hover { color: var(--mv-text); background: var(--mv-panel); }
#adminnav button[aria-pressed=true] { color: var(--mv-info-hi); border-color: #2f6da8; background: rgba(59,157,255,.14); }
#adminnav .an-note { margin: auto 8px 0; padding-top: 14px; font-size: 11px; line-height: 1.5; color: #61748a; }

/* ---- footer (footer.html) ---- */
#ftr { position: sticky; bottom: 0; z-index: 900; min-height: 38px; display: flex; align-items: center; gap: 18px; padding: 0 36px;
       background: var(--mv-bar); border-top: 1px solid var(--mv-rule); }
.mv-lamp { display: flex; align-items: center; gap: 5px; font-family: var(--mv-disp); font-size: 10.5px; font-weight: 600;
           letter-spacing: .1em; color: var(--mv-label); white-space: nowrap; }
.mv-lamp i { width: 6px; height: 6px; border-radius: 50%; background: var(--mv-faint); }
.mv-lamp.ok i { background: var(--mv-ok); } .mv-lamp.warn i { background: var(--mv-warn); }
.mv-lamp.bad i { background: var(--mv-crit); } .mv-lamp.role i { background: var(--mv-warn); }
#ftr .mv-grow { flex: 1; }
#ftr .mv-appline { font-family: var(--mv-mono); font-size: 11.5px; color: var(--mv-faint); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ftr .mv-uptime { padding-left: 14px; border-left: 1px solid var(--mv-line2); font-family: var(--mv-disp); font-size: 10.5px; font-weight: 600;
                  letter-spacing: .1em; color: var(--mv-label); white-space: nowrap; }
#ftr .mv-uptime #hdr-uptime { font-family: var(--mv-mono); font-weight: 400; letter-spacing: 0; color: var(--mv-ok); }

/* ---- sign-in card (signin.html) ---- */
#signin { min-height: calc(var(--vh100) - 88px - 38px); display: flex; align-items: center; justify-content: center; padding: 36px; }
#signin .mv-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 26px;
                   padding: 44px 40px; background: var(--mv-panel); border: 1px solid var(--mv-rule); border-radius: 10px;
                   box-shadow: 0 24px 60px rgba(0,0,0,.5); font-family: var(--mv-sans); text-align: center; }
#signin img { height: 46px; width: auto; opacity: .92; }
#signin .mv-name { font-family: var(--mv-disp); font-size: 22px; font-weight: 600; letter-spacing: .1em; color: var(--mv-hi); }
#signin .mv-sub { font-size: 12px; color: var(--mv-dim); }
#signin hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--mv-rule); }
#signin h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--mv-hi); }
#signin p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--mv-label); }
#signin p.denied { color: var(--mv-warn); }
.mv-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px; border-radius: 6px; cursor: pointer;
          border: 1px solid #2f6da8; background: rgba(59,157,255,.14); color: var(--mv-info-hi);
          font-family: var(--mv-disp); font-size: 13px; font-weight: 600; letter-spacing: .14em; }
#tokenbox { width: 100%; display: flex; flex-direction: column; gap: 10px; }
#tokenbox input { width: 100%; padding: 9px; border: 1px solid var(--mv-line3); border-radius: 6px; background: var(--mv-field); color: var(--mv-text); }

/* ---- settings drawer (settings_panel.html) ---- */
#settings-scrim { position: fixed; inset: 0; z-index: 2000; background: rgba(4,8,13,.55); backdrop-filter: blur(2px);
                  opacity: 0; transition: opacity .18s ease; }
#settings-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2001; width: 390px; max-width: 92vw; display: flex;
                  flex-direction: column; background: var(--mv-drawer); border-left: 1px solid var(--mv-line2);
                  box-shadow: -24px 0 60px rgba(0,0,0,.55); transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
                  font-family: var(--mv-sans); color: var(--mv-text); }
#settings-panel > header { flex: none; display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--mv-line); margin: 0; }
#settings-panel > header span { flex: 1; font-family: var(--mv-disp); font-size: 15px; font-weight: 600; letter-spacing: .14em; color: var(--mv-hi); }
#settings-close { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0;
                  border: 1px solid var(--mv-line3); border-radius: 5px; background: var(--mv-field); color: var(--mv-label); font-size: 14px; cursor: pointer; }
.mv-set-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 22px 26px; display: flex; flex-direction: column; gap: 6px; }
.nv-set-head { margin: 22px 0 6px; font-family: var(--mv-disp); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--mv-head); }
.nv-set-head:first-child { margin-top: 14px; }
.nv-set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #131e2b; cursor: pointer; }
.nv-set-label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--mv-text); min-width: 0; }
.nv-set-hint { font-size: 11px; line-height: 1.45; color: #61748a; font-weight: 400; }
.nv-set-select { flex: none; height: 26px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--mv-line3); background: var(--mv-field);
                 color: var(--mv-text); font-family: var(--mv-mono); font-size: 11px; cursor: pointer; }
.nv-switch { flex: none; appearance: none; -webkit-appearance: none; margin: 0; width: 38px; height: 21px; border-radius: 11px;
             border: 1px solid var(--mv-line3); background: var(--mv-field); position: relative; cursor: pointer; transition: background .15s, border-color .15s; }
.nv-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--mv-dim);
                    transition: transform .15s, background .15s; }
.nv-switch:checked { background: rgba(59,157,255,.22); border-color: #2f6da8; }
.nv-switch:checked::after { transform: translateX(17px); background: var(--mv-info-hi); }
.nv-switch:disabled { opacity: .45; cursor: not-allowed; }
.nv-switch:focus-visible, .nv-set-select:focus-visible, .mv-iconbtn:focus-visible { outline: 2px solid var(--mv-info); outline-offset: 2px; }
.mv-pills { flex: none; display: flex; gap: 4px; }
.mv-pills button { min-width: 34px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 4px; cursor: pointer;
                   border: 1px solid var(--mv-line3); background: var(--mv-field); color: var(--mv-dim);
                   font-family: var(--mv-disp); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; }
.mv-pills button[aria-pressed=true] { border-color: #2f6da8; background: rgba(59,157,255,.14); color: var(--mv-info-hi); }
#set-timezone { flex: none; font-family: var(--mv-mono); font-size: 11px; color: var(--mv-label); }

/* ---- console placeholder (step 1) ---- */
#consoleview .mv-soon { margin: 24px 36px; padding: 28px; background: var(--mv-panel); border: 1px solid var(--mv-line); border-radius: 6px;
                        font-family: var(--mv-sans); color: var(--mv-sub); }
#consoleview .mv-soon h2 { margin: 0 0 8px; font-family: var(--mv-disp); font-size: 15px; font-weight: 600; letter-spacing: .14em; color: var(--mv-label); }

/* ---- responsive (base.html breakpoints) ---- */
@media (max-width: 1500px) {
  :where(:root:not(.mvz), :root.mvz-lt1501) #hdr .mv-stats .mv-vrule { display: none; }
  :where(:root:not(.mvz), :root.mvz-lt1501) #hdr { gap: 18px; padding: 0 24px; }
}
@media (max-width: 1160px) {
  :where(:root:not(.mvz)) #hdr { flex-wrap: wrap; padding: 12px 20px; gap: 10px 20px; }
  :where(:root:not(.mvz)) #hdr > div, :where(:root:not(.mvz)) #hdr .mv-stats, :where(:root:not(.mvz)) #hdr .mv-ctrls { flex-wrap: wrap; min-width: 0; }
  :where(:root:not(.mvz)) #ftr { flex-wrap: wrap; row-gap: 6px; padding: 6px 20px; }
  :where(:root:not(.mvz)) .mv-nav { height: calc(var(--vh100) - 88px - 64px); }       /* the footer wraps to two lines here */
}
@media (max-width: 900px) {
  :where(:root:not(.mvz)) #frame { flex-direction: column; }
  :where(:root:not(.mvz)) .mv-nav { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--mv-rule); }
  :where(:root:not(.mvz)) .mv-nav-foot { margin: 0 0 0 auto; padding-top: 0; }
  :where(:root:not(.mvz)) .mv-nav, :where(:root:not(.mvz)) .mv-nav.collapsed { padding-bottom: 10px; }
  :where(:root:not(.mvz)) .mv-nav.collapsed { width: auto; }
  :where(:root:not(.mvz)) #adminnav { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--mv-rule); }
  :where(:root:not(.mvz)) #adminnav button { width: auto; }
  :where(:root:not(.mvz)) #adminnav .an-title, :where(:root:not(.mvz)) #adminnav .an-note { display: none; }
}
@media (max-width: 600px) {
  #hdr .mv-vrule, #hdr .mv-small, .mv-who { display: none; }
  #hdr { padding: 10px 16px; }
}

/* ---- guided tour (app.js guide*) ---- */
.mv-tour-veil { position: fixed; inset: 0; z-index: 4000; background: rgba(4,8,14,.55); }
.mv-tour-ring { position: fixed; z-index: 4001; pointer-events: none; border-radius: 7px; border: 1px solid rgba(156,205,255,.75); }
.mv-tour-box { position: fixed; z-index: 4002; width: 296px; max-width: calc(100vw - 24px); padding: 14px 15px 13px;
               background: #2b333d; border: 1px solid #46505c; border-radius: 9px; box-shadow: 0 20px 48px rgba(0,0,0,.62); font-family: var(--mv-sans); }
.mv-tour-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mv-tour-head span:first-child { flex: 1; font-family: var(--mv-disp); font-size: 13px; font-weight: 600; letter-spacing: .1em;
                                 color: var(--mv-hi); text-transform: uppercase; }
.mv-tour-head .mono { flex: none; font-family: var(--mv-mono); font-size: 10px; color: #8a97a6; }
.mv-tour-box p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: #dfe6ee; }
.mv-tour-feet { display: flex; align-items: center; gap: 8px; }
.mv-tour-feet button { flex: none; padding: 6px 13px; border-radius: 5px; cursor: pointer; font-family: var(--mv-disp); font-size: 11.5px;
                       font-weight: 600; letter-spacing: .12em; border: 1px solid #3a4654; background: transparent; color: #aeb9c6; }
.mv-tour-feet button.primary { border-color: #3f7fbf; background: rgba(59,157,255,.18); color: #9ccdff; }

/* ---- filter lane (Mo 2026-10-14): every page's filters in ONE row, in the same style (Radio Log Voice, Radio Log
   Text, Traffic Console, Harbour Watch). Labels: small caps; fields and buttons 28 px; chosen = blue. ---- */
.mv-lane { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 40px; padding: 5px 10px; margin: 0 0 10px;
           background: var(--mv-panel); border: 1px solid var(--mv-line); border-radius: 6px; font-family: var(--mv-sans); }
.mv-lane .ln-lab, .mv-lane > label, .mv-lane label.ln-f { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; font-family: var(--mv-disp);
           font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #5c6c7e; white-space: nowrap; }
.mv-lane .ln-sep { flex: none; width: 1px; height: 18px; background: var(--mv-line3); }
.mv-lane .ln-grow { flex: 1 1 auto; }
.mv-lane select, .mv-lane input[type=date], .mv-lane input[type=datetime-local], .mv-lane input[type=search], .mv-lane input[type=text],
.mv-lane input:not([type]) { height: 28px; min-height: 0; padding: 0 8px; border-radius: 5px; border: 1px solid var(--mv-line3);
           background: var(--mv-field); color: var(--mv-text); font-family: var(--mv-mono); font-size: 11px; color-scheme: dark; }
.mv-lane button { height: 28px; min-height: 0; padding: 0 10px; border-radius: 4px; border: 1px solid #2a3a4c; background: var(--mv-inset);
           color: var(--mv-label); font-family: var(--mv-disp); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
           line-height: 1; cursor: pointer; white-space: nowrap; }
.mv-lane button:hover:not(:disabled) { border-color: #2f6da8; color: var(--mv-text); }
.mv-lane button[aria-pressed=true], .mv-lane button[aria-checked=true], .mv-lane button.on {
           border-color: #2f6da8; background: rgba(59,157,255,.16); color: var(--mv-info-hi); }
.mv-lane .ln-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--mv-line3); border-radius: 5px; background: var(--mv-field); }
.mv-lane .ln-seg button { height: 22px; padding: 0 8px; border-color: transparent; background: transparent; }
.mv-lane .ln-clear { color: var(--mv-warn); border-color: #4a3a20; }

/* ---- Engine Room: each page's parts as horizontal tabs (status.js erTabs, Mo 2026-10-14) ---- */
#er-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 14px; border-bottom: 1px solid var(--mv-line2); font-family: var(--mv-sans); }
#er-tabs.hidden { display: none; }
#er-tabs button { height: 34px; padding: 0 14px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 2px solid transparent;
                  border-radius: 5px 5px 0 0; background: transparent; color: var(--mv-label); font-family: var(--mv-disp); font-size: 12px;
                  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
#er-tabs button:hover { color: var(--mv-text); background: var(--mv-panel); }
#er-tabs button[aria-pressed=true] { color: var(--mv-info-hi); border-bottom-color: var(--mv-info); background: rgba(59,157,255,.08); }

/* ---- fit small screens (shell.js shFit, Mo 2026-10-15): below 1440 x 900 the whole page is scaled down (CSS zoom) like
   the browser's own zoom, so a laptop sees the full desktop layout; the narrow-screen rules are kept off then (:root.mvz). ---- */