/* =====================================================================
   floten.app — design layer (unslop)
   One visual language for the whole site: map app, Fuel Calc, Nav Calc,
   IMPA, cabinet, Port2Port.

   Rules of the layer:
   · one neutral ramp (ink on the dark screens, paper on the light ones)
   · one accent, used for selection and the one primary action
   · one type family plus a mono for figures; weights 400/500
   · no gradients, no backdrop blur, no glows, no colour washes
   · radii by size: 6 controls, 10 inputs and buttons, 14 panels

   Loaded last on every page. It only changes presentation; no layout
   logic, no JS hooks, no ids are touched.
   ===================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */

:root {
  /* ink ramp — the dark screens */
  --ink-950: #07080d;
  --ink-900: #0b0d14;
  --ink-850: #0e1118;
  --ink-800: #12161f;
  --ink-750: #171c26;
  --ink-700: #1e242f;

  /* paper ramp — the light screens */
  --paper-0: #f5f7fa;
  --paper-1: #ffffff;
  --paper-2: #eef1f6;
  --paper-3: #e4e9f1;

  --accent: #2ec8d8;
  --accent-ink: #04262b;
  --accent-soft: rgba(46, 200, 216, 0.14);
  --accent-line: rgba(46, 200, 216, 0.38);
  --accent-light: #0a707c;
  --accent-light-soft: rgba(10, 112, 124, 0.12);

  --ok: #3fb984;
  --ok-light: #1c7f57;
  --danger: #e5646a;
  --danger-light: #b3261e;
  --warn: #d7a24a;
  --warn-light: #8a5a12;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "DejaVu Sans Mono",
    Consolas, "Liberation Mono", monospace;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* semantic roles — dark by default */
  --s-page: var(--ink-950);
  --s-panel: var(--ink-850);
  --s-raised: var(--ink-750);
  --s-sunken: var(--ink-900);
  --s-line: rgba(238, 240, 245, 0.08);
  --s-line-strong: rgba(238, 240, 245, 0.14);
  --t-1: #eef0f5;
  --t-2: #a3a9b8;
  --t-3: #838b9e;
  --a: var(--accent);
  --a-ink: var(--accent-ink);
  --a-soft: var(--accent-soft);
  --a-line: var(--accent-line);

  /* ── legacy token remap (map app, panels, modals, IMPA) ── */
  --bg-deep: var(--s-page);
  --bg-panel: var(--s-panel);
  --bg-input: var(--s-sunken);
  --surface: var(--s-panel);
  --text: var(--t-2);
  --text-bright: var(--t-1);
  --text-muted: var(--t-3);
  --text-dim: var(--t-3);
  --border: var(--s-line);
  --radius: var(--r-1);
  --radius-md: var(--r-2);
  --radius-lg: var(--r-3);
  --success: var(--ok);
  --danger-ink: var(--danger);
  --warning: var(--warn);

  /* glass is gone: the "glass" variables now point at plain surfaces so
     every legacy rule that still uses them paints a solid panel */
  --glass-bg: var(--s-panel);
  --glass-bg-elevated: var(--s-raised);
  --glass-border: var(--s-line);
  --glass-border-accent: var(--s-line-strong);
  --glass-blur: 0px;
  --glass-blur-heavy: 0px;
  --glass-saturate: 1;
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --glass-fill-map: var(--s-panel);
  --glass-fill-ui: var(--s-panel);

  --header-bg: var(--s-page);
  --header-border: var(--s-line);

  --focus: var(--a-line);
}

/* paper roles — anything that runs in the light theme */
[data-theme="light"] {
  color-scheme: light;
  --s-page: var(--paper-0);
  --s-panel: var(--paper-1);
  --s-raised: var(--paper-2);
  --s-sunken: var(--paper-3);
  --s-line: rgba(17, 24, 39, 0.1);
  --s-line-strong: rgba(17, 24, 39, 0.16);
  --t-1: #111827;
  --t-2: #4b5565;
  --t-3: #61697b;
  --a: var(--accent-light);
  --a-ink: #ffffff;
  --a-soft: var(--accent-light-soft);
  --a-line: rgba(10, 112, 124, 0.42);
  --accent: var(--accent-light);
  --accent-dim: var(--accent-light-soft);
  --accent-glow: none;
  --background: var(--paper-0);
  --text: var(--t-2);
  --text-bright: var(--t-1);
  --text-muted: var(--t-3);
  --text-dim: var(--t-3);
  --border: var(--s-line);
  --glass-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --primary: var(--accent-light);
  /* S248: danger on paper needs the darker red — #e5646a is only 3.3:1 on white. */
  --danger: var(--danger-light);
  --danger-ink: var(--danger-light);
  --header-bg: var(--paper-1);
  --header-border: var(--s-line);
}

/* ── 2. Global type and colour hygiene ─────────────────────────────── */

html {
  -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea,
optgroup {
  font-family: var(--font) !important;
}

code,
kbd,
samp,
pre,
.mono,
[class*="mono"],
[class*="readout"],
[class*="value"] {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

body {
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* weights: no 700/800/900 anywhere in the interface */
:is(h1, h2, h3, h4, h5, h6, strong, b, th, legend, caption, button, .btn,
  [role="button"], [class*="title"], [class*="heading"], [class*="label"],
  [class*="badge"], [class*="chip"], [class*="tab"]) {
  font-weight: 500 !important;
}

/* labels in sentence case, no tracked uppercase, no negative tracking */
:is(button, .btn, [role="button"], label, th, caption, legend, small,
  [class*="label"], [class*="title"], [class*="badge"], [class*="chip"],
  [class*="tab"], [class*="meta"], [class*="caption"], [class*="eyebrow"],
  [class*="kicker"]) {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* no coloured glows or text shadows anywhere */
:is(.float-panel, .modal, dialog, .btn, button, [class*="card"],
  [class*="panel"], [class*="chip"], [class*="badge"]) {
  text-shadow: none !important;
}

/* ── 3. Chrome: header and navigation ──────────────────────────────── */

.floten-header {
  background: var(--s-page) !important;
  border-bottom: 1px solid var(--s-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* the nav keeps its own responsive geometry (header.css scales it down to
   320px); this layer only changes colour, weight and case */
.floten-nav-link {
  border-radius: var(--r-1) !important;
  font-weight: 400 !important;
  color: var(--t-3) !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
}

.floten-nav-link:hover {
  color: var(--t-1) !important;
  background: transparent !important;
}

.floten-nav-link--active,
.floten-nav-link--active:hover {
  color: var(--a) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.floten-nav-link--active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 1px;
  background: var(--a);
}

.floten-logo {
  height: 28px !important;
  /* S239: the wordmark keeps its natural 643x199 ratio everywhere; the old
     lone height did collide with the header.css 26px mobile slot and squeezed
     the mark to a 0.29-narrow sliver. */
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 767px) {
  .floten-logo {
    height: 22px !important;
    width: auto !important;
    max-width: none !important;
  }
  .floten-logo-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* language / theme controls: one quiet square, no neumorphism */
:is(.header-lang-trigger, .header-theme-toggle, .map-header-account,
  .cabinet-lang-toolbar, .cabinet-close-btn) {
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-1) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--t-3) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(.header-lang-trigger, .header-theme-toggle, .map-header-account):hover {
  color: var(--t-1) !important;
  border-color: var(--s-line-strong) !important;
  background: var(--s-raised) !important;
}

.header-lang-trigger[aria-expanded="true"] {
  color: var(--a) !important;
  border-color: var(--a-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-lang-btn {
  border-radius: var(--r-1) !important;
  background: transparent !important;
  color: var(--t-3) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.header-lang-btn.map-lang-btn--active {
  color: var(--a) !important;
  background: var(--a-soft) !important;
}

.header-lang-menu {
  background: var(--s-panel) !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-2) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important;
}

/* ── 4. Panels ─────────────────────────────────────────────────────── */

.float-panel,
.float-panel--premium,
.grib-map-timeline,
.grib-action-bar,
.grib-selection-hint,
.map-ruler-sheet,
.ocean-currents-hud,
.map-avg-current {
  background: var(--s-panel) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--t-1) !important;
  --text: var(--t-1);
  --text-bright: var(--t-1);
  --text-muted: var(--t-3);
  --pp-fill: var(--s-panel);
  --pp-border: var(--s-line-strong);
  --pp-ink: var(--t-1);
  --pp-muted: var(--t-3);
  --pp-primary: var(--a);
  --pp-primary-ink: var(--a-ink);
  --pp-control: var(--s-raised);
  --pp-radius: var(--r-3);
  --pp-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* the panel header is a hairline rule with a short accent tick: the one
   signature detail of this layer */
.float-panel .panel-title,
.float-panel--premium .panel-title,
.panel-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--t-1) !important;
  padding-bottom: 8px;
  position: relative;
}

.panel-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--s-line);
}

.panel-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 1px;
  background: var(--a);
  z-index: 1;
}

.panel-body {
  color: var(--t-2) !important;
  --text: var(--t-1);
  --text-muted: var(--t-3);
  padding: 0 !important;
}

.float-panel {
  padding: 0 !important;
}

.float-panel > .panel-header {
  padding: 10px 14px 8px !important;
}

.float-panel > .panel-body {
  padding: 0 14px 1px !important;
}

/* collapse / close: icon targets, not pills */
:is(.float-panel-collapse-btn, .float-panel-close-btn, .navarea-detail-close) {
  border-radius: var(--r-1) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--t-3) !important;
}

:is(.float-panel-collapse-btn, .float-panel-close-btn):hover {
  color: var(--t-1) !important;
  background: var(--s-raised) !important;
}

/* rows inside panels: one height, one gap */
.float-panel :is(.map-settings-row, .layer-entry, .pp-row, .pp-field) {
  min-height: 36px;
  gap: 8px;
}

/* ── 5. Controls ───────────────────────────────────────────────────── */

:is(button, .btn, [role="button"], .route-action-btn, .map-panel-launcher-btn,
  .map-hud-btn, .btn-icon, a.action) {
  border-radius: var(--r-2) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease),
    color 140ms var(--ease);
}

/* map launchers keep their own geometry; only the surface is replaced */
:is(.map-panel-launcher-btn, .map-hud-btn, .btn-icon) {
  background: var(--s-panel) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  color: var(--t-1) !important;
}

:is(.map-panel-launcher-btn, .map-hud-btn, .btn-icon):hover {
  background: var(--s-raised) !important;
  border-color: var(--s-line-strong) !important;
}

:is(.map-panel-launcher-btn--active, .map-fab-guide-btn--active,
  .btn-icon-grib--active) {
  background: var(--a-soft) !important;
  border-color: var(--a-line) !important;
  color: var(--t-1) !important;
  box-shadow: none !important;
}

/* generic .btn used by modals and legacy panels */
.btn {
  background: var(--s-raised) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  color: var(--t-1) !important;
}

.btn:hover {
  background: var(--s-raised) !important;
  border-color: var(--a-line) !important;
}

.btn-primary {
  background: var(--a) !important;
  border-color: var(--a) !important;
  color: var(--a-ink) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: var(--a) !important;
  filter: brightness(1.06);
}

.btn-danger {
  background: transparent !important;
  border-color: rgba(229, 100, 106, 0.4) !important;
  color: var(--danger) !important;
}

[data-theme="light"] .btn-danger {
  color: var(--danger-light) !important;
  border-color: rgba(179, 38, 30, 0.35) !important;
}

/* S255 (M004.5): the drawing toolbar was a see-through strip — an unpainted bar and
   transparent buttons over a live chart, so labels, chart symbols and buttons mixed
   into one texture. The strip now has a solid surface of its own and the buttons sit
   on the sunken step of it; the active tool is still the quiet accent fill below. */
.route-action-bar {
  gap: 4px !important;
  padding: 4px !important;
  background: var(--s-raised) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-2) !important;
}

.route-action-btn {
  background: var(--s-sunken) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  color: var(--t-1) !important;
}

.route-action-btn:hover {
  background: var(--s-raised) !important;
  color: var(--t-1) !important;
}

.route-action-btn--active,
.route-action-btn--save {
  /* S255 (M004.5): a 14 % accent wash over the live chart read as transparency; the
     selected/save state now sits on an opaque accent tint of the same strength. */
  background: color-mix(in srgb, var(--a) 16%, var(--s-sunken)) !important;
  border-color: var(--a-line) !important;
  color: var(--t-1) !important;
}

/* S253 (M004.3): the active compass mode had no highlight left. This layer resets the
   circle's border and shadow with !important, which erased the ring that nav-calc.css
   drew for the selected mode, so "active" was only a coloured word inside an identical
   circle. The selected circle now carries a calm accent hairline and a tint — the same
   physical size, no bloom, and no change of scale between states. */
.tools-page .mode-toggle--auto .mode-toggle-circle--auto,
.tools-page .mode-toggle--manual .mode-toggle-circle--manual,
.tools-page .mode-toggle--sched .mode-toggle-circle--sched {
  border-color: var(--a) !important;
  background-color: color-mix(in srgb, var(--a) 14%, var(--s-raised)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 16%, transparent) !important;
}

.tools-page .mode-toggle-circle .mode-toggle-text {
  white-space: nowrap;
}

/* map launchers carried a backdrop blur of their own */
:is(.map-panel-launcher-btn, .map-hud-btn, .map-layers-standalone-btn,
  .navarea-detail-panel, .busy-overlay-card, .cabinet-notif-envelope-btn) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Leaflet chrome is part of the interface too: same type, same hairline */
.leaflet-container {
  font-family: var(--font) !important;
  font-size: 12px !important;
  background: var(--s-page) !important;
}

.leaflet-bar,
.leaflet-control {
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-1) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.leaflet-bar a,
.leaflet-control-zoom a,
.leaflet-control-layers-toggle {
  background: var(--s-panel) !important;
  color: var(--t-1) !important;
  border-color: var(--s-line) !important;
  border-radius: 0 !important;
}

.leaflet-bar a:hover,
.leaflet-control-zoom a:hover {
  background: var(--s-raised) !important;
}

.leaflet-control-attribution {
  background: var(--s-panel) !important;
  color: var(--t-3) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
}

.leaflet-control-attribution a { color: var(--t-2) !important; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--s-panel) !important;
  color: var(--t-1) !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-2) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

/* form controls */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea) {
  background: var(--s-sunken) !important;
  background-image: none !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-1) !important;
  color: var(--t-1) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

:is(input, select, textarea):focus-visible {
  outline: 2px solid var(--a-line) !important;
  outline-offset: 1px;
  border-color: var(--a-line) !important;
}

input[type="checkbox"] {
  accent-color: var(--a);
  border-radius: 4px;
}

input[type="checkbox"]:checked {
  background: var(--a) !important;
  background-image: none !important;
  border-color: var(--a) !important;
  color: var(--a-ink) !important;
}

/* selection, not decoration */
::selection {
  background: var(--a-soft);
  color: var(--t-1);
}

/* chips and badges: a tag, not a pill */
:is([class*="chip"], [class*="badge"], [class*="tag"], [class*="pill"]) {
  border-radius: var(--r-1) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

/* ── 6. Modals and dialogs ─────────────────────────────────────────── */

:is(.modal, .modal__panel, .intersect-modal, .intersect-modal-body,
  dialog, .eta-dialog, .route-current-dialog, .busy-overlay-card) {
  background: var(--s-panel) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-3) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--t-1) !important;
}

.modal-header,
.grib-modal-footer,
.intersect-modal-footer,
.navarea-detail-toolbar,
.panel-header {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--s-line) !important;
}

dialog::backdrop {
  background: rgba(4, 6, 10, 0.62) !important;
  backdrop-filter: none !important;
}

/* ── 7. Tables and figures ─────────────────────────────────────────── */

:is(table) {
  border-collapse: collapse;
}

:is(th) {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--t-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--s-line-strong) !important;
}

:is(td) {
  border-bottom: 1px solid var(--s-line) !important;
  color: var(--t-2);
}

:is(td, th) :is([class*="num"], [class*="value"], .mono) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--t-1);
}

/* ── 8. Page shells ───────────────────────────────────────────────── */

body {
  background-color: var(--s-page);
  background-image: none !important;
  color: var(--t-2);
}

/* Fuel Calc paints its sea and sky on the body's pseudo-elements. They stay in
   place (the swipe geometry and the card scroll depend on them); only the
   gradients and the drift go. */
body::before,
body::after {
  background-image: none !important;
}

.tools-page,
.cabinet-page,
.impa-page,
.fuel-page {
  background: var(--s-page) !important;
  background-image: none !important;
  color: var(--t-2) !important;
}

/* decorative loops out, one easing kept */
:is([class*="pulse"], [class*="glow"], [class*="shimmer"], [class*="breathe"],
  [class*="float-anim"]) {
  animation: none !important;
}

/* ── 9. Light-mode page scope (Fuel Calc is a paper document) ─────── */

body.fuel-page {
  --s-page: var(--paper-0);
  --s-panel: var(--paper-1);
  --s-raised: var(--paper-2);
  --s-sunken: var(--paper-3);
  --s-line: rgba(17, 24, 39, 0.1);
  --s-line-strong: rgba(17, 24, 39, 0.16);
  --t-1: #111827;
  --t-2: #4b5565;
  --t-3: #61697b;
  --a: var(--accent-light);
  --a-ink: #ffffff;
  --a-soft: var(--accent-light-soft);
  --a-line: rgba(10, 112, 124, 0.42);
  --bg: var(--paper-0);
  --bg-2: var(--paper-2);
  --bg-accent: transparent;
  --surface: var(--paper-1);
  --surface-strong: var(--paper-1);
  --surface-muted: var(--paper-2);
  --surface-tint: var(--paper-2);
  --text: var(--t-1);
  --text-soft: var(--t-2);
  --text-faint: var(--t-3);
  --line: var(--s-line);
  --accent: var(--accent-light);
  --accent-strong: #0a6b76;
  --accent-soft: var(--accent-light-soft);
  --good: var(--ok-light);
  --bad: var(--danger-light);
  --warn: var(--warn-light);
  --chip: var(--paper-1);
  --chip-line: var(--s-line);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-inset: inset 0 0 0 transparent;
  --focus: var(--accent-light-soft);
  --modal-bg: rgba(17, 24, 39, 0.4);
  --report-bg: var(--paper-1);
  --name-bg: var(--paper-2);
  color-scheme: light;
}

html[data-theme="dark"] body.fuel-page {
  --s-page: var(--ink-950);
  --s-panel: var(--ink-850);
  --s-raised: var(--ink-750);
  --s-sunken: var(--ink-900);
  --s-line: rgba(238, 240, 245, 0.08);
  --s-line-strong: rgba(238, 240, 245, 0.14);
  --t-1: #eef0f5;
  --t-2: #a3a9b8;
  --t-3: #838b9e;
  --a: var(--accent);
  --a-ink: var(--accent-ink);
  --a-soft: var(--accent-soft);
  --a-line: var(--accent-line);
  --bg: var(--ink-950);
  --bg-2: var(--ink-900);
  --surface: var(--ink-850);
  --surface-strong: var(--ink-800);
  --surface-muted: var(--ink-750);
  --surface-tint: var(--ink-750);
  --text: var(--t-1);
  --text-soft: var(--t-2);
  --text-faint: var(--t-3);
  --line: var(--s-line);
  --accent: var(--accent);
  --accent-strong: #7fdcea;
  --accent-soft: var(--accent-soft);
  --good: var(--ok);
  --bad: var(--danger);
  --warn: var(--warn);
  --chip: var(--ink-800);
  --chip-line: var(--s-line);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --modal-bg: rgba(0, 0, 0, 0.62);
  --report-bg: var(--ink-850);
  --name-bg: var(--ink-750);
  color-scheme: dark;
}

/* ── 10. Fuel Calc specifics ──────────────────────────────────────── */

.fuel-page .title {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  animation: none !important;
}

.fuel-page :is(.card, .panel, .section, .box) {
  background: var(--s-panel) !important;
  background-image: none !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-3) !important;
  box-shadow: none !important;
}

/* ── 11. Nav Calc specifics ───────────────────────────────────────── */

.tools-page .app-header {
  background: var(--s-page) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--s-line) !important;
  box-shadow: none !important;
}

.tools-page .app-logo-icon {
  background: var(--a) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--a-ink) !important;
}

.tools-page :is(.card, .panel, .module, .result-card) {
  background: var(--s-panel) !important;
  background-image: none !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-3) !important;
  box-shadow: none !important;
}

.tools-page :is(.theme-switch, .theme-switch-track, .theme-switch-knob) {
  background: var(--s-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ── 12. IMPA specifics ───────────────────────────────────────────── */

.impa-page {
  --panel: var(--s-panel);
  --panel-strong: var(--s-panel);
  --text: var(--t-1);
  --muted: var(--t-3);
  --line: var(--s-line);
  --line-soft: var(--s-line);
  --accent: var(--a);
  --accent-dim: var(--a-soft);
  --accent-glow: none;
  --primary: var(--a);
  --primary-soft: var(--a-soft);
  --blue-cta-bg: var(--s-raised);
  --blue-cta-bg-hover: var(--s-raised);
  --blue-cta-border: var(--s-line-strong);
  --blue-cta-border-hover: var(--a-line);
  --blue-cta-text: var(--t-1);
  --blue-cta-shadow: none;
  --blue-cta-shadow-hover: none;
  --blue-cta-shadow-active: none;
  --glass-shadow: none;
  --soft-shadow: none;
}

.impa-page :is(button, a.action) {
  background: var(--s-raised) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-2) !important;
  color: var(--t-1) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.impa-page :is(button, a.action):hover {
  border-color: var(--a-line) !important;
}

.impa-page #search-button {
  background: var(--a) !important;
  border-color: var(--a) !important;
  color: var(--a-ink) !important;
}

.impa-page :is(.cart-toggle, .expanded-image-summary) {
  background: var(--s-panel) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  box-shadow: none !important;
}

/* ── 13. Motion ───────────────────────────────────────────────────── */

*
{
  scroll-behavior: auto;
}

:is(.float-panel, .modal, dialog, .map-panel-launcher-btn, .btn, button) {
  transition-timing-function: var(--ease) !important;
}

/* ── 14. Pass 2 — measured leftovers ──────────────────────────────── */

/* focused fields: a ring, not a glow */
:is(input, select, textarea):focus,
:is(input, select, textarea):focus-visible {
  box-shadow: none !important;
}

/* small labels never go under 11px, and never shout */
:is(.grib-field-icon, .grib-map-timeline-field, .grib-map-timeline-date,
  .grib-panel-timeline-value, .grib-displayed-time, .grib-source,
  .grib-panel-legend-title, .grib-ship-tz, .grib-step-select,
  .p2p-settings-badge, .p2p-stat-label, .rc-intersect-count,
  .ais-size-filter-value, .uc-dd-value, .grib-panel-layer) {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Fuel Calc — the surfaces and the small type of the voyage sheet */
.fuel-page :is(.block, .dockCard, .infoStrong, .btnAccent, .bunkerToggle,
  .seaScrollTrack, .seaScrollWaves, .seaScrollThumb) {
  background-image: none !important;
  box-shadow: none !important;
}

.fuel-page .block {
  background-color: var(--s-panel) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-3) !important;
}

.fuel-page .block.primary {
  background-color: var(--s-panel) !important;
  border-color: var(--a-line) !important;
}

.fuel-page :is(.dockCard, .infoStrong, .bunkerToggle) {
  background-color: var(--s-raised) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.fuel-page :is(.btnAccent, .portActionBtn) {
  background-color: var(--s-raised) !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--t-1) !important;
}

.fuel-page .btnAccent {
  background-color: var(--s-raised) !important;
  border-color: var(--a-line) !important;
}

.fuel-page :is(.seaScrollTrack, .seaScrollThumb) {
  background-color: var(--s-raised) !important;
}

.fuel-page :is(.vs-label, .vs-fuel-name, .cardActionLabel,
  .cardCaption, .journeyStageCount, .tag, .vs-fuel-amount, .vs-fuel-sep) {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* S260 (M002.3): the port actions are the one place on this page where the label must read at
   a glance — "сделай текст больше в этих кнопках - плохо читается". They keep their own size
   (12 px, bold) instead of being normalised to the 11 px label token. */
.fuel-page .portActionText {
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

.fuel-page :is(.vs-value, .vs-fuel-row) {
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}

.fuel-page :is(label, .h, legend) {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Nav Calc — journal table and mode switch */
.tools-page :is(.mode-card, .panel-main, .table-card, .journal-paper-surface,
  .sky-map-section, .btn-neon, .mode-toggle-circle, .btn-icon-neon) {
  background-image: none !important;
  box-shadow: none !important;
}

.tools-page :is(.mode-card, .panel-main, .table-card) {
  background-color: var(--s-panel) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-3) !important;
}

.tools-page .journal-paper-surface {
  background-color: var(--s-sunken) !important;
  border-radius: var(--r-2) !important;
}

.tools-page .btn-neon {
  background-color: var(--s-raised) !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-2) !important;
  color: var(--t-1) !important;
  font-weight: 500 !important;
}

.tools-page .btn-neon--calc {
  background-color: var(--a) !important;
  border-color: var(--a) !important;
  color: var(--a-ink) !important;
}

.tools-page .mode-toggle-circle {
  background-color: var(--s-raised) !important;
  border: 1px solid var(--s-line) !important;
}

.tools-page :is(th.journal-th-leaf, th.journal-th-group) {
  background-color: var(--s-raised) !important;
  background-image: none !important;
  border-color: var(--s-line) !important;
}

.tools-page :is(.mode-toggle-text, .field-label, .journal-pod-value,
  .journal-hand, .journal-td-object, .journal-object-cell, .journal-pod-object-row,
  .journal-td-repeater, .sky-map-status, .table-card td) {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.tools-page :is(.mode-toggle-text--active) {
  color: var(--a) !important;
  font-weight: 500 !important;
}

/* IMPA — catalogue cards */
.impa-page :is(.card, .empty-state, .search-shell, .cart-modal-actions-wrap) {
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.impa-page :is(.card, .search-shell, .empty-state) {
  background-color: var(--s-panel) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-3) !important;
}

.impa-page :is(.search-mark, .support-envelope) {
  font-weight: 500 !important;
}

/* ── 15. Pass 3 — the last measured offenders ─────────────────────── */

/* one type family everywhere; the mono keeps figures and code */
body,
body * {
  font-family: var(--font) !important;
}

:is(code, kbd, samp, pre, .mono, [class*="mono"], [class*="readout"],
  [class*="value"], [class*="figure"]) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}


/* Fuel Calc leftovers */
.fuel-page :is(.portActionBtn, .floatBtn, .settingsBtn) {
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.fuel-page :is(.infoDays, .infoCons, .infoConsValue, .infoValue) {
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}

/* no cyan glow on any field, focused or not */
input,
select,
textarea {
  box-shadow: none !important;
}

/* ── 16. Icons, logo, Port2Port ───────────────────────────────────── */

html {
  font-family: var(--font) !important;
}

/* one icon set: 16px, 1.5 stroke, currentColor, same gap to the label */
.ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-right: 6px;
  vertical-align: -3px;
  stroke-width: 1.5;
  overflow: visible;
}

.ui-icon:only-child {
  margin-right: 0;
}

/* the wordmark sits on the page: white on ink, ink on paper */
html[data-theme="light"] .floten-logo,
body.fuel-page .floten-logo {
  filter: invert(1) !important;
}

html[data-theme="dark"] body.fuel-page .floten-logo {
  filter: none !important;
}

label {
  font-weight: 400 !important;
}

/* Port2Port */
.tools-page .btn-p2p {
  background: var(--s-raised) !important;
  background-image: none !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-2) !important;
  color: var(--t-1) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.tools-page .btn-p2p:hover {
  border-color: var(--a-line) !important;
}

.tools-page .btn-p2p--primary {
  background: var(--a) !important;
  border-color: var(--a) !important;
  color: var(--a-ink) !important;
}

.tools-page :is(.p2p-info-value, .p2p-stat-value) {
  font-weight: 500 !important;
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

.tools-page small {
  font-weight: 400 !important;
}

.tools-page .p2p-swap {
  background: transparent !important;
  border: 1px solid var(--s-line-strong) !important;
  border-radius: var(--r-1) !important;
  color: var(--t-2) !important;
  box-shadow: none !important;
}

.tools-page .p2p-swap:hover {
  color: var(--t-1) !important;
  border-color: var(--a-line) !important;
}

/* ── 17. State, not decoration ─────────────────────────────────────── */

/* A selected tool gets a ring, not a bloom. */
/* .btn-primary also declares `box-shadow: none !important`, so the selected
   state has to out-specify it, not just come later. */
.btn-primary.route-mode-on,
.float-panel .btn.route-mode-on,
.btn.route-mode-on,
[aria-pressed="true"].route-action-btn,
.btn.is-active {
  box-shadow: 0 0 0 2px rgba(46, 200, 216, 0.55) !important;
}

[data-theme="light"] .btn-primary.route-mode-on,
[data-theme="light"] .btn.route-mode-on,
body.fuel-page .btn.route-mode-on {
  box-shadow: 0 0 0 2px rgba(10, 112, 124, 0.45) !important;
}

/* One action in a row may carry the emphasis weight; nothing else does. */
.aisg-dock [data-route-action="download-segment"],
.aisg-dock [data-route-action="download"] {
  font-weight: 600 !important;
}

/* Port2Port: the distance is the hero number of the sheet */
.p2p-stat-value {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Fuel summary: six figures on one phone row, so this block stays compact and
   keeps the proportional face — a mono there wraps every fuel pair to two lines */
.fuel-page .vs-label {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
}

.fuel-page .vs-fuel-row,
.fuel-page .vs-fuel-name,
.fuel-page .vs-fuel-amount,
.fuel-page .vs-fuel-sep {
  font-family: var(--font) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.fuel-page .vs-value {
  font-family: var(--font) !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums;
}

/* the area-selection hint keeps its accent edge: a 3px left rule, no glow */
.grib-selection-hint {
  border-left: 3px solid var(--a) !important;
}

/* a ticked NAVAREA row steps one weight up — enough to mark it, short of shouting */
#tgxUcNavareaZonesList .uc-dd-item:has(input:checked) {
  font-weight: 600 !important;
}

/* the ETA dialog still asks for the legacy accent names; point them at the one accent */
.eta-dialog {
  --accent: var(--a) !important;
  --accent-light: var(--a) !important;
  --accent-strong: var(--a-press) !important;
  --accent-dark: var(--a-press) !important;
}

/* On a phone the panels are sheets: they must sit above the map launchers, or the
   launcher swallows taps meant for a panel control that happens to land under it. */
@media (max-width: 600px) {
  .float-panel { z-index: 520 !important; }
  .map-panel-launcher-btn,
  .map-layers-standalone-btn,
  .map-hud-btn { z-index: 500 !important; }
}

/* The narrow-phone media query shrinks the account opener to 30px. Keep the circle
   small but give the control a full 44px target, and pay for it out of its margin. */
@media (max-width: 767px) {
  .map-header-account {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 2px !important;
    margin-left: 6px !important;
  }
  .map-header-account svg { width: 22px !important; height: 22px !important; }
}

/* ── 12. Light-theme readability (S248) ───────────────────────────────
   Rules written for the dark map screens that never learned about the
   paper theme. Each selector below was found by a measured contrast
   inventory (test/s248-light-theme-contrast.browser.test.js) and lifts
   the text to at least 4.5:1 against its real composited background. */

/* panel blocks carried a 55 % night scrim, which over paper turns them
   grey and drags every label inside down with it */
[data-theme="light"] .float-panel .panel-block {
  background: var(--paper-2);
  border-color: var(--s-line-strong);
}

[data-theme="light"] .navarea-detail-label {
  color: var(--t-2);
  text-shadow: none;
}

[data-theme="light"] .navarea-zones-hint { color: var(--t-2); }

[data-theme="light"] .empty-title { color: var(--t-1); }

[data-theme="light"] #photo-filename,
[data-theme="light"] #search-status { color: var(--t-3); }

[data-theme="light"] .support-chat-thread {
  background: var(--paper-2);
  border-color: var(--s-line-strong);
}