/* ============================================================
   SAFEEN GREEN — Vessel Operations
   Redesign: a conventional, accessible web application.

   Principles:
   - Familiar first. Light page, white cards, navy sidebar, sentence case,
     buttons that look like buttons. No console cosplay.
   - Accessible by measurement, not by taste: every text token here was
     contrast-checked against its surface (WCAG AA, 4.5:1 text / 3:1 graphics).
   - Status is never color alone: every status badge carries a label and a dot.
   - System fonts. Zero network dependencies; this runs on a vessel.
   - Tokens first: components reference variables; dark mode redefines the
     variables, never the components.
   ============================================================ */

/* Inter, self-hosted — no network dependency; this runs on a vessel.
   One variable file covers every weight from 100 to 900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2022, U+2026, U+2192, U+2212;
}

:root {
  color-scheme: light;

  /* surfaces */
  --page:      #f4f6f8;
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --border:    #dde3ea;
  --hair:      #eaeef3;

  /* ink — all AA on their surfaces */
  --ink:   #1c2733;   /* 15.1:1 on white */
  --ink-2: #46566a;   /*  7.5:1 on white */
  --ink-3: #5c6b7f;   /*  5.0:1 on page  */

  /* brand — maritime navy */
  --navy:        #12293f;   /* sidebar */
  --navy-2:      #1b3a58;   /* sidebar hover */
  --accent:      #15569e;   /* links, buttons, selection — 7.4:1 on white */
  --accent-hover:#104379;
  --accent-bg:   #e8f0fa;

  /* status — fixed language, validated (CVD ΔE 11.3 adjacent, both modes).
     Dot/graphic color and TEXT color are separate steps: the graphic step is
     vivid, the text step is dark enough to read (≥4.5:1 on its tint). */
  --crit:      #d03b3b;  --crit-text: #a32424;  --crit-bg: #fbeaea;
  --warn:      #fab219;  --warn-text: #7a5300;  --warn-bg: #fdf3d7;
  --good:      #0ca30c;  --good-text: #0a6b0a;  --good-bg: #e6f4e6;
  --neutral:   #c7ccd4;  --neutral-text: #5c6b7f; --neutral-bg: #f0f2f5;

  /* data marks (sparklines, traces, survey windows) — 3:1 graphics floor */
  --data:    #2a78d6;
  --data-bg: #e3eefb;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 10px; --radius-sm: 7px;
  --shadow-1: 0 1px 2px rgba(16, 34, 53, .06), 0 1px 3px rgba(16, 34, 53, .04);
  --shadow-2: 0 4px 16px rgba(16, 34, 53, .10);
  --rail: 268px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:      #0f1720;
  --surface:   #16202c;
  --surface-2: #1b2734;
  --border:    #2a3646;
  --hair:      #223040;

  --ink:   #e8edf4;   /* 14.0:1 on surface */
  --ink-2: #a9b7c6;   /*  8.1:1 */
  --ink-3: #8494a6;   /*  5.3:1 */

  --navy:   #0b1420;
  --navy-2: #16273a;
  --accent:       #6aa6e8;  /* 6.5:1 on surface — link/selection color */
  --accent-hover: #8dbcf0;
  --accent-bg:    #17293e;

  --crit:    #e05252;  --crit-text: #ef9a9a;  --crit-bg: #2e1d20;
  --warn:    #fab219;  --warn-text: #f2c14e;  --warn-bg: #2d2617;
  --good:    #23b523;  --good-text: #66c266;  --good-bg: #16281a;
  --neutral: #3a4656;  --neutral-text: #a9b7c6; --neutral-bg: #202b38;

  --data:    #3987e5;  /* 4.5:1 on surface */
  --data-bg: #17293e;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5);
}

/* ---------------- base ---------------- */
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Inter's disambiguation set: open digits, a real uppercase I, and an l
     that cannot be mistaken for a 1 — this is a system people read numbers
     and serials off, so glyph clarity is not cosmetic. */
  font-feature-settings: "cv05", "cv08", "ss01";
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px;
                 border-radius: 3px; }
::selection { background: var(--accent-bg); }

/* skip link — first tab stop on every page */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------- layout: sidebar + content ---------------- */
.shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail); flex: none;
  background: var(--navy); color: #d7e2ee;   /* 11.3:1 on navy */
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* The vessel herself heads the panel: photograph under a navy scrim, so the
   white name always clears contrast whatever the sea is doing behind it. */
.rail-head {
  padding: 84px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(11,26,44,.30) 0%, rgba(11,26,44,.55) 55%,
                    #12293f 100%),
    url('/static/img/vessel.jpg') center 38% / cover no-repeat;
}
:root[data-theme="dark"] .rail-head {
  background:
    linear-gradient(180deg, rgba(6,13,22,.35) 0%, rgba(6,13,22,.6) 55%,
                    #0b1420 100%),
    url('/static/img/vessel.jpg') center 38% / cover no-repeat;
}
.rail-head .brand { display: block; font-size: 12px; font-weight: 800;
                    letter-spacing: .28em; color: #9fc3e8;
                    text-shadow: 0 1px 3px rgba(0,0,0,.5); margin-bottom: 2px; }
.rail-head .vessel { font-size: 17px; font-weight: 700; color: #fff;
                     display: block; line-height: 1.25;
                     text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.rail-head .hull { font-size: 12px; color: #cfdcea; margin-top: 3px; display: block;
                   text-shadow: 0 1px 3px rgba(0,0,0,.5); }

.rail-sec { font-size: 12px; font-weight: 600; color: #8fa8c0;
            padding: 20px 20px 6px; text-transform: uppercase; letter-spacing: .06em; }
.rail nav { display: flex; flex-direction: column; padding: 0 10px; }
.rail nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; min-height: 44px;
  color: #d7e2ee; font-size: 15px; font-weight: 500;
  border-radius: var(--radius-sm);
}
.rail nav a:hover { background: var(--navy-2); text-decoration: none; }
.rail nav a[aria-current] { background: var(--navy-2); color: #fff;
                            box-shadow: inset 3px 0 0 #6aa6e8; }
.nav-l { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
      opacity: .85; }
.rail nav a[aria-current] .ic { opacity: 1; }
.rail .badge { font-size: 12px; font-weight: 700; line-height: 1;
               background: var(--crit); color: #fff; padding: 4px 8px;
               border-radius: 999px; min-width: 24px; text-align: center; }
.rail .badge.quiet { background: rgba(255,255,255,.12); color: #d7e2ee; }

.rail-user { margin-top: auto; padding: 16px 20px;
             border-top: 1px solid rgba(255,255,255,.10); }
.ru-name { color: #fff; font-weight: 600; font-size: 15px; }
.ru-role { font-size: 12.5px; color: #8fa8c0; margin-top: 2px; }
.ru-time { font-size: 12.5px; color: #8fa8c0; margin-top: 6px; }
.ru-out  { font-size: 13.5px; color: #a9c3dd; display: inline-block;
           margin-top: 10px; padding: 4px 0; }
.ru-out:hover { color: #fff; }
.rail-user .ru-out + .ru-out { margin-left: 16px; }
.rail-user + .rail-foot { margin-top: 0; }

.rail-foot { padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.10);
             display: flex; align-items: center; justify-content: space-between;
             gap: 8px; flex-wrap: wrap; }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
             background: transparent; border: 1px solid rgba(255,255,255,.25);
             color: #d7e2ee; font: 500 13px var(--sans); cursor: pointer;
             padding: 6px 12px; border-radius: 999px; }
.theme-btn:hover { border-color: #8fa8c0; color: #fff; }
.theme-dot { width: 9px; height: 9px; border-radius: 50%; background: #6aa6e8; }
.rail-date { font-size: 12.5px; color: #8fa8c0; }

/* vessel silhouette */
.rail-ship { width: 100%; margin-bottom: 12px; display: block; }
.rail-ship .wl   { stroke: #33506c; stroke-width: 1; stroke-dasharray: 3 4; }
.rail-ship .hull, .rail-ship .box { fill: none; stroke: #8fa8c0; stroke-width: 1.3; }
.rail-ship .mast { stroke: #8fa8c0; stroke-width: 1.2; }
.rail-ship .dot  { fill: #6aa6e8; }

.canvas { flex: 1; min-width: 0; }
.page-head { background: var(--surface); border-bottom: 1px solid var(--border);
             padding: 24px 36px 20px; }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.page-head .sub { color: var(--ink-2); margin-top: 4px; font-size: 15.5px; }
.page-body { padding: 28px 36px 90px; max-width: 1280px; }

/* ---------------- overview: action cards ---------------- */
.headline { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.headline .n { font-size: 40px; font-weight: 700; line-height: 1; }
.headline .n.act { color: var(--crit-text); }
.headline .n.ok  { color: var(--good-text); }
.headline .t { font-size: 16px; color: var(--ink-2); }

.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-left-width: 5px; border-left-color: var(--border);
  padding: 18px 22px; border-radius: var(--radius); box-shadow: var(--shadow-1);
  display: grid; grid-template-columns: 1fr 170px; gap: 22px; align-items: center;
}
.card.sev-1 { border-left-color: var(--crit); }
.card.sev-2 { border-left-color: var(--warn); }
.card.sev-3 { border-left-color: var(--data); }
.card .cat { font-size: 12.5px; font-weight: 600; color: var(--ink-3);
             text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent); }
.card .why { color: var(--ink-2); font-size: 15px; margin: 0; }
.card .why strong { color: var(--ink); font-weight: 650; }
.card .why .m { font-weight: 600; color: var(--ink); white-space: nowrap; }
.card-right { text-align: right; }
.card .countdown { font-size: 28px; font-weight: 700; line-height: 1.1;
                   font-variant-numeric: tabular-nums; }
.card.sev-1 .countdown { color: var(--crit-text); }
.card.sev-2 .countdown { color: var(--warn-text); }
.card .countdown-l { font-size: 13px; color: var(--ink-3); }

.all-clear { background: var(--good-bg); border: 1px solid var(--good);
             border-left-width: 5px; border-radius: var(--radius); padding: 22px 24px; }
.all-clear h3 { margin: 0 0 4px; font-size: 17px; color: var(--good-text); }
.all-clear p { margin: 0; color: var(--ink-2); }

/* ---------------- vessel health · fleet status ---------------- */
.fleet { display: grid; grid-template-columns: 1fr minmax(300px, 420px);
         background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); box-shadow: var(--shadow-1);
         overflow: hidden; margin-bottom: 20px; }
.fleet-info { padding: 24px 28px; min-width: 0; }
.fleet-info h2 { margin: 2px 0 2px; font-size: 24px; font-weight: 750;
                 letter-spacing: -0.01em; }
.fleet-sub { color: var(--ink-2); font-size: 14.5px; }
.fleet-state { margin-top: 14px; }
.pip.big { font-size: 14.5px; padding: 6px 14px; }
.pip.big::before { width: 10px; height: 10px; }
.fleet-why { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }
.fleet-stats { display: flex; flex-wrap: wrap; gap: 10px 34px;
               margin: 18px 0 0; padding: 14px 0 0;
               border-top: 1px solid var(--hair); }
.fleet-stats .fs dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.fleet-stats .fs dd { margin: 2px 0 0; font-size: 22px; font-weight: 700;
                      font-variant-numeric: tabular-nums; }
.fleet-stats .fs dd.bad { color: var(--crit-text); }
.fleet-photo { background: url('/static/img/vessel.jpg') center 45% / cover
               no-repeat; min-height: 220px; }
@media (max-width: 1050px) {
  .fleet { grid-template-columns: 1fr; }
  .fleet-photo { order: -1; min-height: 150px; }
}

/* ---------------- toolbar (dropdown filters) ---------------- */
.toolbar { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
           background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius); box-shadow: var(--shadow-1);
           padding: 14px 18px; margin-bottom: 16px; }
.tb-field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.tb-field > .k { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tb-field.grow { flex: 1; min-width: 220px; }
.tb-field select, .tb-field input { width: 100%; }
.toolbar .count { padding-bottom: 12px; }

/* ---------------- filters, search, tools ---------------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { font: 500 14px var(--sans); padding: 8px 14px; min-height: 38px;
        cursor: pointer; background: var(--surface);
        border: 1px solid var(--border); color: var(--ink-2);
        border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.chip .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.danger .n { color: var(--crit-text); }
.chip.warn   .n { color: var(--warn-text); }
.chip.ok     .n { color: var(--good-text); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent);
                             color: #fff; }
:root[data-theme="dark"] .chip[aria-pressed="true"] { color: #0b1420; }
.chip[aria-pressed="true"] .n { color: inherit; }

.tools { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
input[type=search], input[type=text], input[type=password], input[type=date],
textarea, select {
  font: 400 15px var(--sans); padding: 10px 13px; min-height: 42px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm);
}
input[type=search] { flex: 1; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.count { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }

/* ---------------- tables ---------------- */
.panel { background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow-1); }
table { width: 100%; border-collapse: collapse; }
thead th { font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left;
           padding: 11px 16px; border-bottom: 2px solid var(--border);
           white-space: nowrap; background: var(--surface-2);
           letter-spacing: .01em; }
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--hair);
           vertical-align: middle; font-size: 15.5px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.name { font-weight: 550; min-width: 230px; }
td.name a { color: var(--ink); }
td.name a:hover { color: var(--accent); }
td.cat { font-size: 14px; color: var(--ink-3); min-width: 150px; max-width: 220px; }
td.num, td.date { font-size: 14.5px; white-space: nowrap;
                  font-variant-numeric: tabular-nums; }
td.days { font-size: 14.5px; text-align: right; font-weight: 600;
          font-variant-numeric: tabular-nums; }

/* ---------------- status badges ---------------- */
.status-cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pip { display: inline-flex; align-items: center; gap: 7px;
       font-size: 13px; font-weight: 600; white-space: nowrap;
       padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
.pip::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
               flex: none; background: currentColor; }
.pip.expired, .pip.critical, .pip.window_missed {
  color: var(--crit-text); background: var(--crit-bg); }
.pip.expired::before, .pip.critical::before, .pip.window_missed::before {
  background: var(--crit); }
.pip.alert { color: var(--accent); background: var(--accent-bg); }
.pip.alert::before { background: var(--accent); }
.pip.warning, .pip.window_open {
  color: var(--warn-text); background: var(--warn-bg); }
.pip.warning::before, .pip.window_open::before { background: var(--warn); }
.pip.valid { color: var(--good-text); background: var(--good-bg); }
.pip.valid::before { background: var(--good); }
.pip.no_expiry { color: var(--neutral-text); background: var(--neutral-bg); }
.pip.no_expiry::before { background: none; border: 1.5px dashed currentColor; }
.pip.inferred { color: var(--accent); background: var(--accent-bg); }
.pip.inferred::before { background: none; border: 1.5px dashed currentColor; }
:root[data-theme="dark"] .pip.inferred { color: var(--accent); }

/* ---------------- the survey-window bar ---------------- */
.rule-cell { width: 190px; }
.swr { position: relative; height: 30px; }
.swr-track { position: absolute; top: 15px; left: 0; right: 0; height: 1px;
             background: var(--border); }
.swr-band { position: absolute; top: 9px; height: 12px; left: 0; right: 0;
            border: 1.5px solid var(--data); background: var(--data-bg);
            border-radius: 3px; }
.swr-survey { position: absolute; top: 4px; width: 2px; height: 23px;
              background: var(--data); }
.swr-today { position: absolute; top: 0; width: 0; height: 30px;
             border-left: 2px dashed var(--crit); }
.swr-today::after { content: 'Now'; position: absolute; top: -2px; left: 4px;
                    font-size: 11px; font-weight: 700; color: var(--crit-text); }
.swr.open   .swr-band   { border-color: var(--warn); background: var(--warn-bg); }
.swr.open   .swr-survey { background: var(--warn); }
.swr.missed .swr-band   { border-color: var(--crit); background: var(--crit-bg); }
.swr.missed .swr-survey { background: var(--crit); }
.swr-none { font-size: 13px; color: var(--ink-3); line-height: 30px; }

.swr-big { height: 80px; margin: 8px 0 2px; }
.swr-big .swr-track  { top: 40px; }
.swr-big .swr-band   { top: 29px; height: 23px; }
.swr-big .swr-survey { top: 19px; height: 43px; }
.swr-big .swr-today  { height: 66px; }
.swr-tick { position: absolute; bottom: 0; font-size: 13px;
            transform: translateX(-50%); white-space: nowrap; }
.swr-tick.l { transform: none; left: 0; }
.swr-tick.r { transform: none; right: 0; text-align: right; }
.swr-tick .tl { display: block; font-size: 12px; color: var(--ink-3); }
.swr-tick .tv { color: var(--ink); font-weight: 550; }

/* ---------------- sheets (detail pages, forms) ---------------- */
.back { display: inline-block; margin-bottom: 16px; font-size: 14.5px; font-weight: 500; }
.sheet { background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-1); }
.sheet + .sheet, .panel + .sheet, .sheet + .panel { margin-top: 18px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start;
              gap: 20px; flex-wrap: wrap; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--ink-3);
           text-transform: uppercase; letter-spacing: .05em; }

.notice { padding: 14px 18px; margin-top: 20px; border: 1px solid transparent;
          border-left-width: 5px; border-radius: var(--radius-sm); font-size: 15px;
          color: var(--ink); }
.notice .t { display: block; margin-bottom: 3px; font-weight: 700; font-size: 15px; }
.notice.danger { border-color: var(--crit); background: var(--crit-bg); }
.notice.danger .t { color: var(--crit-text); }
.notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.notice.warn .t { color: var(--warn-text); }

h3.sec { font-size: 13.5px; font-weight: 700; text-transform: uppercase;
         letter-spacing: .06em; color: var(--ink-3); margin: 26px 0 12px;
         padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sheet h3.sec:first-child { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 18px 26px; }
.field .k { font-size: 13.5px; font-weight: 600; color: var(--ink-2);
            display: block; margin-bottom: 4px; }
.field .v { font-size: 15.5px; }
.field .v.empty { color: var(--ink-3); }

.hash { font-family: var(--mono); font-size: 12px; color: var(--ink-3);
        word-break: break-all; }
.btn { font: 600 15px var(--sans); padding: 11px 22px; min-height: 44px;
       cursor: pointer; background: var(--accent); color: #fff; border: none;
       border-radius: var(--radius-sm); }
.btn:hover { background: var(--accent-hover); }
:root[data-theme="dark"] .btn { background: #1c5cab; color: #fff; }
:root[data-theme="dark"] .btn:hover { background: #256abf; }
.btn.ghost { background: transparent; color: var(--ink-2);
             border: 1px solid var(--border); padding: 7px 14px; min-height: 38px; }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent);
                   background: transparent; }
.empty-state { padding: 44px 20px; text-align: center; color: var(--ink-3);
               font-size: 15px; }
.meta { font-size: 14px; color: var(--ink-3); }

/* ---------------- overview instruments ---------------- */
.inst-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px; margin-bottom: 28px; }
.inst { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow-1);
        padding: 18px 14px 16px;
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        color: var(--ink); }
.inst:hover { border-color: var(--accent); text-decoration: none;
              box-shadow: var(--shadow-2); }

/* status donut. Segment colors are the validated status set; segment gaps are
   cut server-side (2px surface gap per the mark spec). */
.arc { width: 116px; height: 116px; }
.arc-track { fill: none; stroke: var(--hair); stroke-width: 10; }
.arc-seg   { fill: none; stroke-width: 10; }
.arc-seg.act  { stroke: var(--crit); }
.arc-seg.warn { stroke: var(--warn); }
.arc-seg.ok   { stroke: var(--good); }
.arc-seg.none { stroke: var(--neutral); }
.arc-n { font: 700 24px var(--sans); fill: var(--ink); text-anchor: middle; }
.arc-l { font: 600 8px var(--sans); fill: var(--ink-3); text-anchor: middle;
         letter-spacing: .12em; }

.inst-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.lg { font-size: 13px; color: var(--ink-2);
      display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lg.act::before  { background: var(--crit); }
.lg.warn::before { background: var(--warn); }
.lg.ok::before   { background: var(--good); }
.lg.none::before { background: var(--neutral); }

/* ---------------- batteries (live from VRM) ---------------- */
.batt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 12px; margin-bottom: 26px; }
.batt-card { background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius); box-shadow: var(--shadow-1);
             padding: 20px 22px; display: flex; align-items: center; gap: 20px; }

/* the battery itself: body + terminal nub, fill sweeping to the true level */
.batt-icon { position: relative; width: 120px; height: 54px; flex: none;
             border: 3px solid var(--ink-2); border-radius: 10px;
             padding: 4px; background: var(--surface-2); }
.batt-icon::after { content: ''; position: absolute; right: -10px; top: 50%;
                    transform: translateY(-50%); width: 7px; height: 22px;
                    background: var(--ink-2); border-radius: 0 4px 4px 0; }
.batt-fill { position: relative; height: 100%; width: var(--soc, 0%);
             border-radius: 5px; overflow: hidden;
             animation: batt-sweep 1.1s cubic-bezier(.33,1,.68,1); }
@keyframes batt-sweep { from { width: 0; } }
.batt-fill.ok   { background: linear-gradient(180deg, var(--good) 0%, #0a8a0a 100%); }
.batt-fill.warn { background: linear-gradient(180deg, var(--warn) 0%, #d99a0e 100%); }
.batt-fill.act  { background: linear-gradient(180deg, var(--crit) 0%, #b32f2f 100%);
                  animation: batt-sweep 1.1s cubic-bezier(.33,1,.68,1),
                             batt-pulse 1.6s ease-in-out 1.2s infinite; }
@keyframes batt-pulse { 50% { opacity: .45; } }

/* charging: a light band drifts across the fill, plus the bolt */
.batt-card.charging .batt-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%,
              rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: batt-shimmer 2.2s ease-in-out 1.1s infinite; }
@keyframes batt-shimmer { to { transform: translateX(100%); } }
.bolt { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
        fill: #fff; stroke: rgba(0,0,0,.35); stroke-width: 1.2;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

.batt-info { min-width: 0; }
.batt-pct { font-size: 36px; font-weight: 750; line-height: 1.1;
            font-variant-numeric: tabular-nums; }
.batt-pct small { font-size: 19px; font-weight: 650; }
.batt-pct.ok   { color: var(--good-text); }
.batt-pct.warn { color: var(--warn-text); }
.batt-pct.act  { color: var(--crit-text); }
.batt-card .meter-name { color: var(--ink); font-size: 15.5px; margin-top: 2px; }

/* hour meter — kept as the one deliberate instrument: a navy counter panel */
.meter-face { background: var(--navy); border-radius: var(--radius-sm);
              padding: 10px 18px 8px; text-align: center; min-width: 128px; }
.meter-digits { font: 700 26px var(--mono); color: #fff; letter-spacing: .08em;
                display: block; line-height: 1.1;
                font-variant-numeric: tabular-nums; }
.meter-unit { font-size: 10px; letter-spacing: .25em; color: #8fa8c0;
              text-transform: uppercase; }
.meter-name { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.spark { width: 124px; height: 30px; }
.spark polyline { fill: none; stroke: var(--data); stroke-width: 2;
                  vector-effect: non-scaling-stroke; }

/* counters page traces */
.trace-wrap { background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius); box-shadow: var(--shadow-1);
              padding: 14px 18px 10px; margin-bottom: 12px; }
.trace-head { display: flex; justify-content: space-between; align-items: baseline;
              margin-bottom: 8px; gap: 12px; flex-wrap: wrap; }
.trace-head .meter-name { color: var(--ink); font-size: 15px; }
.trace { width: 100%; height: 90px; display: block; }
.trace polyline { fill: none; stroke: var(--data); stroke-width: 2;
                  vector-effect: non-scaling-stroke; }
.trace .grid { stroke: var(--hair); stroke-width: 1;
               vector-effect: non-scaling-stroke; }

/* ---------------- sign in / setup / activate ---------------- */
/* SAFEEN GREEN herself behind the entry card. The navy scrim keeps the card
   and its text at full contrast whatever the photograph is doing. Data
   screens never carry the photo full-bleed — data stays on clean surface. */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0; padding: 24px;
  background:
    linear-gradient(160deg, rgba(18,41,63,.82) 0%, rgba(11,26,44,.78) 55%,
                    rgba(8,18,32,.88) 100%),
    url('/static/img/vessel.jpg') center 40% / cover no-repeat fixed,
    linear-gradient(160deg, #12293f 0%, #0b1a2c 55%, #081220 100%);
}
@media (max-width: 640px) { .login-body { background-attachment: scroll; } }
.login-card {
  width: 100%; max-width: 400px; padding: 34px 34px 30px;
  background: #ffffff; color: #1c2733;
  border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55);
}
.login-card h1 { margin: 4px 0 0; font-size: 23px; font-weight: 700; }
.login-card .rail-ship { margin-bottom: 18px; }
.login-card .rail-ship .wl   { stroke: #c6d2de; }
.login-card .rail-ship .hull,
.login-card .rail-ship .box  { stroke: #46566a; }
.login-card .rail-ship .mast { stroke: #46566a; }
.login-card .rail-ship .dot  { fill: #15569e; }
/* the entry pages are always light — pin every token they use */
.login-card .field .k { color: #46566a; }
.login-card input { background: #fff; border-color: #dde3ea; color: #1c2733; }
.login-card .btn { background: #15569e; color: #fff; }
.login-card .btn:hover { background: #104379; }
.login-card .meta { color: #5c6b7f; }
.login-card .eyebrow { color: #5c6b7f; }
.login-card .notice.danger { border-color: #d03b3b; background: #fbeaea; color: #1c2733; }
.login-card .notice.danger .t { color: #a32424; }
.login-card a { color: #15569e; }
.login-card .grid .field .v { color: #1c2733; }

/* ---------------- collapsible add-forms ---------------- */
.add-form { margin-top: 18px; }
.add-form.top { margin: 0 0 18px; }
.parts-used { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.qty-in { width: 76px; min-height: 34px; padding: 4px 8px; text-align: right; }
.add-form > summary {
  cursor: pointer; font-size: 15.5px; font-weight: 650; color: var(--accent);
  list-style: none; display: flex; align-items: center; gap: 10px;
  min-height: 28px;
}
.add-form > summary::-webkit-details-marker { display: none; }
.add-form > summary::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--accent-bg); color: var(--accent);
  font-size: 19px; font-weight: 600; line-height: 1;
}
.add-form[open] > summary { margin-bottom: 4px; }
.add-form[open] > summary::before { content: '−'; }
/* Must-do discipline groups: collapsed drop-downs. The summary line carries
   the counts, so nothing urgent is invisible while a group is shut. */
.disc-group { margin: 0 0 12px; }
.disc-group > summary {
  cursor: pointer; font-size: 15.5px; font-weight: 650;
  list-style: none; display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 6px 14px;
  background: var(--panel, transparent);
  border: 1px solid var(--line, #dde3ea); border-radius: 10px;
}
.disc-group > summary::-webkit-details-marker { display: none; }
.disc-group > summary::before {
  content: ''; display: inline-block; flex: none;
  width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  margin: 0 4px 0 2px; transition: transform .15s ease; opacity: .55;
}
.disc-group[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.disc-group[open] > summary::before { transform: rotate(45deg); }
.disc-group > summary .n { font-weight: 400; color: var(--muted, #5c6b7f); }
.disc-group > summary .pip { margin-left: auto; }
.disc-group > summary .pip + .pip { margin-left: 8px; }
.disc-group > .panel { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }

.check { display: flex; align-items: center; gap: 10px; font-size: 15px;
         cursor: pointer; }
.check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.check.sm { font-size: 13.5px; gap: 6px; display: inline-flex; }
.check.sm input[type=checkbox] { width: 15px; height: 15px; }
.prefs-form { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.prefs-form .btn.ghost { padding: 4px 10px; min-height: 30px; font-size: 13px; }
td.days.neg { color: var(--crit-text); }

/* ---------------- people page ---------------- */
.invite-link { font-family: var(--mono); font-size: 12px; width: 100%;
               max-width: 300px; padding: 6px 8px; border: 1px solid var(--border);
               background: var(--accent-bg); color: var(--accent);
               border-radius: var(--radius-sm); cursor: pointer; }
.access-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.access-form select { font-size: 14px; padding: 6px 8px; min-height: 36px;
                      width: auto; max-width: 150px; }
.access-form .btn.ghost { padding: 6px 12px; min-height: 36px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1050px) {
  .card { grid-template-columns: 1fr; gap: 10px; }
  .card-right { text-align: left; display: flex; align-items: baseline; gap: 8px; }
}
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .rail { width: 100%; height: auto; position: static; overflow: visible; }
  .rail nav { flex-direction: row; overflow-x: auto; padding: 0 10px 8px; }
  .rail nav a { white-space: nowrap; }
  .rail nav a[aria-current] { box-shadow: inset 0 -3px 0 #6aa6e8; }
  .rail-sec { padding-top: 10px; }
  .rail-user, .rail-foot { border-top: none; padding-top: 4px; }
  .hide-sm { display: none; }
  .page-head, .page-body { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important;
      scroll-behavior: auto !important; }
}
@media print {
  .rail, .tools, .filters, .btn, .skip-link { display: none !important; }
  .canvas, body { background: #fff; }
  .sheet, .panel, .card { box-shadow: none; }
}