/*
 * Dashboard — "engine control room" instrument panel (APP SPEC J9, J10).
 * Fonts kept locally (SIL Open Font License): Chakra Petch for labels and headings,
 * IBM Plex Mono for every figure, IBM Plex Sans for text.
 */
@font-face { font-family: 'Chakra Petch'; src: url('vendor/fonts/dashboard/ChakraPetch-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('vendor/fonts/dashboard/ChakraPetch-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('vendor/fonts/dashboard/ChakraPetch-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('vendor/fonts/dashboard/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('vendor/fonts/dashboard/IBMPlexMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('vendor/fonts/dashboard/IBMPlexSans-Variable.ttf') format('truetype'); font-weight: 100 700; font-display: swap; }

/* --- Themes ------------------------------------------------------------------ */
:root, [data-theme="dark"] {
  --bg: #0b1627;
  --bg-2: #0f1e33;
  --card: #13253d;
  --card-2: #172c47;
  --line: rgba(173, 205, 235, .12);
  --line-strong: rgba(173, 205, 235, .24);
  --grid: rgba(94, 198, 211, .05);
  --text: #e8eef6;
  --muted: #9fb0c5;
  --faint: #8a9cb3;
  --accent: #1f6d7a;
  --accent-text: #6ccfdb;
  --glow: rgba(31, 109, 122, .45);
  --green: #3fd49a;   --green-bg: rgba(63, 212, 154, .14);
  --amber: #f2b84b;   --amber-bg: rgba(242, 184, 75, .15);
  --red: #ff7a6b;     --red-bg: rgba(255, 122, 107, .15);
  --grey: #a7b4c6;    --grey-bg: rgba(167, 180, 198, .14);
  --fo: #c8772f;  --fo-2: #8a4a19;   /* heavy fuel oil: dark amber */
  --do: #e3c45a;  --do-2: #b08d26;   /* gas oil: straw */
  --tank-shell: #0d1b2e;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f1eee7;
  --bg-2: #e9e5dc;
  --card: #ffffff;
  --card-2: #f7f5f0;
  --line: rgba(15, 30, 51, .10);
  --line-strong: rgba(15, 30, 51, .22);
  --grid: rgba(31, 109, 122, .06);
  --text: #0f1e33;
  --muted: #4b5a6e;
  --faint: #58667a;
  --accent: #1f6d7a;
  --accent-text: #1a5f6a;
  --glow: rgba(31, 109, 122, .18);
  --green: #127a4f;   --green-bg: rgba(18, 122, 79, .10);
  --amber: #8f5a00;   --amber-bg: rgba(196, 128, 0, .13);
  --red: #b3261e;     --red-bg: rgba(179, 38, 30, .10);
  --grey: #4f5d6f;    --grey-bg: rgba(79, 93, 111, .10);
  --fo: #b5651d;  --fo-2: #7c3f0c;
  --do: #d4ad2c;  --do-2: #9a7712;
  --tank-shell: #eef1f4;
  --shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 34px -26px rgba(15, 30, 51, .45);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden always wins over display rules (e.g. .pill) */
html { -webkit-text-size-adjust: 100%; }
body.dash {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 15px/1.45 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(1200px 520px at 12% -10%, var(--glow), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, var(--bg-2), var(--bg) 420px);
  background-color: var(--bg);
  transition: background-color .3s ease, color .3s ease;
}
.num, .mono { font-family: 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.label {
  font-family: 'Chakra Petch', 'IBM Plex Sans', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 6px; }

/* --- J1 header bar ----------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) clamp(16px, 3vw, 36px) 14px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.bar .ident { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.bar .mark {
  width: 34px; height: 34px; flex: none; align-self: center;
  border: 1.5px solid var(--accent-text); border-radius: 9px; display: grid; place-items: center;
  color: var(--accent-text); box-shadow: 0 0 18px -4px var(--glow);
}
.bar h1 {
  margin: 0; font: 700 clamp(1.25rem, 2.2vw, 1.7rem)/1.1 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar .meta { display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--muted); font-size: .86rem; }
.bar .meta b { color: var(--text); font-weight: 600; }
.bar .spacer { flex: 1 1 auto; }
.clock { text-align: right; line-height: 1.15; }
.clock .time { font: 600 1.35rem/1 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.clock .date { font-size: .8rem; color: var(--muted); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font: 600 .74rem/1 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.badge.manual { color: var(--amber); background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.theme-toggle {
  width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .2s ease;
}
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 22px; height: 22px; }
[data-theme="dark"] .theme-toggle .sun, [data-theme="light"] .theme-toggle .moon { display: none; }

/* --- Layout (J9) ---------------------------------------------------------------- */
.grid {
  display: grid; gap: 18px; padding: 20px clamp(16px, 3vw, 36px) calc(36px + env(safe-area-inset-bottom, 0px));
  max-width: 1500px; margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "warnings" "gauges" "bunker" "control" "ship" "tanks" "history" "actions";
}
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "gauges gauges gauges gauges gauges gauges gauges bunker bunker bunker bunker bunker"
      "ship ship ship ship ship ship ship ship ship ship ship ship"
      "tanks tanks tanks tanks tanks tanks tanks tanks tanks tanks tanks tanks"
      "control control control control warnings warnings warnings warnings history history history history"
      "actions actions actions actions actions actions actions actions actions actions actions actions";
  }
}
.a-warnings { grid-area: warnings; } .a-gauges { grid-area: gauges; } .a-bunker { grid-area: bunker; }
.a-tanks { grid-area: tanks; } .a-control { grid-area: control; } .a-history { grid-area: history; }
.a-actions { grid-area: actions; } .a-ship { grid-area: ship; }
@media (max-width: 1023px) { .a-warnings.is-clear { display: none; } } /* iPad: warnings first, only if any */

/* --- Cards: instrument bezels -------------------------------------------------- */
.card {
  position: relative; min-width: 0;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: 18px; padding: 20px clamp(16px, 2vw, 24px);
  box-shadow: var(--shadow);
  animation: rise .55s cubic-bezier(.2, .7, .2, 1) both;
}
.card::before, .card::after { /* corner brackets */
  content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent);
  opacity: .7; pointer-events: none;
}
.card::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.card::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card h2 { margin: 0; font: 700 1.05rem/1.2 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.card h2 .idx { color: var(--accent-text); margin-right: 8px; font-family: 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; font-weight: 400; letter-spacing: 0; }
.a-gauges { animation-delay: .04s; } .a-bunker { animation-delay: .1s; } .a-tanks { animation-delay: .16s; }
.a-control { animation-delay: .22s; } .a-warnings { animation-delay: .26s; } .a-history { animation-delay: .3s; } .a-actions { animation-delay: .34s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- J2 gauges ------------------------------------------------------------------ */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 20px; }
.gauge { text-align: center; }
.gauge svg { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.gauge .track { stroke: var(--line-strong); }
.gauge .zone-red { stroke: var(--red); } .gauge .zone-amber { stroke: var(--amber); } .gauge .zone-green { stroke: var(--green); }
.gauge .zone { opacity: .55; }
.gauge .value { transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px var(--glow)); }
.gauge .value.green { stroke: var(--green); } .gauge .value.amber { stroke: var(--amber); } .gauge .value.red { stroke: var(--red); } .gauge .value.none { stroke: transparent; }
.gauge .tick { stroke: var(--faint); } .gauge .tick.major { stroke: var(--muted); }
.gauge .tick-label { fill: var(--faint); font: 500 9px 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
.gauge .needle { transition: transform .9s cubic-bezier(.2, .8, .2, 1); transform-box: view-box; }
.gauge .needle line { stroke: var(--text); }
.gauge .hub { fill: var(--card); stroke: var(--accent-text); }
.gauge .pct { fill: var(--text); font: 600 34px 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; letter-spacing: -.02em; }
.gauge .pct-unit { fill: var(--muted); font: 600 9.5px 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center;
  padding-top: 14px; margin-top: 4px; border-top: 1px dashed var(--line-strong); font-size: .78rem; color: var(--muted); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
.legend .key i { width: 18px; height: 4px; border-radius: 2px; background: currentColor; }
.legend .key.green { color: var(--green); } .legend .key.amber { color: var(--amber); } .legend .key.red { color: var(--red); }
.gauge-asof { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); font-size: .78rem; }
.legend-note { flex-basis: 100%; text-align: center; color: var(--faint); font-size: .72rem; }
.gauge .gauge-mt { font: 600 1.45rem/1.1 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; margin-top: -6px; }
.gauge .gauge-mt small { font-size: .8rem; color: var(--muted); margin-left: 4px; }
.gauge .gauge-sub { color: var(--muted); font-size: .82rem; }
.gauge .gauge-src { margin-top: 6px; font-size: .78rem; color: var(--accent-text); font-family: 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .06em; }
.gauge .gauge-note { margin-top: 6px; color: var(--amber); font-weight: 600; font-size: .86rem; }

/* --- J4 bunkering ---------------------------------------------------------------- */
.grade { padding: 14px 0; border-top: 1px dashed var(--line-strong); }
.grade:first-of-type { border-top: 0; padding-top: 2px; }
.grade-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.grade-name { font: 700 1rem/1 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .1em; }
.steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 12px 0 10px; }
.step { flex: 1 1 88px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid var(--line); }
.step .label { font-size: .62rem; }
.step .v { font: 600 1rem/1.25 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.step.bdn { background: transparent; border-style: dashed; }
.arrow { align-self: center; color: var(--faint); font-family: 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
.diff { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.diff .v { font: 600 1.2rem 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
.diff .v.neg { color: var(--red); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font: 700 .78rem/1 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.pill.green { color: var(--green); background: var(--green-bg); }
.pill.red { color: var(--red); background: var(--red-bg); }
.pill.amber { color: var(--amber); background: var(--amber-bg); }
.pill.grey { color: var(--grey); background: var(--grey-bg); }
.note { color: var(--amber); font-size: .84rem; font-weight: 600; margin-top: 6px; }
.refusal { color: var(--muted); font-size: .8rem; margin-top: 6px; }

/* --- Buttons --------------------------------------------------------------------- */
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn {
  min-height: 44px; padding: 10px 16px; border-radius: 12px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 .86rem/1.1 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .06em;
  color: var(--text); background: var(--card); border: 1px solid var(--line-strong);
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { border-color: var(--accent-text); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.delivery { font-size: .82rem; color: var(--muted); margin-top: 8px; }
.delivery .open-view { min-height: 36px; margin: 6px 6px 0 0; }

/* --- J3 tanks --------------------------------------------------------------------- */
.fuel-group + .fuel-group { margin-top: 18px; }
.fuel-group > .label { display: block; margin-bottom: 10px; }
.tankrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.tank {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card-2) 70%, transparent);
  min-height: 44px; transition: border-color .2s ease, transform .2s ease;
}
.tank:hover { border-color: var(--line-strong); }
.tank:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.tank[aria-expanded="true"] { border-color: var(--accent-text); }
.shell {
  position: relative; height: 112px; border-radius: 12px 12px 16px 16px; overflow: hidden;
  background: var(--tank-shell); border: 1.5px solid var(--line-strong);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--card) 70%, transparent);
}
.shell .liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(180deg, var(--liq), var(--liq-2));
  transition: height 1.1s cubic-bezier(.2, .8, .2, 1);
}
.shell .liquid::before { /* the wave on the surface: a sine crest, masked, drifting */
  content: ''; position: absolute; left: 0; top: -6px; width: 200%; height: 7px;
  background: var(--liq);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 4 Q10 0 20 4 T40 4 V7 H0Z'/%3E%3C/svg%3E") 0 0 / 40px 7px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 4 Q10 0 20 4 T40 4 V7 H0Z'/%3E%3C/svg%3E") 0 0 / 40px 7px repeat-x;
  animation: wave 5s linear infinite;
}
.shell .liquid[style*="height: 0%"]::before { display: none; }
@keyframes wave { to { transform: translateX(-50%); } }
.shell .gloss { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(0,0,0,.12)); pointer-events: none; }
.shell .scale { position: absolute; right: 5px; top: 8px; bottom: 8px; width: 6px; background:
  repeating-linear-gradient(180deg, var(--faint) 0 1px, transparent 1px 10%); opacity: .5; }
.shell .pctlabel {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  font: 600 .86rem 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; color: var(--text);
  background: color-mix(in srgb, var(--tank-shell) 78%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tank.fo { --liq: var(--fo); --liq-2: var(--fo-2); }
.tank.do { --liq: var(--do); --liq-2: var(--do-2); }
.tank.hatched .shell { background: repeating-linear-gradient(135deg, var(--amber-bg) 0 8px, transparent 8px 16px), var(--tank-shell); border-color: var(--amber); }
.tank.hatched .pctlabel { color: var(--amber); font-family: 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; font-size: .74rem; letter-spacing: .06em; top: 40%; white-space: normal; text-align: center; width: 86%; }
.tank.empty .pctlabel { color: var(--faint); }
.tank .tname { font: 600 .74rem/1.2 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .05em; min-height: 2.4em; }
.tank .tfig { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; font-size: .74rem; color: var(--muted); }
.tank .tfig b { color: var(--text); font: 600 .78rem 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; text-align: right; }
.tank-detail { grid-column: 1 / -1; margin-top: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: .86rem; }
.tank-detail dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 18px; margin: 0; }
.tank-detail dt { color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-family: 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; }
.tank-detail dd { margin: 0; font: 600 .95rem 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }

/* --- J5 control R.O.B. ------------------------------------------------------------- */
.ctrl-row { padding: 12px 0; border-top: 1px dashed var(--line-strong); }
.ctrl-row:first-of-type { border-top: 0; padding-top: 0; }
.ctrl-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px 12px; margin: 8px 0; }
.ctrl-figs .v { font: 600 1rem 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
.ctrl-figs .v.neg { color: var(--red); }
.tolbar { position: relative; height: 26px; margin-top: 4px; }
.tolbar .rail { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.tolbar .band { position: absolute; top: 7px; height: 12px; border-radius: 6px; background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 50%, transparent); }
.tolbar .zero { position: absolute; left: 50%; top: 4px; width: 1px; height: 18px; background: var(--faint); }
.tolbar .marker { position: absolute; top: 2px; width: 14px; height: 22px; margin-left: -7px; border-radius: 4px; background: var(--accent-text); box-shadow: 0 0 12px var(--glow); }
.tolbar .marker.over { background: var(--red); }
.over-badge { color: var(--red); background: var(--red-bg); }

/* --- J6 warnings ----------------------------------------------------------------- */
.warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 430px; overflow: auto; overscroll-behavior: contain; }
.warn-list a {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; min-height: 44px; border-radius: 10px;
  text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--amber) 8%, transparent);
  border-left: 3px solid var(--amber); font-size: .88rem;
}
.warn-list a:hover { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.warn-list li.tolerance a, .warn-list li.bdn a, .warn-list li.declared a, .warn-list li.backup a { border-left-color: var(--red); background: var(--red-bg); }
.warn-list .kind { font: 600 .62rem/1.6 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); min-width: 72px; }
.all-clear { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; background: var(--green-bg); color: var(--green); }
.all-clear svg { width: 34px; height: 34px; flex: none; }
.all-clear b { font-family: 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.count { font: 600 .78rem 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; padding: 4px 10px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); }

/* --- J7 history -------------------------------------------------------------------- */
.off { color: var(--muted); font-size: .88rem; }
.btns.tight { margin-top: 0; }
.btns.tight .btn { min-height: 44px; padding: 8px 12px; font-size: .78rem; }
.chart-box { margin: 12px 0 0; }
.chart-box figcaption { display: block; margin-bottom: 2px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font: 8.5px 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
.chart-legend { border-top: 0; padding-top: 6px; }
.events { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; max-height: 300px; overflow: auto; }
.events li { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card-2) 70%, transparent); font-size: .8rem; }
.events .ev-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.events .ev-stage { font: 700 .7rem 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .14em; color: var(--accent-text); }
.events .ev-sup { font: 600 .66rem 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); padding: 2px 7px; border-radius: 999px; }
.events .ev-file { color: var(--text); word-break: break-all; margin-top: 3px; }
.events .ev-sum { color: var(--muted); margin-top: 2px; }
.events li.superseded .ev-file, .events li.superseded .ev-sum { text-decoration: line-through; opacity: .7; }

/* --- J8 quick actions ----------------------------------------------------------------- */
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.action {
  display: flex; flex-direction: column; gap: 6px; min-height: 88px; padding: 14px 16px; border-radius: 14px;
  text-decoration: none; color: var(--text); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--card)), var(--card));
  transition: transform .2s ease, border-color .2s ease;
}
.action:hover { transform: translateY(-2px); border-color: var(--accent-text); }
.action b { font: 700 1rem 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .04em; }
.action span { color: var(--muted); font-size: .8rem; }
.action.hint {
  background: transparent; border-style: dashed; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.action.hint:hover { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.action.hint:active { transform: scale(.98); }
.action.hint[aria-expanded="true"] { border-style: solid; border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.action .info {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%;
  border: 1.5px solid var(--accent-text); color: var(--accent-text); font: italic 700 .72rem/1 Georgia, 'Times New Roman', serif;
  vertical-align: 1px;
}
.archive-panel {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--accent-text);
  background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .88rem; animation: rise .3s ease both;
}
.archive-panel p { margin: 6px 0 12px; color: var(--muted); }
.archive-panel p b { color: var(--text); font-weight: 600; }
.ap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 24px; }
.ap-here { margin-bottom: 6px; }
.ap-browser { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.ap-browser.here { border-color: var(--accent-text); }
.ap-browser p { margin: 4px 0 0; }
.ap-ask, .ap-tip { color: var(--muted); font-size: .85rem; }
.ap-other { margin: 6px 0 10px; }
.ap-other summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.ap-other .ap-cols { gap: 8px; }
.ap-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ap-files li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.ap-files .ap-when { color: var(--muted); font-size: .8rem; }
.ap-files .ap-stage { font: 700 .7rem 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .14em; color: var(--accent-text); }
.ap-files .ap-file { word-break: break-all; }
.ap-files li.superseded .ap-file { text-decoration: line-through; opacity: .7; }
.ap-files .ap-empty { color: var(--muted); }
.ap-foot { font-size: .78rem; margin-bottom: 0 !important; }
.foot { text-align: center; color: var(--faint); font-size: .76rem; padding-bottom: 24px; }

/* --- Motion (J2: none when "reduce motion" is on) ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Warning marker on a flagged tank tile (J3) */
.tank { position: relative; }
.tank.flagged { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.flag-mark {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center;
  color: var(--amber); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--amber) 55%, transparent)); z-index: 2;
}
.flag-mark svg { width: 22px; height: 22px; }

.badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.action[aria-disabled="true"] { opacity: .55; cursor: not-allowed; background: transparent; }
.action[aria-disabled="true"]:hover { transform: none; border-color: var(--line-strong); }
/* Flag reason on a tile: tooltip on hover, label when the tile is tapped / opened */
.flag-label {
  display: none; position: absolute; top: 30px; right: 4px; z-index: 3; max-width: 150px;
  padding: 4px 8px; border-radius: 8px; font: 600 .7rem/1.3 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .04em;
  color: #1b1300; background: var(--amber); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); text-align: left;
}
.tank:hover .flag-label, .tank:focus-visible .flag-label, .tank[aria-expanded="true"] .flag-label { display: block; }
@media (hover: none) { .tank:hover .flag-label { display: none; } .tank[aria-expanded="true"] .flag-label { display: block; } }

/* --- Ship & trim card ------------------------------------------------------------- */
.ship-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); }
.seg-btn {
  min-height: 44px; min-width: 76px; padding: 6px 14px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); font: 700 .78rem/1 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.seg-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg-btn:not([aria-pressed="true"]):hover { color: var(--text); }
#trim-badge { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
#trim-badge.missing { color: var(--amber); background: var(--amber-bg); }
.ship-wrap { overflow: hidden; }
.ship-wrap svg { width: 100%; height: auto; display: block; }
#ship-svg .sky { fill: transparent; }
#ship-svg .sea { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
#ship-svg .sea-front { fill: color-mix(in srgb, var(--accent) 16%, transparent); pointer-events: none; }
#ship-svg .wave { fill: none; stroke: var(--accent-text); stroke-width: 2; opacity: .8; animation: shipwave 6s linear infinite; }
@keyframes shipwave { to { transform: translateX(-60px); } }
#ship-svg .hull-fill { fill: color-mix(in srgb, var(--card-2) 85%, var(--bg)); }
#ship-svg .hull-line { fill: none; stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
#ship-svg .hull-line.missing { stroke-dasharray: 10 7; stroke: var(--amber); }
#ship-svg .super { fill: var(--card); stroke: var(--text); stroke-width: 2; }
#ship-svg .window { fill: var(--accent-text); opacity: .7; }
#ship-svg .funnel { fill: var(--accent); stroke: var(--text); stroke-width: 2; }
#ship-svg .deckline { stroke: var(--muted); stroke-width: 2; fill: none; }
#ship-svg .bulkhead { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
#ship-svg .comp { fill: transparent; stroke: var(--line-strong); stroke-width: 1.5; cursor: pointer; }
#ship-svg .comp:hover, #ship-svg .comp:focus { stroke: var(--accent-text); stroke-width: 3; outline: none; }
#ship-svg .comp.selected { stroke: var(--accent-text); stroke-width: 3.5; }
#ship-svg .comp.flagged { stroke: var(--amber); }
#ship-svg .liq-fo { fill: var(--fo); opacity: .92; }
#ship-svg .liq-do { fill: var(--do); opacity: .92; }
#ship-svg .liq-surfaces line { stroke-width: 2; stroke-linecap: round; pointer-events: none; }
#ship-svg .surf-fo { stroke: color-mix(in srgb, var(--fo) 70%, var(--text)); }
#ship-svg .surf-do { stroke: color-mix(in srgb, var(--do) 70%, var(--text)); }
#ship-svg .comp-label { fill: var(--text); font: 600 12px 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .03em; pointer-events: none; }
#ship-svg .comp-pct { fill: var(--text); font: 600 12px 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; pointer-events: none; }
#ship-svg .comp-label.small { font-size: 9.5px; letter-spacing: 0; }
#ship-svg .comp-pct.small { font-size: 10.5px; }
#ship-svg .region { fill: var(--muted); font: 600 11px 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .16em; }
#ship-svg .draft { fill: var(--text); font: 600 20px 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
#ship-svg .draft-tag { fill: var(--muted); font: 600 11px 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .14em; }
#ship-svg .marks line { stroke: var(--text); stroke-width: 2; }
/* Stern gear: hull outline colours (--text on --card), so both themes pass like the hull. */
#ship-svg .stern-gear { pointer-events: none; }
#ship-svg .rudder { fill: var(--card); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
#ship-svg .rudder-stock, #ship-svg .prop-shaft { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
#ship-svg .prop-hub { fill: var(--text); }
#ship-svg .prop-blade { fill: var(--text); stroke: var(--card); stroke-width: 1.2; transform-box: view-box; transform-origin: 0 0; animation: propturn 3.6s linear infinite; }
/* One turn in 3.6 s, transform only: length cos θ, fore-aft swing 3·sin θ (side view). */
@keyframes propturn {
  0% { transform: translateX(0) scaleY(1); }          12.5% { transform: translateX(2.12px) scaleY(.707); }
  25% { transform: translateX(3px) scaleY(0); }        37.5% { transform: translateX(2.12px) scaleY(-.707); }
  50% { transform: translateX(0) scaleY(-1); }         62.5% { transform: translateX(-2.12px) scaleY(-.707); }
  75% { transform: translateX(-3px) scaleY(0); }       87.5% { transform: translateX(-2.12px) scaleY(.707); }
  100% { transform: translateX(0) scaleY(1); }
}
#ship-svg .nts { fill: var(--faint); font: italic 11px 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif; }
#trim-scale .axis { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
#trim-scale .span { stroke: var(--accent-text); stroke-width: 7; stroke-linecap: round; opacity: .45; }
#trim-scale .node { fill: var(--card); stroke: var(--muted); stroke-width: 2; }
#trim-scale .node.used { fill: var(--accent-text); stroke: var(--accent-text); }
#trim-scale .tick-label { fill: var(--muted); font: 600 13px 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; }
#trim-scale .marker { fill: var(--text); }
#trim-scale .marker.clamped { fill: var(--amber); }
#trim-scale .scale-title { fill: var(--faint); font: 600 11px 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; letter-spacing: .14em; }
.ship-foot { color: var(--muted); font-size: .78rem; margin: 6px 0 0; }
#ship-svg .comp-backing { fill: var(--card); opacity: .86; pointer-events: none; }
#ship-svg .comp.empty { stroke-dasharray: 5 4; }
#ship-svg .comp-pct.none { fill: var(--muted); font-family: 'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif; font-size: 10.5px; }
.trim-weights { margin: 2px 0 0; font: 600 .82rem 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace; color: var(--accent-text); }
.ship-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.ship-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ship-legend b { color: var(--text); font-weight: 600; }
.ship-legend .sw { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.ship-legend .sw.fo { background: var(--fo); } .ship-legend .sw.do { background: var(--do); }
.ship-legend .sw.none { border: 1.5px dashed var(--muted); }
.draft-src { margin: 4px 0 0; font-size: .78rem; color: var(--faint); }