/* ===================================================================
   Dana SIS - MARITIME theme
   Dark (default) = ship's bridge at night: deep ocean navy + teal.
   Light via [data-theme="light"] = daylight chart-table.
   Drop shadows are used on every raised surface, buttons included.
   =================================================================== */

/* Inter (variabel, latin) - SELV-HOSTET saa den virker offline ombord. Én fil,
   alle vaegte (100-900). Runtime-cachen i sw.js gemmer den automatisk. Giver det
   moderne grotesk-look fra fintech-referencerne (Christian 18/8). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter.woff2") format("woff2");
}
/* Teko (condenseret, latin) - SELV-HOSTET saa den virker offline. Bruges KUN af
   Aqua Futuristic (demo) til HUD-timerne. En enkelt vaegt (600). */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("fonts/teko.woff2") format("woff2");
}
/* ---- WARM DARK (default) ----
   Warm near-black with a clay accent instead of navy and teal. The maritime
   palette is still here under [data-theme="maritime"] - it is one attribute
   away, and nothing in the stylesheet hard-codes a colour, so both stay
   correct as the app grows. */
:root[data-theme="warm"] {
  --app-bg: #1c1b19;
  --app-bg-2: #221f1d;
  --surface: #262624;         /* cards / panels */
  --surface-2: #2d2c29;       /* raised panels */
  --surface-3: #3a3835;       /* controls / buttons */
  --line: #4a4741;            /* visible edge */
  --line-soft: #35332f;
  --bar: #1f1e1c;             /* topbar / banner */
  --bar-2: #262523;
  --input-bg: #191817;
  --code-bg: #151413;

  --accent: #d97757;          /* clay */
  --accent-rgb: 217,119,87;   /* samme farve som tal - til rgba() */
  --accent-2: #c2603f;
  --ok: #5fa87a;
  --ok-rgb: 95,168,122;
  --warn: #d9a441;
  --warn-rgb: 217,164,65;
  /* Stationstyper. Otte toner der kan skelnes fra hinanden ogsaa naar to
     staar lige under hinanden i en tabel. */
  --tc0: #e0a06a;  --tc1: #7fb8e8;  --tc2: #8fd1a0;  --tc3: #d99ac4;
  --tc4: #e3cc72;  --tc5: #9db4f0;  --tc6: #7fd3c9;  --tc7: #dda0a0;
  --danger: #d96b5a;
  /* Som tal, saa luk-knapperne kan bruge rgba(...) og alligevel foelge temaet. */
  --danger-rgb: 217, 107, 90;
  --danger-soft: #3a221c;
  --ok-soft: #22301f;
  --wait-soft: #332a15;

  --ink: #f0eee6;
  --ink-soft: #a8a49b;
  --on-bar: #f0eee6;
  --on-bar-soft: #a8a49b;

  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 3px 6px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --sh-3: 0 8px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
  --sh-4: 0 18px 45px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  --glow: 0 0 0 1px rgba(217,119,87,.16);
}

:root[data-theme="maritime"] {
  /* ---- maritime dark ---- */
  --app-bg: #050d14;          /* deep sea */
  --app-bg-2: #081420;        /* gradient partner */
  --surface: #0e1f2d;         /* cards / panels */
  --surface-2: #143040;       /* raised panels */
  --surface-3: #1b3d50;       /* controls / buttons */
  /* Stregerne var for svage til at ses paa en broskaerm.
     MAALT i browseren mod kortfladen (--surface), ikke gaettet. Hele stigen:
         #24506a  2,0:1   <- den gamle. Knap synlig.
         #33698c  2,8:1
         #35709a  3,1:1   <- valgt
         #3775a0  3,4:1
         #3f86b0  4,2:1   ser ud som en RAMME om alting
     3:1 er graensen for at en ikke-tekst-kant laeses som bevidst tegnet.
     --line-soft arver den gamle vaerdi: stadig diskret, men nu til stede. */
  --line: #35709a;            /* visible edge - maalt 3,1:1 mod kortet */
  --line-soft: #24506a;       /* diskret - maalt 1,9:1 */
  --bar: #0a2233;             /* topbar / banner */
  --bar-2: #0d2c42;
  --input-bg: #061019;
  --code-bg: #040d14;

  --accent: #4fd1c5;          /* teal - primary accent */
  --accent-rgb: 79,209,197;
  --accent-2: #2bb3a6;
  --ok: #3ddc97;
  --ok-rgb: 61,220,151;
  --warn: #f0b429;
  --warn-rgb: 240,180,41;
  --tc0: #f0b429;  --tc1: #8ab4f8;  --tc2: #3ddc97;  --tc3: #c792ea;
  --tc4: #ff9e64;  --tc5: #7fd3ff;  --tc6: #4fd1c5;  --tc7: #ef9a9a;
  --danger: #ef6b5e;
  --danger-rgb: 239, 107, 94;
  --danger-soft: #3a1c18;
  --ok-soft: #0e2f2a;
  --wait-soft: #33280c;

  --ink: #e4f0f6;
  --ink-soft: #8fabbd;
  --on-bar: #eaf6fb;
  --on-bar-soft: #8fb4c9;

  /* elevation scale - used everywhere, incl. buttons */
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}

/* ---- maritime MEN med varm orange accent (Christian elsker orange) ----
   Deep-sea-grunden er uroert; kun accenten (knapper/aktiv/glow) + en anelse
   varmere bar-tekst er byttet. Danger goeres lidt roedere saa den ikke smelter
   sammen med den orange accent. Orange paa navy = havnelys paa moerkt vand. */
:root[data-theme="maritimeorange"] {
  --app-bg: #050d14;          --app-bg-2: #081420;
  --surface: #0e1f2d;         --surface-2: #143040;   --surface-3: #1b3d50;
  --line: #35709a;            --line-soft: #24506a;
  --bar: #0a2233;             --bar-2: #0d2c42;
  --input-bg: #061019;        --code-bg: #040d14;
  --accent: #ff8c42;          --accent-rgb: 255,140,66;    --accent-2: #e5732a;
  --ok: #3ddc97;              --ok-rgb: 61,220,151;
  --warn: #f0b429;            --warn-rgb: 240,180,41;
  --tc0: #f0b429;  --tc1: #8ab4f8;  --tc2: #3ddc97;  --tc3: #c792ea;
  --tc4: #ff9e64;  --tc5: #7fd3ff;  --tc6: #4fd1c5;  --tc7: #ef9a9a;
  --danger: #f24b46;          --danger-rgb: 242,75,70;     --danger-soft: #3a1c18;
  --ok-soft: #0e2f2a;         --wait-soft: #33280c;
  --grp: #c792ea;             --grp-rgb: 199,146,234;
  --ink: #e4f0f6;             --ink-soft: #8fabbd;
  --on-bar: #f6ede4;          --on-bar-soft: #bfa694;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}

/* ---- NEON (TEST, 27/8 Christian: "neon-tema uden glow-effekter, kun farverne")
   Neon-FARVER (electric cyan/magenta/lime/amber) paa naesten-sort grund. Bevidst
   INGEN blur-gloed: skygge-stigen er de samme flade moerke skygger som alle andre
   temaer, saa det er kun paletten der er neon - ikke lyseffekter. --glow er den
   normale 1px-ring (ikke en blur), praecis som resten. Kun i demo (se app.js). */
:root[data-theme="neon"] {
  --app-bg: #07070f;          --app-bg-2: #0b0b18;
  --surface: #12121f;         --surface-2: #1a1a2e;   --surface-3: #26263f;
  --line: #37375f;            --line-soft: #24243f;
  --bar: #0a0a16;             --bar-2: #0e0e1e;
  --input-bg: #0c0c18;        --code-bg: #08080f;
  --accent: #22e0ff;          --accent-rgb: 34,224,255;    --accent-2: #12b4d6;
  --ok: #2fe86a;              --ok-rgb: 47,232,106;
  --warn: #ffcf1a;            --warn-rgb: 255,207,26;
  --tc0: #ffcf1a;  --tc1: #22e0ff;  --tc2: #2fe86a;  --tc3: #c04dff;
  --tc4: #ff7a3c;  --tc5: #4d9bff;  --tc6: #1de9b6;  --tc7: #ff5e8a;
  --danger: #ff2e63;          --danger-rgb: 255,46,99;     --danger-soft: #2c0f1c;
  --ok-soft: #0c2a1a;         --wait-soft: #2c2708;
  --grp: #c04dff;             --grp-rgb: 192,77,255;
  --ink: #eaf2ff;             --ink-soft: #93a0c4;
  --on-bar: #eaf2ff;          --on-bar-soft: #8f9cc0;
  --sh-1: 0 1px 2px rgba(0,0,0,.55);
  --sh-2: 0 3px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.40);
  --sh-3: 0 8px 20px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.40);
  --sh-4: 0 18px 45px rgba(0,0,0,.68), 0 4px 12px rgba(0,0,0,.45);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}

/* ============================================================================
   POPULAERE COMMUNITY-TEMAER (25/8, Christian) - Tokyo Night, Catppuccin Mocha,
   Gruvbox og et natsyns-roedt "bro om natten"-tema. Samme variabelsaet som
   maritime, saa intet falder tilbage. Flade (ingen glas/transparens).
   ============================================================================ */
:root[data-theme="tokyonight"] {
  --app-bg: #1a1b26;          --app-bg-2: #1e2030;
  --surface: #222436;         --surface-2: #2a2e42;   --surface-3: #343a52;
  --line: #3b4261;            --line-soft: #2a2e42;
  --bar: #16161e;             --bar-2: #1a1b26;
  --input-bg: #16161e;        --code-bg: #131320;
  --accent: #7aa2f7;          --accent-rgb: 122,162,247;   --accent-2: #5f86e0;
  --ok: #9ece6a;              --ok-rgb: 158,206,106;
  --warn: #e0af68;            --warn-rgb: 224,175,104;
  --tc0: #e0af68;  --tc1: #7aa2f7;  --tc2: #9ece6a;  --tc3: #bb9af7;
  --tc4: #ff9e64;  --tc5: #7dcfff;  --tc6: #2ac3de;  --tc7: #f7768e;
  --danger: #f7768e;          --danger-rgb: 247,118,142;   --danger-soft: #37232f;
  --ok-soft: #202b1c;         --wait-soft: #322a1a;
  --grp: #bb9af7;             --grp-rgb: 187,154,247;
  --ink: #c0caf5;             --ink-soft: #828cb6;
  --on-bar: #c8d0f0;          --on-bar-soft: #7c85aa;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}
/* ROYAL GOLD - dyb royal-blaa grund + varm guld-accent (Christian 27/8). */
:root[data-theme="royalgold"] {
  --app-bg: #0d1b3a;          --app-bg-2: #102247;
  --surface: #15274e;         --surface-2: #1c3162;   --surface-3: #24407b;
  --line: #35548c;            --line-soft: #203a72;
  --bar: #0a1531;             --bar-2: #0d1b3a;
  --input-bg: #0c1a3a;        --code-bg: #081228;
  --accent: #e8c15a;          --accent-rgb: 232,193,90;    --accent-2: #caa23e;
  --ok: #5fd39a;              --ok-rgb: 95,211,154;
  --warn: #e6b566;            --warn-rgb: 230,181,102;
  --tc0: #e8c15a;  --tc1: #7aa2f7;  --tc2: #6fd39a;  --tc3: #c3a2f0;
  --tc4: #f0a267;  --tc5: #6fcfe6;  --tc6: #4fc2c2;  --tc7: #ef7b93;
  --danger: #ef6b5e;          --danger-rgb: 239,107,94;    --danger-soft: #3a1f1c;
  --ok-soft: #123027;         --wait-soft: #33291a;
  --grp: #8fb3e8;             --grp-rgb: 143,179,232;
  --ink: #e4ebf7;             --ink-soft: #97a7c9;
  --on-bar: #ecf1fb;          --on-bar-soft: #9db0d2;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}
/* ROYAL SILVER - samme royal-blaa grund + koelig soelv/platin-accent. */
:root[data-theme="royalsilver"] {
  --app-bg: #0d1b3a;          --app-bg-2: #102247;
  --surface: #15274e;         --surface-2: #1c3162;   --surface-3: #24407b;
  --line: #35548c;            --line-soft: #203a72;
  --bar: #0a1531;             --bar-2: #0d1b3a;
  --input-bg: #0c1a3a;        --code-bg: #081228;
  --accent: #c8d2e0;          --accent-rgb: 200,210,224;   --accent-2: #a6b3c8;
  --ok: #5fd39a;              --ok-rgb: 95,211,154;
  --warn: #e6b566;            --warn-rgb: 230,181,102;
  --tc0: #d7c98a;  --tc1: #8fb3f0;  --tc2: #6fd39a;  --tc3: #c3a2f0;
  --tc4: #f0a267;  --tc5: #6fcfe6;  --tc6: #4fc2c2;  --tc7: #ef7b93;
  --danger: #ef6b5e;          --danger-rgb: 239,107,94;    --danger-soft: #3a1f1c;
  --ok-soft: #123027;         --wait-soft: #33291a;
  --grp: #b7c3d8;             --grp-rgb: 183,195,216;
  --ink: #e8eef8;             --ink-soft: #9aabcc;
  --on-bar: #eef2fb;          --on-bar-soft: #a2b3d4;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}
:root[data-theme="mocha"] {
  --app-bg: #1e1e2e;          --app-bg-2: #232338;
  --surface: #292c3c;         --surface-2: #313244;   --surface-3: #45475a;
  --line: #585b70;            --line-soft: #363a4e;
  --bar: #181825;             --bar-2: #1e1e2e;
  --input-bg: #181825;        --code-bg: #11111b;
  --accent: #cba6f7;          --accent-rgb: 203,166,247;   --accent-2: #a98adb;
  --ok: #a6e3a1;              --ok-rgb: 166,227,161;
  --warn: #f9e2af;            --warn-rgb: 249,226,175;
  --tc0: #f9e2af;  --tc1: #89b4fa;  --tc2: #a6e3a1;  --tc3: #cba6f7;
  --tc4: #fab387;  --tc5: #89dceb;  --tc6: #94e2d5;  --tc7: #f38ba8;
  --danger: #f38ba8;          --danger-rgb: 243,139,168;   --danger-soft: #382028;
  --ok-soft: #1f2d20;         --wait-soft: #332f1f;
  --grp: #cba6f7;             --grp-rgb: 203,166,247;
  --ink: #cdd6f4;             --ink-soft: #a6adc8;
  --on-bar: #cdd6f4;          --on-bar-soft: #9399b0;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}
:root[data-theme="gruvbox"] {
  --app-bg: #282828;          --app-bg-2: #2d2a27;
  --surface: #32302f;         --surface-2: #3c3836;   --surface-3: #504945;
  --line: #665c54;            --line-soft: #3c3836;
  --bar: #1d2021;             --bar-2: #282828;
  --input-bg: #1d2021;        --code-bg: #1b1e1e;
  --accent: #fe8019;          --accent-rgb: 254,128,25;    --accent-2: #d65d0e;
  --ok: #b8bb26;              --ok-rgb: 184,187,38;
  --warn: #fabd2f;            --warn-rgb: 250,189,47;
  --tc0: #fabd2f;  --tc1: #83a598;  --tc2: #b8bb26;  --tc3: #d3869b;
  --tc4: #fe8019;  --tc5: #8ec07c;  --tc6: #d8a657;  --tc7: #fb4934;
  --danger: #fb4934;          --danger-rgb: 251,73,52;     --danger-soft: #3a201a;
  --ok-soft: #2a2c16;         --wait-soft: #332a14;
  --grp: #d3869b;             --grp-rgb: 211,134,155;
  --ink: #ebdbb2;             --ink-soft: #a89984;
  --on-bar: #ebdbb2;          --on-bar-soft: #a89984;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}
/* Natsyns-tema: KUN varme roed/rav-toner, ingen blaa/groen/cyan - bevarer
   moerkeadaptationen paa broen om natten (som fly/skibs-instrumenter). */
:root[data-theme="nightvision"] {
  --app-bg: #0a0402;          --app-bg-2: #0e0603;
  --surface: #150806;         --surface-2: #1d0b08;   --surface-3: #27100b;
  --line: #5a231b;            --line-soft: #331512;
  --bar: #0c0503;             --bar-2: #120705;
  --input-bg: #0a0402;        --code-bg: #080302;
  --accent: #ff5a48;          --accent-rgb: 255,90,72;     --accent-2: #d63f30;
  --ok: #e0a15c;              --ok-rgb: 224,161,92;
  --warn: #ff9e3d;            --warn-rgb: 255,158,61;
  --tc0: #f0b429;  --tc1: #ff9e64;  --tc2: #e8a35c;  --tc3: #ff7a8a;
  --tc4: #ff5a48;  --tc5: #ffb84d;  --tc6: #d98c5f;  --tc7: #ff6b5a;
  --danger: #ff3b30;          --danger-rgb: 255,59,48;     --danger-soft: #2a0d09;
  --ok-soft: #241407;         --wait-soft: #2a1608;
  --grp: #ff9e64;             --grp-rgb: 255,158,100;
  --ink: #f2b8a8;             --ink-soft: #b5766a;
  --on-bar: #ffc0b0;          --on-bar-soft: #bf8578;
  --sh-1: 0 1px 2px rgba(0,0,0,.55);
  --sh-2: 0 3px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  --sh-3: 0 8px 20px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --sh-4: 0 18px 45px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.45);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.20);
}
/* AMOLED: ÆGTE sort baggrund (slukkede pixels paa OLED = spar stroem, uendelig
   kontrast). Kortene er naesten-sorte og adskilles af tynde kanter (skygger
   forsvinder paa sort), med Material-klare accenter der popper. */
:root[data-theme="amoled"] {
  --app-bg: #000000;          --app-bg-2: #050506;
  --surface: #131316;         --surface-2: #1b1b1f;   --surface-3: #26262b;
  --line: #52525c;            --line-soft: #2a2a30;
  --bar: #000000;             --bar-2: #060608;
  --input-bg: #000000;        --code-bg: #060606;
  --accent: #4dd0e1;          --accent-rgb: 77,208,225;    --accent-2: #2bb6c9;
  --ok: #81c784;              --ok-rgb: 129,199,132;
  --warn: #ffca6a;            --warn-rgb: 255,202,106;
  --tc0: #ffd24d;  --tc1: #4fc3f7;  --tc2: #81c784;  --tc3: #b39ddb;
  --tc4: #ff9e6b;  --tc5: #4dd0e1;  --tc6: #f48fb1;  --tc7: #e57373;
  --danger: #ef5350;          --danger-rgb: 239,83,80;     --danger-soft: #2a0d0c;
  --ok-soft: #0d1f0e;         --wait-soft: #241d0a;
  --grp: #b39ddb;             --grp-rgb: 179,157,219;
  --ink: #ececee;             --ink-soft: #9a9aa0;
  --on-bar: #f2f2f4;          --on-bar-soft: #9a9aa0;
  --sh-1: 0 1px 2px rgba(0,0,0,.7);
  --sh-2: 0 3px 6px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
  --sh-3: 0 8px 20px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.5);
  --sh-4: 0 18px 45px rgba(0,0,0,.85), 0 4px 12px rgba(0,0,0,.55);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.22);
}

/* ============================================================================
   "NORDIC" (18/8, Christian) - efter e-commerce-mockup: dæmpet skiffer-blaa
   premium. Naer-sort ramme, bloede slate-kort med let lodret gradient, rolig
   himmel-blaa accent, guld stjerner. FLADT - ingen glas, ingen transparens,
   ingen store skygger => ingen hjoerne-ballade (opak som maritime/slate).
   ============================================================================ */
:root[data-theme="nordic"] {
  /* Christian: stoerre kort/grund-kontrast - moerkere grund, lysere kort, synlig kant. */
  --app-bg: #131f2a;          /* lidt moerkere blaa-graa */
  --app-bg-2: #182734;
  --surface: #243b4d;         /* slate kort - tydeligere loeftet fra grunden */
  --surface-2: #2e485c;       /* haevet */
  --surface-3: #395468;       /* kontroller */
  --line: #446076;            /* SYNLIG kant */
  --line-soft: #324b5c;
  --bar: #14212c;             /* topbar - lidt moerkere end grunden */
  --bar-2: #182833;
  --input-bg: #172733;
  --code-bg: #101c26;

  /* SKARPE pastel-accenter: hoej luminans, hoej kontrast, laesbare paa lav
     lysstyrke (nat/dæmpet broskaerm), INGEN glow. Slate-grunden er rolig, TALLENE
     og teksten slaar igennem. Orange er en foerste-klasses datafarve (Christian). */
  --accent: #7fb0ff;          /* skarp pastel-blaa (laes: overskrifter, links, knapper) */
  --accent-rgb: 127,176,255;
  --accent-2: #5a8fe0;
  --ok: #9ee6a0;   --ok-rgb: 158,230,160;    /* skarp pastel-groen */
  --warn: #ffb26b; --warn-rgb: 255,178,107;  /* skarp pastel-orange */
  --tc0: #ffb26b;  --tc1: #7fb0ff;  --tc2: #9ee6a0;  --tc3: #c9a6ff;
  --tc4: #ff9e64;  --tc5: #7fdfff;  --tc6: #8ac6ff;  --tc7: #ff8fa3;
  --danger: #ff8f8a;  --danger-rgb: 255,143,138;
  --danger-soft: #2f1a19;  --ok-soft: #172a20;  --wait-soft: #2c2410;

  --ink: #eef3f7;  --ink-soft: #b3c1cb;       /* lysere secondary-tekst - laesbar */
  --on-bar: #f2f6fa;  --on-bar-soft: #a6b4be;

  /* FLADE, bloede skygger - ingen "float", ingen pooling ved hjoerner. */
  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 2px 6px rgba(0,0,0,.30);
  --sh-3: 0 5px 16px rgba(0,0,0,.32);
  --sh-4: 0 10px 30px rgba(0,0,0,.38);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.14);
}

/* ============================================================================
   "CARBON" (18/8, Christian) - efter fintech-mockups (Miquido/Cuberto/banking):
   naer-sort koel kul-grund, ÉN levende teal/emerald-accent, farverige data, FLADT,
   INGEN glow, rene medium-vaegt tal. Charcoal + teal = moderne fintech-dashboard.
   ============================================================================ */
:root[data-theme="fintech"] {
  /* Christian: kort skal skille sig TYDELIGT fra grunden. Moerkere grund + lysere
     kort + SYNLIG kant = klar adskillelse (som fintech-referencerne). */
  --app-bg: #090b0e;          /* naer-sort kul (moerk grund) */
  --app-bg-2: #0e1216;
  --surface: #1d242c;         /* kort - tydeligt loeftet fra grunden */
  --surface-2: #2a333e;       /* haevet - klart trin op (graa, som Christian kan lide) */
  --surface-3: #333d48;       /* kontroller */
  --line: #4a5560;            /* tydelig kant */
  --line-soft: #3b4652;       /* kort-kant nu KLART synlig (mere markant) */
  --bar: #101418;
  --bar-2: #141a1f;
  --input-bg: #12171b;
  --code-bg: #0b0e11;

  --accent: #2dd4bf;          /* levende teal/emerald - maritimt & professionelt */
  --accent-rgb: 45,212,191;
  --accent-2: #1fae9c;
  --ok: #34d399;   --ok-rgb: 52,211,153;
  --warn: #fbbf5c; --warn-rgb: 251,191,92;
  --tc0: #fbbf5c;  --tc1: #38bdf8;  --tc2: #34d399;  --tc3: #a78bfa;
  --tc4: #fb923c;  --tc5: #22d3ee;  --tc6: #2dd4bf;  --tc7: #fb7185;
  --danger: #fb7185;  --danger-rgb: 251,113,133;
  --danger-soft: #2a1518;  --ok-soft: #0f2a22;  --wait-soft: #2a2410;

  --ink: #f1f5f7;  --ink-soft: #9aa7b0;
  --on-bar: #f4f8fa;  --on-bar-soft: #93a1aa;

  --sh-1: 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 2px 6px rgba(0,0,0,.35);
  --sh-3: 0 5px 16px rgba(0,0,0,.38);
  --sh-4: 0 10px 30px rgba(0,0,0,.42);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.12);
}
:root[data-theme="light"] {
  /* Moerkt haandtag paa lys flade - den moerke variant ville forsvinde her. */
  --sb-thumb: rgba(60, 90, 115, .30);
  --sb-hover: rgba(var(--accent-rgb), .55);
  --app-bg: #eef3f6;
  --app-bg-2: #e3ebf0;
  --surface: #ffffff;
  --surface-2: #f5f9fb;
  --surface-3: #e6eef3;
  --line: #c2d4de;
  --line-soft: #d9e5eb;
  --bar: #0d3350;
  --bar-2: #124469;
  --input-bg: #ffffff;
  --code-bg: #f6fafc;

  --accent: #0f7c8a;
  --accent-rgb: 15,124,138;
  --accent-2: #0b5f6b;
  --ok: #17795a;
  --ok-rgb: 23,121,90;
  --warn: #a86a10;
  --warn-rgb: 168,106,16;
  --tc0: #a8560f;  --tc1: #17548f;  --tc2: #1c6b45;  --tc3: #8a3778;
  --tc4: #8a6a10;  --tc5: #3b4fa8;  --tc6: #0f6f78;  --tc7: #9c3a3a;
  --danger: #b3402f;
  --danger-rgb: 179, 64, 47;
  --danger-soft: #f7e0dc;
  --ok-soft: #dcf0e8;
  --wait-soft: #f7ecd2;

  --ink: #10222c;
  --ink-soft: #55707f;
  --on-bar: #ffffff;
  --on-bar-soft: #a9c8db;

  --sh-1: 0 1px 2px rgba(16,45,60,.10);
  --sh-2: 0 3px 8px rgba(16,45,60,.12), 0 1px 2px rgba(16,45,60,.08);
  --sh-3: 0 10px 24px rgba(16,45,60,.14), 0 2px 6px rgba(16,45,60,.10);
  --sh-4: 0 20px 48px rgba(16,45,60,.20), 0 4px 12px rgba(16,45,60,.12);
  --glow: 0 0 0 1px rgba(15,124,138,.14);
}

/* ============================================================================
   LYSE, LAV-GLARE TEMAER (25/8, Christian): Catppuccin Latte + Solarized Light.
   Ingen ren hvid grund (varm/blaeg off-white), moerk topbar + lys krop, daempet
   kontrast. Faelles [data-mode="light"] tuner komponenter (kort, chips, piller)
   der er bygget til moerk grund. Skygger er moerk-lav-opacitet (som paa papir).
   ============================================================================ */
:root[data-theme="latte"] {
  --sb-thumb: rgba(76,79,105,.30);   --sb-hover: rgba(var(--accent-rgb),.55);
  --app-bg: #eff1f5;          --app-bg-2: #e6e9ef;
  --surface: #ffffff;         --surface-2: #f3f5f9;   --surface-3: #e6e9ef;
  --line: #b8becb;            --line-soft: #d3d7e0;
  --bar: #3a3d54;             --bar-2: #43465e;
  --input-bg: #ffffff;        --code-bg: #f3f5f9;
  --accent: #8839ef;          --accent-rgb: 136,57,239;    --accent-2: #7a2fd8;
  --ok: #2f7d1e;              --ok-rgb: 47,125,30;
  --warn: #b3720f;            --warn-rgb: 179,114,15;
  /* Moerkere gear-koder end Latte-standardaccenterne: paa lys grund skal de
     laeses som TEKST (>=4:1), ikke bare pynte. */
  --tc0: #946700;  --tc1: #1a54cc;  --tc2: #2c7a1c;  --tc3: #7326c4;
  --tc4: #b8480a;  --tc5: #0672a0;  --tc6: #0d6b70;  --tc7: #c00c33;
  --danger: #d20f39;          --danger-rgb: 210,15,57;     --danger-soft: #f7dde2;
  --ok-soft: #dcefd7;         --wait-soft: #f7ecd6;
  --grp: #8839ef;             --grp-rgb: 136,57,239;
  --ink: #4c4f69;             --ink-soft: #5c5f77;
  --on-bar: #eef1f5;          --on-bar-soft: #a5a9c0;
  --sh-1: 0 1px 2px rgba(76,79,105,.10);
  --sh-2: 0 3px 8px rgba(76,79,105,.12), 0 1px 2px rgba(76,79,105,.08);
  --sh-3: 0 10px 24px rgba(76,79,105,.14), 0 2px 6px rgba(76,79,105,.10);
  --sh-4: 0 20px 48px rgba(76,79,105,.20), 0 4px 12px rgba(76,79,105,.12);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.14);
}
:root[data-theme="solarized"] {
  --sb-thumb: rgba(88,110,117,.30);  --sb-hover: rgba(var(--accent-rgb),.55);
  --app-bg: #fdf6e3;          --app-bg-2: #f4ecd8;
  --surface: #fffdf6;         --surface-2: #f6efdc;   --surface-3: #eee8d5;
  --line: #d9d0b8;            --line-soft: #e6ddc6;
  --bar: #073642;             --bar-2: #0a4453;
  --input-bg: #fffdf6;        --code-bg: #f5eeda;
  --accent: #268bd2;          --accent-rgb: 38,139,210;    --accent-2: #1a6fac;
  --ok: #6b7a00;              --ok-rgb: 107,122,0;
  --warn: #8a6600;            --warn-rgb: 138,102,0;
  /* Solarized-accenter er bevidst lav-kontrast; til gear-koder som TEKST paa den
     lyse creme trækkes de lidt moerkere ned saa de kan laeses (~3,8-5:1). */
  --tc0: #8a6800;  --tc1: #1c6ea8;  --tc2: #5f6f00;  --tc3: #50539f;
  --tc4: #b03e10;  --tc5: #1a7d73;  --tc6: #a82766;  --tc7: #b8241f;
  --danger: #dc322f;          --danger-rgb: 220,50,47;     --danger-soft: #f7ddd6;
  --ok-soft: #eaeed0;         --wait-soft: #f5ead0;
  --grp: #6c71c4;             --grp-rgb: 108,113,196;
  --ink: #47606a;             --ink-soft: #5a7178;
  --on-bar: #eee8d5;          --on-bar-soft: #93a1a1;
  --sh-1: 0 1px 2px rgba(101,123,131,.10);
  --sh-2: 0 3px 8px rgba(101,123,131,.12), 0 1px 2px rgba(101,123,131,.08);
  --sh-3: 0 10px 24px rgba(101,123,131,.14), 0 2px 6px rgba(101,123,131,.10);
  --sh-4: 0 20px 48px rgba(101,123,131,.20), 0 4px 12px rgba(101,123,131,.12);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.14);
}
/* ---- LIGHT-MODE komponent-tuning: chips/piller er bygget med en naesten-sort
   bund (#0a1a2b) til moerke temaer. Paa lys grund byttes den til en lys bund med
   MOERK tekst, saa de ikke bliver moerke oeer i en lys flade. ---- */
[data-mode="light"] .tp-card .tp-row .type-name[class*="tc-"]:not(.tc-none) {
  background: color-mix(in srgb, currentColor 15%, #ffffff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 42%, transparent);
}
[data-mode="light"] .op-ini,
[data-mode="light"] .psel-o-pill,
[data-mode="light"] .tp-card .tp-row .type-name.op-ini {
  color: #12202e;
  background: color-mix(in srgb, var(--op-c, var(--accent)) 52%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--op-c, var(--accent)) 45%, #000000);
}
[data-mode="light"] .psel-tinted:not(:focus),
[data-mode="light"] .psel-tinted:focus {
  color: color-mix(in srgb, var(--op-c, var(--accent)) 72%, #000000);
  background-color: color-mix(in srgb, var(--op-c, var(--accent)) 12%, var(--input-bg));
}
[data-mode="light"] .psel-tinted:not(:focus) {
  border-color: color-mix(in srgb, var(--op-c, var(--accent)) 45%, var(--line));
}

/* ---- slate: moderne graat ----
   Neutralt grafit hele vejen igennem, uden den varme tone. Accenten er et
   daempet staal - saa graa som den kan vaere og stadig kunne ses som "det
   her er aktivt".

   Status-farverne er IKKE gjort graa. Hele pointen med en neutral flade er
   at det farvede springer i oejnene: er alt graat, og det ene der er galt
   lyser roedt, ser man det fra den anden side af broen. Daempede man ogsaa
   dem, ville man have en pæn skaerm man ikke kan aflaese. */
:root, :root[data-theme="slate"] {
  --app-bg: #16181a;
  --app-bg-2: #1b1e21;
  --surface: #202326;
  --surface-2: #272b2f;
  --surface-3: #333940;
  --line: #454c54;
  --line-soft: #2f343a;
  --bar: #191c1f;
  --bar-2: #202428;
  --input-bg: #141719;
  --code-bg: #101214;

  --accent: #93b0c9;
  --accent-rgb: 147,176,201;
  --accent-2: #6f92ae;
  --ok: #6fae86;
  --ok-rgb: 111,174,134;
  --warn: #d3a24e;
  --warn-rgb: 211,162,78;
  --tc0: #d9a273;  --tc1: #86b6de;  --tc2: #8ac9a2;  --tc3: #cf9dc0;
  --tc4: #d8c579;  --tc5: #9fb2e0;  --tc6: #83c9c4;  --tc7: #d4a0a0;
  --danger: #d9736a;
  --danger-rgb: 217, 115, 106;
  --danger-soft: #35211f;
  --ok-soft: #1f2b23;
  --wait-soft: #2f2a1c;

  --ink: #e8eaec;
  --ink-soft: #99a2aa;
  --on-bar: #e8eaec;
  --on-bar-soft: #99a2aa;

  --sh-1: 0 1px 2px rgba(0,0,0,.42);
  --sh-2: 0 3px 6px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.32);
  --sh-3: 0 8px 20px rgba(0,0,0,.48), 0 2px 6px rgba(0,0,0,.32);
  --sh-4: 0 18px 45px rgba(0,0,0,.58), 0 4px 12px rgba(0,0,0,.38);
  --glow: 0 0 0 1px rgba(147,176,201,.16);
}

/* ---- RULLEBJAELKER ------------------------------------------------------
   Windows' egen er lys, bred og klodset - i et moerkt instrumentpanel ser den
   ud som noget der er faldet ind udefra, og den laa klods op ad kortene.
   Her: slank, moerk, med et haandtag i fladens egne farver. Baade
   scrollbar-* (Firefox + ny Chrome) og ::-webkit-scrollbar (den brede stoette),
   saa den ser ens ud paa skibets PC uanset browserversion.
   `stable` reserverer pladsen, saa indholdet ikke hopper naar bjaelken kommer
   og gaar mellem to faner. */
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb, rgba(120,160,200,.34)) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb, rgba(120,160,200,.34));
  border-radius: 999px;
  /* Gennemsigtig kant + baggrund kun i indholdet = luft hele vejen rundt om
     haandtaget, saa det ikke klistrer til teksten. */
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--sb-hover, rgba(var(--accent-rgb), .55)); background-clip: content-box; }
*::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: content-box; }
/* `stable` KUN hvor indholdet skifter hoejde, saa bjaelken kommer og gaar:
   stationskortets hovedomraade (fanerne er forskellig laengde) og modalerne.
   Sat overalt ville den reservere 10 px i fx den smalle sidebar, hvor der
   aldrig rulles - plads givet vaek for ingenting. */
/* both-edges paa detalje-panelet: rullebjaelken reserverer ellers KUN plads i
   hoejre side, og saa staar alt hvad der er centreret ~5 px til venstre for
   midten - ogsaa naar der ikke er noget at rulle i. */
.modal-card { scrollbar-gutter: stable; }
.det-main { scrollbar-gutter: stable both-edges; }

/* "Mangler endnu" er ikke det samme som "noget er galt".

   Tomme paakraevede felter var malet i --warn, altsaa samme gule som en
   rigtig advarsel. Det betyder at formularen raaber allerede FOER man har
   roert den, og at gult holder op med at betyde noget - er alt gult, er
   ingenting alarmerende. Og i det graa tema stak den varme gule desuden ud
   som en fremmed farve.

   Egen variabel, saa den kan tones pr. tema. Standard er accenten: rolig,
   hoerer til fladen, og siger stadig "her mangler noget". Gult er nu KUN
   for ting der faktisk er i vejen. */
:root {
  --needed: var(--accent); --needed-rgb: var(--accent-rgb);

  /* Faelles geometri - IKKE en temafarve.

     --radius laa i blokken ":root, :root[data-theme=warm]". Da slate blev
     standard, blev den delt op, og saa fulgte radius med over i warm alene:
     slate og light stod uden, var(--radius) blev til ingenting, og alle kort
     mistede deres afrundede hjoerner. Den slags hoerer paa :root, hvor alle
     temaer arver den, saa den ikke kan glemmes i det naeste tema. */
  --radius: 14px;
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  font-optical-sizing: auto;
  background: var(--app-bg);
  background-image: radial-gradient(1200px 700px at 50% -10%, var(--app-bg-2), var(--app-bg));
  background-attachment: fixed;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }

/* hidden-ATTRIBUTTEN skal ogsaa virke.
   Browserens egen regel er kun "[hidden] { display: none }" uden !important, saa
   ENHVER display-regel i denne fil slaar den ud. Maalt: CTD-skuffen havde
   display: flex, og med hidden sat stod den der stadig - et tomt kort med en
   tankestreg paa en skaerm hvor der slet ikke er en CTD.
   Der laa i forvejen en engangslap (.vnc-venter[hidden]) fra sidste gang jeg gik
   i den samme faelde. Nu er den lukket ét sted for alle elementer. */
[hidden] { display: none !important; }
/* Deles med zoom-faktoren: vh-enheder ignorerer zoom, saa 100vh ved 120%
   bliver 1,2 gange skaermen og giver rullepanel paa en side der sagtens
   kunne vaere der. --ui-zoom saettes af applyUiScale(). */
.screen { min-height: calc(100vh / var(--ui-zoom, 1)); }
.muted { color: var(--ink-soft); font-weight: 400; font-size: 14px; }

/* ================= LOGIN ================= */
#login {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  /* Container, ikke media query: layoutet skal foelge zoom-slideren. Media
     queries gaar efter vinduets bredde og reagerer slet ikke paa zoom. */
  container-type: inline-size;
  /* HELT FLAD. Her laa to store radiale gradienter - et farvet skaer fra oven og
     et blaaligt fra neden. De ser fine ud paa en ny skaerm og rodede paa en
     gammel: paa en 4:3-monitor med aeldre panel bliver de bloede overgange
     baandede striber, og kortet ser ud som om det ligger i en plamage.
     Fladen farve daekker samtidig body's egen radiale gradient inde paa
     loginsiden, saa forsiden er ren - resten af programmet beholder sin. */
  background: var(--app-bg);
}
/* Liggende: maerket til venstre, vejen ind til hoejre. Staaende betoed at man
   skulle rulle for at naa tastaturet paa en skaerm der er bredere end hoej. */
.login-card {
  position: relative; width: min(830px, 100%);
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas: "brand main" "foot foot";
  gap: 22px 34px; align-items: center;
  /* Ogsaa flad. Kortets top-til-bund-fade var svag, men paa de gamle paneler
     blev den to synlige felter i stedet for én overgang. */
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 26px; padding: 32px 34px 20px;
  box-shadow: var(--sh-4), var(--glow); text-align: left;
}
.login-brand {
  grid-area: brand; text-align: center;
  border-right: 1px solid var(--line-soft); padding-right: 30px;
}
.login-main { grid-area: main; min-width: 0; }
.login-badge {
  width: 62px; height: 62px; margin: 0 auto 13px; border-radius: 19px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #7defdf, var(--accent-2));
  color: #032b31; box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.5);
}
.login-badge svg { width: 34px; height: 34px; }
.logo { font-size: 26px; font-weight: 800; letter-spacing: .01em; color: var(--ink); }
.subtitle { color: var(--ink-soft); margin: 5px 0 0; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; line-height: 1.6; }

/* the two ways in: look, or take control */
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.role-card {
  display: flex; flex-direction: column; width: 100%; text-align: left;
  cursor: pointer; min-width: 0;
  padding: 16px 18px; border-radius: 15px; font-family: inherit;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: var(--sh-2); transition: transform .13s, box-shadow .13s, border-color .13s;
}
.role-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--sh-3); }
.role-card:active { transform: translateY(0); box-shadow: var(--sh-1); }
.rc-icon { font-size: 21px; line-height: 1; }
.rc-title { display: block; font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.rc-sub { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-top: 4px; }
/* Pilen skal staa i bunden af begge kort, ogsaa naar teksterne er ulige lange */
.rc-go { display: block; margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 700; color: var(--accent); }

/* Back hoerer til det valg den fortryder, og det blev truffet HER i hoejre
   spalte. Den laa foer i kortets hjoerne - ovre over logoet, i den modsatte
   spalte af tastaturet - saa den var langt fra det den handlede om, og
   efterlod et tomt felt over maerket.

   Overskriften centreres over CIFRENE, ikke over raekken: Back ligger absolut
   i venstre kant, saa den ikke skubber til midten. Ellers ville "MASTER CODE"
   staa forskudt efter hvor bredt ordet paa knappen var. */
.pin-head {
  position: relative; display: flex; align-items: center;
  justify-content: center; min-height: 28px; margin-bottom: 10px;
}

.back-roles {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  padding: 5px 9px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--ink-soft); cursor: pointer;
  font-family: inherit; font-size: 12px; line-height: 1;
  transition: color .12s, background .12s, border-color .12s;
}

/* Stille som udgangspunkt: det er en vej TILBAGE, ikke handlingen man kom
   for. Den traeder frem naar man soeger den. */
.back-roles:hover {
  color: var(--ink); background: var(--surface-3);
  border-color: var(--line-soft);
}

.back-roles:focus-visible {
  outline: none; color: var(--ink);
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

.pin-prompt {
  margin: 0; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center;
}

/* Serveradressen er roerfoering, ikke et spoergsmaal til brugeren. Den ligger
   skjult og dukker selv op i det oejeblik forbindelsen fejler - som er den
   eneste gang den betyder noget. */
.login-foot {
  grid-area: foot; display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); padding-top: 13px;
}
.conn-status:empty { display: none; }
.host-toggle {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 11px; color: var(--ink-soft); opacity: .55; text-decoration: underline;
  text-underline-offset: 3px;
}
.host-toggle:hover { opacity: 1; color: var(--accent); }
.host-row { display: flex; align-items: center; gap: 10px; }
.host-row label { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }

/* ---- Dansk / engelsk ----
   To knapper, ikke en kontakt: en kontakt viser ikke hvad den skifter TIL, og
   staar man med engelsk paa skaermen og ikke laeser dansk, skal ordet "Dansk"
   kunne ses direkte. Begge sprog staar altid skrevet, hver i sit eget sprog. */
.lang-pick {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(0,0,0,.14);
}
.lang-btn {
  cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600;
  padding: 4px 12px; border: 0; border-radius: 999px; line-height: 1.5;
  background: transparent; color: var(--ink-soft); opacity: .7;
  transition: background .12s, color .12s, opacity .12s;
}
.lang-btn:hover { opacity: 1; color: var(--ink); }
.lang-btn.is-on {
  background: var(--accent); color: #04222a; opacity: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* I tandhjulsmenuen sidder den paa bjaelkens moerke flade, hvor --ink-soft
   ikke har kontrast nok. */
.lang-pick-menu { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.lang-pick-menu .lang-btn { color: var(--on-bar-soft); }
.lang-pick-menu .lang-btn:hover { color: var(--on-bar); }
.lang-pick-menu .lang-btn.is-on { color: #04222a; }

/* Smal skaerm - eller kraftig zoom: fald tilbage til én soejle */
@container (max-width: 700px) {
  /* Back og overskriften kan ikke staa paa samme linje her - knappen naaede
     ind over "MASTER CODE". De stables i stedet, saa overskriften stadig
     staar centreret over cifrene. */
  .pin-head { display: block; min-height: 0; }
  .back-roles { position: static; transform: none; display: inline-block;
                margin: 0 0 8px -9px; }

  .login-card { grid-template-columns: 1fr; grid-template-areas: "brand" "main" "foot"; }
  .login-brand { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 0 0 16px; }
  .role-cards { grid-template-columns: 1fr; }
}

/* pin dots */
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 4px 0 8px; height: 20px; }
.pin-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: transparent; border: 2px solid var(--line);
  transition: all .18s; box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.pin-dot.filled {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.55); transform: scale(1.06);
}
.pin-error { color: var(--danger); font-size: 13px; height: 20px; margin-bottom: 8px; }
.login-card.shake { animation: shake .4s; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}
}

/* Fast bredde, ikke 1fr: i den brede hoejre soejle ville tasterne ellers
   blive absurd store. */
.keypad { display: grid; grid-template-columns: repeat(3, 88px); gap: 10px; justify-content: center; }
.keypad button {
  font-size: 21px; font-weight: 600; padding: 13px 0; cursor: pointer; color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: 15px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .06s, box-shadow .15s, filter .15s;
}
.keypad button:hover { filter: brightness(1.12); }
.keypad button:active { transform: translateY(1px) scale(.97); box-shadow: var(--sh-1); }
.key-ok {
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  color: #04222a !important; border-color: transparent !important;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.key-clear { color: var(--danger) !important; }

.host-row input {
  padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); font-size: 14px; color: var(--ink); width: 210px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.30);
}
.conn-status { font-size: 13px; color: var(--ink-soft); }
.conn-status.ok { color: var(--ok); } .conn-status.err { color: var(--danger); }

/* ================= BANNERS ================= */
.offline-banner { background: linear-gradient(180deg, var(--danger), #c9503f); color: #fff; text-align: center; padding: 12px 18px; font-size: 15px; font-weight: 600; box-shadow: var(--sh-3); position: relative; z-index: 12; }
.offline-banner .ob-host { font-weight: 400; opacity: .85; margin-left: 8px; font-size: 13px; }
.offline-banner .ob-top { font-size: 16px; }
.offline-banner .ob-retry {
  margin-left: 10px; font-size: 12.5px; font-weight: 400; opacity: .9;
}
.offline-banner .ob-retry::before {
  content: "◍"; margin-right: 6px; animation: obpulse 1.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes obpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.offline-banner .ob-body {
  font-weight: 400; font-size: 13px; line-height: 1.65; margin: 8px auto 0;
  max-width: 760px; opacity: .95; text-align: left;
  border-top: 1px solid rgba(255,255,255,.25); padding-top: 8px;
}
/* VARSLET genstart: samme banner, roligt udtryk. Rød er en alarm og skal blive
   ved med at betyde noget - en planlagt genstart er ikke en alarm, og farvede vi
   den rød, ville folk holde op med at reagere paa den rigtige. */
.offline-banner.planned {
  background: linear-gradient(180deg, #1f6f8b, #17566c);
  box-shadow: var(--sh-2);
}
.offline-banner.planned .ob-body { border-top-color: rgba(255,255,255,.22); }
.offline-banner .ob-secs {
  margin-left: 10px; font-size: 13px; font-weight: 400; opacity: .8;
  font-variant-numeric: tabular-nums;
}
/* Snurren. Ren CSS, ingen billedfil - den skal ogsaa virke naar serveren er
   nede og der ikke kan hentes noget som helst. */
.offline-banner .ob-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 9px;
  vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: obspin .9s linear infinite;
}
@keyframes obspin { to { transform: rotate(360deg); } }
/* Nogen bliver daarlige af bevaegelse, og en skaerm der staar taendt et helt
   togt skal kunne holdes ud. Uden bevaegelse pulserer den i stedet. */
@media (prefers-reduced-motion: reduce) {
  .offline-banner .ob-spin { animation: obpulse 1.6s ease-in-out infinite; }
  .offline-banner .ob-retry::before { animation: none; }
}

.sync-banner { background: linear-gradient(180deg, var(--warn), #d99a13); color: #2a1c00; text-align: center; padding: 9px 18px; font-size: 14px; font-weight: 700; box-shadow: var(--sh-2); position: relative; z-index: 12; }

/* ================= TOPBAR ================= */
.topbar {
  display: flex; align-items: center; gap: 20px; padding: 12px 22px;
  background: linear-gradient(180deg, var(--bar-2), var(--bar));
  color: var(--on-bar); position: sticky; top: 0; z-index: 10;
  box-shadow: var(--sh-3); border-bottom: 1px solid rgba(var(--accent-rgb),.15);
}
/* white-space:nowrap + min-width:0 betyder at kassen godt maa blive smallere
   end teksten - og saa flyder teksten UD OVER fanerne i stedet for at blive
   klippet. Det sker ved kraftig zoom, hvor der pludselig ikke er plads. */
.brand { font-weight: 800; font-size: 20px; display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: 1 1 0; min-width: 0; overflow: hidden; }
/* overflow:hidden er her for at teksten ikke flyder ud over fanerne ved kraftig
   zoom. Men den klipper BEGGE veje, og klokkens tal sidder paa bottom:-2px -
   altsaa 2 px under kassen, som er praecis lige saa hoej som knappen. Tallet
   blev klippet over i bunden.
   Lodret luft loeser det: overflow klipper ved PADDING-kanten, saa 5 px giver
   tallet plads uden at slippe den vandrette klipning.
   overflow-x:hidden + overflow-y:visible kan IKKE bruges - saetter man én akse
   til hidden, bliver den anden tvunget til auto, og saa faar man en rullebjaelke
   i topbaren. */
/* 6 px. En scanning af alle skygger viste at klokkens og tandhjulets egne
   skygger manglede 1 px hver vej ved 5 - og forbindelseslampens 8 px gloed samt
   tallets ring passede allerede.
   Ikke 8: hver px her goer TOPBAREN hoejere, og den hoejde tages fra
   stationslisten. 8 kostede 6 px topbar for at frigoere 1 px skygge. */
.topbar-right { overflow: hidden; padding-block: 6px; }
/* Topbaren ligger UDEN FOR main.tabpage, saa en forespoergsel paa "page"
   rammer den aldrig. Den har brug for en beholder den faktisk er inde i. */
#app { container-type: inline-size; container-name: shell; }
/* Bliver der for lidt plads, ryger "2.0"-maerket foerst. Rollemaerket
   (MASTER / VIEW ONLY) skal blive - forskellen paa at kunne stoppe en
   station og ikke at kunne er ikke en detalje man maa gaette paa. */
/* Paa smalle skaerme spares pladsen paa BYLINEN - ikke paa versionen. Versionen
   skal netop vaere med naar der sendes skaermbilleder fra en laptop ombord. */
@container shell (max-width: 1150px) {
  .topbar .credit { font-size: 0; }             /* skjul teksten ... */
  .topbar .credit .ver-badge { font-size: 9.5px; }   /* ... men behold maerket */
}
@container shell (max-width: 900px)  { .topbar .clocks .clock:first-child { display: none; } }
/* Sidste udvej ved ekstrem zoom: skrump navnet i stedet for at klippe det.
   "Dana SIS" er en ren tekstknude og kan ikke skjules selektivt. */
@container shell (max-width: 1000px) {
  .topbar .brand { font-size: 15px; }
  /* Mellemrum og margener giver de sidste par snese pixels tilbage,
     i stedet for at klippe navnet over. */
  .topbar { gap: 10px; padding-left: 14px; padding-right: 14px; }
}
/* 1080p-laptop (100% skala ~1366-1536px): FØR skrumpede intet i dette baand -
   den faste ~870px fane-blok + højre-klyngen løb ud over bredden, saa navnet OG
   tandhjul/hjem/klokke blev klippet (Christian). Nu skrumper fanerne trinvist. */
@container shell (max-width: 1550px) {
  .tabs { gap: 4px; }
  .tab { padding: 8px 11px; font-size: 13.5px; }
  .topbar { gap: 14px; }
}
@container shell (max-width: 1370px) {
  .tab { padding: 7px 9px; font-size: 12.5px; }
  .tabs { gap: 3px; }
  .clocks { gap: 10px; }
  .clock span:last-child { font-size: 16px; }
  .topbar { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .sc-beta-pill { display: none; }   /* køb bredde: Beta-pillerne kan undværes her */
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #7defdf, var(--accent-2));
  color: #032b31; box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.45);
  flex: 0 0 auto;
}
.brand-mark svg { width: 19px; height: 19px; }
/* Ankeret tager en langsom omgang med jaevne mellemrum (Christian). Selve
   omdrejningen tager ~1,5 s, derefter staar det stille i ~13 s - et lille
   livstegn, ikke en roterende reklame. Kun ikonet drejer, ikke fladen. */
/* 14 s var for sjaeldent - omdrejningen var 1,5 s ud af 14 og blev overset.
   Nu: hele omgangen hvert 7. sekund, selve drejningen ~2 s. */
@keyframes brandSpin {
  0%, 72% { transform: rotate(0deg); }
  100%    { transform: rotate(360deg); }
}
.brand-mark svg { animation: brandSpin 7s ease-in-out infinite; transform-origin: 50% 50%; }
.brand-mark:hover svg { animation-duration: 2.2s; }        /* hold musen over: den snurrer oftere */
@media (prefers-reduced-motion: reduce) { .brand-mark svg { animation: none; } }
.topbar-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.role-tag {
  font-size: 10px; letter-spacing: .1em; padding: 4px 11px; border-radius: 999px;
  /* SKARPERE. Den sad i 16 % accent paa en moerk bar og forsvandt halvt.
     Rollen er ikke pynt - den siger om man KAN aendre noget, og det skal kunne
     ses paa et oejeblik. Fuld farve, moerk tekst: samme greb som de groenne
     handlingsknapper, saa den laeses som "aktiv tilstand" og ikke som en
     dekoration. */
  background: var(--accent); color: #04222a; font-weight: 800;
  border: 1px solid var(--accent); box-shadow: var(--sh-1);
  /* Laengere ind, vaek fra titlen - den klaebede til "MINI-SIS". */
  margin-left: 20px;
}
.role-tag.client { background: rgba(240,180,41,.16); color: var(--warn); border-color: rgba(240,180,41,.32); }
/* SERVER-IDENTITET (redundans: to servere paa to PCer). Fuld farve + hvid tekst,
   saa "SERVER N" ses paa afstand og aldrig forveksles. Baggrundsfarven saettes
   inline af app.js pr. server. Skjult (hidden) naar der ikke er et navn. */
.server-badge {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #fff;
  box-shadow: var(--sh-1); vertical-align: middle; white-space: nowrap;
}
/* flex:0 1 auto (ikke 0 0 auto) = fane-blokken MAA skrumpe, saa den ikke skubber
   navn/ikoner ud over kanten paa en smal skaerm; wrap som sidste sikkerhedsnet. */
/* align-items MANGLEDE -> default "stretch": alle faner blev straekket til den
   HOEJESTE fane i raekken (dem med BETA-pille/prik), saa den aktive fanes flade
   voksede ud over topbarens indhold og blev "spist" i bunden. Station Panel saa
   rigtig ud fordi den er den laveste. center = hver fane beholder sin egen hoejde. */
.tabs { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; }
.tab {
  background: transparent; border: none; color: var(--on-bar-soft); padding: 9px 16px;
  border-radius: 10px; cursor: pointer; font-size: 15px; transition: all .15s;
  /* Fanerne med ikon (Dana Live-prik, Scanmar/CTD Beta-pille, Dana Maps/DanaView-SVG)
     fik en 34px hoej linjeboks paa en 15px skrift: ikonet strakte linjen, og fanen
     blev hoejere end de andre -> teksten blev "spist" af topbaren. Fast linjehoejde
     + flex-centrering giver ALLE faner samme hoejde uanset indhold (Christian). */
  display: inline-flex; align-items: center; gap: 7px;
  line-height: 1.2; white-space: nowrap;
  /* FAST hoejde: uanset om fanen har prik, BETA-pille eller SVG-ikon er den
     praecis lige saa hoej som de andre. Indholdet kan dermed ALDRIG goere en
     fane hoejere end topbaren har plads til (det var det der "spiste" bunden). */
  height: 36px; box-sizing: border-box; flex: 0 0 auto;
}
/* Ikoner/piller inde i fanen maa ikke vokse ud over fanens hoejde. */
.tab > * { max-height: 100%; }
/* Ikonerne maa ikke paavirke linjeboksen. */
.tab > svg, .tab > span { flex: none; }
.tab > svg { display: block; }
.tab:hover { color: var(--on-bar); background: rgba(255,255,255,.06); }
.tab.active { background: rgba(var(--accent-rgb),.16); color: var(--accent); box-shadow: var(--sh-1), inset 0 0 0 1px rgba(var(--accent-rgb),.25); }
.ts-chip {
  display: none; align-items: center; gap: 9px; padding: 6px 15px; border-radius: 999px;
  font-size: 14.5px; background: rgba(0,0,0,.32); box-shadow: var(--sh-2), inset 0 0 0 1px rgba(61,220,151,.25);
}
.ts-chip.on { display: inline-flex; }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(61,220,151,.6)} 70%{box-shadow:0 0 0 9px rgba(61,220,151,0)} 100%{box-shadow:0 0 0 0 rgba(61,220,151,0)} }
.ts-type { font-weight: 700; color: var(--ok); }
.ts-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.clocks { display: flex; align-items: center; gap: 16px; }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.clock span:last-child { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; }
.clabel { font-size: 10px; letter-spacing: .12em; color: var(--on-bar-soft); }
.icon-btn {
  background: rgba(255,255,255,.10); color: var(--on-bar); border: none; border-radius: 9px;
  width: 34px; height: 34px; font-size: 15px; cursor: pointer; box-shadow: var(--sh-2);
  transition: transform .06s, filter .15s;
  /* Centreringen hoerer HER, ikke kun paa klokken. Uden den blev SVG'en sat som
     et inline-element paa tekstlinjen og lagde sig skaevt i den 34x34 firkant -
     tandhjulet sad ikke i midten. Klokken havde den via .health-btn og saa
     rigtig ud, hvad der gjorde forskellen svaer at se. */
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { filter: brightness(1.25); }
.icon-btn:active { transform: translateY(1px); box-shadow: var(--sh-1); }
/* Statusdioden staar sidst i filen - se "STATUSDIODEN". */

/* ================= PAGES ================= */
.tabpage {
  padding: 22px; max-width: 1200px; margin: 0 auto;
  /* Knaekpunkterne herunder er @container, ikke @media: skruer man op paa
     zoom-slideren, bliver den EFFEKTIVE plads mindre - men en media query ser
     stadig skaermens raa bredde og ville proppe fire kort ned i det halve. */
  container-type: inline-size; container-name: page;
}
/* Centreret, men ikke lige brede: forsiden er ét kort og én liste og har
   godt af at vaere samlet, mens WinCollect er en vaeg af sensorpaneler der
   skal bruge pladsen. */
/* 64 % er en samlet laesespalte - god paa en bred 16:9-skaerm. Men paa en 4:3 er
   64 % saa smalt at der ikke er plads til felt-kortet OG knapperne ved siden af
   hinanden, og saa wrapper knapperne ned (raekken bliver dobbelt saa hoej).
   Derfor et GULV: forsiden er aldrig smallere end 960 px (nok til side om side),
   men heller aldrig bredere end vinduet. Paa en aegte bred skaerm vinder de 64 %
   og laesespalten er tilbage.
     max(64%, min(100%, 960px))
   Alt er relativt til det samme koordinatsystem, saa zoom flytter det ikke -
   det var praecis dét container-queries gjorde galt. */
#tab-dashboard {
  max-width: none; margin-inline: auto; padding: 22px 0;
  /* Lidt bredere end foer (var 64 % / 960 px), saa knapraekken i stationshovedet
     - Cruise report, Download, Add station, Export - staar med luft i stedet for
     at klemme sig sammen. */
  width: max(68%, min(100%, 1040px));
}
#tab-wincollect { max-width: none; width: 80%; margin-inline: auto; padding: 22px 0; }
/* WinCollect er et vaeg-display: tolv instrumentpaneler side om side paa en
   bred skaerm, ikke en spalte i midten med luft omkring. Derfor faar netop
   den fane hele bredden - de oevrige fanerne er laesestof og bliver ved med
   at have en laeselig linjelaengde.
   Kun bredde-loftet fjernes. Gitteret er allerede auto-fit, saa Wide,
   Compact og Focus fylder selv pladsen ud - og en id-regel her ville
   tromle netop de tre tilstande, fordi id slaar klasse. */
#tab-wincollect { max-width: none; padding: 22px 26px; }

.cruise-banner {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--bar-2), var(--bar));
  color: var(--on-bar); border-radius: var(--radius); padding: 15px 20px; margin-bottom: 18px;
  box-shadow: var(--sh-3); border: 1px solid rgba(var(--accent-rgb),.18);
}
.cruise-banner.none { background: linear-gradient(135deg, #4a3510, #33240a); border-color: rgba(240,180,41,.3); }
.cruise-banner { align-items: center; }
.cb-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cb-label { font-size: 9.5px; letter-spacing: .16em; color: var(--accent); font-weight: 700; }
.cruise-banner.none .cb-label { color: var(--warn); }
.cb-name { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.cb-meta { font-size: 13.5px; color: var(--on-bar-soft); }

/* station panel */
/* .station-panel er afloest af .op-card - se betjeningskortet nederst. */
.station-left { display: flex; flex-direction: column; justify-content: center; }
/* Vandret bjaelke: hvem | ur | detaljer. Uret staar i midten fordi det er
   det eneste man aflaeser paa afstand. */
.station-status {
  /* Lige brede sidesoejler, saa uret staar PRAECIST i midten af kortet og
     ikke bare i midten af den plads der var tilovers. INGEN egen baggrund/ramme
     mere - det er HELE op-card der farves naar der optages (ikke kort-i-kort).
     Teksten er faste lyse farver (--on-bar*), for hele kortet er moerkt under
     optagelse (og --ink er moerk i lyst tema). */
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 26px;
}
.station-status .ss-v { color: var(--on-bar); }
.station-status .ss-k, .station-status .ss-elapsed { color: var(--on-bar-soft); opacity: 1; }
.ss-who { display: flex; flex-direction: column; gap: 7px; justify-self: start; }
.ss-live {
  /* ROED prik + "RECORDING"-tekst = den universelle optage-farve (som en
     record-knap). Resten af kortet maa gerne vaere groent; selve signalet er roedt. */
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--danger); display: flex;
  align-items: center; gap: 7px;
}
.ss-live::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 10px var(--danger);
  animation: sspulse 1.8s ease-in-out infinite;
}
@keyframes sspulse { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
.ss-clock { text-align: center; }
.ss-elapsed {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .7; margin-top: 2px;
}
/* HRS/MIN/SEC-etiketterne er skjult som standard - kun 'elapsed' vises. Aqua
   Futuristic (demo) bytter om (se den blok). */
.ss-elapsed .ss-u { display: none; }
.station-prep { display: flex; flex-direction: column; }
/* Lidt lavere titel-luft: den vundne plads gaar til stationslisten. */
.prep-title { font-size: 15px; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; font-weight: 800; }
.prep-fields { display: flex; flex-direction: column; gap: 10px; }
.pf label { font-size: 11px; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.pf input, .pf select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); font-size: 15px; color: var(--ink); font-family: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
  /* SAMME HOEJDE i hele formularen. Et dato-felt tegner sin egen kalender-knap
     og fik derfor en anden hoejde end tekstfelterne ved siden af - to felter paa
     samme linje stod skaevt. Fast hoejde + ens boksmodel retter det. */
  box-sizing: border-box; height: 46px; line-height: 1.2;
}
.pf textarea { box-sizing: border-box; }
.pf input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55); cursor: pointer;
}
.pf input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(1) opacity(.95); }
/* KODER OG NOEGLER faar deres egen farve og skrift. En kode skal kunne findes
   paa et splitsekund naar man skal laese den op eller taste den ind - staar den
   i samme skrift som alt andet, skal man lede efter den. */
.pf input.is-code, input.is-code {
  font-family: ui-monospace, Consolas, monospace; font-weight: 700;
  letter-spacing: .12em; color: var(--warn);
}
.pf input:focus, .pf select:focus, .form-grid input:focus, .form-grid textarea:focus,
.form-grid select:focus, .cruise-form input:focus, .host-row input:focus {
  outline: none; border-color: var(--accent); box-shadow: inset 0 2px 5px rgba(0,0,0,.28), 0 0 0 3px rgba(var(--accent-rgb),.18);
}
.pf .type-row { display: flex; gap: 8px; }
.pf .type-row select { flex: 0 0 130px; }
.pf .type-row input { flex: 1; }

/* Valgt operatoer/gear farver SELVE feltet som en pille (ui.js saetter .psel-tinted
   + --op-c). Samme farvesprog som listens piller: farvet tekst + farvet kant + svag
   tone i feltets egen farve. Farven vises OGSAA ved fokus (ellers forsvandt den lige
   efter man valgte, fordi popup'en giver feltet fokus) - kun den farvede KANT viger
   for fokus-ringen. Baade :not(:focus) og :focus er (0,2,0) og slaar dermed de
   almindelige '.X select'-regler (0,1,1) uanset raekkefoelge i filen. */
.psel-tinted:not(:focus), .psel-tinted:focus {
  color: var(--op-c, var(--accent));
  background-color: color-mix(in srgb, var(--op-c, var(--accent)) 14%, var(--input-bg));
  font-weight: 600;
}
.psel-tinted:not(:focus) {
  border-color: color-mix(in srgb, var(--op-c, var(--accent)) 55%, var(--line-soft));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .psel-tinted:not(:focus), .psel-tinted:focus { background-color: var(--input-bg); }
  .psel-tinted:not(:focus) { border-color: var(--op-c, var(--accent)); }
}

/* ---- Samme hoejde paa de tre kontroller i "Naeste station" ----
   Vagt, stationstype og kommentar stod side om side i 38 / 42 / 42 px, fordi
   hoejden kom af INDHOLDET og de tre har hver sin skriftstoerrelse (13,3 / 13 /
   15 px). Fire pixels er nok til at en raekke ser skaev ud.
   Hoejden saettes ÉT sted paa alle tre. Padding bliver lodret symmetrisk og
   centreringen klarer resten, saa en aendret skriftstoerrelse ikke kan bringe
   dem ud af trit igen. */
.prep-fields .pf > input,
.prep-fields .pf > button,
.prep-fields .pf > select {
  min-height: 42px;
}
.prep-fields .pf > button {
  display: flex; align-items: center;
  padding-top: 0; padding-bottom: 0;
}

.ss-title { font-size: 14px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.ss-title.active { color: var(--ok); font-weight: 700; }

/* active station: number + type, shown large */
.ss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; flex-wrap: wrap; }
.ss-no {
  font-size: 26px; font-weight: 800; color: var(--ok); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.ss-type {
  font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: rgba(var(--accent-rgb),.12); padding: 4px 13px; border-radius: 999px;
  box-shadow: var(--sh-1), inset 0 0 0 1px rgba(var(--accent-rgb),.28);
}
/* "next: #4" chip next to the Prepare heading */
/* Naeste stationsnummer. REN TEKST, ikke en pille.
   Som pille var den en groen klat naar der ikke var noget tal - en tom pille
   viser stadig sin baggrund, sin ramme og sin padding, saa den saa ud som et
   signal der betoed noget. Nu er der ingenting at se naar der ikke er noget at
   sige, og tallet staar tydeligt naar der er.
   :empty er baade baelte og seler: teksten saettes til "" naar serveren ikke
   sender et nummer, og saa forsvinder elementet helt. */
.next-no {
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  color: var(--ok); margin-left: 10px; text-transform: none;
  font-variant-numeric: tabular-nums;
}
.next-no:empty { display: none; }
/* Bred nok til overskriften "ACTIVITY NO. ▾" - vaerdierne (#12) er korte, saa
   det er teksten i hovedet der bestemmer. white-space: nowrap saa den ikke
   brydes til to linjer. */
.col-no { width: 108px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }

/* ---- Klik paa raekken for detaljer ----
   Details-knappen er vaek, saa raekken skal SIGE at den kan trykkes paa. Tre
   ting goer det, og de to foerste virker uden at man skal hive musen henover. */
.st-row { cursor: pointer; }
/* Hover paa CELLERNE, ikke paa raekken. To grunde, begge fundet ved at maale:
   - ".inst-table tbody tr:hover" findes allerede og har hoejere specificitet end
     ".st-row:hover", saa en regel paa raekken ville aldrig slaa igennem.
   - ".manual-row td" maler en baggrund paa cellerne, og en cellebaggrund ligger
     OVEN PAA raekkens. Papirstationerne ville derfor vaere de eneste raekker
     uden hover - praecis de raekker man oftest skal ind i. */
.inst-table tbody tr.st-row:hover > td { background: var(--surface-3); }
/* Stationsnummeret er det synlige, permanente holdepunkt - og det eneste man kan
   tabbe til, for en <tr> kan ikke faa fokus. Ingen streg som standard: tolv
   raekker med streg under tallet ser ud som en fejl. Stregen kommer paa hover og
   ved fokus, hvor man er i tvivl om der sker noget. */
.no-link {
  color: inherit; font: inherit; text-decoration: none;
  text-underline-offset: 3px;
}
.st-row:hover .no-link, .no-link:hover, .no-link:focus-visible {
  text-decoration: underline;
}
.no-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
/* Pilen yderst: kun paa hover, og kun paa skaerme med en mus. Paa en
   beroeringsskaerm er der ingen hover, og en pil der aldrig kommer frem er stoej
   i en kolonne der i forvejen er fuld af knapper. */
.row-go {
  color: var(--ink-soft); font-size: 17px; line-height: 1;
  margin-left: 8px; opacity: 0; transition: opacity .12s;
  display: inline-block; vertical-align: -2px;
}
@media (hover: hover) {
  .st-row:hover .row-go { opacity: .75; }
}
@media (hover: none) {
  .row-go { display: none; }
}
/* Stationstypen som ren tekst, ikke en pille. Farven skelner typerne fra
   hinanden - én farve pr. type, tildelt af typeClass() i app.js. Ingen
   baggrund, ingen ramme: kolonnen bliver en rolig stribe man scanner ned ad,
   og de forskellige typer springer stadig i oejnene.
   nowrap staar tilbage, saa "Beam Trawl" vokser i bredden, ikke i hoejden. */
.type-name {
  font-weight: 700; font-size: 12.5px; letter-spacing: .03em;
  white-space: nowrap; color: var(--ink);
}
.tc-0 { color: var(--tc0); } .tc-1 { color: var(--tc1); }
.tc-2 { color: var(--tc2); } .tc-3 { color: var(--tc3); }
.tc-4 { color: var(--tc4); } .tc-5 { color: var(--tc5); }
.tc-6 { color: var(--tc6); } .tc-7 { color: var(--tc7); }
.tc-none { color: var(--ink-soft); font-weight: 400; }
/* Monospace med tabular-nums: cifrene har samme bredde, saa uret ikke
   vibrerer hvert sekund naar et 1-tal bliver til et 8-tal. */
.ss-timer {
  /* App'ens egen skrift (ikke monospace) - kollega kunne ikke lide "digital-ur"-
     fonten med prik i nullet. tabular-nums holder cifrene lige brede saa uret ikke
     vibrerer. */
  font-family: inherit;
  /* 18/8 (Christian): lettere ciffer-vaegt + INGEN glow (var 800 + text-shadow
     0 0 30px). Den lyste som et digital-ur; nu rent og roligt. */
  font-size: 62px; font-weight: 500; color: var(--ok);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  line-height: 1; letter-spacing: .005em;
}
.ss-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; justify-self: end; }
.ss-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; }
.ss-k {
  color: var(--ink-soft); opacity: .75; min-width: 78px; text-align: right;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding-top: 2px;
}
.ss-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.station-buttons { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.big-btn {
  font-size: 22px; font-weight: 700; border: none; border-radius: 14px; cursor: pointer;
  color: #fff; padding: 16px; transition: transform .08s, filter .15s, box-shadow .15s;
  /* Bare en knap der SVÆVER lidt: ren farve + tydelig drop shadow (Christian -
     ikke den store 3D-facet). Loefter sig lidt paa hover, saenkes ved tryk. */
  box-shadow: var(--sh-3);
  text-shadow: 0 1px 1px rgba(0,0,0,.22);
}
.big-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--sh-4); }
.big-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--sh-2); }
.big-btn.start { background: linear-gradient(180deg, #34b487, #1f8763); }
.big-btn.stop  { background: linear-gradient(180deg, #dd6154, #ad3d31); }
/* En deaktiveret knap skal traede tilbage, ikke staa som en stor farvet
   flade der ser ud som om den burde kunne trykkes. */
.big-btn:disabled {
  opacity: 1; cursor: not-allowed;
  background: transparent !important;
  border: 1px dashed var(--line); color: var(--ink-soft);
  text-shadow: none;
  /* Ikke helt flad: en let INDadgaaende skygge saa den ser "slukket/nedtrykt"
     ud frem for bare tegnet med en streg. Stadig tydeligt ikke-trykbar. */
  box-shadow: inset 0 2px 6px rgba(0,0,0,.22);
}
/* ... men den skal stadig kunne KENDES. To ens stiplede graa kasser siger at
   ingen af dem kan bruges, og ikke hvilken der er start. Et meget svagt skaer
   holder identiteten uden at love at der kan trykkes: kanten er stadig stiplet
   og graa, teksten stadig daempet.
   --ok-soft og --danger-soft findes i alle fire temaer, ogsaa det lyse, saa
   skaeret foelger med naar man skifter tema. */
.big-btn.start:disabled { background: var(--ok-soft) !important; }
.big-btn.stop:disabled  { background: var(--danger-soft) !important; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 18px 0; }
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--sh-2);
}
.card-label { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.card-value { font-size: 28px; font-weight: 700; color: var(--accent); margin-top: 5px; }
.card-value.ok { color: var(--ok); } .card-value.warn { color: var(--danger); } .card-value.off { color: var(--ink-soft); }

/* panels */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Et grid-felt har min-width:auto som standard, saa det naegter at blive
   smallere end sit bredeste ord. Live data-panelet er fuldt af lange
   NMEA-linjer uden mellemrum, og skubbede derfor hele siden ud til hoejre ved
   zoom. min-width:0 lader feltet krympe; .feed klipper selv sine linjer. */
.grid-2 > * { min-width: 0; }
.panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--sh-2); margin-bottom: 18px;
}
.panel h2 { font-size: 16px; color: var(--accent); margin-bottom: 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
/* Det negative topmargen traekker forklaringen op under et inputfelt, hvor
   feltets egen bundmargen ellers giver en luns luft. Men efter en RAEKKE
   KNAPPER var der ingen luft at spise af - saa aad de 4 px ind i knappen og
   teksten laa oven i den. Derfor nulstilles den efter knapraekker og lister. */
.hint { font-size: 13px; color: var(--ink-soft); margin: -4px 0 14px; }
.admin-actions + .hint,
.modal-actions + .hint,
.drop-list + .hint,
.types-list + .hint { margin-top: 8px; }

.inst-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.inst-table th { text-align: left; color: var(--ink-soft); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.inst-table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.inst-table tbody tr:hover { background: rgba(var(--accent-rgb),.05); }
.col-status { width: 130px; }
/* Inter er lidt bredere end Segoe -> tidsstemplet "18 Aug 2026 16:37:59" loeb ud
   over nabocellen i den faste tabel. Lidt mindre + strammere + smallere padding
   saa HELE stemplet passer (Christian). tabular-nums holder cifrene lige brede. */
.col-time { width: 140px; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: -.015em; padding-left: 7px; padding-right: 7px; }
#stationsTable td.col-time, #stationsTable th.col-time,
#histTable td.col-time, #histTable th.col-time { padding-left: 7px; padding-right: 7px; }
/* Koerende station: STOP-cellen viser "ACTIVE" i klar groen med blid fade-puls -
   samme "det lever nu"-signal som den groenne ELAPSED-timer. Var foer en svag
   kursiv "active" der druknede. obpulse = opacity .35 <-> 1. */
.stop-active {
  color: var(--ok); font-weight: 700; font-style: normal; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  animation: obpulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .stop-active { animation: none; opacity: 1; } }
.col-dur { width: 100px; font-variant-numeric: tabular-nums; }
.col-ok { width: 64px; } .col-exp { width: 96px; text-align: right; }
.col-act { width: 230px; text-align: right; white-space: nowrap; }
/* width:1% kryber sammen om sit indhold, saa den ledige bredde fordeles ud
   paa tid, type og operatoer i stedet for at samle sig i et tomt hul foran
   knapperne. */
.stations-panel .col-act { width: 1%; }
.col-act2 { width: 300px; text-align: right; white-space: nowrap; }
.col-act .btn.small, .col-act2 .btn.small { margin-left: 6px; }
.table-scroll { overflow-x: auto; }
/* Naar en rulleboks inde i en modal (fx Cruise history) rammer bunden, maa
   rulningen IKKE fortsaette ud i siden bagved - saa "scroller baggrunden med".
   overscroll-behavior: contain stopper rulle-kaeden ved boksens kant. */
.hist-scroll { overscroll-behavior: contain; max-height: 62vh; overflow-y: auto; }
.badge {
  display: inline-block; min-width: 78px; text-align: center; padding: 4px 10px;
  border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  box-shadow: var(--sh-1);
}
.badge.on { background: var(--ok-soft); color: var(--ok); }
.badge.wait { background: var(--wait-soft); color: var(--warn); }
.badge.off { background: var(--surface-3); color: var(--ink-soft); }
/* Cast-baseret sensor (CTD/Ferrybox), tavs mellem cast: rolig accent-tone,
   IKKE roed. "standby" er den normale tilstand, ikke et problem. */
.badge.idle { background: rgba(var(--accent-rgb), .16); color: var(--accent); }
/* "Cast-based"-afkrydsning i instrument-opsaetningen */
.inst-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--ink-soft); cursor: pointer; line-height: 1.3; }
.inst-flag input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex: none; }
/* Blyanten ved station-id'et: stationen er rettet efter den blev gemt.
   Varm farve, fordi det er noget man skal LAEGGE MAERKE TIL, ikke et problem. */
.edited { color: var(--warn); cursor: help; font-weight: 700; }

/* Er stationen rettet, skifter Edit-knappen FARVE - og kun farve.
   Foer stod der ogsaa "✎2" i knappen, og saa blev den bredere end de andre
   Edit-knapper. Det skubbede hele raekken af knapper til venstre, saa listen
   blev ujaevn ned ad siden: signalet oedelagde det det sad i. Teksten er nu den
   samme i alle raekker, og bredden dermed ogsaa.
   Antallet, tidspunktet og hvem der rettede staar i knappens titel. Det er nok:
   man skal kunne SE at der er sket noget, og saa trykke for at faa detaljerne.
   Daempet, ikke skrigende - en rettet station er en oplysning, ikke et problem. */
.btn.small.has-edits {
  color: var(--warn);
  border-color: rgba(var(--warn-rgb), .38);
  background: rgba(var(--warn-rgb), .07);
}
.btn.small.has-edits:hover { background: rgba(var(--warn-rgb), .15); }

/* ---- Rettelseshistorik i Edit-boksen ----
   Staar OEVERST, foer felterne: man skal vide at en maaling er rettet foer man
   retter den igen. Foer stod det som én graa linje under knapperne.
   Tre spalter: hvornaar, hvad, og HVOR LANGT EFTER stationen. Den sidste er
   pointen - 20 minutter efter halet er en tastefejl der blev fanget, tre uger
   efter er en beslutning ved et skrivebord. */
.edit-audit { margin: 0 0 16px; }
/* Samme boks paa detaljekortet: ingen bund-margin (detSection styrer luften). */
.edit-audit.det-audit { margin: 0; }
.edit-audit.has-edits {
  border: 1px solid rgba(var(--warn-rgb), .40);
  background: rgba(var(--warn-rgb), .07);
  border-radius: 11px; padding: 11px 13px;
}
.ea-clean { font-size: 12px; color: var(--ink-soft); }
.ea-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--warn);
  letter-spacing: .01em;
}
.ea-mark { font-size: 15px; line-height: 1; }
.ea-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 10px;
  align-items: baseline; padding: 4px 0; font-size: 12px;
  border-top: 1px solid rgba(var(--warn-rgb), .16);
}
.ea-row:first-of-type { border-top: 0; }
/* Den oprindelige raekke er ANKERET. Roligt graa, saa rettelserne skiller sig ud
   fra den - ikke omvendt. */
.ea-orig { color: var(--ink-soft); }
.ea-when { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ea-orig .ea-when { color: var(--ink-soft); }
.ea-what { min-width: 0; }
.ea-after {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--warn); text-align: right;
}
.ea-orig .ea-after {
  color: var(--ink-soft); font-weight: 400; text-transform: uppercase;
  letter-spacing: .08em; font-size: 9.5px; opacity: .8;
}
/* Hvad der konkret blev aendret. Indrykket under sin egen raekke. */
.ea-diff {
  font-size: 11.5px; color: var(--ink-soft); padding: 1px 0 3px 150px;
  display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline;
}
.ea-diff b { color: var(--ink); font-weight: 600; }
/* Ingen opacity. Med 0,7 faldt kontrasten til 3,43 mod den flade der faktisk
   males (kortets gradient plus boksens ambre fyld) - under 4,5, og den gamle
   vaerdi er noget man kan have brug for at laese. Gennemstregningen siger
   allerede at den er afloest; den skal ikke ogsaa vaere svag. */
.ea-from { text-decoration: line-through; }
.ea-to { color: var(--warn); font-weight: 600; }

/* Smal skaerm: tiden faar sin egen linje, og indrykningen forsvinder. */
@container page (max-width: 620px) {
  .ea-row { grid-template-columns: 1fr auto; }
  .ea-row .ea-when { grid-column: 1 / -1; }
  .ea-diff { padding-left: 0; }
}
.active-row { background: rgba(var(--accent-rgb),.07); }
/* Arkiveret togt-raekke: daempet i listen (den er skjult som standard og vises
   kun via "Show archived"), klar op ved hover. */
tr.arch-row { opacity: .58; }
tr.arch-row:hover { opacity: 1; }
/* Knap-gruppe i panel-hovedet: "Show archived" + "New cruise" holdes samlet til hoejre. */
.ph-btns { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#btnShowArchivedCruises.on { border-color: var(--accent); color: var(--accent); }

/* ---- Cruise Control: "Finish cruise"-modalen (backup + arkivér, forklaret) ---- */
.fc-intro { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.5; }
.fc-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.fc-step-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .15); color: var(--accent); font-weight: 800; font-size: 13px; }
.fc-step-body { flex: 1 1 auto; min-width: 0; }
.fc-step-body h3 { margin: 2px 0 4px; font-size: 15px; }
.fc-desc { margin: 0 0 10px; color: var(--ink-soft); }
.fc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fc-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.fc-status { font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 11px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--line-soft); }
.fc-status.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.fc-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; color: var(--ink-soft); line-height: 1.45; }
.fc-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
/* Venlig hilsen foer man afslutter togtet. */
.fc-bye { margin: 18px 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink);
  padding: 14px 16px; border-radius: 12px; background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .22); }
.fc-foot { margin-top: 10px; }
/* "Finish cruise" i Actions-menuen faar accent-farve - det er DEN store handling. */
.ra-item.ra-finish .ra-label { color: var(--accent); }
/* Ét-kliks wrap-up til den faste mappe: fremhaevet boks med den store knap. */
.fc-wrap { border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .08);
  border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.fc-wrap-btn { width: 100%; justify-content: center; font-size: 14px; }
.fc-wrap-btn b { font-weight: 700; }
.fc-or { text-align: center; color: var(--ink-soft); font-size: 11.5px; margin-top: 10px;
  text-transform: uppercase; letter-spacing: .04em; }
.fc-link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0;
  font: inherit; text-decoration: underline; }
.fc-setfolder { margin-bottom: 10px; }
/* Genvej i cruise-skuffen naar der ikke er noget aktivt togt. */
.cd-new-cruise { margin-top: 8px; }

/* ===== Edit-historik: kompakt resume paa kortet + rig popup ===== */
.det-audit-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.det-audit-summary .das-txt { color: var(--ink-soft); font-size: 13.5px; }
.det-audit-summary .das-txt b { color: var(--ink); }
.det-audit-summary .das-btn { padding: 7px 13px; font-size: 13px; }
.eh-btns { display: flex; gap: 8px; }
.eh-count { color: var(--ink-soft); font-weight: 500; font-size: 15px; margin-left: 6px; }
.eh-body { display: flex; flex-direction: column; gap: 12px; max-height: 62vh; overflow-y: auto; padding: 2px; }
.eh-edit { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: rgba(var(--accent-rgb),.035); }
.eh-edit-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.eh-badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(var(--accent-rgb),.14); padding: 2px 8px; border-radius: 999px; }
.eh-by { color: var(--ink-soft); font-size: 13.5px; }
.eh-by b { color: var(--ink); }
.eh-when { margin-left: auto; color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.eh-diffs { display: flex; flex-direction: column; gap: 6px; }
.eh-diff { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13.5px; }
.eh-diff.muted { display: block; color: var(--ink-soft); font-style: italic; }
.eh-k { font-weight: 700; color: var(--ink); }
.eh-from { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(var(--danger-rgb),.6); }
.eh-arrow { color: var(--ink-soft); }
.eh-to { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .eh-diff { grid-template-columns: 1fr; gap: 3px; }
  .eh-arrow { display: none; }
}

.feed {
  font-family: "SF Mono", Consolas, monospace; font-size: 12.5px; height: 260px; overflow-y: auto;
  background: var(--code-bg); border-radius: 11px; padding: 11px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.45); border: 1px solid var(--line-soft);
}
.feed div { padding: 2px 0; border-bottom: 1px solid rgba(36,80,106,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .fi { color: var(--accent); font-weight: 600; }
.feed .ft { color: var(--ink-soft); }
/* "Stille" instrumenters seneste linje - flettet ind saa langsomme sendere
   (vejrstationen: hvert 20. sek) altid kan SES mellem de 15-i-sekundet. */
.feed .fq { opacity: .62; }
.feed .fq .fi { color: var(--warn); }
.err-list div { font-size: 13px; padding: 6px 0; color: var(--danger); border-bottom: 1px solid var(--line-soft); }

/* data tab */
.data-line { font-size: 14px; margin-bottom: 6px; }
.data-line b { font-family: Consolas, monospace; color: var(--accent); }
.filesize-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.filesize-row label { font-size: 14px; color: var(--ink); }
.filesize-row input {
  padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); color: var(--ink); box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}

/* cruise form */
.cruise-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cruise-form .pf-wide { grid-column: 1 / -1; }
.cruise-form input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); font-size: 15px; color: var(--ink); font-family: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}

/* ---- Download data-modalen ---- */
.dl-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.dl-tab {
  flex: 1; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  background: var(--input-bg); color: var(--ink-soft);
  border: 1px solid var(--line-soft); font-size: 13.5px; font-weight: 600;
}
.dl-tab.on { background: rgba(var(--accent-rgb), .14); color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
/* Forklarings-linjen under knap-teksten: mindre, dæmpet, egen linje. */
.dl-tab { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; line-height: 1.25; }
.dl-tab-sub { font-size: 10.5px; font-weight: 500; color: var(--ink-soft); opacity: .85; }
.dl-tab.on .dl-tab-sub { color: var(--ink-soft); opacity: .95; }
.dl-pane label { font-size: 12px; color: var(--ink-soft); display: block; margin: 12px 0 5px; }
.dl-pane select, .dl-pane input[type="date"] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); font-size: 15px; color: var(--ink); font-family: inherit;
}
.dl-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dl-dates label { margin-top: 0; }
.dl-check {
  display: flex !important; align-items: center; gap: 8px; margin: 16px 0 4px !important;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.dl-check input { width: auto; accent-color: var(--accent); }
.dl-pane .btn.primary { margin-top: 16px; width: 100%; }
/* Download-vindue: intro, type/hal-vaelger, faelles valg, ét Download-flow. */
.dl-intro { margin: 0 0 12px; }
.dl-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
@media (max-width: 560px) { .dl-pick-grid { grid-template-columns: 1fr; } }
.dl-pick-h { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
/* Piller, ikke afkrydsningsfelter. To grunde:
   1) En pille ER knappen - man rammer hele fladen, ogsaa med en fed finger
      paa en rullende skaerm. Et 13 px afkrydsningsfelt er et praecisionsmaal.
   2) Ingen ombrydning. Foer skiftede skriften til fed naar man valgte, saa
      pillen blev bredere, og HELE raekken sprang om i et nyt moenster - man
      klikkede paa 103 og saa 104 flytte sig. Skriften er nu fed hele tiden
      (kun farven skifter), og hal-numre har fast bredde. */
.dl-chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
/* .dl-chips2 .dl-chip2, ikke bare .dl-chip2: pillen ER et <label>, og
   ".dl-pane label" staar med display:block og 12px topmargen laengere oppe i
   filen. Med ét klassenavn tabte reglen, pillerne blev blokke i fuld bredde
   og fik 17 px luft ovenpaa hinanden. To klassenavne vinder. */
.dl-chips2 .dl-chip2 {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; margin: 0; padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2, rgba(140,160,190,.06));
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-soft);
  user-select: none; transition: color .12s, border-color .12s, background .12s;
}
#dlHauls .dl-chip2 { min-width: 62px; font-variant-numeric: tabular-nums; }
.dl-chips2 .dl-chip2:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--ink); }
/* Selve feltet bliver liggende (det er stadig det der laeses ved download),
   men usynligt - og stadig med tastaturfokus. */
.dl-chip2 input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.dl-chips2 .dl-chip2:has(input:checked) {
  background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .6); color: var(--accent);
}
.dl-chips2 .dl-chip2:has(input:focus-visible) {
  outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
}
#dlPickCount { margin-top: 20px; }
.dl-opts { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* "Download ZIP" laa KLISTRET op ad afkrydsnings-teksten: knappen er soeskende
   til .dl-opts (ikke inde i .dl-pane), saa ".dl-pane .btn.primary { margin-top }"
   ramte den aldrig. Giv den luften her - og lidt ekstra, for det er den knap der
   sætter en stor download i gang. */
.dl-opts + .btn.primary { margin-top: 18px; }
/* ... og status-linjen ("Downloaded.") skal heller ikke klistre til knappen. */
.dl-opts + .btn.primary + .hint { margin-top: 10px; }
.dl-sub { color: var(--ink-soft); font-size: 12px; }
.dl-check.dl-hide { display: none !important; }   /* vinder over .dl-check display:flex !important */

/* Edit cruise-modalen: bredere kort og TO kolonner i stedet for én høj søjle.
   Samme .pf/.cruise-form som "New cruise", bare skaleret til en modal. */
/* .modal-card.cruise-edit-card, ikke bare .cruise-edit-card: ".modal-card"
   saetter width:460px LAENGERE NEDE i filen med samme specificitet og ville
   ellers vinde paa kilderaekkefoelge. To klasser hoejner specificiteten. */
.modal-card.cruise-edit-card { width: 720px; }
.cruise-edit-card .cruise-form { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
/* .cruise-form input stylede kun input - modalen har også en textarea (noter). */
.cruise-edit-card .cruise-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); font-size: 15px; color: var(--ink); font-family: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28); resize: vertical;
}
/* Smal skærm: fald tilbage til én søjle, så felterne ikke klemmes. */
@media (max-width: 680px) {
  .modal-card.cruise-edit-card { width: 440px; }
  .cruise-edit-card .cruise-form { grid-template-columns: 1fr; }
}

/* station types editor */
.types-list { display: flex; flex-direction: column; gap: 10px; }
.type-item {
  display: grid; grid-template-columns: 170px 1fr auto auto; gap: 16px; align-items: center;
  background: var(--surface-3); padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--line-soft); box-shadow: var(--sh-1);
}
.type-item input {
  padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); color: var(--ink); font-size: 14px; width: 100%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.28);
}
.type-item .name-in { font-weight: 700; color: var(--accent); }
/* Forklaring OVER raekkerne, saa "Auto haul no."-afkrydsningen ikke staar
   uden kontekst. */
.types-legend {
  display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 14px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(var(--ok-rgb), .07); border: 1px solid rgba(var(--ok-rgb), .28);
  font-size: 12.5px; line-height: 1.6; color: var(--ink);
}
.types-legend .tl-ico { font-size: 20px; flex: none; line-height: 1.2; }
/* "Auto haul no."-afkrydsning pr. gear code. Selve afkrydsningen bliver en
   pille med luft omkring, saa den er nem at ramme og ikke klemmer teksten. */
.type-haul {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 12.5px; color: var(--ink-soft); cursor: pointer; user-select: none;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: var(--input-bg); transition: color .12s, border-color .12s, background .12s;
}
.type-haul:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .4); }
.type-haul:has(input:checked) {
  color: var(--ok); border-color: rgba(var(--ok-rgb), .5); background: rgba(var(--ok-rgb), .12);
}
.type-haul input { width: auto !important; margin: 0; cursor: pointer; accent-color: var(--ok); }

/* ===== Haul number (traeknummer) ===== */
.col-haul { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* JAEVN KOLONNEFORDELING. Foer havde tabellen table-layout:auto, saa den ledige
   bredde paa en bred skaerm samlede sig i de bredeste kolonner (tiderne blev 258
   px med store huller). Med fixed layout + procent-bredder fyldes bredden UDEN
   skaeve huller. Skjulte kolonner (container queries) fordeler deres andel jaevnt
   paa resten. Procenterne summer til 100. */
/* "›"-kolonnen (col-act) er FJERNET fra stationstabellen - den stod naesten
   altid tom. De 7% den brugte er fordelt ud paa resten, saa alt faar mere luft.
   Procenterne summer stadig til 100.
   #histTable (Cruise history) viser de SAMME raekker (stationRow), saa den faar
   PRAECIS samme kolonnebredder og celleskel - ellers stod tal under forkerte
   overskrifter og den sidste kolonne "afsluttedes uheldigt" uden kant. */
#stationsTable, #histTable { table-layout: fixed; width: 100%; }
/* Gulv, saa tabellen SCROLLER vandret i stedet for at "kollapse ind i sig selv"
   i et smalt/ikke-fuldskaerms vindue (.table-scroll har allerede overflow-x:auto).
   min-width kan aldrig goere noget smallere -> i fuldskaerm er 100% bredere end
   dette, saa reglen er inaktiv og fuldskaerm-layoutet er uaendret. */
#stationsTable, #histTable { min-width: 760px; }
#stationsTable .col-no,  #histTable .col-no  { width: 8%; }
#stationsTable .col-id,  #histTable .col-id  { width: 12%; }
#stationsTable .col-type, #histTable .col-type { width: 8%; }
#stationsTable .col-haul, #histTable .col-haul { width: 6%; }
#stationsTable .col-op,  #histTable .col-op  { width: 9%; }
#stationsTable .col-time, #histTable .col-time { width: 14%; }
#stationsTable .col-dur, #histTable .col-dur { width: 8%; }
#stationsTable .col-ok,  #histTable .col-ok  { width: 8%; }
#stationsTable .col-cmt, #histTable .col-cmt { width: 7%; }
#stationsTable .col-att, #histTable .col-att { width: 6%; }
/* Tynde lodrette skel mellem soejlerne - saa de tyndt-udfyldte kolonner
   (Attention, Comment) ligner celler i et gitter i stedet for et tomt omraade. */
#stationsTable th, #stationsTable td,
#histTable th, #histTable td { border-right: 1px solid rgba(150, 180, 210, .17); }   /* .09 -> .17: en anelse mere markant (Christian) */
#stationsTable th:last-child, #stationsTable td:last-child,
#histTable th:last-child, #histTable td:last-child { border-right: none; }
/* Ikon-kolonnerne (Comment + Attention): centreret indhold OG hoved, saa de to
   staar ens. */
#stationsTable .col-cmt, #stationsTable th.col-cmt,
#histTable .col-cmt, #histTable th.col-cmt,
#histTable .col-att, #histTable th.col-att { text-align: center; }
th.col-cmt { color: var(--ink-soft); font-weight: 700; }
.col-cmt .cmt-btn, .col-cmt a, .col-cmt button { margin: 0 auto; }
.req-star { color: var(--danger); font-weight: 800; }
/* Hal-nummeret taelles automatisk. "auto"-maerket + hint fortaeller at feltet
   fyldes af sig selv, saa "*" (paakraevet, tast selv) ville vaere misvisende. */
.hf-auto {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok); background: rgba(var(--ok-rgb), .14);
  border: 1px solid rgba(var(--ok-rgb), .4); border-radius: 999px;
  padding: 1px 7px; vertical-align: middle; margin-left: 6px;
}
.hf-auto-hint { margin-top: 5px; font-size: 11px; color: var(--ink-soft); line-height: 1.45; }

/* instruments */
.inst-config { display: flex; flex-direction: column; gap: 12px; }
.inst-row {
  display: grid; grid-template-columns: 1.2fr .8fr .7fr .9fr .9fr .7fr .9fr auto; gap: 10px; align-items: end;
  background: var(--surface-3); padding: 14px; border-radius: 12px; border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
}
.inst-row input, .inst-row select {
  padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); font-size: 14px; width: 100%; color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.28);
}
.inst-row .field-label { font-size: 10px; color: var(--ink-soft); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.inst-row-actions { display: flex; align-items: center; gap: 10px; }
.icon-del {
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line-soft);
  border-radius: 9px; width: 34px; height: 34px; cursor: pointer; font-size: 14px;
  box-shadow: var(--sh-1); transition: all .15s; flex: 0 0 auto;
}
.icon-del:hover { color: var(--danger); border-color: rgba(239,107,94,.45); background: var(--danger-soft); }
.icon-del:active { transform: translateY(1px); }
/* Spaendt skraldespand: den skal vaere umulig at overse, og bred nok til
   ordet - en 34px firkant ville klippe "Sure?" over. */
.icon-del.armed {
  width: auto; padding: 0 13px; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--danger); border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,107,94,.22);
}
.icon-del.trash { font-size: 15px; line-height: 1; }
.type-del {
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line-soft);
  border-radius: 9px; width: 34px; height: 34px; cursor: pointer; font-size: 14px; box-shadow: var(--sh-1);
}
.type-del:hover { color: var(--danger); border-color: rgba(239,107,94,.45); background: var(--danger-soft); }

/* compact on/off switch (replaces the raw checkbox).
   `.form-grid label { display:block }` would otherwise flatten the switch, so
   the selector is repeated with the same weight to keep it a flex row. */
.switch, .form-grid label.switch, .panel-head label.switch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  user-select: none; margin: 0; width: auto;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  display: inline-block;   /* width has no effect on an inline element */
  width: 40px; min-width: 40px; height: 22px; border-radius: 999px;
  background: var(--input-bg); border: 1px solid var(--line-soft);
  position: relative; transition: all .18s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35); flex: 0 0 auto;
}
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-soft); transition: all .18s; box-shadow: var(--sh-1);
}
.switch input:checked + .switch-track { background: var(--accent-2); border-color: var(--accent); }
.switch input:checked + .switch-track .switch-knob { left: 20px; background: #eafffb; }
.switch-label { font-size: 13px; color: var(--ink-soft); }
.switch input:checked ~ .switch-label { color: var(--accent); font-weight: 600; }

/* ---- vertical rhythm: everything on a row shares one baseline ---- */
.panel-head, .head-right, .admin-actions, .filesize-row, .toggle-row,
.inst-row-actions, .cb-main, .cruise-banner, .wc-head, .an-chart-head,
.topbar, .clocks, .switch, .radio { align-items: center; }
.inst-table td, .inst-table th { vertical-align: middle; }
.inst-table td .btn.small { vertical-align: middle; }
.card { display: flex; flex-direction: column; justify-content: center; }
.wc-head { align-items: flex-start; }
/* ---- Overskrift og indhold centreret sammen, i ALLE tabeller ----
   Foer var alt venstrestillet. Overskrift og celle var teknisk set justeret ens,
   men med en lang overskrift over en kort vaerdi - "SUCCESSFUL" over "Yes" -
   laeste de ikke som en enhed: vaerdien sad i den ene ende af en bred kolonne og
   overskriften fyldte resten. Centreret bliver hver kolonne én blok man kan
   scanne ned ad.
   Gaelder .inst-table (stationer, togter, instrumenter) og .det-table
   (detaljevinduet). .snap-table stod ogsaa her; den hoerte til huskesedlerne i
   fladen og findes ikke laengere. */
.inst-table th, .inst-table td,
.det-table th, .det-table td { text-align: center; }

/* UNDTAGELSE 1 - tal. De skal dele samme kant, ellers kan man ikke sammenligne
   dem ned ad kolonnen: 9,5 og 12,25 ville staa forskudt om de var centreret.
   Overskriften foelger tallene, saa den ikke svaever vaek fra dem. */
.col-num, th.col-num, td.col-num { text-align: right; font-variant-numeric: tabular-nums; }

/* UNDTAGELSE 2 - lang fritekst. Togtnavne, ledere og noter er af meget
   forskellig laengde, og centreret ville hver raekke begynde et nyt sted.
   Man laeser dem, man scanner dem ikke. */
.inst-table td.col-text, .inst-table th.col-text,
.det-table td.col-text, .det-table th.col-text,
.det-table td.det-file { text-align: left; }

/* UNDTAGELSE 3 - knapperne yderst til hoejre.
   Disse kolonner staar allerede med text-align:right, men KUN som ".col-act"
   - én klasse. Reglen ovenfor er ".inst-table td" - klasse OG element - og
   vinder derfor paa specificitet, uanset raekkefoelgen i filen. Uden dette
   sprang alle handlingsknapperne ind i midten af deres kolonne. */
.inst-table td.col-act, .inst-table th.col-act,
.inst-table td.col-act2, .inst-table th.col-act2,
.inst-table td.col-exp, .inst-table th.col-exp { text-align: right; }
.inst-table th, .inst-table td { line-height: 1.45; }
#anAverages td:first-child { color: var(--ink); }
#anAverages td:last-child, #anAverages th:last-child { text-align: left; width: 70px; padding-left: 18px; }

/* version badge */
.ver-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; vertical-align: middle;
  padding: 2px 8px; border-radius: 999px; margin-left: 2px;
  background: rgba(var(--accent-rgb),.16); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.3);
}
.logo .ver-badge { font-size: 12px; }
/* Versionen i topbaren: diskret, men ALTID med paa et skaermbillede. Tom foer
   version.json er hentet - saa staar der ingenting frem for noget forkert. */
.topbar .credit .ver-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; margin-left: 7px;
  background: rgba(var(--accent-rgb), .13); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .26);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.topbar .credit .ver-badge:empty { display: none; }
/* which old Excel sheet a chart corresponds to */
.an-src { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

/* view-only: no station running */
.station-idle {
  font-size: 22px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em;
  display: flex; align-items: center; min-height: 92px;
}

/* station analysis */
.modal-card.xwide { width: min(1360px, calc(100vw - 40px)); }
.an-summary { margin-bottom: 14px; }
.an-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.an-chip {
  font-size: 12px; color: var(--ink-soft); background: var(--input-bg);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 13px;
  box-shadow: var(--sh-1);
}
.an-chip b { color: var(--accent); }
/* Én graf ad gangen (grafvaelgeren styrer hvilken) -> enkelt spalte, fuld bredde.
   Var før et 2-spaltet gitter da alle grafer laa fremme paa én gang. */
.an-charts { display: flex; flex-direction: column; gap: 16px; }
.an-hide { display: none !important; }

/* Grafvaelger-raekken: én knap pr. graf (venstre) + Print all / View data (hoejre). */
.an-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.an-tabs-l { display: flex; flex-wrap: wrap; gap: 6px; }
.an-tabs-r { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.an-tab { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 13px; cursor: pointer; }
.an-tab:hover { border-color: var(--accent); }
.an-tab.is-on { background: var(--accent); color: #04222a; border-color: var(--accent); }

/* CTD-kilde-vaelger (SeaSave profile / Mini-SIS profile) - samme pille-tabs. */
.ctd-src-tabs { display: inline-flex; gap: 6px; }
.ctd-src { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 13px; cursor: pointer; }
.ctd-src:hover { border-color: var(--accent); }
.ctd-src.is-on { background: var(--accent); color: #04222a; border-color: var(--accent); }
.ctd-mount { position: relative; }

/* View data-popup: fuld tabel med sticky hoved, foerste kolonne og bundlinje. */
/* Panelet skal bruge skaermen: tabel OG grafer skal vaere fremme samtidig.
   xwide alene raekker ikke naar der er to spalter. */
/* TO klasser slaar én: .modal-card.xwide (1360 px) vandt over .antbl-card, saa
   panelet blev staaende i den gamle bredde - og grafspalten havde ingen plads
   at vaere i. Derfor begge klasser her, saa reglen vejer det samme og vinder
   paa at staa sidst. */
.modal-card.xwide.antbl-card,
.antbl-card { max-height: calc(94vh / var(--ui-zoom, 1)); display: flex; flex-direction: column;
  width: min(1820px, 97vw); max-width: none;
  /* Navngivet, saa forespoergslen nedenfor rammer NETOP dette kort og ikke en
     tilfaeldig forfaeder en dag faar container-type. Bredden er sat eksplicit
     ovenfor, saa inline-size-inddaemningen ikke kan klemme noget. */
  container: antblCard / inline-size; }
.antbl-bar { margin: 8px 0 6px; align-items: center; }
.antbl-rows { margin-right: auto; color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
/* #antblBody: yderste beholder. Holder de TO tabeller (True | Filtered) side om
   side og ruller vandret hvis de tilsammen er bredere end vinduet. Rammen sidder
   nu paa hver tabel (.antbl-scroll2), ikke her. */
.antbl-scroll { overflow: auto; flex: 1; min-height: 0; }
.antbl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
.antbl-table th, .antbl-table td { padding: 4px 10px; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.antbl-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: right; }
.antbl-table th.col-t, .antbl-table td.col-t { text-align: left; position: sticky; left: 0; background: var(--surface-2); z-index: 1; }
.antbl-table thead th.col-t { z-index: 3; }
.antbl-table tbody td { text-align: right; }
.antbl-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2);
  font-weight: 700; border-top: 2px solid var(--accent); }
/* Bund-VENSTRE hjoerne (Average-etiketten) skal klaebe BAADE nedad og til venstre,
   ellers ruller den vaek naar tabellen er baade hoej og bred. Hoejere z end baade
   raekke- og tfoot-cellerne. */
.antbl-table tfoot td.col-t { position: sticky; left: 0; bottom: 0; z-index: 4; background: var(--surface-2); }
#anTableModal { z-index: 200; }
/* Clearance-markering: raekker filteret ville fjerne dæmpes + streges over, saa
   "hullerne" springer i oejnene (til sammenligning med det gamle Excel). */
.antbl-clr { display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.antbl-clr input[type="checkbox"] { accent-color: var(--accent); }
.antbl-thr { width: 56px; padding: 2px 6px; border-radius: 7px; border: 1px solid var(--line-soft);
  background: var(--input-bg); color: var(--ink); font-variant-numeric: tabular-nums; }
/* Clearance-taerskel i Scanmar-bjaelken (synlig ved den rensede download). */
.sc-clr-thr { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft);
  font-size: 12px; white-space: nowrap; }
.sc-clr-thr input { width: 60px; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--line-soft);
  background: var(--input-bg); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-clr-thr input:disabled { opacity: .55; cursor: not-allowed; }
/* ---- To tabeller: TRUE (alle data) | FILTERED (clearance-renset) side om side.
   Praecis det man foer gjorde i Excel - raa vs renset ved siden af hinanden. ---- */
/* RENSE-TILSTAND: vinduet foelger indholdet. Tabellen faar sin naturlige bredde
   (width:auto) i stedet for at blive strakt ud, saa tid og tal staar taet nok
   sammen til at man kan foelge en raekke med oejet - det er hele forudsaetningen
   for at kunne klikke den rigtige fra. */
/* HER LAA FEJLEN. "width: min(760px, 94vw)" er fra dengang rense-tilstanden
   var et SMALT vindue med kun en tabel i. Da panelet blev bygget om til data
   til venstre og grafer til hoejre, blev reglen staaende - og fordi den er en
   ID-selektor (1-2-1) slog den .modal-card.xwide.antbl-card (0-3-0) uden at
   noget sagde fra. Resultatet: kortet blev 760 px netop naar man RENSER, altsaa
   i den eneste tilstand panelet findes for. Venstre spalte kraever 560, saa
   grafspalten fik 119 px - den saa tom ud fordi den VAR klemt - og kortet
   flød ud over sin egen kant med en vandret rullebjaelke.
   Bredden bestemmes ét sted nu: .antbl-card. */
#anTableModal.antbl-cleaning .antbl-table { width: auto; min-width: 100%; }
#anTableModal.antbl-cleaning .antbl-table th.col-t,
#anTableModal.antbl-cleaning .antbl-table td.col-t { width: 1%; padding-right: 26px; }
#anTableModal.antbl-cleaning .antbl-scroll2 { max-height: 52vh; }

.antbl-split { display: flex; gap: 16px; align-items: flex-start; }
.antbl-split-1 { display: block; }
.antbl-one { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
.antbl-cap { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 1px 2px 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.antbl-cap-t { white-space: nowrap; }
.antbl-cap-n { font-weight: 400; color: var(--ink-soft); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* Hver tabel ruller for sig selv (baade lodret og vandret), saa dens sticky hoved,
   foerste kolonne OG bund-summen (Average/Min/Max) altid er synlige - man skal ikke
   scrolle helt ned for at se gennemsnittet. To tabeller a 46vw passer i xwide-modalen. */
.antbl-scroll2 { overflow: auto; max-height: 58vh; max-width: 46vw;
  border: 1px solid var(--line-soft); border-radius: 10px; }
.antbl-split-1 .antbl-scroll2 { max-width: 100%; }
/* "Off bottom" (clearance over taersklen): de raekker FILTERED dropper. Kun i TRUE-
   tabellen, gult - saa man SER hvad der ryger, uden at det er slettet. Clearance-
   vaerdien selv er fremhaevet. Ingen gennemstregning (tallene skal kunne laeses). */
.antbl-table tr.antbl-off td { background: rgba(240, 169, 79, .13); }
.antbl-table tr.antbl-off td.col-t { background: var(--surface-2); }   /* sticky kolonne: hold uigennemsigtig */
.antbl-off-v { color: #e0912f; font-weight: 700; }

/* Summary som ALTID-synlige vaerdi-kort over tabellen (Christian: byg summary ind
   som cards) - saa gennemsnittet ses uden at scrolle. tfoot-raekkerne i tabellen
   skjules paa SKAERMEN (de er stadig i DOM'en og kommer med i PRINT som sum-raekke). */
.antbl-scroll2 tfoot { display: none; }
.antbl-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
/* NAVNESAMMENSTOED. Den her hed ogsaa .antbl-card - praecis som selve
   VINDUET i index.html - saa modalen fik statistikkortets 5 px padding, ramme
   og baggrund oveni sine egne regler. Det var en del af grunden til at kortet
   saa klemt ud. To ting med samme navn er ikke en stilfejl, det er en fælde
   der venter paa den naeste der roerer én af dem. */
/* KOLONNE-flex + margin-top:auto paa range-pillen: saa staar "no range"-pillerne
   paa SAMME linje paa tvaers af kortene, ogsaa naar et kort har en Include-knap
   og naboen ikke har (Christian 28/8: "knapperne er ikke i samme row"). */
.antbl-stat { display: flex; flex-direction: column; align-items: stretch; }
.antbl-stat .antbl-filt { margin-top: auto; }
.antbl-stat .antbl-inkl { margin-top: 5px; margin-bottom: 5px; }
.antbl-stat { flex: 0 0 auto; min-width: 74px; padding: 5px 10px 6px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 9px; }
.antbl-stat-k { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; }
.antbl-stat-avg { font-size: 17px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.antbl-stat-u { font-size: 10px; font-weight: 400; color: var(--ink-soft); }   /* "avg"-mærkat */
.antbl-stat-mm { font-size: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ÉN graf: lad graf og tal dele bredden i stedet for at efterlade en tom
   halvdel med tabellen alene nedenunder (saettes af renderAnalysis). */
.an-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px; align-items: start; }
.an-pair > #anSummary { grid-column: 1 / -1; }
.an-pair > #anCharts { grid-template-columns: 1fr; }
.an-pair > #anAverages { min-width: 0; }
@container page (max-width: 900px) { .an-pair { grid-template-columns: 1fr; } }
.an-chart {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 12px; box-shadow: var(--sh-2);
  /* Egen container, saa @container nedenfor maaler GRAFENS bredde. Uden dette
     maaler den naermeste forfaeder (#app / .page) - altsaa hele sidens bredde -
     og knapperne ville stable sig paa et helt forkert tidspunkt. */
  container-type: inline-size; container-name: anchart;
}
.an-chart-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent); }
.an-chart canvas { width: 100%; display: block; border-radius: 8px; }
/* Fit: hoejden saettes af anFitApply() i js (den skal kende vinduet), men rullet
   slaas fra her, saa der ikke bliver en rullebjaelke paa vejen. */
:root.an-fit .an-chart { overflow: hidden; }
.an-fit-btn.is-on { border-color: var(--accent); color: var(--accent); }
/* Laaste udtraek: de er der stadig, men de siger hvorfor de ikke kan bruges endnu. */
.btn.is-locked, .btn:disabled { opacity: .45; cursor: not-allowed; }
.dx-row.dx-locked { opacity: .45; pointer-events: none; }

/* ---- Betjening over grafen ----
   Ligger som knapper, ikke i en menu. Det her vindue er det man kigger
   allermest paa, og "kan man slaa en linje fra?" skal kunne besvares ved at se
   paa skaermen - ikke ved at vide det i forvejen. Derfor en synlig raekke med
   farveprikker, og ikke et tandhjul. */
.an-tools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 9px;
  padding: 6px 7px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.an-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
/* Titel og handlinger i hovedet, saa vendeknappen ikke ligger i chip-raekken */
.an-chart-head { align-items: flex-start; }
.an-title { min-width: 0; }
.an-head-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.an-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.45;
  padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-3); color: var(--ink);
  transition: opacity .12s, border-color .12s, background .12s;
}
.an-chip:hover { border-color: var(--accent); }
.an-swatch {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.an-ax { color: var(--ink-soft); font-weight: 400; margin-left: 1px; }

/* Gennemstregning betyder "denne linje er SKJULT paa grafen - klik for at vise
   den igen". Det gaelder KUN de klikbare legende-knapper (button.an-chip). De
   informative taelle-chips (Scanmar: 2736 osv.) er <span> og maa ALDRIG streges
   over - der betoed stregen ingenting og forvirrede bare.
   Kun daempet er ikke nok paa en bro i dagslys, derfor baade daempet OG streg. */
button.an-chip:not(.is-on) {
  opacity: .42; text-decoration: line-through;
  background: none; border-style: dashed;
}
button.an-chip:not(.is-on) .an-swatch { background: var(--ink-soft) !important; }

.an-flip, .an-reset {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.45;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none;
  border: 1px solid var(--line); background: var(--surface-3); color: var(--ink-soft);
}
.an-flip:hover, .an-reset:hover { border-color: var(--accent); color: var(--ink); }
.an-flip.is-on {
  background: var(--accent); color: #04222a; border-color: transparent;
}
.an-flip-ico { font-size: 13px; line-height: 1; }

/* Smal graf: knapperne faar hele bredden, og vendeknappen falder under. */
/* Smal graf: titlen og handlingerne kan ikke staa paa samme linje. */
@container anchart (max-width: 400px) {
  .an-chart-head { flex-direction: column; gap: 7px; }
  .an-head-actions { width: 100%; }
}
.an-h2 { font-size: 16px; color: var(--accent); margin: 20px 0 10px; }
.wc-canvas { width: 100%; display: block; margin-top: 14px; border-radius: 9px; }

/* read-only editors for a view-only client */
.readonly input, .readonly select { opacity: .75; cursor: not-allowed; }

/* Station Rebuilder */
.file-btn { position: relative; overflow: hidden; }
.rb-select {
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); color: var(--ink); font-size: 14px;
  min-width: 320px; max-width: 100%; box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.rb-summary { margin-top: 14px; }
.rb-in {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--input-bg); color: var(--ink); font-size: 13px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}
.rb-in:disabled { opacity: .75; cursor: not-allowed; }
.col-type { width: 100px; } .col-op { width: 100px; }
.col-dt { width: 185px; }
#rbStations .col-no { width: 108px; }

/* Haul data fields (the card by the winch panel) */
.haul-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 18px; margin-top: 16px; }
.haul-field label {
  display: flex; align-items: center; gap: 7px; margin: 0 0 5px;
  font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase;
}
.haul-field .hf-unit { color: var(--accent); text-transform: none; letter-spacing: 0; }
.haul-field .hf-off {
  font-size: 9.5px; padding: 2px 7px; border-radius: 999px; text-transform: none;
  background: var(--wait-soft); color: var(--warn); letter-spacing: 0;
}
.haul-field input { width: 100%; }
.hf-hint {
  font-size: 11px; color: var(--ink-soft); margin-top: 6px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-auto { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.hf-auto:hover { filter: brightness(1.2); }
.haul-row { grid-template-columns: auto 150px 1fr 70px 150px auto; }
.haul-row .hf-unit-in { text-align: center; }

/* GPS / navigation window */
.gps-panel .panel-head { margin-bottom: 12px; }
.gps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.gps-val {
  background: var(--input-bg); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 11px 13px; box-shadow: inset 0 2px 6px rgba(0,0,0,.30);
}
.gps-val .wc-num { font-size: 19px; }

/* Live inputs: hvilken COM-port fodrer hvert nav-/Dana Live-felt (read-only) */
.li-panel .panel-head { margin-bottom: 10px; }
.li-wrap { overflow-x: auto; }
.li-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.li-table th {
  text-align: left; font-weight: 600; color: #8ba0b3;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.li-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.li-table tbody tr:last-child td { border-bottom: 0; }
.li-table .li-field { font-weight: 600; }
.li-table .li-port { color: #7ee7f2; font-variant-numeric: tabular-nums; }
.li-table .li-tag { color: #8ba0b3; }
.li-table .li-val { text-align: right; font-variant-numeric: tabular-nums; }
.li-table .li-age { text-align: right; color: #8ba0b3; font-variant-numeric: tabular-nums; }
.li-table tr.li-stale td { color: #e0a44a; }
.li-table tr.li-stale .li-port { color: #e0a44a; }

/* WinCollect 2.0 panel */
.wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; align-items: start; }
.wc-card { margin-bottom: 0; }
/* Panel titles & visibility rows. The switch needs a fixed track width or the
   grid squeezes it to nothing and the knob lands on top of the input. */
.wc-title-row { grid-template-columns: 52px minmax(0, 1fr) 170px; align-items: center; }
.wc-title-row .switch { justify-self: start; }
.wc-title-row .switch-track { width: 40px; min-width: 40px; }
.wc-title-row .wc-file { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Filnavnet skrives med samme skrift som filen selv har - saa man kan se at
   det ER et filnavn og ikke en overskrift. */
.wc-file-input {
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  text-align: right;
}
/* prominent simulate switch in the WinCollect header */
.sim-switch { margin-right: 4px; }
.sim-switch .switch-label { white-space: nowrap; }

/* WIDE: values in a row beside the chart - uses the width of a widescreen
   monitor instead of stacking everything vertically. */
.wc-grid.layout-wide { grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); }
.layout-wide .wc-body { display: grid; grid-template-columns: minmax(150px, 0.85fr) 1.6fr; gap: 14px; align-items: stretch; }
.layout-wide .wc-values { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); align-content: start; }
.layout-wide .wc-canvas { margin-top: 0; height: 100%; min-height: 150px; }
.layout-wide .wc-val { padding: 8px 10px; }
.layout-wide .wc-num { font-size: 18px; }

/* COMPACT: no charts at all - maximum instruments on one screen. */
/* 225 og ikke 270: med 270 blev der plads til fem kort paa en 1472px bred
   flade, og det sjette faldt ned paa en linje for sig selv med fire tomme
   pladser ved siden af. Seks profiler er et fast tal - de skal kunne staa
   paa række. */
.wc-grid.layout-compact { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.layout-compact .wc-values { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.layout-compact .wc-val { padding: 7px 9px; }
.layout-compact .wc-num { font-size: 16px; }
.layout-compact .wc-card { padding: 14px; }

/* TALL: the original stacked look. */
.wc-grid.layout-tall { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

/* Equal-height cards: the grid rows are uniform and each card fills its cell,
   so a panel with 8 values does not make its neighbour look stunted. */
.wc-grid { grid-auto-rows: 1fr; }
.wc-card { display: flex; flex-direction: column; height: 100%; }
.wc-card .wc-body { flex: 1 1 auto; min-height: 0; }
.layout-wide .wc-canvas, .layout-tall .wc-canvas { height: 100%; min-height: 150px; }

/* FOCUS: one panel at a time, filling the width - like flicking through cards
   on a phone, with a position indicator underneath. */
.wc-grid.layout-focus { grid-template-columns: 1fr; }
.layout-focus .wc-card { min-height: calc(62vh / var(--ui-zoom, 1)); }
.layout-focus .wc-body { display: grid; grid-template-columns: minmax(190px, 0.7fr) 2fr; gap: 20px; }
.layout-focus .wc-values { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-content: start; }
.layout-focus .wc-num { font-size: 30px; }
.layout-focus .wc-label { font-size: 11.5px; }
.layout-focus .wc-card h2 { font-size: 20px; }
.layout-focus .wc-canvas { min-height: 280px; }

.focus-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.focus-dots { display: flex; gap: 8px; align-items: center; }
.focus-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line); transition: all .18s;
  box-shadow: var(--sh-1);
}
.focus-dot.on { background: var(--accent); border-color: var(--accent); width: 26px; border-radius: 999px; }

/* segmented layout switch */
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--input-bg);
  border: 1px solid var(--line-soft); border-radius: 10px; box-shadow: inset 0 2px 5px rgba(0,0,0,.3); }
.seg button {
  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; transition: all .15s;
}
.seg button.on { background: var(--surface-3); color: var(--accent); font-weight: 600; box-shadow: var(--sh-1); }

/* field-name editor */
.wc-fields { display: flex; flex-direction: column; gap: 14px; }
.wc-fieldset { background: var(--surface-3); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 12px; box-shadow: var(--sh-1); }
.wc-fieldset-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 9px;
  display: flex; align-items: baseline; gap: 9px; }
.wc-field-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 52px; gap: 8px;
  align-items: center; margin-bottom: 7px; }
.wc-field-row input {
  padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--input-bg); color: var(--ink); font-size: 13px; width: 100%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}
.wc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wc-head h2 { margin: 0 0 3px; }
.wc-file { font-family: Consolas, monospace; font-size: 11.5px; color: var(--ink-soft); }
.wc-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.wc-val {
  background: var(--input-bg); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 10px 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,.30);
  /* Kolonne, saa tallet kan skubbes til BUNDEN. Uden det sad tallet lige under
     labelen, og labels har forskellig hoejde: "WIND SPEED m/s" fylder to linjer,
     "HUMIDITY %" én - saa tallene stod i forskellig hoejde i hver boks og ikke
     paa linje (Christian, WinCollect 2). Grid'et straekker boksene i en raekke
     til samme hoejde, og et tal i bunden af hver boks lander derfor paa samme
     linje. */
  display: flex; flex-direction: column;
}
.wc-val.missing { opacity: .55; }
.wc-label { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.wc-unit { text-transform: none; color: var(--accent); }
.wc-num { font-size: 21px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 3px; }
.wc-val.missing .wc-num { color: var(--ink-soft); }
.wc-foot { margin-top: 12px; font-size: 12px; color: var(--ink-soft); }

/* Datofelt med ren tekst i stedet for dd/mm/yyyy. Browserens eget felt kan
   hverken faa en anden datoformattering eller en placeholder, saa cifrene
   skjules (ikke feltet, ikke kalenderknappen) og vores tekst laegges ovenpaa. */
.date-field { position: relative; display: block; }
.date-field input[type=date] {
  width: 100%; cursor: pointer;
  /* Uden color-scheme tegner Chrome kalenderikonet MOERKT - naesten usynligt
     paa moerk baggrund. */
  color-scheme: dark;
}
:root[data-mode="light"] .date-field input[type=date] { color-scheme: light; }
.date-field input[type=date]::-webkit-datetime-edit { opacity: 0; }
@supports not selector(::-webkit-datetime-edit) {
  .date-field input[type=date] { color: transparent; }
}
.date-field input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .85; padding: 4px; margin-right: -2px;
}
.date-face {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 15px; color: var(--ink); white-space: nowrap;
}
.date-face.empty { color: var(--ink-soft); }

/* port tester output */
.test-out { grid-column: 1 / -1; display: none; }
.test-out.open { display: block; margin-top: 4px; position: relative; padding-right: 34px; }
.test-close {
  position: absolute; top: 0; right: 0; width: 26px; height: 26px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 8px;
  color: var(--ink-soft); font-size: 12px; box-shadow: var(--sh-1);
}
.test-close:hover { color: var(--danger); border-color: rgba(239,107,94,.45); background: var(--danger-soft); }
.test-ok { color: var(--ok); font-size: 13.5px; }
.test-bad { color: var(--danger); font-size: 13.5px; }
.test-wait { color: var(--ink-soft); font-size: 13.5px; }
.test-hint { color: var(--warn); font-size: 12.5px; margin-top: 5px; }
.test-lines {
  margin-top: 7px; padding: 9px 11px; border-radius: 9px; background: var(--code-bg);
  border: 1px solid var(--line-soft); font-family: Consolas, monospace; font-size: 12px;
  color: var(--ink); white-space: pre; overflow-x: auto; box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
.head-right { display: flex; align-items: center; gap: 12px; }
.col-date { width: 150px; white-space: nowrap; }
.type-row.even select, .type-row.even input { flex: 1 1 0; min-width: 0; }
.admin-actions { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.admin-actions.wrap { flex-wrap: wrap; }
.save-msg { font-size: 13px; color: var(--ok); }

/* buttons - shadows on all */
.btn {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line-soft); color: var(--ink); padding: 10px 18px;
  border-radius: 11px; cursor: pointer; font-size: 15px;
  /* ALLE knapper skal loefte sig fra fladen - tydelig drop shadow, ikke flad. */
  box-shadow: 0 4px 11px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .06s, filter .15s, box-shadow .15s;
}
/* Knapperne i tabellerne er <a>-elementer, og et link er understreget som
   standard. Det gav en raekke bokse med streg under teksten - de saa hverken
   ud som knapper eller som links, og med fem i en raekke blev det rodet.
   Rammen siger allerede at man kan trykke. */
a.btn, a.btn:hover, a.btn:visited { text-decoration: none; }

.btn:hover { filter: brightness(1.14); }
.btn:active { transform: translateY(1px); box-shadow: var(--sh-1); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #04222a;
  border-color: transparent; font-weight: 700;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.danger {
  background: linear-gradient(180deg, #d9584a, #a83a2e); color: #fff; border-color: transparent;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.small { padding: 6px 13px; font-size: 13px; border-radius: 9px;
  box-shadow: 0 3px 7px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05); }
.btn.small.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(239,107,94,.25); }

/* PRINT-knapper: ikke blaa-i-blaa som alt andet. En daempet violet/indigo, saa
   "print/ud af programmet" har sin egen farve OVERALT hvor der printes. */
.btn.print {
  background: linear-gradient(180deg, #4b4168, #372e52);
  color: #e6ddff; border-color: rgba(155,135,215,.42);
}
.btn.print:hover { filter: brightness(1.13); }
/* ---- HENT-KNAPPER: kobber, ikke endnu en blaa ------------------------
   Christian 31/8: "igen er det blaa knapper overalt". En knap der TAGER
   noget UD af programmet (billede, fil) er en anden slags handling end at
   aabne noget - den faar sin egen farve, som print fik violet. Kobber staar
   frit fra baade accent-blaa, go-groen, print-violet og rav-stemplerne.
   Saet .btn.save paa ENHVER download-knap (ogsaa JS-genererede). */
.btn.save {
  background: linear-gradient(180deg, #6b4a34, #513526);
  color: #ffe3cd; border-color: rgba(215,150,105,.42);
}
.btn.save:hover { filter: brightness(1.13); }
/* ---- REGNEARK-KNAPPER: Excel-groen ----------------------------------
   Der er TO slags udtraek, og de skal kunne skelnes paa afstand: et BILLEDE
   (kobber) og et REGNEARK (groen). Groen er ikke tilfaeldig - alle genkender
   regnearkets farve, saa knappen siger sit format uden at skrive "CSV".
   Moerkere og mere daempet end .go, saa den ikke forveksles med START. */
.btn.sheet {
  background: linear-gradient(180deg, #2f6a4a, #235138);
  color: #d8f5e4; border-color: rgba(110,190,145,.42);
}
.btn.sheet:hover { filter: brightness(1.13); }
:root[data-mode="light"] .btn.sheet {
  background: linear-gradient(180deg, #e4f7ec, #d3f0e0);
  color: #1d5c3c; border-color: rgba(60,150,105,.4);
}
:root[data-mode="light"] .btn.save {
  background: linear-gradient(180deg, #fdeade, #f7dcc8);
  color: #7a4520; border-color: rgba(190,120,70,.4);
}
:root[data-mode="light"] .btn.print {
  background: linear-gradient(180deg, #efe9ff, #e2d9fb);
  color: #4a3b8f; border-color: rgba(120,95,200,.4);
}
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- LUK-KNAPPER: roedligt anstroeg overalt ----------------------------
   "Luk/Annuller" er den ene knap man skal kunne finde uden at laese - og roed
   er det naturlige signal for "her stopper det". Reglen rammer AUTOMATISK alle
   luk-knapper: dem med data-close, dem der hedder noget med Close/Cancel i
   id'et, og .modal-close. Saa en ny dialog faar farven med det samme, uden at
   nogen skal huske at saette en klasse.
   Daempet, ikke skrigende: det er en udgang, ikke en advarsel. Rigtige
   destruktive knapper bruger stadig .danger (fyldt roed). */
.btn[data-close],
.btn[id$="Close" i], .btn[id$="Cancel" i],
.btn.modal-close, .btn.close-btn {
  color: var(--danger);
  border-color: rgba(var(--danger-rgb, 239,107,94), .30);
  background: linear-gradient(180deg, rgba(var(--danger-rgb, 239,107,94), .10),
                                      rgba(var(--danger-rgb, 239,107,94), .05));
}
.btn[data-close]:hover,
.btn[id$="Close" i]:hover, .btn[id$="Cancel" i]:hover,
.btn.modal-close:hover, .btn.close-btn:hover {
  filter: none;
  background: rgba(var(--danger-rgb, 239,107,94), .18);
  border-color: rgba(var(--danger-rgb, 239,107,94), .55);
}
/* ...men ikke naar knappen ALLEREDE er den primaere handling eller destruktiv. */
.btn.primary[data-close], .btn.danger[data-close],
.btn.primary[id$="Close" i], .btn.danger[id$="Close" i] { color: inherit; }

/* Keep/Cancel i bekraeftelses-modalen (#cfCancel) er den SIKRE udgang - modsat den
   destruktive Delete/OK (#cfOk.danger). Den skal derfor have NORMAL farve, ikke den
   roede luk-toning (som ellers rammer alt der ender paa "Cancel"). id slaar attribut-
   vaelgeren, saa denne vinder. */
/* OPDATERET: undtagelsen gaelder nu KUN naar den er noedvendig.

   Resten af fladen toner alt der hedder Cancel/Close roedligt - det er
   konventionen, og den er rigtig: Cancel ER vejen ud. Men i en SLETTE-dialog
   staar #cfOk fyldt roed, og to roede knapper ved siden af hinanden betyder at
   den der sletter ikke laengere skiller sig ud - praecis naar det gaelder mest.

   :has() lader os spoerge om netop dét: er OK'en destruktiv, traeder Cancel
   tilbage til neutral; er den ikke (Download, Print, Range ...), foelger Cancel
   konventionen som alle andre steder. Ét sted, to situationer - i stedet for en
   absolut undtagelse der ogsaa ramte de harmloese dialoger. */
.modal-actions:has(#cfOk.danger) #cfCancel {
  color: var(--ink);
  border-color: var(--line-soft);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
}
.modal-actions:has(#cfOk.danger) #cfCancel:hover {
  filter: brightness(1.14);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border-color: var(--line-soft);
}

/* "Open full size" skal ses: den er vejen fra et kig til en analyse. */
.det-big {
  color: var(--accent); font-weight: 700;
  border-color: rgba(var(--accent-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .08));
}
.det-big:hover { filter: none; background: rgba(var(--accent-rgb), .26); border-color: var(--accent); }

/* Togtrapport-knappen: den skal SES foerst. Fyldt accent, ikon, en blod ring om
   kanten saa den skiller sig ud fra de graa smaaknapper ved siden af. Det er den
   leverance togtlederen kommer efter, saa den maa ikke gemme sig i raekken. */
.btn.report-btn {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #04222a; border-color: transparent; font-weight: 700;
  padding: 8px 15px; font-size: 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .28),
              0 0 0 3px rgba(var(--accent-rgb), .16);
}
.btn.report-btn:hover { filter: brightness(1.08); }
.report-btn .rb-ico {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Edit-genvejen i detaljevinduet: vandret ikon+tekst som Report/Close, men
   neutral (Report er den groenne primaere). Foer arvede pen-ikonet ingen
   stoerrelse i en almindelig .btn og gjorde knappen stor og firkantet. */
#detEdit { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; font-size: 14px; }
#detEdit .rb-ico {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Per-station rapport: knap-raekken i detaljevinduets top + checkbox-modalen. */
.det-top-actions { display: flex; gap: 8px; align-items: center; }

/* ---- GUIDE-KNAP + rundvisning (wizard) ------------------------------------
   Kort, konkret tour der forklarer hver fane/knap. Knappen skal kunne FINDES,
   derfor accent-fyld + en blid puls-ring (respekterer reduced-motion). */
.det-guide-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  color: #05121a; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 0; box-shadow: var(--sh-2); }
.det-guide-btn .dgb-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(5,18,26,.22); color: #05121a; font-weight: 900; font-size: 12px; }
.det-guide-btn:hover { filter: brightness(1.07); box-shadow: var(--sh-3); }
/* Puls-ring der beder om opmaerksomhed uden at forstyrre. */
.det-guide-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55);
  animation: dgbPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes dgbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .det-guide-btn::after { animation: none; } }

/* Spotlight-hullet: en gennemsigtig kasse over target-elementet; den store
   box-shadow dimmer ALT andet. En accent-ring + blid puls trkker oejet hen. */
#guideSpot {
  position: fixed; z-index: 400; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(3, 8, 14, .62), 0 0 0 2px var(--accent);
  transition: top .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1); }
#guideSpot::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5);
  animation: dgbPulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { #guideSpot::after { animation: none; } }
#guideSpot.hidden, #guidePop.hidden { display: none; }

/* Boblen med forklaringen. */
#guidePop {
  position: fixed; z-index: 401; width: min(320px, 88vw);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px 13px;
  box-shadow: var(--sh-4); }
#guidePop .gp-step { font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
#guidePop .gp-title { font-size: 15.5px; font-weight: 800; color: var(--ink);
  margin: 0 0 5px; }
#guidePop .gp-desc { font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 13px; }
#guidePop .gp-actions { display: flex; align-items: center; gap: 8px; }
#guidePop .gp-actions .gp-spacer { flex: 1; }
#guidePop .gp-dots { display: flex; gap: 5px; }
#guidePop .gp-dot { width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); }
#guidePop .gp-dot.on { background: var(--accent); }
#guidePop button { font-size: 13px; }
#guidePop .gp-skip { background: transparent; border: 0; color: var(--ink-soft);
  cursor: pointer; font-weight: 600; padding: 4px 6px; }
#guidePop .gp-skip:hover { color: var(--ink); }
/* Luft mellem "+ Add field"/"Close"-knapperne og hint-teksten under dem. */
/* BUNDLUFT under hovedet - GENERELT, ikke pr. modal. Basen havde ingen
   margin-bottom, og handlingsknapperne er hoejere end overskriften, saa de
   ragede ned i hint-teksten lige under (Christian 28/8: "knapper ligger oven
   i tekst" - haulFieldsModal havde faaet praecis samme fix enkeltvis for
   laengst; nu faar alle det). detailsModal styrer sin egen luft via faner. */
.det-top { margin-bottom: 12px; }
#haulFieldsModal .det-top { margin-bottom: 16px; }
.srp-card { width: 460px; max-width: 92vw; }
.srp-list { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 6px; }
.srp-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.srp-row:hover { background: var(--surface-3); }
.srp-row input { margin-top: 3px; flex: 0 0 auto; }
.srp-row > span { display: flex; flex-direction: column; font-size: 14px; color: var(--ink); }
.srp-row small { color: var(--ink-soft); font-size: 12px; margin-top: 1px; }
.srp-row.is-disabled { opacity: .5; cursor: not-allowed; }
.srp-msg { font-size: 12.5px; color: var(--ink-soft); min-height: 16px; margin-top: 6px; }

/* Hvad er nyt. */
/* .modal-card.wn-card, ikke bare .wn-card: .modal-card staar senere i filen og
   satte width:460px oveni - saa alle tidligere bredder blev overstyret og
   popup'en stod smal. To klasser vinder paa specificitet, uanset raekkefoelge. */
.modal-card.wn-card { width: 1040px; max-width: 94vw;
  max-height: calc(88vh / var(--ui-zoom, 1)); display: flex; flex-direction: column; }
.wn-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wn-top h2 { margin: 0; }
.wn-sub {
  font-size: 12px; color: var(--ink-soft); margin-top: 3px;
  font-family: ui-monospace, Consolas, monospace;
}
.wn-list { overflow-y: auto; margin-top: 14px; flex: 1 1 auto; min-height: 0; }
/* Hele CHANGELOG.md som ren tekst. pre-wrap: behold linjeskift, men bryd lange
   linjer saa der ikke kommer vandret scroll. Laesbar sans-serif (samme som resten
   af fladen) frem for monospace - changelog'en er mest proesa, og laesbarhed
   vejer tungere end at ASCII-indrykning staar millimeterret. */
.cl-pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14.5px; line-height: 1.62; color: var(--ink);
}
.wn-entry { border-left: 3px solid var(--accent); padding-left: 12px; }
.wn-when {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.wn-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 1px 0 6px; }
.wn-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.wn-items li { font-size: 13.5px; color: var(--ink); line-height: 1.4; }

/* Server-styrede kort i "Data & Instruments" (porte, instrument-opsaetning,
   status, fejllog, data storage). De duplikerede bare serverpanelet, saa de er
   skjult i web-UI'en - men bliver i DOM'en, saa renderState stadig kan skrive til
   dem uden at braekke. !important, saa inline "style=display:block" fra JS (fx
   fejllogen) ikke kan vise dem igen. */
.srv-managed { display: none !important; }

/* Setup-kortene paa Cruises-fanen: store, klikbare knapper der aabner en popup. */
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.setup-card {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  padding: 15px 16px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line-soft); color: var(--ink);
  box-shadow: var(--sh-1);
  transition: transform .06s, border-color .15s, filter .15s;
}
.setup-card:hover { border-color: var(--accent); filter: brightness(1.06); }
.setup-card:active { transform: translateY(1px); }
.setup-ico { font-size: 22px; line-height: 1; flex: 0 0 auto; color: var(--accent); }
.setup-txt { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 700; }
.setup-sub { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

/* Report-knappen paa hver stationsraekke: en flot groen, saa den skiller sig ud
   fra de graa raekke-knapper (og siger at det er en leverance). Fast groen
   gradient + hvid tekst - laesbar i baade lyst og moerkt tema, i modsaetning til
   temaets --ok der er moerkegroen i lyst tema. */
.btn.small.report-row {
  background: linear-gradient(180deg, #22b573, #178a55);
  color: #fff; border-color: transparent; font-weight: 700;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.small.report-row:hover { filter: brightness(1.08); }
a.btn.small.report-row, a.btn.small.report-row:visited { color: #fff; }

/* modal */
/* LAGENE, oppefra og ned. Ét sted, så det næste overlay ikke skal gættes:
     200  demo-bjælken      (advarslen må aldrig kunne dækkes)
      80  .modal            (dialoger dækker menuer)
      60  .gear-menu        (tandhjulet over alt på siden)
      40  .ctd-drawer       (CTD-skuffen)
      12  offline/sync-bjælker
      10  .topbar (sticky)
       9  klæbende tabelhoved

   Modalen var 50, altså UNDER menuernes 60. Det gik ubemærket så længe
   tandhjulsmenuen sad fanget i topbarens stakkekontekst på 10 - men da menuerne
   blev løftet ud i <body>, ville de have tegnet oven på enhver dialog de selv
   åbnede. Rettet HER og ikke ved at sænke menuen, fordi Christian netop bad om
   at tandhjulet skal ligge øverst på siden. */
.modal { position: fixed; inset: 0; background: rgba(2,8,13,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
/* Stationskortet aabnes OGSAA fra Cruise history (som selv er en modal). Uden en
   hoejere z-index dukkede kortet op BAG historik-vinduet ("den roeg bag ved
   history"). Detaljekortet skal altid ligge oeverst - det er dét man klikkede
   sig frem til. */
#detailsModal { z-index: 90; }
/* Report-modalen aabnes FRA stationskortet (detailsModal z:90) og skal derfor
   ligge OVENPAA det - ellers dukker den op BAG kortet og man kan ikke naa den. */
#stationReportModal { z-index: 110; }
/* CTD-tabellen aabnes fra stationskortets fane -> OVER detaljekortet (z 90),
   praecis som Report. Saa kan man lukke den og vaere tilbage i kortet. */
#ctdTableModal { z-index: 110; }
/* Graf-vinduet naar det POPPER OP oven paa stationskortet (z-index 90). Uden det
   her laa "popup'en" BAG kortet - aaben, men usynlig. */
#analysisModal.over-card { z-index: 120; }
/* Bekraeftelses-/besked-modalen (confirmBox/alertBox) kan aabnes OVENPAA en hvilken
   som helst anden modal (fx Slet-aktivitet fra Activities-popuppen, eller et Slet i
   felt-editoren z:130). Den SKAL derfor ligge oeverst af ALT - ellers stod
   spoergsmaalet bag det kort man klikkede slet i, og man kunne ikke se det. */
#confirmModal { z-index: 1000; }
.modal-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: 20px; padding: 26px; width: 460px; max-width: 100%;
  box-shadow: var(--sh-4); max-height: calc(92vh / var(--ui-zoom, 1)); overflow-y: auto;
  overscroll-behavior: contain;
}
/* Bredderne er ROBUSTE: de bruger skaermen naar den er stor nok, og krymper
   naar den ikke er - i stedet for at staa fast og tvinge vandret scroll.
   Foer stod fx "Haul data fields" og "Cruise history" fast, saa kolonnerne
   stak ud i hoejre side paa en 1280-skaerm og man skulle rulle sidelaens for
   at laese en tabel. Modalen har allerede 20px padding, deraf de 40px. */
.modal-card.wide { width: min(1020px, calc(100vw - 40px)); }
.modal-card.narrow { width: min(430px, calc(100vw - 40px)); }
.danger-h { color: var(--danger) !important; }
.del-what { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.del-warn { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; }
.modal-card select, .form-grid select { text-overflow: ellipsis; }
.modal-card h2 { color: var(--accent); margin-bottom: 16px; }
/* Modal-hoved: titel til venstre, luk-kryds til hoejre (flex, saa krydset ALDRIG
   lander oveni teksten under sig). Bruges af aktivitets- og tid-popup'en. */
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-head h3 { margin: 0; color: var(--accent); font-size: 19px; }
.modal-x { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--surface-2); color: var(--ink-soft); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.modal-x:hover { color: var(--danger); border-color: rgba(var(--danger-rgb), .5); }
/* Stop station-panelet: samme moerke navy + lyse tekst som topbar-chippen/det store
   taeller-panel (kollega kunne lide det look). Faste lyse farver, saa det ogsaa er
   laesbart i lyst tema. */
#stopModal .modal-card {
  background: linear-gradient(180deg, #12263f, #0a1626);
  border-color: rgba(61, 220, 151, .22);
  box-shadow: var(--sh-4), inset 0 0 0 1px rgba(61, 220, 151, .16);
  color: var(--on-bar);
}
#stopModal h2 { color: var(--accent); }
#stopModal label, #stopModal .field-label, #stopModal .radio, #stopModal .hf-hint,
#stopModal .haul-field label { color: var(--on-bar-soft); }
#stopModal .form-grid input, #stopModal textarea, #stopModal .haul-field input {
  background: rgba(0, 0, 0, .30); color: var(--on-bar); border-color: rgba(120, 160, 200, .22);
}
#stopModal .form-grid input::placeholder, #stopModal textarea::placeholder { color: rgba(200, 220, 235, .45); }
.stop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stop-head h2 { margin: 0; }
/* Felt-editoren aabnes OVENPAA stop-panelet -> hoejere z-index end en normal modal. */
#haulFieldsModal { z-index: 130; }
.form-grid label { font-size: 12px; color: var(--ink-soft); display: block; margin: 14px 0 5px; letter-spacing: .04em; }
.form-grid label:first-child { margin-top: 0; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); font-size: 15px; color: var(--ink); font-family: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.type-row { display: flex; gap: 10px; }
/* Stationstyperne har lange navne ("GOV - Bottom trawl (Gear Of Vessel)");
   140px hakkede dem af midt i ordet. */
.type-row select { flex: 1 1 60%; min-width: 0; }
.type-row input { flex: 1; }
.toggle-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 4px; align-items: center; }
.form-grid label.radio, .radio { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--ink); cursor: pointer; }
.radio input { width: auto; margin: 0; accent-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
/* Back-knappen i Edit skubbes til venstre, adskilt fra Cancel/Save. */
#editBack { margin-right: auto; }

/* Edit-station: udnyt bredden. Felterne parres to og to (.eg-row2), saa vinduet
   ikke bliver uendelig hoejt. .eg-f holder label OVER input. Falder til én kolonne
   paa smalle skaerme. Successful/haul-felter/noter/GPS-sektion staar fuld bredde. */
.edit-grid .eg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 14px; }
.edit-grid .eg-row2:first-child { margin-top: 0; }
.edit-grid .eg-f label { margin-top: 0; }
.edit-grid .pos-fix-edit { margin-top: 18px; }
@media (max-width: 680px) { .edit-grid .eg-row2 { grid-template-columns: 1fr; gap: 0; } }
/* Vejr-raekken: tre smalle felter (soegang / boelgehoejde / stroem) side om side. */
.edit-grid .eg-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; margin-top: 4px; }
.edit-grid .eg-sub { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.eg-note { font-weight: 400; color: var(--ink-soft); font-size: 12px; }
@media (max-width: 680px) { .edit-grid .eg-row3 { grid-template-columns: 1fr; gap: 0; } }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin-top: 12px; }
.check-row input { accent-color: var(--accent); }

/* view-only */
.client-hide { display: none !important; }

/* responsive */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .cruise-form { grid-template-columns: 1fr 1fr; }
  .topbar .clocks .clock:nth-child(2) { display: none; }   /* KUN i baren: uret i sidepanelet har plads nok */
  .inst-row { grid-template-columns: 1fr 1fr; }
  .topbar-station { display: none; }
  .topbar { flex-wrap: wrap; gap: 12px; }
}

/* per-card action button (e.g. pause logging on the Logging card) */
.card-btn { margin-top: 10px; align-self: flex-start; }
/* timezone selector in the Station Rebuilder */
.tz-row { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.tz-select { min-width: 190px; }

/* Manually entered stations: never let them be mistaken for logged ones. */
.pill {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 5px;
  box-shadow: var(--sh-1);
}
.pill.manual { background: var(--wait-soft); color: var(--warn);
  box-shadow: inset 0 0 0 1px rgba(240,180,41,.35); }
.manual-row td { background: rgba(240,180,41,.045); }
h2 .pill { font-size: 10.5px; }

/* ===== GPS-rettet position (override mod spoofing) ===== */
/* Meget synlig pille paa stationsraekken: fyldt gul, moerk tekst, svag gloed -
   den skal springe i oejnene naar en position er sat i haanden. */
/* Lille positions-ikon (pin) i stedet for tekst-pillen: fylder minimalt, og en
   diskret vippe hvert par sekunder fanger oejet uden at larme. En haand-rettet
   position er LEGITIM (ikke en alarm), saa ikonet bruger accent-farven - ikke
   gul/advarsel. Betydningen staar i tooltip'en; raekken har en diskret accent-tint. */
.gps-fix-ico { display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 5px; cursor: help; }
.gps-fix-ico:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.gps-fix-ico .gfx {
  width: 17px; height: 17px; fill: var(--accent);
  filter: drop-shadow(0 0 3px rgba(var(--accent-rgb),.5));
  transform-origin: 50% 92%;
  animation: gpsWiggle 2.4s ease-in-out infinite;
}
.gps-fix-ico .gfx-ex { fill: #fff; }        /* prik/mark, lys inde i pinen */
.gps-fix-ico:hover .gfx { animation-duration: .9s; }   /* vipper hurtigere ved hover */
@keyframes gpsWiggle {
  0%, 85%, 100% { transform: rotate(0); }
  88% { transform: rotate(-11deg); }
  92% { transform: rotate(11deg); }
  96% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .gps-fix-ico .gfx { animation: none; } }

/* ===== Attention-kolonne: samlede "laeg maerke til"-ikoner ===== */
.col-att { width: 1%; white-space: nowrap; text-align: center; }
th.col-att { color: var(--ink-soft); font-weight: 700; }
.att-ico { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 3px; cursor: help; }
.att-ico:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.att-edit svg { width: 15px; height: 15px; fill: none; stroke: var(--warn); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
/* GPS-ikonet arver .gps-fix-ico (accent, vippende); .att-ico giver kun margin. */
/* Raekke-farvningen af rettede positioner (tr.pos-fixed-row) er FJERNET med vilje:
   de findes nu via GPS-filter-vippen over listen (posFilterPick), saa listen ikke
   behoever staa fuld af farvede raekker. Attention-kolonnens pin (gps-fix-ico) er
   stadig der som diskret pr.-raekke-hint. */
/* GPS-filter aktiv = accent (info), ikke warn/gul som redskabsfilteret. */
.st-btn.is-gps { border-color: rgba(var(--accent-rgb), .55); }
.st-btn.is-gps .st-btn-value { color: var(--accent); }
.st-btn.st-btn-dim { opacity: .5; }
/* Detaljer: den rettede position fremhaevet + tag; den rå staar overstreget. */
.pos-fix { color: var(--ink); font-weight: 700; }
.pos-fix-tag {
  display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; color: var(--accent);
  background: rgba(var(--accent-rgb),.14); border: 1px solid rgba(var(--accent-rgb),.4);
  padding: 1px 7px; border-radius: 999px;
}
.pos-raw { color: var(--ink-soft); opacity: .8; }

/* Edit-vinduets rettelses-sektion. Rammet ind med gult, saa det er klart at det
   er en indgribende handling og ikke bare endnu et felt. */
.pos-fix-edit {
  margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255,210,63,.45); background: rgba(255,210,63,.06);
}
.pfx-head { font-weight: 800; letter-spacing: .02em; color: var(--ink); margin-bottom: 4px; }
.pfx-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.pfx-hint code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.pfx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pfx-lbl { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.pfx-raw { color: var(--ink); font-family: ui-monospace, Consolas, monospace; }
.pos-fix-edit .pfx-col input { width: 100%; margin-bottom: 7px; }
/* Deg/Min/N-S-vaelger: nemmere at "vaelge tal" end at taste en hel koordinat -
   og samme format som den viste "recorded"-linje (deg ° min ' N/S). */
.dm-group { display: flex; align-items: stretch; gap: 5px; flex: 1; min-width: 0; }
.pos-fix-edit .pfx-col .dm-group input { width: auto; margin-bottom: 0; padding: 9px 8px; text-align: center;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--input-bg); color: var(--ink);
  font-family: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.dm-deg { flex: 0 0 3.4em; }
.dm-min { flex: 1 1 auto; min-width: 0; }
.dm-u { display: inline-flex; align-items: center; color: var(--ink-soft); font-weight: 700; }
.dm-hemi { flex: 0 0 auto; width: 44px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--surface-3); color: var(--accent); font-weight: 800; cursor: pointer; font-size: 15px; }
.dm-hemi:hover { border-color: var(--accent); }
.pfx-echo { font-size: 12px; min-height: 1.2em; }
.pfx-ok { color: var(--ok); font-weight: 600; }
.pfx-bad { color: var(--danger); font-weight: 600; }
@media (max-width: 560px) { .pfx-grid { grid-template-columns: 1fr; } }

/* the paper-sheet form: four columns so a row of the sheet stays one row */
.sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sheet-grid .pf-wide { grid-column: 1 / -1; }
.sheet-grid input, .sheet-grid select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); color: var(--ink); font-size: 14px; font-family: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.sheet-grid .opt { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-size: 10px; }
@media (max-width: 900px) { .sheet-grid { grid-template-columns: 1fr 1fr; } }

/* per-panel recording and refresh rates */
.wc-int-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
}
.wc-int-name { flex: 1; min-width: 150px; font-size: 14px; }
.wc-int-row label {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft);
}
.wc-int-row select {
  padding: 6px 9px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-family: inherit;
  font-size: 13px; text-transform: none; letter-spacing: 0;
}
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.wc-int-note { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.rate-note { font-size: 12px; color: var(--ink-soft); line-height: 1.4; display: block; }

/* Station Rebuilderen har midlertidigt hjemme her. Rammen goer det tydeligt
   at det er laant plads, ikke en fast del af Data & Instruments. */
.datadir-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 4px; }
.datadir-row .pf { flex: 1; min-width: 240px; }
.datadir-row input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); color: var(--ink); font-size: 14px; font-family: ui-monospace, Consolas, monospace;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}

.moved-block {
  margin-top: 26px; padding: 18px; border-radius: 16px;
  border: 1px dashed var(--line); background: rgba(0,0,0,.14);
}
.moved-tag {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 12px;
}
.moved-block > section:first-of-type { margin-top: 0; }

/* ---- Port availability board ---- */
.nport-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.nport-row .pf { flex: 1; min-width: 130px; }
.nport-row input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); color: var(--ink); font-size: 14px; font-family: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.probe-h { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
           color: var(--ink-soft); margin-bottom: 10px; font-weight: 600; }
.probe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.probe-card {
  padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--sh-2); border-left-width: 4px;
}
.probe-card.on { border-left-color: var(--ok); }
.probe-card.wait { border-left-color: var(--warn); }
.probe-card.off { border-left-color: var(--danger); }
.pc-head { display: flex; align-items: center; gap: 9px; }
.pc-icon { font-size: 16px; }
.pc-title { flex: 1; font-weight: 700; font-size: 14px; color: var(--ink); }
.pc-target { font-size: 12px; color: var(--ink-soft); font-family: ui-monospace, Consolas, monospace; margin-top: 3px; }
.pc-guess { font-size: 12.5px; color: var(--ink); margin-top: 7px; }
.pc-exp { color: var(--ink-soft); }
.pc-msg { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.pc-lines { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--code-bg); }
.pc-lines .pl { font-family: ui-monospace, Consolas, monospace; font-size: 11px;
                color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Conditions on deck ---- */
/* Vinden faar den plads teksten faktisk behoever - i en 300px spalte blev
   "No gyro heading - computed from course over ground..." klemt ned til en
   tre-ords bred stribe. */
.cond-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.cond-wind { display: flex; align-items: flex-start; gap: 16px; }
.wind-rose { width: 118px; height: 118px; flex: none; }
.wr-ring { fill: var(--input-bg); stroke: var(--line); stroke-width: 1.5; }
.wr-hub { fill: var(--ink-soft); }
.wr-lbl { fill: var(--ink-soft); font-size: 11px; font-weight: 700; text-anchor: middle;
          font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; }
.wr-needle { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.wr-tail { fill: var(--ink-soft); }
.bft-row { display: flex; align-items: baseline; gap: 8px; }
.bft-icon { font-size: 24px; }
.bft-num { font-size: 42px; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bft-unit { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.bft-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 3px; }
.bft-detail { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.6; }
.bft-wave { opacity: .85; }
.bft-warn { color: var(--warn); }
.wind-kind {
  display: inline-block; padding: 1px 7px; border-radius: 6px; margin-right: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
.wind-kind.is-true { background: var(--ok-soft); color: var(--ok); }
.wind-kind.is-rel { background: var(--wait-soft); color: var(--warn); }
.wind-kind.is-approx { background: var(--wait-soft); color: var(--warn); }

.cond-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.cond-tile {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--input-bg); box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
}
.ct-icon { font-size: 19px; line-height: 1.2; flex: none; }
.ct-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.ct-value { font-size: 21px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 1px; }
.ct-unit { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.ct-extra { font-size: 11.5px; color: var(--warn); margin-top: 2px; }

.exp-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px; margin: 12px 0;
}
.exp-f {
  display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px;
  padding: 8px 11px; border-radius: 9px; background: var(--input-bg);
  border: 1px solid var(--line-soft); box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
}
.exp-f:hover { border-color: var(--accent); }
.exp-f input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

.req-fields { display: flex; flex-direction: column; gap: 9px; }
.req-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 13px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
  font-size: 14px;
}

/* required fields on the start form */
.pf label.req::after {
  content: " *"; color: var(--accent); font-weight: 700;
}
/* Paakraevet og endnu ikke udfyldt: feltet selv toner varmt, i stedet for en
   stribe eller en ramme i kanten. Farven ER beskeden - man ser med det samme
   HVILKE felter der mangler, uden at laese noget. Saa snart der staar noget,
   falder feltet tilbage til normal, og kortet holder op med at lyse. */
.pf-missing input, .pf-missing select {
  border-color: rgba(var(--needed-rgb), .45);
  background: linear-gradient(0deg, rgba(var(--needed-rgb), .10),
                              rgba(var(--needed-rgb), .10)), var(--input-bg);
}
.pf-missing input::placeholder { color: rgba(var(--needed-rgb), .6); }
/* Kun mens der MANGLER noget. Er feltet udfyldt, er der intet at goere
   opmaerksom paa, og stjernen gaar tilbage til den rolige accentfarve. */
.pf-missing label, .pf-missing label.req::after { color: var(--needed); }
.start-why {
  margin: 0; font-size: 12px; line-height: 1.45;
  text-align: center; color: var(--needed); opacity: .9;
}
.start-why:empty { display: none; }
.type-desc { font-size: 11px; color: var(--ink-soft); line-height: 1.4; margin-top: 5px; }
.type-desc:empty { display: none; }

/* activity-number help under the number field */
.num-hint { font-size: 12px; color: var(--ink-soft); line-height: 1.55; }
.num-hint:empty { display: none; }
.num-hint a { color: var(--accent); text-decoration: none; font-weight: 600; }
.num-hint a:hover { text-decoration: underline; }
.num-warn { color: var(--warn); }

/* pick which logs to attach to a hand-typed station */
.scan-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.scan-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
}
.scan-row:hover { border-color: var(--accent); }
.scan-row input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.scan-name { flex: 1; font-size: 14px; }
.scan-lines { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

/* a hand-typed station that has since been matched with the log */
.pill.linked { background: var(--ok-soft); color: var(--ok);
  box-shadow: inset 0 0 0 1px rgba(61,220,151,.35); }
.cmp-ok { color: var(--ok); font-weight: 600; }
.cmp-off { color: var(--warn); font-weight: 700; }
.pos-val { font-size: 15px; }

/* ====================================================================
   BETJENINGSKORTET - forsidens eneste handling
   Togt og station var to kort; de hoerer sammen. Togtet er kontekst og
   faar en tynd stribe oeverst, resten af kortet er det man kom for.
   ==================================================================== */
.op-card {
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden;
  border: 1px solid var(--accent);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(var(--accent-rgb),.10), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--sh-3), 0 0 0 1px rgba(var(--accent-rgb),.10);
}
:root[data-mode="light"] .op-card {
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(15,124,138,.09), transparent 62%),
    linear-gradient(180deg, #f2f8fa, var(--surface));
}
.op-cruise {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 22px; background: rgba(0,0,0,.22);
  border-bottom: 1px solid var(--line-soft);
}
.op-cruise .cb-label {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.op-cruise .cb-name { font-size: 15px; font-weight: 700; color: var(--ink); }
/* Edit-genvejen ved togtnavnet. Lille og i accentfarven, så den ses uden at
   larme. align-self: center fordi bjælken ellers stiller alt på baseline, og en
   knap med ikon ser skæv ud på tekstens grundlinje.
   IKKE scopet til .op-cruise: knappen bor nu i togt-SKUFFEN (.cd-head). Da
   reglen var bundet til den gamle bjaelke, stod knappen upåklædt derinde - en
   raa hvid browser-knap med ikon og tekst under hinanden. */
.cb-edit {
  align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--accent-rgb), .12); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .38); border-radius: 8px;
  padding: 4px 10px; font: inherit; font-size: 11.5px; font-weight: 700;
  line-height: 1; cursor: pointer; letter-spacing: .03em; white-space: nowrap;
  transition: background .13s, border-color .13s;
}
.cb-edit svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.cb-edit:hover { background: rgba(var(--accent-rgb), .22); border-color: var(--accent); }
.cb-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cb-edit[hidden] { display: none; }
/* I skuffen staar den yderst til hoejre ud for "Active cruise". */
.cd-head { display: flex; align-items: center; gap: 10px; }
.cd-head .cb-edit { margin-left: auto; }
.op-cruise .cb-meta {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-soft);
}
.cb-sep { opacity: .45; }

/* Betjeningen sad her under; nu hvor den har sit eget kort, skal bunden
   lukkes ordentligt i stedet for at slutte 6 px under sidste felt. */
.op-body { padding: 20px 22px 20px; }
.op-main { min-width: 0; }
/* Felterne paa én raekke - kortet er bredt, saa et blik daekker formularen.
   TO kolonner nu, ikke tre: kommentarfeltet er fjernet, og dets plads er delt
   mellem initialer og stationstype (Christian). Initialer er korte, saa de faar
   mindst; typen faar mest, for det er den man laeser paa afstand. */
/* ALLE TRE felter paa ÉN linje (Christian): Operator | Gear code | Station group.
   Foer var det 2 spalter, saa Station group faldt ned paa en raekke for sig og
   goede kortet en hel felt-hoejde hoejere - plads der er bedre brugt paa
   stationslisten. Gear code faar mest bredde (den viser ogsaa beskrivelsen). */
.op-main .prep-fields {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(230px, 1.5fr) minmax(150px, .9fr);
  gap: 14px; align-items: start;
}
.op-main .pf-type .type-row { display: flex; flex-direction: row; gap: 8px; }
.op-main .pf-type .type-row select { flex: 1 1 62%; min-width: 0; }
.op-main .pf-type .type-row input { flex: 1 1 38%; min-width: 0; }
.op-main .station-status { padding: 6px 4px; }
/* NAAR der optages: HELE betjeningskortet faar det moerke recording-look (ikke et
   kort-i-kort). Moerk navy + groen accent-kant, saa kortet i sig selv siger "optager". */
.op-card.recording {
  border-color: rgba(61,220,151,.5);
  background: linear-gradient(180deg, #12263f, #0a1626);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(61,220,151,.22), inset 0 0 70px rgba(61,220,151,.05);
}
:root[data-mode="light"] .op-card.recording {
  background: linear-gradient(180deg, #12263f, #0a1626);
}
/* START og STOP ved siden af hinanden. De er to ender af den samme
   handling - stablet lignede de en liste man arbejder sig ned igennem.

   Forklaringen paa hvorfor START ikke kan trykkes staar UNDER dem begge og
   spaender hele bredden. Foer havde den sin egen midtersoejle, og naar begge
   knapper var graa, hang saetningen som en loes strimmel midt i ingenting. */
/* Handlingerne i deres EGET kort inde i betjeningskortet. De to knapper er
   ikke en fodnote til formularen - de er det man kom for. En egen flade med
   sin egen kant siger det, uden at raabe med farve. */
/* Selve kortet leverer nu ramme og bund - foer havde raekken sin egen, og to
   rammer uden paa hinanden gav den indfaeldede "felt i et felt"-effekt. */
.op-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 18px; align-items: center; justify-items: center;
}

/* Polstringen sidder paa INDHOLDET, ikke paa kortet.

   Med flex-basis 0 kan en kasse ikke blive smallere end sin egen polstring,
   saa kortets 44 px blev lagt oven i dens andel af pladsen - og 70/30 blev i
   praksis 67/33. Ligger polstringen indenfor, er grundlaget rent nul og
   fordelingen praecis den man har bedt om. */
.op-actions-card { padding: 0; border-color: rgba(var(--accent-rgb), .35); }
.op-actions-card .op-actions { padding: 18px 22px; }
.op-actions .start-why { grid-column: 1 / -1; grid-row: 2; }
/* Placeres UDTRYKKELIGT i hver sin kolonne. Uden det bliver forklaringen i
   midten display:none naar en station koerer, og saa rykker knapperne en
   kolonne til venstre: STOP havner i midterkolonnen og den hoejre bliver
   staaende tom. Det var praecis derfor kortet saa klemt ud mod venstre. */
.op-actions .big-btn.start { grid-column: 1; grid-row: 1; }
.op-actions .big-btn.stop  { grid-column: 2; grid-row: 1; }
.op-actions .big-btn { font-size: 19px; min-height: 62px; }

/* Smal skaerm eller kraftig zoom: bjaelken bliver til tre linjer i stedet for
   at lade soejlerne skubbe ind i hinanden. */
@container page (max-width: 720px) {
  .station-status { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .ss-who, .ss-meta { justify-self: center; }
  .ss-meta { align-items: center; }
  .ss-row { justify-content: center; }
  .ss-k { min-width: 0; }
}
/* Trappen ned: 3 spalter -> 2 (gruppen under) -> 1. Uden mellemtrinnet blev de
   tre felter klemt saa smalle at gear-teksten ikke kunne laeses. */
@container page (max-width: 1100px) {
  .op-main .prep-fields { grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.6fr); }
}
@container page (max-width: 900px) {
  .op-main .prep-fields { grid-template-columns: 1fr; }
}
/* Knapperne stables FOERST naar der virkelig ikke er plads. Kortet er
   bevidst smalt (~810px), saa et breakpoint paa 900 lagde dem oven paa
   hinanden paa en helt normal skaerm. */
@container page (max-width: 560px) {
  .op-actions-card .op-actions, .op-actions-card.running .op-actions { grid-template-columns: 1fr; }
  .op-actions .big-btn.start { grid-row: 1; }
  .op-actions .big-btn.stop { grid-column: 1; grid-row: 3; }
}

/* ---- Sensoralarm: staar oeverst paa ENHVER fane ---- */
.alarm-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 20px; font-size: 14px;
  background: linear-gradient(180deg, #5a1f18, #3f1511);
  color: #ffd9d3; border-bottom: 1px solid var(--danger);
  box-shadow: var(--sh-2);
}
.ab-icon { font-size: 17px; }
.ab-item { white-space: nowrap; }
.ab-secs { color: #ffb1a6; font-variant-numeric: tabular-nums; }

/* Pause er selvforskyldt datatab - det skal vaere umuligt at overse. */
.paused-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 20px; font-size: 14px;
  background: linear-gradient(180deg, #6b4a12, #4a3208);
  color: #ffe6b0; border-bottom: 1px solid var(--warn);
  box-shadow: var(--sh-2);
}
.pb-icon { font-size: 16px; }

/* Ny-version-banner: informativt (ikke en advarsel), egen accent-toning. */
.update-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 20px; font-size: 14px;
  background: linear-gradient(180deg, #12405a, #0b2b3d);
  color: #cfeaff; border-bottom: 1px solid var(--accent);
  box-shadow: var(--sh-2);
}
.ub-refresh {
  margin-left: auto; border: 0; border-radius: 7px; cursor: pointer;
  padding: 6px 14px; font-weight: 700; font-size: 13px;
  background: var(--accent); color: var(--bg, #06222b);
}
.ub-refresh:hover { filter: brightness(1.08); }

/* "Spaendt" knap - foerste klik paa en destruktiv handling. */
.btn.armed, .btn.small.armed {
  background: linear-gradient(180deg, #d9584a, #a83a2e) !important;
  color: #fff !important; border-color: transparent !important;
  animation: armPulse 1s ease-in-out infinite;
}
@keyframes armPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }

/* ---- Udfaldshistorik ---- */
.drop-list { display: flex; flex-direction: column; gap: 6px; max-height: 230px; overflow-y: auto; }
.drop-row {
  display: grid; grid-template-columns: auto auto 1fr; gap: 4px 9px;
  align-items: center;
  padding: 8px 11px; border-radius: 9px; background: var(--input-bg);
  border-left: 3px solid var(--line-soft); font-size: 12.5px;
}
.drop-row .dr-detail { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-row.bad { border-left-color: var(--danger); }
.drop-row.good { border-left-color: var(--ok); }
.dr-when { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dr-inst { font-weight: 600; color: var(--ink); }
.dr-detail { color: var(--ink-soft); }
.drop-panel { display: flex; flex-direction: column; }
.drop-panel .drop-list { flex: 1; }

/* Diskbjaelke (Data & Instruments) */
.rec-bar {
  height: 6px; border-radius: 4px; background: var(--input-bg);
  border: 1px solid var(--line-soft); overflow: hidden; margin: -2px 0 4px;
}
.rec-bar-fill { height: 100%; background: var(--accent); transition: width .4s, background .3s; }
.rec-bar-fill.warn { background: var(--warn); }
.rec-bar-fill.crit { background: var(--danger); }
.card .rec-bar { margin-top: 8px; }

/* ---- WinCollect: kompakt statusstribe ---- */
.wc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 10px 16px; border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft); box-shadow: var(--sh-2);
}
.wc-top-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wc-top-title h2 { font-size: 16px; color: var(--accent); }
.wc-top-sub { font-size: 11.5px; color: var(--ink-soft); cursor: help; }
.wc-top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; align-items: stretch; }
.wc-status > .panel { margin-bottom: 0; }
@container page (max-width: 1500px) {
  .wc-status { grid-template-columns: repeat(2, 1fr); }
  /* Med tre kort i to spalter havner det tredje alene paa anden raekke med
     en tom halvdel ved siden af. Lad det spaende over begge - udfaldslisten
     er den der har mest brug for bredden, for hver linje er en saetning. */
  .wc-status > :nth-child(3) { grid-column: 1 / -1; }
}
@container page (max-width: 1000px) { .wc-status { grid-template-columns: 1fr; } }
.panel-head.compact { margin-bottom: 10px; }
.panel-head.compact h2 { font-size: 14px; }
.hint.tiny { font-size: 11px; line-height: 1.5; margin-top: 10px; }
.wc-status .gps-grid { grid-template-columns: repeat(3, 1fr); }
@container page (max-width: 1150px) {
  .wc-status .gps-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---- Stationslisten: kolonner der viger i rigtig raekkefoelge ----
   Maalt paa den rigtige tabel: handlingsknapperne fyldte 320px - mere end
   nogen datakolonne. Derfor strammes DE foerst. Data viger sidst, og i den
   raekkefoelge de er mindst noedvendige:
     ID       staar allerede i "Start (UTC)" - ren gentagelse
     Wire     tomt paa alt andet end fiskeristationer
     Duration kan regnes af start og stop
   Intet forsvinder fra data eller eksport - kun fra denne oversigt. */
.col-id { width: 150px; }
.col-type { width: 108px; }
/* GEAR CODE ALTID MED STORE BOGSTAVER (Christian). Nogle koder blev oprettet med
   smaa bogstaver ("Grab") og stod saa og stak ud mellem GOV/CTD/MIK. Vises
   uppercase ALLE steder; nye koder gemmes ogsaa uppercase (se app.js). */
.col-type, td.col-type, .st-type, .ss-type, .dn-type,
#opPick .type-pick-val, .type-pick .tp-val, .tp-row .tp-code { text-transform: uppercase; }
/* Uden pille behoever kolonnen ikke plads til en knap-lignende flade. */
.col-ok { width: 62px; }
.col-op { width: 90px; }
.col-num { width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.th-unit { font-weight: 400; opacity: .6; text-transform: none; }
tr.has-sub > td { border-bottom: none; }
.sub-row > td { padding-top: 0; padding-bottom: 9px; font-size: 12px; color: var(--ink-soft); }
.sub-row .sx { margin-right: 20px; }
.sub-row .sx b {
  color: var(--ink-soft); font-weight: 700; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; margin-right: 5px;
}
.sub-row .linked-note b { color: var(--ok); }

.stations-panel { container-type: inline-size; container-name: stations; min-width: 0; }
@container stations (max-width: 1320px) { .col-id, td.col-id { display: none; } }
@container stations (max-width: 1260px) {
  .col-act { width: auto; }
  .col-act .btn.small { margin-left: 4px; padding: 4px 8px; font-size: 11px; }
  .stations-panel .inst-table { font-size: 12px; }
  .stations-panel .col-time { width: auto; }
  .stations-panel .col-dur { width: 80px; }
}
@container stations (max-width: 1090px) {
  .inst-table th:nth-child(9), .inst-table td:nth-child(9) { display: none; }  /* Wire */
}
@container stations (max-width: 960px) {
  .col-dur { display: none; }
  .col-act .btn.small { margin-left: 3px; padding: 3px 6px; font-size: 10.5px; }
}
/* Sidste trin: en tand mindre skrift i hele tabellen. Det koster INGEN data -
   modsat at skjule endnu en kolonne - og zoom-slideren gør den alligevel
   stoerre igen. */
@container stations (max-width: 700px) {
  .stations-panel .inst-table { font-size: 11px; }
  .stations-panel .col-no { width: 104px; }
}
@container stations (max-width: 810px) {
  .col-op { display: none; }
  /* Sidste udvej foer en scrollbar: lad knapperne ombryde. Hoejde er
     billigere end bredde her - intet data forsvinder. */
  .col-act { white-space: normal; width: 92px; }
  .col-act .btn.small { display: inline-block; margin: 2px 0 2px 3px; }
}

/* ---- Skalerings-slider i topbjaelken ---- */
.ui-scale {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
}
.us-btn {
  width: 21px; height: 21px; flex: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07); color: var(--on-bar);
  font-size: 14px; font-weight: 700; line-height: 1; padding: 0;
}
.us-btn:hover { background: var(--accent); color: #04222a; border-color: transparent; }
.us-btn:active { transform: translateY(1px); }
.ui-scale input[type=range] {
  width: 96px; height: 4px; cursor: pointer; accent-color: var(--accent);
  background: transparent;
}
.us-val {
  font-size: 11px; color: var(--on-bar-soft); font-variant-numeric: tabular-nums;
  min-width: 34px; text-align: right; cursor: pointer; user-select: none;
}
/* Skalerings-knappen blev FOER skjult under 1100 px. Det var lige forkert:
   paa en gammel 4:3-monitor paa 1024x768 - praecis dér hvor 100 % er for stort
   og man vil ned paa 90 - forsvandt den ene knap der kunne rette det.
   Reglen stammer fra da den sad i topbaren og skulle spare bredde. Nu ligger den
   i tandhjulsmenuen, hvor der er plads nok, saa den bliver staaende altid. */

/* ---- Serveradresse under Data & Instruments ---- */
.backend-row, .datadir-row {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0;
}
.backend-row .pf, .datadir-row .pf { flex: 1; min-width: 220px; }
.backend-row input, .datadir-row input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); color: var(--ink); font-size: 14px; font-family: inherit;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}

/* ---- Instrumentraekkens maalte takt ---- */
.rate-note { font-size: 12px; color: var(--ink-soft); line-height: 1.4; display: block; }

/* ---- Mappe-vaelger (serverens filsystem, ikke browserens) ---- */
.pick-row { display: flex; gap: 8px; align-items: stretch; }
.pick-row input { flex: 1; min-width: 0; }
.br-drives { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.br-drive.on { border-color: var(--accent); color: var(--accent); }
.br-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.br-path {
  flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px;
  background: var(--input-bg); border: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left;
}
.br-list {
  height: 300px; overflow-y: auto; border: 1px solid var(--line-soft);
  border-radius: 11px; background: var(--input-bg); padding: 5px;
}
.br-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ink); font-family: inherit; font-size: 14px;
}
.br-item:hover { background: var(--surface-3); }
.br-ico { opacity: .8; }
.br-empty, .br-loading, .br-err { padding: 14px; color: var(--ink-soft); font-size: 13px; }
.br-err { color: var(--danger); }
.br-note { min-height: 20px; margin-top: 10px; font-size: 12.5px; line-height: 1.6; }
.br-bad { color: var(--danger); font-weight: 600; }
.br-ok { color: var(--ok); }
/* Efter et valg: peg paa knappen der rent faktisk flytter logningen, saa man
   ikke tror at valget alene gjorde det. */
@keyframes nudge { 0%,100% { transform: none; } 50% { transform: translateY(-3px); } }
.btn.nudge { animation: nudge .45s 3; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.3); }

.host-help { margin: 0 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.host-help code { color: var(--accent); }

/* ---- Simulator: knappen og advarslen ---- */
.sim-banner {
  background: linear-gradient(180deg, var(--warn), #d99a13); color: #2a1c00;
  text-align: center; padding: 10px 18px; font-size: 14px; font-weight: 600;
  box-shadow: var(--sh-2); position: relative; z-index: 12;
}
.sim-banner .sb-where {
  font-weight: 400; opacity: .75; margin-left: 10px; font-size: 12.5px;
  white-space: nowrap;
}
.sim-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin: 4px 0 14px; border-radius: 12px;
  background: var(--surface-3); border: 1px solid var(--line-soft);
}
.sim-master .switch-label { font-weight: 700; }
.sim-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.sim-note.warn-text { color: var(--warn); }

/* Her laa 49 linjer til huskesedlerne i fladen (.note-form, .notes-list, .note,
   .snap-table m.fl.). Notesblokken er flyttet til serverpanelet, og saa var de
   regler ingen brugte. .switch bliver derimod staaende - den bruges 17 andre
   steder, og det tjekkede jeg foer jeg slettede. */

/* Mens temaet skifter: ingen overgange. Se applyTheme() - ellers bliver
   elementer med transition haengende paa den gamle accentfarve. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

/* ---- Stationens detaljer ---- */
/* .modal-card.det-card (ikke bare .det-card): .modal-card.wide satte 1020px oveni,
   saa detaljekortet var for smalt og "Changes afterwards" blev klemt i sin spalte.
   Bredere kort -> begge spalter faar mere plads. */
/* En anelse stoerre (Christian 28/8): Trawl geometry-fanen skulle scrolles for
   at naa knapperne i bunden. 1280 px bred + 94vh hoej rummer hele fanen. */
.modal-card.det-card { width: min(1280px, calc(100vw - 32px)); }
.det-card { max-height: calc(94vh / var(--ui-zoom, 1)); display: flex; flex-direction: column; }
.det-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.det-top h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.det-sub { font-size: 12px; color: var(--ink-soft); font-family: ui-monospace, Consolas, monospace; }
/* ---- STATIONS-HUB: sidebar + hovedomraade ------------------------------
   Sidebaren viser ALT der er koblet paa stationen (den erstatter raekkens gamle
   "⋯"-menu); hovedomraadet skifter. Scanmar/CTD tegnes her inde. */
/* FAST hoejde. Uden den fik kortet hver fanes egen hoejde: Overview er lang,
   "Dana Live" er ét lille kort - saa vinduet sprang op og ned i stoerrelse hver
   gang man klikkede i sidebaren, og knapperne flyttede sig under musen. */
.det-hub { display: grid; grid-template-columns: 250px minmax(0, 1fr);
  height: min(64vh, 620px); min-height: 0; margin-top: 16px;
  border-top: 1px solid var(--line-soft); }
@container page (max-width: 820px) { .det-hub { grid-template-columns: 1fr; } }
.det-side { padding: 12px 10px 12px 0; border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
@container page (max-width: 820px) {
  .det-side { border-right: none; border-bottom: 1px solid var(--line-soft);
    flex-direction: row; flex-wrap: wrap; padding: 10px 0; }
}
.det-nav { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; border-left: 2px solid transparent; border-radius: 11px;
  background: transparent; color: var(--ink); font: inherit; font-size: 14.5px;
  text-align: left; cursor: pointer; transition: background .13s, color .13s;
  white-space: nowrap; }
@container page (max-width: 820px) { .det-nav { width: auto; } }
.det-nav:hover { background: rgba(var(--accent-rgb), .08); }
.det-nav[aria-selected="true"] { background: rgba(var(--accent-rgb), .14);
  border-left-color: var(--accent); color: var(--ink-strong, var(--ink)); font-weight: 600; }
.dn-ico { width: 19px; flex: none; text-align: center; font-size: 15px; opacity: .92; }
/* "Plus" i Stationsliste Plus: guld = noget ekstra godt (Christian). Samme guld i
   nav-punktet (.dn-plus) og i handlings-kortets overskrift (.da-plus). */
.dn-plus, .da-plus { color: #f2b84b; font-weight: 800; letter-spacing: .02em; }   /* guld = Plus (fiskeri) */
.dn-mini, .da-mini { color: #4fd1c5; font-weight: 800; letter-spacing: .02em; }   /* teal = Mini (ikke-fiskeri) */
.dn-plus, .dn-mini { margin-left: 1px; }   /* mellemrummet i teksten giver resten */
.dn-badge { margin-left: auto; font-size: 10.5px; color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace; }
.det-rule { height: 1px; background: var(--line-soft); margin: 9px 8px; }
@container page (max-width: 820px) { .det-rule { display: none; } }
/* padding-right: luft mellem kortene og rullebjaelken - foer laa den klods op
   ad kanten af kortene. */
/* LIGE MEGET LUFT I BEGGE SIDER. Der var 20 px til venstre og 14 til hoejre,
   fordi rullebjaelkens plads laa i hoejre side - saa alt der er centreret i
   panelet (Scanmar-kortet f.eks.) stod 3 px til venstre for midten. Samme
   sum, saa ingenting flytter sig i bredden. */
.det-main { overflow-y: auto; padding: 16px 17px 4px 17px; min-width: 0; }
@container page (max-width: 820px) { .det-main { padding-left: 0; } }
/* Overview i et RIGTIGT grid, ikke flydende spalter. Med `columns` bestemte
   browseren selv hvor spaltebruddet faldt, saa kortene skiftede plads naar et
   felt blev laengere - og halvdelen af "Position" kunne ende oeverst i hoejre
   spalte. Grid laeser venstre->hoejre i den raekkefoelge de er skrevet. */
.det-main.det-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px; align-content: start; }
@container page (max-width: 900px) { .det-main.det-grid { grid-template-columns: 1fr; } }
.det-sub-h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 12px 0 6px; }
.det-sec .det-sub-h:first-child { margin-top: 0; }
/* Handlings-panel (Dana Live, Report, Export, Edit): siger hvad der sker. */
.det-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 22px 20px; }
.det-act h3 { margin: 0 0 5px; font-size: 16.5px; }
.det-act p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; max-width: 52ch; }
.da-ico { font-size: 29px; flex: none; }
.da-go { margin-left: auto; }
/* To knapper (Print + Download) i stedet for én - wrapperen styrer placeringen. */
.da-btns { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.da-btns .da-go { margin-left: 0; }
.da-tag { display: inline-block; margin-top: 9px; font-size: 11px; border-radius: 999px; padding: 3px 11px; }
.da-tag.full { color: #8fd7ff; background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.36); }
.da-tag.file { color: #c8f0d8; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.36); }
/* Lille forhaandsvisning under Dana Live-kortet: neon-kurver paa moerk bund,
   saa man kan se der ER data foer man aabner fuldskaerm. Hele fladen er klikbar. */
.da-preview {
  display: block; width: 100%; margin-top: 14px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% -20%, #0e2036, #060d16 70%);
  position: relative; font: inherit;
}
.da-preview:hover { border-color: rgba(var(--accent-rgb), .55); }
.da-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.da-prev-cv { display: block; width: 100%; height: 150px; }
.da-prev-tag {
  position: absolute; left: 12px; bottom: 9px; font-size: 11px; letter-spacing: .04em;
  color: #9fc6de; background: rgba(6,14,22,.62); padding: 3px 9px; border-radius: 999px;
  pointer-events: none;
}
/* "Aabn i stor stoerrelse" over en indlejret visning (Scanmar/CTD). */
.det-embed-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0 0 8px; }
/* Overblik-handlingsbjaelken spaender hele kort-grid-bredden (ellers bliver den
   selv en grid-celle og klemmes ned i én spalte). */
.det-ov-bar { grid-column: 1 / -1; margin-bottom: 14px; }

/* "Data & export"-menu: ÉN samlet dropdown der afloeser raekken af 6 knapper i
   Scanmar-baren (Christian: for mange knapper samme sted). Bygget som tandhjuls-
   menuen: ikon + etiket + forklarende linje pr. handling. */
.dx-wrap { position: relative; display: inline-block; }
.dx-btn { display: inline-flex; align-items: center; gap: 7px; }
.dx-caret { font-size: 10px; opacity: .8; }
.dx-menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 60;
  min-width: 330px; max-width: min(92vw, 430px);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--sh-4, 0 18px 50px rgba(0,0,0,.5));
  padding: 6px; display: flex; flex-direction: column; gap: 1px;
  text-align: left;
}
.dx-menu.hidden { display: none; }
/* POPUP-udgaven (28/8): menuen flyttes ind i et modal-skal - saa skal den
   ligge i FLOWET, ikke svaeve absolut ud af kortet. */
.dx-pop-card { width: min(560px, calc(100vw - 40px)); padding: 20px 22px; }
/* OVER stationskortet (z 90) OG analysevinduet (op til 120): popups der
   aabnes INDE fra kortet skal lande foran det, ikke bagved (Christian 28/8:
   "sensor reception ligger bagved card"). Gaelder ogsaa Data & export-popup'en
   og Tekniker-panelet, som kan aabnes mens kortet staar aabent. */
#recModal, #dxModal, #teknModal { z-index: 130; }
/* Varmekortet aabnes fra stationskortet (z-index 90) og skal ligge over det. */
#ofPrintModal { z-index: 130; }
#svModal { z-index: 130; }
/* SENSOR RECEPTION-POPUP: varmekort - groen/rav/roed pr. celle efter hvor stor
   en del af sensorens telegrammer der kom gyldigt igennem. */
.rec-card { width: min(980px, calc(100vw - 36px)); padding: 20px 24px; }
.rec-knapper { display: inline-flex; gap: 8px; }
.rec-scroll { overflow: auto; max-height: calc(64vh / var(--ui-zoom, 1));
  border: 1px solid var(--line-soft); border-radius: 10px; margin-top: 10px; }
.rec-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.rec-tbl th { position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  padding: 7px 10px; text-align: left; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); }
.rec-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.rec-stn { font-weight: 700; color: var(--ink); }
.rec-dato { color: var(--ink-soft); }
.rec-c { text-align: center; }
.rec-c b { display: block; font-size: 13px; }
.rec-c span { font-size: 10px; opacity: .75; }
.rec-god { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.rec-mellem { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.rec-svag { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.rec-tom { color: var(--ink-soft); opacity: .5; }
.rec-svagest { color: var(--ink-soft); white-space: nowrap; }
/* Kanal-chips ("⚙ Channels"): hvilke sensorer oversigten viser. */
.rec-kanpanel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft); }
.rec-chip { padding: 4px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-3); color: var(--ink-soft);
  border: 1px solid var(--line-soft); font-size: 12px; font-weight: 600;
  transition: color .12s, border-color .12s, background .12s; }
.rec-chip:hover { color: var(--ink); border-color: var(--line); }
.rec-chip.on { background: rgba(var(--accent-rgb), .16); color: var(--accent);
  border-color: rgba(var(--accent-rgb), .5); }
/* "Show N stations without trawl readings"-raekken i bunden af varmekortet. */
.rec-mere-r td { padding: 10px; text-align: left; }
.rec-mere-r .hint { margin-left: 10px; font-size: 11px; }
/* Legendens smaa farvekapsler i hint-linjen. */
.rec-nix { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; margin: 0 2px; }
.dx-pop-slot .dx-menu.dx-menu-pop { position: static; min-width: 0; max-width: none;
  border: 0; box-shadow: none; background: transparent; padding: 8px 0 0; }
.dx-row {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font-family: inherit; font-size: 13.5px; line-height: 1.25;
}
.dx-row:hover { background: var(--surface-3); border-color: var(--line-soft); }
.dx-ico { flex: none; width: 22px; text-align: center; font-size: 15px; color: var(--accent); }
.dx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.dx-sub { font-size: 11px; color: var(--ink-soft); font-weight: 400; white-space: normal; }
.dx-divider { height: 1px; background: var(--line-soft); margin: 4px 6px; }
/* Clearance-taersklen er en KONTROL i menuen (ikke en handling): ingen hover-boks,
   luk ikke menuen naar man taster. */
.dx-thr { cursor: default; }
.dx-thr:hover { background: transparent; border-color: transparent; }
.dx-thr-in { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.dx-thr-in input { width: 58px; padding: 3px 7px; border-radius: 7px;
  border: 1px solid var(--line-soft); background: var(--input-bg); color: var(--ink);
  font-variant-numeric: tabular-nums; }
.dx-thr-in input:disabled { opacity: .55; cursor: not-allowed; }

/* --- Fiskeline-fanen: felt + vaerdi + Copy pr. raekke --- */
.fl-wrap { padding-top: 2px; }
.fl-bar { margin-bottom: 6px; }
.fl-hint { margin: 0 0 12px; color: var(--ink-soft); font-size: 13px; max-width: 640px; }
.fl-list { display: flex; flex-direction: column; gap: 7px; max-width: 640px; }
.fl-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 8px 12px; background: var(--input-bg); border: 1px solid var(--line-soft); border-radius: 10px; }
.fl-k { color: var(--ink-soft); font-weight: 600; }
.fl-u { color: var(--ink-soft); opacity: .75; font-weight: 400; font-size: 12px; }
.fl-v { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; min-width: 130px; }
.fl-copy { min-width: 92px; }
.fl-copy.ok { color: #29b36b; border-color: #29b36b; font-weight: 700; }
.fl-copy.bad { color: var(--danger); border-color: var(--danger); }
.fl-copy:disabled { opacity: .4; cursor: default; }
/* Manuelle Fiskeline-felter (ikke fanget af Mini-SIS): daempet, "enter in Fiskeline". */
.fl-row.fl-manual { opacity: .62; }
.fl-manual-tag { color: var(--ink-soft); font-style: italic; font-weight: 400; font-size: 12px; }
.fl-sec { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); }
.det-big { display: inline-flex; align-items: center; gap: 7px; }
/* "Back to station" i fuldskaerms-visningerne: tilbage til kortet man kom fra,
   i stedet for helt ud til listen. Staar til VENSTRE for overskriften, og i
   accentfarven - det er den knap man leder efter naar man er faerdig med at
   kigge, saa den maa ikke se ud som endnu en graa knap i raekken. */
.back-btn { display: inline-flex; align-items: center; gap: 7px; margin-right: 14px;
  color: var(--accent); font-weight: 700;
  border-color: rgba(var(--accent-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .08)); }
.back-btn:hover { filter: none; background: rgba(var(--accent-rgb), .26); border-color: var(--accent); }
.back-btn.hidden { display: none; }
.ctp-back, .dl-back {
  width: auto !important; padding: 0 14px; font-size: 13px !important; font-weight: 700;
  color: #7ee7f2; border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.16);
}
.ctp-back:hover, .dl-back:hover { background: rgba(34,211,238,.3); color: #fff; }
.ctp-back.hidden, .dl-back.hidden { display: none; }
.det-sec {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 18px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.det-sec h3 {
  margin: 0 0 9px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.det-note { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; }
/* KASSEREDE telegrammer i editor-tabellen ("Show invalid"): RAV-GULE, kursiv
   og overstreget (Christian 28/8: de graa lignede rigtige tal for meget).
   Rav og ikke roedt: ROEDT betyder "et menneske har klikket tallet ud" - rav
   er Scanmars EGET stempel, samme farve som "67 invalid" paa kortet. Ingen
   pointer: de kan ikke klikkes ind/ud af gennemsnittet. */
/* Den staaende forklaring paa de rav-gule tal - laeses uden mus. */
.antbl-inv-note { margin: 0 0 9px; padding: 7px 11px; border-radius: 9px;
  background: var(--wait-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  font-size: 11.5px; line-height: 1.5; }
.antbl-inv-note b { font-weight: 700; }
/* INGEN SPOEGELSESTAL (28/8): cellen er TOM - kun en rav-vasket flade, saa
   man ser AT der manglede maaling, uden at et baaret-videre tal ligner en.
   Vaerdien sensoren bar videre staar i tooltip'en. */
.antbl-inv { background: color-mix(in srgb, var(--warn) 13%, transparent);
  cursor: help; }
/* "Include N invalid"-knappen paa vaerdikortet: lille, tydeligt en handling.
   Rav naar den er slaaet TIL - samme farvesprog som "ikke godkendt endnu". */
/* RAV, ikke blaa (Christian 28/8: "det hele er meget blaat") - knappen handler
   om de rav-gule tal, saa den taler deres farve. Slaaet TIL = fyldt rav med
   moerk tekst, saa tilstanden ses paa afstand. */
.antbl-inkl { display: block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: var(--wait-soft);
  color: var(--warn); font-size: 10px; font-weight: 600; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s; }
.antbl-inkl:hover { border-color: var(--warn); }
.antbl-inkl.on { background: var(--warn); color: #182130;
  border-color: var(--warn); }
/* "Not averaged yet"-flaget over sensor-tabellen: rav, ikke roedt - raa tal er
   ikke en fejl, de er bare ikke godkendt endnu. */
.det-flag { margin: 0 0 10px; padding: 8px 11px; border-radius: 9px;
  background: var(--wait-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  font-size: 12px; font-weight: 600; line-height: 1.5; }
.det-list { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; }
.det-list dt {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .8; padding-top: 2px; white-space: nowrap;
}
.det-list dd {
  margin: 0; font-size: 13.5px; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.45;
}
.det-hint { display: block; font-size: 11px; color: var(--warn); margin-top: 2px; }
.det-warn { color: var(--warn); font-weight: 600; }
.det-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.det-table th {
  /* INGEN text-align her. Den stod som "left" og vandt over centreringsreglen
     laengere op i filen - samme specificitet, men denne staar senere. Resultatet
     var venstrestillede overskrifter over centrerede celler. */
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; padding: 4px 7px;
  border-bottom: 1px solid var(--line);
}
.det-table td { padding: 4px 7px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.det-table tfoot td { border-bottom: none; border-top: 1px solid var(--line); }
.det-file { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; word-break: break-all; }
.det-empty, .det-loading, .det-err { font-size: 13px; color: var(--ink-soft); padding: 6px 0; }
.det-err { color: var(--danger); }
.det-note code { color: var(--accent); word-break: break-all; }
.det-to { color: var(--accent); }
.det-yes { color: var(--ok); font-weight: 600; }
.det-no  { color: var(--danger); font-weight: 600; }

/* ---- Efterreparation af gamle filer ---- */
.bf-explain {
  margin: 16px 0 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-3); border: 1px solid var(--line-soft);
}
.bf-explain p { margin: 0 0 9px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.bf-explain p:last-child { margin-bottom: 0; }
.bf-explain b { color: var(--ink); }
.bf-counts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bf-count {
  display: flex; align-items: baseline; gap: 9px; padding: 10px 16px;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line-soft);
}
.bf-count b { font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1; }
.bf-count span { font-size: 12px; color: var(--ink-soft); }
.bf-count.ok b { color: var(--ok); }
.bf-count.skip b { color: var(--warn); }
.bf-count.bad b { color: var(--danger); }
.bf-none, .bf-done { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; padding: 4px 0; }
.bf-list { max-height: 300px; overflow-y: auto; border-radius: 11px; }
.bf-list:not(:empty) { border: 1px solid var(--line-soft); background: var(--input-bg); padding: 5px; }
.bf-row {
  display: grid; grid-template-columns: 84px 150px minmax(0, 1fr);
  gap: 12px; align-items: baseline; padding: 6px 9px; font-size: 12px;
  border-left: 3px solid transparent; border-radius: 7px;
}
.bf-row + .bf-row { border-top: 1px solid var(--line-soft); }
.bf-row.good { border-left-color: var(--ok); }
.bf-row.bad { border-left-color: var(--warn); }
.bf-kind { color: var(--ink-soft); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.bf-cruise { font-weight: 700; color: var(--ink); }
.bf-row.bad .bf-cruise { color: var(--warn); font-weight: 400; font-style: italic; }
.bf-path {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bf-path i { color: var(--warn); font-size: 11px; }

/* ---- Faelles bekraeftelsesboks ---- */
.cf-card h2 { color: var(--ink); margin-bottom: 12px; }
.cf-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.cf-body p:last-child { margin-bottom: 0; }
.cf-body b { color: var(--ink); }
.cf-body code { color: var(--accent); }
.btn.danger {
  background: linear-gradient(180deg, var(--danger), #a83a2e) !important;
  color: #fff !important; border-color: transparent !important;
}

/* ---- Stationstype-vaelger ---- */
/* Select'en er stadig sandheden, men skjult for oejet. Ikke display:none -
   den skal kunne laeses og saettes af koden uden overraskelser. */
/* Visuelt skjult, men stadig laesbar for koden.
   !important er ikke doven her: reglen skal slaa ALT andet, og den blev
   faktisk overskrevet af ".pf select { width: 100% }" (hoejere specificitet),
   saa det skjulte felt var 1905px bredt og skubbede hele siden ud til hoejre.
   Et hjaelpeklassenavn der kan tabes af en tilfaeldig anden regel, er
   ubrugeligt. */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* En KNAP, ikke et felt.

   Den havde inputfeltets nedsaenkede skygge og moerke bund, saa den stod som
   en tvilling til tekstfeltet ved siden af - og et felt inviterer til at
   taste, ikke til at trykke. Nu er den haevet som alt andet man klikker paa:
   lysere flade, synlig kant, skygge udad, og den loefter sig under musen. */
.type-pick {
  display: flex; align-items: center; gap: 13px; width: 100%; min-width: 0;
  padding: 11px 12px 11px 18px; border-radius: 10px; cursor: pointer;
  font-family: inherit; text-align: left;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.type-pick:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.07);
}
.type-pick:active { transform: translateY(1px); box-shadow: var(--sh-1); }
.type-pick:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: var(--sh-2), 0 0 0 3px rgba(var(--accent-rgb),.20);
}
.tp-face { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px; overflow: hidden; }
.tp-desc { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-empty { color: var(--ink-soft); font-size: 14px; }
/* Knappen er sin egen tekst - ingen brik i hoejre side.

   Foer stod "— select —" i venstre side og en CHOOSE-brik i hoejre, altsaa
   to ting i én bjaelke, og det laeses som et felt med en knap inden i. Nu er
   der ét ikon og ét ord, centreret: "Choose". Er der valgt en type, staar
   den i stedet, venstrestillet som den vaerdi den er. */
.tp-ico {
  flex: 0 0 auto; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round;
  color: var(--accent); opacity: .9;
}

/* Intet valgt: ikon og ord staar midt paa knappen som ét udsagn. */
.type-pick:not(.has-type) {
  justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}

/* Valgt: vaerdien traeder frem og laegger sig til venstre, hvor man laeser. */
.type-pick.has-type { justify-content: flex-start; }
.type-pick.has-type .tp-ico { opacity: .55; }

/* Fast hoejde. Versalerne i "CHOOSE" er en anelse hoejere end typenavnet, saa
   knappen skiftede 1 px naar man valgte - nok til at feltraekken under den
   rykkede sig. */
.pf-type .type-pick { padding: 10px 14px; min-height: 42px; }
/* Feltet mangler: samme varme tone som de andre paakraevede felter */
/* Tomt og paakraevet - men stadig en KNAP. Reglen malede foer inputfeltets
   moerke bund henover, saa den lignede et tekstfelt igen i praecis den
   tilstand man foerst ser den i. Nu beholder den sin haevede flade og faar
   kun kanten og et strejf af toning. */
.pf-missing .type-pick {
  border-color: rgba(var(--needed-rgb), .45);
  /* Et SVAGT lys der stryger hen over feltet for at traekke oejet til det ene
     der mangler foer START. Det er en animeret BAGGRUND (ikke et ::after), saa
     der ikke skal bruges overflow:hidden - som ville klippe fokus-ringen.
     Foerste lag er stryget; de to under er den samme needed-tint + basisflade
     som foer. Stryget holder pause mellem hvert traek (55%->100%), saa det ikke
     er konstant bevaegelse - vigtigt paa en bro, hvor uafbrudt flimmer i
     oejenkrogen goer folk daarlige. Slaaet fra ved reduced-motion. */
  background:
    linear-gradient(105deg, transparent 42%, rgba(var(--accent-rgb), .11) 50%, transparent 58%),
    linear-gradient(0deg, rgba(var(--needed-rgb), .08), rgba(var(--needed-rgb), .08)),
    linear-gradient(180deg, var(--surface-3), var(--surface-2));
  background-size: 220% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: type-sweep 3.4s ease-in-out infinite;
}
@keyframes type-sweep {
  0%       { background-position: 150% 0, 0 0, 0 0; }
  55%,100% { background-position: -50% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-missing .type-pick { animation: none; }
}
.pf-missing .tp-empty { color: rgba(var(--needed-rgb), .8); }

.tp-card h2 { margin-bottom: 6px; }
/* SKEL MELLEM REDSKABSBLOKKE - se gearSkel() i app.js. Sættes KUN når
   tabellen er sorteret på Gear code, så stregen altid falder på en ægte
   grænse. En hårfin linje og lidt luft: det skal kunne ses uden at rækkerne
   holder op med at være én sammenhængende liste. */
.st-row.st-gear-skel > td { border-top: 1px solid rgba(140,180,220,.34);
  padding-top: 13px; }
.st-row.st-gear-skel + .st-row > td { padding-top: 9px; }

/* Tælleren under redskabslisten: hvad giver det man har valgt LIGE NU.
   Fast mindstehøjde, så popuppen ikke hopper i højden når teksten skifter
   mellem "no filter" og en liste af redskaber. */
/* URTJEKKET. Ét gitter pr. raekke, saa kolonnerne staar under hinanden ned
   gennem listen - man scanner efter DEN ene station der skiller sig ud. */
.clk-row { display: grid; grid-template-columns: 62px 62px 56px 1fr auto;
  gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.035); margin-bottom: 5px; font-size: 13px; }
.clk-row b { font-weight: 800; }
.clk-gear, .clk-op { color: var(--ink-soft, #9fc0d2); font-size: 12px; }
.clk-dom { color: var(--ink-soft, #9fc0d2); font-size: 12px; }
.clk-tal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.clk-tal i { font-style: normal; color: #7bd88f; font-weight: 700; }
/* RAMT skal kunne ses uden at laese - det er derfor man aabnede vinduet. */
.clk-row.er-ramt { background: rgba(240,120,60,.14);
  box-shadow: inset 0 0 0 1px rgba(240,120,60,.34); }
.clk-row.er-ramt .clk-dom { color: #f0a06a; }
/* "Kan ikke afgoeres" er hverken godt eller skidt - det maa ikke ligne nogen
   af delene, saa det er bare daempet. */
.clk-row.er-ukendt { opacity: .6; }
/* KUN STARTEN skaev: varigheden er rigtig, kun klokkeslettene er forskudt.
   Det er hverken en fejl i tallene eller "ved ikke" - saa det faar sin egen,
   rolige markering. */
.clk-row.er-kunstart { background: rgba(120,170,255,.10);
  box-shadow: inset 0 0 0 1px rgba(120,170,255,.26); }
.clk-row.er-kunstart .clk-dom { color: #9fc4f5; }

.tp-sum { margin: 10px 2px 0; min-height: 17px; font-size: 12.5px;
  color: var(--muted, #93a7bb); font-variant-numeric: tabular-nums; }

.tp-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }
.tp-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.tp-list:focus { outline: none; }
.tp-row {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 11px; cursor: pointer; font-family: inherit;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  transition: border-color .12s, background .12s;
}
.tp-row:hover { border-color: var(--accent); background: var(--surface-3); }
.tp-row:focus-visible, .tp-row:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.20);
}
.tp-row.on { border-color: var(--accent); }
.tp-row .type-name { flex: 0 0 auto; font-size: 14px; }
.tp-row-desc { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.tp-tick { color: var(--accent); font-weight: 700; flex: 0 0 auto; }

/* Segment-wrappere (pille-celle + handlings-gruppe). display:contents = de findes
   IKKE i layoutet, saa raekken ser ud PRAECIS som foer paa skibet. Aqua-demo
   (herunder) goer dem til smaa kort, saa raekken bliver mere struktureret. */
.tp-cell-pill, .tp-acts { display: contents; }
/* LIVE (forfremmet fra demo 27/8): PILLEN staar UDENFOR kort (naturlig bredde -
   flere bogstaver skubber ikke et kort skaevt), TEKSTEN er i sit inset-kort, ✎/✕
   i sit. `--seg-inset` toner kortet efter tema (moerk paa moerke, let paa lyse). */
:root { --seg-inset: rgba(0, 0, 0, .22); --seg-inset-hover: rgba(255, 255, 255, .11); }
:root[data-mode="light"] { --seg-inset: rgba(0, 0, 0, .05); --seg-inset-hover: rgba(var(--accent-rgb), .13); }
.tp-card .tp-row {
  gap: 11px; background: transparent; border-color: transparent; padding: 0;
}
.tp-card .tp-row:hover { background: transparent; }
/* HOVER: navn-kortet faar en klart LYSERE baggrund, saa man tydeligt ser hvor musen
   er (Christian 27/8). Lys wash paa moerke kort, accent-tint paa lyse temaer. */
.tp-card .tp-row:hover .tp-row-desc {
  background: var(--seg-inset-hover); border-color: rgba(var(--accent-rgb), .6);
}
.tp-cell-pill {
  display: flex; align-items: center; justify-content: flex-start;
  background: transparent; border: 0; padding: 0;   /* UDENFOR kort */
}
.tp-card .tp-row-desc {
  position: relative;                 /* til check-maerket INDE i kortet */
  display: flex; align-items: center; align-self: stretch;
  background: var(--seg-inset); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 9px 12px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.tp-acts {
  display: inline-flex; align-items: center; gap: 2px; align-self: stretch;
  margin-left: 2px; padding: 3px 4px;
  background: var(--seg-inset); border: 1px solid var(--line-soft); border-radius: 9px;
}
/* VALGT raekke - REDESIGNET 27/8. Den gamle loese fokus-ring om den gennemsigtige
   knap + den svaevende ✓-glyph i sin egen grid-kolonne var bugget/malplaceret.
   Nu: navn-kortet FYLDES accent + faar en solid accent-kant, og check-maerket
   sidder INDE i kortet til hoejre. Ét entydigt "det her er valgt". */
.tp-card .tp-row.on .tp-row-desc {
  background: rgba(var(--accent-rgb), .16);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .30);
  padding-right: 34px;                /* plads til check-maerket */
  color: var(--ink); font-weight: 600;
}
.tp-card .tp-row.on .tp-row-desc::after {
  content: "\2713"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 15px; font-weight: 900; line-height: 1;
}
/* Den loese ✓-glyph (JS-udsendt) skjules i kort-layoutet - badgen ovenfor er nu
   markeringen. */
.tp-card .tp-tick { display: none; }
/* INGEN loes ring om den gennemsigtige knap. Museklik viser markering via det
   fyldte kort; TASTATUR-fokus vises paa selve navn-kortet, saa ringen flugter med
   det man ser (samme afrundede boks). */
.tp-card .tp-row:focus-visible, .tp-card .tp-row:focus { box-shadow: none; }
.tp-card .tp-row:focus-visible .tp-row-desc {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
}
/* "ACTIVE"-maerket i togt-vaelgeren (hvilket togt der optages lige nu). */
.cp-tag { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
  background: rgba(var(--accent-rgb), .16); color: var(--accent); }

/* Connected screens-popup: én raekke pr. forbundet skaerm (IP · rolle · varighed). */
.cl-head { font-weight: 700; margin: 2px 0 10px; color: var(--ink); }
.cl-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 8px 12px; background: var(--input-bg); border: 1px solid var(--line-soft);
  border-radius: 10px; margin-bottom: 7px; }
.cl-ip { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.cl-role { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.cl-role.is-master { background: rgba(var(--accent-rgb), .16); color: var(--accent); }
.cl-since { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tp-none { font-size: 13px; color: var(--ink-soft); padding: 10px 2px; }
/* Afledt felt paa WinCollect-kortet - regnet ud, ikke maalt. */
.wc-field.derived { border-style: dashed; }

/* ---- 1) ACTION: den mulige handling er den store ----
   ISA-101: farve og stoerrelse hoerer til dér hvor der skal handles. En
   deaktiveret knap i fuld stoerrelse og fuld farve konkurrerer med den man
   faktisk kan trykke paa. */
/* Baandet paa bredden. Ud over ca. 420px giver ekstra bredde ingen gevinst i
   traefsikkerhed - knappen holder bare op med at ligne en knap og begynder at
   ligne et banner. Og et maettet roedt felt paa den stoerrelse er sproget for
   NOEDSTOP, ikke for en normal afslutning paa et traek. */
.op-actions-card .op-actions { grid-template-columns: 2fr 1fr; }
.op-actions-card.running .op-actions { grid-template-columns: 1fr 2fr; }
.op-actions-card .big-btn { width: 100%; max-width: 420px; }
.op-actions-card .big-btn:disabled { max-width: 320px; }
/* Roligere roed: stadig utvetydig, men ikke alarmklokke. Alarmfarven skal
   vaere reserveret til det der faktisk er galt. */
.op-actions-card .big-btn.stop:not(:disabled) {
  background: linear-gradient(180deg, #b8503f, #94382c);
}
.op-actions-card .big-btn { transition: min-height .18s, font-size .18s; }
.op-actions-card .big-btn:disabled { min-height: 46px; font-size: 14px; }
.op-actions-card .big-btn:not(:disabled) { min-height: 76px; font-size: 22px; }


/* ---- WinCollect er rent visuel ---- */
.wc-readonly {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .7; padding: 4px 10px;
  border: 1px dashed var(--line-soft); border-radius: 999px;
}

/* ---- Play/stop som rigtige ikoner ---- */
.big-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.bb-icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.op-actions-card .big-btn:not(:disabled) .bb-icon { width: 27px; height: 27px; }
.op-actions-card .big-btn:disabled .bb-icon { width: 17px; height: 17px; }

/* ---- Selvtjek: klokke i topbaren ---- */
.health-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.hb-bell { width: 17px; height: 17px; fill: currentColor; }
.hb-dot {
  position: absolute; right: 4px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ink-soft);
  box-shadow: 0 0 0 2px var(--bar);
}
.hb-ok .hb-dot { background: var(--ok); box-shadow: 0 0 0 2px var(--bar), 0 0 8px var(--ok); }
.hb-warn .hb-dot { background: var(--warn); box-shadow: 0 0 0 2px var(--bar), 0 0 8px var(--warn); }
/* Kun FEJL blinker. Blinker alting, holder man op med at se det. */
.hb-error .hb-dot {
  background: var(--danger); box-shadow: 0 0 0 2px var(--bar), 0 0 10px var(--danger);
  animation: hbpulse 1.3s ease-in-out infinite;
}
@keyframes hbpulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
/* Flex-centrering i stedet for line-height + text-align: et tal paa 15 px
   linjehoejde i en 15 px kasse ligger rigtigt for ét ciffer og en anelse skaevt
   for to. Og en ring i baggrundsfarven, saa tallet loefter sig fra klokken i
   stedet for at smelte sammen med den. */
.hb-count {
  position: absolute; right: -3px; bottom: -2px; min-width: 16px; height: 16px;
  padding: 0 3px; border-radius: 999px; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--ink-soft);
  box-shadow: 0 0 0 2px var(--bar, var(--surface));
  font-variant-numeric: tabular-nums;
}
.hb-warn .hb-count { background: var(--warn); color: #2a1c00; }
.hb-error .hb-count { background: var(--danger); }
.hb-ok .hb-count { display: none; }

/* ---- Selvtjek: panelet ---- */
.hm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.health-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px;
               overflow-y: auto; }
.hc {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-left-width: 3px;
}
.hc-ok { border-left-color: var(--ok); }
.hc-warn { border-left-color: var(--warn); }
.hc-error { border-left-color: var(--danger); }
.hc-mark {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.hc-ok .hc-mark { color: var(--ok); }
.hc-warn .hc-mark { color: var(--warn); }
.hc-error .hc-mark { color: var(--danger); }
.hc-body { min-width: 0; }
.hc-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.hc-detail { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 3px;
             word-break: break-word; }
.hc-fix {
  margin-top: 7px; padding: 8px 11px; border-radius: 9px;
  background: var(--input-bg); border: 1px solid var(--line-soft);
  font-size: 12px; line-height: 1.6; color: var(--ink); white-space: pre-wrap;
  font-family: ui-monospace, Consolas, monospace; word-break: break-word;
}
.hc-ok .hc-fix { display: none; }

/* ---------------- BETJENINGSRAEKKEN: 70/30 ----------------
   Togtet og felterne til venstre, de to knapper i deres egen smalle soejle
   til hoejre. De to kort var stablet, saa knapperne laa langt nede paa siden
   - man skulle rulle forbi alt det man LAESER for at naa det man TRYKKER paa.

   Reglerne staar sidst i filen med vilje: de skal vinde over de tidligere
   .op-actions-card-regler, der stiller knapperne side om side. */
/* Flex, ikke grid. Med grid-template-columns: 7fr 3fr blev den smalle soejle
   staaende OGSAA naar betjeningskortet var vaek - og det er det i view-only,
   hvor knapperne ikke findes. Resultatet var et togtkort paa 70 % med en tom
   trediedel ved siden af. Med flex vokser togtkortet selv ud i pladsen. */
.op-row {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; margin-bottom: 18px;
}
/* STAKNING STYRES AF WRAP, ikke af en container-query.
   Jeg proevede foerst "@container page (max-width: 900px) { flex-direction:
   column }". Det saa rigtigt ud paa min skaerm, men container-queries maaler i
   LOGISKE pixels, og UI-skalaen bruger `zoom` - saa ved 90 % (som skibets 4:3
   koerer) faldt breakpointet et helt andet sted, og kortet blev bredt MEN
   stakket: en tom stribe over knapperne. Christian: "du har fucket op."
   flex-wrap afhaenger IKKE af zoom: naar de to kort ikke kan staa ved siden af
   hinanden (basis-bredderne nedenfor + mellemrum ikke passer), falder
   knapperne UNDER af sig selv. Passer de, staar de side om side. Samme svar
   uanset zoom. */
.op-row > #opCard    { flex: 7 1 560px; }
.op-row > #opActions { flex: 3 1 320px; }

/* ---- kortet rullet op ----
   HELE #opCard forsvinder, og .op-resume tager dets plads som en tynd bjælke.
   START/STOP bliver, men lave. */
.op-klap {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 26px; height: 22px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--ink-soft); font-size: 15px; line-height: 1;
}
.op-klap:hover { color: var(--ink); border-color: var(--line); }
.op-card { position: relative; }

.op-row.klap #opCard { display: none; }
/* Bjælken arver kortets bredde (flex 7) så START/STOP bliver liggende præcis
   hvor de plejer — knapperne må ikke flytte sig, når man ruller kortet op. */
.op-resume {
  flex: 7 1 560px; min-width: 0; align-items: center; gap: 12px;
  text-align: left; cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--sh-2); padding: 0 16px; min-height: 44px;
}
.op-resume[hidden] { display: none; }
.op-row.klap .op-resume { display: flex; }
.op-resume:hover { border-color: rgba(var(--accent-rgb), .5); }
.op-resume:hover .opr-ret { color: var(--accent); }
.opr-chev { font-size: 16px; line-height: 1; color: var(--accent); }
.opr-titel { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.opr-txt {
  font-size: 13px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Mangler der noget, skal det se ud som noget der mangler - ellers laeser man
   "no station type" som en oplysning og ikke som grunden til at START er graa. */
.opr-txt.mangler { color: var(--warn); font-weight: 600; }
/* Koerer der en station, er bjælken ikke en mangel-besked men en kvittering. */
.opr-txt.koerer { color: var(--ok); font-weight: 700; }
.opr-ret {
  margin-left: auto; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap;
}
.op-row.klap .op-actions-card .op-actions { padding: 10px 14px; }
.op-row.klap .op-actions .big-btn,
.op-row.klap .op-actions .big-btn:disabled,
.op-row.klap .op-actions .big-btn:not(:disabled) {
  min-height: 44px; font-size: 13px;
}
.op-row.klap .op-actions .big-btn .bb-icon,
.op-row.klap .op-actions .big-btn:disabled .bb-icon,
.op-row.klap .op-actions .big-btn:not(:disabled) .bb-icon { width: 16px; height: 16px; }
/* Ikonet VED SIDEN AF teksten, ikke over den. Udslået står de i en søjle, og
   det er dét der gjorde knappen 62 px høj selv med min-height på 44: ikon 16 +
   to linjer tekst + 24 px polstring. På én linje bliver den 44. */
.op-row.klap .op-actions .big-btn { flex-direction: row; gap: 8px; padding: 8px 10px; }
.op-row.klap .op-actions .big-btn span { white-space: nowrap; }
/* Grunden til at START er grå står i resuméet ved siden af, og her kostede den
   en HEL ekstra gitterrække: 16 px tekst + 12 px mellemrum. Den samme oplysning
   to gange, for 28 px på en side hvor pladsen er problemet. */
.op-row.klap .start-why { display: none; }
.op-row.klap .op-actions,
.op-row.klap .op-actions-card.running .op-actions { grid-template-rows: auto; }

/* (flex-basis staar oeverst ved .op-row - basis 0 her ville betyde "aldrig
   wrap", saa de to linjer er flyttet derop med en rigtig basis.) */

/* Kortene har hver deres margin-bottom; i en raekke bliver den til et hul. */
.op-row > * { margin-bottom: 0; min-width: 0; }

/* De to knapper staar side om side - de er to ender af det samme arbejde, og
   de skal kunne ses i ét blik. Kortet centrerer dem lodret, saa soejlen ikke
   ser toptung ud ved siden af det hoejere togtkort. */
.op-row .op-actions-card { display: flex; align-items: center; }

.op-row .op-actions {
  width: 100%; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* Lige brede. I den brede opstilling faar den mulige handling flere spalter
   (2fr 1fr), men her er der ikke plads til at give og tage: en knap paa en
   trediedel af 320 px kan hverken rumme teksten eller rammes med en vaad
   finger. Forskellen baeres af hoejden i stedet. */
.op-row .op-actions,
.op-row .op-actions-card.running .op-actions { grid-template-columns: 1fr 1fr; }

.op-row .op-actions .big-btn.start { grid-column: 1; grid-row: 1; }
.op-row .op-actions .big-btn.stop  { grid-column: 2; grid-row: 1; }
.op-row .op-actions .start-why     { grid-column: 1 / -1; grid-row: 2; }

.op-row .op-actions .big-btn,
.op-row .op-actions .big-btn:disabled { max-width: none; width: 100%; }

/* Ikonet over teksten, og teksten paa to linjer.

   Paa én linje ved siden af ikonet kraever "START STATION" 164 px, og
   soejlen giver kun ca. 150 px pr. knap. I stedet for at skrumpe skriften
   til det ulaeselige stables de: ordene bevares fuldt ud, knappen bliver
   hoej og nem at ramme, og de to knapper faar samme form. */
.op-row .op-actions .big-btn {
  flex-direction: column; gap: 5px; padding: 12px 10px; line-height: 1.15;
}

.op-row .op-actions .big-btn span { white-space: normal; text-align: center; }

/* Side om side skal de to knapper have PRAECIS samme kasse.

   I den brede opstilling baerer stoerrelsen hierarkiet: den mulige handling
   er hoej, den umulige krymper. Ved siden af hinanden holder det ikke - to
   knapper i forskellig hoejde paa samme linje laeses som en fejl i
   opstillingen, ikke som en rangorden. Her siger FARVEN det i forvejen, og
   tydeligere: den mulige er fyldt groen eller roed, den umulige er en stiplet
   kontur. Saa er der ingen grund til ogsaa at rykke i geometrien. */
.op-row .op-actions { align-items: stretch; }

.op-row .op-actions .big-btn,
.op-row .op-actions .big-btn:disabled,
.op-row .op-actions .big-btn:not(:disabled) { min-height: 84px; font-size: 15px; }

.op-row .op-actions .big-btn .bb-icon,
.op-row .op-actions .big-btn:disabled .bb-icon,
.op-row .op-actions .big-btn:not(:disabled) .bb-icon { width: 22px; height: 22px; }

/* Er der ikke plads til to soejler, falder kortene under hinanden igen - og
   saa faar betjeningskortet hele bredden tilbage.

   900 er maalt, ikke gaettet: knappen holder op med at skrumpe ved 164 px, og
   med kortets 22 px polstring i hver side braekker den ud af kortet under ca.
   210 px. Ved 900 er soejlen 270 px og knappen 226 px - stadig luft.

   Her er der plads nok til den brede udgave igen: teksten VED SIDEN AF ikonet
   paa én linje, og stoerrelsen tilbage som baerer af hierarkiet. Uden det her
   blev en 420 px bred knap staaende med ikonet over to linjers tekst i 15 px -
   den smalle soejles opskrift, brugt et sted hvor der er masser af plads. */
/* Det gamle "@container page (max-width: 900px)"-blok der lagde raekken om paa
   hoejkant er FJERNET. Stakningen sker nu af flex-wrap (se .op-row oeverst), som
   ikke bliver narret af zoom. Naar knapperne wrapper ned paa deres egen linje,
   faar de fuld bredde og den normale brede knap-styling - praecis som i den
   brede opstilling, bare under felterne i stedet for ved siden af. */

/* Og paa en rigtig smal skaerm staar START over STOP. */
@container page (max-width: 560px) {
  /* Ogsaa .running-varianten. Den har en klasse mere og vandt derfor over
     regelen nedenunder, saa en koerende station fik to spalter paa en skaerm
     hvor der kun er plads til én - og knapperne endte paa 230 px midt i et
     kort paa 400. */
  .op-row .op-actions,
  .op-row .op-actions-card.running .op-actions { grid-template-columns: 1fr; }
  .op-row .op-actions .big-btn.stop { grid-column: 1; grid-row: 3; }
  .op-row .op-actions .big-btn,
  .op-row .op-actions .big-btn:disabled { max-width: none; }
}

/* ---------------- NY TYPE, INDE I VAELGEREN ----------------
   Foldet sammen som udgangspunkt: at VAELGE er det man gør hver gang, at
   OPRETTE er noget man gør en sjælden gang. Et aabent formularfelt under
   listen ville konkurrere med det man kom for. */
.tp-new {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.tp-new > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 12.5px; color: var(--accent); font-weight: 600;
  padding: 4px 2px;
}

.tp-new > summary::-webkit-details-marker { display: none; }
.tp-new > summary::before { content: "＋  "; font-weight: 700; }
.tp-new[open] > summary::before { content: "−  "; }
.tp-new > summary:hover { text-decoration: underline; }

.tp-new-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: 8px; margin-top: 10px;
}

.tp-new-row input {
  width: 100%; min-width: 0; padding: 9px 11px; border-radius: 9px;
  background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--line-soft); font-family: inherit; font-size: 13px;
}

.tp-new-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

.tp-new-hint { margin-top: 7px; font-size: 11.5px; color: var(--ink-soft); }

/* ---- Station group-vinduet: ryddet op (Christian) ------------------------
   Foer laante raekken gear-code'ens 3-kolonne-grid (kode|beskrivelse|knap), men
   her er der kun 2 felter - saa feltet blev klemt sammen og Add blev kaempestor.
   Nu: knap alene, og NAAR man aabner, et felt der fylder bredden. */
.group-new { margin-top: 10px; }
/* Beskeden fylder en linje selv naar den er tom - det gav et stort hul mellem
   "+ Add station name" og Close. */
.group-new-msg:empty { display: none; }
/* "+ Add station name" som GHOST-tilfoejelsesraekke, ikke en fyldt blaa
   klods paa blaa flade (Christian 28/8: "pas paa med blaa i blaa knapper").
   Stiplet kant + accenttekst = "her kan tilfoejes", samme bredde og
   afrunding som raekkerne ovenfor, saa den flugter med listen. */
.group-new { margin-top: 8px; }
.group-add-open { width: 100%; justify-content: center;
  background: transparent; border: 1.5px dashed var(--line);
  color: var(--accent); font-weight: 700; padding: 11px 12px;
  border-radius: 10px; box-shadow: none;
  transition: border-color .12s, background .12s; }
.group-add-open:hover { border-color: rgba(var(--accent-rgb), .7);
  background: rgba(var(--accent-rgb), .08); }
.group-new-edit { display: flex; gap: 8px; align-items: center; }
.group-new-edit.hidden { display: none; }
.group-new-edit input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 9px;
  background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--line-soft); font-family: inherit; font-size: 13.5px;
}
.group-new-edit input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.group-new-edit .btn { flex: none; }
/* ✎/✕ skal flugte med raekken (de stod og "svaevede" ved siden af). */
#groupList .op-row-wrap { align-items: center; }
#groupList .op-edit, #groupList .op-del { align-self: stretch; }

/* ENS RAEKKER (Christian).
   "— none —" staar UDEN ✎/✕ og var derfor 64 px bredere end de oevrige, saa
   hoejrekanten hoppede midt i listen. Vi giver den samme indrykning som
   knap-omraadet fylder, og laaser alle raekker til samme hoejde. */
/* Pladsholderens bredde = de TO knapper (33,75 px hver) + mellemrummet MELLEM
   dem (6 px) = 73,5. Knap-varianten har nemlig to mellemrum, pladsholder-varianten
   kun ét - derfor ikke bare "bredden af knapperne".
   NB: maalt i RIGTIGE css-pixels. getBoundingClientRect giver VISUELLE pixels, og
   ved 80 % skala ser 64 css-px ud som 51 - det narrede mig et par gange. */
#groupList { display: flex; flex-direction: column; gap: 8px; }
/* "— none —"-raekken baerer en USYNLIG kopi af ✎/✕-pladen (.grp-acts-ghost) i
   stedet for den gamle haandmaalte spacer - samme geometri pr. konstruktion. */
.grp-acts-ghost { visibility: hidden; }
/* Kun naar raekken staar UDEN wrapper (view-only: ingen knapper overhovedet). */
#groupList > .tp-row { width: 100%; }
#groupList .tp-row {
  min-height: 46px; box-sizing: border-box;
  align-items: center;            /* baseline gav 1 px forskel paa raekkerne */
}
/* Gruppe-vaelgeren i kort/pille-stil (27/8, som operatoer + gear code):
   pillen er gruppens NAVN i samme lilla som .pill.st-group i stationslisten -
   genbruger .op-ini-chippens look ved bare at saette dens farve-variabel. */
#groupList .type-name.grp-pill { --op-c: rgb(var(--grp-rgb));
  /* Navne er fritekst og kan vaere lange - pillen hugger med ellipsis i stedet
     for at loebe ind over taelle-kortet. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Pillen FYLDER soejlen og centrerer navnet - saa alle piller er lige brede
     (uniforme chips), ikke en kort og en lang der faar listen til at se skaev ud. */
  flex: 1 1 auto; text-align: center; }
/* Antallet i navnekortet er sekundaer tekst. Margin i stedet for et mellemrum i
   HTML'en: navnekortet er display:flex, og flex SLUGER whitespace mellem
   tekst-noder ("— none —15 activities"-fejlen). */
#groupList .grp-cnt { color: var(--ink-soft); font-weight: 500; font-size: 12.5px; }
#groupList .tp-row-desc > .grp-cnt:not(:first-child) { margin-left: 7px; }
/* "— none —"-raekken har ingen pille; navnet staar i selve kortet. */
#groupList .tp-row-desc { color: var(--ink); }
/* Gear/operatoer har en FAST 62px pille-soejle (korte koder). Gruppenavne er
   lange fritekster - soejlen er FAELLES for alle raekker og bestemmes af den
   bredeste pille (JS maaler og saetter --grp-pill-col efter hver gentegning),
   saa taelle-kortene flugter i stedet for at staa i takker. Fallback foer
   maaling: max-content (naturlig bredde). Kun to spalter - fluebenet er
   alligevel skjult i kort-layoutet. */
#groupList .tp-row { grid-template-columns: var(--grp-pill-col, max-content) minmax(0, 1fr); }
/* "— none —" har ingen pille - kortet spaender hele raekken. */
#groupList .tp-row:not(:has(.grp-pill)) .tp-row-desc { grid-column: 1 / -1; }

/* Gear-kode-bibliotek (ICES-liste) i vaelgeren */
.tp-lib { margin-top: 10px; }
/* Foer var det bare raa tekst med en lille trekant - man kunne ikke SE at den
   kunne klikkes (Christian: "ikke intuitivt"). Nu ser den ud som en knap, med
   en chevron der drejer naar den er aaben. */
.tp-lib > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--ink); font-size: 13.5px; font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}
.tp-lib > summary::-webkit-details-marker { display: none; }
.tp-lib > summary::before {
  content: "\203A";                       /* chevron > */
  font-size: 17px; line-height: 1; color: var(--accent);
  transition: transform .15s ease; transform: rotate(0deg);
}
.tp-lib[open] > summary::before { transform: rotate(90deg); }
.tp-lib > summary:hover { background: var(--surface-2); border-color: var(--accent); }
.tp-lib > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-lib[open] > summary { border-color: var(--accent); }
.tp-lib-list { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; margin-top: 6px; }
/* Raekkerne skal vaere LIGE HOEJE. Foer var hoejden bestemt af indholdet, saa en
   raekke der allerede er paa listen (kun teksten "on list") blev lavere end en
   med en +Add-knap - det lignede at den raekke var en anden slags ting. */
.tp-lib-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 5px 8px; min-height: 42px; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--line-soft); }
.tp-lib-desc { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "On list" som en PILLE, ikke bleg tekst: det er en tilstand paa raekken, og en
   pille laeses paa afstand - man kan skimme listen og se hvad man allerede har. */
.tp-lib-added {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ok); background: rgba(46, 232, 141, .12);
  border: 1px solid rgba(46, 232, 141, .45);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.tp-lib-add { white-space: nowrap; }

/* Initialerne i personens egen farve. Kanten og den svage baggrund gør at
   farven kan ses ogsaa paa de korte navne (2 bogstaver), hvor ren tekstfarve
   naesten forsvinder. */
/* Lille udgave til tabelceller: samme farve, mindre pille. */
/* Stroemloggens raekke i Live inputs: markeret, saa den ikke laeses som et
   almindeligt nav-felt. */
.li-cur td { border-top: 1px solid var(--line); }
.li-cur .li-field { font-weight: 700; }

.op-ini-sm {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent; font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
}
.op-ini {
  color: var(--op-c, var(--accent));
  /* SAMME chip-look overalt (vaelger, stationstabel, blok-kort): naesten-sort
     flade + fuld farvestyrke paa initialerne + farvet ring. Foer laa de tre
     steder med hver sin stil (flad 14%-tone i tabellen, GRÅ boks paa kortet). */
  background: color-mix(in srgb, var(--op-c, var(--accent)) 22%, #0a1a2b);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--op-c, var(--accent)) 70%, transparent);
  border-color: transparent;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  /* AEldre browser: farven alene - stadig til at skelne. */
  .op-ini { border-color: currentColor; background: transparent; }
}
/* Operatoer-piller i vaelgeren: SAMME paene chip-stil som redskabskoderne
   (Christian: "ikke saerlig paene"). Moerk bund + fuld farvet tekst + farvet ring,
   og pillen HUGGER initialerne (inline-block) i stedet for at fylde hele soejlen. */
.tp-card .tp-row .type-name.op-ini {
  display: inline-block; justify-self: start;
  padding: 4px 13px; border-radius: 999px;
  font-weight: 800; font-size: 13px; letter-spacing: .04em; border: 0;
  color: var(--op-c, var(--accent));
  background: color-mix(in srgb, var(--op-c, var(--accent)) 22%, #0a1a2b);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--op-c, var(--accent)) 70%, transparent);
}
/* Pille-soejlen er FAELLES for alle raekker i vaelgeren, saa namebox'ene flugter
   og en bred pille ALDRIG skubber sin egen namebox ud af takt (Christian 27/8).
   62px var fast og "hugger"-antagelsen holdt ikke: en lang kode (BEAM TRAWL)
   FLOED UD OVER navnekortet i stedet (Christian 28/8). Nu maaler JS den bredeste
   pille og saetter --tp-pill-col (samme mekanik som gruppe-vaelgerens
   --grp-pill-col) - 62px er kun fallback/minimum. */
.tp-card .tp-row:has(.op-ini) { grid-template-columns: var(--tp-pill-col, 62px) minmax(0, 1fr) auto; }

/* Felt-vaelger til stationsarket (pills, ikke checkboxes) */
.sf-panel { padding: 11px 13px; margin: 0 0 10px; background: var(--input-bg);
  border: 1px solid var(--line-soft); border-radius: 10px; }
.sf-title { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
  display: flex; align-items: center; }   /* saa ✕ kan staa yderst til hoejre */
/* ✕ til at lukke panelet - foer kunne det kun lukkes via menupunktet igen. */
.sf-close { margin-left: auto; flex: 0 0 auto; background: transparent; border: 0;
  color: var(--ink-soft); cursor: pointer; font-size: 14px; line-height: 1;
  padding: 3px 7px; border-radius: 6px; text-transform: none; }
.sf-close:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sf-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--ink-soft); font-size: 13px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s; }
.sf-chip:hover { border-color: var(--accent); color: var(--ink); }
.sf-chip.on { background: var(--accent); color: #04222a; border-color: var(--accent); font-weight: 600; }
/* Antal kolonner + en bekraeftelse ved hvert klik. Se renderSheetFields. */
.sf-count { margin-left: 8px; font-weight: 600; font-size: 11px;
  color: var(--ink-soft, #9fc0d2); text-transform: none; letter-spacing: 0;
  font-variant-numeric: tabular-nums; }
.sf-hint { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-soft);
  min-height: 16px; display: flex; align-items: center; gap: 10px; }
.sf-hint-t { flex: 1 1 auto; }
/* "Saved" blinker kort. Fast plads, saa hint-linjen ikke skifter bredde. */
.sf-saved { flex: 0 0 auto; color: #2ee0b0; font-weight: 700;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s, transform .15s; }
.sf-saved.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sf-saved { transition: none; } }

@container page (max-width: 560px) {
  .tp-new-row { grid-template-columns: 1fr; }
}

/* ---------------- BETJENINGSKORTET SKILLER SIG UD ----------------
   De oevrige kort er graa og til at laese i. Det her er det eneste man
   TRYKKER paa, og det skal kunne findes uden at lede - derfor en varmere
   bund i accentfarven i stedet for den samme neutrale flade som resten. */
.op-actions-card {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .05)),
    var(--surface-2);
  border-color: rgba(var(--accent-rgb), .40);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------------- TYPEVAELGEREN: BREDERE ----------------
   Vinduet var 430 px, saa de tre felter forneden stod i kø med "What it
   means (option…" klippet midt i ordet. Beskrivelserne i listen blev ogsaa
   maset. 760 px giver plads til at taste - og til at læse hvad typerne
   betyder, hvilket er hele grunden til at der er et vindue i stedet for en
   dropdown. */
/* Lidt mere vandret luft end standard-modalen (26px), saa pillerne ikke ligger
   lige op ad den tynde blaa kant-linje til venstre (Christian 27/8). */
.tp-card { width: 760px; padding: 26px 36px; }

/* Koden i sin egen spalte. Med flex/max-content flyttede namebox'en sig for hver
   raekke efter hvor langt kodenavnet var, saa teksten stod i takker. 120px gav
   flugt men et STORT hul efter korte koder (Christian 27/8: gear-boksen saa gappy
   ud vs. operatoer-boksen). Spalten er nu JS-maalt til listens bredeste pille
   (--tp-pill-col, min 62px) - tight naar alle koder er korte, bred nok naar
   BEAM TRAWL er med. */
.tp-card .tp-row {
  display: grid; grid-template-columns: var(--tp-pill-col, 62px) minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
}
/* SIKKERHEDSNET: skulle maalingen glippe (foerste frame, skjult modal), maa
   pillen aldrig flyde ind over navnekortet - saa hugger den med ellipsis. */
.tp-card .tp-cell-pill .type-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Gear code som farvet CHIP - hver kode i sin egen farve, saa listen er nem at
   scanne (Christian). Kun redskabskoder (tc-*), ikke operatoer/gruppe-navne.
   color-mix bruger chip'ens egen tekstfarve (currentColor = --tcN). */
/* MAX KONTRAST paa piller (Christian: "tekst skal altid poppe"): fladen fyldtes
   foer med en TONE AF PILLENS EGEN FARVE (18%), saa den lyse tekst laa paa en
   lysere flade og mistede kontrast. Nu: naesten-sort flade + fuld farvestyrke paa
   teksten (~11-13:1) og en tydelig farvet ring, saa farvekoden bevares. */
.tp-card .tp-row .type-name[class*="tc-"]:not(.tc-none) {
  display: inline-block; justify-self: start;
  padding: 4px 13px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .02em;
  /* 22% af pillens egen farve OVER en moerk bund: fladen faar farve (pop), men
     bunden er stadig moerk nok til at den lyse tekst staar skarpt. */
  background: color-mix(in srgb, currentColor 22%, #0a1a2b);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 70%, transparent);
}
/* Antal og flueben hoerer til den SAMME celle. Var de to selvstaendige
   boern i et gitter med tre spalter, blev fluebenet skubbet ned paa en
   linje for sig - og den valgte raekke voksede til dobbelt hoejde, mens
   naboerne stod lave. Fluebenet staar der altid (usynligt naar det ikke
   gaelder), saa raekkerne har samme bredde uanset hvad der er valgt. */
.tp-card .tp-end {
  display: inline-flex; align-items: baseline; gap: 9px; justify-self: end;
}
.tp-card .tp-end .tp-tick { visibility: hidden; }
.tp-card .tp-row.on .tp-end .tp-tick { visibility: visible; }

.tp-card .tp-row-desc { white-space: normal; }

/* Feltet til en ny type faar rigelig plads - det var det der klemte. */
.tp-card .tp-new-row {
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
  gap: 10px;
}

.tp-card .tp-new-row input { padding: 11px 12px; font-size: 13.5px; }

@container page (max-width: 820px) {
  .tp-card { width: auto; }
  .tp-card .tp-row { grid-template-columns: minmax(88px, max-content) minmax(0, 1fr) auto; gap: 10px; }
  .tp-card .tp-new-row { grid-template-columns: 1fr; }
}

/* ---------------- TANDHJULET ----------------
   Baren indeholdt otte ting side om side: to klokkeslæt, en log-ud-knap, en
   installer-knap, en zoom-gruppe paa fire elementer, selvtjekket, temaet og
   forbindelsesprikken. Det man skulle HOLDE OEJE MED druknede i det man
   aldrig troer paa.

   Skillelinjen er status mod indstilling. Klokkeslæt, selvtjek og
   forbindelse er status og bliver staaende. Resten er noget man roerer én
   gang - det ligger nu bag tandhjulet. */
.gear-wrap { position: relative; display: inline-flex; }

.gear-ico {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.home-ico {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

#btnGear[aria-expanded="true"] { background: var(--accent); color: #04222a; }

/* position: fixed, ikke absolute. .topbar-right har overflow:hidden - sat for
   at hindre lange navne i at flyde ud over fanerne - og den ville klippe en
   menu inde i sig selv helt vaek. Fixed slipper ud af enhver beholder;
   positionen regnes ud fra knappen naar den aabnes. */
.gear-menu {
  /* z-index over Dana Live/Maps-fanerne (200): Settings-menuen falder ned i
     fanens omraade og skal ligge OVENPAA, ikke bag kortet. */
  position: fixed; z-index: 720; width: 296px; padding: 8px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-4);
}

.gm-group { padding: 9px 10px 11px; }

.gm-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 9px;
}

.gm-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 13px; text-align: left;
  transition: background .12s, border-color .12s;
}

/* Manual-raekken er et <a>, ikke en <button>: uden dette faar den browserens
   understregning og ser ud som det eneste fremmede element i menuen. */
a.gm-row { text-decoration: none; }

/* Notifikations-prik: der er en opdatering der kraever handling. */
#btnProgs { position: relative; }
.upd-dot { position: absolute; top: 5px; right: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger, #e5544e); box-shadow: 0 0 0 2px var(--bar, #0d1b26); pointer-events: none; }
.gm-dot { margin-left: auto; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger, #e5544e); }
.gm-row:hover { background: var(--surface-3); border-color: var(--line-soft); }
.gm-row:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* ---- ALARM-SKUFFE: klokke + diskret roed prik + drop-down ----
   Prikken hoerer hjemme paa EN alarm-klokke (ikke paa tandhjulet, hvor den blev
   laest som "noget galt med indstillingerne"). Farlige tilstande (pause/forbindelse)
   bliver som larmende bannere; skuffen er til status man skal kunne SE. */
.alerts-wrap { position: relative; display: inline-flex; }
#btnAlerts { position: relative; }
.bell-ico { width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btnAlerts.has-alerts .bell-ico { stroke: var(--danger, #e5544e); }
.alerts-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--danger, #e5544e);
  box-shadow: 0 0 0 2px var(--bar, #0d1b26); pointer-events: none; }
@keyframes alertsPulse { 0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: .7; } }
@media (prefers-reduced-motion: no-preference) {
  #btnAlerts.has-alerts .alerts-dot { animation: alertsPulse 2.2s ease-in-out infinite; }
}
.alerts-menu {
  position: fixed; z-index: 720; width: 300px; padding: 10px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-4);
}
.am-head { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); padding: 2px 6px 6px; }
.am-list { display: flex; flex-direction: column; gap: 4px; }
.am-list:empty { display: none; }
.am-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
  border-radius: 10px; background: rgba(var(--accent-rgb), .06);
  border: 1px solid var(--line-soft); }
.am-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%;
  background: var(--danger, #e5544e); }
.am-body { color: var(--ink); font-size: 13px; line-height: 1.4; }
.am-sub { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 1px; }
.am-empty { color: var(--ink-soft); font-size: 12.5px; padding: 8px 10px 6px; }

/* ---- CRUISE HISTORY (arkiv-liste i modal) ---- */
.hist-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
  max-height: 60vh; overflow-y: auto; }
.hist-card { display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); }
.hist-name { font-weight: 600; color: var(--ink); }
.hist-meta { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.hist-act { flex: none; }
.hist-bad { color: var(--danger, #e5544e); font-size: 12.5px; }

.gm-ico { flex: none; width: 22px; text-align: center; font-size: 15px; color: var(--accent); }
.gm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-sub { font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.gm-go { flex: none; color: var(--ink-soft); font-size: 13px; }
/* Lille tal-pille yderst i "Connected screens"-raekken: antal forbundne skaerme,
   kun naar der er FLERE end denne ene (ellers skjult). Samme rolle som badgen der
   foer sad paa topbar-ikonet. */
.gm-count {
  flex: none; margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(var(--accent-rgb), .2); color: var(--accent);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gm-count.hidden { display: none; }
.gm-danger .gm-ico { color: var(--danger); }

/* ===== Raekke-handlingsmenu ("⋯" i en stationsraekke) =====
   Samme udseende som tandhjuls-menuen. Hver post: ikon + navn + kort forklaring,
   saa handlingen forklarer sig selv - hele grunden til at samle de fire knapper. */
.row-actions-menu {
  position: fixed; z-index: 62; width: 300px; padding: 8px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-4);
}
.ra-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 13px; text-align: left;
}
.ra-item:hover { background: var(--surface-3); border-color: var(--line-soft); }
.ra-item:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.ra-ico { flex: none; width: 22px; text-align: center; font-size: 15px; color: var(--accent); margin-top: 1px; }
.ra-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ra-label { font-weight: 650; }
.ra-desc { font-size: 11px; color: var(--ink-soft); font-weight: 400; line-height: 1.35; }
.ra-report .ra-ico, .ra-report .ra-label { color: #2fbf7f; }
.ra-edited .ra-ico { color: var(--warn); }
/* Slet staar sidst og i roedt - samme signal som luk-knapperne, bare kraftigere,
   for det her er den ene der ikke kan fortrydes. */
.ra-del { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 10px; }
.ra-del .ra-ico, .ra-del .ra-label { color: var(--danger); }
.ra-del:hover { background: rgba(var(--danger-rgb), .10); border-color: rgba(var(--danger-rgb), .35); }

/* "Actions"-knappen i togtraekken og i stationspanelet. */
.btn.cruise-actions { display: inline-flex; align-items: center; gap: 6px; }
/* "Station Options": let animeret accent-ring der trækker øjet til den (Christian). */
.so-btn { position: relative; border-color: rgba(var(--accent-rgb), .45); }
.so-btn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); pointer-events: none;
  animation: soPulse 3.2s ease-out infinite; }
.so-btn:hover::after, .so-btn[aria-expanded="true"]::after { animation: none; }
@keyframes soPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .4); }
  60% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .so-btn::after { animation: none; } }
/* "All plots"-masse-download: lille arbejder-overlay mens grafer tegnes. */
/* FISKELINE-HOVEDET. Forklaringen fylder bredden; PDF-knappen staar HELT ude til
   hoejre under den (Christian, pil paa skaermbillede). Og der skal vaere luft ned
   til foerste felt - ellers ser knappen ud som om den hoerer til "Stations nr."
   i stedet for til hele arket. */
.fl-top { display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  margin: 0 0 22px; }
.fl-top .fl-hint { margin: 0; }
.fl-top .fl-pdf { align-self: flex-end; white-space: nowrap; }

/* Kanalkoden ved siden af det rigtige navn - lille og daempet, saa navnet
   laeses foerst og koden stadig kan findes i en raa .txt. */
.det-ch { font-size: 10.5px; color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace; margin-left: 6px; }

/* ---- TRAAL-GEOMETRI (egen fane paa stationskortet) ---------------------- */
.tg-note { padding: 11px 14px; border-radius: 11px; font-size: 12.5px; line-height: 1.5;
  margin: 0 0 12px; border: 1px solid var(--line); background: var(--surface-2); }
.tg-note.tg-ok { border-color: rgba(46,232,141,.45); }
.tg-note.tg-warn { border-color: var(--warn); color: var(--ink); }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 12px; }
.tg-grid-in .tg-card { background: var(--surface); }
.tg-card { padding: 12px 14px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line-soft); min-width: 0; }
.tg-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; }
.tg-v { font-size: 25px; font-weight: 600; color: var(--ink); line-height: 1.15;
  margin-top: 4px; font-variant-numeric: tabular-nums; }
.tg-u { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.tg-n { margin-top: 5px; font-size: 11px; color: var(--ink-soft); }
.tg-foot { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5;
  border-top: 1px solid var(--line-soft); padding-top: 10px; }

/* ---- RENSE-GUIDEN -------------------------------------------------------
   Tre trin, altid oeverst i Scanmar-kortet. Den skal kunne laeses paa afstand af
   en der aldrig har set programmet foer - derfor tal, ikke ikoner, og et tydeligt
   "nu er du her". Trinnene ER navigationen: et gjort trin kan klikkes. */
.anwiz {
  padding: 12px 14px; margin: 0 0 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px;
}
.anwiz.hidden { display: none; }
/* Trinnene CENTRERES (Christian). To trin i venstre kant ser ud som en rest af
   noget; midt i panelet laeses de som en vej man foelger. */
.anwiz-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; }
.anwiz-step {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 1px solid transparent; border-radius: 10px;
  padding: 8px 12px; text-align: left; font: inherit; color: inherit;
  /* LIGE STORE KORT (Christian): de to trin skal fylde det samme, saa det foeles
     som to slides man skifter mellem - ikke som en lille og en stor ting. Fast
     bredde frem for indhold-bestemt, ellers hopper de i størrelse hver gang
     teksten skifter ("Leave out what should not count" -> "212 rows left out"). */
  flex: 0 0 auto; width: 268px; min-width: 0; min-height: 54px;
}
.anwiz-step .anwiz-txt { flex: 1 1 auto; }
.anwiz-step .anwiz-txt b,
.anwiz-step .anwiz-txt span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .anwiz-step { width: 100%; } }
.anwiz-step.kan { cursor: pointer; transition: background .12s, border-color .12s; }
.anwiz-step.kan:hover { background: rgba(255,255,255,.06); border-color: var(--accent); }
.anwiz-step.kan:hover .anwiz-txt b { color: var(--accent); }
.anwiz-step.kan:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Det trin man STAAR paa faar en ring, saa "hvor er jeg" kan ses paa afstand -
   ogsaa naar naboen er fremhaevet af musen. */
.anwiz-step.is-now { background: rgba(var(--accent-rgb), .07); border-color: rgba(var(--accent-rgb), .35); }
/* DET TRIN MAN SKAL TRYKKE PAA. Det ER knappen - derfor groent, med en pil, saa
   der ikke skal staa en ekstra "Inspect graphs" ved siden af og gøre det samme. */
.anwiz-step.is-next {
  background: var(--ok); border-color: var(--ok);
}
.anwiz-step.is-next .anwiz-no { background: #05220f; color: var(--ok); border-color: transparent; }
.anwiz-step.is-next .anwiz-txt b { color: #05220f; }
.anwiz-step.is-next .anwiz-txt span { color: rgba(5, 34, 15, .78); }
.anwiz-step.is-next::after {
  content: "\2192"; margin-left: 8px; font-size: 15px; font-weight: 700; color: #05220f;
}
.anwiz-step.is-next:hover { filter: brightness(1.07); }
.anwiz-step.is-next:hover .anwiz-txt b { color: #05220f; }

/* SLIDESHOW: det vindue der ikke er paa scenen, er ude af vejen - ikke bag et
   andet. To lag vinduer betyder at man ikke ved hvad man lukker. */
#analysisModal.slide-away { display: none; }
.anwiz-step.is-now .anwiz-no { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); }
.anwiz-step.is-done .anwiz-no { box-shadow: none; }
/* Doedt trin skal ikke se ud som om man har glemt at trykke - det ER ikke klar. */
.anwiz-step.is-todo { opacity: .45; }
.anwiz-step.is-todo .anwiz-txt span { font-style: italic; }
.anwiz-no {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.anwiz-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.anwiz-txt b { font-size: 13.5px; }
.anwiz-txt span { font-size: 11.5px; color: var(--ink-soft); }
.anwiz-step.is-done .anwiz-no { background: var(--ok); color: #06210f; border-color: transparent; }
.anwiz-step.is-now .anwiz-no { background: var(--accent); color: #04121f; border-color: transparent; }
.anwiz-step.is-now .anwiz-txt b { color: var(--accent); }
.anwiz-step.is-todo { opacity: .5; }
.anwiz-arrow { color: var(--ink-soft); opacity: .45; }
/* Knapraekken staar paa sin egen linje under trinnene, hoejrestillet: trinnene er
   hvor man ER, knapperne er hvad man kan FAA. To slags ting, to linjer. */
.anwiz-act {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.anwiz-by { text-align: center; }
.anwiz-by { margin-top: 8px; font-size: 11px; color: var(--ink-soft); }
.anwiz-link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}
.anwiz-link:hover { filter: brightness(1.2); }

/* GRAFERNE ER LAAST indtil tallene er rensede. En graf over uafklarede data ser
   lige saa overbevisende ud som en rigtig - saa den maa ikke vises. */
#anCharts.an-locked { display: none; }
/* ...MEN IKKE I PANELET. Laasen er rigtig paa stationskortet: en graf over
   uafklarede tal ser lige saa overbevisende ud som en rigtig, og den ryger
   videre i en mail. Inde i panelet er den forkert - dét er stedet hvor man
   RENSER, og hele designet er at kurven aendrer sig mens man klikker tal fra.
   Noten ved siden af blev rettet til den nye virkelighed ("open the panel and
   you will see them change as you work"), men selve laasen blev staaende, saa
   grafspalten var tom praecis dér hvor graferne er hele pointen.
   #anCharts.an-locked er 1-1-0 og slog .antbl-gslot .an-charts (0-2-0) uden at
   sige fra; 1-2-0 her vinder tilbage. */
.antbl-gslot #anCharts.an-locked { display: flex; }
/* Noten hoerer til stationskortet. Bygges den mens graferne er laant, lander
   den i panelet og staar og opfordrer til at aabne det vindue man staar i. */
.antbl-gslot .an-graph-note { display: none; }
.an-graph-note {
  margin: 0 0 12px; padding: 14px 16px; font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: 12px;
}
.an-graph-note b { color: var(--ink); }
.an-graph-note-a { margin-top: 10px; }

/* Baandet mens man renser. */
.anclean-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; margin: 0 0 12px;
  background: var(--surface-2); border: 1px solid var(--accent);
  border-radius: 12px;
}
/* Vinduets titel: stationen som man taler om den, og det raa id lille bagefter.
   Id'et er stadig noeglen til mappen paa disken, saa det maa ikke gemmes vaek -
   men det skal ikke vaere det foerste oejet moeder. */
#antblTitle .antbl-t-stn { font-weight: 600; color: var(--ink); margin-left: 6px; }
#antblTitle .antbl-t-id {
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace; margin-left: 8px;
}

/* SWITCH: alt optaget <-> det der taeller med. To knapper i én ramme, saa det
   laeses som ÉT valg og ikke som to handlinger. */
/* Raekken er nu bred: faner til venstre, vaerktoejer helt til hoejre. Den moerke
   pille ligger kun om FANERNE (.anview-grp) - Columns og CSV er ikke et valg
   mellem to visninger og maa ikke ligne et. */
.anview-sw { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.anview-grp {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(0,0,0,.26); border: 1px solid var(--line-soft); border-radius: 12px;
}
.anview-tools { margin-left: auto; display: flex; gap: 7px; flex: 0 0 auto; }
/* Uden faner (All data-tilstand) er raekken kun vaerktoejer - saa skal den ikke
   fylde en tom stribe over tabellen. */
.anview-sw-bare { margin-bottom: 8px; }

.anview-b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid transparent; border-radius: 9px;
  background: none; color: var(--ink-soft); font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: background .12s, color .12s;
}
.anview-b span {
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,.09); color: var(--ink-soft);
}
.anview-b:hover { color: var(--ink); }
.anview-b.on { background: var(--surface-2); color: var(--ink); border-color: var(--accent); }
.anview-b.on span { background: rgba(var(--accent-rgb), .22); color: var(--accent); }

.anclean-bar-bund { margin: 12px 0 0; border-color: var(--line); }
/* GROEN = frem. De blaa knapper er sidespor (tilbage til forslaget, behold alt);
   den groenne er den ene der foerer et skridt videre i guiden. */
.btn.go {
  background: var(--ok); border-color: var(--ok); color: #05220f; font-weight: 700;
}
.btn.go:hover { filter: brightness(1.08); }
.btn.go:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

/* TRE tilstande paa en raekke:
   - foreslaaet ude   = daempet roed, overstreget (programmets forslag)
   - valgt ude i haand = klar roed + roed kant i venstre side (dit eget indgreb)
   - sat tilbage      = ikke overstreget, men prikket ramme, saa man kan se at
                        graensen VILLE have smidt den ud og at man har overtrumfet
   Uden forskellen kan man ikke gennemgaa sit eget arbejde bagefter. */
.antbl-table tr.antbl-x-hand td { color: #ff4d4d; opacity: 1; }
.antbl-table tr.antbl-x-hand td.col-t { box-shadow: inset 3px 0 0 #ff4d4d; }
/* ET FRAVALGT TAL (ikke hele raekken): overstreget i cellen alene, saa man kan se
   at resten af raekken stadig taeller med. Foreslaaet = daempet, selvvalgt = klar. */
.antbl-table td.antbl-cx, .antbl-table td.antbl-cx-hand {
  text-decoration: line-through; text-decoration-color: #ff3b30;
  text-decoration-thickness: 2px;
}
.antbl-table td.antbl-cx { color: var(--danger); opacity: .9; }
.antbl-table td.antbl-cx-hand { color: #ff4d4d; opacity: 1;
  background: rgba(255, 77, 77, .10); }
/* LIGE UDEN FOR GRAENSEN (Kai, via Christian 1/9). Et filter der skaerer ved
   6,0 smider ogsaa 6,1 vaek, og nogle gange er 6,1 en rigtig maaling. Gul, ikke
   roed: tallet er ikke forkert - det er til diskussion. Stiplet i stedet for
   fuld streg, saa forskellen kan ses paa tvaers af tabellen uden at laese tal. */
.antbl-table td.antbl-cx-naer {
  text-decoration: line-through; text-decoration-style: dashed;
  text-decoration-color: #e0a83c; text-decoration-thickness: 2px;
  color: #f0c674; opacity: 1;
  background: rgba(224, 168, 60, .12);
}
/* Knappen der tager dem alle med: samme gule sprog som cellerne, saa man kan
   se at de to ting hoerer sammen. */
.anclean-naer {
  background: rgba(224, 168, 60, .16) !important;
  border-color: rgba(224, 168, 60, .45) !important;
  color: #f0c674 !important;
}
.anclean-naer:hover { background: rgba(224, 168, 60, .26) !important; }

/* "flat here" er ikke det samme som "New Dana": foeleren maaler, tallet staar
   bare stille. Graat, ikke roedt - der er intet i stykker. */
.ofp-tag.flad {
  background: rgba(147, 167, 189, .18);
  color: var(--ink-soft, #93a7bd);
}
/* HVER CELLE ER SIT EGET MAAL. Tallene stod hoejrestillet med stor luft imellem,
   saa man ikke kunne se hvor det ene tals felt sluttede og det naestes begyndte -
   og et klik foeltes som om det ramte hele linjen. I rense-tilstand centreres de
   derfor, faar en tynd skillelinje, og lyser op ÉT ad gangen under musen. */
/* SKILLELINJEN SIDDER PAA ALLE KROPCELLER, ikke kun dem med tal. Foer laa
   border-left kun paa td[data-ch], saa tomme felter (og de graa ugyldige, som
   ikke kan klikkes) smeltede sammen til en lang flade - "der mangler streger
   som i et Excel-ark" (Christian 28/8). */
#anTableModal.antbl-cleaning .antbl-table tbody td {
  text-align: center; border-left: 1px solid var(--line-soft);
}
#anTableModal.antbl-cleaning .antbl-table tbody td.col-t { border-left: 0; }
#anTableModal.antbl-cleaning .antbl-table tbody td[data-ch] { cursor: pointer; }
#anTableModal.antbl-cleaning .antbl-table thead th:not(.col-t),
#anTableModal.antbl-cleaning .antbl-table tfoot td:not(.col-t) { text-align: center; }
/* Hover pr. celle. VAR tr[data-t] td[data-ch] - men raekkerne mistede data-t
   da 15 s-visningen kom (cellen baerer nu stemplet selv), saa hover doede. */
.antbl-table tbody td[data-ch]:hover {
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
/* Tid-klik ("hele raekken") er FJERNET - kun ét felt ad gangen. Tiden er nu et
   spand-navn, ikke et maal, og skal ikke ligne en knap. */

/* "Graensen ville droppe den, men du satte den tilbage" er en tilstand paa
   RAEKKEN, ikke paa de tre tal. Farvede vi alle cellerne gule, saa det ud som om
   man havde markeret tre tal - og saa tror man at ét klik rammer hele linjen.
   Nu baerer TIDEN maerket, og raekken faar kun en svag tone. */
.antbl-table tr.antbl-back td { color: var(--ink); }
.antbl-table tr.antbl-back td.col-t {
  box-shadow: inset 3px 0 0 var(--warn); color: var(--warn); font-weight: 700;
}
.antbl-table tr.antbl-back { background: rgba(255, 194, 61, .07); }
.anclean-txt { font-size: 12.5px; color: var(--ink-soft); flex: 1 1 320px; }
/* Kolonnens eget gyldige interval, paa dens eget kort. */
/* Antallet af EGNE aendringer i statuslinjen - samme klare roede som de celler
   man selv har rørt, saa de to hoerer sammen visuelt. */
.anclean-mine { color: #ff6b6b; }

.antbl-lims { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.antbl-lims span { font-size: 10.5px; color: var(--ink-soft); }
.antbl-lim {
  width: 58px; padding: 3px 5px; font-size: 12px; text-align: right;
  background: rgba(0,0,0,.26); color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.antbl-lim:focus { outline: none; border-color: var(--accent); }
/* Kanalen har en graense sat - det er STATISTIKKORTET der skal lyse, ikke vinduet. */
.antbl-stat.has-rule { border-color: var(--accent); }
.anclean-txt b { color: var(--ink); }
/* Knapraekken fylder hele kortets bredde, saa Columns kan skubbes helt ud til
   hoejre kant - vaek fra de to der aendrer tallene. */
.anclean-btns {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 1 1 100%; width: 100%;
}
/* Toprakken: forklaringen til venstre, Columns til hoejre. */
.anclean-tools { margin-left: auto; display: flex; gap: 7px; flex: 0 0 auto; align-self: flex-start; }

/* En fravalgt raekke: streget ud, som en streg gennem en linje i det gamle ark. */
.antbl-table tr[data-t] { cursor: pointer; }
.antbl-table tr[data-t]:hover td { background: rgba(255,255,255,.05); }
/* STREGEN SKAL KUNNE SES PAA EN BRO I DAGSLYS. Foer: 1 px i tekstens egen
   daempede farve ved 75 % - paa en 1080p-skaerm et par meter vaek forsvandt den
   helt, og saa kunne man ikke se forskel paa en raekke der taeller med og en der
   ikke goer. Nu: 2 px, klar roed, og stregen har sin EGEN farve saa den er
   kraftigere end tallet den gaar igennem. */
.antbl-table tr.antbl-x td {
  color: var(--danger); text-decoration: line-through;
  text-decoration-color: #ff3b30; text-decoration-thickness: 2px;
  opacity: .9;
}
.antbl-table tr.antbl-x td.col-t { text-decoration: none; }

/* Togtets vigtigste knap. Den laa som en almindelig lille knap; nu har den lidt
   mere hoejde, saa den ikke forsvinder mellem etiketterne i kortet. */
.cd-finish { padding-top: 11px; padding-bottom: 11px; min-height: 42px; font-size: 13.5px; }

/* Finish-panelet LODRET: knappen med sin forklaring ved SIDEN af sig laeste som
   to ting der ikke hoerte sammen. Nu staar teksten under knappen, centreret som
   resten af panelet. */
#finishCruiseModal .fc-foot {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  margin-top: 14px;
}
#finishCruiseModal .fc-foot .btn { width: 100%; padding: 13px 16px; font-size: 15px; }
#finishCruiseModal .fc-foot .hint { text-align: center; }
#finishCruiseModal .fc-bye { text-align: center; }

.plots-busy { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,12,.62); backdrop-filter: blur(2px); }
.plots-busy.hidden { display: none; }
.plots-busy-card { display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #14263c, #0c1626); border: 1px solid rgba(120,160,200,.24);
  border-radius: 16px; padding: 26px 34px; box-shadow: 0 20px 60px rgba(0,0,0,.55); color: #dceaf4; font-size: 14.5px; }
.pb-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(120,160,200,.25);
  border-top-color: var(--accent, #6ea8ff); animation: pbSpin .8s linear infinite; }
@keyframes pbSpin { to { transform: rotate(360deg); } }
.btn.cruise-actions .tm-caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---- VISNINGS-VAELGER (Table / Browse) --------------------------------- */
.vw-seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 3px; gap: 2px; }
.vw-b { border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px;
  padding: 5px 14px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; }
.vw-b:hover { color: var(--ink); }
/* Den aktive knap stod for svagt - en let toning druknede paa en broskaerm.
   Nu en fyldt accent-plade med moerk tekst og et loft-skaer, saa det er til at
   se paa afstand hvilken visning man er i. */
.vw-b[aria-pressed="true"] {
  background: var(--accent); color: #04222a; font-weight: 700;
  box-shadow: 0 1px 5px rgba(var(--accent-rgb), .45), inset 0 1px 0 rgba(255,255,255,.25);
}
.vw-b[aria-pressed="true"]:hover { color: #04222a; }
.vw-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- BROWSE: facetter + kort ------------------------------------------- */
.st-browse { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 20px; padding: 4px 2px 8px; }
.st-browse.hidden { display: none; }
@container page (max-width: 760px) { .st-browse { grid-template-columns: 1fr; } }
.stb-facets { display: flex; flex-direction: column; gap: 16px; }
.stb-fx h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; }
.stb-fx button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 9px; padding: 7px 9px; cursor: pointer;
  color: var(--ink); font: inherit; font-size: 13.5px; transition: background .12s; }
.stb-fx button:hover { background: rgba(var(--accent-rgb), .08); }
.stb-fx button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .15); font-weight: 700; }
.stb-fx button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stb-fx .n { margin-left: auto; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stb-sw { width: 9px; height: 9px; border-radius: 50%; flex: none; background: currentColor; }
.stb-count { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
.stb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 11px; align-content: start; }
/* 18/8 (Christian: "ikke vild med de farvede kanter"): den farvede venstre-stribe
   er droppet. Redskabs-farven staar i FORVEJEN i selve gear code-teksten, saa
   striben var dobbelt-signal og stoejede paa alle kort. Nu en ensartet, rolig
   kant hele vejen rundt. */
.stb-card { display: block; width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 10px 12px; transition: background .12s, border-color .12s, transform .06s; }
.stb-card:hover { background: var(--surface-3); border-color: rgba(var(--accent-rgb), .45); }
.stb-card:active { transform: translateY(1px); }
.stb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stb-top { display: flex; align-items: baseline; gap: 8px; }
/* 800 var for tykt - paa en moerk flade smoerer de tunge cifre sammen og
   bliver svaere at laese. 650 er stadig tydeligt fremhaevet uden at klumpe. */
.stb-no { font-size: 16px; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
.stb-haul { font-size: 11px; color: var(--ink-soft); }
.stb-flags { margin-left: auto; font-size: 12px; }
.stb-warn { color: var(--warn); }
.stb-fix { color: var(--accent); }   /* haand-rettet position = info, ikke advarsel */
.stb-time { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.stb-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11.5px; color: var(--ink-soft); }
/* Operatoer-pillen paa blok-kortet: kun stoerrelsen saettes her - farve, flade og
   ring arves fra .op-ini/.op-ini-sm saa den matcher tabellen og vaelgeren. Var
   foer en grå monospace-boks der slet ikke viste operatoerens farve. */
.stb-op { padding: 1px 9px; font-size: 10.5px; }
.stb-dur { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Togt-vaelgeren i topbaren er FJERNET (togter vaelges nu via togttabellens
   Actions-menu under Cruises & Gear), saa .topbar-cruise/.tc-* er ogsaa vaek. */

/* "⋯"-knappen i raekken. Kompakt; en lille prik naar stationen er rettet. */
.btn.row-more { font-size: 18px; line-height: 1; letter-spacing: 1px; padding: 3px 12px; }
.btn.row-more.has-edits { position: relative; }
.btn.row-more.has-edits::after {
  content: ""; position: absolute; top: 2px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--warn);
}

/* Tilstandslinje i menuen - ikke en knap. Den skal LIGNE en oplysning, ellers
   staar folk og trykker paa den og tror der er noget i vejen. */
.gm-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; margin: 2px 0; border-radius: 10px;
  background: var(--surface-3); color: var(--ink-soft);
  font-size: 12.5px; cursor: default;
}
.gm-note .gm-ico { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
/* OFF er ikke en fejl - det er en VALGFRI funktion der er slaaet fra. Gult
   (--warn) fik det til at ligne et problem man skulle rette; nu er det neutralt,
   og kun ON lyser groent. */
.gm-note b { color: var(--ink-soft); letter-spacing: .04em; }
.gm-note.is-on b { color: var(--ok); }
.gm-note.is-on .gm-ico { color: var(--ok); }

/* Zoom-gruppen sad i den moerke bar og laante dens hvide gennemsigtighed.
   Inde i en menu paa en lys flade forsvandt den - her taler den fladens sprog. */
.gear-menu .ui-scale {
  display: flex !important; width: 100%; justify-content: space-between;
  background: var(--input-bg); border: 1px solid var(--line-soft);
  padding: 6px 9px; border-radius: 10px;
}
.gear-menu .ui-scale input[type=range] { flex: 1; width: auto; margin: 0 8px; }
.gear-menu .us-btn { border-color: var(--line); background: var(--surface-3); color: var(--ink); }
.gear-menu .us-val { color: var(--ink-soft); }

/* ---------------- STATUSDIODEN ----------------
   Én lampe der svarer paa ét spoergsmaal: er alt som det skal vaere?

   Den var foer en ren forbindelsesprik, groen saa snart der var kontakt - og
   en forbindelse til en server der ikke skriver noget paa disken ser praecis
   lige saa groen ud. Nu samler den forbindelsen OG selvtjekket.

   Den groenne aander. En fast prik siger kun at nogen har sat den engang; en
   der aander siger at der bliver kigget lige nu. Bevaegelsen er langsom og
   svag med vilje - den skal kunne staa taendt i ugevis i et styrehus uden at
   traette nogen, og den skal ikke konkurrere med de ting der faktisk kalder. */
.link-dot {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--ink-soft);
  border: 1px solid rgba(0, 0, 0, .35);
  transition: background .25s;
  /* Lampen sad FLUSH mod .topbar-right's hoejre kant, og den har overflow:hidden
     (mod for lange navne). Gloeden (box-shadow op til 11px) blev derfor klippet
     paa hoejre side - maalt 0 px luft. 12 px margin giver den plads inde i
     klip-boksen. Top/bund var allerede fri (16 px). */
  margin-right: 12px;
}

/* Alt kontrolleret og i orden. */
.link-dot.lamp-ok {
  background: var(--ok);
  animation: lamp-breathe 3.6s ease-in-out infinite;
}

@keyframes lamp-breathe {
  0%, 100% { box-shadow: 0 0 3px rgba(var(--ok-rgb), .30); filter: brightness(.72); }
  50%      { box-shadow: 0 0 11px rgba(var(--ok-rgb), .80); filter: brightness(1.15); }
}

/* Noget kalder. Staar STILLE - en advarsel der ogsaa blinker, laeses som
   pynt, og saa holder man op med at se forskel paa den og den groenne. */
.link-dot.lamp-warn { background: var(--warn); box-shadow: 0 0 8px rgba(var(--warn-rgb), .55); }
.link-dot.lamp-err  { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* Forbundet, men selvtjekket har ikke svaret endnu. */
.link-dot.lamp-wait { background: var(--ink-soft); }

/* Nogen bliver daarlige af bevaegelse i udkanten af synsfeltet, og et
   styrehus i soegang er ikke stedet at afproeve det. */
@media (prefers-reduced-motion: reduce) {
  .link-dot.lamp-ok { animation: none; box-shadow: 0 0 8px rgba(var(--ok-rgb), .6); }
}

/* ---------------- STATIONSLISTENS KONTROLLER ----------------
   Togtvaelger, typefilter og sorterbare overskrifter. Alle tre svarer paa
   "hvad ser jeg paa" og staar derfor samlet lige over tabellen. */
.st-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ---- Kontrolbjaelken: ét element, tre felter ----
   Rammen og skyggen ligger paa BJAELKEN, ikke paa hver knap. Saa laeser de tre
   som felter i den samme kontrol - "hvad viser tabellen" - i stedet for som tre
   uafhaengige kort der tilfaeldigvis stod ved siden af hinanden. */
.st-bar {
  display: flex; align-items: stretch; flex-wrap: wrap; min-width: 0;
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
  background: var(--surface-2);
  /* Tydelig drop shadow (var for svag foer - usynlig paa lys baggrund). */
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.04);
}
/* Christian: ALLE knapper skal have drop shadow - ogsaa dem der ikke bruger .btn.
   Kun paa FYLDTE flader (gennemsigtige ikon-knapper faar ingen, ellers svaever en
   skygge uden synlig knap). */
.vw-seg, .sd-full, .cb-edit, .vnc-d-max, .vnc-d-tab, .sbar-tab, .vnc-tab {
  box-shadow: var(--sh-2);
}
/* Den tynde streg imellem. Paa foerste felt i hver raekke skal den vaek, ellers
   staar der en streg ud mod bjaelkens venstre kant naar felterne ombrydes. */
.st-bar > .st-btn + .st-btn { border-left: 1px solid var(--line); }

.st-pick { display: flex; align-items: center; gap: 8px; }
.st-pick > span {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.st-pick select {
  padding: 7px 10px; border-radius: 9px; font-family: inherit; font-size: 13px;
  background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line); max-width: 320px;
}

.st-types { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.st-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--ink-soft);
  background: none; border: 1px solid var(--line-soft);
  transition: background .12s, border-color .12s, color .12s;
}
.st-chip:hover { background: var(--surface-3); color: var(--ink); }
.st-chip.on {
  background: rgba(var(--accent-rgb), .14);
  border-color: rgba(var(--accent-rgb), .45); color: var(--ink);
}
.st-n {
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-soft);
}
.st-chip.on .st-n { background: rgba(var(--accent-rgb), .22); color: var(--accent); }

/* Sorterbare overskrifter. Pilen staar kun paa den kolonne der SORTERES
   efter - en pil paa alle ni ville vaere stoej, og saa kan man ikke se
   hvilken der gaelder. */
.sortable th[data-sort] {
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color .12s;
  /* Pilen tages ud af flowet nedenfor og placeres i forhold til HER. Padding i
     hoejre side RESERVERER plads til pilen, saa den aldrig lander oveni teksten
     (fx "ACTIVITY NO." der loeb helt ud til pilen i den smalle no-kolonne). */
  position: relative; padding-right: 16px;
}
.sortable th[data-sort]:hover { color: var(--ink); }
/* Pilen ligger ABSOLUT, ikke i tekstflowet.
   Foer var den en inline-blok med 8 px kant og 6 px margin - 14 px der FYLDTE
   ogsaa naar den var usynlig (opacity: 0). Med text-align: center centrerede
   browseren derfor "tekst + 14 px pil" som én blok, og selve teksten sad 7 px
   for langt til venstre i hver sorterbar kolonne. Det var praecis de 6,9 px der
   kunne ses, og kun i de kolonner hvor teksten staar direkte i cellen.
   Ude af flowet centreres teksten praecist, og pladsen koster ingen bredde -
   en kolonne som "No." har kun 62 px at give af. */
.sortable th[data-sort]::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 0; height: 0; margin-top: -2px; opacity: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
}
.sortable th.sorted { color: var(--accent); }
.sortable th.sorted::after { opacity: 1; }
.sortable th.sorted.desc::after {
  border-bottom: 0; border-top: 5px solid currentColor;
  margin-top: -3px;        /* trekanten peger nedad og vejer anderledes */
}

/* Ser man paa et tidligere togt, skal det ikke kunne forveksles med det man
   staar midt i. Baade et banner OG en anden kant paa panelet: banneret
   forklarer, kanten ses paa afstand. */
.st-old {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px; border-radius: 10px;
  background: rgba(var(--warn-rgb), .10);
  border: 1px solid rgba(var(--warn-rgb), .40);
  font-size: 12.5px; color: var(--ink);
}
.st-old-mark {
  font-size: 10px; letter-spacing: .12em; font-weight: 800;
  text-transform: uppercase; color: var(--warn); white-space: nowrap;
}
.stations-panel.viewing-old {
  border-color: rgba(var(--warn-rgb), .45);
  box-shadow: var(--sh-2), inset 0 0 0 1px rgba(var(--warn-rgb), .10);
}

/* Tom tilstand: intet togt optages og intet er valgt til visning. En rolig,
   centreret besked med ÉN klar handling - loade et tidligere togt. */
.st-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 46px 20px 52px; margin-top: 6px;
  border-radius: 12px; border: 1px dashed var(--line-soft);
  background: var(--surface-2);
}
.st-empty-ico { font-size: 34px; opacity: .85; line-height: 1; }
.st-empty-h { font-size: 16px; font-weight: 700; color: var(--ink); }
.st-empty-sub { margin: 0; max-width: 360px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.st-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ---------------- STATIONSLISTENS KONTROLLER, DEL 2 ----------------
   Dropdown'en er vaek. To knapper med popup i stedet - samme sprog som
   stationstypen og operatoeren, saa alle vaelgere i programmet ser ens ud og
   opfoerer sig ens. */
/* Inde i bjaelken er hvert felt fladt: ingen egen ramme, ingen egen skygge,
   ingen egne runde hjoerner. Rammen hoerer til bjaelken. Beholdt de deres egen,
   fik man en dobbeltstreg ved hver skillelinje. */
.st-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; cursor: pointer; border: 0; border-radius: 0;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: none; min-width: 0;
  transition: background .12s, box-shadow .12s;
}
.st-btn:hover { background: var(--surface-3); }
/* Markeringen ligger som en indvendig ramme, saa feltet ikke flytter sig 1 px
   naar man tabber igennem - det saa ud som et lille hop i hele bjaelken. */
.st-btn:focus-visible {
  outline: none; background: var(--surface-3);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.st-btn-label {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.st-btn-value { font-weight: 600; }
.st-btn-ico {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; color: var(--accent); opacity: .75;
}

/* Ser man paa et tidligere togt, bliver SELVE FELTET varmt - man kigger paa
   feltet naar man vil skifte, ikke paa banneret.
   Foer var det en kantfarve, men inde i bjaelken har feltet ikke sin egen kant
   laengere. En baggrund er samtidig et kraftigere signal, og det er den ene
   forveksling der koster rigtige data: at tro man ser stationerne fra det togt
   man staar midt i. Derfor er dette det ENESTE felt der faar farve. */
.st-btn.is-old {
  background: rgba(var(--warn-rgb), .13);
  box-shadow: inset 3px 0 0 var(--warn);
}
.st-btn.is-old:hover { background: rgba(var(--warn-rgb), .2); }

.st-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.st-badge.current {
  background: rgba(var(--ok-rgb), .16); color: var(--ok);
  border: 1px solid rgba(var(--ok-rgb), .38);
}
.st-badge.earlier {
  background: rgba(var(--warn-rgb), .16); color: var(--warn);
  border: 1px solid rgba(var(--warn-rgb), .40);
}

/* Raekkerne i togtvinduet: navn og periode til venstre, maerket til hoejre.

   Skal vaere .tp-card .cr-row - IKKE bare .cr-row. Type-vaelgerens regel
   ".tp-card .tp-row" har to klasser og vandt derfor over den, saa togtnavnet
   fik typevaelgerens 130 px kodespalte (og ombroed over tre linjer) mens
   maerket fik 1fr og blev strakt tvaers over hele raekken. */
.tp-card .cr-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px; align-items: center;
}
.cr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.cr-meta { font-size: 11.5px; color: var(--ink-soft); }
/* Maerket maa aldrig strakkes - det er en etiket, ikke en bjaelke. */
.cr-row .st-badge { justify-self: end; }
.cr-row.is-current { border-color: rgba(var(--ok-rgb), .30); }

/* Stien i bekraeftelsen af ny datamappe - laesbar, ikke en tekstklump. */
.cf-path {
  margin: 8px 0; padding: 9px 12px; border-radius: 9px;
  background: var(--code-bg); border: 1px solid var(--line-soft);
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  color: var(--ink); word-break: break-all;
}
.cf-third { margin-right: auto; }

/* ---------------- DTU-MAERKET OG KREDITERING ----------------
   Det officielle logo er den hoeje udgave: ordmaerket "DTU" i den oeverste
   fjerdedel, de tre boelger under. Skalerer man hele billedet ned til en
   34 px topbar, bliver bogstaverne 8 px hoeje og ulaeselige.

   I baren vises derfor KUN ordmaerket: rammen har ordmaerkets eget forhold
   (1951:730), og billedet er 3,9 gange saa hoejt med object-position i
   toppen, saa boelgerne falder uden for. Ingen beskaering af selve filen -
   det samme billede bruges begge steder. */
.dtu-mark {
  flex: none; display: block; overflow: hidden;
  /* Tallene er MAALT i filen, ikke gaettet. Jeg gaettede foerst at ordmaerket
     fyldte de oeverste 733 px og satte rammen derefter - men det er 1047 px,
     saa bunden af bogstaverne blev skaaret af.

     Filen er 1951x2846:
       ordmaerket "DTU"  y 0-1047
       tomt              y 1047-1333
       de tre boelger     y 1333 og nedefter

     Hoejden foelger bredden - man kan ikke skrumpe den ene alene uden at
     klippe bogstaverne. Uden vandret polstring ER rammens bredde den indre
     bredde, saa tallene skal regnes forfra:

       indre bredde   40 px
       ordmaerket      40 x 1047/1951 = 21,5 px  -> indre hoejde mindst det
       boelgerne       40 x 1333/1951 = 27,3 px  -> indre hoejde under det
       valgt          24 px indre

     Billedet ligger med sit naturlige forhold og stikker ud nedad;
     overflow:hidden klipper boelgerne bort. Filen selv er ikke beskaaret -
     det er den samme fil der bruges i fuld stoerrelse paa loginkortet. */
  width: 40px; height: 28px;                 /* 24 px indre + 2x2 polstring */
  padding: 2px 0;
  /* Ingen hvid plade. Maerket staar paa sin egen gennemsigtige bund, som
     filen er tegnet - det ER det rigtige logo og ikke et billede af det.
     Prisen er at korporativ-roed er moerkere paa moerk bund end paa papir.
     DTU har en negativ udgave i hvidt til moerke flader; skal den bruges,
     er det den FIL der skal skiftes, ikke farven her. */
  box-shadow: var(--sh-1);
}
.dtu-mark img { display: block; width: 100%; height: auto; }

/* Navnet og krediteringen i én soejle, saa byline'en bruger barens HOEJDE
   og ikke dens bredde. Paa samme linje som navnet blev klyngen 568 px bred
   i en 524 px kasse, og teksten blev klippet af. */
.brand-text {
  display: flex; flex-direction: column; justify-content: center;
  gap: 1px; min-width: 0; line-height: 1.05;
}
.brand-name { display: flex; align-items: center; gap: 9px; white-space: nowrap; }

/* Krediteringen. Synlig, men den maa ikke konkurrere med noget man skal
   handle paa - den staar der for at blive laest én gang. */
.credit {
  font-size: 9.5px; letter-spacing: .01em; font-weight: 400;
  color: var(--on-bar-soft); opacity: .7; white-space: nowrap;
}
.brand:hover .credit { opacity: 1; }

/* Bliver der for lidt plads, ryger teksten foer maerket - logoet er en
   identitet, krediteringen er en note. */
@container shell (max-width: 1250px) { .credit { display: none; } }
@container shell (max-width: 1050px) { .dtu-mark { display: none; } }

/* ---- loginkortet: hele logoet, som det er tegnet ---- */
/* Loginkortet: hele logoet, ogsaa uden plade. */
.dtu-full { margin: 20px auto 0; width: 58px; }
.dtu-full img { display: block; width: 100%; height: auto; }

.login-credit {
  margin-top: 12px; font-size: 10.5px; color: var(--ink-soft);
  opacity: .8; text-align: center; line-height: 1.4;
}

/* Sloganet. Staar under undertitlen, hvor et slogan hoerer - lige efter navnet
   det driller. Kursiv og daempet: det skal laeses én gang og saa glemmes, ikke
   konkurrere med programmets navn. */
.tagline {
  margin: 9px 0 0; font-size: 11.5px; font-style: italic;
  color: var(--accent); opacity: .85; letter-spacing: .01em;
}

/* Sprogvalget nederst i maerkesoejlen, med en kort streg over: det er en
   INDSTILLING for skaermen, ikke en del af identiteten ovenover.
   Stregen tegnes med ::after og position:absolute frem for en border-top, fordi
   en kant paa selve pillen ville loebe med rundt om dens runde hjoerner. */
.login-brand .lang-pick {
  position: relative;
  display: inline-flex;
  margin: 18px auto 0;
}
.login-brand .lang-pick::after {
  content: ""; position: absolute; left: 50%; top: -10px;
  width: 54px; height: 1px; transform: translateX(-50%);
  background: var(--line-soft);
}

/* ---------------- NULSTIL FILTER ----------------
   Findes kun naar der er noget at nulstille. */
.st-reset {
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--warn); background: rgba(var(--warn-rgb), .12);
  border: 1px solid rgba(var(--warn-rgb), .38);
  transition: background .12s;
}
.st-reset:hover { background: rgba(var(--warn-rgb), .22); }

/* ---- Skjulte stationer ----
   Chippen er bevidst IKKE advarselsfarvet som "Clear filter". Der er ikke sket
   noget forkert, og en gul chip der staar resten af togtet ville laere folk at
   se forbi den gule farve - ogsaa naar den betyder noget. Neutral naar den blot
   fortaeller, accent naar man har slaaet kigget til. */
.st-hidden-chip {
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--surface-3);
  border: 1px solid var(--line-soft);
  transition: background .12s, color .12s, border-color .12s;
}
.st-hidden-chip:hover { color: var(--ink); border-color: var(--line); }
.st-hidden-chip.on {
  color: var(--accent); background: rgba(var(--accent-rgb), .14);
  border-color: rgba(var(--accent-rgb), .45);
}

/* Den daempede raekke. Farven ligger paa cellernes TEKST, ikke som opacity paa
   <tr>: opacity ville ogsaa daempe typefarven og maerket, og saa kan man ikke
   se HVAD det er man har skjult. Baggrunden er svag nok til at hover-reglen
   ovenfor stadig vinder - se .inst-table tbody tr.st-row:hover > td. */
.st-hidden > td { background: rgba(127,127,127,.05); color: var(--ink-soft); }
.pill.hidden-pill {
  background: rgba(127,127,127,.14); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px rgba(127,127,127,.32);
}

/* ---- Popup: fjern stationer fra listen ---- */
.hs-card { width: min(660px, 94vw); }
/* Beskeden om at intet slettes er ikke en fodnote - den er grunden til at man
   trygt kan trykke. Derfor egen flade, foer listen, ikke under knapperne. */
.hs-safe {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  background: var(--ok-soft); border: 1px solid rgba(61,220,151,.28);
}
.hs-safe b { color: var(--ink); }
.hs-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.hs-tab {
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); background: transparent; border: 1px solid var(--line-soft);
}
.hs-tab:hover { color: var(--ink); }
.hs-tab.on {
  color: var(--accent); background: rgba(var(--accent-rgb), .14);
  border-color: rgba(var(--accent-rgb), .45);
}
.hs-list {
  max-height: min(46vh, 340px); overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 4px;
}
/* Kolonnerne skal flugte ned gennem listen. Med ren flexbox stod tid og redskab
   forskudt fra raekke til raekke, og saa kan man ikke laese den som en tabel -
   og det er praecis hvad man skal: sammenligne raekker for at finde dubletten. */
.hs-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 18px 44px minmax(74px, auto) minmax(48px, auto) 1fr auto;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--ink);
}
.hs-row:hover { background: var(--surface-3); }
.hs-row input { cursor: pointer; accent-color: var(--accent); margin: 0; }
.hs-row .type-name { font-size: 12px; }
.hs-no { font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-op { color: var(--ink-soft); }
.hs-when { color: var(--ink-soft); font-size: 11.5px; }
.hs-note { font-size: 10.5px; color: var(--warn); font-weight: 700; letter-spacing: .04em; }
/* Den station der optager lige nu. Den staar med i listen, men kan ikke vaelges -
   fjernede vi raekken helt, ville man leede efter den og tro der var en fejl. */
.hs-row.is-locked { cursor: not-allowed; opacity: .55; }
.hs-row.is-locked:hover { background: transparent; }
.hs-empty { margin: 14px 6px; font-size: 12.5px; color: var(--ink-soft); }
.hs-who { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.hs-who label { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
/* ================= CTD-DYBDE =================
   En SKUFFE i højre kant, uden for dokumentets flow.

   To forsøg før dette, og begge kostede plads: først en bjælke i fuld bredde
   (en hel række på ét tal), så et smalt kort inde i toprækken — som stjal
   bredde fra felterne, så "Comment (optional)" blev klippet af.

   position: fixed løser begge: betjeningspanelet har sin fulde bredde tilbage,
   og skuffen kan skydes væk af den der ikke har en CTD i vandet.

   `right: 0` og `top` regnet med --ui-zoom: UI-skalaen bruger `zoom` på
   rodelementet, og et fixed element måler stadig mod vinduet — men længderne
   ganges med zoom. Uden divisionen ville kortet vandre nedad når man zoomer,
   præcis som .screen og modalerne længere op i filen håndterer det. */
.ctd-drawer {
  position: fixed; right: 0; z-index: 40;
  /* --ctd-y er hvor langt nede skuffen sidder, 0-100 % af vinduets højde.
     Sat af app.js når man trækker i fanen; 50 er midt på skærmen. */
  top: calc((var(--ctd-y, 50) * 1vh) / var(--ui-zoom, 1));
  transform: translateY(-50%);
  display: flex; align-items: stretch;
  transition: right .18s ease;
}
/* Under et træk: ingen overgang, ellers slæber kortet efter musen. */
.ctd-drawer.traekker { transition: none; }
.ctd-drawer.traekker .ctd-tab { cursor: grabbing; }

/* Skudt ind: hele kortet er ude af billedet, og kun håndtaget stikker ud.
   Flyttet med `right` og ikke med translateX, så håndtaget bliver liggende. */
.ctd-drawer.inde { right: calc(-1 * var(--ctd-w)); }

.ctd-drawer { --ctd-w: 194px; }

/* Håndtaget. Lodret tekst — det er en fane, og tre bogstaver læses fint sådan.
   Den er bevidst smal: skudt ind må skuffen ikke tage mere end en kant. */
.ctd-tab {
  flex: 0 0 auto; width: 26px; cursor: grab;
  touch-action: none;          /* ellers ruller siden i stedet for at traekke */
  background: var(--surface-3); color: var(--ink-soft);
  border: 1px solid var(--line); border-right: 0;
  border-radius: 8px 0 0 8px; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ctd-tab:hover { color: var(--ink); border-color: var(--accent); }
.ctd-tab-txt {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.ctd-chev { font-size: 15px; line-height: 1; transition: transform .18s ease; }
/* Pilen peger den vej skuffen går: ude -> peger ud (skub væk), inde -> ind. */
.ctd-drawer.inde .ctd-chev { transform: rotate(180deg); }

.ctd-card {
  width: var(--ctd-w); padding: 12px 14px; margin: 0;
  border-radius: 0; border-right: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.ctd-label {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ctd-val {
  display: flex; align-items: baseline; gap: 3px;
  font-family: ui-monospace, Consolas, monospace;
  /* Tallet skal kunne laeses staaende paa den anden side af laboratoriet.
     Derfor tabular-nums: uden dem hopper bredden naar cifrene skifter, og et
     tal der vipper frem og tilbage er svaerere at laese end et der staar
     stille. */
  font-variant-numeric: tabular-nums;
  /* 37px: stoerre og stadig plads til fire cifre (fx 1013.5 m) i skuffens bredde. */
  font-size: 42px; font-weight: 700; line-height: 1.1; color: var(--ink);
}
.ctd-unit { font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* Pilen: ned = grøn, op = rød, vandret streg når den står stille.
   Den har afløst kurven — man skal vide hvilken VEJ den går, ikke se et
   forløb. En pil kan læses uden at fokusere; en kurve kan ikke. */
.ctd-arrow {
  font-size: 20px; line-height: 1; margin-left: 3px; font-weight: 700;
  color: var(--ink-soft);
}
.ctd-arrow.ned { color: var(--ok); }
.ctd-arrow.op  { color: var(--danger); }
.ctd-age { font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }
/* Tom alderslinje (frisk maaling, "live" fjernet) fylder ingenting -> stoerre tal. */
/* PLADSEN ER RESERVERET, OGSAA NAAR DER IKKE STAAR NOGET.
   Linjen kollapsede foer (display:none), og saa flyttede "Full screen numbers"
   -knappen og hele panelets underkant sig hver gang teksten kom og gik - "no
   data", "12 s ago", tom. Det er den samme uro som raekkerne blev rettet for;
   den sad bare i en linje ingen taenkte paa som en raekke. */
.ctd-age { min-height: 13px; }
.ctd-age:empty { display: block; }
/* .ctd-val fandtes ikke laengere efter ombygningen til "Sensor depths" (tallene
   hedder nu .sd-val), saa dybden blev ikke daempet naar data var gammelt. */
.ctd-card.is-stale .ctd-val,
.ctd-card.is-stale .sd-val,
.ctd-card.is-stale .sd-val b { color: var(--ink-soft); }
.ctd-card.is-stale .ctd-age { color: var(--danger); font-weight: 600; }

/* Bunddybden — den ENE ekstra værdi der er plads til, fordi den er den man
   sætter CTD-dybden i forhold til. Label først, som man læser det:
   "Total depth : 35.8 m". Kolonet står i CSS, så teksten i markup kan
   oversættes uden at slæbe tegnsætning med ind i ordbogen. */
.ctd-bottom {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line);
  /* flex-wrap: ved fire cifre (fx 1013.5 m) faar vaerdien lov at falde ned paa
     sin egen linje i stedet for at flyde ud af skuffen. */
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
}
.ctd-bottom span {
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink-soft);
}
.ctd-bottom span::after { content: " :"; }
.ctd-bottom b {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; font-size: 17px; color: var(--ink);
}

/* Smal skærm: en skuffe der dækker 186 px af en telefonbred side er i vejen.
   Den bliver, men starter skudt ind — app.js sætter kun klassen når der ikke er
   et valg gemt for denne PC. */
@media (max-width: 720px) {
  .ctd-drawer { --ctd-w: 164px; }
}

/* ================= VNC-SKUFFEN (instrumentskaerme, slide-in) =================
   Samme mekanik som CTD-skuffen, men i VENSTRE kant og meget stoerre: ét stort
   instrumentvindue med en fanerraekke oeverst der vaelger hvilken skaerm der
   fylder det. Dybden bor til hoejre, instrumenterne til venstre - de to skuffer
   kan aldrig ligge oven i hinanden. */
.vnc-drawer {
  position: fixed; right: 0; z-index: 41;
  /* --vncd-y: hvor langt nede skuffen sidder (0-100 % af vindueshoejden).
     Sat af app.js naar man traekker i fanen. Alle tre skuffer sidder i hoejre
     side, saa standardhoejderne er forskudt (se app.js) for ikke at ligge oven
     i hinanden. */
  top: calc((var(--vncd-y, 72) * 1vh) / var(--ui-zoom, 1));
  transform: translateY(-50%);
  display: flex; align-items: stretch;
  transition: right .2s ease;
}
.vnc-drawer.traekker { transition: none; }
.vnc-drawer.traekker .vnc-tab { cursor: grabbing; }

.vnc-drawer { --vncd-w: min(62vw, 820px); }
/* Skudt ind: hele kortet ud af billedet til hoejre, kun haandtaget stikker ud.
   Flyttet med `right` (ikke translateX), saa fanen bliver liggende i kanten. */
.vnc-drawer.inde { right: calc(-1 * var(--vncd-w)); }

/* Haandtaget - lodret fane som CTD i hoejre kant: fanen FOERST i DOM'en, kortet
   efter, saa fanen bliver staaende yderst mod skaermen naar kortet skydes ud. */
.vnc-tab {
  flex: 0 0 auto; width: 30px; cursor: grab;
  touch-action: none;            /* ellers ruller siden i stedet for at traekke */
  /* HELT uigennemsigtig: man kunne se stationstabellen igennem haandtaget
     (Christian). --surface-3 kan vaere translucent i nogle temaer - laas den
     til en solid flade + eget lag, saa intet skinner igennem. */
  background: var(--surface-3); background-color: var(--surface-3);
  isolation: isolate; color: var(--ink-soft);
  border: 1px solid var(--line); border-right: 0;
  border-radius: 8px 0 0 8px; padding: 14px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  align-self: center;            /* fanen midtstilles ud for det store kort */
}
.vnc-tab:hover { color: var(--ink); border-color: var(--accent); }
.vnc-tab-txt {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.vnc-chev { font-size: 15px; line-height: 1; transition: transform .2s ease; }
/* Ude: pilen peger mod hoejre kant (skub vaek). Inde: peger ind (traek ud). */
.vnc-drawer.inde .vnc-chev { transform: rotate(180deg); }

/* ---- VENSTRE skuffe: spejl af hoejre --------------------------------------
   Samme skuffe, forankret i VENSTRE kant. I HTML'en staar kortet FOERST og fanen
   EFTER, saa flex-raekken er [kort][fane]: kortet ligger mod venstre kant, fanen
   paa dets inder-side. Skudt ind glider kortet ud til VENSTRE (left:-w), saa kun
   fanen stikker ud i venstre kant. --vncd-w/-y/-h/-bright deles NavnMaessigt men
   saettes paa hvert sit element, saa de to skuffer ikke paavirker hinanden. */
.vnc-drawer-left { left: 0; right: auto; transition: left .2s ease; }
.vnc-drawer-left.inde { left: calc(-1 * var(--vncd-w)); right: auto; }
/* Fanen sidder paa kortets HOEJRE side (inder-siden), rundet mod hoejre, og
   accent-stregen (rav) flytter med over paa hoejre kant. */
.vnc-drawer-left .vnc-tab {
  border-radius: 0 8px 8px 0; border-left: 0;
  border-right: 3px solid #f0a94f;
}
.vnc-drawer-left .vnc-card { border-left: 0; border-right: 0; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
/* Chevron peger modsat den hoejre (mod venstre kant); base-reglen roterer den
   180° naar skuffen er inde, saa den saa peger ind mod skaermen. */

.vnc-card {
  width: var(--vncd-w); margin: 0; padding: 0;
  /* Rundede hjoerner paa INDER-siden (Christian: "hvorfor har ingen af skufferne
     rounded edges"). Yder-siden mod skaermkanten forbliver lige. */
  border-radius: 16px 0 0 16px; border-right: 0;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  overflow: hidden;
}
/* Venstre skuffe: rundingen spejlvendes (inder-siden er nu hoejre). */
.vnc-drawer-left .vnc-card { border-radius: 0 16px 16px 0; }

/* Hovedet med fanerne + et lille maaltal (fps/kB) yderst. */
.vnc-d-head {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 12px 0; border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}
.vnc-d-tabs { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 1 auto; }
.vnc-d-tab {
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-soft); border-radius: 8px 8px 0 0;
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  border-bottom: 0; margin-bottom: -1px;
  transition: color .12s, background .12s, border-color .12s;
}
.vnc-d-tab:hover { color: var(--ink); border-color: var(--accent); }
/* Den valgte fane haenger sammen med vinduet nedenunder (samme bund). */
.vnc-d-tab.on {
  color: var(--ink); background: #05080b; font-weight: 600;
  border-color: var(--line);
}
.vnc-d-meta {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  color: var(--ink-soft); white-space: nowrap; flex: 0 0 auto;
  padding-bottom: 6px;
  /* Fast reserveret bredde + tabular-cifre: fps-tallet ("4 /s" -> "12 /s")
     skiftede bredde, og da fanerraekken til venstre er den fleksible, hoppede
     slideren frem og tilbage. Nu aendrer meta ikke stoerrelse. Hoejrestillet,
     saa tallet vokser indad i sin egen boks. */
  min-width: 118px; text-align: right; font-variant-numeric: tabular-nums;
}
/* "Control"-knap i skuffen: mus+tastatur-ikon. Aabner skaermen i fuld visning
   klar til at koere. Sidder i hovedet ved siden af fps-meta. Master-only. */
.vnc-d-ctrl {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  margin-bottom: 6px; padding: 5px 11px;
  border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 8px;
  background: rgba(var(--accent-rgb), .12); color: var(--accent);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.vnc-d-ctrl:hover { background: var(--accent); color: #04202a; border-color: var(--accent); }
.vnc-d-ctrl svg { width: 15px; height: 15px; }
.vnc-d-ctrl span { white-space: nowrap; }
/* Maximér-knap: zoomer skuffen stor. Sidder i hovedet ved siden af de andre. */
.vnc-d-max {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 28px; margin-bottom: 6px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
  color: var(--ink-soft); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.vnc-d-max:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .55); }
.vnc-d-max svg { width: 15px; height: 15px; }
.vnc-d-max.on { background: var(--accent); border-color: var(--accent); color: #04202a; }
/* Stor tilstand: kraftigere skygge, saa den store skuffe loefter sig tydeligt
   fra dashboardet (stationslisten) nedenunder. */
.vnc-drawer.stor .vnc-card { box-shadow: 0 24px 70px rgba(0,0,0,.6); }

/* Nat-daempning af instrumentskaermen. */
.vnc-d-dim {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding-bottom: 6px; color: var(--ink-soft);
}
.vnc-d-dim svg { width: 15px; height: 15px; fill: currentColor; opacity: .85; }
.vnc-d-dim input[type="range"] {
  width: 74px; accent-color: var(--accent); cursor: pointer;
}

/* Selve billedet fylder bredden; hoejden foelger med. Men vinduets SYNLIGE hoejde
   er --vncd-h, og billedet er forankret i toppen med overflow: hidden - saa et
   kort vindue viser kun toppen (dybdetallet), og traekker man det laengere ned
   kommer resten frem, helt til bunden. Hoejden traekkes med gribebjaelken
   nedenfor og huskes pr. PC (se vncDrawerH i app.js). */
.vnc-d-screen {
  position: relative; background: #05080b;
  height: var(--vncd-h, 360px);
  overflow: hidden;
}
/* --vncd-bright: 1 = fuld, lavere = daempet (nat). Kun visning, ikke data.
   BEGGE laerreder (hoejre + venstre skuffe) - foer ramte filteret kun #vncDCanvas,
   saa nat-daemperen paa venstre skuffe gjorde ingenting. */
#vncDCanvas, #vncDCanvasL { display: block; width: 100%; height: auto; filter: brightness(var(--vncd-bright, 1)); }
/* FIT (default): skaler HELE billedet ned saa det passer i skuffe-vinduet
   (contain, centreret) - ellers fylder laerredet bredden ud og bliver klippet
   for hoejt naar VNC-formen ikke matcher skuffen. Id-selektor for at slaa
   width:100% ovenfor. */
.vnc-d-screen.fit { display: flex; align-items: center; justify-content: center; }
.vnc-d-screen.fit #vncDCanvas, .vnc-d-screen.fit #vncDCanvasL {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
}
/* FILL: fyld hele kortet, beskaer kanterne, behold forhold (cover). STRETCH: fyld
   praecist, kan forvraenge (fill). Begge udnytter det sorte rum (Christian). */
.vnc-d-screen.fill #vncDCanvas, .vnc-d-screen.fill #vncDCanvasL {
  width: 100%; height: 100%; object-fit: cover;
}
.vnc-d-screen.stretch #vncDCanvas, .vnc-d-screen.stretch #vncDCanvasL {
  width: 100%; height: 100%; object-fit: fill;
}

/* Gribebjaelken: skal SES, saa nye ved at vinduet kan traekkes hoejere/lavere.
   Hoejere baand, accent-farvet greb med to streger og smaa pile op/ned. */
.vnc-d-resize {
  flex: 0 0 auto; height: 22px; cursor: ns-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(var(--surface-2), var(--surface-3));
  border-top: 1px solid var(--line);
}
.vnc-d-resize::before, .vnc-d-resize::after {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  opacity: .7;
}
.vnc-d-resize::before { border-bottom: 5px solid var(--accent); }   /* op-pil */
.vnc-d-resize::after  { border-top: 5px solid var(--accent); }      /* ned-pil */
.vdr-grip {
  width: 52px; height: 5px; border-radius: 3px;
  background: var(--accent); opacity: .8;
}
.vnc-d-resize:hover, .vnc-d-resize:focus-visible { background: var(--surface-2); outline: none; }
.vnc-d-resize:hover .vdr-grip,
.vnc-d-resize:focus-visible .vdr-grip { opacity: 1; }
.vnc-d-resize:hover::before, .vnc-d-resize:hover::after { opacity: 1; }

/* Gribeprikker paa fanen: et lille signal om at den kan traekkes op og ned. */
.vnc-tab-grip {
  width: 4px; height: 15px; margin-top: 3px; opacity: .55;
  background: radial-gradient(circle, var(--ink-soft) 1.1px, transparent 1.5px) 0 0 / 4px 5px;
}
.vnc-tab:hover .vnc-tab-grip { opacity: .95; }
.vnc-d-wait {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-soft); font-size: 13px; text-align: center;
  background: rgba(5, 8, 11, .72);
}
.vnc-d-wait .prik {
  display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  border-radius: 50%; background: var(--warn);
  animation: vncpuls 1.4s ease-in-out infinite;
}
.vnc-d-wait code { color: var(--ink); font-size: 11px; }

/* Ingen skaerme sat op - samme placering som venteboksen. */
.vnc-d-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  color: var(--ink-soft); font-size: 13px; padding: 18px;
  background: #05080b;
}
.vnc-d-empty code { color: var(--ink); font-size: 11.5px; }

/* "MIK til Lasse"-fanen: broens daek-tal (A/B) i stedet for et VNC-billede.
   Ligger som overlay i samme skaerm-boks. Tallenes px-stoerrelse saettes i JS
   (paintDrawerData) saa den SPEJLER fuldskaerm-daekket, skaleret til skuffe-bredden. */
.vnc-d-data {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: #05080b; padding: 14px; text-align: center;
}
.vnc-d-data-row { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.vnc-d-data-l {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.vnc-d-data-num { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vnc-d-data-u { font-size: 12px; color: var(--ink-soft); }
/* Fanen for data-visningen: lille satellit-ikon + accent naar valgt. */
.vnc-d-tab-data.on { color: var(--accent); }

/* Smal skaerm: lad vinduet tage naesten hele bredden, men start skudt ind. */
@media (max-width: 900px) {
  .vnc-drawer { --vncd-w: min(90vw, 820px); }
}

/* ================= TOGT-SKUFFEN (aktivt togt, slide-in) =================
   Togtets stamdata laa foer som en fast bjaelke paa tvaers af toppen. Nu en
   skuffe i hoejre side som CTD - saa toppen er ryddet og alle tre skuffer sidder
   samlet i hoejre kant. Standardhoejde 24 %: oeverst af de tre, saa fanerne
   Cruise / CTD / Instruments staar hver for sig. */
.cruise-drawer {
  position: fixed; right: 0; z-index: 40;
  top: calc((var(--cruise-y, 22) * 1vh) / var(--ui-zoom, 1));
  transform: translateY(-50%);
  display: flex; align-items: stretch;
  transition: right .18s ease;
}
.cruise-drawer.traekker { transition: none; }
.cruise-drawer.traekker .cruise-tab { cursor: grabbing; }
.cruise-drawer { --cruise-w: 250px; }
.cruise-drawer.inde { right: calc(-1 * var(--cruise-w)); }

.cruise-tab {
  flex: 0 0 auto; width: 26px; cursor: grab; touch-action: none;
  background: var(--surface-3); color: var(--ink-soft);
  border: 1px solid var(--line); border-right: 0;
  border-radius: 8px 0 0 8px; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  align-self: center;
}
.cruise-tab:hover { color: var(--ink); border-color: var(--accent); }
.cruise-tab-txt {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.cruise-chev { font-size: 15px; line-height: 1; transition: transform .18s ease; }
.cruise-drawer.inde .cruise-chev { transform: rotate(180deg); }

.cruise-card {
  width: var(--cruise-w); margin: 0; padding: 12px 14px;
  border-radius: 0; border-right: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cd-label {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.cd-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.cd-meta { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.cd-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; border-top: 1px solid var(--line); padding-top: 5px;
}
.cd-row:first-child { border-top: 0; padding-top: 0; }
.cd-k { color: var(--ink-soft); flex: 0 0 auto; }
.cd-v { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.cd-empty { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* Finish cruise - synlig hovedhandling nederst i togt-skuffen (ikke gemt i en menu). */
.cd-finish {
  display: block; width: 100%; margin-top: 14px; padding: 10px 12px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: var(--accent); color: var(--bg, #06222b);
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.cd-finish:hover { filter: brightness(1.07); }
.cd-finish:active { transform: translateY(1px); }
.cd-finish-hint { margin-top: 6px; font-size: 11px; color: var(--ink-soft); line-height: 1.4; }

@media (max-width: 720px) { .cruise-drawer { --cruise-w: 210px; } }

/* De tre faner i hoejre kant faar hver sin lille farve, saa man kan kende dem
   fra hinanden med det samme: en farvet stribe paa den indre kant + samme farve
   paa pilen. Bevidst daempet - det er et kendemaerke, ikke en advarsel. */
.cruise-tab { border-left: 3px solid #6ea8ff; }        /* blaa - togt */
.cruise-tab .cruise-chev { color: #6ea8ff; }

/* TASKS-SKUFFEN: samme slide-mekanik som togt/CTD, egen y (--pdr-y) + teal kendemaerke. */
.prog-drawer {
  position: fixed; right: 0; z-index: 40;
  top: calc((var(--pdr-y, 84) * 1vh) / var(--ui-zoom, 1));
  transform: translateY(-50%);
  display: flex; align-items: stretch; transition: right .18s ease;
  --pdr-w: 264px;
}
.prog-drawer.traekker { transition: none; }
.prog-drawer.traekker .prog-dr-tab { cursor: grabbing; }
.prog-drawer.inde { right: calc(-1 * var(--pdr-w)); }
.prog-drawer.prog-dr-empty { display: none; }   /* ingen opgaver = ingen skuffe */
.prog-dr-tab {
  flex: 0 0 auto; width: 26px; cursor: grab; touch-action: none;
  background: var(--surface-3); color: var(--ink-soft);
  border: 1px solid var(--line); border-right: 0; border-left: 3px solid #2fd4c0;
  border-radius: 8px 0 0 8px; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; align-self: center;
}
.prog-dr-tab:hover { color: var(--ink); border-color: var(--accent); }
.prog-dr-txt {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.prog-dr-chev { font-size: 15px; line-height: 1; color: #2fd4c0; transition: transform .18s ease; }
.prog-drawer.inde .prog-dr-chev { transform: rotate(180deg); }
.prog-dr-card {
  width: var(--pdr-w); margin: 0; padding: 12px 14px; border-radius: 0; border-right: 0;
  display: flex; flex-direction: column; gap: 8px; max-height: 70vh;
}
.pd-head { display: flex; align-items: center; justify-content: space-between; }
.pd-label { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.pd-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.pd-task {
  /* FASTE yder-kolonner. Med "auto 1fr auto" faldt hoejre kolonne sammen paa de
     raekker der ingen position har, midterfeltet blev bredere - og pillen flyttede
     sig i forhold til raekken ovenover. Nu er baade tid og tal reserveret plads,
     saa pillerne staar i lod hele vejen ned, ogsaa naar felterne er tomme. */
  display: grid; grid-template-columns: 52px 1fr 44px; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line);
}
.pd-task > :last-child { display: flex; justify-content: center; }
.pd-time { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: center; }
.pd-act { min-width: 0; display: flex; justify-content: center; }   /* centrér pillen */
/* Mindre skrift + tættere padding i skuffen, saa laengere navne ("MST CTD + Z…")
   faar plads uden at blive klippet (Christian). */
.pd-act .prog-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; padding: 4px 10px; }
/* Dublet-advarsel ved traeknummer. */
.haul-warn { display: none; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--warn); }
.haul-warn.on { display: block; }
input.dup { border-color: var(--warn) !important; }
/* Traeknummer der gaar igen, markeret i stationslisten. */
.haul-dup { color: var(--warn); font-weight: 700; white-space: nowrap; }

.pd-empty { font-size: 12px; color: var(--ink-soft); line-height: 1.4; padding: 2px; }
@media (max-width: 720px) { .prog-drawer { --pdr-w: 220px; } }
.ctd-tab { border-left: 3px solid #4fd1c5; }            /* teal - dybde */
.ctd-tab .ctd-chev { color: #4fd1c5; }
.vnc-tab { border-left: 3px solid #f0a94f; }            /* rav - instrumenter */
.vnc-tab .vnc-chev { color: #f0a94f; }

/* AF-KASSE: fanerne var fyldte kasser (flad baggrund + 1px kant hele vejen rundt
   + halv-rundede hjoerner). Christian: fjern kassen. Kun den farvede kant-stribe
   (kendemaerket) + pil + lodret tekst bliver staaende, saa fanen ligner en flig i
   skaermkanten frem for en paaklistret boks. Ligger EFTER kant-stribe-reglerne
   ovenfor, saa border-left (rav/teal/blaa) bevares; kun baggrund, top/bund-kant og
   hjoerne-runding ryddes. .stn-tab (fyldt accent-pille) roeres ikke - den er allerede
   en flig, ikke en kasse. */
.ctd-tab, .vnc-tab, .cruise-tab, .prog-dr-tab {
  /* 19/8: var `transparent` - og saa kunne man LAESE stationstabellen tvaers
     igennem haandtaget (Christian). Af-kassningen handlede om at fjerne kant og
     hjoerne-runding, ikke om gennemsigtighed: en UIGENNEMSIGTIG flade i sidens
     egen farve ser stadig ud som en flig i skaermkanten - bare uden gennemsyn.
     (Denne regel ligger EFTER .vnc-tab's egen baggrund og vinder, saa farven
     skal saettes HER.) */
  background: var(--app-bg);
  border-top: 0; border-bottom: 0;
  border-radius: 0;
}
/* Venstre-spejlet instrument-fane: samme af-kasse, og fjern dens hoejre-runding. */
.vnc-drawer-left .vnc-tab { border-radius: 0; }

/* ================= VISNINGSVAELGER (prikkerne) ================= */
.views { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
/* Inde i et panelhoved: ingen egen bundmargen, og `margin-right: auto` så
   prikkerne bliver stående ved overskriften i stedet for at blive skubbet ud i
   midten af .panel-head's space-between. */
.panel-head .views { margin: 0 auto 0 0; }
/* Navnet er en gentagelse af den overskrift prikkerne nu står ved siden af, så
   det gemmes væk på smallere skærme frem for at presse hovedet om på to linjer. */
@container page (max-width: 1100px) {
  .panel-head .vw-navn, .panel-head .vw-tip { display: none; }
}
.vw-arrow {
  background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 50%; width: 30px; height: 30px; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0;
}
.vw-arrow:hover { color: var(--ink); border-color: var(--accent); }
.vw-dots { display: flex; gap: 8px; }
/* Prikkerne er RIGTIGE knapper, ikke pynt: de skal kunne rammes med en finger
   og naas med tastaturet. 11 px prik i et 26 px maal. */
.vw-dot {
  width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center;
}
.vw-dot i {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--line); transition: background .15s, transform .15s;
}
.vw-dot:hover i { background: var(--ink-soft); }
.vw-dot.on i { background: var(--accent); transform: scale(1.25); }
.vw-navn { font-size: 13px; font-weight: 700; color: var(--ink); }
.vw-tip { margin-left: auto; font-size: 11px; color: var(--ink-soft); opacity: .75; }

/* SPLIT-visningen: listen skal ikke fylde det hele, saa der er plads til
   instrumenterne under den. Kun DER faar den et loft. */
.split-view #stationsPanel .table-scroll { max-height: 34vh; overflow-y: auto; }

/* ================= INSTRUMENTSKAERME (VNC) ================= */
.vnc-piller { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vnc-pille {
  background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12px;
  cursor: pointer;
}
.vnc-pille:hover { color: var(--ink); }
.vnc-pille.on { background: rgba(var(--accent-rgb), .14); color: var(--accent);
                border-color: rgba(var(--accent-rgb), .45); font-weight: 600; }

/* Segmenterede knapper til layout. Samme udtryk som periode-knapperne paa et
   moderne dashboard: ét valg, synligt hvilket. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
       overflow: hidden; background: var(--surface-3); }
.seg button {
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 13px;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--accent); color: #04222a; }
.vnc-lab { color: var(--ink-soft); font-size: 11px; text-transform: uppercase;
           letter-spacing: .05em; }
#vncControls input[type=range] { width: 170px; accent-color: var(--accent); }

.vnc-grid { display: grid; gap: 10px; }
.vnc-pane { background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); overflow: hidden;
            display: flex; flex-direction: column; }
.vnc-pane h3 {
  margin: 0; padding: 7px 11px; font-size: 11.5px; font-weight: 700;
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.vnc-pane h3 .tal { color: var(--ink-soft); font-weight: 400;
                    font-family: Consolas, monospace; font-size: 10.5px; }
.vnc-skaerm {
  position: relative; background: #000; flex: 1;
  min-height: var(--vnc-h, 320px); max-height: var(--vnc-h, 320px);
  display: flex; align-items: center; justify-content: center;
}
/* NAT-DAEMPNING: kun lysstyrke. ALDRIG invert eller hue-rotate - paa et ekkolod
   ER farven maalingen, og en inverteret farveskala viser en anden ekkostyrke
   end den faktiske. Vi daemper; vi lyver ikke. */
.vnc-skaerm canvas { max-width: 100%; max-height: 100%; display: block;
                     filter: brightness(var(--vnc-dim, 1)); }
/* Ventebeskeden ligger OVENPAA laerredet, ikke i stedet for det. Laerredet skal
   findes fra foerste oejeblik - se kommentaren i vncTegn(). Halvgennemsigtig
   bund, saa et billede der lige er kommet kan skimtes bagved og man kan se at
   der ER noget paa vej. */
.vnc-venter {
  position: absolute; inset: 0; display: grid; place-content: center;
  background: rgba(0,0,0,.72);
  color: var(--ink-soft); font-size: 12.5px; text-align: center;
  padding: 18px; line-height: 1.7;
}
/* .vnc-venter[hidden] stod her som en engangslap. Den er afloest af den
   generelle "[hidden] { display: none !important }" oeverst i filen. */
.vnc-venter .prik {
  display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  border-radius: 50%; background: var(--warn); animation: vncpuls 1.4s ease-in-out infinite;
}
@keyframes vncpuls { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.vnc-venter code { color: var(--ink); font-size: 11px; }

.vnc-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* IP'en foerst og bredest - det er det eneste felt der SKAL udfyldes.
   Foer stod navnet i den brede kolonne, og saa blev IP'en skrevet i navnet. */
.vnc-row { display: grid; gap: 8px; align-items: center;
           grid-template-columns: 1fr 68px 190px auto; }
.vnc-row input {
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-soft);
  background: var(--input-bg); color: var(--ink); font-family: inherit; font-size: 13px;
}
.vnc-row .vnc-svar { font-size: 11px; color: var(--ink-soft); grid-column: 1 / -1;
                     margin-top: -2px; }
.vnc-row .vnc-svar.ok { color: var(--ok); }
.vnc-row .vnc-svar.bad { color: var(--danger); }

.hs-who input {
  width: 130px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line-soft); background: var(--input-bg);
  color: var(--ink); font-family: inherit; font-size: 13px;
}

/* Er der filtreret, siger Type-knappen det ogsaa - man kigger paa knappen,
   ikke paa nulstillingen ved siden af. */
.st-btn.is-filtered { border-color: rgba(var(--warn-rgb), .55); }
.st-btn.is-filtered .st-btn-value { color: var(--warn); }

/* Antallet i filtervinduets raekker. */
.tp-card .tp-row .st-n { justify-self: end; }

/* ---------------- VAELGERNES TOP: BACK OG SOEGNING ---------------- */
.tp-back {
  display: inline-flex; align-items: center; margin-bottom: 10px;
  padding: 5px 10px 5px 8px; border-radius: 8px;
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; line-height: 1; color: var(--ink-soft);
  transition: color .12s, background .12s, border-color .12s;
}
.tp-back:hover { color: var(--ink); background: var(--surface-3); border-color: var(--line-soft); }
.tp-back:focus-visible {
  outline: none; color: var(--ink); border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

.tp-search {
  width: 100%; margin-bottom: 10px;
  padding: 10px 12px; border-radius: 10px; font-family: inherit; font-size: 13.5px;
  background: var(--input-bg); color: var(--ink); border: 1px solid var(--line-soft);
}
.tp-search::placeholder { color: var(--ink-soft); }
.tp-search:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* ---------------- SLET EN PERSON ----------------
   Krydset ligger ved siden af raekken, ikke inde i den: en knap inde i en
   knap er ugyldig HTML, og browseren bryder den selv op - saa ville et klik
   paa krydset ogsaa vaelge personen.

   Det er daempet indtil man peger paa raekken. En raekke af roede kryds ved
   siden af hvert navn ser ud som en liste over problemer, ikke over kolleger. */
.op-row-wrap { display: flex; align-items: stretch; gap: 6px; }
.op-row-wrap > .tp-row { flex: 1; min-width: 0; }

.op-del {
  flex: none; width: 34px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink-soft);
  font-family: inherit; font-size: 13px; opacity: .5;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.op-row-wrap:hover .op-del, .op-del:focus-visible { opacity: 1; }
.op-del:hover {
  color: var(--danger); background: rgba(217, 115, 106, .12);
  border-color: rgba(217, 115, 106, .40);
}
.op-del:focus-visible { outline: none; border-color: var(--danger); }

/* Rediger en person direkte i listen - blyant ved siden af krydset. Begge er
   synlige uden at man skal hovere (opacity .5, ikke 0), for hele pointen er at
   man kan SE at man kan rette og fjerne uden at gaa ind i en menu. */
.op-edit {
  flex: none; width: 34px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink-soft);
  font-family: inherit; font-size: 14px; opacity: .5;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.op-row-wrap:hover .op-edit, .op-edit:focus-visible { opacity: 1; }
.op-edit:hover {
  color: var(--accent); background: rgba(79, 209, 197, .12);
  border-color: rgba(79, 209, 197, .40);
}
.op-edit:focus-visible { outline: none; border-color: var(--accent); }

/* Selve rette-raekken: initial-felt + navnefelt + Save/Cancel, i samme flex-
   raekke som en almindelig linje saa listen ikke hopper naar man aabner den. */
.op-edit-wrap { align-items: center; }
.op-edit-ini, .op-edit-name {
  background: var(--surface-3, #0e1113); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 12px; font: inherit; min-width: 0;
}
.op-edit-ini { flex: 0 0 118px; }
.op-edit-name { flex: 1; }
.op-edit-save, .op-edit-cancel { flex: none; padding: 9px 14px; }

/* Overskriften over tilfoej-felterne. Var foer et <summary> man skulle klikke
   ud - to trin for at goere én ting, og teksten sagde alligevel det samme som
   feltet under den. */
.tp-new-label {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 9px;
}

/* ---------------- DEMO-BANNER ----------------
   Ligger fast i bunden af skaermen og foelger med. Ingen maa kunne se paa
   skaermen et halvt minut og tro det er skibets rigtige system - hverken en
   kollega der klikker rundt, eller en der ser et skaermbillede senere. */
#demoBanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 18px;
  background: linear-gradient(180deg, rgba(var(--warn-rgb), .22), rgba(var(--warn-rgb), .14));
  border-top: 2px solid var(--warn);
  backdrop-filter: blur(6px);
  font-size: 12px; color: var(--ink);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
}
#demoBanner b {
  font-size: 10px; letter-spacing: .16em; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--warn); color: #1a1408;
}
#demoBanner span { color: var(--ink-soft); }

/* Gør plads, saa banneret ikke daekker det nederste kort. */
.is-demo body, html.is-demo body { padding-bottom: 46px; }

/* Koden i banneret og ved cifferpanelet. Et banner i bunden af skaermen
   bliver ikke laest af en der leder efter et sted at taste. */
#demoBanner .demo-code {
  padding: 1px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, .28); color: var(--ink);
  font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em;
}

/* Ét roligt felt paa sin EGEN linje, centreret over cifrene ligesom
   overskriften. Foer stod sætningen "Demo — the code is 1234" som nabo til
   "MASTER CODE" i samme flex-raekke: to tekster maset sammen, og koden i en
   kasse der var kraftigere end selve overskriften.

   Nu er det tre dele i én ramme - maerket, ordet, koden - saa oejet laeser
   det som én oplysning og ikke som en sætning der er kommet i vejen. */
.demo-code-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  /* max-width og wrap: paa en smal skaerm er feltet bredere end kortet, og
     "margin: 0 auto" gav saa en NEGATIV hoejremargen - feltet stak ud til
     hoejre og saa ud som om det var skaevt centreret. */
  width: fit-content; max-width: 100%; flex-wrap: wrap; row-gap: 4px;
  margin: 0 auto 12px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(var(--warn-rgb), .09);
  border: 1px solid rgba(var(--warn-rgb), .26);
}

.demo-code-hint .dch-tag {
  font-size: 8.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #1a1408;
  background: var(--warn); padding: 3px 7px; border-radius: 999px;
}

.demo-code-hint .dch-txt {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}

.demo-code-hint .dch-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .22em;
  color: var(--ink); padding-right: 2px;   /* sporafstanden efter sidste ciffer */
}

/* ---------------- TOGTSTRIBEN, FASTGJORT ----------------
   Togtet er kontekst for alt hvad man laver, ikke kun for forsiden. Den laa
   inde i betjeningskortet paa dashboardet, saa man paa WinCollect- eller
   instrumentfanen ikke kunne se hvilket togt man optog paa - og det er netop
   dér man laver de indstillinger der gaelder togtet.

   Den klaeber under topbaren, og data ruller ind under den. Topbaren er selv
   sticky med top:0, saa striben skal starte dér hvor baren slutter. Hoejden
   maales i JS og laegges i --topbar-h: baren er hoejere naar man zoomer, og
   et fast tal ville efterlade en stribe luft eller skjule striben halvt. */
.cruise-pinned {
  position: sticky; top: var(--topbar-h, 60px); z-index: 9;
  /* INGEN margen. Luften mellem topbaren og betjeningskortet var det Christian
     pegede på: striben er en bjælke UNDER topbaren, og kortet skal ligge tæt op
     ad den, ikke svæve under. Striben har sin egen underkant-streg, så der er
     stadig en synlig deling.

     Målt regnskab for de 27 px der var: 6 px stribemargen + 22 px padding-top
     på siden (se #tab-dashboard nedenfor). Margenen skal desuden være 0 fordi
     --cruise-h måles på stribens HØJDE - en margen ville lade den klæbende
     betjeningsrække sidde de px for højt. */
  margin: 0;
  /* Striben er barn af #app og skal BLIVE fuld bredde - den er en bjaelke under
     topbaren, og data ruller ind under den. Men INDHOLDET centreres.
     Foerste forsoeg var at flugte med panelerne nedenunder (padding-inline paa
     18 %, samme sted som #tab-dashboard begynder). Det saa stadig venstretungt
     ud, fordi teksten er kortere end den 64 % brede spalte - den fyldte den ene
     halvdel og efterlod den anden tom. Centreret staar den midt paa skaermen,
     hvor man kigger. */
  padding-block: 10px;
  padding-inline: 22px;
  justify-content: center;
  border-radius: 0; border-bottom: 1px solid var(--line-soft);
  border-top: 1px solid rgba(255, 255, 255, .04);
  background: linear-gradient(180deg,
              rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .04)),
              var(--bar);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
}

/* Uden aktivt togt er striben ikke kontekst, den er en opgave. Saa skal den
   ses, ikke glide i baggrunden. */
.cruise-pinned.none {
  background: linear-gradient(180deg,
              rgba(var(--warn-rgb), .16), rgba(var(--warn-rgb), .06)),
              var(--bar);
  border-bottom-color: rgba(var(--warn-rgb), .40);
}

/* Betjeningskortet begynder nu med sin egen krop - striben er flyttet ud, saa
   den oeverste kant skal lukkes af kortet selv. */
.op-card > .op-body:first-child { padding-top: 20px; }

/* Paa en lav skaerm er en fastgjort stribe mere i vejen end den er vaerd -
   den spiser en tiendedel af hoejden man har til data. */
@media (max-height: 620px) {
  .cruise-pinned { position: static; }
}

/* ---------------- KOMMENTAR-IKONET ----------------
   Kommentar og noter havde en egen linje under hver raekke. Det virkede, men
   det broed tabellen op: hver anden raekke var en halv raekke, og med tolv
   stationer ligner listen noget der er gaaet i stykker.

   Nu baeres de af ét ikon. Fyldt naar der staar noget, tom kontur naar der
   ikke goer - forskellen skal kunne ses ved at scanne kolonnen nedad, uden
   at laese. Teksten ligger i svaeveteksten og bag et klik. */
.col-cmt { width: 38px; text-align: center; padding-left: 0; padding-right: 0; }

.cmt-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink-soft);
  transition: color .12s, background .12s, border-color .12s;
}

.cmt-btn svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* Tom: en stille kontur. Den skal kunne trykkes, men ikke tigge om det. */
.cmt-btn { opacity: .45; }
.cmt-btn:hover { opacity: 1; color: var(--ink); background: var(--surface-3); border-color: var(--line-soft); }
.cmt-btn:focus-visible {
  outline: none; opacity: 1; color: var(--ink);
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* Har den noget: fyldt boble i accentfarven, og en lille prik saa forskellen
   ogsaa kan ses af en der ikke skelner farverne. */
.cmt-btn.has { opacity: 1; color: var(--accent); }
.cmt-btn.has svg { fill: rgba(var(--accent-rgb), .16); }
.cmt-btn.has:hover { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .34); }

.cmt-dot {
  position: absolute; top: 3px; right: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---------------- KOMMENTAR-VINDUET ---------------- */
.cmt-card { width: 520px; }

.cmt-who {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 16px; font-size: 13px; font-weight: 700; color: var(--ink);
}
.cmt-when { font-size: 11.5px; font-weight: 400; color: var(--ink-soft); }

.cmt-l {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 700;
}
.cmt-l + textarea { margin-bottom: 14px; }
.cmt-hint {
  letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 11px;
  color: var(--ink-soft); opacity: .8;
}

.cmt-card textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; resize: vertical;
  background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--line-soft); font-family: inherit; font-size: 13.5px;
  line-height: 1.5;
}
.cmt-card textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
/* Skrivebeskyttet for view-only: samme tekst, men tydeligt ikke et felt. */
.cmt-card textarea[readonly] {
  background: var(--code-bg); border-style: dashed; color: var(--ink-soft);
}

.cmt-card .modal-actions { align-items: center; gap: 12px; }
.cmt-card .save-msg { margin-right: auto; }

/* DATA-maerket flyttede ind i status-kolonnen da under-raekken forsvandt. */
.col-ok .pill.linked { margin-left: 6px; }

/* ---------------- FANEMENUEN ----------------
   To faner og én menu. Dashboard og WinCollect er dét man arbejder i; togter,
   redskaber og instrumenter saetter man op og roerer saa ikke igen. Fire
   ligestillede faner sagde at de fire ting var lige vigtige. */
.tab-menu-wrap { position: relative; display: inline-flex; }
/* Samme beholder til eksportmenuen i stationspanelets hoved. */
.menu-wrap { position: relative; display: inline-flex; }
/* Knappen er en .btn small, saa carettet skal have plads og linje op med teksten. */
#btnExportMenu { display: inline-flex; align-items: center; gap: 6px; }

.tab-menu { display: inline-flex; align-items: center; gap: 7px; }

.tm-caret {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .7; transition: transform .14s;
}
.tab-menu[aria-expanded="true"] .tm-caret { transform: rotate(180deg); }

/* Menuen placeres af JS (fixed), saa den ikke afhaenger af hvor hoej baren er. */
#progsMenu { position: fixed; width: 300px; }

/* ---------------- HANDLINGERNE I TABELRAEKKERNE ----------------
   Fem knapper i en raekke stod som fem lige vigtige valg. "Set active" er
   den man leder efter, sletning er den man helst ikke rammer - og de saa ens
   ud. Nu er de samlet i én gruppe med luft omkring sletningen. */
/* ---- Handlingerne i en togtraekke: ÉN gruppe, ikke fem loese knapper ----
   Fem haevede knapper med luft imellem blev en rodet raekke, og de var ikke
   engang lige hoeje: <a class="btn small"> fik sin hoejde af indholdet, mens
   skraldespanden havde faste 34 px.
   Nu er de felter i én ramme med tynde skillelinjer - samme moenster som
   kontrolbjaelken over stationslisten - og hoejden er sat ÉT sted, saa den ikke
   kan komme ud af trit igen. */
.col-act2 .row-acts, .col-act .row-acts {
  display: inline-flex; align-items: stretch; gap: 0; justify-content: flex-end;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface-2); box-shadow: var(--sh-1);
}
.row-acts > .btn.small {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 13px; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--ink); white-space: nowrap;
}
.row-acts > .btn.small:hover { background: var(--surface-3); filter: none; }
.row-acts > .btn.small:active { transform: none; }
.row-acts > .btn.small + .btn.small { border-left: 1px solid var(--line); }

/* Sletningen skilles fra de andre med en tynd streg, saa haanden ikke glider
   fra "Backup" til skraldespanden.
   flex-centrering, og INGEN padding-left oven i en fast bredde: foer stod der
   width:34px (border-box) og padding-left:12px, saa indholdsfeltet blev 21 px
   og ikonet sad 12 px for langt til hoejre i sin egen knap. */
.row-acts .icon-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 32px; padding: 0; margin: 0;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none;
  color: var(--ink-soft); cursor: pointer; opacity: .55;
  transition: opacity .12s, color .12s, background .12s;
}
.row-acts .icon-del:hover { opacity: 1; color: var(--danger); background: var(--danger-soft); }
.row-acts .icon-del:focus-visible {
  outline: none; opacity: 1; color: var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger);
}
/* SPAENDT tilstand ("Sure?"). Skal staa EFTER reglen ovenfor: .icon-del.armed
   staar tidligere i filen med samme specificitet, saa width:38px og
   background:none herover ville ellers vinde - ordet blev klippet og den roede
   flade forsvandt, netop paa den knap der skal vaere umulig at misforstaa. */
.row-acts .icon-del.armed {
  width: auto; padding: 0 13px; opacity: 1;
  color: #fff; background: var(--danger);
  font-size: 12px; font-weight: 700;
}

/* ---------------- BETJENINGSRAEKKEN, FASTGJORT ----------------
   Stationslisten ruller nu ind under baade togtstriben OG den raekke man
   betjener stationen fra. Det er de to ting man skal kunne se hele tiden:
   hvilket togt man er paa, og START/STOP.

   Den klaeber under striben, saa toppen er topbaren + stribens hoejde. Begge
   maales i JS - de bliver hoejere naar man zoomer, og et fast tal ville
   efterlade en stribe af listen synlig oven over raekken. */
.op-row {
  position: sticky;
  top: calc(var(--topbar-h, 60px) + var(--cruise-h, 0px));
  z-index: 8;
}

/* Luften mellem togtstriben og betjeningskortet.
   Var 8 px en overgang (Christian ville have kortet tæt op under topbaren dengang
   VNC skulle spare højde). Nu er VNC slået fra, så der er højde at give af igen -
   24 px giver kortet plads til at ånde. Kun ved toppen: når man ruller, klæber
   betjeningsrækken alligevel helt op under striben. Margenen på .cruise-pinned
   bliver 0 (se der) - luften SKAL ligge her som padding, ikke som en margen der
   ville flytte den klæbende række for højt op. */
#tab-dashboard { padding-top: 24px; }

/* Raekken skal have sin EGEN bund. Uden den kunne man se stationslisten
   igennem de 18 px mellem de to kort mens den rullede under - to raekker
   tekst der glider gennem en revne midt i betjeningen.

   Den daekker praecis raekken - inset:0, ingen udblødning. Foerst lod jeg den
   gaa 22 px ud til hver side og lagde en ekstra skyggegradient under, og det
   gav en synlig lodret soem langs kortets kant: en flade der stak ud bag
   kortets EGEN skygge, saa skyggen laa oven paa en anden baggrund end resten
   af siden. Udblødningen var desuden unoedvendig - panelet nedenunder er
   lige saa bredt som raekken, saa der ruller aldrig noget i margenen.

   Baggrunden er sidens egen faste gradient. background-attachment:fixed
   betyder at den regnes fra vinduet og ikke fra elementet, saa de to flader
   ligger praecis oven i hinanden og soemmen forsvinder.

   ADVARSEL (27/8): kamuflagen holder KUN saa laenge temaets body faktisk viser
   token-radialen. Overskriver et tema body-baggrunden direkte (som aquax),
   SKAL det ogsaa overskrive denne ::before med praecis samme baggrund -
   ellers bliver pladen synlig som moerke/lyse klatter i kortenes
   hjoerne-notcher ("spooky corners"). Se aquax-blokken (~9049). */
.op-row::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: var(--app-bg);
  background-image: radial-gradient(1200px 700px at 50% -10%,
                    var(--app-bg-2), var(--app-bg));
  background-attachment: fixed;
}
/* FADE-KANT under pladen (Christian 27/8: "ikke saadan et direkte cutoff").
   Foer blev listen KLIPPET med en lige linje praecis ved pladens bund, naar den
   rullede ind under betjeningsraekken. Nu: en lille zone under raekken med SAMME
   faste side-baggrund som pladen, men masket fra fuld daekning til gennemsigtig
   - saa indholdet toner ud i stedet for at blive skaaret. Masken aendrer kun
   ALFA, saa kamuflagen (praecis samme baggrund som siden) holder stadig.
   OBS: temaer der overskriver body-baggrunden skal OGSAA overskrive denne
   (samme regel som ::before - se aquax-blokken). */
.op-row::after {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
  background: var(--app-bg);
  background-image: radial-gradient(1200px 700px at 50% -10%,
                    var(--app-bg-2), var(--app-bg));
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

/* Lav skaerm: topbar + stribe + raekke ville spise over halvdelen af
   hoejden, og saa er der ikke plads til den liste man rullede i.
   Grænsen er hoejere end stribens egen, fordi raekken er meget hoejere. */
@media (max-height: 820px) {
  .op-row { position: static; }
  .op-row::before, .op-row::after { display: none; }
}

/* ============================================================
   DANA LIVE — fullscreen neon live-display (danalive.js)
   ============================================================ */
.dl-launch { display: inline-flex; align-items: center; gap: 8px; }
.dl-launch-dot { width: 9px; height: 9px; border-radius: 50%; background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee; animation: dlPulse 1.8s ease-in-out infinite; }
@keyframes dlPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Dana Live er nu en FANE: den ligger UNDER topbaren (top: --topbar-h), saa
   app-topbaren altid er synlig og man kan hoppe videre uden at "exit". Kun
   snapshot-tilstanden (aabnet fra et stationskort, med Back) daekker HELE
   skaermen inkl. topbaren - det er en frossen modal-visning, ikke en fane. */
.dana-live {
  position: fixed; top: var(--topbar-h, 60px); left: 0; right: 0; bottom: 0;
  z-index: 200; display: flex; flex-direction: column;
  background: radial-gradient(1200px 700px at 72% -12%, #12263f 0%, #0a1420 55%, #060d16 100%);
  color: #eaf2f6; font-family: "Inter", system-ui, "Segoe UI", sans-serif;
}
.dana-live.dl-snap { top: 0; }
.dana-live.hidden { display: none; }

/* ===== SCANMAR LIVE [Beta] - trawl-geometri ===== */
.sc-beta-pill, .sc-beta {
  display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: .1em;
  background: linear-gradient(180deg, #f0b429, #d9822b); color: #2a1600;
  padding: 1px 6px; border-radius: 999px; vertical-align: middle; margin-left: 5px;
  text-transform: uppercase;
  /* Fast, lav linjehoejde: ellers loefter pillen fanens linjeboks og goer fanen
     hoejere end naboerne (det var med til at "spise" af topbaren). */
  line-height: 1.35;
}
.sc-live {
  position: fixed; top: var(--topbar-h, 60px); left: 0; right: 0; bottom: 0;
  z-index: 200; display: flex; flex-direction: column;
/* TILBAGE TIL PANELERNES EGEN BAGGRUND.
     Jeg gav dem forsidens - og det blev vaerre. Forsidens forloeb er lavet til
     en side hvor indholdet fylder fladen ud; i et live-panel, hvor indholdet
     sidder i toppen og resten er tomt, blev de nederste to tredjedele til et
     sort hul. Panelernes eget forloeb (lysere, og med tyngdepunktet til
     hoejre) baerer den tomme plads. */
  background: radial-gradient(1200px 700px at 70% -10%, #123049 0%, #0a1826 55%, #060e16 100%);
  color: #eaf2f6; font-family: "Inter", system-ui, "Segoe UI", sans-serif;
}
.sc-live.hidden { display: none; }
.sc-head { display: flex; align-items: center; gap: 22px; padding: 15px 26px;
  border-bottom: 1px solid rgba(120,160,200,.14); }
.sc-brand { font-size: 20px; letter-spacing: .04em; display: flex; align-items: center; }
.sc-brand b { color: #4fd1c5; }
.sc-dot { width: 10px; height: 10px; border-radius: 50%; background: #4fd1c5; margin-right: 10px;
  box-shadow: 0 0 12px #4fd1c5; animation: pulse 2s infinite; }
.sc-clock { color: #9fc0d2; font-size: 13px; font-variant-numeric: tabular-nums; }
.sc-status { flex: 1; }
.sc-catch { color: #3ddc97; font-weight: 800; cursor: help; }
.sc-fish { color: #7fd3e8; font-weight: 700; cursor: help; }
.sc-fish-src { color: #6f93a8; font-weight: 500; font-size: .9em; }
.sc-close { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff;
  padding: 8px 15px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; }
.sc-close:hover { background: rgba(var(--danger-rgb),.55); border-color: rgba(var(--danger-rgb),.65); }
.sc-close svg { width: 15px; height: 15px; }
/* Vindues-vaelger (5 min / 30 min / 2 timer) */
.sc-seg { display: inline-flex; gap: 2px; background: rgba(0,0,0,.28);
  border: 1px solid rgba(120,160,200,.16); border-radius: 9px; padding: 3px; }
.sc-seg button { background: transparent; border: 0; color: #9fc0d2; font: inherit; font-size: 12px;
  padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.sc-seg button.on { background: rgba(79,209,197,.18); color: #d7f5f0; font-weight: 700; }
/* FIT: fordel højden i stedet for at scrolle (så de nederste værdi-kort ikke
   forsvinder ud af skærmen på en 1080p-laptop). Tværsnittet er den fleksible
   sektion; dør-kort + værdi-kort er faste og trimmes lidt. Christian. */
.sc-body { flex: 1; display: flex; flex-direction: column; gap: 12px;
  padding: 12px 26px; min-height: 0; overflow-y: auto; }

/* Doer-adfaerd (hero): er de to skovle i balance? */
.sc-doors { background: rgba(0,0,0,.22); border: 1px solid rgba(120,160,200,.14);
  border-radius: 16px; padding: 16px 18px; }
.sc-doors-h { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #b8ccdb; font-weight: 800; }
.sc-doors-sub { text-transform: none; letter-spacing: 0; color: #7fa2b8; font-weight: 500; font-size: 12px; margin-left: 8px; }
.sc-verdict { margin: 6px 0 8px; font-size: 15px; font-weight: 700; padding: 9px 14px; border-radius: 10px;
  background: rgba(120,160,200,.1); color: #cfe0ea; }
.sc-verdict.ok { background: rgba(61,220,151,.14); color: #7ff0c0; }
.sc-verdict.warn { background: rgba(240,180,41,.15); color: #f5cf7a; }
.sc-verdict.bad { background: rgba(var(--danger-rgb),.18); color: #ffb1a8; }
.sc-door-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-door-t { font-size: 12.5px; color: #cbdae6; display: flex; align-items: center; gap: 8px; }
.sc-lg { margin-left: auto; font-size: 11px; color: #8fb0c6; display: inline-flex; align-items: center; gap: 5px; }
.sc-lg i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.sc-lg-p { background: #7fb8e8; } .sc-lg-s { background: #f0a35a; margin-left: 8px; }
.sc-door-chart { height: 84px; margin: 8px 0 6px; }
.sc-door-chart canvas { width: 100%; height: 100%; display: block; }
.sc-door-read { font-size: 12.5px; color: #9fc0d2; font-variant-numeric: tabular-nums; }
.sc-door-read b { color: #eaf2f6; }

/* Trend-kort: de rigtige maalte sensorer over tid */
.sc-trends { flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.sc-tcard { background: linear-gradient(180deg, rgba(18,34,54,.6), rgba(10,20,32,.55));
  border: 1px solid rgba(120,160,200,.14); border-radius: 14px; padding: 10px 12px; }
.sc-tc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sc-tc-name { font-size: 12px; color: #b8ccdb; }
.sc-tc-now { white-space: nowrap; }
.sc-tc-val { font-size: 24px; font-weight: 800; color: var(--c, #fff); font-variant-numeric: tabular-nums; }
.sc-tc-unit { font-size: 11px; color: #8fb0c6; }
/* 42 px var for lidt til at se en TENDENS i - man kunne se at kurven fandtes,
   ikke hvad den gjorde. Kortene er alligevel det man kigger paa naar man vil
   vide om noget er paa vej et sted hen. */
.sc-tc-chart { height: 64px; margin: 6px 0 5px; }
.sc-tc-chart canvas { width: 100%; height: 100%; display: block; }
.sc-tc-stats { font-size: 11px; color: #7fa2b8; font-variant-numeric: tabular-nums; }
/* Gear-tvaersnit (bagfra, til skala) */
.sc-xsection { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: rgba(0,0,0,.22); border: 1px solid rgba(120,160,200,.14);
  border-radius: 16px; padding: 14px 16px; }
.sc-xs-h { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #b8ccdb; font-weight: 800; }
.sc-xs-sub { text-transform: none; letter-spacing: 0; color: #7fa2b8; font-weight: 500; font-size: 12px; margin-left: 8px; }
/* Tværsnittet er den fleksible sektion: den giver/tager plads så alt fitter. */
/* Gear-tvaersnittet er den ENESTE tegning der viser hvordan trawlet staar i
   vandet, og den laa paa 130 px mellem to blokke der fyldte tre gange saa
   meget. Kroppen ruller (overflow:auto), saa en hoejere minimumshoejde koster
   ikke andet end at man paa en meget lav skaerm skal rulle lidt. */
.sc-xs-chart { flex: 1 1 auto; min-height: 210px; height: auto; margin-top: 8px; }
.sc-xs-chart canvas { width: 100%; height: 100%; display: block; }

.sc-foot { padding: 9px 26px; border-top: 1px solid rgba(120,160,200,.12); color: #90aec0; font-size: 12.5px; }
.sc-exit-hint { color: #6f8ba0; font-size: 12px; white-space: nowrap; }
.sc-tcard { cursor: zoom-in; }
.sc-tcard:hover { border-color: rgba(79,209,197,.4); }

/* ============ CTD LIVE [Beta] ============ */
.cl-live {
  position: fixed; top: var(--topbar-h, 60px); left: 0; right: 0; bottom: 0;
  z-index: 200; display: flex; flex-direction: column;
/* TILBAGE TIL PANELERNES EGEN BAGGRUND.
     Jeg gav dem forsidens - og det blev vaerre. Forsidens forloeb er lavet til
     en side hvor indholdet fylder fladen ud; i et live-panel, hvor indholdet
     sidder i toppen og resten er tomt, blev de nederste to tredjedele til et
     sort hul. Panelernes eget forloeb (lysere, og med tyngdepunktet til
     hoejre) baerer den tomme plads. */
  background: radial-gradient(1200px 700px at 70% -10%, #123049 0%, #0a1826 55%, #060e16 100%);
  color: #eaf2f6; font-family: "Inter", system-ui, "Segoe UI", sans-serif;
}
.cl-live.hidden { display: none; }
.cl-head { display: flex; align-items: center; gap: 22px; padding: 15px 26px;
  border-bottom: 1px solid rgba(120,160,200,.14); }
.cl-brand { font-size: 20px; letter-spacing: .04em; display: flex; align-items: center; }
.cl-brand b { color: #6ea8ff; }
.cl-dot { width: 10px; height: 10px; border-radius: 50%; background: #6ea8ff; margin-right: 10px;
  box-shadow: 0 0 12px #6ea8ff; animation: pulse 2s infinite; }
.cl-clock { color: #9fc0d2; font-size: 13px; font-variant-numeric: tabular-nums; }
.cl-status { flex: 1; display: flex; align-items: center; gap: 10px; }
.cl-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase; }
.cl-badge.live { background: rgba(110,168,255,.18); color: #b9d4ff; }
.cl-badge.standby { background: rgba(240,180,41,.15); color: #f5cf7a; }
.cl-badge.demo { background: rgba(180,120,240,.16); color: #d7b8f5; }
.cl-badge.off { background: rgba(120,160,200,.12); color: #9fc0d2; }
.cl-age { color: #7fa2b8; font-size: 12px; font-variant-numeric: tabular-nums; }
.cl-body { flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 16px 22px; min-height: 0; overflow-y: auto; }

/* Tal-stribe OVENOVER grafen: hero (3 store) + sensor-kort (smaa), kompakt. */
.cl-top { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.cl-hero { flex: 0 0 auto; display: flex; gap: 10px; }
/* FAST bredde paa hver hero-flise, saa "Total water depth" (tom "—" vs et tal)
   ikke skubber de andre kort naar vaerdien kommer/gaar (Christian). */
/* FAST HOEJDE ogsaa - saa "Total water depth"s undertekst (kort "depth + altimeter"
   vs lang "waiting for altimeter (< 10 m to bottom)") ikke goer flisen hoejere og
   SKUBBER grafen nedad naar vaerdien mangler (Christian). Undertekst klippes til 2 linjer. */
.cl-hero-tile { background: linear-gradient(180deg, rgba(18,40,64,.7), rgba(10,20,32,.6));
  border: 1px solid rgba(120,160,200,.16); border-left: 3px solid var(--c, #6ea8ff);
  border-radius: 13px; padding: 10px 15px; flex: 0 0 172px; height: 98px; overflow: hidden; }
.cl-hero-tile.cl-dim { opacity: .5; }
/* "TOTAL WATER DEPTH" er den laengste etiket og wrappede til 2 linjer i den faste
   flise (skubbede tallet ned). Strammere spacing + lidt mindre + tvunget 1 linje. */
.cl-hero-name { font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: #b8ccdb; font-weight: 800; white-space: nowrap; }
.cl-hero-val { font-size: 33px; font-weight: 600; color: var(--c, #fff); line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: 3px; }
.cl-hero-unit { font-size: 15px; color: #8fb0c6; font-weight: 600; margin-left: 5px; }
.cl-hero-sub { font-size: 11px; color: #7fa2b8; margin-top: 3px; min-height: 26px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* "Clear plot"-knap i hovedet (rydder profil-sporet, start nyt cast). */
.cl-clear { flex: 0 0 auto; background: rgba(120,160,200,.12); color: #cfe0ec;
  border: 1px solid rgba(120,160,200,.22); border-radius: 8px; padding: 6px 12px;
  font-size: 12.5px; cursor: pointer; }
.cl-clear:hover { background: rgba(120,160,200,.2); color: #eaf2f6; }
/* CTD Xplorer-knap i CTD Live-headeren (flyttet ud af Mini Maps 16/9). Accent-
   tonet, saa den skiller sig ud som en handling der aabner en anden visning. */
.cl-xplorer { flex: 0 0 auto; background: rgba(79,209,197,.14); color: #7fe3d8;
  border: 1px solid rgba(79,209,197,.4); border-radius: 8px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cl-xplorer:hover { background: rgba(79,209,197,.24); color: #b9f4ec; }

/* Sensor-kort (kun tal) - smaa, CENTRERET i rummet mellem total-dybde-kortet og
   skaermkanten (Christian). Flex + justify-center i stedet for et grid der fylder
   bredden ud. */
.cl-cards { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-content: flex-start; }
/* STOERRE sensor-kort (Christian: "de er meget smaa") + STØRRELSES-SLIDER: alle mål
   skaleres af --cl-csize (husket), saa man selv kan faa dem til at passe paa én
   vandret linje med de store kort - ogsaa paa en 1080p-laptop. */
.cl-card { flex: 0 0 auto; min-width: calc(150px * var(--cl-csize, 1));
  background: linear-gradient(180deg, rgba(18,34,54,.6), rgba(10,20,32,.55));
  border: 1px solid rgba(120,160,200,.14); border-radius: 12px;
  padding: calc(10px * var(--cl-csize, 1)) calc(15px * var(--cl-csize, 1)); }
.cl-card-name { font-size: calc(13px * var(--cl-csize, 1)); color: #b8ccdb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.cl-card-now { white-space: nowrap; }
.cl-card-now [data-now] { font-size: calc(28px * var(--cl-csize, 1)); font-weight: 800; color: var(--c, #fff);
  font-variant-numeric: tabular-nums; }
.cl-card-unit { font-size: calc(13px * var(--cl-csize, 1)); color: #8fb0c6; margin-left: 2px; }
/* "Waiting for data"-tekst i hvert kort naar CTD er tavs (Christian). */
.cl-card-wait { display: none; font-size: calc(11px * var(--cl-csize, 1)); color: #f5cf7a; font-weight: 600; margin-top: 3px; }
.cl-nodata .cl-card-wait { display: block; }

/* Kort-størrelses-slider i hovedet. */
.cl-size { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #9fc0d2; font-size: 12px; white-space: nowrap; }
.cl-size input[type="range"] { width: 92px; accent-color: var(--accent, #6ea8ff); cursor: pointer; }

/* Manuel Y-akse (dybde-range) popup. */
.cl-yr-wrap { position: relative; display: inline-block; }
.cl-yr-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 214px;
  background: #0c1826; border: 1px solid rgba(120,160,200,.28); border-radius: 12px; padding: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.62); }
.cl-yr-pop.hidden { display: none; }
.cl-yr-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9fc0d2; font-weight: 700; margin-bottom: 9px; }
.cl-yr-row { display: flex; gap: 9px; }
.cl-yr-row label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #9fc0d2; }
.cl-yr-row input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(120,160,200,.3);
  border-radius: 7px; color: #eaf2f6; padding: 6px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cl-yr-actions { display: flex; gap: 8px; margin-top: 11px; }
.cl-yr-actions button { flex: 1; padding: 6px; border-radius: 8px; border: 1px solid rgba(120,160,200,.3);
  background: rgba(120,160,200,.12); color: #cfe0ec; font-size: 12.5px; cursor: pointer; }
.cl-yr-actions button:hover { background: rgba(120,160,200,.2); }
.cl-yr-actions button.accent { background: rgba(110,168,255,.2); color: #eaf4ff; border-color: rgba(110,168,255,.5); }
.cl-yr-note { font-size: 11px; color: #7fa2b8; margin-top: 8px; }

/* NED / OP / BEGGE - tre knapper i en ramme, saa de laeses som ET valg og
   ikke som tre ting man kan slaa til hver for sig. */
.cl-seg { display: inline-flex; border: 1px solid rgba(120,160,200,.3);
  border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.04); }
.cl-seg button { border: 0; background: transparent; color: #9fc0d2; cursor: pointer;
  padding: 6px 11px; font-size: 12.5px; line-height: 1; }
.cl-seg button + button { border-left: 1px solid rgba(120,160,200,.22); }
.cl-seg button:hover { background: rgba(120,160,200,.14); color: #cfe0ec; }
.cl-seg button.on { background: rgba(110,168,255,.24); color: #eaf4ff; font-weight: 700; }

/* Ranges-popuppen er bredere end Y-aksens: tre spalter i stedet for to, og
   sensornavne der ikke maa braekke midt over. */
/* Bredere end Y-aksens: tre spalter i raekkerne og TRE knapper i foden. */
.cl-rg-pop { width: 322px; }
.cl-rg-pop .cl-yr-actions button { font-size: 11.5px; padding: 6px 4px; }
.cl-rg-list { display: flex; flex-direction: column; gap: 6px;
  max-height: 262px; overflow-y: auto; }
.cl-rg-row { display: grid; grid-template-columns: 14px 1fr 68px 68px;
  gap: 7px; align-items: center; }
/* PRIKKEN ER KNAPPEN. Den rigtige <input type=color> ligger usynligt oven
   paa - saa faar vi styresystemets egen farvevaelger uden at bygge en, og
   maalet er stort nok til at ramme paa et skib i soegang. */
.cl-rg-farve { position: relative; display: block; width: 14px; height: 14px;
  cursor: pointer; }
.cl-rg-farve i { position: absolute; inset: 2px; width: auto; height: auto;
  border-radius: 50%; display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.cl-rg-farve:hover i { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.cl-rg-farve input { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cl-rg-row i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.cl-rg-row span { font-size: 12px; color: #9fc0d2; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cl-rg-row input { width: 100%; background: rgba(255,255,255,.06);
  border: 1px solid rgba(120,160,200,.3); border-radius: 7px; color: #eaf2f6;
  padding: 5px 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
/* Pladsholderen ER auto-vaerdien - den skal kunne ses, men ikke forveksles
   med et tal nogen har skrevet. */
.cl-rg-row input::placeholder { color: #5f7f95; font-style: italic; }
.cl-rg-tom { font-size: 12px; color: #7fa2b8; padding: 6px 2px; }

/* Station-banner i hovedet: hvilken CTD-station tallene hoerer til. */
.cl-station { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 5px 13px; border-radius: 999px; font-size: 13px; color: #cfe6f4;
  background: rgba(110,168,255,.14); border: 1px solid rgba(110,168,255,.32); }
.cl-station b { color: #fff; font-weight: 800; }
.cl-stn-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ea8ff; box-shadow: 0 0 8px #6ea8ff; }
.cl-stn-type { padding: 1px 8px; border-radius: 6px; background: rgba(143,209,160,.18); color: #a9e2ba; font-weight: 700; font-size: 12px; }
/* OPERATOEREN = en person, ikke et redskab. Egen dæmpet pille med et
   figur-ikon, saa "CTD MIK" ikke laenger kan laeses som to redskabskoder. */
.cl-stn-op { display: inline-flex; align-items: center; gap: 4px;
  color: #9fc0d2; font-size: 12px; padding: 1px 8px 1px 6px; border-radius: 6px;
  background: rgba(120,160,200,.14); }
.cl-stn-opico { width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.cl-stn-none { color: #f5cf7a; font-size: 12.5px; font-weight: 600; }

/* WAITING FOR DATA (CTD slukket/tavs): tydelig badge + tal daempes saa "–" ikke ligner en fejl. */
.cl-badge.nodata { background: rgba(240,180,41,.16); color: #f5cf7a; }
.cl-nodata .cl-hero-val, .cl-nodata .cl-card-now [data-now] { opacity: .32; }

/* Profilet fylder resten (bredt, mest muligt af skaermen). */
.cl-profile { flex: 1 1 auto; min-width: 0; min-height: 340px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14,32,52,.55), rgba(8,16,26,.5));
  border: 1px solid rgba(120,160,200,.16); border-radius: 16px; overflow: hidden; }
/* Chips (sensor-valg) til venstre, vaerktoejer (reset zoom / PNG) til hoejre. */
.cl-prof-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid rgba(120,160,200,.14); }
.cl-prof-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.cl-prof-tools { display: flex; gap: 8px; flex: 0 0 auto; }
.cl-tbtn { background: rgba(120,160,200,.12); color: #cfe0ec; border: 1px solid rgba(120,160,200,.22);
  border-radius: 8px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.cl-tbtn:hover { background: rgba(120,160,200,.2); color: #eaf2f6; }
.cl-tbtn-accent { background: rgba(110,168,255,.16); color: #bcd6ff; border-color: rgba(110,168,255,.4); }
.cl-tbtn-accent:hover { background: rgba(110,168,255,.28); color: #eaf4ff; }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid rgba(120,160,200,.22); border-radius: 999px; background: rgba(120,160,200,.06);
  color: #9fc0d2; font-size: 12px; cursor: pointer; }
.cl-chip:hover { border-color: rgba(120,160,200,.4); color: #cfe0ec; }
.cl-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #6ea8ff); opacity: .45; }
.cl-chip.on { color: #fff; border-color: var(--c, #6ea8ff); background: rgba(255,255,255,.06); }
.cl-chip.on .cl-chip-dot { opacity: 1; box-shadow: 0 0 8px var(--c, #6ea8ff); }
.cl-prof-plot { flex: 1; position: relative; min-height: 300px; }
.cl-prof-plot canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.cl-profile-empty { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center;
  color: #7fa2b8; font-size: 14.5px; padding: 20px; }
.cl-profile-empty span { font-size: 12.5px; color: #5f7f95; }
.cl-foot { padding: 9px 26px; border-top: 1px solid rgba(120,160,200,.12); color: #90aec0; font-size: 12.5px; }
@media (max-width: 760px) { .cl-hero { flex-wrap: wrap; } .cl-hero-val { font-size: 26px; } }

/* Fokus-udvidelse: ét kort blaest op til fuld stoerrelse. */
.sc-focus { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  gap: 14px; padding: 18px 26px;
/* TILBAGE TIL PANELERNES EGEN BAGGRUND.
     Jeg gav dem forsidens - og det blev vaerre. Forsidens forloeb er lavet til
     en side hvor indholdet fylder fladen ud; i et live-panel, hvor indholdet
     sidder i toppen og resten er tomt, blev de nederste to tredjedele til et
     sort hul. Panelernes eget forloeb (lysere, og med tyngdepunktet til
     hoejre) baerer den tomme plads. */
  background: radial-gradient(1200px 700px at 70% -10%, #123049 0%, #0a1826 55%, #060e16 100%); }
.sc-focus.hidden { display: none; }
.sc-focus-head { display: flex; align-items: center; gap: 16px; }
.sc-focus-back { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 8px 14px; border-radius: 9px;
  cursor: pointer; font: inherit; font-size: 13px; }
.sc-focus-back:hover { background: rgba(255,255,255,.18); }
.sc-focus-back svg { width: 15px; height: 15px; }
.sc-focus-title { font-size: 17px; font-weight: 700; color: #eaf2f6; }
.sc-focus-now { margin-left: auto; font-size: 20px; color: #eaf2f6; font-variant-numeric: tabular-nums; }
.sc-focus-now b { color: #4fd1c5; }
.sc-focus-chart { flex: 1; min-height: 0; background: rgba(0,0,0,.22);
  border: 1px solid rgba(120,160,200,.14); border-radius: 16px; padding: 8px; }
.sc-focus-chart canvas { width: 100%; height: 100%; display: block; }
.sc-focus-stats { color: #7fa2b8; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Sensor-setup: cog i headeren + remap-panel */
.sc-cog { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); color: #cfe0ea; cursor: pointer; }
.sc-cog:hover { background: rgba(255,255,255,.15); }
.sc-cog svg { width: 17px; height: 17px; }
.sc-cog-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #f0b429; color: #2a1600; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.sc-cog-badge.hidden { display: none; }
.sc-sensors { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; gap: 12px;
  padding: 18px 26px; background: radial-gradient(1200px 700px at 70% -10%, #123049 0%, #0a1826 55%, #060e16 100%); }
.sc-sensors.hidden { display: none; }
.sc-sensors-hint { color: #9fc0d2; font-size: 13px; max-width: 74ch; line-height: 1.5; margin: 0; }
.sc-sensors-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sc-srow { display: grid; grid-template-columns: minmax(150px, 220px) 18px minmax(150px, 240px) auto;
  align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px;
  background: rgba(18,34,54,.5); border: 1px solid rgba(120,160,200,.12); }
.sc-srow.changed { border-color: rgba(240,180,41,.45); background: rgba(240,180,41,.06); }
.sc-srole { font-weight: 700; color: #eaf2f6; }
.sc-sarrow { color: #7fa2b8; text-align: center; }
.sc-ssel { background: rgba(10,22,36,.7); color: #eaf2f6; border: 1px solid rgba(120,160,200,.25);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.sc-schg { color: #f0b429; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.sc-schg-ok { color: #4f7a6a; font-size: 11px; }
/* Dublet: samme kanal valgt to steder -> roed advarsel (ikke bare "changed"-amber) */
.sc-srow.dup { border-color: rgba(224,80,80,.55); background: rgba(224,80,80,.08); }
.sc-sdup { color: #f06a6a; }
.sc-dup-warn { margin: 0 0 10px; padding: 9px 12px; border-radius: 9px;
  background: rgba(224,80,80,.12); border: 1px solid rgba(224,80,80,.4); color: #f2a7a7;
  font-size: 12.5px; font-weight: 600; }
.sc-sensors-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sc-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff;
  padding: 8px 14px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; }
.sc-btn:hover { background: rgba(255,255,255,.18); }
.sc-sensors-note { color: #7fa2b8; font-size: 12px; }

/* Detected-sensors-listen i sensor-panelet */
.sc-det-h { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #b8ccdb; font-weight: 800; }
.sc-det-sub { text-transform: none; letter-spacing: 0; color: #7fa2b8; font-weight: 500; font-size: 12px; margin-left: 8px; }
.sc-detected { display: flex; flex-direction: column; gap: 5px; max-height: 30vh; overflow-y: auto; }
.sc-det-empty { color: #7fa2b8; font-size: 12.5px; padding: 4px 2px; }
.sc-det-row { display: grid; grid-template-columns: minmax(88px, 130px) 16px minmax(88px, 160px) auto 1fr;
  align-items: center; gap: 10px; padding: 6px 12px; border-radius: 9px;
  background: rgba(18,34,54,.5); border: 1px solid rgba(120,160,200,.12); font-size: 13px; }
.sc-det-row.unknown { border-color: rgba(240,180,41,.5); background: rgba(240,180,41,.07); }
.sc-det-raw { font-family: "SF Mono", Consolas, monospace; color: #cbdae6; }
.sc-det-arrow { color: #7fa2b8; text-align: center; }
.sc-det-field { color: #eaf2f6; font-weight: 600; }
.sc-det-val { color: #9fc0d2; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-cpill { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.sc-c-confirmed { color: #7ff0c0; background: rgba(61,220,151,.14); }
.sc-c-likely { color: #7fd3e8; background: rgba(127,211,232,.14); }
.sc-c-uncertain { color: #f5cf7a; background: rgba(240,180,41,.14); }
.sc-c-operator { color: #c3a3f0; background: rgba(195,163,240,.16); }
.sc-c-unknown, .sc-c-aliased { color: #2a1600; background: #f0b429; }
.sc-cog-badge.sc-cog-alert { background: #ef6b5e; color: #fff; }
@media (max-width: 760px) { .sc-door-panels { grid-template-columns: 1fr; } }
.dl-head { display: flex; align-items: center; gap: 24px; padding: 16px 26px;
  border-bottom: 1px solid rgba(120,160,200,.14); }
.dl-brand { font-size: 22px; letter-spacing: .18em; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.dl-brand b { font-weight: 800; }
.dl-dot { width: 12px; height: 12px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 14px #22d3ee; animation: dlPulse 1.8s ease-in-out infinite; }
.dl-clock { font-family: Consolas, monospace; font-size: 20px; color: #9fc6de; letter-spacing: .08em; }
.dl-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* Segmenterede kontroller (layout + tidsvindue) */
.dl-seg { display: inline-flex; gap: 3px; background: rgba(10,22,36,.6); border: 1px solid rgba(120,160,200,.16); border-radius: 12px; padding: 4px; }
.dl-seg button { border: 0; background: none; color: #9fc6de; padding: 7px 13px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13.5px; }
.dl-seg button.on { background: rgba(34,211,238,.16); color: #d7f6ff; box-shadow: inset 0 0 0 1px rgba(34,211,238,.4); }
.dl-btn { border: 1px solid rgba(120,160,200,.2); background: rgba(10,22,36,.6); color: #cfe4f0; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 17px; }
.dl-btn:hover { background: rgba(34,211,238,.14); }
.dl-btn.on { background: rgba(34,211,238,.2); color: #d7f6ff; border-color: rgba(34,211,238,.5); }
.dl-close:hover { background: rgba(229,72,77,.2); color: #ffd7d7; }

/* Position & navigation: fast stribe OVER graferne (som WinCollect 2.0's nav-panel,
   nu inde i Dana Live). Store aflaesninger, ingen grafer - position/tid grafer ikke. */
.dl-nav { flex: none; padding: 12px 26px 0; }
.dl-nav.hidden { display: none; }
.dl-nav-title { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #7ee7f2; margin: 0 0 8px 2px; }
.dl-nav-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.dl-nav-card { background: linear-gradient(180deg, rgba(18,34,54,.6), rgba(10,20,32,.55));
  border: 1px solid rgba(120,160,200,.14); border-radius: 12px; padding: 9px 14px; min-width: 0; }
.dl-nav-l { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #7f9bb3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-nav-u { color: #5f7488; }
.dl-nav-v { display: block; font-size: 26px; font-weight: 700; color: #eaf2f6; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .dl-nav-row { grid-template-columns: repeat(3, 1fr); } }

/* Grid + layout-modes: Wide (3), Compact (mange smaa), Focus (2 store). */
.dl-grid { flex: 1; display: grid; gap: 16px; padding: 20px 26px; min-height: 0; overflow-y: auto; grid-auto-rows: 1fr; }
.dl-grid.lay-wide { grid-template-columns: repeat(3, 1fr); }
.dl-grid.lay-compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* Focus = ÉN stor graf man vaelger med chips oeverst (flex-kolonne, ikke grid). */
.dl-grid.lay-focus { display: flex; flex-direction: column; gap: 12px; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
/* Grupperet chip-visning: hver kategori i sin egen pæne klynge med label. */
.dl-chips-grouped { gap: 10px 14px; align-items: flex-start; }
.dl-chipgrp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px 6px 9px; border-radius: 12px;
  background: rgba(10,22,36,.35); border: 1px solid rgba(120,160,200,.12); }
.dl-chipgrp-l { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: #7fa2b8; font-weight: 800; margin-right: 3px; white-space: nowrap; }
.dl-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(120,160,200,.2);
  background: rgba(10,22,36,.55); color: #9fc6de; border-radius: 999px; padding: 6px 13px; cursor: pointer; font: inherit; font-size: 13px; }
.dl-chip:hover { background: rgba(34,211,238,.1); }
.dl-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dl); box-shadow: 0 0 7px var(--dl); }
.dl-chip.on { color: #eaf2f6; border-color: var(--dl); box-shadow: inset 0 0 0 1px var(--dl); }
.dl-chips-hint { align-self: center; margin-left: 4px; font-size: 12px; color: #5f7488; font-style: italic; }
/* Focus-overlay (flere sensorer paa ét plot): farvekodet legende. */
.dl-multi .dl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 10px; }
.dl-leg { display: inline-flex; align-items: baseline; gap: 7px; font-size: 15px; color: #cfe0ec; }
.dl-leg-dot { align-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--dl); box-shadow: 0 0 8px var(--dl); }
.dl-leg b { color: #fff; font-variant-numeric: tabular-nums; }
.dl-leg-u { color: #8fb0c6; font-size: 12px; font-weight: 400; }
.dl-focus-wrap { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 14px; }
.dl-focus-wrap .dl-card-big { flex: 1; min-width: 0; }
/* Store pile-knapper der skifter hvilken sensor der er stor. */
.dl-navbtn { flex: none; width: 46px; align-self: center; height: 120px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(120,160,200,.2); background: rgba(10,22,36,.5); color: #9fc6de; font-size: 20px;
  transition: background .12s, color .12s, box-shadow .12s; }
.dl-navbtn:hover { background: rgba(34,211,238,.12); color: #eaf2f6; box-shadow: 0 0 18px rgba(34,211,238,.22); }
.dl-navbtn:active { transform: translateY(1px); }
/* Ekstra tal-strip UNDER vaerdien paa den store Focus-graf. */
.dl-grp { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6f8ba1; margin-left: 8px; }
.dl-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.dl-stat { display: flex; flex-direction: column; gap: 1px; padding: 5px 12px; border-radius: 9px;
  background: rgba(10,22,36,.45); border: 1px solid rgba(120,160,200,.12); min-width: 62px; }
.dl-stat-l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6f8ba1; }
.dl-stat-v { font-size: 18px; font-weight: 700; color: #dbe8f2; font-variant-numeric: tabular-nums; }
.dl-stat-trend .dl-stat-v { color: var(--dl); }
/* Ingen friske data lige nu. Roligt (ikke roedt) - det betyder IKKE defekt.
   no-data (rav) = faldt ud midt i.  standby (blaat) = ikke aktiveret endnu. */
.dl-card.dl-nodata, .dl-card.dl-standby { opacity: .82; }
.dl-card.dl-nodata .dl-num, .dl-card.dl-standby .dl-num { color: #8296a8; text-shadow: none; }
.dl-card.dl-nodata { border-top-color: #fbbf24 !important; }
.dl-card.dl-standby { border-top-color: #38bdf8 !important; }
.dl-flag { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
  padding: 0; border-radius: 6px; color: transparent; flex: none; }
.dl-flag.on { padding: 2px 8px; }
.dl-flag.on.nodata { color: #ffd68a; background: rgba(251,191,36,.14); box-shadow: inset 0 0 0 1px rgba(251,191,36,.4); }
.dl-flag.on.standby { color: #8fd7ff; background: rgba(56,189,248,.14); box-shadow: inset 0 0 0 1px rgba(56,189,248,.4); }
/* Forklaringslinje i bunden naar noget staar i "–". */
.dl-foot.dl-foot-warn { color: #cdb98a; background: rgba(251,191,36,.07); border-top: 1px solid rgba(251,191,36,.16); }
.dl-help-warn { background: rgba(251,191,36,.1); border-left: 3px solid #fbbf24; padding: 8px 10px; border-radius: 6px; }
.dl-card { background: linear-gradient(180deg, rgba(18,34,54,.66), rgba(10,20,32,.62));
  border: 1px solid rgba(120,160,200,.14); border-top: 2px solid var(--dl);
  border-radius: 16px; padding: 13px 16px; display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  /* Grafen ligger som FULD-KORT baggrund BAG tallet (glider bag vaerdien), saa hele
     kortets hoejde bruges. Indholdet loeftes ovenpaa med z-index. */
  position: relative; overflow: hidden;
  /* AUTOSKALÉR tallet efter kortets stoerrelse: kortets hoejde er bestemt af
     gitteret (1fr) / flex (focus), saa vi kan bruge cqh. Saa vokser tallet ikke
     ud over flisen ved 100% tekst-skala eller naar mange sensorer goer fliserne
     lave. Gammel browser uden container-queries falder tilbage til px nedenfor. */
  container-type: size; }
.dl-card-top, .dl-value, .dl-stats { position: relative; z-index: 1; }
.dl-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dl-name { font-size: 15px; color: #cfe0ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 5px rgba(0,0,0,.65); }
.dl-unit { font-size: 11px; color: #6f8ba1; flex: none; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* Tallet faar en HALVGENNEMSIGTIG PLADE under sig (Christian), saa det staar
   skarpt oven paa kurven i stedet for kun at haenge paa en skygge.
   - width: fit-content => pladen er praecis saa bred som indholdet, saa sensorer
     med mange cifre eller lange enheder (fx "1013.2 hPa") faar en bredere plade
     helt af sig selv, og korte ("7.4 m") en smal.
   - polstring i em => den skalerer MED tallet i alle layouts (compact, focus,
     instruments bruger vidt forskellige font-stoerrelser).
   - INGEN backdrop-filter: det gav ublaerede hjoerne-buer i Chromium (samme fejl
     som glas-temaet), og en simpel rgba-flade er lige saa laesbar. */
/* Pladen faar SELV tal-stoerrelsen (samme clamp som foer laa paa .dl-num), og
   barnet arver den med 1em. Saa skalerer polstring, radius og enheds-tekst ALLE
   med tallet - i compact, focus og instruments-layoutet, som bruger vidt
   forskellige stoerrelser. Layout-varianterne nedenfor saetter derfor .dl-value
   (ikke .dl-num), og .dl-num arver. */
.dl-value {
  display: inline-flex; align-items: baseline; gap: .2em;
  width: fit-content; max-width: 100%;
  margin: 3px 0 4px; padding: .14em .38em;
  border-radius: .3em;
  font-size: clamp(15px, 22cqh, 40px);
  background: rgba(7, 18, 30, .55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.dl-num { font-size: 1em; font-weight: 800; line-height: 1.05; color: #fff;
  /* Pladen baerer nu laesbarheden - skyggen daempes, saa tallet staar rent. */
  text-shadow: 0 1px 3px rgba(0,0,0,.55); font-variant-numeric: tabular-nums; }
.dl-vunit { font-size: .42em; color: #a9c4d6; }
/* Navnet oeverst faar samme lille plade, saa etiketten hoerer sammen med tallet. */
.dl-name {
  padding: 1px 6px; border-radius: 6px;
  background: rgba(7, 18, 30, .45);
}
.dl-chart { position: absolute; inset: 0; z-index: 0; min-height: 0; }
.dl-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lay-compact .dl-value { font-size: clamp(14px, 20cqh, 30px); }
.lay-compact .dl-card { min-height: 150px; }
.lay-compact .dl-name { font-size: 13px; }
.lay-focus .dl-card { min-height: 0; }
.lay-focus .dl-value { font-size: clamp(26px, 17cqh, 62px); }
.lay-focus .dl-name { font-size: 20px; }
.lay-focus .dl-chart { min-height: 200px; }
.dl-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: #6f8ba1; padding: 40px; }
.dl-foot { padding: 6px 26px 12px; text-align: center; color: #5c7488; font-size: 12px; }

/* ===== "By instrument"-view: vind-rose + kort opdelt efter instrument-kilde =====
   KOMPAKT så alt kan være på ÉN side uden at scrolle (Christian): små viz-widgets
   side om side + tætte kort. Grid'et er stadig en scroll-container som nødfald. */
.dl-grid.lay-instruments { display: flex; flex-direction: column; gap: 9px; grid-auto-rows: auto; padding: 12px 22px; }
/* Kortene faar en fast (lav) hoejde her, saa tallets container-query (cqh) har noget
   at maale mod (ellers kollapser tallet til min). */
.lay-instruments .dl-card { height: 82px; min-height: 82px; padding: 7px 12px; }
.lay-instruments .dl-value { font-size: clamp(14px, 28cqh, 27px); }
.lay-instruments .dl-name { font-size: 12px; }

/* Instrument-klynge: vind-rose + nav-kompas + T-S, side om side. */
.dl-viz { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 12px; }
.dl-viz-card { flex: 1 1 300px; min-width: 260px;
  background: linear-gradient(180deg, rgba(18,34,54,.6), rgba(10,20,32,.55));
  border: 1px solid rgba(120,160,200,.16); border-radius: 16px; padding: 11px 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); }
/* Vind/nav-panel: rose til venstre, aflaesning til hoejre. */
.dl-wind { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-wind-rose { flex: 0 0 auto; width: 122px; height: 122px; }
.dl-wr { width: 100%; height: 100%; display: block; }
.dl-wr-ring { fill: rgba(8,16,26,.55); stroke: rgba(120,160,200,.4); stroke-width: 1.5; }
.dl-wr-ring2 { fill: none; stroke: rgba(120,160,200,.15); stroke-width: 1; }
.dl-wr-tick { stroke: rgba(120,160,200,.42); stroke-width: 1; }
.dl-wr-tick.maj { stroke: rgba(165,195,225,.8); stroke-width: 2; }
.dl-wr-card { fill: #9fc0d2; font: 700 13px system-ui, "Segoe UI", sans-serif; text-anchor: middle; }
.dl-wr-card.n { fill: #f0704f; }
.dl-wr-ship { fill: rgba(150,185,215,.26); stroke: rgba(185,215,240,.6); stroke-width: 1.4; }
.dl-wr-heading { stroke: rgba(185,215,240,.5); stroke-width: 1.4; stroke-dasharray: 3 3; }
.dl-wr-wind { stroke: #5fd08a; stroke-width: 6.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(95,208,138,.6)); }
.dl-wr-windhead { fill: #5fd08a; filter: drop-shadow(0 0 5px rgba(95,208,138,.6)); }

.dl-wind-info { flex: 1 1 180px; min-width: 0; }
.dl-wind-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8fb0c6;
  font-weight: 800; display: flex; align-items: center; gap: 10px; }
.dl-wind-tog { background: rgba(110,168,255,.16); color: #bcd6ff; border: 1px solid rgba(110,168,255,.4);
  border-radius: 999px; padding: 2px 11px; font-size: 11px; font-weight: 700; cursor: pointer; }
.dl-wind-tog:hover { background: rgba(110,168,255,.28); }
.dl-wind-tog.apparent { background: rgba(95,208,138,.16); color: #a9e2ba; border-color: rgba(95,208,138,.5); }
.dl-wind-spd { font-size: 31px; font-weight: 800; color: #eaf4ff; line-height: 1; margin-top: 5px;
  font-variant-numeric: tabular-nums; }
.dl-wind-spd span { font-size: 13px; color: #8fb0c6; margin-left: 6px; font-weight: 600; }
.dl-wind-dir { font-size: 15px; color: #cfe0ec; margin-top: 3px; font-weight: 700; }
.dl-wind-tag { font-size: 10px; color: #7fa2b8; background: rgba(120,160,200,.14); border-radius: 5px;
  padding: 1px 6px; font-weight: 700; margin-left: 4px; vertical-align: middle; }
.dl-wind-bft, .dl-wind-hdg { font-size: 12px; color: #9fc0d2; margin-top: 2px; }
.dl-wind-approx { font-size: 11px; color: #f5cf7a; margin-top: 2px; }
.dl-wind-foot { font-size: 10.5px; color: #6f8ba1; margin-top: 5px; }

/* Nav-kompas: gul COG-naal + heading/course/speed-aflaesning. */
.dl-nav-cog { stroke: #f5c451; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(245,196,81,.55)); }
.dl-nav-coghead { fill: #f5c451; filter: drop-shadow(0 0 4px rgba(245,196,81,.55)); }
.dl-nav-read { margin-top: 4px; }
.dl-nav-big { font-size: 28px; font-weight: 800; color: #eaf4ff; line-height: 1; font-variant-numeric: tabular-nums; }
.dl-nav-big span { font-size: 12px; color: #8fb0c6; margin-left: 7px; font-weight: 700; }
.dl-nav-line { font-size: 13px; color: #cfe0ec; margin-top: 3px; font-variant-numeric: tabular-nums; }
.dl-nav-line b { color: #8fb0c6; font-weight: 700; margin-right: 5px; }
.dl-nav-key { color: #f5c451; font-weight: 700; }
.dl-nav-pos { font-size: 11.5px; color: #9fc0d2; margin-top: 3px; font-variant-numeric: tabular-nums; }
.dl-nav-pos b { color: #cfe0ec; font-weight: 700; }
/* By-instrument: skjul den brede Position & navigation-stribe (info er i kompasset). */
.dl-hide-nav #dl-nav { display: none; }

/* T-S-diagram (salinitet × havtemperatur). */
.dl-ts-card { display: flex; flex-direction: column; }
.dl-ts { flex: 1 1 auto; min-height: 104px; margin-top: 3px; }
.dl-ts-svg { width: 100%; height: 100%; max-height: 122px; display: block; }
.dl-ts-bg { fill: rgba(8,16,26,.5); stroke: rgba(120,160,200,.28); stroke-width: 1; }
.dl-ts-grid { stroke: rgba(120,160,200,.14); stroke-width: 1; }
.dl-ts-lbl { fill: #7fa2b8; font: 9.5px system-ui, "Segoe UI", sans-serif; }
.dl-ts-ax { fill: #9fc0d2; font: 700 10px system-ui, "Segoe UI", sans-serif; }
.dl-ts-dot { fill: #4fd1c5; }
.dl-ts-now { fill: #ffd23f; stroke: #0a1626; stroke-width: 1.2; }
.dl-ts-empty { fill: #6f8ba1; font: 13px system-ui, "Segoe UI", sans-serif; }

.dl-groups { flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; }
.dl-grp-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8fb0c6;
  font-weight: 800; margin: 0 2px 4px; display: flex; align-items: center; gap: 8px; }
.dl-grp-n { background: rgba(120,160,200,.16); color: #cfe0ec; border-radius: 999px; padding: 0 8px; font-size: 10.5px; }
.dl-grp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 9px; }

/* Sensor-panel (⚙): dropdown der vaelger hvad der vises. */
.dl-panel { position: absolute; top: 68px; right: 26px; width: 300px; max-height: 72vh; overflow-y: auto; z-index: 5;
  background: linear-gradient(180deg, #14263c, #0c1626); border: 1px solid rgba(120,160,200,.22);
  border-radius: 14px; padding: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.dl-panel.hidden { display: none; }
.dlp-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: #cfe0ec; padding: 4px 6px 8px; }
.dlp-actions button { border: 1px solid rgba(120,160,200,.2); background: rgba(10,22,36,.5); color: #9fc6de; border-radius: 7px; padding: 3px 9px; margin-left: 5px; cursor: pointer; font-size: 12px; }
.dlp-grp { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6f8ba1; margin: 8px 6px 3px; }
.dlp-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: #dbe8f2; font-size: 13.5px; }
.dlp-row:hover { background: rgba(34,211,238,.08); }
.dlp-row input { accent-color: #22d3ee; }
.dlp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Hvilken indgang sensoren laeser fra - gennemskuelig opsaetning. */
.dlp-src { margin-left: auto; font: 11px/1 Consolas, monospace; color: #5f7488; flex: none; }
/* Snapshot-tilstand: frosset paa én stations tidsrum. Skjul vindue-vaelgeren
   (vinduet ER stationen). VIOLET baggrund + ribbon, saa man ALDRIG tror en
   frossen snapshot er live (fx hvis nogen gik fra skaermen og kom tilbage). */
.dl-snap #dl-wins { display: none; }
.dana-live.dl-snap {
  background: radial-gradient(1200px 700px at 72% -12%, #2a1e4a 0%, #170f2c 55%, #0c0918 100%);
}
.dl-snap .dl-dot { animation: none; background: #c4b5fd; box-shadow: 0 0 12px #c4b5fd; }
.dl-snap .dl-clock { color: #d6c9ff; font-family: "Inter", system-ui, sans-serif; font-size: 16px; }
.dl-snap .dl-brand b { color: #c4b5fd; }
.dl-snap .dl-head { border-bottom-color: rgba(167,139,250,.3); }
/* Diagonal "SNAPSHOT · NOT LIVE"-ribbon.
   Laa foer i OEVERSTE hoejre hjoerne - tvaers hen over vaerktoejslinjens knapper,
   saa "Back" laa oven paa baandet. Uanset z-index saa det rodet ud. Baandet er
   flyttet til NEDERSTE hoejre hjoerne, hvor der ikke er andet end den tomme
   ende af bund-linjen - saa hjoernet er frit, og knapperne staar rene. */
.dl-snap::after {
  content: "SNAPSHOT · FROZEN · NOT LIVE"; position: fixed; bottom: 30px; right: -104px;
  transform: rotate(-45deg); background: linear-gradient(90deg, #7c3aed, #a78bfa);
  color: #fff; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .12em;
  padding: 9px 120px; box-shadow: 0 6px 20px rgba(0,0,0,.4); z-index: 4; pointer-events: none;
}
/* Knapperne behoever ikke laengere en moerk plade for at kunne laeses oven paa
   baandet - hjoernet er frit. Back staar bare som en tydelig cyan knap. */
.dl-snap .dl-back {
  background: #22d3ee; color: #04222a; border-color: #22d3ee; font-weight: 800;
  box-shadow: 0 2px 10px rgba(34,211,238,.45);
}
.dl-snap .dl-back:hover { background: #67e8f9; color: #04222a; }
/* Info/hjaelpe-panel (ℹ): forklarer bl.a. at der er snapshots pr. station. */
.dl-help { width: 380px; }
.dl-help-body { padding: 4px 6px; }
.dl-help-body p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #cbdcea; }
.dl-help-body b { color: #eaf2f6; }
.dl-help-hi { background: rgba(251,191,36,.09); border: 1px solid rgba(251,191,36,.28); border-radius: 10px; padding: 9px 11px !important; margin-bottom: 2px !important; }

/* ============================================================
   CTD PROFILE — dybde-profil pr. station (moerk neon paa skaerm). */
.ctd-prof { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: radial-gradient(1200px 700px at 72% -12%, #0f2a3a 0%, #0a1622 55%, #060e15 100%);
  color: #eaf2f6; font-family: "Inter", system-ui, "Segoe UI", sans-serif; }
.ctd-prof.hidden { display: none; }
/* EMBED: CTD-profilen monteret inde i stationskortets hub. Samme visning, men
   den fylder kortets hovedomraade i stedet for skaermen. */
.ctd-prof.ctp-embed { position: static; inset: auto; z-index: auto; height: 100%; min-height: 460px;
  background: transparent; border-radius: 0; }
.ctd-prof.ctp-embed .ctp-head { padding: 0 0 10px; }
.ctd-prof.ctp-embed .ctp-brand, .ctd-prof.ctp-embed .ctp-title { display: none; }
.ctd-prof.ctp-embed .ctp-tools { margin-left: 0; }
.ctd-prof.ctp-embed #ctp-x { display: none; }         /* kortet har sin egen Close */
.ctd-prof.ctp-embed .ctp-metabar { display: none; }   /* staar allerede i Overview */
.ctd-prof.ctp-embed .ctp-chips { padding: 0 0 4px; }
.ctd-prof.ctp-embed .ctp-body { padding: 8px 0; }
.ctd-prof.ctp-embed .ctp-foot { padding: 6px 0 0; }
.ctd-prof.ctp-embed .ctp-panel { right: 0; }
.ctp-head { display: flex; align-items: center; gap: 20px; padding: 14px 24px; border-bottom: 1px solid rgba(120,160,200,.14); }
.ctp-brand { font-size: 22px; letter-spacing: .04em; color: #7ee7f2; display: flex; align-items: center; gap: 10px; }
.ctp-brand b { color: #eaf2f6; }
.ctp-dot { width: 12px; height: 12px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 12px #22d3ee; }
.ctp-title { font-size: 18px; color: #cfe0ec; font-weight: 600; }
.ctp-tools { margin-left: auto; display: flex; gap: 8px; }
.ctp-btn { width: 42px; height: 42px; border-radius: 11px; border: 1px solid rgba(120,160,200,.22);
  background: rgba(10,22,36,.5); color: #cfe0ec; font-size: 18px; cursor: pointer; transition: background .12s, color .12s; }
.ctp-btn:hover { background: rgba(34,211,238,.14); color: #fff; }
.ctp-close:hover { background: rgba(229,72,77,.2); color: #ffd7d7; }
.ctp-metabar { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 24px 0; color: #8fb0c6; font-size: 13.5px; }
.ctp-m b { color: #6f8ba1; font-weight: 600; margin-right: 5px; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.ctp-note { color: #8fb0c6; font-size: 13px; font-style: italic; padding: 4px 2px; }
.ctp-cal { width: 340px; }
.ctp-cal-src { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #5f7488; margin-left: 6px; }
.ctp-cal-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 4px; border-bottom: 1px solid rgba(120,160,200,.1); }
.ctp-cal-name { color: #dbe8f2; font-size: 13.5px; }
.ctp-cal-sn { color: #7ee7f2; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.ctp-cal-date { grid-column: 1 / -1; color: #8fb0c6; font-size: 12px; }
/* Selve kalibrerings-tallene. Smaa og i mono, saa de kan sammenlignes lodret
   mellem to cast uden at fylde panelet. */
.ctp-cal-co { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 4px; }
.ctp-cal-co span { font: 11px/1.5 Consolas, monospace; color: #7f97ab; white-space: nowrap; }
.ctp-cal-co b { color: #5eead4; font-weight: 600; }
.ctp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 0; }
.ctp-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(120,160,200,.2);
  background: rgba(10,22,36,.55); color: #9fc6de; border-radius: 999px; padding: 6px 13px; cursor: pointer; font: inherit; font-size: 13px; }
.ctp-chip:hover { background: rgba(34,211,238,.1); }
.ctp-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px var(--c); }
.ctp-chip.on { color: #eaf2f6; border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.ctp-body { flex: 1; min-height: 0; display: flex; position: relative; padding: 14px 24px; }
.ctp-plot { flex: 1; min-width: 0; min-height: 0; }
.ctp-plot canvas { width: 100%; height: 100%; display: block; }
.ctp-panel { position: absolute; top: 10px; right: 24px; width: 290px; z-index: 5;
  background: linear-gradient(180deg, #14263c, #0c1626); border: 1px solid rgba(120,160,200,.22);
  border-radius: 14px; padding: 12px 14px; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.ctp-panel.hidden { display: none; }
.ctp-set-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6f8ba1; margin: 4px 0 6px; }
.ctp-row { display: flex; align-items: center; gap: 8px; color: #dbe8f2; font-size: 13.5px; padding: 5px 2px; cursor: pointer; }
.ctp-row input { accent-color: #22d3ee; }
.ctp-range { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 8px; align-items: center; margin: 4px 0 8px; color: #9fc6de; font-size: 12.5px; }
.ctp-range input { width: 100%; background: rgba(6,14,22,.6); border: 1px solid rgba(120,160,200,.25); color: #eaf2f6; border-radius: 6px; padding: 4px 6px; }
.ctp-range.ctp-dis { opacity: .4; pointer-events: none; }
.ctp-foot { display: flex; align-items: center; gap: 16px; padding: 8px 24px 12px; color: #9fc6de; font-size: 13px; flex-wrap: wrap; }
.ctp-leg { display: inline-flex; align-items: center; gap: 7px; }
.ctp-leg-l { width: 22px; height: 3px; border-radius: 2px; display: inline-block; }
.ctp-leg-l.ctp-dash { background-image: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px) !important; }
.ctp-leg-sep { flex: 1; }
.ctp-leg-val { color: #cfe0ec; font-variant-numeric: tabular-nums; }
.ctp-leg-rng { color: #8fb0c6; font-size: 12px; font-variant-numeric: tabular-nums; }
.ctp-chips-hint { align-self: center; margin-right: 4px; font-size: 12px; color: #5f7488; font-style: italic; }

/* =====================================================================
   DROPDOWNS, DATO/TID OG POSITION   (styret af ui.js)
   =====================================================================
   Ét sted i programmet tegnede vi ikke selv: den aabne <select>-liste.
   Styresystemet lagde et hvidt vindue med knaldblaa markering midt i en
   moerk flade - og den samme liste saa forskellig ud paa to PCer.

   Feltet ER stadig et <select>. Vi gemmer bare browserens egen pil (som
   var lys og haard) og tegner listen selv. Gaar JS ned, staar der stadig
   et fuldt fungerende felt.
   ===================================================================== */
/* Native widgets (dato, tal-pile, autofyld, rullebjaelker inde i felter)
   tegnes af browseren. Uden color-scheme antager den LYS baggrund og
   tegner hvide kasser med moerke pile paa vores moerke flade. */
:root { color-scheme: dark; }
:root[data-mode="light"] { color-scheme: light; }

select:not(.sr-only) {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9aa6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px 15px;
  padding-right: 32px !important;
  cursor: pointer;
}
select:not(.sr-only):hover {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c4cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select[aria-expanded="true"]:not(.sr-only) {
  border-color: var(--accent);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28), 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* Selve listen. SKAL ligge over ALT den kan aabnes fra - ogsaa fuldskaerms-
   overlays (Dana Live/CTD/Scanmar Live z:200) og indstillingsmenuen (720).
   Laa foer paa 120 "under fuldskaerm", saa en dropdown i fx Scanmar-sensor-
   opsaetningen aabnede BAG panelet og kunne slet ikke bruges. */
.psel-pop {
  /* Smallere liste igen: gear-koderne staar UDEN beskrivelse (den gjorde kortet
     mega bredt), saa de faa lange forklaringer skal ikke laengere kunne staa
     fuldt ud. Operatoer-/andre lister klippes med ... + hele teksten i title. */
  position: fixed; z-index: 990; max-width: min(440px, calc(100vw - 24px));
  max-height: min(60vh, 420px); overflow-y: auto; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 13px; box-shadow: var(--sh-4);
  display: flex; flex-direction: column; gap: 2px;
}
.psel-opt {
  display: grid; grid-template-columns: auto 1fr 14px; align-items: baseline;
  gap: 10px; width: 100%; text-align: left; font-family: inherit;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 9px;
  background: none; color: var(--ink); font-size: 14px; cursor: pointer;
}
.psel-opt:hover { background: var(--surface-3); }
.psel-opt:focus-visible, .psel-opt:focus {
  outline: none; border-color: var(--accent);
  background: var(--surface-3);
}
.psel-opt.on { color: var(--accent); font-weight: 600; }
.psel-opt[disabled] { opacity: .45; cursor: not-allowed; }
.psel-o-t { white-space: nowrap; }
/* ÉN LINJE PR. VALG. En enkelt lang beskrivelse gjorde sin raekke dobbelt saa
   hoej som de andre, og saa staar koderne ikke laengere med samme afstand -
   listen bliver noget man laeser i stedet for noget man scanner. Klippes med
   ... ; hele teksten ligger i title. */
.psel-o-d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Fluebenet ligger ALTID i sidste soejle (-2/-1), uanset om raekken har en
   beskrivelse eller ej. Uden det havde en operatoer UDEN " - " i etiketten kun
   to grid-boern (pille + flueben), og fluebenet landede saa midt i 1fr-sporet i
   stedet for yderst til hoejre. */
.psel-o-k { color: var(--accent); visibility: hidden; grid-column: -2 / -1; }
.psel-opt.on .psel-o-k { visibility: visible; }

/* ---- Dato + tid ----
   Et tidspunkt fra papirloggen skulle foer tastes tegn for tegn, midt i en
   vagt. Kalenderen er klikbar, men feltet i bunden er det samme felt - saa
   den der taster hurtigere end han klikker, ikke bliver holdt tilbage. */
.dt-row { display: flex; gap: 6px; align-items: stretch; }
/* flex: 1 betyder flex-basis 0 - saa vinder den over det width:100% som
   feltet arver fra .sheet-grid / .pfx-col, og knappen bliver ikke skubbet ud. */
.dt-row > input { flex: 1; min-width: 0; }
/* Afstanden mellem Lat og Lon laa paa selve feltet. Nu hvor Lat sidder i en
   raekke med en knap, skal luften ligge under RAEKKEN. */
.pos-fix-edit .pfx-col .dt-row { margin-bottom: 7px; }
.pos-fix-edit .pfx-col .dt-row > input { margin-bottom: 0; }
.dt-btn, .geo-btn {
  flex: 0 0 auto; width: 38px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; font-size: 15px; line-height: 1;
  border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--surface-3); color: var(--ink-soft); cursor: pointer;
  font-family: inherit; transition: color .12s, border-color .12s, background .12s;
}
.dt-btn:hover, .geo-btn:hover {
  color: var(--accent); border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .10);
}
/* Usynlig pladsholder: reserverer plads for Stop-kolonnens ekstra "copy"-knap i
   Start-kolonnen, saa de to Lat-felter flugter (samme hoejre kant). */
.geo-spacer { visibility: hidden; pointer-events: none; }
.dt-btn:focus-visible, .geo-btn:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

.dtp-pop {
  position: fixed; z-index: 120; width: 286px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sh-4);
}
.dtp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dtp-mon { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dtp-nav {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-soft); background: var(--surface-3);
  color: var(--ink); font-size: 15px; line-height: 1; font-family: inherit;
}
.dtp-nav:hover { border-color: var(--accent); color: var(--accent); }
.dtp-dow, .dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dtp-dow {
  margin-bottom: 4px; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center;
}
.dtp-d, .dtp-x {
  height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  font-family: inherit; border: 1px solid transparent; background: none;
  color: var(--ink); cursor: pointer;
}
.dtp-x { cursor: default; }
.dtp-d:hover { background: var(--surface-3); }
.dtp-d.today { border-color: var(--line); }
.dtp-d.on {
  background: rgba(var(--accent-rgb), .18); border-color: var(--accent);
  color: var(--accent); font-weight: 700;
}
.dtp-time {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 8px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.dtp-sp { display: inline-flex; align-items: center; gap: 4px; }
.dtp-sp button {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-soft); background: var(--surface-3);
  color: var(--ink); font-size: 14px; line-height: 1; font-family: inherit;
}
.dtp-sp button:hover { border-color: var(--accent); color: var(--accent); }
.dtp-sp b {
  min-width: 30px; text-align: center; font-size: 19px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.dtp-colon { font-size: 18px; color: var(--ink-soft); }
.dtp-now, .dtp-quick button {
  padding: 5px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 11.5px; border: 1px solid var(--line-soft);
  background: var(--surface-3); color: var(--ink-soft);
}
.dtp-now { margin-left: 6px; color: var(--accent); border-color: rgba(var(--accent-rgb), .45); }
.dtp-now:hover, .dtp-quick button:hover { border-color: var(--accent); color: var(--accent); }
.dtp-quick { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.dtp-foot { display: flex; gap: 7px; margin-top: 11px; }
.dtp-txt {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line-soft); background: var(--input-bg);
  color: var(--ink); font-family: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.dtp-txt:focus { outline: none; border-color: var(--accent); }
.dtp-ok {
  padding: 8px 14px; border-radius: 9px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), .16); color: var(--accent);
}
.dtp-ok:hover { background: rgba(var(--accent-rgb), .26); }

/* Kortvarigt blink dér hvor noget landede. Bruges naar en manuelt tastet
   station glider ind MIDT i listen, fordi den er sorteret paa aktivitets-
   nummer - uden blinket ville man lede efter den nederst og tro den var
   forsvundet. Farven er "opmaerksomhed", ikke "fejl". */
@keyframes row-landed-blink {
  0%   { background: rgba(var(--warn-rgb), .34); }
  100% { background: transparent; }
}
.row-landed, .row-landed > td {
  animation: row-landed-blink 2.4s ease-out 1;
}
.stb-card.row-landed { animation: row-landed-blink 2.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .row-landed, .row-landed > td, .stb-card.row-landed {
    animation: none; background: rgba(var(--warn-rgb), .20);
  }
}

/* Togtrapporten oeverst i Actions: den ene linje folk kommer efter. Ikonet
   faar accentfarven, saa oejet finder den uden at hele linjen raaber. */
.ra-item.ra-star .ra-ico { color: var(--accent); }
.ra-item.ra-star .ra-label { color: var(--accent); }

/* =====================================================================
   FULL SCREEN DATA  -  store tal til daeksskaermen
   =====================================================================
   Klasserne hedder stadig .dm-deck-*: de blev skrevet til Dana Maps' daek,
   og DanaViewDeck (danaview-deck.js) laaner dem. Dana Maps selv er fjernet -
   Dana Mini Map (stationmap.js) er soekortet nu - men navnene bliver, fordi
   et omdoebt CSS-navn er en aendring der kan gaa galt uden at give noget.
   ===================================================================== */
/* Deck-overlay: halvgennemsigtigt fuldskaerms-kort med STORE tal til daekket. */
.dm-deck { position: absolute; inset: 0; z-index: 600; display: flex; flex-direction: column;
  background: rgba(8,14,22,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dm-deck.hidden { display: none; }
/* DanaViews kopi af daek-tallene: FAST fuldskaerm (daekker ogsaa topbaren mens
   den er aaben), saa de frit-trukne tal bruger rene viewport-koordinater. */
.dm-deck.dvdeck { position: fixed; z-index: 900; }
/* Stort, tydeligt luk-kryds i OEVERSTE HOEJRE hjoerne. */
.dm-deck-x { position: absolute; top: 20px; right: 24px; z-index: 3;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: rgba(217,107,90,.16); color: #f2a99c; border: 1.5px solid rgba(217,107,90,.5);
  border-radius: 14px; font-size: 26px; line-height: 1; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .12s; }
.dm-deck-x:hover { background: rgba(217,107,90,.32); color: #fff; border-color: rgba(217,107,90,.8); transform: scale(1.06); }
.dm-deck-x:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(217,107,90,.4); }
/* Nat-daempning af DanaView-deckets tal (broen kan vaere moerklagt). Filteret
   sidder paa selve tal-boksene, saa deres frie placering ikke paavirkes. */
.dvdeck .dm-deck-prim, .dvdeck .dm-deck-sec { filter: brightness(var(--dvdeck-bright, 1)); }
.dvdeck-dim { position: absolute; left: 20px; bottom: 20px; z-index: 3;
  display: flex; align-items: center; gap: 9px; padding: 8px 13px;
  background: rgba(8,14,22,.72); border: 1px solid rgba(120,160,200,.22);
  border-radius: 12px; color: #9fc0d2; }
.dvdeck-dim svg { width: 16px; height: 16px; opacity: .85; }
.dvdeck-dim input[type="range"] { width: 104px; accent-color: var(--accent, #2dd4bf); cursor: pointer; }
/* Tallene ligger FRIT paa fladen (absolut) og kan traekkes rundt. */
/* Laget med de frit-trukne tal ligger OVER hele overlayet, men maa IKKE
   opsluge klik paa pille-baren i toppen. Derfor pointer-events:none her, og
   :auto paa selve tallene (saa de stadig kan traekkes/resizes). */
.dm-deck-grid { position: absolute; inset: 0; pointer-events: none; }
/* Firkantet, "instrument"-agtig font til store tal: Bahnschrift/DIN findes paa
   Windows (skibets PCer); fallback til smalle/monospace faces. */
.dm-deck-num, .dm-deck-u {
  font-family: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Oswald", "Arial Narrow", ui-monospace, "Consolas", monospace;
  font-variant-numeric: tabular-nums;
}
.dm-deck-prim, .dm-deck-sec { position: absolute; display: flex; flex-direction: column; align-items: center;
  cursor: grab; touch-action: none; user-select: none; padding: 6px 10px; border-radius: 14px;
  pointer-events: auto; }   /* tallene fanger klik/traek, selvom gridet er none */
.dm-deck-prim:hover, .dm-deck-sec:hover { background: rgba(255,255,255,.03); }
.dm-deck-prim.dragging, .dm-deck-sec.dragging { cursor: grabbing; background: rgba(255,255,255,.06); }
/* Hjoerne-bogstav (A/B) saa man kan se hvilket tal der er hvilket - matcher
   vaelgerens A/B-grupper. Diskret, oppe i venstre hjoerne af boksen. */
.dm-deck-tag { position: absolute; top: -2px; left: -2px; font-size: 13px; font-weight: 800;
  letter-spacing: .02em; color: rgba(255,255,255,.5); background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.2); border-radius: 7px; padding: 1px 7px; line-height: 1.35;
  pointer-events: none; }
/* Hjoerne-greb til at aendre stoerrelsen med musen (vises paa hover/mens man
   traekker). Selve tallet flyttes stadig ved at traekke andre steder. */
/* Hjoerne-grebet er nu ALTID synligt (svagt) - saa det ikke skal jages mens
   tallet opdaterer sig og boksen skifter bredde. Stoerre + generoest klik-felt
   (usynligt ::after) saa det er nemt at ramme (Christian 17/8). */
.dm-deck-rz { position: absolute; right: -10px; bottom: -10px; width: 30px; height: 30px;
  cursor: nwse-resize; border-radius: 9px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28); display: inline-flex; align-items: center;
  justify-content: center; touch-action: none; opacity: .45; transition: opacity .12s, background .12s; }
.dm-deck-prim:hover .dm-deck-rz, .dm-deck-sec:hover .dm-deck-rz,
.dm-deck-prim.resizing .dm-deck-rz, .dm-deck-sec.resizing .dm-deck-rz {
  opacity: 1; background: rgba(255,255,255,.2); }
/* Usynligt ekstra klik-felt rundt om grebet - lettere at fange. */
.dm-deck-rz::after { content: ""; position: absolute; inset: -12px; }
.dm-deck-rz::before { content: ""; width: 11px; height: 11px;
  border-right: 2.5px solid rgba(255,255,255,.8); border-bottom: 2.5px solid rgba(255,255,255,.8); }
.dm-deck-prim.resizing, .dm-deck-sec.resizing { background: rgba(255,255,255,.06); }
.dm-deck-pl { font-size: clamp(14px, 1.8vw, 28px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
/* Tal + enhed paa samme baseline, med lille afstand - saa "m" ikke svaever langt
   vaek fra tallet. Stoerrelsen kommer fra sliderne (inline font-size). */
.dm-deck-pv, .dm-deck-sv { display: inline-flex; align-items: baseline; line-height: .9; font-weight: 800; }
.dm-deck-pv .dm-deck-u, .dm-deck-sv .dm-deck-u { font-size: .32em; opacity: .7; margin-left: .12em; font-weight: 700; }
.dm-deck-sl { font-size: clamp(11px, 1.1vw, 18px); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.dm-deck-sv { font-weight: 700; }
/* Vaelger nederst: to grupper (stort tal + lille tal), hver med piller + slider. */
/* Pille-baren skal ligge OVER tal-laget, ellers kan man ikke ramme pillerne.
   position+z-index loefter den over .dm-deck-grid. */
.dm-deck-pick { position: relative; z-index: 2; pointer-events: auto;
  display: flex; gap: 34px; justify-content: center; align-items: flex-start; padding: 16px 20px 10px; flex-wrap: wrap; }
.dm-deck-tip { flex-basis: 100%; text-align: center; font-size: 11.5px; color: var(--ink-soft);
  opacity: .8; margin-top: 2px; }
.dm-deck-grp { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dm-deck-gl { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6fd6a8; }
.dm-deck-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dm-deck-sz { width: 180px; max-width: 40vw; accent-color: var(--accent); cursor: pointer; }
.dm-deck-b { font: inherit; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 15px; border-radius: 999px; cursor: pointer; color: #7d93a6;
  background: transparent; border: 1.5px solid rgba(255,255,255,.12); transition: color .15s, border-color .15s; }
.dm-deck-b:hover { color: #cfe0ec; }
.dm-deck-b.on { color: var(--pc); border-color: var(--pc); background: rgba(255,255,255,.05); }

/* ================= DAGENS PROGRAM ================= */
.prog-launch { display: inline-flex; align-items: center; gap: 7px; position: relative; }
.prog-launch-ico { width: 15px; height: 15px; flex: none; }
.prog-launch-dot { position: absolute; top: 3px; right: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 2px var(--bar), 0 0 8px var(--warn); }
.prog-launch-dot.hidden { display: none; }

/* ============================================================
   DAGENS PROGRAM - egen SIDE (ikke popup).
   En modal passer daarligt til noget daekket kigger paa hele
   vagten. Nu en ren tidslinje: tid i venstre skinne, aktivitet
   som farvet pille, og en NOW/NEXT-markoer saa oejet straks
   finder "hvad sker der nu / hvad er naeste".
   ============================================================ */
.prog-page { max-width: 940px; margin: 0 auto; --pcgrid: 96px 1fr 150px; }
.prog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  margin-bottom: 18px; flex-wrap: wrap; }
.prog-head-l { min-width: 0; flex: 1 1 320px; }
.prog-title { font-size: 24px; font-weight: 800; color: var(--accent); margin: 0 0 2px; letter-spacing: -.01em; }
.prog-sub { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 10px 0 0; max-width: 62ch; }
/* Kalender-agtig dato-blok: ugedag + stort dagtal, plus fuld dato og et
   levende ur ved siden af. */
.prog-datebar { display: flex; align-items: center; gap: 14px; }
.prog-cal { flex: none; width: 58px; text-align: center; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--surface-2);
  /* Loeft kalenderblokken fra fladen - samme drop shadow-konvention som knapper. */
  box-shadow: var(--sh-2); }
.prog-cal-dow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 3px 0;
  background: rgba(var(--accent-rgb), .18); color: var(--accent); }
.prog-cal-day { display: block; font-size: 26px; font-weight: 800; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.prog-datemeta { min-width: 0; }
.prog-datefull { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.prog-clock { color: var(--ink); font-weight: 700; }
/* Dag-navigation: pile om kalender-blokken + "Today"-knap naar man ser en anden dag. */
.prog-nav { flex: none; width: 30px; height: 46px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--surface-2); color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: var(--sh-2); transition: box-shadow .15s, color .15s, border-color .15s; }
.prog-nav:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--sh-3); }
.prog-today { margin-left: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--accent);
  font: inherit; font-size: 11.5px; padding: 2px 10px; border-radius: 999px; cursor: pointer; }
.prog-today:hover { border-color: var(--accent); }
.prog-ahead { margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--warn);
  background: rgba(var(--warn-rgb), .14); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.prog-foot .btn.small.danger { color: var(--danger); border-color: rgba(var(--danger-rgb), .5); }
.prog-sub .pi-updated.inline { margin: 0 1px; }
.prog-head-r { display: flex; align-items: center; gap: 12px; flex: none; }
.prog-updated { color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ren liste: tid | aktivitet (+station) | updated. INGEN tidslinje-prik og
   INGEN NOW/NEXT/done - det rodede bare, og tider/done blev aldrig brugt. */
/* Overskrifts-strippen og raekkerne deler kolonner OG bor i samme "board":
   colhead = board-hoved (rundet top), listen = board-krop (rundet bund). Saa
   laeser det som EN tavle i stedet for en overskrift der svaever over en
   flydende liste - det var det der fik view-only til at se tom ud. */
.prog-colhead { display: grid; grid-template-columns: var(--pcgrid); gap: 0 18px;
  padding: 13px 22px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line-soft); border-bottom: 0;
  border-radius: 16px 16px 0 0; }
/* ALT centreret (Time, Activity, Position) - overskrifter og indhold flugter. */
.prog-colhead > span { text-align: center; }
.prog-colhead > :first-child { text-align: center; }
.prog-list { border: 1px solid var(--line-soft); border-radius: 0 0 16px 16px; overflow: hidden;
  background: var(--surface); box-shadow: var(--sh-1); }
.prog-item { display: grid; grid-template-columns: var(--pcgrid); align-items: center; gap: 0 18px;
  padding: 13px 22px; border-bottom: 1px solid var(--line-soft); position: relative; transition: background .12s; }
.prog-item:last-child { border-bottom: 0; }
.prog-item.prog-view:hover { background: var(--surface-2); }
/* Tid. Faste ciffer-bredder, saa kolonnen ikke hopper. */
.pi-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 16px; color: var(--ink); white-space: nowrap; letter-spacing: -.01em; text-align: center; }
/* Aktivitet: ENS-brede, CENTREREDE piller (farven ligger i pillen - raekken selv er
   neutral, ikke en fuld-farvet bjaelke). */
.prog-item.prog-view .pi-act { display: flex; justify-content: center; min-width: 0; }
.prog-item.prog-view .prog-pill { min-width: 172px; max-width: 100%; text-align: center; padding: 7px 16px; font-size: 14px; }
/* Position: en chip, centreret i kolonnen. */
.pi-pos { display: flex; justify-content: center; }
.pi-pos-chip { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 9px; padding: 5px 14px; white-space: nowrap; }
/* I sidebaren er der ikke plads til 14 px vandret polstring - saa ville chippen
   sprænge sin kolonne og skubbe pillen alligevel. */
.sbar-body .pi-pos-chip, .prog-drawer .pi-pos-chip { padding: 4px 8px; font-size: 12.5px; }
.pi-stn { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 14px; }
/* Status-kolonnen (hoejre i master): kun slet-knappen. */
.pi-status { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
/* Tom liste. */
.prog-empty { padding: 52px 18px; text-align: center; color: var(--ink-soft); font-size: 14px; }

/* Aktivitets-pille med farve. Farverne matcher det togtledere brugte i Google Docs. */
.prog-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 13px;
  border: 1px solid transparent; }
.pc-def    { background: var(--surface-3); color: var(--ink); border-color: var(--line); }
.pc-blue   { background: #2563eb; color: #fff; }
.pc-cyan   { background: #0891b2; color: #fff; }
.pc-teal   { background: #0d9488; color: #fff; }
.pc-green  { background: #16a34a; color: #fff; }
.pc-amber  { background: #d97706; color: #fff; }
.pc-orange { background: #ea580c; color: #fff; }
.pc-red    { background: #dc2626; color: #fff; }
.pc-pink   { background: #db2777; color: #fff; }
.pc-purple { background: #7c3aed; color: #fff; }

/* "updated"-maerke: en raekke der er aendret siden man sidst markerede set.
   FOER var det en stor, pulserende gul pille paa HVER raekke - en vaeg af
   larm naar broen havde rettet meget. Nu et lille, roligt amber-maerke der
   stadig fanges af oejet, men ikke overdoever aktiviteten. */
.pi-updated { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--warn);
  background: rgba(var(--warn-rgb), .14); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* Master-redigering: sma inputs i cellerne. */
.prog-cell { width: 100%; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--input-bg); color: var(--ink); font-family: inherit; font-size: 13.5px; }
.prog-cell:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }
.prog-cell:focus-visible { outline: none; }
select.prog-cell { cursor: pointer; }
.prog-actin { font-weight: 600; }
/* Tid + aktivitet aabnes som POPUP (klikbar knap) i stedet for dropdown. */
.prog-time-btn, .prog-act-btn { width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 40px; }
.prog-time-btn { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.prog-act-btn { padding: 5px 9px; }
.prog-time-btn:hover, .prog-act-btn:hover { border-color: var(--accent); }
.prog-act-ph { color: var(--ink-soft); font-size: 13px; }

/* Aktivitets-popup: pick-piller + (bag toggle) edit-panel. */
.prog-acts-card { width: min(560px, 94vw); }
.prog-act-pick { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; max-height: 46vh; overflow-y: auto; }
.prog-act-pick.hidden { display: none; }
.prog-pick-opt { display: flex; justify-content: center; padding: 8px; border: 1px solid var(--line-soft);
  border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.prog-pick-opt:hover { border-color: var(--accent); background: var(--surface-3); }
.prog-pick-opt .prog-pill { min-width: 180px; text-align: center; padding: 7px 16px; font-size: 14px; }
.prog-acts-foot { display: flex; justify-content: flex-end; margin: 10px 0 2px; }
.prog-acts-foot.hidden { display: none; }
.prog-acts-edit { border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 12px; }
.prog-acts-edit.hidden { display: none; }
.prog-acts-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; max-height: 40vh; overflow-y: auto; }
.prog-act-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); }
.prog-act-row .prog-pill { justify-self: start; cursor: pointer; }
.prog-act-edit { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; }
.prog-act-edit:hover { color: var(--accent); border-color: var(--accent); }
.prog-act-addnew { width: 100%; margin-top: 4px; }

/* Editor-popup for EN aktivitet: navnefelt + farvevalg + preview. */
.prog-actedit-card { width: min(420px, 92vw); }
.prog-ae-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; margin: 14px 0 7px; }
.prog-ae-input { width: 100%; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); color: var(--ink); font-family: inherit; font-size: 16px; }
.prog-ae-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }
.prog-ae-colors { max-width: none; gap: 10px; margin: 0; }
.prog-ae-colors .prog-c { width: 26px; height: 26px; }
.prog-ae-preview { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--ink-soft);
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.prog-ae-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Master: raekker ser ud som view (rene piller) men er KLIKBARE -> raekke-editor. */
.prog-clickable { cursor: pointer; }
.prog-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prog-pill-empty { color: var(--ink-soft) !important; font-style: italic; font-weight: 600; }
.pi-pos-empty { color: var(--ink-soft); opacity: .6; }
/* Raekke-editor-popup. */
.prog-row-card { width: min(420px, 92vw); }
.prog-row-btn { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prog-row-btn:hover { border-color: var(--accent); }
.prog-row-btns { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
/* Position: centreret tal + number-picker (-/+). */
.prog-pos-row { display: flex; align-items: stretch; gap: 8px; }
.prog-pos-in { flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prog-step { flex: 0 0 auto; width: 54px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--surface-2); color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; }
.prog-step:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-3); }
.prog-step:active { transform: translateY(1px); }
/* Tid-popup: to scrollbare kolonner (time / minut) - lukker ikke ved scroll. */
.prog-time-card { width: min(360px, 92vw); }
.prog-time-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 14px; }
.prog-time-lab { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; text-align: center; margin-bottom: 8px; }
.prog-time-list { display: flex; flex-direction: column; gap: 5px; max-height: 48vh; overflow-y: auto; padding: 2px; }
.prog-tick { padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2);
  color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.prog-tick:hover { border-color: var(--accent); background: var(--surface-3); }
.prog-tick.on { border-color: var(--accent); background: rgba(var(--accent-rgb),.16); color: var(--accent); }
/* Aktivitets-inputtet faar sin farve som en tynd venstre-kant, saa man ser den valgte farve mens man skriver. */
.prog-actin.pc-blue   { border-left: 4px solid #2563eb; }
.prog-actin.pc-cyan   { border-left: 4px solid #0891b2; }
.prog-actin.pc-teal   { border-left: 4px solid #0d9488; }
.prog-actin.pc-green  { border-left: 4px solid #16a34a; }
.prog-actin.pc-amber  { border-left: 4px solid #d97706; }
.prog-actin.pc-orange { border-left: 4px solid #ea580c; }
.prog-actin.pc-red    { border-left: 4px solid #dc2626; }
.prog-actin.pc-pink   { border-left: 4px solid #db2777; }
.prog-actin.pc-purple { border-left: 4px solid #7c3aed; }
.prog-colors { display: inline-flex; gap: 6px; margin: 6px 0 0; vertical-align: middle; flex-wrap: wrap; max-width: 240px; }
.prog-c { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.prog-c.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.prog-c.pc-def { background: var(--surface-3); border-color: var(--line); }
.prog-c.pc-blue { background: #2563eb; } .prog-c.pc-cyan { background: #0891b2; }
.prog-c.pc-teal { background: #0d9488; } .prog-c.pc-green { background: #16a34a; }
.prog-c.pc-amber { background: #d97706; } .prog-c.pc-orange { background: #ea580c; }
.prog-c.pc-red { background: #dc2626; } .prog-c.pc-pink { background: #db2777; }
.prog-c.pc-purple { background: #7c3aed; }
.prog-c.on.pc-def { border-color: var(--accent); }
.prog-done { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.prog-done input { accent-color: var(--ok); }
.prog-del { background: none; border: 1px solid var(--line-soft); border-radius: 8px; width: 28px; height: 28px;
  color: var(--ink-soft); cursor: pointer; }
.prog-del:hover { color: var(--danger); border-color: rgba(var(--danger-rgb),.45); background: var(--danger-soft); }

/* Master-redigering: samme kolonner som visningen, men cellerne bliver inputs.
   Aktivitet-input i fuld bredde med farve-pletterne under; station i sin kolonne. */
/* Master-redigering beholder 4 kolonner (tid | aktivitet+farver | station | status),
   uafh. af view-only's 3-zone grid. */
.prog-item.prog-edit { grid-template-columns: 100px minmax(160px, 1fr) 130px auto; align-items: center; padding-top: 11px; padding-bottom: 11px; }
.prog-item.prog-edit .pi-time { padding-top: 2px; }
.prog-item.prog-edit .pi-time .prog-cell { width: 100%; text-align: center; }
.prog-item.prog-edit .pi-act { display: flex; flex-direction: column; gap: 8px; }
.prog-item.prog-edit .pi-act .prog-actin { width: 100%; }
.prog-item.prog-edit .prog-colors { margin: 0; }
.prog-item.prog-edit .pi-stn { padding-top: 2px; }
.prog-item.prog-edit .pi-stn .prog-cell { width: 100%; }
.prog-item.prog-edit .pi-status { align-items: center; gap: 8px; padding-top: 2px; }

/* Tilfoej-linjen (master). Ligger under listen som sin egen raekke. */
.prog-add { display: flex; gap: 9px; align-items: center; margin: 14px 0 4px; flex-wrap: wrap; }
/* Master-handlingsraekke: alle tre knapper paa EN linje, ens stoerrelse. */
.prog-actions { display: flex; gap: 10px; align-items: stretch; margin: 16px 0 6px; flex-wrap: wrap; }
.prog-actbtn { flex: 1 1 0; min-width: 150px; justify-content: center; }
.prog-clear { color: var(--danger); border-color: rgba(var(--danger-rgb), .5); background: rgba(var(--danger-rgb), .08); }
.prog-clear:hover { background: rgba(var(--danger-rgb), .16); border-color: var(--danger); }
.prog-clear.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.prog-add .prog-in { padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--input-bg); color: var(--ink); font-family: inherit; font-size: 14px; }
.prog-in { width: 90px; }
.prog-in-act { flex: 1; min-width: 180px; }
.prog-in-pos { width: 110px; }
.prog-add .prog-colors { margin: 0; }
.prog-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; min-height: 20px; }
.prog-foot-hint { color: var(--ink-soft); font-size: 11.5px; margin-left: auto; }

/* ============================ DANAVIEWER ============================
   Instrument-vaeg via VNC. Gitter af live-miniaturer + klik-til-fuldskaerm.
   Alt tegnet med tokens, saa den foelger temaet. KUN VISNING. */
.dv-launch { display: inline-flex; align-items: center; gap: 7px; }
.dv-launch-ico { width: 15px; height: 15px; flex: none; }

#tab-danaviewer { max-width: 1720px; }
.dv-wrap { display: flex; flex-direction: column; gap: 14px; }

/* Kontrolbjaelke */
.dv-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 14px; }
.dv-bar-spring { flex: 1 1 auto; }
.dv-groups { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dv-group { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; padding: 5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all .12s; }
.dv-group:hover { color: var(--ink); border-color: var(--accent); }
.dv-group.on { background: rgba(var(--accent-rgb),.16); color: var(--accent); border-color: rgba(var(--accent-rgb),.45); }
.dv-ctl { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.dv-ctl-ico { width: 17px; height: 17px; flex: none; }
.dv-ctl input[type=range] { width: 128px; accent-color: var(--accent); cursor: pointer; }
.dv-live-badge { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.dv-live-badge.hot { color: var(--ok); border-color: rgba(var(--ok-rgb),.4); }

/* Vaeggen. Grupper er blot en fuld-bredde overskrift MELLEM fliserne i samme
   grid, saa auto-fill stadig pakker fliserne. */
.dv-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dv-tile,340px), 1fr)); gap: 12px; align-items: start; }
.dv-group-head { grid-column: 1 / -1; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; padding: 6px 2px 2px; }
.dv-group-head:not(:first-child) { border-top: 1px solid var(--line-soft); margin-top: 4px; }

.dv-tile { position: relative; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden;
  background: #05080b; cursor: pointer; aspect-ratio: 4 / 3; box-shadow: var(--sh-1); }
.dv-tile:hover { border-color: rgba(var(--accent-rgb),.55); }
.dv-tile.live { border-color: rgba(var(--accent-rgb),.32); }
.dv-canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #05080b;
  filter: brightness(var(--dv-bright, 1)); }
.dv-tile-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; background: linear-gradient(transparent, rgba(0,0,0,.74)); font-size: 12.5px; color: #eaf2f6;
  pointer-events: none; }
.dv-tile-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-tile-fps { margin-left: auto; font-variant-numeric: tabular-nums; color: #a9c2cf; font-size: 11px; white-space: nowrap; }
/* Traek-gribbet i bundbjaelken (bjaelken selv er pointer-events:none - gribbet skal
   kunne gribes, saa det faar auto). Traek = fri raekkefoelge. */
.dv-tile-grip { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; flex: 0 0 auto;
  font-size: 15px; line-height: 1; color: #cfe0ea; opacity: .5; letter-spacing: -1px; }
.dv-tile-grip:hover { opacity: 1; }
.dv-tile-grip:active { cursor: grabbing; }
/* Den TRUKNE flise skal IKKE selv fange museklikket (ellers ser elementFromPoint
   kun sig selv og intet flytter sig) - pointer-events:none lader hit-testet ramme
   flisen UNDER, saa raekkefoelgen faktisk aendrer sig mens man traekker. */
.dv-tile.dv-dragging { opacity: .5; z-index: 6; pointer-events: none;
  outline: 2px dashed rgba(var(--accent-rgb), .9); outline-offset: -2px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5); transform: scale(.98); }
body.dv-dragging-active { cursor: grabbing; }
body.dv-dragging-active .dv-tile { transition: none; }
.dv-reset-order { color: var(--warn); border-color: rgba(240,180,41,.45); }
.dv-tile-wait, .dv-tile-paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #9fb2be; font-size: 13px; text-align: center; padding: 10px; }
.dv-tile-paused { background: rgba(5,8,11,.5); }
.dv-tile-expand { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: none;
  align-items: center; justify-content: center; border-radius: 8px; background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer; padding: 0; z-index: 3; }
.dv-tile:hover .dv-tile-expand { display: inline-flex; }
.dv-tile-expand:hover { background: var(--accent); color: #04202a; border-color: var(--accent); }
.dv-tile-expand svg { width: 16px; height: 16px; }

/* ---- STYRING: mus-maerke pr. styrbar skaerm + faelles "arm" i baren ---- */
/* Maerket sidder oeverst til VENSTRE (expand er til hoejre) og er ALTID synligt
   paa en styrbar skaerm - det er hele pointen: man kan SE hvad der kan styres. */
.dv-tile-ctrl { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 9px; color: var(--accent);
  background: rgba(6,10,14,.55); box-shadow: var(--sh-1);
  transition: transform .12s ease, background .12s ease, color .12s ease; }
.dv-tile-ctrl svg { width: 15px; height: 16px; }
.dv-tile-ctrl:hover { background: var(--accent); color: #04202a; transform: translateY(-1px); }
.dv-tile.controllable { border-color: rgba(var(--accent-rgb), .40); }
/* Armet (globalt ELLER per-flise): maerket lyser accent-fyldt, saa det ses at
   netop denne skaerm styres nu med musen i gitteret. */
.dv-wall.ctrl-armed .dv-tile-ctrl,
.dv-tile.dv-zoom-ctrl .dv-tile-ctrl { background: var(--accent); color: #04202a; border-color: var(--accent); }
.dv-wall.ctrl-armed .dv-tile.controllable { border-color: rgba(var(--accent-rgb), .75);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }

/* ---- Flise-vaerktoejer (zoom + skjul), data-flise, oeje-menu, zoom ---- */
/* Skjul-øjet flyttet til VENSTRE hjørne (Christian): det sad klods op ad fuldskaerm-
   knappen (right:8px), og et mis-klik i en stresset situation ville lukke skaermen
   i stedet for at aabne den stort. Nu er de i hver sit hjørne. */
.dv-tile-tools { position: absolute; top: 8px; left: 8px; z-index: 3; display: none; gap: 6px; }
.dv-tile:hover .dv-tile-tools { display: inline-flex; }
.dv-tile-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer; }
.dv-tile-btn svg { width: 15px; height: 15px; }
.dv-tile-btn:hover { background: rgba(0,0,0,.74); border-color: rgba(255,255,255,.4); }
.dv-tile-zoom:hover { background: var(--accent); color: #04202a; border-color: var(--accent); }

/* Data-flise: broens tal (A stor / B lille), samme stoerrelse som VNC-fliserne. */
.dv-data-tile { background: radial-gradient(130% 100% at 50% 0%, #0e2a45, #06121e 72%); }
.dv-data-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 14px 12px 42px; text-align: center; }
.dv-data-row { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.dv-data-l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 3px; }
.dv-data-num { font-weight: 800; font-variant-numeric: tabular-nums;
  font-family: "Bahnschrift", "DIN Alternate", "Oswald", ui-monospace, "Consolas", monospace; }
.dv-data-a .dv-data-num { font-size: clamp(40px, 9vw, 92px); }
.dv-data-b .dv-data-num { font-size: clamp(22px, 4.5vw, 42px); }
.dv-data-u { font-size: .4em; opacity: .7; margin-left: 3px; font-weight: 700; }
.dv-data-name { pointer-events: auto; outline: none; }
.dv-data-name:focus { background: rgba(255,255,255,.12); border-radius: 5px; padding: 0 5px; }

/* Oeje-menu: skjulte skaerme. */
.dv-hidden-wrap { position: relative; display: inline-flex; }
.dv-hidden-btn { position: relative; width: 36px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--ink-soft); cursor: pointer; }
.dv-hidden-btn.has-hidden { color: var(--accent); border-color: rgba(var(--accent-rgb),.5); }
.dv-hidden-btn svg { width: 17px; height: 17px; }
.dv-hidden-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #04202a; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.dv-hidden-badge.hidden { display: none; }
.dv-hidden-panel { position: absolute; top: 38px; right: 0; z-index: 60; min-width: 230px; max-width: 340px;
  /* Solid, UGENNEMSIGTIG baggrund: tallene fra fliserne bagved maa ikke skinne
     igennem (var for gennemsigtig foer). Blur som ekstra adskillelse. */
  background: #0c1826; border: 1px solid rgba(120,160,200,.28); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.62); padding: 8px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dv-hidden-panel.hidden { display: none; }
.dv-hidden-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; padding: 4px 6px; }
.dv-hidden-empty { font-size: 12.5px; color: var(--ink-soft); padding: 8px 6px; line-height: 1.4; }
.dv-hidden-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0;
  background: transparent; color: var(--ink); border-radius: 8px; cursor: pointer; font: inherit; text-align: left; }
.dv-hidden-item:hover { background: var(--panel-2); }
.dv-hidden-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-hidden-show { color: var(--accent); font-size: 12px; font-weight: 700; }
.dv-hidden-eye { display: inline-flex; align-items: center; color: var(--accent); }
.dv-hidden-eye svg { width: 16px; height: 16px; }
.dv-hidden-item.is-off .dv-hidden-eye, .dv-hidden-item.is-off .dv-hidden-show { color: var(--ink-soft); }
.dv-hidden-item.is-off .dv-hidden-nm { opacity: .7; }

/* KONTROL: en styret flise BEHOLDER sin gitter-stoerrelse (ingen forstoerrelse
   laengere - saa MIK til Lasse-flisen ved siden af bliver staaende og synlig);
   den markeres kun med en accent-kant, saa man kan se hvilken man styrer. */
.dv-tile.dv-zoomed { z-index: 2;
  border-color: rgba(var(--accent-rgb),.7); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.4), var(--sh-2); }
.dv-tile.dv-zoom-ctrl, .dv-tile.dv-zoom-ctrl .dv-canvas { cursor: crosshair; }
/* TYDELIG "styring TIL"-tilstand: en styret flise (ikke fuldskaerm) skal ikke
   vaere til at tage fejl af - kraftig accent-ring HELE vejen rundt + et pulsende
   "MOUSE CONTROL"-banner ved siden af mus-maerket. Ellers er man i tvivl om
   klik gaar til instrumentet eller til gitteret. */
.dv-tile.dv-zoom-ctrl { z-index: 2; border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(var(--accent-rgb), .30), var(--sh-2); }
.dv-tile.dv-zoom-ctrl::after {
  content: "\25CF  MOUSE CONTROL"; position: absolute; top: 8px; left: 44px; z-index: 4;
  padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  background: var(--accent); color: #04202a; box-shadow: var(--sh-1); white-space: nowrap;
  pointer-events: none; animation: dvCtrlPulse 1.5s ease-in-out infinite; }
@keyframes dvCtrlPulse { 0%, 100% { opacity: 1 } 50% { opacity: .58 } }
@media (prefers-reduced-motion: reduce) { .dv-tile.dv-zoom-ctrl::after { animation: none; } }
/* INDHOLDS-ZOOM (mus-hjul): skalerer selve billedet inde i flisen; flisen klipper
   (overflow:hidden), saa alle fliser bliver i deres gitter-plads. Reset-knappen
   dukker kun op naar der ER zoomet ind. */
.dv-tile.dv-czoom .dv-canvas { cursor: grab; }
.dv-tile.dv-czoom.dv-zoom-ctrl .dv-canvas { cursor: crosshair; }
.dv-tile-zreset { display: none; }
.dv-tile.dv-czoom .dv-tile-zreset { display: inline-flex; }

/* ======================= TELEFON-VISNING (Phone view) ======================= */
/* Naar telefon-visningen er aktiv, SKJUL den brede desktop-flade bagved - ellers
   giver #app's vandrette overloeb en zoom-ud paa mobilen (alt bittesmaa). Uden
   #app er dokumentet praecis viewporten, og MV fylder skaermen rigtigt. */
html.mv-active { overflow: hidden; }
html.mv-active #app, html.mv-active #login { display: none !important; }
.mv { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, #0e2436, #06121e 70%); color: #eaf2f6;
  font-family: "Inter", system-ui, "Segoe UI", sans-serif; }
.mv.hidden { display: none; }
.mv-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(120,160,200,.16); }
.mv-brand { font-size: 17px; letter-spacing: .03em; display: flex; align-items: center; gap: 6px; }
.mv-brand b { color: #6ea8ff; }
.mv-dot { width: 9px; height: 9px; border-radius: 50%; background: #6ea8ff; box-shadow: 0 0 10px #6ea8ff; }
.mv-vo { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(110,168,255,.16); color: #b9d4ff; padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.mv-close { margin-left: auto; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 19px; cursor: pointer; }
/* ===== SWIPE-KARUSEL (telefon) ===== */
.mv-blip { width: 9px; height: 9px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 10px #3ddc97; animation: pulse 2s infinite; }
.mv-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mv-track::-webkit-scrollbar { display: none; }
.m-slide { flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; scroll-snap-align: start;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 6px; box-sizing: border-box; }
/* Mini Maps-sliden: kortet fylder kant-til-kant (ingen slide-padding). */
.m-slide[data-key="map"] { padding: 0; overflow: hidden; }
.m-slide[data-key="map"] .m-pane { height: 100%; position: relative; }
.mv-map { width: 100%; height: 100%; background: #0b1a26; }
.mv-map .leaflet-control-attribution { font-size: 9px; }
.mv-map .leaflet-popup-content { font-size: 13px; line-height: 1.4; }
/* "Full map" -> det store StationMap. Nederst til hoejre, vaek fra +/- (top-venstre). */
.mv-map-full { position: absolute; z-index: 1001; right: 12px; bottom: 26px;
  background: rgba(10,26,38,.92); color: #cfe6ff; border: 1px solid rgba(120,160,200,.4);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); cursor: pointer; }
.mv-map-full:active { transform: translateY(1px); }
/* Instrument-skaerm som billede: fylder sliden, skalerer til portraet. */
.m-scr { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.m-scr-cv { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  background: #05080b; border-radius: 12px; }
.m-scr-wait { position: absolute; color: #9fb2be; font-size: 14px; }
/* Prikker (swipe-indikator). Aktiv = accent-streg. Tap for at hoppe. */
.mv-dots { display: flex; gap: 7px; justify-content: center; align-items: center; flex-wrap: wrap;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(120,160,200,.14); }
.m-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(160,190,220,.32); transition: width .15s, background .15s; }
.m-dot.on { width: 22px; border-radius: 999px; background: #6ea8ff; box-shadow: 0 0 7px rgba(110,168,255,.6); }
/* Stations-slide: koerende station + liste. */
.m-run { text-align: center; padding: 4px 0 14px; border-bottom: 1px solid rgba(120,160,200,.12); margin-bottom: 12px; }
.m-run.idle { padding: 22px 0; border: 0; }
.m-run-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; padding: 6px 14px; border-radius: 999px; }
.m-run-pill.on { background: rgba(61,220,151,.16); color: #7ff0c0; }
.m-run-pill.idle { background: rgba(120,160,200,.12); color: #9fc0d2; }
.m-run-no { font-size: 22px; font-weight: 800; margin: 12px 0 2px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.m-run-timer { font-size: clamp(40px, 15vw, 84px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  color: #eaf2f6; font-family: "Bahnschrift","DIN Alternate",ui-monospace,"Consolas",monospace; margin: 4px 0; }
.m-run-meta { font-size: 15px; color: #b9cad8; }
.m-stlist { display: flex; flex-direction: column; gap: 8px; }
.m-strow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(18,34,54,.5); border: 1px solid rgba(120,160,200,.14); border-radius: 12px; padding: 11px 13px; }
.m-strow-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-strow-no { font-size: 16px; font-weight: 800; color: #eaf2f6; }
.m-strow-haul { font-size: 11px; color: #9fc0d2; background: rgba(120,160,200,.1); padding: 2px 7px; border-radius: 999px; }
.m-strow-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.m-strow-t { font-size: 12.5px; color: #9fc0d2; font-variant-numeric: tabular-nums; }
.m-ok { font-size: 12px; font-weight: 700; }
.m-ok.yes { color: #7ff0c0; } .m-ok.no { color: #ff9e93; } .m-ok.run { color: #f5cf7a; }
/* Live-slide: stor position + fliser. */
.m-pos { background: rgba(18,34,54,.5); border: 1px solid rgba(120,160,200,.16); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 12px; }
.m-pos-v { font-size: 21px; font-weight: 800; color: #eaf2f6; font-variant-numeric: tabular-nums; margin-top: 4px; }
.mv-tile-sm { font-size: 20px !important; }
/* (bevaret) Help-URL i "aabn paa telefon"-popup. */
.mv-help-url { font-size: 20px; text-align: center; margin: 12px 0; letter-spacing: .01em; }

/* Mini-paneler i telefon-visningen (Program / CTD / Dana Live): fylder kroppen og
   ruller selv hvis der er mange raekker (kroppen centrerer ellers indholdet). */
.mv-panel { align-self: stretch; width: 100%; max-height: 100%; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 2px 2px 8px; }
.mv-panel-h { font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #dceaf4;
  padding: 2px 4px 12px; display: flex; align-items: center; gap: 9px; }
.mv-panel-date { font-size: 12.5px; font-weight: 600; color: #7fa2b8; }
.mv-empty { color: #9fc0d2; font-size: 15px; text-align: center; padding: 40px 16px; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-bottom: 12px; }
.mv-tile { background: rgba(18,34,54,.55); border: 1px solid rgba(120,160,200,.16); border-radius: 14px; padding: 12px 14px; }
.mv-tile-n { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #b8ccdb; font-weight: 700; }
.mv-tile-v { font-size: 30px; font-weight: 800; color: #eaf2f6; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 3px; }
.mv-tile-u { font-size: 14px; color: #8fb0c6; font-weight: 600; margin-left: 5px; }
.mv-badge { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; }
.mv-badge.live { background: rgba(110,168,255,.18); color: #b9d4ff; }
.mv-badge.standby { background: rgba(240,180,41,.16); color: #f5cf7a; }
.mv-badge.off { background: rgba(120,160,200,.12); color: #9fc0d2; }
.mv-prog-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 8px; border-bottom: 1px solid rgba(120,160,200,.1); }
.mv-prog-time { font-variant-numeric: tabular-nums; color: #cfe0ea; font-weight: 700; font-size: 15px; }
.mv-prog-pos { font-size: 12.5px; color: #9fc0d2; background: rgba(120,160,200,.1); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mv-dash { color: #5f7f95; }
.mv-li-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px;
  padding: 9px 8px; border-bottom: 1px solid rgba(120,160,200,.1); }
.mv-li-lab { color: #cfe0ea; font-size: 14px; }
.mv-li-val { color: #eaf2f6; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.mv-li-age { color: #7fa2b8; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.mv-li-row.stale .mv-li-val { color: #9fb2be; }
.mv-li-row.stale .mv-li-age { color: #d98c6a; }

/* Faelles "arm styring"-knap i baren */
.dv-ctrlall { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border: 1px solid var(--line-soft); border-radius: 20px; background: var(--surface-3);
  color: var(--ink-soft); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.dv-ctrlall .dv-ctrlall-ico { width: 15px; height: 16px; }
.dv-ctrlall:hover { border-color: rgba(var(--accent-rgb), .55); color: var(--ink); }
.dv-ctrlall.on { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Tom tilstand */
.dv-empty { text-align: center; padding: 64px 20px; color: var(--ink-soft); }
.dv-empty-ico { width: 46px; height: 46px; color: var(--ink-soft); opacity: .55; margin-bottom: 12px; }
.dv-empty h2 { color: var(--ink); margin: 0 0 8px; font-size: 19px; }
.dv-empty p { max-width: 54ch; margin: 0 auto 16px; font-size: 14px; line-height: 1.5; }

/* Fuld skaerm - én skaerm, hoej fps, over alt andet. */
.dv-full { position: fixed; inset: 0; z-index: 60; background: #04070a;
  display: flex; align-items: center; justify-content: center; }
.dv-full.hidden { display: none; }
/* Canvas'et har en fast RAMME (inset) i stedet for at gaa helt ud til kanten.
   Top-insettet holder billedet fri af topbjaelken; siderne/bunden giver en paen kant
   hele vejen rundt - saa ser det ens ud paa ALLE skaerme (daekkets gamle 1080p og den
   nye Dana i 2027), for stoerrelsen kommer fra skaermen, ikke en fast oploesning.
   object-fit har stadig en boks at arbejde i: contain = billedet inde i rammen med
   sorte kanter (Fit), fill = strukket ud til rammen (Fill). Selve videobilledets
   raster saettes altid til KILDENS stoerrelse (cv.width/height = bm.width/height),
   saa intet er hardkodet til fx 1024x700. */
.dv-full-canvas { position: absolute; top: 58px; left: 24px; width: calc(100% - 48px); height: calc(100% - 82px);
  object-fit: contain; background: #05080b; border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  box-shadow: 0 10px 44px rgba(0,0,0,.55); filter: brightness(var(--dv-bright, 1)); }
@media (max-width: 900px) { .dv-full-canvas { top: 52px; left: 10px; width: calc(100% - 20px); height: calc(100% - 62px); border-radius: 12px; } }
.dv-full-wait { position: absolute; color: #9fb2be; font-size: 15px; }
.dv-full-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; background: linear-gradient(rgba(0,0,0,.62), transparent); color: #eaf2f6; }
.dv-full-name { font-weight: 700; font-size: 15px; }
.dv-full-meta { color: #a9c2cf; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dv-full-close { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff;
  padding: 8px 15px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; }
.dv-full-close:hover { background: rgba(var(--danger-rgb),.55); border-color: rgba(var(--danger-rgb),.65); }
.dv-full-close svg { width: 15px; height: 15px; }
/* Pr.-panel stoerrelse (fit/fill) + lysstyrke i fuldskaerm. */
.dv-full-fit { display: inline-flex; align-items: center; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 8px 14px; border-radius: 9px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.dv-full-fit:hover { background: rgba(255,255,255,.18); }
.dv-full-bright { display: inline-flex; align-items: center; gap: 8px; color: #eaf2f6;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 9px; padding: 6px 12px; }
.dv-full-bright svg { width: 15px; height: 15px; opacity: .85; }
.dv-full-range { width: 96px; accent-color: var(--accent); cursor: pointer; }
/* Hjul-zoom-knap i fuld-skaerm-baren (som Fit-knappen; accent-fyldt naar TÆNDT). */
.dv-full-zoom { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 8px 14px; border-radius: 9px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.dv-full-zoom:hover { background: rgba(255,255,255,.18); }
.dv-full-zoom svg { width: 15px; height: 15px; }
.dv-full-zoom.on { background: var(--accent); border-color: var(--accent); color: #04202a; }
/* Zoomer man ind, maa det forstoerrede laerred ikke lave scrollbars paa siden. */
.dv-full { overflow: hidden; }

/* Opsaetning (master) */
.dv-rows-head { display: grid; grid-template-columns: 1.3fr 1.6fr .5fr 1fr 74px 140px; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 0 2px 6px; }
.dv-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dv-row { display: grid; grid-template-columns: 1.3fr 1.6fr .5fr 1fr 74px 140px; gap: 8px; align-items: center; }
.dv-in { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--input-bg);
  color: var(--ink); font: inherit; font-size: 13.5px; min-width: 0; }
.dv-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }
.dv-row-act { display: inline-flex; gap: 6px; align-items: center; }
.dv-test { border: 1px solid var(--line); background: var(--surface-3); color: var(--ink); font: inherit;
  font-size: 12px; padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.dv-test:hover { border-color: var(--accent); }
.dv-test.ok { color: var(--ok); border-color: rgba(var(--ok-rgb),.5); }
.dv-test.bad { color: var(--danger); border-color: rgba(var(--danger-rgb),.5); }
.dv-del { width: 32px; height: 32px; flex: none; border: 1px solid var(--line-soft); border-radius: 8px;
  background: none; color: var(--ink-soft); cursor: pointer; }
.dv-del:hover { color: var(--danger); border-color: rgba(var(--danger-rgb),.45); background: var(--danger-soft); }
.dv-setup-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.dv-setup-hint { margin-left: auto; color: var(--ink-soft); font-size: 11.5px; }
/* Hint'en maa ikke loebe hen under Close-knappen i hjoernet: giv luft under
   overskrifts-raekken og hold teksten inden for en laesespalte. */
#dvSetupModal .det-top { margin-bottom: 12px; gap: 20px; }
#dvSetupModal .hint { max-width: 62ch; }

/* Styring (opt-in). Kontrol-knap i fuld skaerm + tydeligt "du styrer nu". */
.dv-full-ctrl { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 8px 14px; border-radius: 9px;
  cursor: pointer; font: inherit; font-size: 13px; }
.dv-full-ctrl:hover { background: rgba(255,255,255,.18); }
.dv-full-ctrl svg { width: 15px; height: 15px; }
.dv-full-ctrl.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.dv-full-ctrlhint { color: #ffb3a3; font-size: 12px; font-weight: 600; margin-left: auto; }
/* Rammen lyser roedt naar man FAKTISK styrer, saa ingen er i tvivl. */
.dv-full.controlling { box-shadow: inset 0 0 0 3px var(--danger); }
.dv-full.controlling .dv-full-canvas { cursor: crosshair; }
/* Kontrol-afkrydsning i opsaetnings-raekken. */
.dv-row-ctrl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-soft);
  white-space: nowrap; cursor: pointer; }
.dv-row-ctrl input { accent-color: var(--danger); }

/* ---------------- NAT-DAEMPER (global lysstyrke) --------------------------
   En sort overlay oven paa ALT skruer ned for lyset om natten. z-index saa
   hoejt at den ligger over fuldskaerm og modaler; pointer-events:none saa den
   aldrig fanger et klik. Popover'en ligger ET trin hoejere, saa slideren selv
   bliver laesbar mens resten af skaermen daempes. */
#nightDim {
  position: fixed; inset: 0; background: #000; opacity: 0;
  pointer-events: none; z-index: 2147483000;
  transition: opacity .18s ease;
}
/* Lys-BOOST (modsat nat-daemperen): loefter HELE fladen via backdrop-filter naar en
   skaerm er unaturligt moerk (fx broens nye 1440p-panel). Ligger lige UNDER daemperen,
   saa man kan daempe oven paa et boost. Klik gaar igennem. Neutralt (100%) saetter JS
   backdrop-filter tomt -> ingen omkostning. Ingen layout-effekt (i modsaetning til et
   filter paa roden, der ville flytte position:fixed-lag). */
#brightBoost { position: fixed; inset: 0; pointer-events: none; z-index: 2147482999; }
.dim-btn.is-dim { color: var(--accent); }
.dim-pop {
  position: fixed; z-index: 2147483002;
  width: 264px; padding: 14px 16px 12px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
}
.dim-pop.hidden { display: none; }
.dim-pop-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; }
.dim-pop-title { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.dim-pop-val {
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); cursor: pointer; user-select: none;
}
.dim-row { display: flex; align-items: center; gap: 11px; }
.dim-row input[type="range"] {
  flex: 1; height: 28px; accent-color: var(--accent); cursor: pointer;
}
.dim-end { font-size: 15px; color: var(--ink-soft); line-height: 1; }
.dim-end-hi { font-size: 18px; }
.dim-note { margin-top: 9px; font-size: 11px; color: var(--ink-soft); line-height: 1.35; }

/* ================= STATION CONTROL-SKUFFE (i DanaView) =================
   Ligger OVER fullscreen (dvFull z-index 60), saa man kan starte/stoppe en
   station uden at forlade visningen. Skjult som standard (.inde) - kun tabben
   stikker ud i venstre kant. Master-only (klassen paa selve skuffen). */
.stn-drawer {
  /* Kun saa hoej som indholdet - ikke en fuld-hoejde sidebar. Den er kun
     start/stop (ikke hele forsidens station-prep), saa den skal ikke fylde mere
     end de faa felter + knappen. */
  /* Foelger topbarens hoejde + en tydelig luft, saa "Station Control" ALDRIG
     ligger oven i topbaren (Christian 27/8). Var hardkodet 64px, som laa lige op
     ad en ~64px hoej topbar. */
  position: fixed; left: 0; top: calc(var(--topbar-h, 60px) + 14px); z-index: 62;
  --stnd-w: 300px; width: var(--stnd-w);
  transition: left .2s ease;
}
.stn-drawer.inde { left: calc(-1 * var(--stnd-w)); }
.stn-card {
  position: relative;
  background: var(--surface); border-right: 1px solid var(--line);
  border-radius: 0 14px 14px 0;
  box-shadow: 18px 0 50px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 18px;
  max-height: calc(100vh - var(--topbar-h, 60px) - 30px); overflow-y: auto;
}
.stn-tab {
  position: absolute; left: 100%; top: 84px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 8px; border: none; cursor: pointer;
  background: var(--accent); color: #04202a;
  border-radius: 0 12px 12px 0; box-shadow: 6px 0 16px rgba(0, 0, 0, .35);
  writing-mode: vertical-rl; font-weight: 700; font-size: 12.5px; letter-spacing: .05em;
}
.stn-tab:hover { filter: brightness(1.08); }
.stn-tab-ico, .stn-chev { writing-mode: horizontal-tb; }
.stn-tab-ico { width: 18px; height: 18px; }
.stn-chev { width: 15px; height: 15px; transition: transform .2s ease; }
.stn-drawer:not(.inde) .stn-chev { transform: rotate(180deg); }
.stn-head { display: flex; align-items: center; justify-content: space-between; }
.stn-title { font-weight: 700; font-size: 15px; }
.stn-head-btns { display: inline-flex; align-items: center; gap: 2px; }
.stn-side { background: none; border: none; color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; }
.stn-side:hover { color: var(--ink); }
.stn-close { background: none; border: none; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.stn-close:hover { color: var(--ink); }
/* HOEJRE side (standard) - spejlvend hele positionen + tab + skygge + chevron. */
.stn-drawer.right { left: auto; right: 0; transition: right .2s ease; }
.stn-drawer.right.inde { left: auto; right: calc(-1 * var(--stnd-w)); }
.stn-drawer.right .stn-card { border-right: 0; border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0, 0, 0, .5); border-radius: 14px 0 0 14px; }
.stn-drawer.right .stn-tab { left: auto; right: 100%; border-radius: 12px 0 0 12px; box-shadow: -6px 0 16px rgba(0, 0, 0, .35); }
.stn-drawer.right .stn-chev { transform: rotate(180deg); }
.stn-drawer.right:not(.inde) .stn-chev { transform: rotate(0deg); }
.stn-status {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px;
  background: var(--surface-2); font-size: 13.5px;
}
.stn-run { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.stn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px rgba(var(--danger-rgb), .7); flex: none; }
/* Meget stoerre tael-ur i skuffe-kortet (Christian 27/8: "counter size burde kunne
   vaere meget stoerre"). Teko er smal, saa 00:00:00 er der rigeligt plads til i
   skuffens bredde. clamp: skalerer med skaermen men holder sig inde paa smaa. */
.stn-elapsed { margin-top: 4px; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: clamp(40px, 5vw, 56px); line-height: 1.02; letter-spacing: .01em; }

/* ---- RULLENDE CIFRE ("banegaardsur") ----
   Hvert ciffer bor i sin egen 1em-hoeje boks med overflow:hidden. Ved skift
   staar gammelt ciffer OVENover og nyt UNDER i samme kolonne, og kolonnen
   glider op (-50%) saa det nye kommer nedefra. Kolon o.l. staar stille. */
.roll { white-space: nowrap; }
.roll-d, .roll-sep {
  display: inline-block; height: 1em; line-height: 1em; vertical-align: bottom;
}
/* Separatorer kan vaere et MELLEMRUM (fx "107 station(s)"). Uden pre klipper
   nowrap et slot der KUN er et mellemrum vaek til 0 bredde. */
.roll-sep { white-space: pre; }
.roll-d { overflow: hidden; }
.roll-col { display: block; will-change: transform; }
.roll-d .roll-col { transition: transform .34s cubic-bezier(.22, .62, .36, 1); }
.roll-col > span { display: block; height: 1em; line-height: 1em; }
@media (prefers-reduced-motion: reduce) { .roll-d .roll-col { transition: none; } }
.stn-sub { margin-top: 3px; color: var(--ink-soft); font-size: 12px; }
.stn-idle { color: var(--ink-soft); }
.stn-lab { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.stn-sel {
  width: 100%; padding: 9px 10px; border-radius: 9px;
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); font-size: 14px;
}
/* Skuffens vaelgere er nu type-pick-KNAPPER (pop-op), ikke dropdowns - label paa
   egen linje + luft, saa de staar som paa start-kortet. */
.stn-start .stn-lab { display: block; margin: 9px 0 4px; }
.stn-start > .stn-lab:first-child { margin-top: 2px; }
.stn-pick { width: 100%; min-height: 42px; justify-content: flex-start; }
/* ---- INLINE-vaelger i skuffen (accordion, ingen pop-op) ---- */
.stn-exp { position: relative; }
.stn-caret { width: 15px; height: 15px; margin-left: auto; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; opacity: .65; transition: transform .15s ease; }
.stn-pick[aria-expanded="true"] .stn-caret { transform: rotate(180deg); }
/* Accordion: folder BLOEDT ind/ud via max-height+opacity (display:none kan ikke
   animeres). Sammenfoldet som standard (.open aabner). Ingen 'hidden'-klasse. */
.stn-inline {
  border: 1px solid transparent; border-radius: 10px;
  background: var(--input-bg);
  display: flex; flex-direction: column;
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .26s cubic-bezier(.22, .61, .36, 1),
    opacity .17s ease, margin-top .26s cubic-bezier(.22, .61, .36, 1),
    border-color .2s ease;
}
.stn-inline.open {
  margin-top: 5px; max-height: 320px; opacity: 1;
  overflow-y: auto; border-color: var(--line);
}
@media (prefers-reduced-motion: reduce) { .stn-inline { transition: none; } }
.stn-il-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); padding: 8px 11px; cursor: pointer;
  font-family: inherit; font-size: 13px;
}
.stn-il-row:last-child { border-bottom: 0; }
.stn-il-row:hover { background: var(--surface-3); }
.stn-il-row.on { background: rgba(var(--accent-rgb), .13); }
.stn-il-name { color: var(--ink-soft); font-size: 12px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stn-il-tick { margin-left: auto; color: var(--accent); flex: none; }
.stn-il-empty { padding: 12px; color: var(--ink-soft); font-size: 12px; text-align: center; }
/* Pille-wrapper usynlig som standard (display:contents) -> skuffen ser ud som foer
   paa skibet. Aqua-demo goer raekkerne til pille-kort + navne-kort (herunder). */
.stn-il-pill { display: contents; }
/* LIVE (forfremmet 27/8): samme opdeling som vaelgerne - pille i sit kort, navn i
   sit kort. Skuffen BREDERE (Christian: nemmere at ramme). `--seg-inset` = tema-tonet. */
.stn-drawer { --stnd-w: 348px; }
/* VANDRET luft inde i listen: naar den er aaben har `.stn-inline` en tynd kant
   (`var(--line)`), og med padding:0 laa pillerne KLOS op ad den (Christian 27/8).
   Nu 10px inde, saa piller + navne-kort staar fri af den blaa streg. */
.stn-inline { border-color: transparent; background: transparent; padding: 4px 10px; }
.stn-il-row { border-bottom: 0; padding: 3px 0; gap: 6px; }
.stn-il-row:hover { background: transparent; }
/* Pillen UDENFOR kort. Soejlen er FAELLES for hele listen: JS maaler den
   bredeste pille og saetter --tp-pill-col (som i vaelgerne), saa en lang kode
   (BEAM TRAWL) ikke skubber SIN raekkes navnekort ud af takt med de andre
   (Christian 28/8). 62px er fallback/minimum som foer. */
.stn-il-pill {
  display: flex; align-items: center; justify-content: flex-start; flex: none;
  min-width: var(--tp-pill-col, 62px); background: transparent; border: 0; padding: 0;
}
/* Samme sikkerhedsnet som vaelgerne: en absurd lang kode hugger med ellipsis
   i stedet for at aede navnekortets plads. */
.stn-il-pill .type-name, .stn-il-pill .op-ini {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Navn/beskrivelse: BLOK (ikke flex), saa base-ellipsen paa lange gear-tekster
   stadig virker. */
.stn-il-name {
  position: relative;                 /* til check-maerket INDE i kortet */
  flex: 1; min-width: 0; box-sizing: border-box; min-height: 38px;
  padding: 10px 12px; font-size: 13px; line-height: 1.25;
  background: var(--seg-inset); border: 1px solid var(--line-soft); border-radius: 9px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.stn-il-row:hover .stn-il-name {
  background: var(--seg-inset-hover); border-color: rgba(var(--accent-rgb), .6);
}
/* Valgt (samme redesign som vaelgerne): navn-kortet fyldes accent + solid kant +
   check-maerke INDE i kortet. Ingen raekke-bred tint, ingen loes ✓. */
.stn-inline .stn-il-row.on { background: transparent; }
.stn-il-row.on .stn-il-name {
  background: rgba(var(--accent-rgb), .16);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .30);
  padding-right: 32px; color: var(--ink); font-weight: 600;
}
.stn-il-row.on .stn-il-name::after {
  content: "\2713"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 14px; font-weight: 900; line-height: 1;
}
.stn-inline .stn-il-tick { display: none; }   /* loes glyph -> badge ovenfor */
.stn-btn { width: 100%; padding: 12px; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px; }
/* GROEN start-knap (Christian 27/8): go = groen, som den store .big-btn.start.
   Var blaa (accent) - nu samme groenne gradient + hvid tekst. */
.stn-go { background: linear-gradient(180deg, #34b487, #1f8763); color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22); }
.stn-go:hover:not(:disabled) { filter: brightness(1.08); }
.stn-go:disabled { opacity: .5; cursor: not-allowed; }
.stn-stopbtn { background: var(--danger); color: #fff; }
.stn-stopbtn:hover { filter: brightness(1.08); }
.stn-note { margin-top: 8px; font-size: 11px; color: var(--ink-soft); line-height: 1.35; }
.stn-start[hidden], .stn-stop[hidden] { display: none; }

/* ---- Part A: mere TYDELIG remote-control-affordance i DanaView ---- */
/* Fullscreen "Control"-knap: fra diskret til klar opfordring; ROED naar man styrer. */
.dv-full-ctrl {
  background: var(--accent); color: #04202a; border: 1px solid var(--accent);
  font-weight: 700; padding: 8px 14px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.dv-full-ctrl svg { width: 17px; height: 17px; }
.dv-full-ctrl:hover { filter: brightness(1.08); }
.dv-full-ctrl.on { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .35); }
.dv-full-ctrlhint { color: #fff; background: rgba(var(--danger-rgb), .85); padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: 12px; }
/* Vaeg-flisens kontrol-knap: stoerre + altid accent-fyldt (ikke kun ved hover). */
.dv-tile-ctrl { width: 36px; height: 36px; background: rgba(var(--accent-rgb), .92); color: #04202a; border: 1px solid var(--accent); }
.dv-tile-ctrl svg { width: 18px; height: 19px; }
.dv-tile.controllable { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25); }

/* ---- Topbar-oprydning: kompaktere ure + ikon-klynge (efter Settings-flet) ---- */
.clocks { gap: 10px; }
.clock span:last-child { font-size: 15px; }
.clabel { font-size: 9px; }
/* Skillelinje i tandhjuls-menuen (mellem Cruises/Updates og sprog/tema osv.). */
.gm-divider { height: 1px; background: var(--line-soft); margin: 7px 12px; }
/* Maane-glyf i daemper-raekken (samme plads som en us-btn, men bare et ikon). */
.us-moon { font-size: 15px; color: var(--ink-soft); width: 24px; text-align: center; flex: none; }

/* Performance-piller i DanaView-baren (cap oploesning + fps). */
.dv-perf { display: inline-flex; align-items: center; gap: 3px; }
.dv-perf-lab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-bar-soft); margin-right: 2px; }
.dv-perf-btn { background: rgba(255,255,255,.08); color: var(--on-bar); border: 1px solid transparent;
  border-radius: 7px; padding: 4px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.dv-perf-btn:hover { background: rgba(255,255,255,.16); }
.dv-perf-btn.on { background: var(--accent); color: #04202a; border-color: var(--accent); }

/* Hint naar der er skaerme men ingen er sat til styring (leder master til Screens). */
.dv-ctrl-hint { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  background: rgba(var(--accent-rgb), .14); color: var(--accent); border: 1px dashed rgba(var(--accent-rgb), .6);
  border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dv-ctrl-hint:hover { background: rgba(var(--accent-rgb), .22); }
.dv-ctrl-hint .dv-ctrlall-ico { width: 15px; height: 16px; }

/* ================= UDSKRIFT: ALDRIG DARK MODE =================
   Skaermen er moerk (styrehus om natten). Papir er hvidt - en sort side aeder en
   urimelig maengde blaek. Genererede PDF'er er allerede lyse (pdf.js + charts.js'
   PRINT-palet); DETTE fanger browser-print (Ctrl+P) af en hvilken som helst side.
   Vi tvinger LYSE token-farver uanset skaerm-tema, og skjuler skaerm-krom der ikke
   hoerer til paa papir. */
@media print {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --bg: #ffffff; --code-bg: #ffffff;
    --surface: #ffffff; --surface-2: #f4f6f8; --surface-3: #eef1f4;
    --ink: #10222c; --ink-soft: #4a5b66;
    --line: #c3ced6; --line-soft: #dce3e8;
    --on-bar: #10222c; --on-bar-soft: #4a5b66;
    --bar: #ffffff; --panel: #ffffff; --panel-2: #f4f6f8;
  }
  html, body, #app, .tabpage, .det-main, .modal-card {
    background: #ffffff !important; color: #10222c !important;
  }
  /* Krom/overlay der ikke skal paa papir. */
  .topbar, #nightDim, .dv-full, #dvBar, .fab, .updates-fab,
  .vnc-drawer, .ctd-drawer, .stn-drawer, .cruise-drawer, .prog-drawer, .sbar,
  .modal-actions, .btn, button { display: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* =====================================================================
   STATION GROUPS  ·  togtleder-navne (violet, adskilt fra redskabs- og
   MANUAL-piller). Padlock, togtinfo-editor, masse-tildeling.
   ===================================================================== */
:root { --grp: #c9a6ff; --grp-rgb: 201, 166, 255; }

/* Piller i listen / browse / bulk */
.pill.st-group {
  /* Samme max-kontrast-behandling som gear-pillerne: moerk flade, fuld farve paa
     teksten, tydelig farvet ring (Christian). */
  background: color-mix(in srgb, rgb(var(--grp-rgb)) 24%, #0a1a2b); color: var(--grp);
  border: 1px solid rgba(var(--grp-rgb), .70);
  font-weight: 700; font-size: 11.5px; padding: 1px 8px; border-radius: 999px;
  white-space: nowrap; vertical-align: middle;
}
.col-type { white-space: normal; }        /* lad gruppe-pillen bryde under koden */
.col-type .st-group { margin-top: 2px; display: inline-block; }
.stb-gsw { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  background: rgba(var(--grp-rgb), .8); margin-right: 6px; }

/* Start-kortets gruppe-vaelger */
.pf-group .pf-opt { color: var(--ink-soft); font-weight: 500; font-size: 11px; opacity: .8; }

/* ---- RANGORDNING PAA DE TRE FELTER (Christian) ----
   Operator og Gear code tastes ved HVER station; Station group bruges sjaeldent.
   Derfor faar de to foerste en diskret farvet venstre-kant ("her er jeg"), mens
   gruppen holdes neutral og et hak mere afdaempet. Bevidst SMAA signaler - ikke
   tre knaldfarver der konkurrerer. */
.op-main .pf-op .type-pick,
.op-main .pf-type .type-pick {
  border-left: 3px solid rgba(var(--accent-rgb), .75);
}
.op-main .pf-op .type-pick:hover,
.op-main .pf-type .type-pick:hover { border-left-color: var(--accent); }
/* Gear code er den ene der ikke maa glemmes -> lidt varmere kant end operator. */
.op-main .pf-type .type-pick { border-left-color: rgba(var(--warn-rgb), .70); }
.op-main .pf-type .type-pick:hover { border-left-color: var(--warn); }
/* Station group: neutral, dæmpet - den skal ikke tage opmaerksomhed. */
.op-main .pf-group .type-pick {
  border-left: 3px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface-3) 55%, transparent);
}
.op-main .pf-group label { color: var(--ink-soft); opacity: .85; }
.op-main .pf-group .type-pick:hover { border-left-color: var(--line); }
.grp-sel {
  width: 100%; background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14px; cursor: pointer;
}
.grp-sel:disabled { color: var(--ink-soft); cursor: default; opacity: .7; font-style: italic; }
.pf-group.pf-empty .grp-sel { border-style: dashed; }

/* Togtleder-haengelaas (i stationspanelets hoved) */
.st-lock {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(var(--grp-rgb), .5); background: rgba(var(--grp-rgb), .1);
  color: var(--grp); border-radius: 9px; padding: 6px 11px; font-weight: 700; cursor: pointer;
}
.st-lock .lk-ico { width: 15px; height: 15px; }
.st-lock:hover { background: rgba(var(--grp-rgb), .18); }
.st-lock.unlocked {
  background: rgba(245, 207, 122, .16); border-color: rgba(245, 207, 122, .55); color: #ffe4a6;
  box-shadow: 0 0 0 1px rgba(245, 207, 122, .25), 0 0 18px rgba(245, 207, 122, .18);
}
.st-lock .lk-timer { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .9; }
.st-lock .lk-timer:not(:empty) { margin-left: 2px; }

/* Oplaasnings-popup */
.lk-ov { position: fixed; inset: 0; z-index: 120; background: rgba(3, 8, 12, .6);
  display: flex; align-items: center; justify-content: center; }
.lk-ov.hidden { display: none; }
/* Uigennemsigtigt kort. FEJL: brugte var(--panel), som kun er sat i ET lyst
   tema (linje ~8473) - i alle andre temaer (bl.a. aquax) faldt den tilbage til
   gennemsigtig, saa stationsraekkerne skinnede igennem modalen. Bruger nu SAMME
   opake flade-gradient som al anden .modal-card. */
.lk-card { width: min(360px, 92vw);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: 16px; padding: 22px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.lk-card .lk-lock { font-size: 30px; }
.lk-card h3 { margin: 6px 0 4px; }
.lk-sub { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 14px; }
.lk-input { width: 100%; text-align: center; font-size: 26px; letter-spacing: .3em; font-weight: 800;
  background: var(--input-bg); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; }
.lk-err { color: var(--danger); font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.lk-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.lk-card.shake { animation: lkShake .4s; }
@keyframes lkShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}

/* Togtinfo-editorens gruppe-liste */
.cruise-groups { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.cg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cg-head h3 { margin: 0; font-size: 15px; }
.cg-hint { color: var(--ink-soft); font-weight: 500; font-size: 12px; margin-left: 6px; }
.pf-code { min-width: 190px; }
.pf-code input { width: 100%; letter-spacing: .18em; font-weight: 700; }
.cg-list { margin: 12px 0 8px; display: flex; flex-direction: column; gap: 7px; }
.cg-row { display: flex; align-items: center; gap: 8px; }
.cg-in { flex: 1; background: var(--input-bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; font: inherit; }
.cg-del { border: 1px solid var(--line); background: transparent; color: var(--danger);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-weight: 800; }
.cg-del:hover { background: rgba(var(--danger-rgb), .12); }
.cg-add { align-self: flex-start; }

/* Masse-tildeling */
.bulk-card { width: min(680px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.bulk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bulk-top h2 { margin: 0; font-size: 17px; }
.bulk-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.bulk-tools .chip { font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink-soft); cursor: pointer; }
.bulk-tools .chip.on { background: rgba(var(--accent-rgb), .2); border-color: rgba(var(--accent-rgb), .5); color: var(--ink); }
.bulk-list { overflow-y: auto; flex: 1; border: 1px solid var(--line); border-radius: 12px; }
.bulk-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); cursor: pointer; }
.bulk-row:last-child { border-bottom: 0; }
.bulk-row:hover { background: rgba(255, 255, 255, .03); }
.bulk-cb { width: 19px; height: 19px; flex: 0 0 auto; border-radius: 5px; border: 2px solid var(--line);
  position: relative; }
.bulk-row.on { background: rgba(var(--accent-rgb), .08); }
.bulk-row.on .bulk-cb { background: var(--accent); border-color: var(--accent); }
.bulk-row.on .bulk-cb::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bulk-no { font-weight: 800; min-width: 40px; font-variant-numeric: tabular-nums; }
.bulk-gear { font-size: 11.5px; }
.bulk-time { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.bulk-cur { margin-left: auto; }
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; flex-wrap: wrap; }
.bulk-assign { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bulk-assign .grp-sel { width: auto; min-width: 150px; }

/* Stationskortets "Station group"-fane */
.grp-hub .da-h { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.grp-hub .da-p { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }
.grp-pick-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grp-pick-row .grp-sel { width: auto; min-width: 180px; }
.grp-hub-msg { margin-top: 12px; color: var(--ok, #7ff0c0); font-weight: 700; font-size: 13px; }

/* =====================================================================
   LIQUID GLASS  ·  5. tema (nu standard). Lysere maritim blaa med
   gradient-baggrund, frosted-glass flader og tydelige drop shadows.
   Christian: "apple liquid glass ... ikke saa transparent ... tydelige
   drop shadow effekter paa cards ... blaaligt maritimt".
   Ydelse: blur ligger KUN paa flader der staar over den STATISKE
   baggrund (paneler, topbar, modaler, menuer, skuffer) - ikke paa
   live-grafer/VNC, saa det ikke koster pr. frame paa skibets PCer.
   ===================================================================== */
:root[data-theme="glass"] {
  --app-bg: #102c47;          /* lysere hav-blaa */
  --app-bg-2: #24578a;        /* klar blaa - gradient-top */
  --surface: #183a56;         /* solid fallback bag glasset (laesbar) */
  --surface-2: #21486a;
  --surface-3: #2c5c85;
  --line: #4f86b5;            /* synlig kant */
  --line-soft: #345f86;
  --bar: #143a5c;
  --bar-2: #17456c;
  --input-bg: #0e2a44;
  --code-bg: #0b2136;

  --accent: #4fb0ea;          /* blaaligt maritimt (lidt blaaere end teal) */
  --accent-rgb: 79,176,234;
  --accent-2: #2f92cf;
  --ok: #3ddc97;   --ok-rgb: 61,220,151;
  --warn: #f5b942; --warn-rgb: 245,185,66;
  --tc0: #f5b942;  --tc1: #8ab4f8;  --tc2: #3ddc97;  --tc3: #c792ea;
  --tc4: #ff9e64;  --tc5: #7fd3ff;  --tc6: #4fb0ea;  --tc7: #ef9a9a;
  --danger: #ff7a6b;  --danger-rgb: 255,122,107;
  --danger-soft: #3a1f1c;  --ok-soft: #10322c;  --wait-soft: #33280c;

  --ink: #eaf5fc;  --ink-soft: #a6c6de;
  --on-bar: #f0f9ff;  --on-bar-soft: #a9cbe4;

  /* Tydelige, lagdelte skygger (blaa-tonet) - "float"-effekten paa cards. */
  --sh-1: 0 2px 6px rgba(5,18,32,.40);
  --sh-2: 0 6px 20px rgba(5,18,32,.42), 0 2px 6px rgba(5,18,32,.30);
  /* 18/8: dæmpet — de gamle store/moerke skygger (80px blur, .58 alpha, 30px ned)
     pooler til synlige "moerke hjoerner" ved de 2 yderste kort-underkanter over den
     bloede baggrund (kun i glass; verificeret via corner-debug + zoom-testen). Mindre
     offset + blur + alpha => ingen pooling, men beholder et bloedt glas-loeft. */
  --sh-3: 0 10px 26px rgba(5,18,32,.30), 0 3px 8px rgba(5,18,32,.20);
  --sh-4: 0 18px 44px rgba(5,18,32,.34), 0 6px 14px rgba(5,18,32,.22);
  --glow: 0 0 0 1px rgba(79,176,234,.22);

  /* Glas-parametre (bruges af reglerne nedenfor). Mere transparent (Christian) -
     lavere flade-alpha, hoejere blur saa frost-effekten holder.
     alpha/modal-alpha/blur styres live af glass-TUNEREN i demoen (demo.js) -
     naar Christian melder tal, saettes de som nye defaults HER. */
  --glass-bg: rgba(255,255,255,.045);
  --glass-bg-2: rgba(255,255,255,.085);
  --glass-edge: rgba(255,255,255,.18);
  --glass-blur: 20px;
  --glass-alpha: .56;          /* kort/paneler */
  --glass-modal-alpha: .97;    /* modaler - naesten opak, tekst bagved maa ikke ses */
  /* Apple-trikket fra Liquid Glass: farverne BAG glasset maettes op, saa frosten
     foeles levende i stedet for graasloret. 100% = neutral (som foer). */
  --glass-sat: 100%;
}

/* Gradient-baggrund med to bloede blaa lyskilder. */
:root[data-theme="glass"] body {
  background: var(--app-bg);
  background-image:
    radial-gradient(1300px 760px at 8% -12%, rgba(79,176,234,.12), transparent 62%),
    radial-gradient(1200px 820px at 104% -4%, rgba(47,146,207,.10), transparent 58%),
    linear-gradient(160deg, var(--app-bg-2), var(--app-bg) 55%);
  background-attachment: fixed;
}

/* GENAABNET 27/8 (Christian, efter spooky corners blev rod-loest): AEGTE frosted
   glas igen. Den naesten-opake flade var et plaster paa plade-fejlen ("Christians
   ekstra layer uden rounded corners" VAR .op-row-kamuflagepladen med forkert
   baggrund, set gennem de transparente kort + i sprækken) - se
   .op-row-overriderne nederst i glass-blokken. Regler fra dengang der stadig
   gaelder: RIGTIG border (foelger radius rent), KUN yder-skygge, INGEN inset
   (op-cards overflow:hidden + inset + radius = Chromium-fejl). */
:root[data-theme="glass"] .panel,
:root[data-theme="glass"] .op-card,
:root[data-theme="glass"] .op-actions-card {
  background: linear-gradient(180deg,
    rgba(30, 58, 86, calc(var(--glass-alpha) + .02)),
    rgba(20, 42, 64, var(--glass-alpha)));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-3);
}
/* DE 2 TOP-KORT (NEXT STATION + START/STOP) er de ENESTE kort der ligger direkte
   paa body-gradientens lyse top-glow. Fordi de er semi-transparente, skinner den
   UENSARTEDE body igennem: moerke hjoerner (body i de runde hjoerne-trekanter) +
   et lyst baand i den firkantede aabning mellem dem (body-gradienten set gennem
   mellemrummet - Christians "ekstra layer uden rounded corners"). Alle andre kort
   ligger paa ensartet baggrund og er upaavirkede. FIX: giv KUN disse 2 en SOLID
   (opak) flade - saa kan body IKKE skinne igennem - og drop overflow:hidden-klippet.
   Glas-kanten + skyggen beholdes, saa de stadig ser ud som glas. */
:root[data-theme="glass"] .topbar {
  background: rgba(14,34,54,.72);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--glass-edge);
}
/* PLADEN BAG BETJENINGSRAEKKEN - kamuflage-reglen (se ~6644) gaelder OGSAA glass:
   glass overskriver body-baggrunden, saa pladen skal male PRAECIS samme baggrund.
   LAERING 27/8: en FROSTED plade (tint+blur) blev proevet foerst - men pladen
   ligger flush med kortene, saa dens eneste synlige steder ER hjoerne-notcherne
   og sprækken -> en moerk frost-tone i notcherne = spooky corners pr.
   konstruktion. Frost-looket hoerer til KORTENE (der er stoerre end det de
   daekker), aldrig en flush plade. Kamuflage + fade som alle andre temaer. */
:root[data-theme="glass"] .op-row::before,
:root[data-theme="glass"] .op-row::after {
  background: var(--app-bg);
  background-image:
    radial-gradient(1300px 760px at 8% -12%, rgba(79,176,234,.12), transparent 62%),
    radial-gradient(1200px 820px at 104% -4%, rgba(47,146,207,.10), transparent 58%),
    linear-gradient(160deg, var(--app-bg-2), var(--app-bg) 55%);
  background-attachment: fixed;
}
:root[data-theme="glass"] .modal-card,
:root[data-theme="glass"] .gear-menu,
:root[data-theme="glass"] .row-actions-menu,
:root[data-theme="glass"] .psel-pop,
:root[data-theme="glass"] .dtp-pop,
:root[data-theme="glass"] .lk-card,
:root[data-theme="glass"] [class*="drawer"] {
  background: rgba(20, 42, 66, var(--glass-modal-alpha));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-4);
}
:root[data-theme="glass"] .modal { background: rgba(6,20,34,.55); }
/* I skuffer baerer SELVE skuffen fladen - den indre .panel (kort) goeres
   gennemsigtig, saa der ikke ligger to flader oven i hinanden. */
:root[data-theme="glass"] [class*="drawer"] .panel {
  background: transparent !important;
  border-color: transparent; box-shadow: none;
}
/* Knappernes primaerfarve faar et lille glas-skaer. */
:root[data-theme="glass"] .btn.primary { box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.18); }

/* ============================================================================
   TEST-TEMA (Christian 18/8): "glassmd" = MARITIME DARK + gennemsigtige glas-flader.
   Skal afgoere om de moerke hjoerner foelger MED transparensen. Hypotese: NEJ - de
   kom fra glass' LYSE grund (#102c47) + kaempe skygge; maritimes MOERKE grund
   (#050d14) skjuler den samme skygge, saa ingen synlige hjoerner. Bruger maritimes
   palette + skygger 1:1, laegger bare de translucente flader + lys kant ovenpaa.
   Hvis god => "Liquid glass maritime" bliver det rigtige tema. Kun i demo indtil da.
   ============================================================================ */
:root[data-theme="glassmd"] {
  --app-bg: #050d14;  --app-bg-2: #081420;
  --surface: #0e1f2d;  --surface-2: #143040;  --surface-3: #1b3d50;
  --line: #35709a;  --line-soft: #24506a;
  --bar: #0a2233;  --bar-2: #0d2c42;
  --input-bg: #061019;  --code-bg: #040d14;
  --accent: #4fd1c5;  --accent-rgb: 79,209,197;  --accent-2: #2bb3a6;
  --ok: #3ddc97;  --ok-rgb: 61,220,151;  --warn: #f0b429;  --warn-rgb: 240,180,41;
  --tc0: #f0b429;  --tc1: #8ab4f8;  --tc2: #3ddc97;  --tc3: #c792ea;
  --tc4: #ff9e64;  --tc5: #7fd3ff;  --tc6: #4fd1c5;  --tc7: #ef9a9a;
  --danger: #ef6b5e;  --danger-rgb: 239,107,94;  --danger-soft: #3a1c18;
  --ok-soft: #0e2f2a;  --wait-soft: #33280c;
  --ink: #e4f0f6;  --ink-soft: #8fabbd;  --on-bar: #eaf6fb;  --on-bar-soft: #8fb4c9;
  /* maritimes skygger 1:1 (IKKE dæmpet) - hele pointen med testen */
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 3px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-3: 0 8px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --sh-4: 0 18px 45px rgba(0,0,0,.60), 0 4px 12px rgba(0,0,0,.40);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.18);
  --glass-edge: rgba(255,255,255,.13);
}
:root[data-theme="glassmd"] body {
  background: var(--app-bg);
  background-image:
    radial-gradient(1300px 760px at 8% -12%, rgba(79,209,197,.09), transparent 62%),
    radial-gradient(1200px 820px at 104% -4%, rgba(43,179,166,.07), transparent 58%),
    linear-gradient(160deg, var(--app-bg-2), var(--app-bg) 55%);
  background-attachment: fixed;
}
:root[data-theme="glassmd"] .panel,
:root[data-theme="glassmd"] .op-card,
:root[data-theme="glassmd"] .op-actions-card {
  background: linear-gradient(180deg, rgba(20,44,62,.86), rgba(12,30,44,.83));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-3);
}
:root[data-theme="glassmd"] .topbar {
  background: rgba(10,34,51,.82);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--glass-edge);
}
:root[data-theme="glassmd"] .modal-card,
:root[data-theme="glassmd"] .gear-menu,
:root[data-theme="glassmd"] .row-actions-menu,
:root[data-theme="glassmd"] .psel-pop,
:root[data-theme="glassmd"] .dtp-pop,
:root[data-theme="glassmd"] .lk-card,
:root[data-theme="glassmd"] [class*="drawer"] {
  background: rgba(14,32,48,.96);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-4);
}
:root[data-theme="glassmd"] .modal { background: rgba(3,10,18,.55); }
:root[data-theme="glassmd"] [class*="drawer"] .panel {
  background: transparent !important;
  border-color: transparent; box-shadow: none;
}
:root[data-theme="glassmd"] .btn.primary { box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.15); }

/* ============================================================================
   "AQUA" (18/8, Christian) - liquid-glass FARVERNE (blaa hav-gradient) men som et
   HELT NORMALT OPAKT tema. Ingen transparency, ingen glas-mekanik => ingen moerke
   hjoerner (praecis som de graa/hvide temaer, der aldrig havde problemet). Den blaa
   glow sidder LAVT/centralt, ALDRIG lyst bag de 2 top-kort (dét sted var hele
   aarsagen). Beholder de smukke blaa gradient-farver.
   ============================================================================ */
:root[data-theme="aqua"],
:root[data-theme="aquax"] {
  /* LIGE SAA MOERK som maritime (#050d14/#081420) - bare blaa i stedet for navy.
     Det er MOERKHEDEN der goer at skyggen ikke kan ses som hjoerner; en lysere
     grund afsloerer den (det var hele fejlen). */
  --app-bg: #061520;           /* naesten sort hav-blaa */
  --app-bg-2: #0a1f2e;
  /* Dybere/moerkere blaa kort (Christian: "blev meget mere lyseblaa") - stadig
     klart loeftet fra den naesten-sorte grund, men ikke lyse. */
  /* TYDELIGE trin mellem lagene (Christian: "naesten umuligt at se card").
     Panelet er moerkt, kort OVENPAA panelet er maerkbart lysere, kontroller igen
     et trin op - saa et kort inde i et panel altid kan ses. */
  --surface: #0d2740;          /* paneler (den dybe navy Christian kan lide) */
  --surface-2: #1b3d5e;        /* kort OVENPAA paneler - klart trin op */
  --surface-3: #24496d;        /* kontroller / haevet */
  --line: #3d6b96;             /* synlig kant */
  --line-soft: #2d5479;        /* raekke-streger i tabellen + kort-kant: en anelse mere markante */
  --bar: #0d2438;
  --bar-2: #113050;
  --input-bg: #0c2237;
  --code-bg: #081826;

  /* MAKSIMAL TEKSTKONTRAST (Christian: "total kontrast paa alt tekst overalt").
     De gamle vaerdier var nedtonede - maalt faldt flere UNDER AAA paa kort-fladen
     (danger kun 4,4:1, accent 4,7:1). Alle er nu loeftet til den lyseste udgave i
     deres farvekategori der stadig LIGNER farven; maalt >= 7:1 (AAA) paa den
     SVAERESTE (lyseste) baggrund, og 9-15:1 paa panelerne. */
  /* 19/8: de foerste vaerdier var LYSE pasteller - hoej kontrast, men lav
     farvemaetning, saa de saa blege ud. Nu MAETTEDE farver: de "popper", og
     kontrasten er stadig rigelig (5,5-9,4:1 maalt mod raekkefladen). */
  --accent: #7cc4ff;           /* klar himmelblaa */
  --accent-rgb: 124,196,255;
  --accent-2: #4a9cf0;
  --ok: #2ee88d;   --ok-rgb: 46,232,141;      /* maettet groen - 9,4:1 */
  --warn: #ffc23d; --warn-rgb: 255,194,61;    /* maettet rav - 9,4:1 */
  --tc0: #ffc23d;  --tc1: #5aa9ff;  --tc2: #2ee88d;  --tc3: #c98bff;
  --tc4: #ff8a3d;  --tc5: #4fd8f5;  --tc6: #7cc4ff;  --tc7: #ff7a90;
  --danger: #ff6b6b;  --danger-rgb: 255,107,107;   /* tydelig roed - 5,5:1 */
  --danger-soft: #3a1f1c;  --ok-soft: #10322c;  --wait-soft: #33280c;

  --ink: #ffffff;  --ink-soft: #d2e4f2;      /* 11,2:1 og 8,6:1 paa kort */
  --on-bar: #ffffff;  --on-bar-soft: #cfe3f5;

  --sh-1: 0 1px 2px rgba(3,12,22,.45);
  --sh-2: 0 3px 8px rgba(3,12,22,.45), 0 1px 2px rgba(3,12,22,.32);
  --sh-3: 0 8px 20px rgba(3,12,22,.48), 0 2px 6px rgba(3,12,22,.32);
  --sh-4: 0 16px 40px rgba(3,12,22,.55), 0 4px 12px rgba(3,12,22,.35);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.16);
}
/* Blaa hav-gradient - glow LAVT (fra bunden), moerk-blaa top saa de 2 top-kort
   ligger paa ensartet moerk grund (ingen hjoerner). */
/* INGEN egen body-regel og INGEN kort-undtagelser for aqua!
   Aqua bruger nu PRAECIS samme opbygning som "maritime" (som beviseligt ALDRIG har
   haft moerke hjoerner) - kun farverne er blaa i stedet for navy/teal. Det var mine
   ekstra gradient-lag + glow der skabte den lyse/uensartede flade bag de 2 top-kort,
   og dermed hjoernerne og baandet. Grund-reglen i body{} (den samme som maritime,
   slate og carbon bruger) staar for baggrunden. */

/* SIDE-LYS (19/8, Christian): lidt lysere i BEGGE SIDEKANTER, hvor sidebaren
   glider ud - saa dens slagskygge faktisk kan SES. Paa en helt moerk bund
   forsvinder enhver skygge, og kortet ser "klistret paa" ud.

   Det afgoerende: lyset er ankret LAVT (ca. 62 % nede) og doer ud igen, saa
   TOPPEN - hvor NEXT STATION og START/STOP ligger - bliver ved med at vaere
   ensartet moerk. Det var praecis en LYS flade bag de to top-kort der gav de
   moerke hjoerner, og den fejl skal ikke tilbage ad bagvejen.
   Sidste lag = den oprindelige grund-gradient (uaendret, moerk top). */
:root[data-theme="aqua"] body {
  background-color: var(--app-bg);
  background-image:
    /* LUKKET sidebar = HELT ren baggrund. Her stod foer to side-radialer (baade
       venstre OG hoejre) - og den i den MODSATTE side saas som en "lys blob" naar
       skuffen var foldet ind. Lyset hoerer kun til naar sidebaren er UDE, og
       tegnes dér som en ensartet lodret stribe (se .sbar-open). */
    radial-gradient(1200px 700px at 50% -10%, var(--app-bg-2), var(--app-bg));
  background-attachment: fixed;
}

/* LYST BAELTE I HELE HOEJDEN BAG SIDEBAREN - kun mens den er ude (.sbar-open).
   Saa kan slagskyggen ses hele vejen fra top til bund, i stedet for kun paa
   midten hvor side-lyset naaede til. Baeltet er ~420 px bredt (sidebar + luft),
   saa det ligger BAG panelet og ikke ude midt paa siden.
   Bevidst kun naar skuffen er aaben: i den normale visning er baggrunden
   uaendret, og den moerke top (som fjernede de moerke hjoerner) bevares. */
/* Baeltet er en ENSARTET LODRET STRIBE i fuld hoejde - ikke en lys klat nede i
   hjoernet (Christian, med et Canva-eksempel: HELE den lodrette stribe skal vaere
   lysere end resten). Derfor KUN en vandret linear-gradient (ens fra top til bund)
   og INGEN radial i baeltet. Den bløde overgang ligger i selve gradient-stoppene,
   saa der ikke ses en kant midt paa siden. */
:root[data-theme="aqua"] body::before {
  /* Baeltet ligger paa SIT EGET LAG, saa det kan TONE ind og ud.
     background-image kan nemlig ikke animeres i CSS - derfor "poppede" lyset
     frem foer. Her animerer vi opacity i staedet, med praecis samme varighed og
     kurve som sidebarens glid (.2s ease), saa lys og panel foelges ad.
     z-index -1 + pointer-events:none => ligger bag alt indhold og kan ikke
     rammes af mus. */
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
  background-image:
    linear-gradient(270deg,
      rgba(126,198,246,.20) 0,
      rgba(126,198,246,.185) 180px,
      rgba(126,198,246,.13) 330px,
      rgba(126,198,246,.05) 450px,
      transparent 560px);
}
/* Ligger sidebaren i VENSTRE side, spejles striben derover. */
:root[data-theme="aqua"].sbar-on-left body::before {
  background-image:
    linear-gradient(90deg,
      rgba(126,198,246,.20) 0,
      rgba(126,198,246,.185) 180px,
      rgba(126,198,246,.13) 330px,
      rgba(126,198,246,.05) 450px,
      transparent 560px);
}
/* Ude = lyset toner ind; inde = det toner ud igen. */
:root[data-theme="aqua"].sbar-open body::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="aqua"] body::before { transition: none; }
}

/* ======================================================================
   AQUA XTREME - PRAECIS som Aqua (palette + baggrund deles ovenfor), men
   KORTENE faar en kraftig gradient i stedet for en flad flade. Gradienten er
   paa KORTENE, ikke baggrunden (Christian). Baggrunden er nu relativt LYS + FLAD
   (lineaer, INGEN radial-hotspots) saa kort-skyggerne SES - og fordi kortene er
   OPAKE og baggrunden ensartet, pooler skyggen ikke i hjoernerne (glassets fejl). */
:root[data-theme="aquax"] {
  --app-bg: #245686; --app-bg-2: #2b608f;
}
/* RULLET TILBAGE 27/8: undervands-baggrundsbilledet (og boelgerne foer det) vakte
   det gamle hjoerne-skygge-pooling til live paa den lyse flade (Christian: "stop..
   tilbage igen"). Aqua Xtreme er nu bare den rene gradient igen - ren + uden
   hjoerne-problemet. (ocean-bg.jpg + demo paste-legepladsen er fjernet.) */
/* Dyb gradient, moerkest i toppen (foerst demo-test 27/8, FORFREMMET til live
   samme dag da spooky corners blev loest ved roden - kamuflage-pladen, se
   nedenfor). Fixed = flugter med .op-row-pladerne pixel for pixel. */
:root[data-theme="aquax"] body {
  background: linear-gradient(180deg, #08182c 0%, #123a5c 52%, #2f6b9c 100%) fixed;
}
/* "SPOOKY CORNERS" - AARSAGEN FUNDET (27/8, maalt med elementsFromPoint):
   .op-row::before (~6623) er en kamuflage-plade bag betjeningsraekken - den
   maler SIDENS baggrund (token-radialen, fixed) saa den er usynlig, mens den
   skjuler listen der ruller under sprækken mellem kortene. Men aquax
   overskriver body-baggrunden DIREKTE - og saa maler pladen en ANDEN baggrund
   end siden: en synlig firkantet plade, flush med kortene, der titter frem i
   hjoerne-notcherne bag kortenes 14px-runding (+ kortets skygge oveni) = de
   moerke hjoerneklatter. Flat aquax var TILFAELDIGVIS naesten samme farve som
   token-radialen, derfor saas det foerst med en rigtig gradient.
   FIX: pladen maler PRAECIS aquax' egen body-gradient (fixed -> flugter pixel
   for pixel med body). ENHVER fremtidig theme-body-override skal goere det
   samme. */
:root[data-theme="aquax"] .op-row::before,
:root[data-theme="aquax"] .op-row::after {
  background: linear-gradient(180deg, #08182c 0%, #123a5c 52%, #2f6b9c 100%) fixed;
}
:root[data-theme="aquax"] .card,
:root[data-theme="aquax"] .panel,
:root[data-theme="aquax"] .op-card,
:root[data-theme="aquax"] .op-actions-card,
:root[data-theme="aquax"] .modal-card,
:root[data-theme="aquax"] .setup-card,
:root[data-theme="aquax"] .det-card {
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(79, 216, 245, .17), transparent 55%),
    radial-gradient(130% 130% at 0% 100%, rgba(124, 196, 255, .14), transparent 55%),
    linear-gradient(145deg, #193a58 0%, #112c45 46%, #0a1d33 100%);
  border: 1px solid rgba(124, 196, 255, .24);
  /* Jaevn drop shadow (ingen kaempe enkelt-blur der pooler) - tydelig paa den lyse
     baggrund, saa kortene floater. */
  box-shadow: 0 14px 30px rgba(5, 20, 40, .40), 0 4px 10px rgba(5, 20, 40, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Kontroller/kort OVENPAA et kort (et trin lysere) faar en lidt lysere gradient,
   saa lagdelingen bevares. */
:root[data-theme="aquax"] .op-actions-card {
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(79, 216, 245, .20), transparent 55%),
    radial-gradient(130% 130% at 0% 100%, rgba(124, 196, 255, .16), transparent 55%),
    linear-gradient(145deg, #21496b 0%, #163553 46%, #0e2842 100%);
}

/* =====================================================================
   ROYAL premium-kort (som aquax, Christian 27/8). Grunden er MOERK royal-blaa,
   saa kortene loeftes af en gradient der er et trin lysere end grunden + en
   guld/soelv-radial-sheen + accent-kant + top-highlight (bevel). Den ydre skygge
   er diskret paa moerk bund; dybden kommer mest fra gradient + kant + highlight.
   ===================================================================== */
:root[data-theme="royalgold"] .card,
:root[data-theme="royalgold"] .panel,
:root[data-theme="royalgold"] .op-card,
:root[data-theme="royalgold"] .op-actions-card,
:root[data-theme="royalgold"] .modal-card,
:root[data-theme="royalgold"] .setup-card,
:root[data-theme="royalgold"] .det-card {
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(232, 193, 90, .13), transparent 55%),
    radial-gradient(130% 130% at 0% 100%, rgba(232, 193, 90, .07), transparent 58%),
    linear-gradient(145deg, #1d3a66 0%, #16294c 48%, #0f2244 100%);
  border: 1px solid rgba(232, 193, 90, .28);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
:root[data-theme="royalgold"] .op-actions-card {
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(232, 193, 90, .17), transparent 55%),
    radial-gradient(130% 130% at 0% 100%, rgba(232, 193, 90, .09), transparent 58%),
    linear-gradient(145deg, #244474 0%, #1b3358 48%, #132a4e 100%);
}
:root[data-theme="royalsilver"] .card,
:root[data-theme="royalsilver"] .panel,
:root[data-theme="royalsilver"] .op-card,
:root[data-theme="royalsilver"] .op-actions-card,
:root[data-theme="royalsilver"] .modal-card,
:root[data-theme="royalsilver"] .setup-card,
:root[data-theme="royalsilver"] .det-card {
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(200, 210, 224, .14), transparent 55%),
    radial-gradient(130% 130% at 0% 100%, rgba(165, 180, 205, .08), transparent 58%),
    linear-gradient(145deg, #1d3a66 0%, #16294c 48%, #0f2244 100%);
  border: 1px solid rgba(200, 210, 224, .26);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
:root[data-theme="royalsilver"] .op-actions-card {
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(200, 210, 224, .18), transparent 55%),
    radial-gradient(130% 130% at 0% 100%, rgba(165, 180, 205, .10), transparent 58%),
    linear-gradient(145deg, #244474 0%, #1b3358 48%, #132a4e 100%);
}

/* =====================================================================
   AQUA FUTURISTIC  -  LIVE  (:root[data-theme^="aqua"] = aqua OG aquax)
   Forfremmet fra demo 27/8 (Christian: "hele Aqua Futuristic-laget" live).
   Rammer BEGGE aqua-temaer via attribut-praefiks `^="aqua"` (aqua + aquax) -
   ingen andre temaer starter med "aqua", saa fintech/latte/... er urort. aquax
   deler i forvejen aquas palette, saa cyan/accent passer. Skibets standard er
   aquax = gradient-kort + dette futuristiske lag ovenpaa.
   Idéen: den futuristiske behandling BAERER MENING - den lyser paa det der er
   LIVE (koerende station, klar-til-start, fokus), i stedet for bare pynt.
   ===================================================================== */
:root[data-theme^="aqua"] { --aqua-cyan: #4fd8f5; --aqua-cyan-rgb: 79,216,245;
  --aqua-cyan-pop: #2fe4ff; }   /* lysere/skarpere cyan til tal uden glow */

/* 1) GLAS-TOPBAR: matteret, saa hav-gradienten driver bagved + neon-hairline. */
:root[data-theme^="aqua"] .topbar {
  background: linear-gradient(180deg, rgba(13,36,56,.80), rgba(13,36,56,.60));
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  border-bottom: 1px solid rgba(var(--accent-rgb), .30);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), .10), 0 10px 26px rgba(3,12,22,.42);
}

/* 2) HUD-TAL: Teko-skrift (scoreboard/konsol) med gloed. Station-timerne staar i
   CYAN (afloeser groen); topbar-urene beholder deres egen farve. Christian valgte
   Teko + cyan. */
:root[data-theme^="aqua"] .clock span:last-child,
:root[data-theme^="aqua"] #stnElapsed,
:root[data-theme^="aqua"] #stationTimer {
  font-family: "Teko", ui-monospace, Consolas, monospace;
  letter-spacing: .05em;
}
:root[data-theme^="aqua"] .clock span:last-child {
  font-size: 22px;         /* lidt stoerre ure */
  text-shadow: none;       /* counter er paenere uden glow - urene ogsaa */
}
:root[data-theme^="aqua"] #stnElapsed,
:root[data-theme^="aqua"] #stationTimer {
  color: var(--aqua-cyan-pop);   /* skarp, klar cyan der popper UDEN glow */
  text-shadow: none;
}
/* Den store station-timer: MARKANT stoerre (Teko er smal, saa der er plads). */
:root[data-theme^="aqua"] #stationTimer {
  font-size: clamp(78px, 7.5vw, 104px);
  font-weight: 600;
}
/* HH:MM:SS er allerede delt af kolon; her byttes den generiske 'elapsed' ud med
   HRS/MIN/SEC under de tre par - saa opdelingen er tydelig. .ss-clock krymper til
   timerens bredde, saa 3-kolonne-etiketterne staar under parrene. */
:root[data-theme^="aqua"] .ss-clock { width: fit-content; margin-inline: auto; }
:root[data-theme^="aqua"] .ss-elapsed .ss-elw { display: none; }
:root[data-theme^="aqua"] .ss-elapsed {
  /* 1fr 2fr 1fr (ikke 3x1fr): parrenes centre ligger laengere ude end lige
     tredjedele pga. kolonnerne - 1:2:1 rammer HH/MM/SS-parrene praecist. */
  display: grid; grid-template-columns: 1fr 2fr 1fr;
  margin-top: 7px; opacity: 1;
}
:root[data-theme^="aqua"] .ss-elapsed .ss-u {
  display: block; text-align: center; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em;
  color: var(--aqua-cyan); opacity: .72;
}

/* 3) NEON-FANER: aktiv fane faar en JAEVN gloed hele vejen rundt.
   FOER: cyan underkant (inset 0 -2px) + nedad-skygge (--sh-1) - Christian 27/8:
   "3d-effekten goer at knappen ser skaev ud". Nu symmetrisk: ring + rundt-om-gloed. */
:root[data-theme^="aqua"] .tab.active {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55),
    0 0 14px rgba(var(--accent-rgb), .32);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .40);
}

/* 4) GLOED-FOKUS overalt: cyan ring naar et felt er i fokus. */
:root[data-theme^="aqua"] input:focus,
:root[data-theme^="aqua"] select:focus,
:root[data-theme^="aqua"] textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35), 0 0 16px rgba(var(--accent-rgb), .25);
  border-color: rgba(var(--accent-rgb), .70);
}

/* 5) LIVE-GLOED paa handlings-knapper. Den BLAA glow paa .btn.primary bliver i
   demoen; den GROENNE start-glow er FORFREMMET til live (Christian 27/8) - se
   "LIVE GO GLOW" blokken efter live-kanten. */
:root[data-theme^="aqua"] .btn.primary {
  box-shadow: var(--sh-3), 0 0 20px rgba(var(--accent-rgb), .40),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* 6) LIVE-KANT er FORFREMMET til live (tema-agnostisk) - se "LIVE RUNNING EDGE"
   blokken efter denne. Christian 27/8: han ville have lyset der loeber rundt om
   start/stop-kortet paa skibet, uden resten af det futuristiske lag. */

/* 7) CAUSTICS: meget langsomt driftende undervandslys i baggrunden - dybt
   nedtonet, saa det ALDRIG stjaeler fra data. KUN klassisk `aqua` (ikke aquax):
   aquax bruger sin egen ABSTRAKTE HAV-baggrund (boelger) paa body::after i stedet,
   saa de to maa ikke slaas om samme pseudo-element. */
:root[data-theme="aqua"] body::after {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 30%, rgba(79,216,245,.06), transparent 60%),
    radial-gradient(42% 32% at 78% 68%, rgba(124,196,255,.05), transparent 62%);
  animation: aquaCaustic 26s ease-in-out infinite alternate;
}
@keyframes aquaCaustic {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}

/* Reduced-motion: sluk bevaegelse, behold farver/gloed. */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="aqua"] body::after { animation: none; }
}

/* =====================================================================
   LIVE RUNNING EDGE  -  LIVE OVERALT (tema-agnostisk, IKKE demo-gated)
   Den koerende station faar en langsomt roterende lys-kant, saa det ene kort
   der optager LIGE NU er umuligt at overse. Forfremmet fra Aqua Futuristic
   (Christian 27/8: "det lys der loeber rundt om start stop card"), men uden
   resten af det futuristiske lag (Teko-HUD, neon, caustics = kun demo).
   Bruger temaets EGEN accent + en lysere spids, saa den passer paa alle
   temaer - lyse som moerke. Kanten tegnes med en conic-gradient der MASKES,
   saa kun rammen (~1,7px) ses; midten er urort.
   ===================================================================== */
@property --live-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.op-actions-card.running {
  /* position + isolation kraeves for at ::after-kanten kan laegge sig praecist
     oven paa kortets ramme uden at paavirke kortets egen skygge/gradient. */
  position: relative; isolation: isolate;
}
.op-actions-card.running::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.7px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--live-a),
    transparent 0deg, transparent 200deg,
    var(--live-edge-hi, #7fe9ff) 285deg, var(--accent) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: liveEdge 5s linear infinite;
}
@keyframes liveEdge { to { --live-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .op-actions-card.running::after { animation: none; }
}

/* =====================================================================
   LIVE GO GLOW  -  LIVE OVERALT (tema-agnostisk, IKKE demo-gated)
   Groen glow paa start/go-knapperne, men KUN naar de kan trykkes
   (:not(:disabled)) = "noget kan ske NU". Groen er signalfarven for go
   (samme sprog som knap-konventionerne), saa den er fast - ikke tema-accent.
   Forfremmet fra Aqua Futuristic (Christian 27/8). Den blaa .btn.primary-glow
   bliver i demoen.
   ===================================================================== */
.big-btn.start:not(:disabled),
.stn-go:not(:disabled),
.btn.go:not(:disabled) {
  box-shadow: var(--sh-3), 0 0 20px rgba(46, 232, 141, .42),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ---- Stationsliste-preview (se listen uden at downloade) - tema-agnostisk. ---- */
.slp-wrap { margin-top: 14px; }
.slp-sheet { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden;
  background: var(--surface); }
.slp-sub { padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  letter-spacing: .02em; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.slp-rows { display: flex; flex-direction: column; }
.slp-row { display: grid; grid-template-columns: 42% 58%; gap: 10px; padding: 7px 14px;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.slp-row:last-child { border-bottom: 0; }
.slp-row:nth-child(even) { background: rgba(255,255,255,.02); }
.slp-k { color: var(--ink-soft); }
.slp-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.slp-v.slp-dim { color: var(--ink-soft); opacity: .6; }
.slp-foot { padding: 8px 14px; font-size: 11px; color: var(--ink-soft); opacity: .8;
  background: var(--surface-2); border-top: 1px solid var(--line-soft); }
/* Afsnits-vaelger paa stationsarket: man vaelger selv hvad arket skal indeholde.
   Tallet paa pillen = hvor mange felter afsnittet faktisk har udfyldt, saa man
   kan se hvad der er noget i FOER man slaar det til. */
/* .cnv-filnavnet i CTD-panelet: lille, men altid synligt - saa man kan se hvilken
   fil profilen kom fra, og genkende den igen paa udskriften. */
.ctp-cal-file {
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;
  color: var(--ink-soft); background: var(--input-bg);
  border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 3px 7px; margin: 0 0 8px; word-break: break-all;
}
/* Traek-greb i stationskortets nederste hoejre hjoerne. */
.det-card { position: relative; }
/* Stationskortets underlinje: tidspunkt foerst, togtet, og id'et til sidst i
   lille monospace - laesbart uden at skjule noeglen til mappen paa disken. */
.det-sub-when { font-weight: 600; color: var(--ink); }
.det-sub-cruise { color: var(--ink-soft); }
.det-sub-id {
  margin-left: 10px; font-size: 11px; color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace; opacity: .75;
}

/* .det-grip er fjernet - se app.js, ryddKortMaal(). */

/* ÉN LINJE. Raekken braekkede i to fordi den bar en etiket ("SECTIONS") og en
   "Auto"-knap - begge er vaek nu - og fordi den ombroed. Syv piller er 851 px i
   en spalte paa 680: den skal RULLE, ikke braekke. En anden linje flytter alt
   nedenunder og faar panelet til at hoppe hver gang man slaar et afsnit til.
   ADVARSEL: der laa foer en konkurrerende .slp-pick-regel LAENGERE OPPE i
   filen. Samme klasse to steder = den sidste vinder, og det er sjaeldent den
   man lige har skrevet. Der er kun én nu. */
/* POPUP-VAELGER (28/8): raekken rullede vandret ("irriterende at scrolle") -
   nu ligger valgene i en popup under EN knap, lodret, intet ruller. */
.slp-pick {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  margin-bottom: 10px; padding-bottom: 6px;
  position: relative; overflow: visible;
}
.slp-pick-btn.on { border-color: rgba(var(--accent-rgb), .6); color: var(--accent); }
.slp-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 3px; min-width: 280px;
  padding: 8px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--sh-3); }
.slp-pop .slp-chip { display: flex; width: 100%; justify-content: flex-start;
  border-radius: 9px; text-align: left; }
.slp-pop .slp-chip .slp-chip-n { margin-left: auto; }
.slp-opt-tick { display: inline-block; width: 14px; color: var(--accent); font-weight: 800; }
.slp-pick-h { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 4px; }
.slp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line-soft); font-family: inherit; font-size: 12px; font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.slp-chip:hover { color: var(--ink); border-color: var(--line); }
.slp-chip.on { background: rgba(var(--accent-rgb), .16); color: var(--accent);
  border-color: rgba(var(--accent-rgb), .5); }
.slp-chip.empty { opacity: .55; }            /* intet data - men man MAA vaelge den */
.slp-chip.locked { cursor: default; opacity: 1; }
.slp-chip-n { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.slp-reset { margin-left: auto; background: none; border: 1px solid var(--line-soft);
  color: var(--ink-soft); border-radius: 8px; padding: 4px 10px; font-size: 11.5px;
  font-family: inherit; cursor: pointer; }
.slp-reset:hover { color: var(--accent); border-color: var(--accent); }
/* Afsnits-overskrift inde i selve arket. */
.slp-sec-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; padding: 10px 14px 5px;
  border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.slp-loading { padding: 20px 14px; color: var(--ink-soft); font-size: 13px; }

/* ---- Traal-geometri (udregnet) ---- */
.tg-wrap { display: flex; flex-direction: column; gap: 14px; }
.tg-why { background: var(--surface-2); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent); border-radius: 12px; padding: 13px 16px;
  font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.tg-why b { color: var(--ink); }

/* ---- SENSOR-DYBDER: tre LIGEVAERDIGE tal (Christian) ----
   Foer var CTD kaempestor og de to andre smaa biroller. Nu samme talstoerrelse
   paa alle tre, saa panelet er "sensor depths" og ikke "CTD + fodnoter". */
.sd-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.sd-row:last-of-type { border-bottom: 0; }
/* En sensor uden tal: navnet staar, tallet er en tankestreg, og hele raekken er
   daempet - saa man kan SE at den ikke sender, uden at raekken forsvinder og
   flytter naboerne. */
.sd-row.sd-tom { opacity: .45; }
.sd-row.sd-tom .sd-val, .sd-row.sd-tom .sd-val b { color: var(--ink-soft); }
.sd-lbl { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; }
.sd-val { font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-val b { font-weight: 600; }
.sd-val .ctd-unit { font-size: 13px; color: var(--ink-soft); font-weight: 500; margin-left: 5px; }
.sd-val .ctd-arrow { font-size: 15px; margin-left: 6px; }
/* TOM pil = ingen plads. JS toemmer pilen naar der ingen maaling er, men
   margenen blev staaende - saa CTD'ens "- m" endte 6 px foer de andre raekkers
   og kolonnen stod i takker (Christian 28/8). */
.sd-val .ctd-arrow:empty { display: none; }
/* MIK i samme orange som paa Dana Maps, saa tallet genkendes paa tvaers. */
/* Farverne er de SAMME som sensorerne har paa Dana Maps, saa man genkender
   tallet paa tvaers af skaermene (MIK orange, WP2 gul). */
/* ---------------- TOAST (kvittering under topbaren) ----------------
   Glider ned fra topbaren, midtstillet, og forsvinder selv. Ligger OVER alt
   andet (ogsaa modaler), men er klik-gennemsigtig, saa den aldrig staar i vejen
   for en knap. */
.ui-toast {
  /* Glider ind fra VENSTRE (Christian): lettere at faa oeje paa end en stribe
     under topbaren, og den ligger ikke oven i noget man skal ramme.
     GROEN flade naar alt er som det skal vaere - man skal kunne se "det gik godt"
     uden at laese teksten. */
  position: fixed; left: 16px; top: calc(var(--topbar-h, 60px) + 16px);
  transform: translateX(-125%);
  z-index: 12000; pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; border-radius: 14px;
  max-width: min(460px, 46vw);
  background: linear-gradient(180deg, rgba(46, 232, 141, .22), rgba(20, 90, 60, .30));
  border: 1px solid rgba(var(--ok-rgb), .55);
  border-left: 5px solid var(--ok);
  box-shadow: 0 16px 40px rgba(2, 10, 20, .55);
  color: var(--ink); font-size: 15.5px; font-weight: 650; line-height: 1.35;
  opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.ui-toast.on { transform: translateX(0); opacity: 1; }
.toast-ico { font-size: 21px; line-height: 1; flex: none; color: var(--ok); }
/* Advarsel og fejl faar deres egne farver - samme form, andet signal. */
.ui-toast.toast-warn {
  background: linear-gradient(180deg, rgba(var(--warn-rgb), .22), rgba(90, 66, 16, .30));
  border-color: rgba(var(--warn-rgb), .55); border-left-color: var(--warn);
}
.ui-toast.toast-warn .toast-ico { color: var(--warn); }
.ui-toast.toast-bad {
  background: linear-gradient(180deg, rgba(var(--danger-rgb), .22), rgba(90, 30, 30, .30));
  border-color: rgba(var(--danger-rgb), .55); border-left-color: var(--danger);
}
.ui-toast.toast-bad .toast-ico { color: var(--danger); }
/* LIVE (forfremmet 27/8): toasten laa oven i brand-skuffens greb (.bs-greb) og var
   gennemsigtig, saa grebet skinnede igennem. Flyt den NED under grebet + gør den
   UGENNEMSIGTIG. Notifikationsfarver (groen/gul/roed) virker paa alle temaer. */
.ui-toast { top: calc(var(--topbar-h, 60px) + 46px);
  background: linear-gradient(180deg, #1a5334, #123f27);
}
.ui-toast.toast-warn { background: linear-gradient(180deg, #574316, #3c2f0f); }
.ui-toast.toast-bad  { background: linear-gradient(180deg, #5a221d, #3d1613); }
/* Ligger sidebaren i venstre side, skubbes kvitteringen fri af den. */
.sbar-on-left .ui-toast { left: calc(var(--sbar-w, 320px) + 16px); }
@media (prefers-reduced-motion: reduce) { .ui-toast { transition: opacity .2s ease; } }

/* ---- SEGMENTERET JA/NEJ (Stop station) ----
   Radioknapperne var smaa prikker - svaere at ramme og svaere at se paa broens
   skaerm. Samme inputs (name="succ", value yes/no) - kun udseendet er lavet om,
   saa al logik er uroert. Baade :has() og en .on-klasse fra JS, saa den ogsaa
   virker paa en aeldre browser. */
#stopModal .toggle-row {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line-soft);
  border-radius: 12px;
}
#stopModal .toggle-row .radio {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; padding: 10px 18px; border-radius: 9px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--ink-soft);
  border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s;
}
#stopModal .toggle-row .radio input {
  position: absolute; opacity: 0; width: 1px; height: 1px;   /* usynlig, men stadig
                                                                tastatur-tilgaengelig */
}
#stopModal .toggle-row .radio:hover { color: var(--ink); background: rgba(255,255,255,.05); }
#stopModal .toggle-row .radio.on,
#stopModal .toggle-row .radio:has(input[value="yes"]:checked) {
  background: rgba(var(--ok-rgb), .18); color: var(--ok);
  border-color: rgba(var(--ok-rgb), .55);
}
/* "No" skal signalere noget andet end "Yes". */
#stopModal .toggle-row .radio.on-no,
#stopModal .toggle-row .radio:has(input[value="no"]:checked) {
  background: rgba(var(--danger-rgb), .18); color: var(--danger);
  border-color: rgba(var(--danger-rgb), .55);
}
#stopModal .toggle-row .radio:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ALLE andre toggle-raekker (Edit-stationens Ja/Nej/Ukendt, WinCollect-layout)
   beholder deres oprindelige udseende - men faar en TYDELIG markering af det
   valgte. De havde ingen JS-klasse, saa da den segmenterede stil kortvarigt
   ramte dem, kunne man slet ikke se hvad der var valgt. */
.toggle-row .radio:has(input:checked) {
  color: var(--accent); font-weight: 700;
}
.toggle-row .radio input { accent-color: var(--accent); }

/* Modal-kortene er lysere i Aqua: paa broens skaerm var de naesten sorte. */
:root[data-theme="aqua"] .modal-card,
:root[data-theme="aqua"] #stopModal .modal-card,
:root[data-theme="aqua"] #editModal .modal-card {
  /* ID-reglen "#stopModal .modal-card" vandt over en ren klasse-selector, saa
     stop-vinduet blev ved med at vaere naesten sort paa broens skaerm. */
  background: linear-gradient(180deg, #17364f, #123049);
}

.sd-mik .sd-val, .sd-mik .sd-val b { color: #f97316; }
.sd-wp2 .sd-val, .sd-wp2 .sd-val b { color: #f59e0b; }
/* Genvej til fuldskaerms-tallene - synlig, saa man VED at muligheden findes. */
.sd-full {
  width: 100%; margin-top: 10px; padding: 8px 12px; border-radius: 9px;
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s, border-color .12s, color .12s;
}
.sd-full:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .10); }

/* S / M / L - synlige stoerrelses-knapper i instrument-skuffen (i stedet for kun
   at kunne TRAEKKE, som ingen opdagede). */
/* ALLE knapper i skuffe-hovedet PAA LINJE (Christian): hovedet er flex-end (saa
   fane-tungerne staar paa stregen), men knapperne skal staa paa samme linje og
   have SAMME hoejde - ellers hopper de op og ned i forhold til hinanden. */
.vnc-d-head > .vnc-d-sizes,
.vnc-d-head > .vnc-d-max,
.vnc-d-head > .vnc-d-fit,
.vnc-d-head > .vnc-d-ctrl,
.vnc-d-head > .vnc-d-dim {
  align-self: center; height: 30px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;                 /* samme afstand ned til stregen */
}
.vnc-d-sizes { gap: 3px; flex: 0 0 auto; margin-right: 6px;
  background: rgba(0,0,0,.22); border-radius: 8px; padding: 0 3px; }
.vnc-d-size {
  min-width: 26px; height: 24px; border-radius: 6px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink-soft);
  font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  transition: background .12s, color .12s, border-color .12s;
}
.vnc-d-size:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.vnc-d-size.on { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), .14); }

/* ===================== SAMLET SIDEBAR (Cruise · CTD · Tasks) =====================
   ÉN skuffe i stedet for tre. Kan sidde i hoejre (standard) eller venstre kant.
   VNC er bevidst IKKE med - den fylder for meget og har sin egen skuffe. */
/* SVAEVER - sidder ikke fast i topbaren (Christian). Tydelig luft under baren OG
   ind fra skaermkanten, saa panelet ligger frit med skygge hele vejen rundt i
   stedet for at se paasvejset ud. */
.sbar {
  /* HELT ud til skaermkanten og hele vejen ned (Christian): den sorte luft rundt
     om panelet er plads der er bedre brugt paa indholdet - og maalet er at
     sidebaren ALDRIG behoever at rulle. */
  position: fixed; top: var(--topbar-h, 60px); right: var(--sbar-gap, 0px);
  z-index: 8; display: flex; align-items: flex-start;
  /* Hoejden skal ALTID holde sig inden for skaermen, uanset hvor mange opgaver
     eller sensorer der er. vh-enheder tager ikke hoejde for sidens zoom, saa vi
     dividerer med --ui-zoom praecis som .det-card goer. */
  height: calc((100vh / var(--ui-zoom, 1)) - var(--topbar-h, 60px));
  max-height: calc((100vh / var(--ui-zoom, 1)) - var(--topbar-h, 60px));
  min-height: 0;
  transition: right .2s ease, left .2s ease;
}
/* LUKKET: KUN kortet skal ud af skaermen - haandtaget skal staa HELT inde ved
   kanten. Skuffen er (haandtag 30 + kort w) bred; skubbes den kortets bredde ud,
   staar praecis haandtaget tilbage. (Foer laa der +gap+4 oveni, og saa roeg de
   sidste ~16 px af haandtaget - og dermed teksten - ud over skaermkanten.) */
.sbar.inde { right: calc(-1 * var(--sbar-w, 320px)); }
.sbar { --sbar-w: 320px; --sbar-gap: 0px; }
/* Haandtaget: samme flig-look som de andre skuffer - uigennemsigtigt. */
.sbar-tab {
  flex: 0 0 auto; width: 32px; cursor: pointer; touch-action: none;
  color: var(--ink-soft);
  /* PLADE-HAANDTAG (Christian 27/8: "3d kant ... ligner mere en plade"): let top-
     til-bund gradient + top/bund inder-highlight + ydre skygge, saa fligen stikker
     ud som en fysisk plade. Accent-stribe paa kanten mod kortet; ydre hjoerner
     rundede mod indholdet. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .12)), var(--app-bg);
  border: 0; border-left: 3px solid var(--accent);
  padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  align-self: center; border-radius: 13px 0 0 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .22),
    -7px 0 18px rgba(2, 10, 20, .42);
}
.sbar-tab:hover { color: var(--ink); }
.sbar-tab-txt {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.sbar-chev { font-size: 15px; line-height: 1; transition: transform .2s ease; }
.sbar:not(.inde) .sbar-chev { transform: rotate(180deg); }
.sbar-card {
  /* SELV samme loft som skuffen: med align-items:flex-start straekkes barnet
     ikke, og uden sit eget max-height voksede kortet ud over skaermkanten naar
     der var mange opgaver (maalt: 150-650 px uden for skaermen). */
  height: 100%; max-height: 100%;
  width: var(--sbar-w); display: flex; flex-direction: column; min-height: 0;
  /* PLADE-PANEL (Christian 27/8). Let lodret gradient-sheen + en lys bevel-stribe
     lige inden for en moerk groove-linje paa inder-kanten + lagdelt ydre skygge =
     panelet ser HAEVET ud, ikke fladt paasvejset. Stadig INGEN runding paa selve
     kortet (Christian 19/8: rundede hjoerner gav huller ved topbar/skaermkant) -
     plade-effekten kommer fra bevel+skygge, ikke fra runding. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 15%,
                    rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, .05)),
    var(--surface);
  border-radius: 0; overflow: hidden;
  border: 0; border-left: 1px solid rgba(0, 0, 0, .42);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .05),
    -18px 0 50px rgba(2, 10, 20, .50), -5px 0 16px rgba(2, 10, 20, .42);
}
.sbar-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
.sbar-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; }
.sbar-side {
  margin-left: auto; width: 28px; height: 26px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink-soft); font-size: 15px;
  transition: color .12s, border-color .12s, background .12s;
}
.sbar-side:hover { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.sbar-body {
  overflow-y: auto; min-height: 0; padding: 12px;
  display: flex; flex-direction: column; gap: 14px;
  /* Selve rullebjaelken skjules (Christian) - RULNINGEN bliver: indholdet kan
     stadig vaere laengere end skaermen, man ruller bare med hjul/traek uden en
     graa stribe i kanten. overscroll-behavior holder rulningen inde i panelet,
     saa siden bagved ikke begynder at rulle med naar man rammer bunden. */
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* aeldre Edge */
  overscroll-behavior: contain;
}
.sbar-body::-webkit-scrollbar { width: 0; height: 0; }   /* Chrome/Edge/Safari */
.sbar-sec { display: flex; flex-direction: column; }
.sbar-sec.hidden { display: none; }

/* ---- KOMPAKT I SIDEBAREN ----
   Maalet er at ALT kan staa uden at rulle. Kortene er de samme elementer som
   andre steder i appen, saa vi strammer dem KUN her inde (scoped til .sbar-body)
   - fuldskaerms-visningerne roeres ikke. */
.sbar-body .cd-meta { gap: 1px 10px; font-size: 12px; }
.sbar-body .cd-meta > * { padding-top: 1px; padding-bottom: 1px; }
.sbar-body .cd-name { font-size: 14.5px; margin-bottom: 2px; }
.sbar-body .cd-head { margin-bottom: 4px; }
.sbar-body .cb-edit { padding: 2px 8px; font-size: 11px; }
/* Sensor-dybderne: stadig store tal, men mindre luft omkring. */
.sbar-body .sd-row { padding: 5px 0; }
.sbar-body .sd-val { font-size: 22px; line-height: 1.15; }
/* FAST RAEKKEHOEJDE. Tallene skifter hele tiden - "9.4 m" bliver "27.7 m ↓",
   en sensor falder ud og kommer igen - og hver gang aendrede kortets hoejde sig,
   saa Today's Program hoppede op og ned under det. Raekken har nu sin hoejde
   uanset hvad der staar i den (tallene er i forvejen tabular-nums, saa de heller
   ikke flytter sig sidevaerts). */
.sbar-body .sd-row { min-height: 40px; }
/* Programmet tager resten af pladsen og ruller i SIG SELV. Saa kan intet over
   det skubbe det ud af skaermen, uanset hvor mange sensorer eller opgaver der er. */
.sbar-sec[data-sec="progDrBody"] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sbar-sec[data-sec="progDrBody"] > .prog-dr-card { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.sbar-sec[data-sec="progDrBody"] .pd-list { overflow-y: auto; min-height: 0; scrollbar-width: none; }
.sbar-sec[data-sec="progDrBody"] .pd-list::-webkit-scrollbar { width: 0; height: 0; }
.sbar-sec[data-sec="ctdBody"] { flex: 0 0 auto; }
.sbar-body .sd-lbl { font-size: 10.5px; }
.sbar-body .sd-full { margin-top: 6px; padding: 6px 10px; font-size: 11.5px; }
/* Opgave-raekker: lavere, men stadig til at ramme med en finger. */
.sbar-body .pd-list { gap: 4px; }
.sbar-body .pd-task { padding: 4px 7px; }   /* markup hedder .pd-task */
.sbar-body .pd-head { margin-bottom: 4px; }
.sbar-body .pd-label { font-size: 10.5px; }
.sbar-body .prog-pill { font-size: 11px; padding: 2px 8px; }
.sbar-body .pd-time { font-size: 12px; }
/* TYND SKILLESTREG mellem afsnittene (Christian) - saa de laeses som adskilte
   blokke og ikke som én lang liste. Kun MELLEM, aldrig oeverst. */
/* INGEN SKILLESTREG mellem afsnittene. Kortene har hver sin kant og sin egen
   flade - stregen delte noget der allerede var delt, og kostede 8 px pr.
   afsnit paa den skaerm hvor der er mindst plads. */
.sbar-sec + .sbar-sec { padding-top: 8px; }
.sbar-sec-h {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 6px 2px;
}
/* Kortene er flyttet ind fra skufferne - de skal ikke laengere se ud som
   selvstaendige svaevende kort, men som afsnit i sidebaren. */
/* Kortene skal POPPE fra sidebarens bund: et trin lysere flade + synlig kant +
   en let skygge, saa hvert kort ligger tydeligt ovenpaa (Christian). */
.sbar-body .panel {
  margin: 0; border-radius: 10px; padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  box-shadow: 0 2px 8px rgba(2, 10, 20, .35);
}
.sbar-body .ctd-card, .sbar-body .cruise-card, .sbar-body .prog-dr-card { width: auto; }

/* ---- VENSTRE side: spejlvendt ---- */
.sbar.sbar-left { right: auto; left: var(--sbar-gap, 0px); flex-direction: row-reverse; }
.sbar.sbar-left.inde { left: calc(-1 * var(--sbar-w, 320px)); right: auto; }
/* Plade-haandtaget spejlvendt: accent + rundede hjoerner + skygge paa den ANDEN
   side (nu hoejre = mod indholdet). */
.sbar.sbar-left .sbar-tab {
  border-left: 0; border-right: 3px solid var(--accent);
  border-radius: 0 13px 13px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .22),
    7px 0 18px rgba(2, 10, 20, .42);
}
/* Plade-panelet spejlvendt: bevel-stribe + groove + skygge paa INDER-siden (hoejre). */
.sbar.sbar-left .sbar-card {
  border-radius: 0; border-left: 0; border-right: 1px solid rgba(0, 0, 0, .42);
  box-shadow: inset -3px 0 0 rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .05),
    18px 0 50px rgba(2, 10, 20, .52), 5px 0 16px rgba(2, 10, 20, .42);
}
.sbar.sbar-left:not(.inde) .sbar-chev { transform: rotate(0deg); }
.sbar.sbar-left .sbar-chev { transform: rotate(180deg); }
/* Ligger sidebaren til venstre, skal VNC-skuffen (der ogsaa kan ligge venstre)
   ligge OVENPAA og vaere synlig - friheden til selv at vaelge (Christian). */
.sbar-on-left .vnc-drawer-left { z-index: 12; }
/* De tre GAMLE skuffe-skaller er tomme nu (kortene er flyttet ind i sidebaren).
   De skal blive vaek - ogsaa naar renderCtd/renderState saetter hidden=false paa
   dem igen; derfor CSS og ikke kun .hidden-egenskaben. Ellers ville man se tre
   tomme faner i kanten ved siden af sidebaren. */
.sbar-moved { display: none !important; }

/* PLADS TIL SIDEBAREN.
   Den er position:fixed, saa den laa OVEN PAA indholdet: maalt daekkede den
   STOP-knappen, "Station options" og hele Attention-soejlen paa alt der ikke er
   en meget bred skaerm. En overlejring maa aldrig kunne skjule STOP.
   Derfor skubbes sidens indhold ind mens skuffen er ude. */
:root.sbar-open .tabpage { padding-right: var(--sbar-w, 320px); }
:root.sbar-open.sbar-on-left .tabpage { padding-right: 0; padding-left: var(--sbar-w, 320px); }
@media (max-width: 900px) {
  /* Paa en smal skaerm er der ikke plads til begge dele - saa laegger den sig
     over, og man lukker den naar man skal bruge knapperne. */
  :root.sbar-open .tabpage { padding-right: 0; }
  :root.sbar-open.sbar-on-left .tabpage { padding-left: 0; }
}
@media (max-width: 720px) { .sbar { --sbar-w: min(88vw, 320px); } }

/* Genvej: ✎ ved siden af aktiviteten i vaelgeren.
   NB: .prog-act-pick er en KOLONNE-flex, saa raekken her skal selv vaere en
   vandret flex hvor knappen fylder resten - ikke absolut placering (det skubbede
   ✎ ud til hoejre kant og gav vandret scrollbar). */
.prog-pick-wrap { display: flex; align-items: center; gap: 8px; }
.prog-pick-wrap .prog-pick-opt { flex: 1 1 auto; min-width: 0; }
.prog-pick-edit {
  flex: 0 0 auto; width: 34px; align-self: stretch;
  border-radius: 10px; cursor: pointer; font-size: 13px; line-height: 1;
  background: none; color: var(--ink-soft);
  border: 1px solid transparent; opacity: .45;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.prog-pick-del {
  flex: 0 0 auto; width: 34px; align-self: stretch;
  border-radius: 10px; cursor: pointer; font-size: 13px; line-height: 1;
  background: none; color: var(--ink-soft);
  border: 1px solid transparent; opacity: .45;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.prog-pick-wrap:hover .prog-pick-edit, .prog-pick-edit:focus-visible,
.prog-pick-wrap:hover .prog-pick-del, .prog-pick-del:focus-visible { opacity: 1; }
.prog-pick-edit:hover { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.prog-pick-del:hover { color: var(--danger); border-color: rgba(var(--danger-rgb), .45); background: rgba(var(--danger-rgb), .10); }
.prog-pick-edit:focus-visible { outline: none; border-color: var(--accent); }
.prog-pick-del:focus-visible { outline: none; border-color: var(--danger); }
.tg-inputs { background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 13px 15px; }
.tg-in-h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 9px; }
.tg-in { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0;
  font-size: 13px; color: var(--ink-soft); }
.tg-in b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; }
.tg-card { background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 13px 15px; }
.tg-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 5px; }
.tg-val { font-size: 25px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.tg-u { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.tg-na { color: var(--ink-soft); opacity: .55; }
.tg-sub { margin-top: 6px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }
.tg-warn { color: var(--warn); }
.tg-formulas { background: var(--input-bg); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 13px 15px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; }
.tg-formulas b { color: var(--ink); display: block; margin-bottom: 6px; font-size: 13px; }
.tg-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-soft); opacity: .85; line-height: 1.55; }

/* Station-gruppe: egen soejle (Christian), skjult naar togtet ingen grupper har. */
:root:not(.groups-active) .col-group { display: none; }
/* Centreret - baade hoved og celler - saa "Station group"-overskriften staar
   over de centrerede gruppe-piller, ikke forskudt til venstre (Christian). */
.col-group { text-align: center; white-space: nowrap; }
th.col-group { text-align: center; }
/* col-group har INGEN bredde i det faste sæt (#stationsTable .col-* summer til
   100 UDEN den, fordi den normalt er skjult). Naar togtet HAR grupper og soejlen
   vises, faar den derfor bredde 0 i table-layout:fixed -> gruppe-pillen flyder ud
   over Haul No. (tal oven i pillen). Fix: giv den plads NAAR den vises, og tag de
   procent fra de bredeste soejler, saa summen stadig er 100. */
.groups-active #stationsTable .col-group,
.groups-active #histTable   .col-group { width: 9%; }
.groups-active #stationsTable .col-id,
.groups-active #histTable   .col-id   { width: 10%; }   /* 12 -> 10 */
.groups-active #stationsTable .col-op,
.groups-active #histTable   .col-op   { width: 8%; }    /* 9 -> 8 */
.groups-active #stationsTable .col-time,
.groups-active #histTable   .col-time { width: 11%; }   /* 14 -> 11 (x2 = -6) */
/* Start-kortets gruppe-knap i tom tilstand: graa. Master/leder kan stadig klikke
   for at tilfoeje navne (stiplet kant = "tryk for at tilfoeje"); view-only er laast. */
.pf-group.pf-empty .type-pick { font-style: italic; border-style: dashed; }
.pf-group.pf-empty .type-pick:disabled { opacity: .55; cursor: default; }
.pf-group.pf-empty .type-pick:not(:disabled) { opacity: .82; cursor: pointer; }
.pf-group.pf-empty .type-pick:not(:disabled):hover { opacity: 1; border-color: var(--accent); }
.pf-group.pf-empty .type-pick .tp-face { font-weight: 500; }
/* Tilfoej-navn-raekken i gruppe-vinduet */
.group-new { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; }
.group-new input { padding: 11px 12px; font-size: 14px; background: var(--input-bg);
  color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.group-new-msg { min-height: 16px; font-size: 12.5px; color: var(--ok, #7ff0c0); font-weight: 600; margin-top: 6px; }

/* =====================================================================
   DANA LIVE "By instrument" v2 (Christian): to STORE roser (vind+kurs, T-S
   fjernet) + sensor-kort opdelt i kategorier man BLADRER imellem med pile,
   én ad gangen, saa kortene bliver store.
   ===================================================================== */
/* Stoerre roser naar der kun er to */
.dl-viz-2 .dl-viz-card { flex: 1 1 430px; }
/* De to STORE kort (vind + kurs) er meget brede, og indholdet klistrede til
   venstre kant med et stort tomt felt til hoejre: .dl-wind-info havde flex:1 og
   aad hele bredden. Her lader vi rosen + teksten fylde det de skal og centrerer
   dem som ét par i kortet. Kun de store kort - de smaa er uaendrede. */
.dl-wind-big { padding: 4px 6px; justify-content: center; }
.dl-wind-big .dl-wind-info { flex: 0 1 auto; max-width: 420px; }
.dl-wind-big .dl-wind-rose { width: 160px; height: 160px; }
.dl-wind-big .dl-wind-spd { font-size: 42px; }
.dl-wind-big .dl-wind-spd span { font-size: 15px; }
.dl-wind-big .dl-nav-big { font-size: 40px; }
.dl-wind-big .dl-wind-dir, .dl-wind-big .dl-nav-line { font-size: 15.5px; }
.dl-wind-big .dl-wind-h { font-size: 12px; }

/* Kategori-faner (spring direkte til en kategori) */
.dl-cat-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.dl-cat-tab { background: rgba(120,160,200,.10); border: 1px solid var(--line);
  color: var(--ink-soft); border-radius: 999px; padding: 6px 14px; font-size: 12px;
  font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; }
.dl-cat-tab:hover { border-color: var(--accent); color: var(--ink); }
.dl-cat-tab.on { background: rgba(var(--accent-rgb),.20); border-color: rgba(var(--accent-rgb),.55); color: var(--ink); }
.dl-cat-n { opacity: .65; margin-left: 3px; }

/* Bladre-siden: pil | kort | pil */
.dl-cat-wrap { display: flex; align-items: stretch; gap: 10px; }
.dl-cat-wrap .dl-navbtn { height: auto; align-self: stretch; }
.dl-cat-page { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-cat-h { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 800; margin: 2px 0 9px; }
/* STORE kort i den viste kategori */
.lay-instruments .dl-cat-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; flex: 1; }
.lay-instruments .dl-cat-cards .dl-card { height: 152px; min-height: 152px; padding: 13px 17px; }
.lay-instruments .dl-cat-cards .dl-value { font-size: clamp(24px, 30cqh, 44px); }
.lay-instruments .dl-cat-cards .dl-name { font-size: 14px; }

/* DanaView: HELE flisen er traek-haandtag (Christian). Grab-cursor viser at man
   kan tage fat; under traek "loeftes" kortet med skygge + accent-kant. */
.dv-tile { cursor: grab; }
.dv-tile .dv-canvas { cursor: inherit; }
body.dv-dragging-active { cursor: grabbing; }
.dv-tile.dv-lift {
  transform: scale(1.045);
  box-shadow: 0 20px 48px rgba(0,0,0,.55), 0 0 0 2px var(--accent) !important;
  z-index: 6; opacity: .97;
}

/* Inline "+ New group" i masse-tildel-popup + omdoeb-felt i gruppe-vinduet */
.bulk-newrow { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.bulk-newrow input { flex: 1; padding: 9px 12px; background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.grp-edit-in { flex: 1; padding: 8px 11px; background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 8px; font: inherit; }

/* DANA LIVE "By instrument" v3 (Christian): roser + grafer CENTRERET, større
   grafer der squeezer sammen ved flere sensorer, + slide-transition ved skift. */
.dl-wind-big { justify-content: center; }
.dl-viz-2 { justify-content: center; }
/* Kategori-siden: kortene fylder bredden (auto-fit -> faa kort = store, mange =
   squeezer), altid centreret vandret OG lodret, med større grafer. */
.lay-instruments .dl-cat-cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content: center; align-content: center;
  gap: 14px; flex: 1;
}
.lay-instruments .dl-cat-cards .dl-card { height: 222px; min-height: 222px; padding: 16px 20px; }
.lay-instruments .dl-cat-cards .dl-value { font-size: clamp(26px, 25cqh, 46px); }
.lay-instruments .dl-cat-cards .dl-name { font-size: 15px; }
.dl-cat-bar { justify-content: center; }
/* Slide-transition mellem kategorier. Retningen sættes i JS (--dl-cat-dir). */
@keyframes dlCatIn {
  from { opacity: 0; transform: translateX(var(--dl-cat-dir, 20px)); }
  to   { opacity: 1; transform: none; }
}
.dl-cat-page { animation: dlCatIn .22s ease; }
@media (prefers-reduced-motion: reduce) { .dl-cat-page { animation: none; } }

/* Farvede redskabskoder i ui.js-dropdowns (Christian: nemmere at læse + ryddede
   linjer). Kun gear-lister (.psel-tc, sat naar option har data-tc): FAST kode-
   kolonne saa koder og forklaringer flugter, + fed FARVET kode pr. redskab. */
/* Gear-lister: KUN koden (Christian: beskrivelsen gjorde kortet mega bredt og var
   ikke noedvendig - koderne kendes udenad, og HELE navnet ligger stadig i hover-
   tooltip'en paa raekken). Koden fylder raekken, flueben yderst til hoejre. */
.psel-opt.psel-tc { grid-template-columns: 1fr 14px; padding-top: 8px; padding-bottom: 8px; }
.psel-tc .psel-o-d { display: none; }
.psel-tc .psel-o-t { font-weight: 800; letter-spacing: .01em; }
.psel-o-t.tc-0 { color: var(--tc0); } .psel-o-t.tc-1 { color: var(--tc1); }
.psel-o-t.tc-2 { color: var(--tc2); } .psel-o-t.tc-3 { color: var(--tc3); }
.psel-o-t.tc-4 { color: var(--tc4); } .psel-o-t.tc-5 { color: var(--tc5); }
.psel-o-t.tc-6 { color: var(--tc6); } .psel-o-t.tc-7 { color: var(--tc7); }
.psel-o-t.tc-none { color: var(--ink-soft); }

/* Operatoer-lister (.psel-oc, sat naar option har data-oc): initialerne som
   FARVET PILLE (--op-c), praecis som operatoer-vaelgeren paa start-kortet -
   ikke som graa tekst (Christian: manglede i skuffens dropdown). */
.psel-opt.psel-oc { grid-template-columns: 78px minmax(0, 1fr) 14px; padding-top: 8px; padding-bottom: 8px; }
.psel-o-pill {
  justify-self: start; padding: 2px 9px; border-radius: 999px;
  font-weight: 800; letter-spacing: .03em; text-align: center;
  color: var(--op-c, var(--accent));
  border: 0;
  background: color-mix(in srgb, var(--op-c, var(--accent)) 22%, #0a1a2b);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--op-c, var(--accent)) 70%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .psel-o-pill { border-color: currentColor; background: transparent; }
}

/* ---- GRAFVAEG: alle grafer fremme paa én gang -------------------------- */
/* Ligger OVER stationskortet (z 90), saa kortet bliver staaende bagved og man
   kommer tilbage til praecis den station man kom fra. */
#anGridModal { z-index: 125; }
.angrid-card { width: min(1700px, 97vw); max-height: calc(95vh / var(--ui-zoom, 1));
  display: flex; flex-direction: column; }
.angrid-hint { margin: 0 0 10px; }
/* Foden maa ikke klemmes naar listen bliver lang - ellers er udgangen vaek. */
.angrid-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.angrid-spacer { flex: 1 1 auto; }
.angrid-host { flex: 1 1 auto; overflow: auto; min-height: 0; }

/* ÉN GRAF AD GANGEN. Vaeggen med fire kort blev aldrig pæn: hvert kort blev
   formet af sit eget indhold, saa titler paa to linjer gjorde naboerne
   forskellige, og en foldet-ud tilstand oveni gav to slags stoerrelser at holde
   styr paa. Ét billede ad gangen i en FAST ramme har ingen af delene - og man
   skifter med pile man kan se, i stedet for at gaette at kortene kan klikkes. */
.angrid-stage { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center; gap: 10px; flex: 1 1 auto; min-height: 0; }
.angrid-arrow { border: 1px solid var(--line-soft); background: rgba(255,255,255,.04);
  color: var(--ink); border-radius: 12px; height: 96px; font-size: 30px; line-height: 1;
  cursor: pointer; transition: background .12s, border-color .12s; }
.angrid-arrow:hover { background: rgba(var(--accent-rgb), .14); border-color: var(--accent); }
.angrid-arrow:disabled { opacity: .25; cursor: default; background: transparent;
  border-color: var(--line-soft); }

/* Rammen er FAST. Grafen fylder den, uanset hvilken graf det er - saa skifter
   billedet uden at vinduet hopper. */
.angrid-host { overflow: auto; min-height: 0; }
/* Fast ramme, saa billedet ikke hopper naar man skifter graf. Kun den
   synlige graf faar hoejden - de andre er skjult af .an-hide. */
.angrid-host .an-chart:not(.an-hide) > canvas { width: 100%;
  height: min(56vh, 560px); }
.angrid-host .an-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .angrid-stage { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; }
  .angrid-arrow { height: 72px; font-size: 24px; }
}

/* ---- STROEMPROFIL --------------------------------------------------- */
.cur-wrap { display: grid; grid-template-columns: minmax(0, 480px) minmax(240px, 1fr);
  gap: 18px; align-items: start; }
@media (max-width: 900px) { .cur-wrap { grid-template-columns: 1fr; } }
.cur-fig { background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 6px; }
.cur-svg { width: 100%; height: auto; display: block; }
.cur-hint { margin: 0 0 12px; }
/* Det ENE tal nogen skal taste videre - det skal ikke ligne resten. */
.cur-key { border: 1px solid rgba(var(--accent-rgb), .38); border-radius: 12px;
  padding: 12px 14px; background: rgba(var(--accent-rgb), .07); margin-bottom: 12px; }
.cur-key-h { font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }
.cur-key-h span { text-transform: none; letter-spacing: 0; }
.cur-key-v { font-size: 25px; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.cur-key-s { font-size: 12px; color: var(--muted); margin-bottom: 9px; }
.cur-shear { border-left: 3px solid var(--line-soft); padding: 2px 0 2px 11px;
  font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.cur-shear b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cur-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Vejrlog-fanen (Weather log): resume-kort + raekke-tabel ------------ */
/* auto-FILL, ikke auto-fit: auto-fit kollapser de tomme spor og straekker
   dem der er tilbage, saa en raekke med fire kort blev bredere end en med
   fem. Med auto-fill staar sporene fast, og alle kort er lige brede.
   grid-auto-rows: 1fr goer dem lige hoeje paa tvaers af raekker. */
/* ---- SEJLENDE VENTE-INDIKATOR ------------------------------------------
   Til de faner der laeser HELE togtets raa filer (vejrlog, FerryBox) og
   derfor tager sekunder ombord. Ingen procent: serveren siger ikke hvor langt
   den er, og en bar der fyldes efter et gaet er en loegn man opdager naar den
   staar stille paa 90 %. */
.sejl {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 34px 16px 30px;
}
.sejl-hav {
  position: relative; width: min(320px, 80%); height: 74px;
  overflow: hidden; border-radius: 12px;
  background: linear-gradient(180deg, transparent 0%, transparent 52%,
    rgba(90, 169, 230, .10) 52%, rgba(90, 169, 230, .18) 100%);
}
/* Boelgerne er ét gentaget SVG-moenster der glider vandret. To lag i
   forskellig fart og hoejde giver dybde. */
.sejl-boelge {
  position: absolute; left: 0; bottom: 0; width: 200%; height: 30px;
  background-repeat: repeat-x; background-size: 120px 30px;
}
.sejl-b1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='30'><path d='M0 16 q15 -8 30 0 t30 0 t30 0 t30 0 V30 H0 Z' fill='%235aa9e6' fill-opacity='0.35'/></svg>");
  animation: sejlBoelge 3.6s linear infinite;
}
.sejl-b2 {
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='22'><path d='M0 12 q15 -7 30 0 t30 0 t30 0 t30 0 V22 H0 Z' fill='%235aa9e6' fill-opacity='0.22'/></svg>");
  animation: sejlBoelge 5.6s linear infinite reverse;
}
@keyframes sejlBoelge { from { transform: translateX(0); }
                        to   { transform: translateX(-120px); } }
/* Skibet sejler frem og tilbage OG vipper - to bevaegelser, saa det ikke
   ligner et ikon der glider paa en skinne. */
.sejl-skib {
  position: absolute; bottom: 20px; left: 50%; color: var(--ink, #dbe7f3);
  opacity: .92; animation: sejlKryds 6.4s ease-in-out infinite;
}
.sejl-skib svg { display: block; animation: sejlVip 2.4s ease-in-out infinite; }
@keyframes sejlKryds {
  0%   { transform: translateX(-118px); }
  50%  { transform: translateX(74px); }
  100% { transform: translateX(-118px); }
}
@keyframes sejlVip {
  0%, 100% { transform: translateY(0) rotate(-3.5deg); }
  50%      { transform: translateY(3px) rotate(3.5deg); }
}
/* Har nogen bedt om ro, staar skibet stille - men boelgerne bliver, saa
   feltet ikke ser tomt ud. */
@media (prefers-reduced-motion: reduce) {
  .sejl-boelge, .sejl-skib, .sejl-skib svg { animation: none; }
  .sejl-skib { transform: translateX(-22px); }
}
.sejl-t { font-size: 13.5px; font-weight: 600; color: var(--ink, #dbe7f3); }
.sejl-s {
  font-size: 11.5px; color: var(--ink-soft, #93a7bd);
  text-align: center; max-width: 42ch; line-height: 1.5;
}

/* Hele-togtet-til-Excel: én linje over listen. Farven skifter naar der er
   hentet - og bliver gul hvis der er kommet stationer til siden, for en kopi
   der er to stationer bagud ligner en frisk kopi. */
.scst-hent {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.scst-hent-ik { font-size: 16px; line-height: 1.2; opacity: .85; }
.scst-hent-t { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }
.scst-hent-t b { color: #f0c674; }
/* Navnet paa udtraekket staar som overskrift, ikke som advarsel - det er
   almindelig tekst, ikke "der er noget galt". */
.scst-hent-t b.scst-hent-h {
  display: block; color: var(--ink); font-size: 12.5px; font-weight: 700;
  margin-bottom: 1px;
}
.scst-hent-v { font-style: normal; opacity: .75; }
.scst-hent.er-hentet { border-color: rgba(61, 220, 151, .35); }
.scst-hent.er-bagud { border-color: rgba(214, 158, 46, .5);
  background: rgba(214, 158, 46, .08); }

/* ---- TIDSZONE I STATIONSLISTEN ----------------------------------------
   UTC er standard og ser ud som resten. Dansk tid er GUL - samme farve som
   "Danish time" paa Today's Program - saa gul betyder det samme overalt:
   det her er ikke UTC. */
/* OMSKIFTER I KOLONNEHOVEDET. Begge zoner staar der med en plade bag den
   aktive - saa man kan se at der ER et valg, og hvad alternativet hedder.

   Pladens farve baerer betydningen: blaa = UTC (husets standard), gul = dansk
   tid (samme gule som "Danish time" paa Today's Program). Zonen kan aflaeses
   paa farven alene, tvaers gennem rummet. */
.tz-sw {
  position: relative; display: inline-flex; align-items: stretch;
  margin-left: 6px; padding: 2px; border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line-soft, rgba(255, 255, 255, .13));
  vertical-align: 1px; font: inherit; line-height: 1;
  transition: border-color .14s;
}
.tz-sw:hover { border-color: var(--line, rgba(255, 255, 255, .26)); }
.tz-sw:focus-visible {
  outline: 2px solid var(--accent, #5aa9e6); outline-offset: 2px;
}
.tz-sw b {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 2px 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em;
  color: var(--ink-faint, rgba(255, 255, 255, .45));
  transition: color .14s;
}
/* Pladen glider mellem de to - det er den bevaegelse der goer at man forstaar
   det er ét valg med to tilstande og ikke to knapper. */
.tz-sw-plade {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px); border-radius: 999px;
  background: linear-gradient(180deg, #5aa9e6, #3d84bd);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform .16s ease, background .16s ease;
}
.tz-sw b:first-of-type { color: #08151f; }        /* UTC aktiv */
.tz-sw.er-dk .tz-sw-plade {
  transform: translateX(100%);
  background: linear-gradient(180deg, #e8c26a, #d69e2e);
}
.tz-sw.er-dk b:first-of-type { color: var(--ink-faint, rgba(255,255,255,.45)); }
.tz-sw.er-dk b:last-of-type { color: #2a1e05; }   /* DK aktiv */
@media (prefers-reduced-motion: reduce) {
  .tz-sw-plade { transition: none; }
}
/* Selve tallene faar samme tone naar de ikke er UTC. En kolonne der ser ud
   som altid, men indeholder noget andet, er farlig. */
body.tid-dk td.col-time { color: #f0c674; }
body.tid-dk th.col-time { color: #f0c674; }

/* "Danish time" i programmets hoved. Resten af huset er UTC - saa den ene
   undtagelse skal staa der hvor man laeser tiden, ikke i en note nedenunder. */
.prog-tz {
  margin-left: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(214, 158, 46, .16); border: 1px solid rgba(214, 158, 46, .4);
  color: #f0c674; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}

.vl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  grid-auto-rows: 1fr; gap: 10px; margin-bottom: 12px; }
.vl-card { background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 11px 13px; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; }
/* Underteksten skubbes ned, saa tallene flugter selv naar én mangler sin. */
.vl-card .vl-s { margin-top: auto; padding-top: 2px; }
/* FARVEN SIGER KILDEN. En tynd stribe i toppen: luft laeses af
   vejrstationen, vind og kurs af navigationen, taellinger er vores egne. */
.vl-card { position: relative; overflow: hidden; }
.vl-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kort-stribe, transparent);
}
.vl-card.k-luft   { --kort-stribe: #5aa9e6; }
.vl-card.k-vind   { --kort-stribe: #3ddc97; }
.vl-card.k-skib   { --kort-stribe: #d68910; }
.vl-card.k-taelle { --kort-stribe: #8e7cc3; }
.vl-h { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.vl-v { font-size: 21px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.vl-s { font-size: 11px; color: var(--ink-soft); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.vl-act { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* HOEJDEN SKAL DELE MED UI-ZOOM (samme faelde som skufferne og
   analysepanelet): 44vh uden deling bliver hoejere end panelet paa en zoomet
   skaerm. Og linjen UNDER tabellen skal have luft - uden den klaebte
   "Read from: mettot.dat ..." op ad tabellens bundkant og saa ud som om
   teksten laa oven i raekkerne (Christian 1/9). */
.vl-tbl-wrap { max-height: calc(44vh / var(--ui-zoom, 1)); overflow: auto;
  border: 1px solid var(--line-soft); border-radius: 10px; }
.vl-tbl-wrap + .hint { margin-top: 12px; line-height: 1.6; }
.vl-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.vl-tbl th { position: sticky; top: 0; background: var(--surface-2);
  text-align: center; padding: 7px 10px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); z-index: 1; }
.vl-tbl td { padding: 5px 10px; border-top: 1px solid var(--line-soft);
  white-space: nowrap; text-align: center; }
.vl-tbl tbody tr:hover td { background: var(--surface-3); }

/* ---- Arbejds-toast: serveren bygger noget stort (zip, rapport) ----------
   Christian 28/8: MST-zippen tog 10-20 s uden livstegn, saa den blev bygget
   TRE gange i gen-klik ("saa man ikke tror det er frosset"). En loebende
   bjaelke = "der arbejdes", og kalderen laaser mod gen-klik imens. */
.work-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 420; min-width: 340px; max-width: 92vw;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sh-4); padding: 13px 16px; }
.work-toast .wt-t { font-size: 13px; color: var(--ink); margin-bottom: 9px; }
.work-toast .wt-bar { height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--accent-rgb), .15); position: relative; }
.work-toast .wt-bar::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 36%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  animation: wtSlide 1.15s ease-in-out infinite; }
@keyframes wtSlide { 0% { left: -36%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .work-toast .wt-bar::after { animation: none; width: 100%; left: 0; opacity: .5; }
}

/* Spoergsmaalstegnet ved "Build the averages": den lange forklaring ligger bag
   det, saa den korte besked kan staa fremme. Den der er ny paa opgaven folder
   den ud; de andre ser den aldrig igen. */
.anclean-help { border: 1px solid var(--line-soft); background: transparent;
  color: var(--muted); border-radius: 999px; width: 20px; height: 20px; padding: 0;
  font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; margin-left: 4px;
  vertical-align: baseline; }
.anclean-help:hover, .anclean-help.on { border-color: var(--accent); color: var(--accent); }
.anclean-more { display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--line-soft); color: var(--muted); }
.anclean-more[hidden] { display: none; }

/* ---- SCANMAR-PANEL: data til venstre, grafer til hoejre --------------- */
/* Paa en 24-27" skaerm er der plads til begge dele, og saa er det ogsaa dér
   beslutningen hoerer hjemme: man ser kurven rette sig i det oejeblik man tager
   et tal ud. Under 1400 px falder de under hinanden - tabellen foerst. */
/* EGET NAVN. ".antbl-split" fandtes allerede - den er True/Filtered-visningens
   to tabeller side om side. Min regel stod sidst og overtog den, saa jeg var
   ved at braekke den anden visning uden at roere den. Samme faelde som
   .antbl-card. To ting med samme navn er ikke en stilfejl - det er en
   tidsindstillet bombe. */
.antbl-panes { display: grid; grid-template-columns: 1fr; gap: 14px; min-height: 0;
  flex: 1 1 auto; }
/* TO SPALTER NAAR KORTET HAR PLADS - ikke naar skaermen har.
   "@media (min-width: 1400px)" maaler den SYNLIGE skaerm, men layoutet regner i
   CSS-pixels, og fladen koerer med zoom 0.8. Paa en 1280-skaerm har kortet 1600
   CSS-px at brede sig i - rigeligt til to spalter - men mediereglen saa 1280,
   sagde nej, og saa laa graferne under tabellen i 262 px hoejde. Container-
   forespoergslen spoerger kortet selv, i kortets egen enhed, saa zoom ikke kan
   snyde den. Mediereglen bliver staaende som reserve. */
@container antblCard (min-width: 1150px) {
  .antbl-panes { grid-template-columns: minmax(560px, 46%) minmax(0, 1fr); }
}
@media (min-width: 1400px) {
  .antbl-panes { grid-template-columns: minmax(560px, 46%) minmax(0, 1fr); }
}
.antbl-panes > .antbl-scroll { min-height: 0; }
.antbl-graphs { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.02);
  padding: 10px 12px 12px; }
.antbl-gh { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; flex: 0 0 auto; }
/* ÉN graf ad gangen, og den FYLDER sit felt. Da grafen selv finder sin
   hoejde, er der ikke noget at "fitte" - derfor er Fit-knappen vaek. Den
   loeste et problem der kun fandtes fordi laerredet havde en fast hoejde der
   ikke passede til vinduet. */
.antbl-gslot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; }
.antbl-gslot .an-charts { flex: 1 1 auto; min-height: 0; display: flex;
  flex-direction: column; }
/* Fanerne til at skifte graf hoerer til her - de er ikke stoej naar der kun er
   én graf fremme; de er DEN maade man skifter paa. */
.antbl-gslot .an-tabs { flex: 0 0 auto; }
.antbl-gslot .an-chart { margin: 0; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; }
.antbl-gslot .an-chart.an-hide { display: none; }
/* Laerredet tager resten. draw() laeser clientHeight, saa det skal komme fra
   layoutet - ikke fra et tal i stilarket. */
/* "flex: 1 1 0", IKKE "auto". Et <canvas> har en egen hoejde-ATTRIBUT, og
   tegneren saetter den til den hoejde laerredet lige blev maalt til. Med
   flex-basis:auto bliver den maalte hoejde til laerredets udgangspunkt - altsaa
   et GULV. Saa opstod der en envejs-loekke: flere kolonner -> venstre spalte
   bliver hoejere -> grafspalten straekkes med -> laerredet tegnes hoejere ->
   attributten vokser -> og naar kolonnerne blev slaaet fra igen, kunne raekken
   ikke falde tilbage. Kortet beholdt sin stoerste hoejde for altid.
   Med basis 0 bidrager laerredet ikke med sin egen hoejde; det faar den plads
   der er tilovers, og min-height er det eneste gulv. */
.antbl-gslot .an-chart > canvas { width: 100%; flex: 1 1 0; min-height: 220px; }

/* Fit/Fill/Stretch-knappen laaner .vnc-d-max, som er en IKON-knap: 30 px bred,
   ingen padding. Men den holder et ORD - og "Stretch" er syv bogstaver, saa
   teksten floed ud af sin egen kasse.
   FAST bredde efter det laengste ord, ikke auto: ellers skifter knappen
   stoerrelse hver gang man klikker (Fit -> Fill -> Stretch), og hele
   knapraekken rykker sig under fingeren mens man bruger den. */
.vnc-d-head > .vnc-d-fit,
.vnc-d-fit { width: 86px; min-width: 86px; padding: 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; }

/* Panelets ene afgoerelse. Alt andet i vinduet er noget man kigger paa eller
   piller ved; det her er det man TRYKKER paa naar man er faerdig - saa den maa
   godt fylde. */
.antbl-save { font-weight: 700; padding: 9px 18px; }
.antbl-save:disabled { opacity: .6; cursor: default; }

/* Knapperne grupperet efter HVAD de handler om: tabellens vaerktoejer over
   tabellen, grafernes over graferne, og den ene afgoerelse - gem - nede ved
   det man har lavet. */
/* Wrap: titel + tre knapper kan ikke staa paa én linje i en smal spalte. Uden
   den skubber knapperne raekken bredere end panelet i stedet for at bryde. */
.antbl-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.antbl-gh-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.antbl-gh-a { flex: 0 0 auto; display: flex; gap: 7px; }
.antbl-done { font-weight: 600; padding: 7px 20px; }

/* GEM-KNAPPENS TILSTAND. Groen og fremhaevet naar der er noget at gemme;
   daempet og rolig naar skaermen og serveren er enige. Man skal kunne se
   forskel paa tvaers af rummet - det er hele pointen med at vise tilstanden. */
.antbl-save.is-dirty { background: var(--ok, #2ecc71); border-color: var(--ok, #2ecc71);
  color: #04220f; }
.antbl-save.is-clean { background: transparent; border-color: var(--line-soft);
  color: var(--muted); font-weight: 600; }
.antbl-save.is-clean:hover { border-color: var(--line); color: var(--ink-soft); }

/* STATUSLINJEN paa Scanmar-fanen. Erstatter trin-striben: der er ikke to trin
   mere, saa der er heller ikke noget at nummerere. Én linje der siger hvad
   tilstanden er, og én knap der aabner panelet. */
.anwiz-now { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.anwiz-now-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.anwiz-now-t b { color: var(--ink); font-size: 14px; }
.anwiz-now-s { color: var(--muted); font-size: 12.5px; }
.anwiz-ok { color: var(--ok, #2ecc71); font-weight: 700; }
.anwiz-open { flex: 0 0 auto; font-weight: 700; padding: 9px 18px; }

/* SCANMAR-FANEN ER EN DOER. Én knap midt i fladen, og én linje der siger om
   tallene er tjekket - det er dét man vil vide foer man aabner. Alt det egentlige
   arbejde sker i panelet, saa fanen skal ikke vaere en halv udgave af det. */
/* KUN stationskortets doer. Klassen .sc-door bruges OGSAA af Scanmar Lives
   doerpaneler, og "align-items:center" skrumpede deres grafer til bredden af
   deres eget indhold - derfor stod de som frimaerker i et bredt panel. */
/* Placeringen er en MARGIN, ikke en beregnet hoejde (Christian 28/8, tredje
   forsoeg): baade 62vh og 52vh/zoom kunne overstige panelets faktiske plads
   paa zoomede skaerme og fremkaldte en rullebjaelke om ingenting. En klampet
   topmargin kan ALDRIG goere indholdet hoejere end panelet - kortet staar
   behageligt under midten af synsfeltet, og rullebjaelken er vaek. */
.sc-doerkort { display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-top: clamp(16px, 10vh, 140px); text-align: center; }
.sc-door-btn { font-size: 17px; font-weight: 700; padding: 18px 40px; border-radius: 14px;
  letter-spacing: .01em; }
.sc-door-s { font-size: 13px; color: var(--muted); }
.sc-door-s.is-ok { color: var(--ink-soft); }
/* #anBody bliver liggende (graferne bygges der, og panelet laaner noden) -
   men den skal ikke ses paa fanen. */
.sc-hidden { position: absolute; left: -99999px; width: 1200px; height: 800px;
  overflow: hidden; pointer-events: none; }

/* Fiskeline-fanens hoved: handlingen OEVERST TIL HOEJRE som paa Overview, og
   forklaringen under. Man skal ikke lede efter den samme slags knap et nyt sted
   paa hver fane.
   Lysere tone: den er ikke fanens ene afgoerelse - den er én af flere ting man
   kan goere, og den skal ikke raabe hoejere end de 28 Copy-knapper under den. */
.fl-top { display: flex; flex-direction: column; gap: 10px; }
.fl-top-a { display: flex; justify-content: flex-end; gap: 8px; }
.fl-top .fl-hint { margin: 0; }
.fl-pdf { background: rgba(255,255,255,.07); border-color: var(--line);
  color: var(--ink); font-weight: 600; }
.fl-pdf:hover { background: rgba(255,255,255,.13); border-color: rgba(var(--accent-rgb), .6); }

/* Versionen staar under bylinen, ikke bagefter den paa samme linje. */
.logo .ver-badge { display: inline-block; margin-top: 3px; }

/* ---- Print station pack ------------------------------------------------
   Togtlederen skal kunne FINDE den uden at lede. Den er accent-farvet (ikke
   groen: Save i samme panel er groen, og to groenne knapper ved siden af
   hinanden er to knapper man skal laese for at skelne). Pulsen er langsom og
   svag - nok til at trakke oejet, ikke nok til at irritere en der sidder med
   panelet aabent i en time. Slukkes helt for dem der har bedt om mindre
   bevaegelse i systemet. */
.btn.antbl-pack {
  /* Kraftigere end resten: en forloeb i stedet for én flad tone, og en ring der
     puster. Den er panelets ene udgang til papir - den maa gerne findes uden at
     man leder. */
  /* BEGGE stop staar fast. --accent-2 er ikke den samme farve i alle temaer -
     i det blaa er den #4a9cf0, og saa gik knappen fra orange til blaa og saa
     beskidt ud. Den her knap skal se ens ud uanset tema; det er dens job at
     skille sig ud fra fladen, ikke at foelge den. */
  background: linear-gradient(135deg, #ff9a5c, #e8622e);
  border-color: #ff9a5c; color: #2a0f04;
  font-weight: 800; letter-spacing: .015em; padding-inline: 15px;
  position: relative; overflow: hidden;
  animation: packBreathe 2.9s ease-in-out infinite;
}
.btn.antbl-pack:hover { filter: brightness(1.07); animation-play-state: paused; }
.btn.antbl-pack:focus-visible { outline: 2px solid #ff9a5c; outline-offset: 2px; }
/* Et lysstroeg der loeber igennem én gang i minuttet. Det er dét der faar
   knappen til at blive set af én der scanner panelet, uden at der staar noget
   og blinker. */
.btn.antbl-pack::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  animation: packSheen 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes packBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 76, .0), 0 2px 10px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 138, 76, .30), 0 2px 10px rgba(0,0,0,.35); }
}
/* Lysstroeget loeber oftere nu (hvert 6. sekund) og er lidt bredere. */
@keyframes packSheen {
  0%, 70%  { transform: translateX(0); }
  88%, 100%{ transform: translateX(330%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.antbl-pack { animation: none; }
  .btn.antbl-pack::after { display: none; }
}

/* Valgene i popup'en. Radioknapper ville vaere forkert: han vil normalt have
   ÉN graf, men skal kunne tage to med uden at aabne printeren to gange. */
.scpk-list { display: grid; gap: 6px; margin: 8px 0 2px; }
.scpk-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer;
  background: var(--input-bg);
}
.scpk-row:hover { border-color: var(--accent); }
.scpk-row input { flex: 0 0 auto; margin: 0; }
.scpk-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scpk-sep { border: 0; border-top: 1px solid var(--line-soft); margin: 12px 0 8px; }

/* ---- Knapper med hver sin rolle -----------------------------------------
   Striben havde fire knapper i nøjagtig samme blå. ".btn.ghost" fandtes slet
   ikke i stilarket, saa "ghost" var et navn uden virkning - de tre var
   identiske, og man skulle LAESE dem for at vaelge. Nu baerer farven rollen:
   dæmpet = et lille skridt tilbage, gul = fortryd til programmets forslag,
   roed = fjern alt mit arbejde, groen = den ene handling der gemmer. */
.btn.ghost {
  background: rgba(255,255,255,.03); border-color: var(--line-soft);
  color: var(--ink-soft); box-shadow: none;
}
.btn.ghost:hover { background: rgba(255,255,255,.07); color: var(--ink); }

/* Gul: fører tilbage til programmets forslag - man mister sine egne klik. */
.btn.revert {
  background: rgba(var(--warn-rgb), .12); border-color: rgba(var(--warn-rgb), .45);
  color: var(--warn); box-shadow: none; font-weight: 600;
}
.btn.revert:hover { background: rgba(var(--warn-rgb), .2); }

/* Rød KONTUR, ikke fyldt: den sletter markeringer, ikke data. En fyldt rød
   knap ved siden af Save ville se ud som om den kunne smide maalinger vaek. */
.btn.wipe {
  background: rgba(var(--danger-rgb, 217,107,90), .1);
  border-color: rgba(var(--danger-rgb, 217,107,90), .45);
  color: var(--danger); box-shadow: none; font-weight: 600;
}
.btn.wipe:hover { background: rgba(var(--danger-rgb, 217,107,90), .18); }

/* Grøn KONTUR til Columns/Download CSV. Save er fyldt groen - den ene handling
   der aendrer noget. De her to henter kun noget ud, saa samme familie, lettere
   vaegt: man kan se at de hoerer sammen uden at forveksle dem med Save. */
.btn.tool {
  background: rgba(var(--ok-rgb), .1); border-color: rgba(var(--ok-rgb), .42);
  color: var(--ok); box-shadow: none; font-weight: 600;
}
.btn.tool:hover { background: rgba(var(--ok-rgb), .18); }

/* ---- "Hvad er grafen tegnet paa" ---------------------------------------
   Pillen staar ved grafens titel. Den skal kunne ses paa en meters afstand -
   en udskrift af uafklarede tal er farligere end ingen udskrift. */
.an-pill {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.an-pill:empty { display: none; }
.an-pill[data-tone="warn"] {
  color: var(--warn); background: rgba(var(--warn-rgb), .14);
  border: 1px solid rgba(var(--warn-rgb), .5);
}
.an-pill[data-tone="ok"] {
  color: var(--ok); background: rgba(var(--ok-rgb), .13);
  border: 1px solid rgba(var(--ok-rgb), .45);
}

/* ---- Hvor staar "hvad er grafen tegnet paa"? ---------------------------
   ÉT sted pr. skaerm. I panelet er det spaltens hoved, hvor den staar i
   oejenhoejde med Print-knapperne - dér traeffes beslutningen om at sende
   noget til printeren. Pillen ved grafens titel skjules derfor HER, men kun
   her: paa stationskortet findes spalte-hovedet ikke, og saa er den ved
   titlen den eneste der er. */
.antbl-gslot .an-pill { display: none; }

/* Spalte-hovedet er ikke laengere en graa etiket, men selve mærkatet. */
#antblGhT {
  flex: 0 1 auto; text-transform: uppercase; letter-spacing: .06em;
  font-size: 10px; font-weight: 700; padding: 4px 11px; border-radius: 99px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#antblGhT[data-tone="warn"] {
  color: var(--warn); background: rgba(var(--warn-rgb), .14);
  border: 1px solid rgba(var(--warn-rgb), .5);
}
#antblGhT[data-tone="ok"] {
  color: var(--ok); background: rgba(var(--ok-rgb), .13);
  border: 1px solid rgba(var(--ok-rgb), .45);
}

/* ---- Én farve pr. kanal ------------------------------------------------
   --ch saettes pr. kort og pr. soejleoverskrift af chColor(). Samme farve
   staar paa kurven. Foer var kortene tre ens blaa klodser, og man skulle laese
   overskriften for at vide hvilken soejle et kort hoerte til. */
/* IKKE border-top: ".antbl-stat.has-rule { border-color: var(--accent) }" saetter
   ALLE fire kanter, ogsaa den oeverste, og saa mistede netop de kort der HAR en
   graense deres kanalfarve - de eneste hvor man kigger mest. En inder-skygge er
   en anden egenskab og kan ikke komme i vejen for konturen. */
.antbl-stat { box-shadow: inset 0 3px 0 var(--ch, var(--line-soft)); }
.antbl-stat .antbl-stat-k { color: var(--ch, var(--muted)); }
/* Talrækken beholder sin egen vaegt - farven er til at GENKENDE paa, ikke til
   at laese tal i. Et helt kort i kanalfarve ville draebe laesbarheden. */
.antbl-table thead th.col-num { border-top: 3px solid var(--ch, transparent); }
.antbl-table thead th.col-num { color: var(--ch, var(--ink-soft)); }

/* ---- "Hvorfor saette en graense?" --------------------------------------
   Ét ikon, ikke ét pr. kort: fem vippende ikoner ved siden af hinanden er
   ikke en hjaelp, det er et myggesvaerm. */
.antbl-why { margin: -4px 0 10px; }
/* EGEN FARVE. Ikonet laante accent-farven, som ogsaa baeres af Print-knappen og
   af de kort der HAR en graense - tre forskellige ting i samme farve. Info er
   hverken en handling eller en tilstand, saa den faar sin egen kolde tone der
   ikke bruges til noget andet i panelet. */
.antbl-why-b {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 1px solid #4bb8e8; background: rgba(75, 184, 232, .16);
  color: #7fd0f5; font: 700 13px/1 Georgia, serif; font-style: italic;
  display: inline-flex; align-items: center; justify-content: center;
  animation: whyTip 5.5s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.antbl-why-b:hover, .antbl-why-b.on { background: rgba(75, 184, 232, .32); color: #d6f1ff; animation: none; }
/* Vippen: to smaa nik, og saa fem sekunders ro. Et ikon der bevaeger sig hele
   tiden bliver til tapet man holder op med at se. */
@keyframes whyTip {
  0%, 82%, 100% { transform: rotate(0deg); }
  86%  { transform: rotate(-13deg); }
  90%  { transform: rotate(10deg); }
  94%  { transform: rotate(-6deg); }
}
/* Laest én gang = holdt op med at vippe, for altid. */
#anTableModal.why-seen .antbl-why-b { animation: none; }
@media (prefers-reduced-motion: reduce) { .antbl-why-b { animation: none; } }
/* POPUP, ikke en blok der skubber. Boksen stod inde i floden og flyttede hele
   panelet ned mens den var aaben - og saa skulle man finde det lille ikon igen
   for at komme af med den. Nu ligger den OVER indholdet og lukker ved klik
   udenfor. */
.antbl-why { position: relative; }
.antbl-why-t {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  width: max-content; max-width: min(62ch, 78vw);
  padding: 12px 15px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: var(--sh-4);
  color: var(--ink-soft); font-size: 12.5px; line-height: 1.55;
}
/* En lille pil op mod ikonet, saa det er tydeligt hvad boksen hoerer til. */
.antbl-why-t::before {
  content: ""; position: absolute; top: -6px; left: 7px; width: 10px; height: 10px;
  background: var(--surface-2); border-left: 1px solid var(--line);
  border-top: 1px solid var(--line); transform: rotate(45deg);
}
.antbl-why-t b { color: var(--ink); }

/* Foden: hvad programmet har maerket, naar man ikke selv har roert noget. */
.anclean-flag { color: var(--warn); }

/* ---- Handlingerne i hovedet, ved siden af Done ------------------------- */
.antbl-head-a { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }
/* Done er den handling der afslutter opgaven - groen som Save, fordi begge
   fører FREM. De blaa er sidespor. */
.btn.antbl-done { flex: 0 0 auto; }

/* ---- Filter-knappen paa vaerdikortet ----------------------------------
   Talfelterne stod fremme paa hvert kort: fem kolonner = ti smaa talfelter man
   skal ramme, og de fleste bruges aldrig. Nu ligger de bag én knap, og har
   kolonnen en graense, staar graensen PAA knappen - saa kan man se den uden at
   folde ud. */
/* Kortet maa ikke skifte bredde af at man klikker. Foer laa talfelterne inde i
   kortet og skubbede det ud naar de foldede ud; nu ligger de i en popup, og
   knappen selv har en fast, klippende bredde saa en lang graense ("−12.5 – 340")
   heller ikke kan traekke kortet bredere end naboen. */
.antbl-filt {
  /* display:block er IKKE pynt: den laese-kun-udgave er en <span> (foer en
     <button>, som er inline-block fra browseren). En inline span ignorerer
     margin-top/hoejde lodret og lagde sig OP I "N of N readings"-linjen. */
  display: block; box-sizing: border-box;
  margin-top: 8px; width: 100%; max-width: 100%; min-width: 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px dashed var(--line-soft); background: rgba(255,255,255,.03);
  color: var(--ink-soft); border-radius: 8px; padding: 5px 9px;
  font: 600 11.5px system-ui, "Segoe UI", sans-serif; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.antbl-filt:hover { border-color: var(--accent); color: var(--ink); }
.antbl-filt.on {
  border-style: solid; border-color: var(--accent);
  background: rgba(var(--accent-rgb), .13); color: var(--accent);
}
.antbl-filt[aria-expanded="true"] { border-color: var(--accent); }
.antbl-lims[hidden] { display: none; }

/* Fanen der ikke goer noget: den ER stadig et valg, men den siger hvorfor den
   ligner den anden. Halvt daempet - ikke slukket, for tallet i den er rigtigt. */
.anview-b.is-same { opacity: .5; }

/* ---- Download: plot-valg og stationsgrupper --------------------------- */
.dl-opt-h {
  margin: 12px 0 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.dl-opt-h:first-child { margin-top: 4px; }
.dl-plot-note { margin: 6px 0 0; font-size: 11.5px; }
.dl-appname { text-transform: none; }
/* Forklaringen under hvert valg er dét der goer at man kan vaelge rigtigt uden
   at spoerge nogen. Den skal derfor staa paa sin egen linje, ikke i en tooltip. */
.dl-check .dl-sub { display: block; width: 100%; margin-top: 2px; opacity: .8; }
.dl-check { align-items: flex-start; }
.dl-check input { margin-top: 3px; }

/* ---- Graense-popup ----------------------------------------------------
   Almindelige TEKSTfelter, ikke type=number: piletasterne paa et talfelt
   springer i browserens egne skridt, og de smaa op/ned-pile er noget skidt at
   ramme paa en skaerm der ruller. inputmode=decimal giver stadig et taltastatur
   paa telefonen. */
.anfl-row { display: flex; gap: 12px; margin: 10px 0 4px; }
.anfl-f { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.anfl-f > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.anfl-f input {
  width: 100%; padding: 10px 44px 10px 12px; border-radius: 10px;
  border: 1px solid var(--line-soft); background: var(--input-bg); color: var(--ink);
  font: 600 17px/1.1 system-ui, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums;
}
.anfl-f input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Enheden STAAR i feltet. "0 til 6" siger ikke om det er meter eller knob, og
   det er netop dét man er i tvivl om naar man saetter en graense. */
.anfl-u {
  position: absolute; right: 12px; bottom: 12px; font-style: normal;
  font-size: 12px; font-weight: 600; color: var(--muted); pointer-events: none;
}

/* En slaaet-fra knap skal se slaaet fra ud - ellers klikker man og tror
   programmet hænger. Forklaringen staar i title. */
.btn.revert[disabled] {
  opacity: .42; cursor: not-allowed; filter: grayscale(.5);
}
.btn.revert[disabled]:hover { background: rgba(var(--warn-rgb), .12); }

/* ---- Varsel i download/print-popups -----------------------------------
   IKKE en spaerre. Man skal vide hvad man sender ud af huset, men raa tal er
   helt i orden hvis stationen er ren - saa det er en oplysning, ikke et
   spoergsmaal man skal svare paa. */
.anwarn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px; margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.5;
}
.anwarn b { font-size: 13px; }
.anwarn-i {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.anwarn[data-tone="warn"] {
  background: rgba(var(--warn-rgb), .12); border: 1px solid rgba(var(--warn-rgb), .45);
  color: var(--ink-soft);
}
.anwarn[data-tone="warn"] b { color: var(--warn); }
.anwarn[data-tone="warn"] .anwarn-i { background: var(--warn); color: #2a1c00; }
.anwarn[data-tone="ok"] {
  background: rgba(var(--ok-rgb), .11); border: 1px solid rgba(var(--ok-rgb), .4);
  color: var(--ink-soft);
}
.anwarn[data-tone="ok"] b { color: var(--ok); }
.anwarn[data-tone="ok"] .anwarn-i { background: var(--ok); color: #05220f; }

/* Overskrift over en gruppe valg i en popup. */
.scpk-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin: 2px 0 6px;
}

/* ---- Download data and graphs -----------------------------------------
   Staar FOER print-knappen: data foerst, papir bagefter. Blaa-groen, saa den
   ikke konkurrerer med den orange print-knap - to forskellige udgange, to
   forskellige farver, begge tydelige. */
.btn.antbl-dl {
  background: linear-gradient(135deg, #3fd6b0, #17a383);
  border-color: #3fd6b0; color: #04241c;
  font-weight: 800; letter-spacing: .015em; padding-inline: 15px;
}
.btn.antbl-dl:hover { filter: brightness(1.07); }
.btn.antbl-dl:focus-visible { outline: 2px solid #3fd6b0; outline-offset: 2px; }
/* Navnefeltet i download-popup'en fylder hele bredden. */
.scdl-navn { margin: 2px 0 4px; }
.scdl-navn input { padding-right: 12px; }

/* ---- Godkend-knappen kalder paa sig selv naar der er noget at godkende --
   Ikke en blinkende ting man laerer at ignorere: en langsom, svag ring, samme
   sprog som print-knappen. Er alt godkendt, staar den helt stille. */
.antbl-save.is-dirty { animation: approvePulse 2.6s ease-in-out infinite; }
.antbl-save.is-clean { animation: none; }
@keyframes approvePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0), 0 2px 8px rgba(0,0,0,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--ok-rgb), .28), 0 2px 8px rgba(0,0,0,.3); }
}
@media (prefers-reduced-motion: reduce) { .antbl-save.is-dirty { animation: none; } }

/* En laast udgang: tydeligt slaaet fra, med grunden i title. Animationen skal
   OGSAA stoppe - en knap der pulser og ikke kan trykkes er en haan. */
.btn.antbl-dl.is-locked, .btn.antbl-pack.is-locked, .btn.is-locked {
  opacity: .38; cursor: not-allowed; filter: grayscale(.65); animation: none;
}
.btn.antbl-pack.is-locked::after { display: none; }

/* Advarsel i roed: skaerm og server er UENIGE om tallene. */
.anwarn[data-tone="bad"] {
  background: rgba(var(--danger-rgb), .13); border: 1px solid rgba(var(--danger-rgb), .5);
  color: var(--ink-soft);
}
.anwarn[data-tone="bad"] b { color: var(--danger); }
.anwarn[data-tone="bad"] .anwarn-i { background: var(--danger); color: #2a0806; }

/* ---- Er stationen kommet videre? --------------------------------------
   Tre facts med STORE bogstaver, saa de kan laeses paa afstand - ogsaa naar
   svaret er nej. Groen = sket, roed = ikke sket. Ingen navne. */
.anst-row { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 10px 0 2px; }
.anst {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px; letter-spacing: .06em;
}
.anst b { font-size: 12.5px; font-weight: 800; text-transform: uppercase; }
.anst-i { font-size: 13px; font-weight: 800; line-height: 1; }
.anst-t {
  letter-spacing: 0; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.anst-n { letter-spacing: 0; font-size: 11px; color: var(--muted); }
.anst[data-ja="1"] b, .anst[data-ja="1"] .anst-i { color: var(--ok); }
/* IKKE gjort er ikke en fejl - det er bare ikke gjort endnu. Gul, ikke roed:
   roed ville lyde som om noget var gaaet galt. */
.anst[data-ja="0"] b, .anst[data-ja="0"] .anst-i { color: var(--warn); }
.anst-sub { margin-top: 4px; font-size: 11.5px; color: var(--ink-soft); }
/* Station list-kortets stille kvittering (erstatter den gule NOT-stribe). */
.da-receipt { margin: 7px 0 3px; font-size: 11.5px; line-height: 1.5; }
.da-receipt .rcpt-on { color: var(--ink-soft); }
.da-receipt .rcpt-off { color: var(--muted); opacity: .85; }
.da-receipt .rcpt-sep { margin: 0 8px; color: var(--muted); opacity: .5; }
.da-receipt .rcpt-n { color: var(--muted); font-size: 10.5px; }

/* ---- "Hvornaar blev der sidst godkendt" ved siden af knappen ----------
   Ikke i en historik man skal aabne: spoergsmaalet stilles netop mens man
   staar med haanden paa knappen. */
/* Kortets hjoerne, ikke ved siden af knappen: "Never approved" lige op ad en
   knap der hedder "Approve data" laeses som knappens undertekst. Det er en
   oplysning om stationen. */
.anapp-when {
  flex: 1 1 100%; width: 100%; text-align: right; margin-top: 2px;
  font-size: 11.5px; line-height: 1.35; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.anapp-when:empty { display: none; }
.anapp-when.is-ok { color: var(--ok); }
/* Godkendt ÉN gang og aendret siden: den vigtigste af de tre tilstande, for
   det er dér skaerm og server er uenige. */
.anapp-when.is-stale { color: var(--warn); }
.anapp-when.is-stale b { color: var(--warn); }
.anapp-when.is-no { color: var(--muted); }
.anapp-n { color: var(--ink-soft); }

/* ---- Kontakten: markér det filtrene fanger, eller markér ingenting -----
   To knapper med hver sin retning af den samme beslutning er én knap for
   meget - og en kontakt VISER tilstanden i stedet for at man skal huske hvad
   man sidst trykkede. */
.anclean-tg {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 12px 5px 6px; border-radius: 99px;
  border: 1px solid rgba(var(--warn-rgb), .45); background: rgba(var(--warn-rgb), .1);
  font: 600 13px system-ui, "Segoe UI", sans-serif; color: var(--warn);
  user-select: none;
}
.anclean-tg input { position: absolute; opacity: 0; pointer-events: none; }
.anclean-tg-s {
  flex: 0 0 auto; width: 34px; height: 19px; border-radius: 99px;
  background: rgba(255,255,255,.12); border: 1px solid var(--line-soft);
  position: relative; transition: background .15s, border-color .15s;
}
.anclean-tg-s::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--ink-soft); transition: transform .15s, background .15s;
}
.anclean-tg input:checked + .anclean-tg-s {
  background: rgba(var(--warn-rgb), .55); border-color: var(--warn);
}
.anclean-tg input:checked + .anclean-tg-s::after { transform: translateX(15px); background: #2a1c00; }
.anclean-tg:hover { background: rgba(var(--warn-rgb), .18); }
.anclean-tg input:focus-visible + .anclean-tg-s { outline: 2px solid var(--warn); outline-offset: 2px; }
/* Ingen filtre = intet at slaa til. */
.anclean-tg.is-off { opacity: .45; cursor: not-allowed; }
.anclean-tg.is-off:hover { background: rgba(var(--warn-rgb), .1); }

/* ---- Scanmar-status for hele togtet ------------------------------------ */
.scst-filters { display: flex; gap: 7px; margin: 10px 0 12px; }
.scst-f {
  padding: 6px 14px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line-soft); background: rgba(0,0,0,.2);
  color: var(--ink-soft); font: 600 12.5px system-ui, "Segoe UI", sans-serif;
}
.scst-f.on { background: var(--accent); border-color: var(--accent); color: #08222e; }
.scst-list { display: flex; flex-direction: column; gap: 7px; max-height: 62vh; overflow: auto; }
.scst-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.025);
}
.scst-row.is-done { opacity: .62; }
.scst-id { flex: 0 0 auto; min-width: 150px; display: flex; flex-direction: column; }
.scst-id b { font-size: 14px; }
.scst-when { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scst-marks { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px 13px; min-width: 0; }
.scst-m {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.scst-m[data-ja="1"] { color: var(--ok); }
/* Gult, ikke roedt: "ikke printet endnu" er ikke en fejl. */
.scst-m[data-ja="0"] { color: var(--warn); }
.scst-act { flex: 0 0 auto; display: flex; gap: 6px; }
.scst-done {
  display: flex; align-items: center; gap: 10px; padding: 16px;
  border-radius: 11px; background: rgba(var(--ok-rgb), .1);
  border: 1px solid rgba(var(--ok-rgb), .4); color: var(--ok); font-weight: 600;
}
.scst-done span { font-size: 20px; }

/* Anden vej ind i togtets status-liste, fra stationens eget Scanmar-kort. */
.sc-door-link {
  margin-top: 12px; background: none; border: 0; cursor: pointer;
  color: var(--accent); font: 600 12.5px system-ui, "Segoe UI", sans-serif;
  text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px;
  border-radius: 7px;
}
.sc-door-link:hover { background: rgba(var(--accent-rgb), .12); }

/* De to samlede udgange paa traal-geometri-fanen - samme knapper som i
   Scanmar-editoren, samme laas. */
.tg-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.tg-acts .btn.is-locked, .tg-acts .btn[disabled] {
  opacity: .38; cursor: not-allowed; filter: grayscale(.65); animation: none;
}
.tg-acts .btn[disabled]::after { display: none; }

/* Status-panelet aabnes BAADE fra Station Options (over dashboardet) og fra
   stationskortets Scanmar-fane (over #detailsModal, z-index 90) og kan naas
   mens editoren staar aaben (z-index 200). Den laa paa 80 og forsvandt derfor
   bag stationskortet - man trykkede og troede der ikke skete noget. */
#scStatusModal { z-index: 210; }

/* Navnet paa filen VISES, men kan ikke redigeres - se scDownload(). */
.scdl-navn { margin: 2px 0 10px; }
.scdl-navn b { color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-all; }

/* ---- Bekraeftelses-dialogens knapper -----------------------------------
   CENTRERET: et spoergsmaal har ikke en "hoejre side". Man laeser teksten og
   vaelger mellem mulighederne - saa staar de under teksten, ikke i et hjoerne. */
.modal-actions.cf-actions { justify-content: center; }


/* ---- "Ikke Scanmar" ---------------------------------------------------
   Stationslisten stod som en femte afkrydsning mellem fire graf-valg og saa ud
   som endnu en graf. Den er noget andet - hele stationens papirark - og kommer
   fra en anden kilde. En farvet kant i siden og et tydeligere felt siger det
   uden en ekstra overskrift. */
.scpk-row.scpk-extra {
  border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .07);
  box-shadow: inset 3px 0 0 var(--accent);
}
.scpk-row.scpk-extra:hover { background: rgba(var(--accent-rgb), .13); }
.scpk-row.scpk-extra b { color: var(--accent); }

/* ---- Togtets mappe: KORTET ER NEDLAGT (27/8) ---------------------------
   .sti-*-reglerne fjernet sammen med Cruise folder-kortet paa Scanmar-doeren;
   mappen vaelges og huskes nu i selve gem-flowet (se scDownload i app.js). */

/* ---- "Kom det ud af printeren?" ---------------------------------------
   Nederst, diskret, forsvinder af sig selv. Gik det godt, goer man ingenting. */
.prt-undo {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 400; display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--sh-4); color: var(--ink-soft);
  font: 13px system-ui, "Segoe UI", sans-serif;
  animation: prtInd .18s ease-out;
}
@keyframes prtInd { from { opacity: 0; transform: translate(-50%, 10px); } }
.prt-undo button {
  background: rgba(var(--warn-rgb), .14); border: 1px solid rgba(var(--warn-rgb), .5);
  color: var(--warn); border-radius: 9px; padding: 6px 13px; cursor: pointer;
  font: 600 12.5px system-ui, "Segoe UI", sans-serif; white-space: nowrap;
}
.prt-undo button:hover { background: rgba(var(--warn-rgb), .24); }

/* En INDSTILLING i download-boksen, ikke et indhold-valg. Egen farve, saa den
   ikke laeses som "endnu en ting jeg skal krydse af". */
.scpk-row.scdl-opt {
  border-color: rgba(75, 184, 232, .45);
  background: rgba(75, 184, 232, .07);
  margin-top: 10px;
}
.scpk-row.scdl-opt:hover { background: rgba(75, 184, 232, .14); }
.scpk-row.scdl-opt b { color: #7fd0f5; }

/* Hvor mange maalinger baerer kanalen? Under 90 % markeres - ikke som en fejl,
   men som noget man skal vide naar man laeser gennemsnittet. */
.antbl-stat-n {
  font-size: 10.5px; color: var(--muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.antbl-stat-n.is-low { color: var(--warn); font-weight: 600; }
/* Under sin egen saedvanlige takt: gult. IKKE roedt - der er ikke konstateret
   noget i stykker, der er set noget der er vaerd at kigge paa. */
.sh-row.is-low { border-color: rgba(var(--warn-rgb), .45); background: rgba(var(--warn-rgb), .07); }
.sh-chip.ok     { background:rgba(52,199,120,.16); color:#2e9e63; }
.sh-chip.svag   { background:rgba(255,159,64,.18); color:#c9761f; }
.sh-chip.sjaeldnere { background:rgba(120,140,255,.18); color:#5566d8; }
.sh-chip.tavs   { background:rgba(230,72,72,.16); color:#c33; }
.sh-chip.nyt    { background:rgba(230,72,72,.9); color:#fff; margin-left:6px; }
.sh-row.is-svag   { border-color:rgba(255,159,64,.35); }
.sh-row.is-sjaeldnere { border-color:rgba(120,140,255,.35); }
.sh-row.is-tavs   { border-color:rgba(230,72,72,.35); }

/* Forklaringen fylder hele raekkens bredde, ikke en kolonne. */
.sh-row.aaben { grid-template-areas:none; }
.sh-setup .btn { margin:0; }

/* Modal-hoveder med vaerktoejsknapper: titlen skubber resten til hoejre, og
   vaerktoejerne staar samlet i stedet for at blive spredt af space-between. */
.modal-head.mh-tight h3 { margin-right:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.modal-head.mh-tight .mh-tools { display:flex; align-items:center; gap:8px; }
.modal-head.mh-tight .mh-tools:empty { display:none; }
.scsc-txt .sc-beta-pill { margin-left:4px; }
.sr-tab.on { background:var(--accent); color:#fff; border-color:transparent; }
.sr-tab.on .sr-n { background:rgba(255,255,255,.25); }
.sr-row.has { background:rgba(52,199,120,.09); }
.sr-row.arvet .sr-in::placeholder { opacity:.45; font-style:italic; }
.sr-row.has .sr-x { opacity:.8; }
/* STABLINGEN, samlet ét sted saa de tre ikke kan komme til at slaa hinanden ihjel:
   helbredspanelet aabnes fra stationskortet (#detailsModal, 90) OG fra Scanmar-
   editoren (#anTableModal, 200) - derfor skal det ligge over BEGGE. Uden det
   laa det bagved netop naar man aabnede det fra kortet.
     205  Sensor health          (over editoren)
     210  Scanmar status
     215  Stationens sensordetalje (aabnes fra helbredspanelets vej ind)
     220  Sensor ranges          (aabnes ovenpaa helbredspanelet) */
#shModal   { z-index:205; }
#scscModal { z-index:215; }
#srModal   { z-index:220; }

/* Stationens eget overblik paa Scanmar-kortet. */
.scsc { margin:10px 0 4px; }
.scsc-row.is-svag { border-color:rgba(255,159,64,.35); }
.scsc-row.is-tavs { border-color:rgba(230,72,72,.35); }
.scsc-foot .btn { display:block; margin-top:8px; }

/* ---- LINK & FRESH: forklaringen ----
   Tre blokke med hver sin tone, saa man kan SE hvor dokumentationen slutter og
   vores egne valg begynder - uden at laese overskrifterne. */
#sigModal { z-index:230; }
@media (max-width: 760px) { }

/* Sensor-knappen i Scanmar-kortets vaerktoejslinje. */
.det-embed-bar .scsc { margin:0; margin-right:auto; max-width:min(420px, 52%); }
.det-embed-bar .scsc:empty { display:none; }
.sh-chip.ok         { background:#5fd39a; }
.sh-chip.svag       { background:#f0b429; }
.sh-chip.sjaeldnere { background:#a9b8f8; }
.sh-chip.tavs       { background:#f2857a; }
.sh-chip.nyt        { background:#ef4444; color:#fff !important; }
.sh-scope button.on { background:var(--accent); color:#fff; }

/* ---- KNAPHOEJDER I HOVEDERNE ----
   .btn (10px padding, 15px) og .btn.small (6px, 13px) er ~41 og ~29 px hoeje.
   Staar de i samme raekke, ser raekken skaev ud uanset hvor pæne knapperne er
   hver for sig. Fast hoejde i netop DE raekker hvor de blandes - ikke globalt,
   for smaa knapper i tabeller SKAL vaere smaa. */
.modal-head.mh-tight button,
.antbl-head-a > .btn,
.antbl-head-a .antbl-app .btn,
.modal-head .antbl-done {
  height: 38px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-head.mh-tight .sh-scope { height: 38px; align-items: center; }

/* Approve + status i hovedet: knappen oeverst, status UNDER den. Ved siden af
   laestes "Never approved" som knappens undertekst. */
.antbl-app { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.antbl-app .antbl-app-when { font-size: 10.5px; text-align: center; line-height: 1.3;
  opacity: .75; white-space: nowrap; }
.antbl-app .antbl-app-when.is-no { color: var(--warn); opacity: .95; font-weight: 700; }
.antbl-app .antbl-app-when.is-ok { color: #5fd39a; }
.antbl-app .antbl-app-when.is-stale { color: var(--warn); }
.antbl-head-a { display: flex; align-items: flex-start; gap: 10px; }

/* Kortet uden Approve-knappen: to rene raekker i stedet for fire ting der
   deler plads. Forklaring + Columns foroven, kontakten forneden. */
/* GROENNE OG GULE KNAPPER PAA RAEKKE (Christian). Foer laa vaerktoejerne
   (Columns/Print/tandhjul, groenne) paa én linje og kontakten (gul) paa en
   anden. Nu er de ét baand til hoejre for forklaringen: de wrapper ned samlet
   i et smalt vindue, men staar paa raekke naar der er plads. */
.anclean-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
/* Forklaringen tager sin egen linje, saa de to knap-grupper - de groenne
   vaerktoejer (tandhjul/Columns/Print) og den gule kontakt - lander SAMMEN paa
   raekken nedenunder i stedet for hver for sig. */
.anclean-txt { flex: 1 1 100%; }
/* Kontakten (gul) foerst, saa vaerktoejerne (groenne) - hele klyngen skubbes til
   hoejre som ét, saa de staar side om side paa samme raekke. width:auto ophaever
   basisreglens width:100%, der ellers giver kontakten hele raekken for sig selv. */
.anclean-tools { margin-left: 0; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; width: auto; order: 3; }
.anclean-btns { grid-column: auto; margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; width: auto; order: 2; }

/* --- Audit-rettelser 20/8 --- */

/* .anwarn er en flex-boks. Den nye "View only"-besked arvede det, saa
   saetningen blev delt i fire soejler ved siden af hinanden. */
.anwarn.sr-ro { display:block; }
.anwarn.sr-ro b { display:block; margin-bottom:3px; }

/* .anwarn tegner sin baggrund ud fra data-tone. Uden attributten stod de nye
   bokse helt uden bund, kant og farve - de lignede loes tekst. */
.anwarn.sr-ro, .anwarn.sh-setup {
  background: rgba(var(--warn-rgb, 240,180,41), .12);
  border: 1px solid rgba(var(--warn-rgb, 240,180,41), .35);
  border-radius: 10px; padding: 10px 12px;
}

/* Statuslinjen skal ikke bestemme knappens bredde. */
.antbl-app { align-items: center; }
.antbl-app .btn { width: 100%; }

/* "Latest" fra et gammelt traek: daemp det, saa tallet ikke laeses som nyt. */
.sh-v.er-gammel { opacity:.6; }
.sh-v.er-gammel .sh-u { font-weight:700; opacity:.9; }





.ring[data-tone="ok"]   .ring-bue { stroke:#34c778; }
.ring[data-tone="warn"] .ring-bue { stroke:#f0b429; }
.ring[data-tone="bad"]  .ring-bue { stroke:#ef6b6b; }

.ring[data-tone="ok"]   .ring-tal { color:#34c778; }
.ring[data-tone="warn"] .ring-tal { color:#f0b429; }
.ring[data-tone="bad"]  .ring-tal { color:#ef6b6b; }
.dm-ikon { font-size:17px; line-height:1; }
.dm-txt { display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
.dm-txt b { font-size:14px; font-weight:700; }
.dm-txt span { font-size:11.5px; opacity:.62; }
.dm-pil { font-size:12px; opacity:.6; transition:transform .18s; }
.dom-mere[open] .dm-pil { transform:rotate(180deg); }
@media (max-width: 720px) { }
@media (max-width: 720px) { }

/* Ringen PAA kortet. Baandet er smalt, saa kun den store ring - opdelingen
   hoerer i popup'en. */








.det-embed-bar .scsc { max-width:min(470px, 58%); }

/* ---- RINGEN, tegnet i den stoerrelse den bruges i ----
   Tallet centreres af LAYOUTET (grid place-items), ikke af en fast top-vaerdi
   i pixels - derfor kan den samme ring bruges i 46 og 92 px uden at tallet
   falder ud af cirklen, som det gjorde foer. */
.ring { display:inline-flex; flex-direction:column; align-items:center; gap:5px; }
.ring[data-tone="ok"]   .ring-bue { stroke:#34c778; }
.ring[data-tone="warn"] .ring-bue { stroke:#f0b429; }
.ring[data-tone="bad"]  .ring-bue { stroke:#ef6b6b; }
.ring[data-tone="ok"]   .ring-tal { color:#34c778; }
.ring[data-tone="warn"] .ring-tal { color:#f0b429; }
.ring[data-tone="bad"]  .ring-tal { color:#ef6b6b; }

/* Popup'en var xwide (1360) fordi bjaelkerne under skal bruge pladsen - men
   dommen alene fylder ikke saa meget, og et halvtomt bredt kort ser forkert
   ud. Smal som udgangspunkt; den udvider sig FOERST naar man folder tallene
   ud og faktisk har brug for bredden. */
/* ÉN bredde. 960 er bred nok til bjaelkerne naar de foldes ud, og smal nok
   til at dommen ikke svoemmer i et halvtomt kort - xwide (1360) var for
   meget for tre linjer tekst. */
#scscModal .modal-card { width: min(960px, calc(100vw - 40px)); }

/* ---- SCANMAR-KORTET: ét kort i stedet for fire svaevende ting ---- */
.sc-kort { max-width: 560px; margin: 0 auto; padding: 20px 22px 18px;
  border-radius: 16px; text-align: center;
  border: 1px solid rgba(120,160,200,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.20); }
.sc-kort .sc-door-btn { width: 100%; font-size: 16px; padding: 13px 18px; }
.sc-kort .sc-door-s { margin: 12px 0 0; }
.sc-kort-skel { height: 1px; margin: 16px -6px 14px;
  background: linear-gradient(90deg, transparent, rgba(120,160,200,.22), transparent); }
.sc-kort-rad { display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; }
.sc-kort-rad .sc-door-link { margin: 0; }
.sc-dx-slot { display: inline-flex; }
.sc-kort .sti-wrap { margin-top: 14px; }

/* Baandet baerer nu kun banneret - centreret. */
/* Baren holdt signal-banneret fra Sensor health. Den er tom nu, og en tom
   flex-kasse med 8 px bundmargen er 8 px luft man ikke kan se aarsagen til -
   Scanmar-kortet begyndte lavere end det skulle. */
.det-embed-bar.dx-bar-tom { display: none; }

/* ================= BEVAEGELSE =================
   Regel: den maa kun fyre naar NOGET HAR AENDRET SIG. Loebende bevaegelse paa
   en skaerm man kigger paa i timevis bliver til tapet paa ti minutter - og saa
   overser man den gang det gaelder. Alt herunder er engangs. */

/* 1) MODALER KOMMER IND. Én regel rammer hver eneste panel i appen.
      Kort og hurtigt: 130 ms, kun opacity og skala (GPU), saa selv det tunge
      Scanmar-panel ikke foeles traegt. */
@keyframes modal-ind {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes modal-slaar-op { from { opacity: 0; } to { opacity: 1; } }
.modal:not(.hidden) { animation: modal-slaar-op .13s ease-out; }
.modal:not(.hidden) > .modal-card { animation: modal-ind .13s cubic-bezier(.2,.8,.3,1); }

/* 2) KVITTERING paa godkendelsen. Et groent gennemtraek der loeber hen over
      linjen ÉN gang, saa man ser klikket lande. */
@keyframes kvitter-stroeg {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}
.antbl-app.kvitter .anapp-when {
  background-image: linear-gradient(100deg, transparent 20%,
    rgba(52,199,120,.42) 46%, rgba(120,255,190,.55) 52%, transparent 78%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
  animation: kvitter-stroeg .85s ease-out;
}

/* 3) SKELET mens togtet laeses. Raekkerne har den RIGTIGE form, saa naar
      tallene lander flytter oejet sig ikke. Forskudt start, saa det ligner
      noget der bliver bygget - ikke noget der blinker. */
@keyframes skel-aand { 0%,100% { opacity:.30; } 50% { opacity:.62; } }

@media (prefers-reduced-motion: reduce) {
  .modal:not(.hidden), .modal:not(.hidden) > .modal-card,
  .antbl-app.kvitter .anapp-when, .skel { animation: none !important; }
}


/* ================= SCANMAR-KORTET, STRUKTURERET =================

   Der laa fire forskellige formsprog oven paa hinanden: tre raabende
   inline-maerker, et understreget tekstlink, en pilleknap, en mappepille og en
   groen flueben-linje for sig selv - alle centrerede, ingen af dem lige brede.
   Oejet havde ingen kant at falde tilbage paa.

   Nu er der tre baelter med hver sin opgave, adskilt af tynde linjer:
     1  HANDLINGEN      én knap, fuld bredde
     2  TILSTANDEN      en tjekliste, venstrestillet
     3  VEJENE VIDERE   to lige store knapper
     4  MAPPEN          en stille fod                                        */

.sc-kort { text-align: left; padding: 18px 20px 16px; }

/* 1) Handlingen. Den eneste groenne ting paa kortet. */
.sc-kort .sc-door-btn { width: 100%; font-size: 16px; padding: 14px 18px;
  margin-bottom: 16px; }

/* 2) Tilstanden som TJEKLISTE. Tre maerker paa én raekke laeses som en
      overskrift der raaber; under hinanden laeses de som det de er - tre ting
      der skal afkrydses. */
.sc-kort .anst-row { display: flex; flex-direction: column; gap: 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(120,160,200,.14); }
.sc-kort .anst { display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; font-size: 13px; letter-spacing: 0;
  background: rgba(255,255,255,.018); }
.sc-kort .anst + .anst { border-top: 1px solid rgba(120,160,200,.10); }
.sc-kort .anst-i { width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; flex: 0 0 auto; }
.sc-kort .anst[data-ja="1"] .anst-i { background: rgba(52,199,120,.20); color: #34c778; }
.sc-kort .anst[data-ja="0"] .anst-i { background: rgba(240,180,41,.18); color: #f0b429; }
.sc-kort .anst b { font-weight: 700; font-size: 12px; letter-spacing: .04em;
  flex: 1 1 auto; }
.sc-kort .anst[data-ja="1"] b { color: #7fe0ac; }
.sc-kort .anst[data-ja="0"] b { color: #f0c869; }
/* Tidspunktet HOEJRESTILLET, saa de tre datoer staar under hinanden og kan
   sammenlignes med et blik. */
.sc-kort .anst-t { margin-left: auto; font-size: 11.5px; opacity: .65;
  font-variant-numeric: tabular-nums; }
.sc-kort .anst-n { font-size: 10.5px; opacity: .7; }
.sc-kort .anst-sub { margin-top: 8px; font-size: 12px; opacity: .62;
  line-height: 1.45; }

.sc-kort-skel { height: 1px; margin: 15px 0 13px;
  background: linear-gradient(90deg, transparent, rgba(120,160,200,.20), transparent); }

/* 3) Vejene videre. TO KNAPPER MED SAMME FORM - foer var den ene et
      understreget link og den anden en pille, og de saa ud til at hoere til
      hver sit program. */
/* GRID, ikke flex. Med flex-basis 0 blev de to alligevel 208 og 190 px -
   noget i dx-menuens egen opsaetning vandt over basis. To lige spalter kan
   ikke misforstaas. */
.sc-kort-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-kort-rad > * { min-width: 0; }
.sc-kort-rad .sc-door-link,
.sc-kort-rad .dx-btn {
  width: 100%; margin: 0; height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 11px; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(120,160,200,.30); color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.sc-kort-rad .sc-door-link:hover,
.sc-kort-rad .dx-btn:hover { border-color: rgba(120,160,200,.58);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  transform: translateY(-1px); }
.sc-kort-rad .dx-wrap { width: 100%; }

/* 4) Mappen som stille FOD - ikke som en tredje slags knap midt i kortet.
      Navn og tilstand paa SAMME linje: fluebenet hoerte til mappen, ikke til
      en linje for sig selv. */
.sc-kort .sti-wrap { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(120,160,200,.14);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-kort .sti-btn { margin: 0; height: 34px; padding: 0 12px; border-radius: 9px;
  font-size: 12.5px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,160,200,.22); }
.sc-kort .sti-s { margin: 0 0 0 auto; font-size: 12px; }
.sc-kort .sti-note { flex: 1 1 100%; margin: 6px 0 0; font-size: 11px; opacity: .6; }

@media (max-width: 560px) {
  .sc-kort-rad { grid-template-columns: 1fr; }
}



/* Bylinen skifter. Kun en toning - ingen bevaegelse, for en linje der glider
   i oejenkrogen traekker blikket til sig hver gang, og den er ikke vigtig nok
   til det. */
.bf { display: inline-block; transition: opacity .26s ease; }
.bf.bf-ud { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bf { transition: none; } }

/* ================= AFSLUT TOGT: skibet gaar i havn =================
   Boksen sagde det samme fire gange. Nu er der ét billede, én saetning, ét
   valg og én knap - og beroligelsen staar ÉN gang, nederst, i det mindste
   trin. Sagt fire gange lyder det som nogen der har noget at skjule. */
.fc-havn { border-radius: 14px; overflow: hidden; margin: 4px 0 16px;
  border: 1px solid rgba(120,160,200,.18); line-height: 0; }
.fc-havn svg { display: block; }

/* Skibet sejler ind mod molen og laegger til. Én gang - ikke en løkke. */
@keyframes fcSejl {
  0%   { transform: translate(330px, 0); }
  86%  { transform: translate(112px, 0); }
  100% { transform: translate(104px, 0); }
}
@keyframes fcDuv { 0%,100% { transform: translateY(0) rotate(-.6deg); }
                   50%     { transform: translateY(-2px) rotate(.6deg); } }
.fc-skib { transform: translate(330px, 0); }
.fc-havn.sejler .fc-skib { animation: fcSejl 4.6s cubic-bezier(.25,.7,.25,1) forwards; }
/* Duvningen ligger paa en INDRE gruppe, saa den ikke kaemper med sejladsens
   egen transform - to keyframes paa det samme element vinder den ene. */
.fc-havn.sejler .fc-skib > * { animation: fcDuv 2.4s ease-in-out infinite; }

/* Vandet: to lag i hver sin fart, saa der er dybde i stedet for én stribe. */
@keyframes fcBoelge { from { transform: translateX(0); } to { transform: translateX(-160px); } }
.fc-boelge { fill: #0e2c42; }
.fc-b1 { opacity: .95; }
.fc-b2 { fill: #0a2233; opacity: .95; }
.fc-havn.sejler .fc-b1 { animation: fcBoelge 7s linear infinite; }
.fc-havn.sejler .fc-b2 { animation: fcBoelge 11s linear infinite; }

/* Fyret blinker langsomt - et livstegn, ikke en advarsel. */
@keyframes fcBlink { 0%,88%,100% { fill: #2d5f7d; } 92% { fill: #ffd97a; } }
.fc-fyr { fill: #2d5f7d; }
.fc-havn.sejler .fc-fyr { animation: fcBlink 4s ease-in-out infinite; }

.fc-intro { font-size: 15px; margin: 0 0 14px; }
.fc-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.5; }
.fc-check input { margin-top: 2px; flex: 0 0 auto; }
.fc-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.fc-foot .btn { width: 100%; }
.fc-foot .hint { text-align: center; font-size: 11.5px; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .fc-havn.sejler .fc-skib, .fc-havn.sejler .fc-skib > *,
  .fc-havn.sejler .fc-b1, .fc-havn.sejler .fc-b2,
  .fc-havn.sejler .fc-fyr { animation: none !important; }
  .fc-skib { transform: translate(104px, 0); }
}




/* Doer-graferne var 84 px hoeje frimaerker. De er panelets vigtigste tal -
   "flyver den ene skovl?" - og skal kunne aflaeses fra en meters afstand. */
.sc-door-panels > .sc-door { align-items: stretch; text-align: left; }
.sc-door-chart { height: 150px; margin: 10px 0 8px; }
.sc-door-t, .sc-door-read { font-size: 13.5px; }
@media (max-width: 900px) { .sc-door-chart { height: 118px; } }

/* ================= SKUFFEN UNDER MAERKET =================
   Bylinen og versionen stod klemt under navnet og gjorde baren hoej uden at
   vaere noget man laeser mere end én gang. De ligger nu ét klik nede - dér
   hvor buen var - saa baren er ren og versionen stadig kan findes paa et
   sekund naar nogen ringer om en fejl. */
/* Skuffen maaler "top: 100%" mod sin naermeste placerede forfader - .brand.
   Den stoppede 12 px over barens underkant, fordi barens padding ligger
   UDENFOR maerket. Negativ margin ophaever den padding for netop dette barn,
   saa maerket spaender hele barens hoejde og "100%" ER barens underkant. */
/* GREBET BLEV KLIPPET AF. .brand har overflow:hidden - et vaern fra dengang
   navn, byline og version kunne flyde ud over fanerne - og alt hvad der
   haenger NEDENFOR maerket forsvandt med det samme. Man saa kun den lille
   gribestreg, som lignede en tilfaeldig linje.

   Vaernet flyttes til teksten, hvor det hoerer hjemme. Maerket rummer nu kun
   navnet, saa der er ikke meget tilbage at klippe. */
.topbar > .brand { align-self: stretch; overflow: visible; position: relative; }
.topbar > .brand .brand-text { overflow: hidden; min-width: 0; }
.brand-skuffe {
  /* Barn af .topbar: "top: 100%" ER barens underkant, left = barens padding,
     saa skuffen flugter med ankeret. Det var rigtigt hele vejen. */
  /* LUKKET som udgangspunkt: en lav, rund forkant. Aaben folder den ud til
     de fem linjer. Hoejden animeres med max-height, saa den kan gaa fra
     "skubbet ind" til "traukket ud" uden at nogen skal kende slut-hoejden. */
  /* KLOS OP AD BAREN. Der var 6 px luft, og saa laa skuffen og svaevede som
     et loesrevet element i stedet for at haenge fast i baren.

     -1 px lader de to kanter falde sammen til én streg, og de OEVERSTE
     hjoerner er firkantede: en rund overkant mod en lige barkant giver et
     lille hak i hver side, som netop faar den til at se loesrevet ud. Runde
     hjoerner hvor den slipper - forneden. */
  /* UNDER BAREN, ikke foran den.

     z-index: -1 lader topbarens egen baggrund male HEN OVER skuffens
     overkant, og den negative margin skubber den 14 px op bag ved. Saa er der
     ingen kant og ingen samling - den kommer ud FRA baren i stedet for at
     ligge klistret paa den.

     Og den er MOERKERE end baren med en skygge langs overkanten: ting der
     ligger under noget andet ligger i skygge. Lysere ville trukke den frem
     igen, uanset hvor den saa ligger i lagene. */
  /* Barn af .topbar. "top: 100%" ER barens underkant - ingen udregning, og
     derfor heller ikke noget der kan blive maalt til 0 foer baren er lagt ud.
     Det var praecis dét der gjorde skuffen usynlig: den laa paa -14px, oppe
     bag baren. */
  /* Barn af .brand: "top: 100%" er maerkets underkant, som flugter barens,
     og left/translate centrerer skuffen under HELE klyngen - anker, navn og
     rolle-pille. Foer laa den klods op ad barens venstre kant, saa navnet stod
     et stykke til hoejre for midten af den. */
  /* "100%" er MAERKETS underkant, og maerket slutter hvor barens polstring
     begynder - 12 px + 1 px kant over barens egen underkant. Uden det stod
     skuffen 13 px oppe i baren med en synlig samling paa tvaers. */
  position: absolute; top: calc(100% + 13px); left: 50%; transform: translateX(-50%);
  z-index: 12;
  /* Smallere og lavere end foer (340/52). Lukket ER skuffen sit eget
     haandtag, og et haandtag maa gerne fylde mindre end det det aabner. */
  width: min(300px, calc(100vw - 44px));
  /* Lidt bund i lukket tilstand, saa den synlige strimmel har hoejde nok til
     at gribestregen kan ses - foer var der kun 15 px tilbage under baren. */
  padding: 0 15px 10px; border-radius: 0 0 14px 14px;
  border: 1px solid rgba(var(--accent-rgb), .22); border-top: 0;
  cursor: pointer; overflow: hidden;
  max-height: 34px;
  transition: max-height .22s cubic-bezier(.2,.8,.3,1), padding .22s, background .15s;
  -webkit-user-select: none; user-select: none;
  /* BARENS EGEN TONE. Jeg gjorde den moerkere for at sige "den ligger under"
     - og saa moerk at den forsvandt i baggrunden under baren, som er lige saa
     moerk. Foelelsen af at ligge under skal komme fra at baren MALER OVER
     overkanten og fra skyggen langs den, ikke fra at gaa i ét med gulvet. */
  background: linear-gradient(180deg, var(--bar-2), var(--bar));
  box-shadow: 0 10px 22px rgba(0,0,0,.45),
              inset 0 8px 10px -8px rgba(0,0,0,.75); }
@keyframes skuffeNed { from { opacity: 0; transform: translateY(-8px); }
                       to   { opacity: 1; transform: none; } }
.bs-r { display: flex; align-items: baseline; gap: 12px; padding: 5px 0;
  font-size: 12px; }
.bs-r + .bs-r { border-top: 1px solid rgba(var(--accent-rgb), .09); }
.bs-r span { opacity: .55; flex: 0 0 88px; }
.bs-r b { font-weight: 600; text-align: right; flex: 1 1 auto;
  overflow-wrap: anywhere; }
.bs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .01em; }
.bs-fod { margin-top: 10px; padding-top: 9px; font-size: 11px; opacity: .55;
  border-top: 1px solid rgba(var(--accent-rgb), .12); line-height: 1.4; }
.bs-fod span { display: block; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .brand-skuffe { animation: none; }
}


/* --- LUKKET / AABEN --- */
.brand-skuffe:hover { background: linear-gradient(180deg, var(--bar-2), var(--bar-2));
  border-color: rgba(var(--accent-rgb), .40); }
/* Gribestregen: den eneste ting man ser naar skuffen er skubbet ind. */
/* Selve grebet: smallere streg, og mindre luft over den. De 25 px stammer
   fra dengang skuffen var skubbet 14 px op bag baren - den er den ikke mere,
   saa luften var bare hoejde uden formaal. */
.bs-greb { display: block; width: 26px; height: 3px; border-radius: 3px;
  margin: 13px auto 0; background: currentColor; opacity: .34;
  transition: opacity .15s, width .18s; }
.brand-skuffe:hover .bs-greb { opacity: .7; width: 36px; }
.brand-skuffe.aaben { max-height: 280px; padding: 0 15px 11px; }
.brand-skuffe.aaben .bs-greb { opacity: .22; margin-bottom: 8px; }
.bs-krop { opacity: 0; transition: opacity .16s; }
.brand-skuffe.aaben .bs-krop { opacity: 1; transition-delay: .08s; }
.brand-skuffe:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .55);
  outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .brand-skuffe, .bs-krop, .bs-greb { transition: none; }
}

/* ---- VEJRET OEVERST I SIDEPANELET ----
   "Overview" sagde ikke noget man ikke kunne se, og pladsen var bedre brugt
   paa dét man kigger op efter foerst: hvad er det for et vejr derude. */
/* HOVEDET HAR INGEN EGEN FARVE. Den lyse stribe bag flytte-ikonet lignede en
   overskriftsbjaelke uden overskrift - en flade der markerede noget der ikke
   var der. Nu glider den i ét med sidepanelet, og urene faar linjen. */
.sbar-head.sbar-head-tom { justify-content: space-between; min-height: 0;
  background: none; border-bottom: 0; padding: 8px 12px 8px 14px; }
.sbar-head-tom .clocks { gap: 14px; }
.sbar-head-tom .clock { align-items: flex-start; }
.sbar-head-tom .clock span:last-child { font-size: 15px; }
.sbar-head-tom .clabel { font-size: 8.5px; }
.sbar-side { flex: 0 0 auto; }
/* KANT TIL KANT. Rundede hjoerner gjorde det til endnu et lille kort ovenpaa
   et panel af kort; to lige streger tvaers over hele bredden gjorde det til en
   del af selve sidepanelet - som en instrumentstribe. Derfor ogsaa ingen
   sidekanter: de ville lave et hak mod skaermkanten. */
.sbar-vejr { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: center; gap: 10px; position: relative;
  margin: 0 0 12px; padding: 11px 14px; border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid rgba(120,160,200,.16); border-left: 0; border-right: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.sbar-vejr.tom { display: none; }
/* Tre lige brede felter. justify-self: center holder hvert tal midt i sit
   felt, saa de tre staar med samme afstand ogsaa naar tallene er forskellig
   lange (17.6 mod 9.3). */
.sv-del { display: flex; align-items: baseline; gap: 5px; min-width: 0;
  justify-self: center; }
/* Ikonerne er fjernet helt - reglen bliver staaende, hvis de skulle tilbage. */
.sv-ikon { display: none; }
.sv-tal { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
/* Luft mellem tal og enhed. "17.2°C" laeste som ét ord; med en halv
   bogstavbredde imellem bliver tallet tallet og enheden en note til det. */
.sv-tal i { font-size: 10.5px; font-weight: 600; font-style: normal; opacity: .6;
  margin-left: 4px; }
.sv-etiket { flex: 1 1 100%; font-size: 10.5px; opacity: .55; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.sv-skel { width: 1px; align-self: stretch; background: rgba(120,160,200,.20); }
/* Staar der RELATIV vind, skal det kunne ses - ellers laeser man den som sand. */
.sv-slags { position: absolute; top: 7px; right: 10px; font-size: 8.5px;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; }
.sv-slags.er-sand { background: rgba(52,199,120,.16); color: #5fd39a; }
.sv-slags.er-rel  { background: rgba(240,180,41,.18); color: #f0b429; }


/* Overskriften INDE i kortet - samme greb som de oevrige sidebar-kort. */
.sbar-kort-h { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 8px; }

/* Selvtjekkets prik og tal sidder nu paa TANDHJULET. Klokken er vaek, men
   advarslen skal stadig kunne ses paa afstand - det var hele dens funktion. */
#btnGear { position: relative; }
/* Ingen varsler paa tandhjulet - hverken selvtjek eller opdateringer. Skulle
   noget alligevel naa at saette et maerke der, bliver det ikke vist. */
#btnGear .hb-dot, #btnGear .hb-count, #btnGear .upd-dot { display: none; }

/* Sidepanelets kort straekker ikke sine boern (align-items er ikke stretch),
   saa vejrstriben blev kun saa bred som sit indhold - 144 af 256 px - og de
   "lige linjer fra kant til kant" naaede kun halvvejs. */
.sbar-card > .sbar-vejr, .sbar-card > .sbar-head { align-self: stretch; }


/* Selvtjek-raekken er en menuraekke som de andre - ikke en ikon-knap. */
#gearMenu #btnHealth { width: auto; height: auto; }


/* "Today's Program" skrev sig med daempet graat, mens "Sensor depths" og de
   oevrige kort-overskrifter i sidepanelet staar i accentfarven. Samme slags
   overskrift skal se ens ud - ellers laeser man forskellen som en forskel. */
.sbar-body .pd-label { font-size: 10px; letter-spacing: .12em; font-weight: 700;
  color: var(--accent); }


/* Sidepanelets hoved rummer nu kun urene (flytte-knappen er vaek). */
.sbar-head.sbar-head-tom { justify-content: flex-start; }


/* Paa en smal bar skrumper maerket, og en centreret skuffe ville stikke ud
   over venstre skaermkant. Der falder den tilbage til at flugte maerket. */
@media (max-width: 1100px) {
  .brand-skuffe { left: 0; transform: none; }
}

/* Urene staar midt i linjen, som tallene i vejrstriben lige under - to raekker
   der begge er centreret laeser som én blok i stedet for to. */
.sbar-head.sbar-head-tom { justify-content: center; }
.sbar-head-tom .clock { align-items: center; }

/* LOKALTIDEN I ORANGE. De to ure stod med samme skrift og samme farve, og saa
   skal man laese overskriften hver gang for at vide hvilket af dem der er
   hvilket. UTC er referencen og bliver hvid; lokaltiden faar sin egen farve,
   saa den kan kendes paa afstand og ikke forveksles med den man skriver i
   journalen. Orange - ikke roed eller gul: de to betyder noget andet i
   fladen (fejl og advarsel), og et ur er ingen af delene. */
.sbar-head-tom #localClock { color: #e8963c; }
.sbar-head-tom .clock:has(#localClock) .clabel { color: #e8963c; opacity: .8; }


/* KLYNGEN: anker + navn + rolle-pille, og kun saa bred som dem.

   .brand har flex: 1 1 0 og bliver derfor strakt hen over al ledig plads i
   baren - 514 px, mens indholdet slutter ved 268. Skuffen blev centreret paa
   .brand og landede 130 px for langt til hoejre, midt i ingenting. Klyngen
   kryber om indholdet, saa "midten" er den midte man kan se. */
.brand-klynge { position: relative; display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 0 1 auto; white-space: nowrap; }

/* Klyngen skal vaere lige saa hoej som maerket, ikke kun som sin tekst: skuffen
   maaler sin top fra klyngens underkant, og en klynge der kun er tekst-hoej
   ligger 6 px hoejere - saa laa skuffen oppe i baren igen. */
.brand-klynge { align-self: stretch; }

/* ---- FANERNE SOM ADSKILTE KNAPPER ----

   De laa som ren tekst paa baren med 6 px imellem, saa "Scanmar Live BETA" og
   "CTD Live BETA" flød sammen til én stribe ord - man skulle laese hele raekken
   for at finde ud af hvor den ene knap holdt op og den naeste begyndte.

   Hver fane faar nu sin egen svage flade og kant. Svag nok til at den aktive
   fane stadig er den eneste der lyser, kraftig nok til at oejet kan taelle
   knapperne uden at laese dem. Og en let nedsaenket bane bagved samler dem til
   ÉT betjeningsfelt i stedet for syv loese ting i en bar. */
.tabs {
  padding: 4px; border-radius: 14px;
  background: rgba(0, 20, 40, .28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .30);
}
.tab {
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px rgba(150, 190, 230, .12);
}
.tab:hover {
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 0 0 1px rgba(150, 190, 230, .22);
}
/* Den aktive beholder sin accent - den maa ikke bare vaere "en af syv kort". */
.tab.active, .tab.active:hover {
  background: rgba(var(--accent-rgb), .18);
  box-shadow: var(--sh-1), inset 0 0 0 1px rgba(var(--accent-rgb), .40);
}


/* Hurtigvalg over redskabs-brikkerne i Download data. Knapper, ikke brikker:
   de VAELGER noget, de er ikke selv en tilstand man kan staa i. */
.dl-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.dl-q { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--accent-rgb), .12); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .28); font-family: inherit;
  transition: background .12s, border-color .12s; }
.dl-q:hover { background: rgba(var(--accent-rgb), .22); border-color: var(--accent); }
.dl-q-ryd { background: none; color: var(--ink-soft); border-color: var(--line-soft); }
.dl-q-ryd:hover { background: var(--surface-3); border-color: var(--line); color: var(--ink); }
.dl-check code { font-size: 11.5px; padding: 0 3px; border-radius: 4px;
  background: rgba(120,160,200,.14); }

/* ---- STATION OPTIONS SOM POPUP ----

   Den gamle drop-down gav hvert punkt to smalle linjer. Her er der plads til at
   forklare, og punkterne staar i kasser efter HVAD MAN VIL - aflevere, tage med
   hjem, se hvor man staar, rette i listen - ikke efter hvad koden goer. */
.sh-hub .modal-head { margin-bottom: 6px; }
.shub-body { display: flex; flex-direction: column; gap: 20px;
  max-height: min(74vh, 760px); overflow-y: auto; padding: 4px 2px 2px; }
.shub-grp > h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 9px;
  display: flex; align-items: baseline; gap: 9px; }
.shub-grp > h4 span { text-transform: none; letter-spacing: 0; font-size: 12px;
  font-weight: 400; color: var(--ink-soft); opacity: .75; }
.shub-kort { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }

/* Kortet: ikon i sit eget hjoerne, titel, den korte linje, og forklaringen. */
.shub-k { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px;
  text-align: left; font-family: inherit; cursor: pointer;
  padding: 13px 15px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, .035); color: var(--ink);
  border: 1px solid var(--line-soft);
  transition: background .13s, border-color .13s, transform .13s; }
.shub-k:hover { background: rgba(var(--accent-rgb), .10);
  border-color: rgba(var(--accent-rgb), .40); transform: translateY(-1px); }
.shub-k:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .55); outline-offset: 2px; }
.shub-ico { grid-row: 1 / span 3; font-size: 20px; line-height: 1.1; opacity: .95; }
.shub-t { font-weight: 700; font-size: 15px; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.shub-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 999px; color: var(--accent);
  background: rgba(var(--accent-rgb), .14);
  border: 1px solid rgba(var(--accent-rgb), .26); }
.shub-d { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
/* Forklaringen er dét popuppen er til for - den maa fylde. */
.shub-m { font-size: 12px; line-height: 1.5; opacity: .62; margin-top: 7px; }

/* Rapporten er stadig den ene ting de fleste kommer efter. */
.shub-k.ra-star { background: linear-gradient(180deg, rgba(var(--accent-rgb), .16),
  rgba(var(--accent-rgb), .07)); border-color: rgba(var(--accent-rgb), .34); }
.shub-k.ra-star .shub-t { color: var(--accent); }
/* Og den ene der fjerner noget, skal ikke ligne de andre. */
.shub-k.ra-del:hover { background: rgba(230, 72, 72, .12); border-color: rgba(230, 72, 72, .45); }
/* FASE 1: guiden-indgangen fylder hele raekken - den nye hovedvej. */
.shub-k.ra-hero { grid-column: 1 / -1; grid-template-columns: 46px 1fr;
  position: relative; overflow: hidden; isolation: isolate;
  border-color: rgba(var(--accent-rgb), .42); padding: 16px 18px;
  background:
    radial-gradient(120% 160% at 88% -30%, rgba(var(--accent-rgb), .30), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, rgba(var(--accent-rgb), .20), rgba(var(--accent-rgb), .06)); }
.shub-k.ra-hero:hover { transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .60);
  box-shadow: 0 6px 20px -8px rgba(var(--accent-rgb), .45); }
/* Glas-swipe der driver skraat henover med jaevne mellemrum. */
.shub-k.ra-hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 42%; transform: skewX(-18deg); pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .16) 50%, transparent 100%);
  animation: heroSweep 5s ease-in-out infinite; }
.shub-k.ra-hero .shub-ico { font-size: 30px; position: relative; z-index: 2; }
.shub-k.ra-hero .shub-t,
.shub-k.ra-hero .shub-d,
.shub-k.ra-hero .shub-m { position: relative; z-index: 2; }
.shub-k.ra-hero .shub-t { font-size: 17px; color: var(--accent); }
@keyframes heroSweep { 0%, 18% { left: -60%; } 60%, 100% { left: 128%; } }
@media (prefers-reduced-motion: reduce) { .shub-k.ra-hero::after { animation: none; display: none; } }
/* "+"-feltet er endnu ikke aktivt: stiplet og daempet, men klikbart. */
.shub-k.ra-add { border-style: dashed; opacity: .7; background: none; }
.shub-k.ra-add:hover { opacity: .95; }
.shub-k.ra-add .shub-t { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { .shub-k { transition: none; } }

/* ---- DATA PACKAGE GUIDE (Download Center, fase 2) ---- */
.wiz-card { width: min(720px, 96vw); }
.wiz-head { display: flex; align-items: center; gap: 12px; }
.wiz-head h3 { flex: 1; }
.wiz-cart { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap;
  background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .26);
  border-radius: 999px; padding: 3px 11px; }
.wiz-steps { display: flex; gap: 5px; margin: 16px 0 18px; }
.wiz-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--line-soft); }
.wiz-seg.done, .wiz-seg.now { background: var(--accent); }
.wiz-seg.now { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .22); }
.wiz-main { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
@media (max-width: 560px) { .wiz-main { grid-template-columns: 1fr; } .wiz-aside { flex-direction: row !important; } }
.wiz-aside { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.wiz-mascot { font-size: 58px; line-height: 1; }
.wiz-speech { font-size: 12px; color: var(--ink); text-align: center; line-height: 1.4;
  background: rgba(var(--accent-rgb), .10); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; }
.wiz-stage { min-height: 244px; }
.wiz-h3 { font-size: 17px; font-weight: 700; margin: 0 0 3px; }
.wiz-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 12px; }
.wiz-opt { display: flex; align-items: center; gap: 11px; padding: 9px 3px;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.wiz-opt:last-child { border-bottom: none; }
.wiz-box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--line);
  display: grid; place-items: center; }
.wiz-box::after { content: "\2713"; font-size: 12px; color: #fff; opacity: 0; font-weight: 700; }
.wiz-opt.on .wiz-box { background: var(--accent); border-color: var(--accent); }
.wiz-opt.on .wiz-box::after { opacity: 1; }
.wiz-labelwrap { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wiz-lbl { font-size: 14px; font-weight: 500; }
.wiz-note { font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; }
.wiz-fmt { font-size: 10.5px; color: var(--ink-soft); letter-spacing: .04em; }
.wiz-scope { display: flex; flex-direction: column; gap: 9px; }
.wiz-sc { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: 11px; cursor: pointer; }
.wiz-sc.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.wiz-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.wiz-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0; }
.wiz-sc.on .wiz-radio { border-color: var(--accent); }
.wiz-sc.on .wiz-radio::after { opacity: 1; }
.wiz-sc .st { flex: 1; }
.wiz-sc .st b { display: block; font-size: 14px; }
.wiz-sc .st small { font-size: 12px; color: var(--ink-soft); }
.wiz-tchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wiz-tchip { font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: var(--surface-2); color: var(--ink-soft); }
.wiz-tchip.on { background: rgba(var(--accent-rgb), .14); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.wiz-pickcount { font-size: 11.5px; color: var(--ink-soft); margin: 8px 0 0; }
.wiz-stationpick { margin-top: 8px; max-height: 148px; overflow: auto;
  border: 1px solid var(--line-soft); border-radius: 9px; padding: 4px 10px; }
.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.wiz-pos { font-size: 11.5px; color: var(--ink-soft); }
.wiz-rev { display: flex; flex-direction: column; }
.wiz-bytype { border-bottom: none; margin-top: 14px; padding: 11px 12px;
  border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(var(--accent-rgb), .05); }
.wiz-revline { display: flex; justify-content: space-between; font-size: 13px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.wiz-revline:last-child { border-bottom: none; }
.wiz-revline .n { color: var(--accent); font-weight: 600; }
.wiz-prog { position: relative; height: 8px; background: var(--surface-3); border: 1px solid var(--line-soft);
  border-radius: 6px; overflow: hidden; margin-top: 14px; }
.wiz-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
/* Server-bygningen af ét udtraek kan tage 10-15 sek, hvor bar-bredden ikke
   flytter sig (fx én opgave). Uden bevaegelse ligner den doed. Denne stribe
   loeber hen over baren mens der bygges, saa der ALTID er synligt liv. */
.wiz-prog.building::after {
  content: ""; position: absolute; inset: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: wizSweep 1.1s ease-in-out infinite;
}
@keyframes wizSweep { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .wiz-prog.building::after { animation: none; }
}
.wiz-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--ink-soft); margin-top: 6px; text-align: right; font-variant-numeric: tabular-nums; }

/* Gemte pakker (fase 3) i "Saved downloads". */
.shub-k.ra-preset { position: relative; }
.shub-preset-act { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.shub-mini { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-soft);
  background: var(--surface-3); color: var(--ink-soft); cursor: pointer; font-size: 12px; line-height: 1;
  display: grid; place-items: center; }
.shub-mini:hover { color: var(--ink); border-color: var(--line); }
/* Gem-som-fast i guidens review-trin. */
.wiz-saveas { margin-top: 14px; padding: 12px 13px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(var(--accent-rgb), .05); }
.wiz-name { margin-top: 9px; width: 100%; font: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.wiz-name:disabled { opacity: .5; }
.wiz-saveas-note { font-size: 11.5px; color: var(--ink-soft); margin: 8px 0 0; }
.wiz-saveas-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wiz-saveas-row .wiz-saveas-note { margin: 0; }
.wbtn2 { font: inherit; font-weight: 600; font-size: 12.5px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.wbtn2:hover { background: rgba(var(--accent-rgb), .10); }
/* Custom-downloads: lodret kort i Udrustnings fs-card-stil (Christian 4/9). */
.shub-k.ra-vcard, .shub-k.ra-vnew {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 5px; min-height: 182px; padding: 18px 15px; }
.shub-k.ra-vcard {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  border-color: var(--line-soft); }
.shub-k.ra-vcard:hover { transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .55); }
.shub-k.ra-vcard .shub-ico { grid-row: auto; font-size: 30px; opacity: 1; }
.shub-k.ra-vcard .shub-t { justify-content: center; font-size: 15px; font-weight: 800;
  line-height: 1.2; overflow-wrap: anywhere; max-height: 2.4em; overflow: hidden; }
.dl-meta { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.dl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 1px; }
.dl-chip { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px;
  border-radius: 999px; color: var(--accent); background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .24); }
.dl-dates { display: flex; flex-direction: column; gap: 1px; margin-top: 6px;
  font-size: 11px; color: var(--ink-soft); opacity: .8; line-height: 1.35; }
/* "+"-kortet: samme lodrette form, men stiplet og daempet. */
.shub-k.ra-vnew { border-style: dashed; background: rgba(255, 255, 255, .02);
  color: var(--ink-soft); opacity: .8; }
.shub-k.ra-vnew:hover { opacity: 1; border-color: rgba(var(--accent-rgb), .55);
  color: var(--accent); transform: translateY(-2px); }
.shub-k.ra-vnew .shub-ico { grid-row: auto; font-size: 30px; font-weight: 300; opacity: .9; }
.shub-k.ra-vnew .shub-t { justify-content: center; font-size: 14px; font-weight: 700; }
.shub-k.ra-vnew .shub-d, .shub-k.ra-vnew .shub-m { display: none; }
/* Saved downloads: guiden viser detaljerne, saa kortet behoever ikke afsnittet. */
.shub-k.ra-slim .shub-m { display: none; }
.shub-k.ra-slim { align-content: start; }

/* ---- SENSORER OG KALIBRERING ----

   INGEN ROEDE MARKERINGER. En passeret kalibreringsdato er ikke en fejl, og en
   roed raekke ville faa den der laeser skaermen til at tro at maalingerne var
   forkerte - og saa er det teknikeren der skal forsvare noget der ikke er sket.
   "Forbi et aar" staar i dæmpet gult og betyder "vaerd at kigge paa". */
.cs-body { display: flex; flex-direction: column; gap: 18px;
  max-height: min(72vh, 720px); overflow-y: auto; padding: 2px; }
.cs-intro { font-size: 13px; line-height: 1.6; color: var(--ink-soft);
  padding: 12px 14px; border-radius: 12px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .18); margin: 0; }
.cs-grp > h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 8px; }
.cs-grp > h4 span { text-transform: none; letter-spacing: 0; font-size: 11.5px;
  font-weight: 400; color: var(--ink-soft); opacity: .7; }
.cs-rows { display: flex; flex-direction: column; gap: 1px; }
.cs-row { display: grid; grid-template-columns: 1fr 110px 90px 110px;
  gap: 12px; align-items: baseline; padding: 9px 12px; font-size: 13px;
  background: rgba(255, 255, 255, .028); }
.cs-row:first-child { border-radius: 10px 10px 0 0; }
.cs-row:last-child { border-radius: 0 0 10px 10px; }
.cs-row:only-child { border-radius: 10px; }
.cs-navn { font-weight: 600; display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap; min-width: 0; }
.cs-sn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; opacity: .55; font-weight: 400; }
.cs-dato, .cs-alder { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.cs-alder { text-align: right; }
.cs-mark { font-size: 10.5px; letter-spacing: .04em; text-align: right;
  opacity: .75; }
.cs-row.is-over .cs-mark { color: #f0b429; opacity: 1; }
.cs-row.is-over .cs-alder { color: #f0c869; }
.cs-row.is-ingen .cs-mark, .cs-row.is-ukendt .cs-mark { opacity: .45; }
/* Hvorfor det driver - staar ÉN gang pr. slags sensor, ikke pr. raekke. */
.cs-hvorfor { font-size: 12px; line-height: 1.55; opacity: .62; margin: 8px 2px 0; }
.cs-trin { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-t { font-size: 11px; padding: 4px 9px; border-radius: 8px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft);
  display: flex; gap: 7px; align-items: baseline; }
.cs-t b { font-weight: 700; color: var(--accent); }
.cs-fod { font-size: 12px; opacity: .6; line-height: 1.55; margin: 0;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) {
  .cs-row { grid-template-columns: 1fr auto; }
  .cs-alder, .cs-mark { text-align: left; }
}


/* "Forbi et aar" paa temperatur, ledningsevne og tryk: alderen staar der, men
   uden farve. De driver af noget andet end kalenderen (se noten under hver
   gruppe), og syv gule maerker i traek laeses som syv fejl. */
.cs-row.is-over-mild .cs-mark { opacity: .55; }
.cs-row.is-over-mild .cs-alder { color: var(--ink-soft); }

/* ---- CTD SENSOR-PAKKER ---- */
.cp-body { display: flex; flex-direction: column; gap: 16px;
  max-height: min(72vh, 720px); overflow-y: auto; padding: 2px; }
.cp-intro { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 0;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .18); }
.cp-par { padding: 13px 15px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); }
/* Kun det par hvor noget FLYTTEDE SIG faar en kant. Et stabilt offset er ikke
   en haendelse, og en kant om alle fire linjer ville sige at alt var galt. */
.cp-par.har-trin { border-color: rgba(240, 180, 41, .45);
  background: rgba(240, 180, 41, .05); }
.cp-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cp-navn { font-weight: 700; font-size: 14px; }
.cp-n { font-size: 11px; opacity: .5; margin-left: auto; }
.cp-graf { overflow-x: auto; }
.cp-spark { display: block; width: 100%; min-width: 260px; height: 46px; }
.cp-tal { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 9px; }
.cp-tal span { display: flex; align-items: baseline; gap: 3px; font-size: 11px;
  opacity: .75; }
.cp-tal b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  opacity: 1; }
.cp-tal i { font-style: normal; font-size: 10.5px; opacity: .65; margin-left: 5px; }
.cp-dom { font-size: 12.5px; line-height: 1.55; margin: 10px 0 0; opacity: .8; }
.cp-flag { font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  margin-right: 7px; background: rgba(240, 180, 41, .18); color: #f0b429; }
.cp-flag.mild { background: rgba(120, 160, 200, .16); color: var(--ink-soft); }
.cp-fod { font-size: 12px; opacity: .6; line-height: 1.55; margin: 0;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* ---- WATCH STATIONS ON MAP ---- */
.smap { position: fixed; inset: 0; z-index: 1200; display: flex;
  align-items: center; justify-content: center; padding: 12px;
  background: rgba(3, 10, 18, .72); backdrop-filter: blur(3px); }
.smap.hidden { display: none; }
.smap-card {
  /* FYLD SKAERMEN. Der stod min(1500px) og min(1000px) - to lofter der paa en
     1920-skaerm gav 400 px ubrugt til hoejre og 270 px i bunden, og som paa en
     stoerre skaerm blev endnu mere spild. Kortet ER opgaven her, og overblik
     over et togt bliver bedre af hver kvadratcentimeter.

     100% af overlayet frem for vw/vh: overlayet ligger allerede praecis over
     skaermen, mens vw/vh skal regnes om med --ui-zoom og let bliver forkert. */
  width: 100%; height: 100%;
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-4); }
/* ---- "HER ER VI NU" paa varmekortet ------------------------------------
   En roelig prik med én ring der aander. Ingen animation naar brugeren har
   bedt om ro (prefers-reduced-motion) - saa staar ringen bare stille. */
.ofp-nu { position: relative; }
.ofp-nu b {
  position: absolute; left: 5px; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 2.5px #e4322b, 0 1px 4px rgba(0, 0, 0, .55);
}
.ofp-nu i {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid rgba(228, 50, 43, .75);
  animation: ofpPuls 2.4s ease-out infinite;
}
@keyframes ofpPuls {
  0%   { transform: scale(.45); opacity: .95; }
  70%  { transform: scale(1);   opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ofp-nu i { animation: none; opacity: .6; }
}

/* ---- hvilken maaling skal figuren vise --------------------------------
   Staar i hovedet, ikke paa arket: det er ikke en indstilling, det er hvilken
   figur man laver. Kun kanaler der faktisk maaler noget faar en knap. */
/* Maalingerne staar paa deres egen linje under hovedet - ellers klemmer de
   knapperne, og "Save image" braekker midt over. */
.ofp-valg {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin: -2px 0 10px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line, #2a3b52);
}
.ofp-valg .vfo-chip { white-space: nowrap; }
/* En knap skal aldrig braekke midt over. */
.ofp-card .modal-head .btn { white-space: nowrap; }
/* Linjen der siger hvorfor en figur ikke tilbydes. Uden den leder man efter
   en knap der ikke er der. */
.ofp-mangler {
  margin-top: 8px; font-size: 11px; line-height: 1.5;
  color: var(--ink-soft, #93a7bd); opacity: .85;
}

/* Kanaler uden foeler: knappen er der (foeleren kan komme), men daempet og
   maerket. Maerket sidder PAA knappen, saa man ikke skal laese en note et
   andet sted for at vide hvad man vaelger. */
.vfo-chip.tom { opacity: .62; }
.vfo-chip.tom.on { opacity: 1; }
.ofp-tag {
  margin-left: 6px; padding: 1px 5px; border-radius: 5px;
  background: rgba(179, 38, 30, .22); color: #ff9b93;
  font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; vertical-align: 1px;
}
/* Striben hoerer til ARKET og printes med: et billede der forlader
   programmet skal selv kunne forklare sig. */
.ofp-advarsel {
  margin: -2px 0 2px; padding: 6px 9px; border-radius: 7px;
  background: rgba(179, 38, 30, .16);
  border: 1px solid rgba(179, 38, 30, .45);
  color: #ff9b93; font-size: 11.5px; line-height: 1.45; font-weight: 600;
}

/* ---- skalaen kan saettes selv ------------------------------------------
   To felter og en Auto-knap. Automatikken daekker naesten altid; det her er
   til naar to figurer i den samme rapport skal kunne sammenlignes. */
.ofp-range {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line, #2a3b52);
  font-size: 11.5px; color: var(--ink-soft, #93a7bd);
}
.ofp-range label {
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  font-size: 10.5px; color: var(--ink-soft, #93a7bd);
}
.ofp-range input {
  width: 78px; padding: 4px 7px; border-radius: 7px;
  border: 1px solid var(--line, #2a3b52);
  background: var(--panel, #101a27); color: var(--ink, #dbe7f3);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.ofp-range input:focus {
  outline: none; border-color: var(--accent, #3ddc97);
}
.ofp-range em { font-style: normal; opacity: .8; }

/* Advarsel i Download image: togtet koerer stadig, saa figuren er et
   oejebliksbillede. Gul - ikke roed: tallene er rigtige nok, der mangler
   bare nogle doegn endnu. */
.vfo-igang {
  margin: 2px 0 12px; padding: 8px 10px; border-radius: 8px;
  background: rgba(214, 158, 46, .14);
  border: 1px solid rgba(214, 158, 46, .45);
  color: #f0c674; font-size: 12px; line-height: 1.5;
}
.vfo-igang b { color: #ffd98a; }

/* ---- SURVEY-KORT (togtrapportens Fig. 1) --------------------------------
   Ét billede til et dokument: hvor blev der arbejdet, med hvad, og lykkedes
   det. Bredere end varmekortet - hele Nordsoeen med ICES-koder kraever plads. */
.sv-card { width: min(1240px, 96vw); }
.sv-ark {
  background: var(--panel-2, #0e1826); border: 1px solid var(--line, #2a3b52);
  border-radius: 12px; padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.sv-titel {
  font-size: 14px; font-weight: 700; letter-spacing: .2px;
  color: var(--ink, #dbe7f3);
}
.sv-kort {
  /* Hoejden deles med zoomen - ellers vokser kortet ud af ruden paa 125 %. */
  height: calc(62vh / var(--ui-zoom, 1)); min-height: 300px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line, #2a3b52); background: #0a141d;
}
.sv-under { display: flex; flex-direction: column; gap: 8px; }
/* Legenden er ET GITTER: overskrift til venstre, symboler til hoejre. To
   spoergsmaal (hvilket redskab, gik det godt) holdt adskilt. */
.sv-leg {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px;
  align-items: center;
}
.sv-leg-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft, #93a7bd);
  white-space: nowrap;
}
.sv-leg-r { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sv-leg-r span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink, #dbe7f3);
}
.sv-leg-r svg { display: block; }
.sv-ben { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.sv-kilde {
  font-size: 10.5px; line-height: 1.5; color: var(--ink-soft, #93a7bd);
}
/* ICES-koden i nettet: skal kunne laeses uden at tage opmaerksomhed fra
   stationerne. */
.sv-ices {
  font-size: 9px; color: rgba(60, 74, 88, .8); text-align: center;
  line-height: 13px; font-weight: 600; pointer-events: none;
  text-shadow: 0 0 3px rgba(255, 255, 255, .85);
}
.sv-stn { pointer-events: auto; }
/* Format-valget staar mellem titlen og knapperne: det er et valg om FIGUREN,
   ikke om vinduet. */
.sv-format { display: inline-flex; gap: 5px; margin: 0 auto 0 14px; }
/* STAAENDE: bredden afledes af hoejden (A4-agtigt 1:1,3), og kortet
   centreres - ellers ville "staaende" bare vaere et smallere landskab. */
/* STAAENDE: kun hoejden og centreringen staar her. BREDDEN saettes af
   JavaScript ud fra den MAALTE hoejde - se malForm().

   Hvorfor ikke i CSS: `calc(66vh / var(--ui-zoom) / 1.3)` gav bredden nul, og
   `aspect-ratio` med `width: auto` fik browseren til at regne hoejden AF
   bredden - som ogsaa var nul. Begge veje endte med at Leaflet maalte ruden
   til 0 x 298 og sprang sit fitBounds over. Ét maal maalt er mere robust end
   to maal regnet. */
.sv-ark.staaende .sv-kort {
  height: calc(66vh / var(--ui-zoom, 1));
  margin: 0 auto;
}

@media print {
  body.sv-printer > *:not(#svModal) { display: none !important; }
  body.sv-printer #svModal {
    position: static !important; display: block !important;
    background: none !important; padding: 0 !important;
  }
  body.sv-printer .sv-card {
    width: 100% !important; max-width: none !important;
    box-shadow: none !important; border: 0 !important;
    background: none !important; padding: 0 !important;
  }
  body.sv-printer .sv-skjul-print { display: none !important; }
  body.sv-printer .sv-ark {
    background: #fff !important; border: 0 !important; padding: 0 !important;
  }
  body.sv-printer .sv-titel { color: #111 !important; font-size: 13pt; }
  body.sv-printer .sv-leg-r span { color: #111 !important; }
  body.sv-printer .sv-leg-h,
  body.sv-printer .sv-kilde { color: #444 !important; }
  /* Maalene er laast i pixels af print-knappen - roer dem ikke. */
  body.sv-printer .sv-kort {
    border-color: #999 !important; margin: 0 auto !important;
  }
  body.sv-printer .leaflet-tooltip { display: none !important; }
  /* Papirretningen skrives ind af print-knappen (se svPapir): @page kan
     ikke gøres betinget af en klasse. */
}

/* ---- FERRYBOX-VARMEKORT: det faerdige ark ------------------------------
   Vinduet ER previewet: det man ser er det der kommer ud af printeren. */
.ofp-card { width: min(1100px, 94vw); }
.ofp-ark {
  background: var(--panel-2, #0e1826); border: 1px solid var(--line, #2a3b52);
  border-radius: 12px; padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ofp-titel {
  font-size: 14px; font-weight: 700; letter-spacing: .2px;
  color: var(--ink, #dbe7f3);
}
.ofp-kort {
  /* Hoejden skal deles med zoomen, ellers vokser kortet ud af ruden naar
     skaermen staar paa 125 %. */
  height: calc(58vh / var(--ui-zoom, 1)); min-height: 260px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line, #2a3b52); background: #0a141d;
}
.ofp-off {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 24px; text-align: center; color: var(--ink-soft, #93a7bd);
  font-size: 13px; line-height: 1.6;
}
.ofp-under { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.ofp-skala { flex: 0 1 340px; min-width: 220px; }
.ofp-bar {
  height: 12px; border-radius: 3px; border: 1px solid var(--line, #2a3b52);
}
.ofp-tal {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink, #dbe7f3);
}
.ofp-enhed {
  margin-top: 1px; font-size: 11px; color: var(--ink-soft, #93a7bd);
}
.ofp-kilde {
  flex: 1 1 240px; text-align: right; font-size: 11px; line-height: 1.5;
  color: var(--ink-soft, #93a7bd);
}

/* PRINT. Alt andet end arket ud af vejen, og sort paa hvidt - fliserne er
   lyse i forvejen, saa kortet ser ud som paa skaermen. */
@media print {
  body.ofp-printer > *:not(#ofPrintModal) { display: none !important; }
  body.ofp-printer #ofPrintModal {
    position: static !important; display: block !important;
    background: none !important; padding: 0 !important;
  }
  body.ofp-printer .ofp-card {
    width: 100% !important; max-width: none !important; box-shadow: none !important;
    border: 0 !important; background: none !important; padding: 0 !important;
  }
  body.ofp-printer .ofp-skjul-print { display: none !important; }
  body.ofp-printer .ofp-ark {
    background: #fff !important; border: 0 !important; padding: 0 !important;
  }
  body.ofp-printer .ofp-titel { color: #111 !important; font-size: 13pt; }
  body.ofp-printer .ofp-advarsel {
    background: #b3261e !important; border-color: #b3261e !important;
    color: #fff !important; print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* Maalene roeres IKKE: de er laast i pixels af print-knappen, saa kortet
     ser ud paa papiret som det gjorde paa skaermen. Det centreres blot. */
  body.ofp-printer .ofp-kort {
    border-color: #999 !important; margin: 0 auto !important;
  }
  body.ofp-printer .ofp-tal { color: #111 !important; }
  body.ofp-printer .ofp-enhed,
  body.ofp-printer .ofp-kilde { color: #444 !important; }
  body.ofp-printer .leaflet-control-attribution { font-size: 7pt; }
  /* "Her er vi nu" hoerer til skaermen. Paa et stykke papir er der intet
     "nu", og en uforklaret prik paa en rapportfigur er en fejlkilde. */
  body.ofp-printer .ofp-nu,
  body.ofp-printer .leaflet-tooltip { display: none !important; }
  @page { size: A4 landscape; margin: 12mm; }
}

.smap-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft); }
.smap-title { font-weight: 800; font-size: 15px; margin-right: auto; }
.smap-title span { font-weight: 400; opacity: .6; font-size: 13px; }
.smap-sel { font-family: inherit; font-size: 12.5px; padding: 5px 9px;
  border-radius: 9px; background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line-soft); }
.smap-sw { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--ink-soft); cursor: pointer; }
.smap-file { cursor: pointer; }
.smap-canvas { flex: 1 1 auto; min-height: 0; background: #0a141d; }
.smap-loading, .smap-offline { display: flex; align-items: center;
  justify-content: center; height: 100%; padding: 30px; text-align: center;
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }

.smap-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-2);
  border-top: 1px solid var(--line-soft); }
.smap-stats { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.smap-st { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px;
  color: var(--ink-soft); }
.smap-st b { font-size: 19px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.smap-st i { font-style: normal; opacity: .6; }
/* Hvad tallet IKKE er. Uden den linje bliver "142 nautical miles" citeret som
   den sejlede distance, og det er den ikke. */
.smap-note { flex: 1 1 100%; font-size: 10.5px; opacity: .5; margin-top: -4px; }
.smap-msg { flex: 1 1 100%; font-size: 12px; color: #f0b429; margin-top: 4px; }
.smap-leg { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.smap-lg { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--ink-soft); }
.smap-lg i { width: 10px; height: 10px; border-radius: 50%; display: block;
  border: 1.5px solid rgba(8, 19, 28, .8); }
.smap-lg-plan i { background: transparent; border: 1.5px dashed #7f9bb5; }
/* Togtlederens navn paa det planlagte punkt. Ingen ramme og ingen pil: 40 kasser
   ville skjule det kort de staar paa. Skyggen er det der holder teksten laesbar
   baade over hav og over land. */
.smap .leaflet-tooltip.smap-navn { background: transparent; border: 0;
  box-shadow: none; padding: 0; font-size: 11.5px; font-weight: 700;
  color: #cfe4f7; white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .8); }
.smap .leaflet-tooltip.smap-navn::before { display: none; }
.smap.er-lys .leaflet-tooltip.smap-navn { color: #123b5e;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .95), 0 0 6px rgba(255, 255, 255, .9); }

/* Pilene paa ruten. Ingen baggrund - de skal ligge PAA stregen, ikke ved siden af. */
.smap-arrow { color: #9fd0ff; font-size: 13px; line-height: 16px; text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, .8); }
.smap-arrow span { display: block; }
/* Lys baggrund -> moerk pil, ellers forsvinder den i havet. */
.smap.er-lys .smap-arrow { color: #14507f; text-shadow: 0 0 3px rgba(255, 255, 255, .9); }

/* Leaflets egen popup faar fladens toner. */
.smap .leaflet-popup-content-wrapper { background: var(--surface-2); color: var(--ink);
  border-radius: 12px; box-shadow: var(--sh-3); }
.smap .leaflet-popup-tip { background: var(--surface-2); }
.smap-pop { font-size: 12.5px; min-width: 190px; }
.smap-pop > b { font-size: 16px; }
.smap-pop-t { display: block; font-size: 11px; opacity: .6; margin: 1px 0 7px; }
.smap-pop-r { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.smap-pop-r span { opacity: .6; }
.smap-pop-r b { font-variant-numeric: tabular-nums; font-weight: 600; }
.smap-pop-n { margin-top: 6px; font-size: 11px; color: #f0b429; }
/* Udstyrets tal for sig selv i boblen - med en overskrift, saa de ikke
   forsvinder mellem klokkeslæt og position. */
.smap-pop-hd { margin: 8px 0 2px; font-size: 10px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; opacity: .55;
  border-top: 1px solid var(--line-soft); padding-top: 6px; }
/* HVOR TALLET KOMMER FRA staar ved tallet. "typed" er broens egen aflæsning,
   "avg" er sensorens snit over hele stationen, "deepest" er det dybeste den
   naaede. Et snit og en venderdybde er ikke det samme, og uden de her tre ord
   ligner de hinanden fuldstændig. */
.smap-pop-k { font-style: normal; font-weight: 600; font-size: 9.5px;
  letter-spacing: .05em; text-transform: uppercase; opacity: .5;
  margin-left: 5px; }

/* ---- DET LILLE KORT VED MUSEN ----
   Det skal kunne læses i ét blik uden at dække kortet: navn og type øverst,
   tallene under i hver sin lille søjle med etiketten under tallet. */
.smap .leaflet-tooltip.smap-hover { background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
  box-shadow: var(--sh-3); font-size: 12px; white-space: nowrap; }
.smap .leaflet-tooltip.smap-hover::before { border-top-color: var(--line); }
.smap-hv-h { display: block; font-size: 12.5px; }
.smap-hv-h b { font-weight: 800; }
.smap-hv-tal { display: flex; gap: 14px; margin-top: 5px;
  padding-top: 5px; border-top: 1px solid var(--line-soft); }
.smap-hv-tal i { display: flex; flex-direction: column; font-style: normal;
  font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; opacity: .55; }
.smap-hv-tal i b { font-size: 14px; font-weight: 800; opacity: 1;
  letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

/* ---- LEGENDEN ER FILTERET ----
   Prikkerne har farverne i forvejen; at bygge en menu ved siden af ville være
   det samme to steder. Derfor er hver farve en knap. */
/* ---- SIDEPANELET ----
   Ligger OVEN PAA kortet i stedet for at tage en spalte af det: kortet er det
   man kom efter, og et panel der skubber kortet sammen, koster overblik hver
   eneste gang - ogsaa naar man ikke kigger paa tallene. Klappes det sammen,
   er der kun en lille fane tilbage. */
/* ---- SKUFFEN ----
   Samme mekanik som .ctd-drawer og .vnc-drawer: den sidder KLODS op ad kanten
   (right: 0, ingen runding i hoejre side), og den skydes ind ved at flytte
   `right` - ikke med transform - saa fanen bliver liggende og stikker ud.
   En skuffe der forsvinder helt, kraever en knap et andet sted for at komme
   tilbage; en fane er den knap, og den staar samme sted hver gang.

   Bredden er sat efter det LAENGSTE tal: "007°09.167' E" skal kunne staa paa
   én linje sammen med sin makker, ellers brakker positionen over og skuffen
   hopper i hoejden hver gang skibet passerer en hel grad. */
.smap-side { --sw: 320px;
  /* BAADE top OG bottom. Foer stod der kun `top`, og saa var skuffens hoejde
     "auto" - hvorefter `max-height: calc(100% - 20px)` paa kroppen ikke
     betoed noget, fordi en procent af auto ikke kan regnes ud. Resultatet var
     en skuffe der bare voksede: Print laa neden for kortets underkant og
     kunne ikke rulles frem. Med begge sat har skuffen en rigtig hoejde, og
     kroppen kan holde sig inden for den. */
  position: absolute; top: 10px; bottom: 10px; right: 0; z-index: 500;
  display: flex; align-items: flex-start;
  /* SKYDES MED transform, IKKE MED `right` ELLER margin.

     CTD-skuffen flytter sig med `right`, og det var ogsaa forsoeget her.
     I DEN her beholder gjorde det ingenting: skuffen ligger absolut inde i
     .smap-wrap, som er en flex-beholder, og maalt i browseren blev baade
     `right: -320px`, `right: -320px !important` og negativ margin-right
     beregnet til 0px. Elementet flyttede sig ikke en pixel.

     transform virker overalt. Og der flyttes med var(--sw) - KROPPENS bredde -
     ikke med 100%: 100% er hele skuffen, fane og krop, og saa ryger fanen med
     ud af billedet. Det var netop fejlen i den foerste udgave, hvor skuffen
     forsvandt helt og kraevede en ekstra knap et andet sted for at komme
     tilbage. Med kroppens bredde lander fanen praecis i kanten. */
  transition: transform .18s ease; }
.smap-side.er-lukket { transform: translateX(var(--sw)); }
.smap-side-krop { width: var(--sw); max-height: 100%; overflow-y: auto;
  background: rgba(10, 20, 29, .94);
  border: 1px solid rgba(255, 255, 255, .12); border-right: 0;
  border-radius: 14px 0 0 14px; box-shadow: var(--sh-4);
  color: #eaf3fb; padding: 12px 16px 16px; }
.smap-side.hidden { display: none; }
/* Her stod en aeldre regel der skoed HELE skuffen ud af billedet med
   translateX + opacity: 0 - fra dengang panelet svaevede og havde sin egen
   "vis"-knap et andet sted. Den stod EFTER `right`-reglen og vandt, saa fanen
   forsvandt sammen med resten og skuffen kunne ikke hentes tilbage.
   Skydningen sker nu ét sted: `right` paa .smap-side. */
/* Fanen. Lodret tekst, som i CTD-skuffen - tre-fire bogstaver laeses fint
   saadan, og en smal fane maa ikke tage kortflade naar skuffen er skudt ind. */
/* Fanen er den eneste vej tilbage til skuffen naar den er skudt ind, saa den
   maa ikke vaere det mindste element paa skaermen. 34 px bred og med luft om
   teksten - stadig en fane, men en man rammer uden at sigte. */
.smap-side-tab { flex: 0 0 auto; width: 34px; cursor: pointer;
  font-family: inherit; margin-top: 8px;
  background: rgba(10, 20, 29, .94); color: #cfe0ee;
  border: 1px solid rgba(255, 255, 255, .12); border-right: 0;
  border-radius: 11px 0 0 11px; padding: 16px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.smap-side-tab:hover { color: #fff; border-color: var(--accent); }
.smap-side-txt { writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; }
/* Pilen peger den vej skuffen gaar: ude -> ud, inde -> ind. */
.smap-side-chev { font-size: 17px; line-height: 1; transition: transform .18s ease; }
.smap-side.er-lukket .smap-side-chev { transform: rotate(180deg); }
/* Overskrift pr. instrument. Hver blok vises kun naar instrumentet leverer,
   så panelet vokser og skrumper med det der faktisk er i vandet. */
.smap-live-h2 { display: flex; align-items: baseline; gap: 6px;
  margin: 12px 0 4px; padding-top: 10px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: #8fb6d6;
  border-top: 1px solid rgba(255, 255, 255, .1); }

/* ---- TALLENE SKAL KUNNE LAESES PAA AFSTAND ----
   Skuffen bliver kigget paa fra den anden side af bordet, ikke laest som en
   tabel. Derfor: etiketten lille og daempet, tallet stort og fast bredde, og
   enheden mindre end tallet - saa "37,4" er dét oejet rammer, ikke "m". */
.smap-side .smap-live-r { align-items: baseline; padding: 4px 0; }
.smap-side .smap-live-r span { font-size: 13px; opacity: .72; }
.smap-side .smap-live-r b { font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.smap-side .smap-live-r b small { font-size: 12px; font-weight: 600;
  opacity: .55; margin-left: 3px; }
/* INGEN DATA: navnet staar, tallet er en tankestreg. Dashen faar samme
   stoerrelse som tallene, saa raekken ikke skifter hoejde naar en sensor
   kommer og gaar - det er praecis dét hop der faar folk til at laese det
   forkerte tal ved det rigtige navn. */
.smap-side .smap-live-r.er-tom b { opacity: .45; letter-spacing: .12em; }
/* GAMMELT TAL: tonet ned, med sin alder ved navnet. Et tal der ikke er blevet
   opdateret i et par minutter, maa ikke se ud som en maaling fra lige nu. */
.smap-side .smap-live-r.er-gammel b { opacity: .5; }
.smap-side .smap-live-r span u { display: block; text-decoration: none;
  font-size: 10px; letter-spacing: .04em; color: #f0b429; opacity: .85;
  margin-top: -1px; }

/* Positionen: overskrift over, koordinater under i fuld bredde. */
.smap-live-pos { margin-top: 2px; }
.smap-live-pos span { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; opacity: .5; }
.smap-live-pos b { display: block; font-size: 15.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 1px; }

/* Fart og kurs side om side - to tal man laeser sammen. */
.smap-live-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 9px; }
.smap-live-n span { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; opacity: .5; }
.smap-live-n b { display: block; font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.smap-live-h2 i { font-style: normal; font-weight: 600; font-size: 9px;
  letter-spacing: .04em; opacity: .65; margin-left: auto; }
/* Farveprik pr. dybdesensor - de SAMME farver som Dana Maps' data-kort, saa de
   to skaerme kan laeses af den samme person uden at skulle laere to sæt. */
.smap-live-r span i { display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 7px; vertical-align: middle; }
/* En sensor der ikke sender: navnet staar, tallet er en tankestreg. Raekken
   maa ALDRIG forsvinde - saa flytter de andre sig, og man laeser det forkerte
   tal ved det rigtige navn. */
.smap-live-r.er-tom { opacity: .45; }
.smap-live-r.er-tom b { font-weight: 400; }

/* ---- ET KORT PR. SENSOR ----
   Stjaalet fra Dana Maps' data-panel, fordi det virker: farven baerer
   betydningen, og tallet staar stort i sin egen farve i stedet for at vaere
   endnu en raekke i en liste. */
.smap-kortgitter { display: grid; gap: 8px; margin-top: 2px; }
.smap-kort { position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 13px; border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cc) 15%, transparent), rgba(255, 255, 255, .02)); }
.smap-kort-prik { position: absolute; top: 11px; right: 12px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cc); box-shadow: 0 0 8px var(--cc); }
.smap-kort-l { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #9fb3c2; }
.smap-kort-v { font-family: ui-monospace, Consolas, monospace; font-size: 30px;
  font-weight: 800; line-height: 1.05; color: var(--cc);
  font-variant-numeric: tabular-nums; }
.smap-kort-v small { font-size: .4em; opacity: .7; }
/* Ingen data: kortet bliver staaende, men uden farve. Forsvandt det, ville de
   andre rykke op - og saa laeser man det forkerte tal ved det rigtige navn. */
.smap-kort.er-tom { background: rgba(255, 255, 255, .02); }
.smap-kort.er-tom .smap-kort-v { color: #7c8c9a; letter-spacing: .1em; }
.smap-kort.er-tom .smap-kort-prik { background: #55606c; box-shadow: none; }
/* Gammelt tal: prikken holder op med at lyse, og alderen staar der. */
.smap-kort.er-gammel .smap-kort-v { opacity: .55; }
.smap-kort.er-gammel .smap-kort-prik { background: #55606c; box-shadow: none; }
.smap-kort-alder { position: absolute; right: 12px; bottom: 10px; font-size: 10px;
  letter-spacing: .04em; color: #f0b429; }

.smap-lg-lab { font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; opacity: .5; align-self: center; }
.smap-lg-b { font-family: inherit; cursor: pointer; height: 26px;
  padding: 0 10px; border-radius: 13px; background: var(--surface-3);
  border: 1px solid var(--line-soft); color: var(--ink);
  transition: opacity .12s, border-color .12s; }
.smap-lg-b u { text-decoration: none; opacity: .5;
  font-variant-numeric: tabular-nums; }
.smap-lg-b:hover { border-color: var(--accent); }
/* Fravalgt: stadig fuldt læsbar. Bliver den for svag, kan man ikke finde den
   type man lige har slået fra - og så er filteret en fælde. */
.smap-lg-b.er-fra { opacity: .42; background: transparent; }
.smap-lg-b.er-fra i { filter: grayscale(1); }
.smap-lg-alle { font-family: inherit; cursor: pointer; height: 26px;
  padding: 0 12px; border-radius: 13px; font-weight: 700;
  background: var(--accent); border: 1px solid var(--accent); color: #06121d; }
/* Slukket: samme plads, samme stoerrelse - kun tonet ned. Den maa ikke fylde
   mindre naar den er inaktiv, for saa flytter raekken sig alligevel. */
.smap-lg-alle:disabled { cursor: default; background: transparent;
  border-color: var(--line-soft); color: var(--ink); opacity: .38; }

/* ---- BUILD MY ROUTE: KNAPPERNE NEDERST ----
   De to knapper stod midt i den tomme hoejre spalte, i halv skaermbredde, med
   en centreret linje tekst svaevende over sig - der var ikke noget der bandt
   dem til noget. Nu ligger de nederst til hoejre, i normal knaphoejde, hvor
   handlinger ligger i resten af programmet; teksten begynder oppe i venstre
   hjoerne hvor man laeser fra. */
.br-hoejre { display: flex; flex-direction: column; min-height: 0; }
.br-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.br-tom, .br-fejl { text-align: left; margin: 0; padding: 2px 0; }
.br-acts { display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); }
.br-acts .btn { height: 38px; padding: 0 18px; flex: 0 0 auto; }
.br-acts .btn.go { background: var(--ok, #1f9d6b); border-color: var(--ok, #1f9d6b);
  color: #fff; font-weight: 700; }
.br-acts .btn:disabled { opacity: .45; cursor: default; }

/* ---- PRINT ----
   Kun kortet paa papiret. Alt andet i programmet er skaerm-ting, og en
   udskrift med topbar og sidepanel er spild af blaek og forvirrende at kigge
   paa bagefter. */
@media print {
  body.smap-printer > *:not(#stationMap) { display: none !important; }
  body.smap-printer #stationMap { position: static; padding: 0; background: #fff;
    backdrop-filter: none; }
  body.smap-printer .smap-card { width: 100%; height: auto; box-shadow: none;
    border: 0; background: #fff; color: #111; }
  body.smap-printer .smap-canvas { height: 17cm; background: #fff; }
  body.smap-printer .smap-bar { display: none; }
  body.smap-printer .smap-foot { background: #fff; border-top: 1px solid #ccc; }
  body.smap-printer .smap-st, body.smap-printer .smap-lg,
  body.smap-printer .smap-note { color: #333; }
  body.smap-printer .smap-st b { color: #000; }
  body.smap-printer .leaflet-control-zoom { display: none; }
}


/* En popup der aabnes INDE FRA stationskortet skal ligge over det.
   #detailsModal staar paa 90; alt andet .modal paa 80 - saa de nye paneler
   landede bagved og saa ud som om knappen ikke virkede. */
.modal.over-detaljer { z-index: 95; }

/* Kolonneoverskrifter i sensor-listen. */
.cs-row.cs-hd { background: none; padding-bottom: 4px; font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
  opacity: .65; font-weight: 700; }
.cs-row.cs-hd span:nth-child(3) { text-align: right; }
.cs-row.cs-hd span:nth-child(4) { text-align: right; }
.cs-rows .cs-row.cs-hd + .cs-row { border-radius: 10px 10px 0 0; }

/* ---- PRINT: staaende A4, kun panelet ----
   Papiret skal kunne ligge i en mappe: hvidt, sort tekst, ingen skaerm-ting. */
.cs-printhead { display: none; }
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body.cs-printer > *:not(#ctdSensModal) { display: none !important; }
  body.cs-printer #ctdSensModal { position: static; display: block;
    background: #fff; backdrop-filter: none; }
  body.cs-printer #ctdSensModal .modal-card { width: 100%; max-width: none;
    box-shadow: none; border: 0; background: #fff; color: #111; }
  body.cs-printer .modal-head { display: none; }
  body.cs-printer .cs-printhead { display: block; margin-bottom: 10mm; }
  body.cs-printer .cs-printhead b { display: block; font-size: 15pt; }
  body.cs-printer .cs-printhead span { font-size: 9pt; color: #555; }
  body.cs-printer .cs-body { max-height: none; overflow: visible; gap: 7mm; }
  body.cs-printer .cs-intro { background: #f2f5f8; border-color: #ccd;
    color: #222; }
  body.cs-printer .cs-grp > h4 { color: #000; }
  body.cs-printer .cs-row { background: #f7f9fb; page-break-inside: avoid; }
  body.cs-printer .cs-row.cs-hd { background: none; color: #444; }
  body.cs-printer .cs-dato, body.cs-printer .cs-alder,
  body.cs-printer .cs-hvorfor, body.cs-printer .cs-fod { color: #333; }
  /* Gult forsvinder paa papir. Det ene der SKAL kunne ses, faar en ramme. */
  body.cs-printer .cs-row.is-over { outline: 1.2pt solid #b8860b; }
  body.cs-printer .cs-row.is-over .cs-mark { color: #7a5c00; font-weight: 700; }
  body.cs-printer .cs-grp { page-break-inside: avoid; }
}

/* ---- CTD-kolonner ---- */
.cc-sample { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 9px 11px; border-radius: 10px; resize: vertical;
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-soft); }
.cc-body { display: flex; flex-direction: column; gap: 3px; margin-top: 12px;
  max-height: min(56vh, 560px); overflow-y: auto; }
.cc-row { display: grid; grid-template-columns: 30px 1fr 130px auto; gap: 10px;
  align-items: center; padding: 5px 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .028); }
.cc-nr { font-size: 11px; opacity: .5; text-align: right;
  font-variant-numeric: tabular-nums; }
.cc-row select { font-family: inherit; font-size: 12.5px; padding: 5px 8px;
  border-radius: 8px; background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line-soft); width: 100%; }
/* Tallet der FAKTISK stod i kolonnen. Det er hele pointen med dialogen. */
.cc-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.cc-dobbelt { outline: 1px solid rgba(240, 180, 41, .5); }
.cc-adv { font-size: 10.5px; color: #f0b429; }
.cc-sum { font-size: 12px; opacity: .6; margin: 10px 2px 0; }

/* ---- CTD-kortets knapraekke ----
   TILSTAND vs HANDLING. Kilde-vaelgeren er hvad man KIGGER PAA og er udfyldt;
   handlingerne er stille. Foer var alle fem ens, og saa skal man laese hver
   knap for at vide om den skifter visning eller goer noget. */
.ctd-srcbar .ctd-src-tabs { display: inline-flex; padding: 2px; border-radius: 11px;
  background: rgba(0, 20, 40, .30); border: 1px solid var(--line-soft); gap: 2px; }
.ctd-srcbar .ctd-src { border: 0; background: none; color: var(--ink-soft);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: 9px; transition: background .13s, color .13s; }
.ctd-srcbar .ctd-src:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.ctd-srcbar .ctd-src.is-on { background: var(--accent); color: #04222a; }
.ctd-bar-sp { flex: 1 1 auto; }
/* Ghost: kun kant, ingen fyld - de raaber ikke, men de er der. */
.btn.small.ghost { background: none; border: 1px solid var(--line-soft);
  color: var(--ink-soft); font-weight: 600; }
.btn.small.ghost:hover { border-color: rgba(var(--accent-rgb), .5);
  color: var(--accent); background: rgba(var(--accent-rgb), .08); }

/* ---- Maalt forskel pr. cast ---- */
.cs-par { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cs-pk { padding: 9px 12px; border-radius: 11px; background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 1px; }
.cs-pk.er-over { border-color: rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .06); }
.cs-pk-n { font-size: 11px; opacity: .6; }
.cs-pk-v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-pk-v i { font-size: 11px; font-weight: 600; font-style: normal; opacity: .55;
  margin-left: 4px; }
.cs-pk-t { font-size: 10.5px; opacity: .5; }
.cs-pk.er-over .cs-pk-t { color: #f0b429; opacity: 1; }

/* ---- Pakke-graferne: akse-tekst og krydshaar ---- */
.cp-graf { position: relative; }
.cp-akse { display: flex; justify-content: space-between; gap: 10px;
  font-size: 10px; opacity: .45; margin-top: 2px; }
.cp-akse-m { text-align: center; }
.cp-hover { position: absolute; top: -6px; transform: translateX(-50%);
  pointer-events: none; z-index: 3; padding: 5px 9px; border-radius: 9px;
  background: var(--surface-3); border: 1px solid var(--line);
  box-shadow: var(--sh-2); white-space: nowrap; font-size: 11.5px;
  display: flex; align-items: baseline; gap: 8px; }
.cp-hover b { font-size: 13px; }
.cp-hover span { font-variant-numeric: tabular-nums; font-weight: 700; }
.cp-hover i { font-style: normal; opacity: .55; font-size: 10.5px; }


/* ---- DOWNLOAD DATA: to spalter ----
   Venstre = HVILKE stationer. Hoejre = HVAD der kommer med. De to ting
   besvarer hvert sit spoergsmaal, og i én smal soejle laa svaret paa det andet
   saa langt nede at man ikke kunne se de hang sammen. */
.dl-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 28px;
  align-items: start; }
.dl-card > h2, .dl-card > .dl-intro, .dl-card > .modal-actions { grid-column: 1 / -1; }
.dl-venstre { min-width: 0; }
.dl-hoejre { min-width: 0; border-left: 1px solid var(--line-soft); padding-left: 26px; }
.dl-hoejre .dl-opts { margin-top: 0; padding-top: 0; border-top: 0; }

/* Fanerne: fire lige brede, ikke fire der braekker forskelligt. */
.dl-card .dl-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Afkrydsningerne som RAEKKER: felt | tekst. Titlen paa én linje, forklaringen
   under - i stedet for at "MINI-SIS" bliver skubbet ud i sin egen kolonne. */
.dl-hoejre .dl-check { display: grid !important;
  grid-template-columns: 18px 1fr; gap: 3px 10px; align-items: start;
  margin: 0 !important; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .028); border: 1px solid transparent; }
.dl-hoejre .dl-check:hover { border-color: var(--line-soft);
  background: rgba(255, 255, 255, .045); }
.dl-hoejre .dl-check input { grid-row: 1 / span 2; margin-top: 2px; }
.dl-hoejre .dl-check .dl-sub { grid-column: 2; font-size: 11.5px; line-height: 1.45; }
.dl-hoejre .dl-check .dl-appname { white-space: nowrap; }
.dl-hoejre .dl-opt-h { margin: 16px 0 7px; }
.dl-hoejre .dl-opt-h:first-child { margin-top: 0; }
.dl-hoejre .dl-plot-note { margin: 8px 2px 0; font-size: 11.5px; }
.dl-hoejre .btn.primary { width: 100%; margin-top: 18px; }

@media (max-width: 1100px) {
  .dl-card { grid-template-columns: 1fr; }
  .dl-hoejre { border-left: 0; padding-left: 0; margin-top: 18px;
    border-top: 1px solid var(--line-soft); padding-top: 18px; }
}


/* ---- Plot-vaelgeren: hvem, og hvad ---- */
.pp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 26px;
  align-items: start; }
.pp-hoejre { border-left: 1px solid var(--line-soft); padding-left: 24px; }
.pp-hoejre .dl-check { display: grid !important; grid-template-columns: 18px 1fr;
  gap: 3px 10px; align-items: start; margin: 0 0 8px !important;
  padding: 9px 11px; border-radius: 10px; background: rgba(255, 255, 255, .028);
  border: 1px solid transparent; }
.pp-hoejre .dl-check:hover { border-color: var(--line-soft); }
.pp-hoejre .dl-check input { grid-row: 1 / span 2; margin-top: 2px; }
.pp-hoejre .dl-check .dl-sub { grid-column: 2; font-size: 11.5px; line-height: 1.45; }
.pp-hoejre .btn.primary { width: 100%; margin-top: 14px; }
.pp-hoejre .dl-opt-h:first-child { margin-top: 0; }
#ppCount { margin-top: 14px; }
@media (max-width: 1000px) {
  .pp-grid { grid-template-columns: 1fr; }
  .pp-hoejre { border-left: 0; padding-left: 0; margin-top: 16px;
    border-top: 1px solid var(--line-soft); padding-top: 16px; }
}


/* ---- CTD tools ----
   Profilens EGEN vaerktoejslinje (🔬 ⚙ ⬇) skjules naar profilen er indlejret
   i stationskortet: de samme ting staar i popuppen med navn og forklaring, og
   to raekker knapper der goer det samme er praecis det vi ryddede op i.
   I FULD SKAERM bliver de - dér er der ingen popup at gaa til. */
.ctp-embed .ctp-btn:not(.ctp-close):not(.ctp-back) { display: none; }

.ctd-tools-btn { font-weight: 700; }
.ct-body { display: flex; flex-direction: column; gap: 18px;
  max-height: min(72vh, 720px); overflow-y: auto; padding: 2px; }
.ct-grp > h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 9px;
  display: flex; align-items: baseline; gap: 9px; }
.ct-grp > h4 span { text-transform: none; letter-spacing: 0; font-size: 12px;
  font-weight: 400; color: var(--ink-soft); opacity: .75; }
.ct-kort { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ct-k { display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px;
  text-align: left; font-family: inherit; cursor: pointer;
  padding: 13px 15px 14px; border-radius: 13px; color: var(--ink);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line-soft);
  transition: background .13s, border-color .13s, transform .13s; }
.ct-k:hover { background: rgba(var(--accent-rgb), .10);
  border-color: rgba(var(--accent-rgb), .40); transform: translateY(-1px); }
.ct-k:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .55); outline-offset: 2px; }
.ct-ico { grid-row: 1 / span 2; font-size: 20px; line-height: 1.1; }
.ct-n { font-weight: 700; font-size: 14.5px; }
.ct-t { font-size: 12px; line-height: 1.5; opacity: .62; margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .ct-k { transition: none; } }


/* Genvejen til editoren er en VEJ VIDERE, ikke en udgang med data - derfor
   stille, og skubbet fra de to andre. */
.tg-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tg-editor { margin-left: auto; background: none;
  border: 1px solid rgba(var(--accent-rgb), .32); color: var(--accent);
  font-weight: 700; }
.tg-editor:hover { background: rgba(var(--accent-rgb), .12);
  border-color: var(--accent); }
@media (max-width: 900px) { .tg-editor { margin-left: 0; } }


/* =====================================================================
   KNAPPER: SAMME HOEJDE, SAMME STED
   =====================================================================
   I en raekke med baade .btn og .btn.small stod knapperne i to hoejder, og
   oejet laeser det som at den ene er vigtigere - ikke som at den bare er
   mindre. I et modal-hoved og i en handlingsraekke er de nu ens hoeje,
   uanset hvilken klasse de har. */
.modal-head .btn, .modal-actions .btn, .admin-actions .btn, .tg-acts .btn,
.ctd-srcbar .btn, .smap-bar .btn {
  /* FAST hoejde, ikke min-height. Med min-height voksede de store knapper
     alligevel til 37,5 px af deres egen polstring, mens .small stoppede paa
     36 - og saa staar de stadig i to hoejder. En fast hoejde plus nul
     lodret polstring gør dem ens uanset skriftstoerrelse. */
  height: 38px; padding-block: 0;
  display: inline-flex; align-items: center;
  justify-content: center; line-height: 1;
}
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-head h3 { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-right: auto; }
/* Tilbage staar FOERST og altid samme sted. */
.modal-back { flex: 0 0 auto; order: -1; background: none;
  border: 1px solid var(--line-soft); color: var(--ink-soft); font-weight: 600; }
.modal-back:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); }

/* =====================================================================
   SENSORER: TO SPALTER I STEDET FOR ÉN LANG SOEJLE
   =====================================================================
   Panelet var 1800 px bredt og brugte 400 af dem: navnet til venstre, tre
   smalle kolonner klemt ude i hoejre kant, og en kaempe tom midte. Nu ligger
   grupperne ved siden af hinanden, og hver gruppe er kun saa bred som den
   skal vaere - saa passer alt paa ét skaermbillede uden at rulle. */
.cs-body { display: grid; align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 16px 22px; }
.cs-intro, .cs-fod { grid-column: 1 / -1; }
.cs-grp { min-width: 0; }
.cs-row { grid-template-columns: minmax(0, 1fr) 92px 74px 74px; gap: 10px;
  padding: 8px 11px; }
.cs-row.cs-hd { font-size: 9.5px; letter-spacing: .07em; }
.cs-dato { font-size: 12px; }
.cs-hvorfor { margin-top: 7px; }
/* Behandlings-afsnittet og "maalt paa denne cast" fylder hele bredden - de er
   ikke en sensor-gruppe, og i en smal spalte ville deres indhold braekke. */
.cs-grp:has(.cs-par), .cs-grp:has(.cs-trin) { grid-column: 1 / -1; }
@media (max-width: 900px) { .cs-body { grid-template-columns: 1fr; } }

/* =====================================================================
   PLOT-VAELGEREN: BALANCE
   =====================================================================
   Venstre spalte var tom under brikkerne, mens hoejre var hoej - og
   Download-knappen laa oven i noten under sig. */
.pp-grid { grid-template-columns: 340px 1fr; align-items: start; }
.pp-grid > div:first-child { position: sticky; top: 0; }
#ppCount { margin-top: 16px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line-soft); }
.pp-hoejre .btn.primary { margin: 16px 0 10px; min-height: 42px; }
.pp-hoejre .hint:last-child { margin: 0; }
@media (max-width: 1000px) {
  .pp-grid { grid-template-columns: 1fr; }
  .pp-grid > div:first-child { position: static; }
}


/* Overskriften i skalerings-panelet siger nu hvad panelet virker paa. */
.ctp-set-h span { text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 11px; opacity: .6; margin-left: 6px; }
/* Panelet svaever over kurverne - saa maa det ikke vaere gennemsigtigt, og det
   skal ligge over signaturforklaringen, ikke bag den. */
.ctp-panel { z-index: 6; }


/* ---- PAKKERNE SOM MATRIX ----
   Én raekke pr. sensorpar, ét felt pr. cast, samme kolonner hele vejen ned -
   saa kan man laese baade hen ad (hvornaar) og ned ad (hvem). */
.cp-mx { position: relative; padding: 12px 14px 10px; border-radius: 13px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); }
.cp-mx-hd, .cp-mx-r { display: grid; grid-template-columns: 150px 1fr; gap: 12px;
  align-items: center; }
.cp-mx-r + .cp-mx-r { margin-top: 4px; }
.cp-mx-hd { margin-bottom: 6px; }
.cp-mx-stn, .cp-mx-c { display: grid; grid-template-columns: repeat(var(--n), 1fr);
  gap: 3px; }
.cp-mx-stn i { font-style: normal; font-size: 9.5px; opacity: .45; text-align: center;
  overflow: hidden; white-space: nowrap; }
.cp-mx-n { font-weight: 700; font-size: 13px; display: flex; align-items: baseline;
  gap: 7px; }
.cp-mx-n i { font-style: normal; font-size: 10px; opacity: .5; color: var(--ink-soft);
  font-weight: 400; }
.cp-mx-c b { display: block; height: 26px; border-radius: 5px; cursor: default;
  transition: outline-color .1s; outline: 1.5px solid transparent; }
.cp-mx-c b:hover { outline-color: rgba(255, 255, 255, .55); }
.cp-mx-forklar { font-size: 12px; line-height: 1.55; opacity: .62; margin: 10px 2px 4px; }

/* Dommen pr. par: farve siger HVOR, saetningen siger HVAD. */
.cp-dom-r { display: grid; grid-template-columns: 130px 110px 110px 1fr; gap: 14px;
  align-items: baseline; padding: 9px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .028); }
.cp-dom-r + .cp-dom-r { margin-top: 3px; }
.cp-dom-r.har-trin { background: rgba(240, 180, 41, .07);
  outline: 1px solid rgba(240, 180, 41, .35); }
.cp-dom-n { font-weight: 700; font-size: 13px; }
.cp-dom-v { font-size: 10.5px; opacity: .65; }
.cp-dom-v b { font-size: 15px; font-weight: 800; opacity: 1; margin-right: 3px;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.cp-dom-v i { font-style: normal; margin-left: 5px; opacity: .8; }
.cp-dom-t { font-size: 12.5px; opacity: .8; }
.cp-hover { top: auto; }
@media (max-width: 900px) {
  .cp-mx-hd, .cp-mx-r { grid-template-columns: 96px 1fr; }
  .cp-dom-r { grid-template-columns: 1fr 1fr; }
}


/* Brikkerne paa én linje. Hjaelpe-saetningen er blevet til et maerke, og
   raekken maa gerne rulle vandret paa en smal skaerm - det er bedre end at
   braekke syv brikker over to linjer hver gang. */
.ctp-chips-hint { font-style: normal; font-size: 15px; opacity: .45;
  cursor: help; margin-right: 2px; flex: 0 0 auto; }
.ctp-chips-hint:hover, .ctp-chips-hint:focus-visible { opacity: .9; color: var(--accent); }
.ctd-prof.ctp-embed .ctp-chips { flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; }
.ctd-prof.ctp-embed .ctp-chips::-webkit-scrollbar { display: none; }
.ctd-prof.ctp-embed .ctp-chip { flex: 0 0 auto; }


/* ---- VARIABEL-KNAPPEN ---- */
.ctp-chips { position: relative; }
.ctp-varbtn { display: inline-flex; align-items: center; gap: 9px; height: 34px;
  padding: 0 13px; border-radius: 11px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-soft);
  transition: border-color .13s, background .13s; }
.ctp-varbtn:hover { border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .09); }
.ctp-vb-dots { display: inline-flex; gap: 3px; }
.ctp-vb-dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.ctp-vb-chev { opacity: .5; font-size: 11px; }

.ctp-varpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 8;
  min-width: 236px; padding: 7px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--sh-4); }
.ctp-varpop.hidden { display: none; }
.ctp-vp-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; padding: 4px 8px 7px;
  display: flex; justify-content: space-between; gap: 10px; }
.ctp-vp-h span { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ink-soft); opacity: .7; }
.ctp-vp-r { display: grid; grid-template-columns: 12px 1fr 14px; gap: 10px;
  align-items: center; width: 100%; text-align: left; font-family: inherit;
  font-size: 13px; padding: 7px 9px; border-radius: 9px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink); }
.ctp-vp-r:hover { background: rgba(255, 255, 255, .06); }
.ctp-vp-r i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.ctp-vp-r.on { background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .26); font-weight: 700; }
.ctp-vp-r.on b { color: var(--accent); }
/* Fem er nok: den sjette er ikke skjult, den er bare tydeligt ude af drift -
   saa kan man se HVORFOR der ikke sker noget, i stedet for at klikke igen. */
.ctp-vp-r.fuld { opacity: .35; cursor: not-allowed; }
.ctp-vp-n { font-size: 10.5px; opacity: .55; padding: 7px 9px 3px; line-height: 1.45; }

/* ---- TILBAGE SKAL KUNNE SES ----
   Den var en stille ghost-knap og forsvandt mellem de andre. Nu har den sin
   egen fyldte tone - ikke accent (den er "gaa videre") og ikke groen ("faerdig"),
   men en rolig blaa der siger "denne vej tilbage". */
.modal-back { background: rgba(110, 160, 220, .20) !important;
  border: 1px solid rgba(130, 180, 235, .55) !important;
  color: #cfe4ff !important; font-weight: 700 !important; }
.modal-back:hover { background: rgba(120, 175, 235, .34) !important;
  border-color: #8fc0f0 !important; color: #fff !important; }

/* ---- MATRIX: PLADS TIL MANGE CAST ----
   Et togt kan have tres CTD'er. Med "1fr pr. cast" blev felterne til striber
   paa fire pixels, og etiketterne til grod. Nu har hvert felt en mindstebredde,
   og raekken ruller vandret - mens NAVNENE staar fast i venstre side, saa man
   ikke mister hvilken raekke man kigger paa halvvejs ude. */
.cp-mx { overflow: hidden; }
.cp-mx-scroll { overflow-x: auto; overflow-y: hidden; }
.cp-mx-hd, .cp-mx-r { grid-template-columns: 150px minmax(0, 1fr); }
.cp-mx-stn, .cp-mx-c { grid-template-columns: repeat(var(--n), minmax(34px, 1fr)); }
.cp-mx-n { position: sticky; left: 0; z-index: 2; background: var(--surface);
  padding-right: 6px; }
.cp-mx-hd > span:first-child { position: sticky; left: 0; z-index: 2;
  background: var(--surface); }
/* Et cast uden .cnv: skraveret, ingen dom. */
.cp-mx-c b.cp-tom { box-shadow: inset 0 0 0 1px rgba(120,160,200,.16); }
/* Signaturen under matricen. */
.cp-sk { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; }
.cp-sk i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cp-sk-tom { background: repeating-linear-gradient(135deg, rgba(120,160,200,.14) 0 4px,
  rgba(120,160,200,.03) 4px 8px); box-shadow: inset 0 0 0 1px rgba(120,160,200,.16); }


/* "Maalt paa denne cast" bruger matricens farver - samme farve, samme betydning. */
.cs-pk.t-ok     { border-color: rgba(52,199,120,.45);  background: rgba(52,199,120,.09); }
.cs-pk.t-naer   { border-color: rgba(150,205,80,.45);  background: rgba(150,205,80,.09); }
.cs-pk.t-gul    { border-color: rgba(240,180,41,.50);  background: rgba(240,180,41,.09); }
.cs-pk.t-orange { border-color: rgba(240,120,50,.55);  background: rgba(240,120,50,.10); }
.cs-pk.t-roed   { border-color: rgba(230,72,72,.60);   background: rgba(230,72,72,.11); }
.cs-pk.t-ok     .cs-pk-t { color: #5fd39a; opacity: 1; }
.cs-pk.t-naer   .cs-pk-t { color: #b8d95a; opacity: 1; }
.cs-pk.t-gul    .cs-pk-t { color: #f0b429; opacity: 1; }
.cs-pk.t-orange .cs-pk-t { color: #f08232; opacity: 1; }
.cs-pk.t-roed   .cs-pk-t { color: #f0776b; opacity: 1; }

/* ---- KORT-KNAPPEN ----
   Den bliver brugt meget: "hvor har vi vaeret" er et af de faa spoergsmaal
   ALLE ombord stiller. Som en graa .btn small stod den og gemte sig mellem
   Table/Browse. Nu er den fyldt, har hele sit navn med, og en meget rolig
   puls der loeber ÉN gang hvert 6. sekund - nok til at oejet finder den,
   ikke saa meget at den staar og blinker i baggrunden hele dagen. */
.map-btn { position: relative; overflow: hidden; display: inline-flex;
  align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 11px; font-weight: 700; font-size: 13.5px;
  /* IKKE BLAA. Knappen laa i en blaa flade mellem blaa faner med blaa tekst,
     og en knap der skal findes, skal ikke have baggrundens farve. Violet er
     den samme farve som ruten inde paa kortet - saa knappen ligner det den
     aabner. */
  color: #fff; border: 0;
  background: linear-gradient(135deg, #8b3ffb, #c840c0);
  /* Tydelig drop shadow som paa alle andre knapper (moerk skygge der loefter
     knappen fra baren) + et blidt violet skaer i knappens egen farve. */
  box-shadow: 0 5px 16px rgba(0, 0, 0, .38), 0 2px 8px rgba(139, 63, 251, .45); }
.map-btn:hover { filter: brightness(1.1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .46), 0 3px 12px rgba(139, 63, 251, .6); }
/* Foldet soekort, samme tegning som Dana Maps-fanen - ikke et emoji, der ser
   forskelligt ud paa hver maskine og i praksis lignede en bog. */
.map-ico { width: 17px; height: 17px; display: block; }
/* Pulsen: et lysstroeg der loeber hen over knappen. */
.map-pulse { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%,
    transparent 65%);
  transform: translateX(-120%); animation: mapStrejf 6s ease-in-out infinite; }
@keyframes mapStrejf {
  0%, 82% { transform: translateX(-120%); }
  92%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) { .map-pulse { animation: none; display: none; } }

/* ---- SENSOR-TABELLEN: OVERSKRIFT OVER SIN EGEN KOLONNE ----
   "AGE" og "VS INTERVAL" stod hoejrestillet over vaerdier der ikke var det,
   saa de sad et sted mellem to kolonner. Nu flugter de. */
.cs-row.cs-hd span:nth-child(2) { text-align: left; }
.cs-dato { text-align: left; }
.cs-row.cs-hd span:nth-child(3), .cs-alder { text-align: right; }
.cs-row.cs-hd span:nth-child(4), .cs-mark { text-align: right; }

/* ---- NED / OP / BEGGE ---- */
.ctp-vp-h2 { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 9px; }
.ctp-vp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  padding: 2px; margin: 0 6px 4px; border-radius: 10px;
  background: rgba(0, 20, 40, .30); }
.ctp-vp-s { border: 0; background: none; color: var(--ink-soft); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 4px;
  border-radius: 8px; }
.ctp-vp-s:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.ctp-vp-s.on { background: var(--accent); color: #04222a; }

/* Vaelgeren maa IKKE klippes af brik-raekken.
   FEJLEN: overflow-x:auto blev sat dengang der var syv brikker der skulle
   rulle. Nu er der én knap - og reglen klippede popuppen vaek, saa knappen
   "ikke virkede". */
.ctd-prof.ctp-embed .ctp-chips { overflow: visible; flex-wrap: wrap; }


/* ---- FULDSKAERMENS VAERKTOEJSLINJE ----
   Knapperne har navne nu, saa de maa fylde derefter.
   width:auto ER NOEDVENDIG: en tidligere .ctp-btn-regel (ikon-knapperne) satte
   width:42px, og den overlever her fordi denne regel ikke roerte bredden. Saa
   blev "Scaling"/"Download image" klemt ned i 42px og teksten floed ud over
   nabo-knapperne (X'et). width:auto lader dem fylde efter deres navn.
   flex-wrap paa vaerktoejslinjen: paa en smal skaerm/hoej zoom pakker de om i
   stedet for at stable oven paa hinanden. */
.ctp-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px;
  width: auto; padding: 0 14px; font-size: 13px; font-weight: 600; }
.ctp-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.ctp-btn.ctp-close { padding: 0; width: 38px; justify-content: center; }

/* BACK SKAL KUNNE SES - samme blaa som i popup'erne. En vej tilbage der er
   svaer at faa oeje paa, er en vej folk ikke finder. */
.ctp-back { background: rgba(110, 160, 220, .22) !important;
  border: 1px solid rgba(130, 180, 235, .58) !important;
  color: #cfe4ff !important; font-weight: 700 !important; }
.ctp-back:hover { background: rgba(120, 175, 235, .36) !important;
  border-color: #8fc0f0 !important; color: #fff !important; }

/* Kilde-skiftet i fuld skaerm: samme udseende som paa stationskortet, saa man
   genkender det som "hvad kigger jeg paa". */
.ctp-srcwrap { display: inline-flex; padding: 2px; border-radius: 11px;
  background: rgba(0, 20, 40, .34); border: 1px solid rgba(120,160,200,.20);
  gap: 2px; margin-right: 4px; }
.ctp-srcwrap[hidden] { display: none; }
.ctp-src2 { border: 0; background: none; color: var(--ink-soft); cursor: pointer;
/* Pakke-kontakten staar ved siden af kilde-kontakten og skal laeses som en
   ANDEN ting - derfor lidt luft imellem, ikke en ny stribe knapper der ligner
   en fortsaettelse af den foerste. */
.ctp-pakwrap { margin-left: 10px; }
.ctp-pak1 { font-size: 11.5px; opacity: .6; padding: 0 4px; }
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px;
  border-radius: 9px; }
.ctp-src2:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.ctp-src2.on { background: var(--accent); color: #04222a; }
/* Detalje-panel (CTD/Scanmar): fyldte knapper der manglede drop shadow (Christian
   "der mangler en masse i scanmar og ctd"). De AKTIVE toggle-piller + variabel-
   knappen; de inaktive (kantfrie faneblade) er bevidst flade. */
/* Toggle-GRUPPERNE staar som segment-kort MED skygge (SeaSave/Mini-SIS + Pack/
   Compare); 5 variables + aktiv nav-fane faar ogsaa skygge. */
.ctd-srcbar .ctd-src-tabs, #ctp-pakwrap {
  background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 4px; box-shadow: var(--sh-2);
}
.ctp-varbtn { box-shadow: var(--sh-2); }
.det-nav[aria-selected="true"] { box-shadow: var(--sh-1); }

/* ---- CUSTOM EXPORT-PANEL (vaelg hvad der kommer med i zip'en) ---- */
.exp-panel { max-width: 900px; }
.exp-head h3 { margin: 0 0 4px; color: var(--accent); font-size: 19px; }
.exp-head p { margin: 0 0 16px; color: var(--ink-soft); font-size: 13.5px; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.exp-grp { margin: 0; padding: 11px 14px 13px; border: 1px solid var(--line-soft);
  border-radius: 12px; background: var(--surface-2); box-shadow: var(--sh-1); }
.exp-grp legend { padding: 0 7px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 700; }
.exp-opt { display: grid; grid-template-columns: 20px 1fr; gap: 3px 10px; align-items: start;
  padding: 8px 5px; cursor: pointer; border-radius: 8px; }
.exp-opt:hover { background: var(--surface-3); }
.exp-opt input { width: 17px; height: 17px; accent-color: var(--accent); margin-top: 1px; }
.exp-lab { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.exp-note { grid-column: 2; font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }
.exp-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line-soft); }
.exp-count { color: var(--ink-soft); font-size: 13px; margin-left: auto;
  font-variant-numeric: tabular-nums; }

/* ---- CTD TOOLS: EN ROLIG PULS ----
   Knappen er indgangen til alt det nye, og den skal findes uden at nogen har
   faaet den vist. Ét langsomt aandedrag - ikke et blink. */
.ctd-tools-btn { animation: ctdAande 4.5s ease-in-out infinite; }
.ctd-tools-btn:hover { animation: none; }
@keyframes ctdAande {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(46, 232, 141, .0); }
  82% { box-shadow: 0 0 0 6px rgba(46, 232, 141, .16); }
  92% { box-shadow: 0 0 0 10px rgba(46, 232, 141, 0); }
}
@media (prefers-reduced-motion: reduce) { .ctd-tools-btn { animation: none; } }


/* Skalering pr. variabel: farve, navn, fra-til, enhed. */
.ctp-range { display: grid; grid-template-columns: 1fr 78px 22px 78px 52px;
  gap: 8px; align-items: center; padding: 5px 2px; }
.ctp-rk { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ctp-rk i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ctp-rto, .ctp-runit { font-size: 11px; opacity: .5; }
.ctp-runit { white-space: nowrap; }
.ctp-range input { width: 100%; font-family: inherit; font-size: 12.5px;
  padding: 5px 7px; border-radius: 7px; background: var(--surface-3);
  color: var(--ink); border: 1px solid var(--line-soft); }
.ctp-range.ctp-dis { opacity: .4; pointer-events: none; }

/* ---- KORTET FYLDER SKAERMEN ----
   Det bruges til at KIGGE, ikke til at klikke i en dialog - saa maa det fylde
   det hele. Her stod min(1900px) og min(1250px): to lofter der paa 1920x1080
   lod 415 px staa tomme til hoejre og 268 px i bunden, og som paa en stoerre
   skaerm blev endnu mere spild.

   100% af overlayet frem for vw/vh: overlayet ligger allerede praecis over
   skaermen, mens vw og vh skal regnes om med --ui-zoom for at passe - og en
   glemt omregning er netop dét der lavede lofterne her.

   NB: den her regel staar EFTER .smap-card oeverst i filen og vinder over den.
   Skal stoerrelsen aendres, er det HER. */
.smap-card {
  /* EN ANELSE IND. Helt ud til kanten blev kortet ganske vist stoerst, men saa
     var der ikke noget tilbage der viste at man staar OVEN PAA forsiden - det
     lignede en ny skaerm, ikke et vindue man kan lukke igen. Nogle procent
     baggrund hele vejen rundt giver den fornemmelse tilbage og koster naesten
     ingen kortflade.

     Procent frem for et pixeltal: saa er kanten den samme paa 1080p og paa en
     stor skaerm, i stedet for at blive en usynlig stribe paa den ene og en
     bred ramme paa den anden. */
  width: 95%; height: 94%;
  /* TABLET-KANTEN: HELT HVID, HELE VEJEN RUNDT.
     Foerst sort (kunne ikke ses mod programmets egen moerke baggrund), saa en
     soelv-gradient - men en gradient er lys i den ene ende og moerk i den
     anden, og saa ER kanten ikke den samme hele vejen rundt. Ren hvid er
     tydelig mod baade den moerke flade bagved og mod ethvert soekort.

     Den tynde moerke fuge indenfor bliver: uden den ligger kortfladen klods op
     ad det hvide, og kanten ser ud til at flyde ud i kortet. */
  border: 9px solid #fff; border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45),
              0 26px 60px rgba(0, 0, 0, .55); }
.smap-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.smap-wrap .smap-canvas { flex: 1 1 auto; }

/* Skibet: en pil der peger hvor den peger. */
.smap-skib { color: #ff4d6d; font-size: 22px; line-height: 26px; text-align: center;
  text-shadow: 0 0 4px rgba(255,255,255,.9), 0 0 10px rgba(255,77,109,.6); }
.smap-skib span { display: block; }

/* Skibets tal. Boksen ER nu #smapSide (sidepanelet); .smap-live er kun
   indholdet inde i den, saa den skal hverken placere sig selv eller tegne en
   baggrund. Stod den tidligere regel her endnu, ville panelet faa to rammer og
   to baggrunde oven i hinanden. */
.smap-live { font-size: 12px; color: #e8f1f8; }
.smap-live.hidden { display: none; }
.smap-live-h { display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #ff8fa3; font-weight: 800; margin-bottom: 8px; min-height: 20px; }
.smap-live-r { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.smap-live-r span { opacity: .6; }
.smap-live-r b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Maalebaandet - nederst, altid der. */
/* MIDT FOR, som i Dana Maps. I venstre hjoerne laa baandet dér hvor man
   tilfaeldigvis ikke kigger: oejet foelger musen, og musen er som regel midt
   paa kortet. Centreret staar tallene lige under det man peger paa.
   translateX(-50%) frem for to lige margener: bredden aendrer sig med tallene
   (og med ICES-koden), og en fast bredde ville faa den til at vippe. */
.smap-range { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 500;
  display: flex; align-items: baseline; gap: 7px; padding: 8px 13px;
  border-radius: 11px; background: rgba(10, 22, 34, .86);
  border: 1px solid rgba(120,160,200,.24); color: #e8f1f8; font-size: 11.5px;
  pointer-events: none; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.smap-range b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.smap-range span { opacity: .6; }
.smap-range.er-paa { border-color: rgba(240,180,41,.55); }
.smap-r-fra { opacity: .8 !important; margin-right: 4px; color: #f0c869; }
.smap-r-laas { margin-left: 8px; font-size: 10.5px; color: #f0b429; opacity: .9 !important; }
.smap-r-idle { opacity: .55; }
.smap-gpxdel.hidden { display: none; }

/* ---- PRINT: LIGGENDE, MED TOGTET PAA ---- */
.smap-printhead { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.smap-printer .smap-printhead { display: block; margin-bottom: 5mm; color: #111; }
  body.smap-printer .smap-printhead b { display: block; font-size: 16pt; }
  body.smap-printer .smap-ph-sub { display: block; font-size: 9pt; color: #444; margin-top: 1mm; }
  body.smap-printer .smap-ph-t { display: block; font-size: 8pt; color: #777; margin-top: 1mm; }
  body.smap-printer .smap-canvas { height: 13.5cm; }
  body.smap-printer .smap-live, body.smap-printer .smap-range { display: none; }
}

/* Sporet: samme farve som skibet - det er skibets egen vej. */
.smap-sw-spor.hidden { display: none; }

/* ---- BUILD MY ROUTE ---- */
.br-modal { position: absolute; inset: 0; z-index: 900; display: flex;
  align-items: center; justify-content: center; padding: 22px;
  background: rgba(4, 12, 20, .74); backdrop-filter: blur(3px); }
.br-modal.hidden { display: none; }
.br-kort { width: min(1180px, 96%); max-height: 92%; display: flex; flex-direction: column;
  border-radius: 15px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-4); }
.br-h { display: flex; align-items: baseline; gap: 12px; padding: 13px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.br-h b { font-size: 15px; }
.br-h span { font-size: 12.5px; color: var(--ink-soft); margin-right: auto; }
.br-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px;
  padding: 16px; overflow-y: auto; }
.br-lab { display: block; font-size: 10.5px; letter-spacing: .1em; font-weight: 700;
  text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
#brTekst { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-soft);
  resize: vertical; }
.br-hint { font-size: 12px; opacity: .7; margin: 9px 0 8px; }

/* Det lille "regneark" - viser formen i stedet for at beskrive den. */
.br-ex { border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.br-ex-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; background: rgba(255,255,255,.04); color: var(--ink-soft); }
.br-ex-t { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.br-ex-t > div { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr;
  border-top: 1px solid var(--line-soft); }
.br-ex-t i, .br-ex-t b { padding: 5px 9px; font-style: normal; }
.br-ex-t i { background: rgba(255,255,255,.05); color: var(--ink-soft);
  font-size: 10px; text-align: center; }
.br-ex-t b { font-weight: 400; border-left: 1px solid var(--line-soft); }
.br-ex-n { font-size: 11px; opacity: .6; line-height: 1.5; padding: 8px 10px;
  border-top: 1px solid var(--line-soft); }

.br-body { min-height: 180px; }
.br-tom, .br-fejl { font-size: 12.5px; opacity: .65; padding: 10px 0; text-align: left; }
.br-fejl { color: #f0b429; opacity: .9; }
.br-sum { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  margin-bottom: 8px; }
.br-sum b { font-size: 17px; }
.br-sum .btn { margin-left: auto; }
.br-advarsel { color: #f0b429; }
.br-tabel { border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden;
  max-height: 320px; overflow-y: auto; }
.br-r { display: grid; grid-template-columns: 34px 1fr 1.2fr 1.2fr; gap: 8px;
  padding: 5px 9px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.br-r + .br-r { border-top: 1px solid var(--line-soft); }
.br-hd { background: rgba(255,255,255,.05); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); }
.br-r.er-galt { background: rgba(240,180,41,.10); color: #f0c869; }
.br-mere { padding: 6px 9px; font-size: 11px; opacity: .5; }
/* Knapperne staar nederst til hoejre - se .br-acts hoejere oppe i filen.
   Her stod "flex: 1 1 auto", som straktes hver knap ud i halv spaltebredde;
   det var dét der gjorde dem malplacerede. */
@media (max-width: 900px) { .br-grid { grid-template-columns: 1fr; } }

/* ---- ICES-FIRKANTER ----
   Gitteret er en hjaelpelinje, ikke data: tyndt, graat og uden fyld, saa det
   ligger UNDER stationerne i opmaerksomhed. Etiketten er lille og har skygge -
   den skal kunne staa baade over hav og over land. */
.smap .smap-ices-lbl { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #cfe0ee; text-align: center; line-height: 14px; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7); }
.smap.er-lys .smap-ices-lbl { color: #33475a;
  text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.9); }
.smap-ices-note { position: absolute; left: 50%; transform: translateX(-50%);
  top: 12px; z-index: 500; padding: 6px 12px; border-radius: 9px;
  background: rgba(10, 22, 34, .86); border: 1px solid rgba(120,160,200,.24);
  color: #cfe0ee; font-size: 11.5px; pointer-events: none; }
.smap-ices-note.hidden { display: none; }
/* ICES-koden i maalebaandet og i skuffen - samme daempede gule som "from Dana",
   saa det laeses som en maerkat, ikke som endnu et maal. */
.smap-r-ices { color: #f0c869; }
.smap-live-pos u { display: inline-block; text-decoration: none; margin-top: 3px;
  padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: #f0c869; background: rgba(240, 200, 105, .12); }

/* ---- KORTETS TANDHJUL ----
   Elleve kontroller i én raekke blev til tre knapper og en menu. Menuen ligger
   OVEN PAA kortet (ikke i baren), saa den kan vaere hoej uden at gøre baren
   hoejere - og den lukker foerst naar man klikker udenfor. */
.smap-cog-wrap { position: relative; display: inline-flex; }
.smap-cog { font-size: 15px; line-height: 1; padding: 0 11px; }
.smap-cog.er-aaben { border-color: var(--accent); color: var(--accent); }
.smap-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 900;
  width: 258px; max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--sh-4); }
.smap-menu.hidden { display: none; }
/* Overskrifter, saa menuen laeses som afsnit og ikke som en liste paa tolv. */
.smap-menu-h { font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 5px;
  padding-top: 8px; border-top: 1px solid var(--line-soft); }
.smap-menu-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* I menuen faar afkrydsningerne hele bredden og staar under hinanden - i baren
   stod de paa række og skulle laeses forfra hver gang. */
.smap-menu .smap-sw { width: 100%; padding: 3px 0; }
.smap-menu .smap-sel { width: 100%; }
/* display:flex maa staa her: "Open a .gpx file" er et <label> med et skjult
   input i, og et label er ikke flex af sig selv - saa justify-content gjorde
   ingenting, og teksten laa i venstre kant mens naboknapperne var centreret. */
.smap-menu .btn { width: 100%; height: 32px;
  display: flex; align-items: center; justify-content: center; }
/* Skibsknappen skiller sig ud fra Fit: den er den man leder efter. */
.smap-dana { font-weight: 700; }
.smap-dana:disabled { opacity: .4; cursor: default; }

/* ---- KORTET UDEN BARER ----
   .smap-wrap var én af tre raekker i kortet; nu er den den eneste, og alt
   andet ligger OVEN PAA den. */
.smap-card > .smap-wrap { flex: 1 1 auto; min-height: 0; }
/* Knappanelet ligger som soeskende til kortfladen og er absolut placeret.
   Uden det her holdepunkt regnede den sin top ud fra HELE overlayet - altsaa
   fra skaermens kant - og landede 34 px OVEN OVER kortet, uden for den hvide
   ramme. Maalt, ikke gaettet. */
.smap-card { position: relative; }
/* Runding i alle fire hjoerner: der er ikke laengere en bar til at daekke de
   oeverste. Uden den her stak kortfladen ud i hjoernerne af soelvkanten. */
.smap-canvas { border-radius: 14px; }

/* ---- KNAPPANELET: MIDT FOR OVEN ----
   I venstre hjoerne laa knapperne oven paa hvad der nu tilfaeldigvis var der -
   kyst, land, en stationsprik - og halvgennemsigtige knapper paa et broget
   kort kan man ikke se. Midt for oven er der to ting vundet: man ved altid
   hvor de er uden at lede, og et samlet panel med ÉN fast baggrund er
   laesbart uanset hvad kortet viser under det.

   Ikke midt paa skaermen men midt over KORTET, og med god afstand til toppen,
   saa panelet ikke roerer den hvide kant. */
.smap-float { position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%); z-index: 600;
  display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 14px; background: rgba(8, 16, 24, .94);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5); }
/* Knapperne har hver sin rolle og hver sin farve - tre ens graa knapper skal
   laeses, tre forskellige kan genkendes. */
.smap-float .btn { height: 34px; padding: 0 15px; border-radius: 10px;
  font-weight: 700; border: 1px solid transparent; }
.smap-float .smap-dana { background: #8b3ffb; color: #fff; }
/* ============================ TEKNIKER ====================================
   .tek-only-kontroller (CTD-foelerpakke, kilde-kontakt, sensor-serienumre,
   CTD Live-ranges) er SKJULT i normal visning og taendes pr. skaerm fra
   Tekniker-panelet i topbar-skuffen (kraever master). */
html:not(.tek-mode) .tek-only { display: none !important; }
.bs-tek { display: block; width: 100%; margin: 10px 0 4px; padding: 7px 12px;
  border-radius: 9px; border: 1px solid var(--line-soft);
  background: var(--surface-3); color: var(--ink-soft);
  font-size: 12px; font-weight: 600; cursor: pointer; text-align: center;
  transition: color .12s, border-color .12s; }
.bs-tek:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .55); }
.tekn-rad { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Kodefeltet: ordentlig hoejde og skrift - det var "relt lille i hoejden". */
.tekn-kode { width: 100%; box-sizing: border-box; padding: 11px 13px;
  font-size: 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--input-bg); color: var(--ink); letter-spacing: .18em; }
/* Tekniker-PANELET: funktionskort i et gitter, samme kortsprog som resten. */
.tekn-card { width: min(860px, calc(100vw - 40px)); padding: 22px 26px; }
/* GARANTERET BUNDLUFT (Christian 28/8: "det gaar galt med knapperne igen -
   soerg for det ikke sker fremover"). Knapraekken er altid hoejere end
   overskriften, saa et hoved uden rigelig margin-bottom lader knapperne synke
   ned i teksten under. REGLEN: et hoved med handlinger bruger EN af de tre
   hoved-klasser (.modal-head 8px / .det-top 12px / .tekn-hoved 12px) - byg
   ALDRIG et nyt ad-hoc-hoved. Se ogsaa det-top-fixet laengere oppe. */
.tekn-hoved { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.tekn-hoved h2 { margin: 0; font-size: 19px; color: var(--ink); }
.tekn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 14px; }
@container page (max-width: 760px) { .tekn-grid { grid-template-columns: 1fr; } }
.tekn-kort { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft); }
.tekn-kort h3 { margin: 0; font-size: 14px; color: var(--ink); }
.tekn-kort p { margin: 0 0 4px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.tekn-kort .btn { margin-top: auto; }
.tekn-iko { font-size: 20px; line-height: 1; }
/* Cast-vaelgeren i CTD-kortet: fuld bredde, husets feltstil (listen tegnes
   af ui.js som alle andre dropdowns). */
.tekn-valg { width: 100%; box-sizing: border-box; margin: 2px 0 8px;
  padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--input-bg); color: var(--ink); font-size: 13px;
  font-variant-numeric: tabular-nums; }

/* Track-knappen lyser naar linjen er taendt (standard) - slukket = daempet. */
.smap-float .smap-track-b.is-on { color: var(--accent);
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .14); }
.smap-float .smap-track-b:not(.is-on) { opacity: .6; }
.smap-float .smap-dana:hover { background: #9b57ff; }
.smap-float .smap-dana:disabled { background: rgba(255, 255, 255, .08);
  color: #8fa3b5; }
.smap-float #smapFit { background: rgba(255, 255, 255, .1); color: #eaf3fb;
  border-color: rgba(255, 255, 255, .16); }
.smap-float #smapFit:hover { background: rgba(255, 255, 255, .18); }
/* Luk staar for sig selv med en skillestreg: den er den eneste af de tre der
   ikke kan fortrydes ved bare at trykke igen. */
.smap-float .smap-luk { background: rgba(240, 90, 90, .14); color: #ff9c9c;
  border-color: rgba(240, 90, 90, .4); margin-left: 4px; }
.smap-float .smap-luk:hover { background: rgba(240, 90, 90, .28); color: #fff; }

/* ---- SKUFFENS INDHOLD ----
   Titlen staar oeverst i skuffen i stedet for i en topbar. */
.smap-side-titel { font-size: 12.5px; font-weight: 700; color: var(--ink);
  opacity: .75; margin-bottom: 10px; padding-right: 6px; }

/* TALLENE UNDER HINANDEN. I bundbaren stod de paa en linje med god plads;
   i en 320 px skuffe skal de stables, ellers brydes de midt i et tal. */
.smap-side .smap-stats { display: flex; flex-direction: column; gap: 8px; }
.smap-side .smap-st { display: flex; align-items: baseline; gap: 7px;
  flex-wrap: wrap; font-size: 11.5px; }
.smap-side .smap-st b { font-size: 20px; }
.smap-side .smap-note { flex: 1 1 100%; font-size: 10px; opacity: .5;
  margin-top: 2px; line-height: 1.4; }
/* Typefilteret: pillerne pakker sig selv i to-tre raekker i skuffens bredde. */
.smap-side .smap-leg { display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0; }
.smap-side .smap-lg-lab { width: 100%; margin-bottom: 2px; }
.smap-side .smap-lg-alle { width: 100%; margin-top: 2px; }
/* Menuen er ikke laengere en popover - den er en del af skuffen. */
.smap-side .smap-menu { position: static; width: auto; max-height: none;
  padding: 0; margin-top: 4px; background: none; border: 0; box-shadow: none; }

@media print {
  /* PRINT: skuffen bliver til en fod under kortet.
     Tallene stod foer i .smap-foot, som er vaek. De ER stadig de tal arket
     skal have med, saa i stedet for at bygge dem op igen, foldes skuffen ud
     under kortet - uden fane, uden live-tal og uden indstillinger. */
  body.smap-printer .smap-side { position: static; transform: none;
    width: 100%; max-height: none; background: #fff; }
  body.smap-printer .smap-side-krop { width: 100%; background: #fff;
    border: 0; border-top: 1px solid #ccc; border-radius: 0; color: #111;
    max-height: none; overflow: visible; padding: 4mm 0 0; }
  body.smap-printer .smap-side-tab,
  body.smap-printer .smap-side-titel,
  body.smap-printer #smapLive,
  body.smap-printer .smap-side .smap-menu,
  body.smap-printer .smap-side .smap-menu-h,
  body.smap-printer .smap-float { display: none !important; }
  body.smap-printer .smap-side .smap-st,
  body.smap-printer .smap-side .smap-lg,
  body.smap-printer .smap-side .smap-note { color: #333; }
  body.smap-printer .smap-side .smap-st b { color: #000; }
  /* Paa papir er filteret en oplysning, ikke en knap. */
  body.smap-printer .smap-lg-b { background: none; border-color: #bbb; color: #333; }
  body.smap-printer .smap-lg-alle { display: none; }
}

/* ---- SKUFFENS TO SIDER ----
   Tandhjulet sidder i titel-raekken, ikke som en knap der svaever et sted i
   indholdet: der er ét sted man skifter side, og det er oeverst. */
.smap-side-hoved { display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 10px; }
.smap-side-hoved .smap-side-titel { flex: 1 1 auto; margin-bottom: 0; }
.smap-side-cog { flex: 0 0 auto; width: 28px; height: 28px; cursor: pointer;
  font-size: 15px; line-height: 1; border-radius: 8px;
  background: rgba(255, 255, 255, .07); color: #cfe0ee;
  border: 1px solid rgba(255, 255, 255, .1); }
.smap-side-cog:hover { color: #fff; border-color: var(--accent); }
.smap-side-cog.er-aaben { color: var(--accent); border-color: var(--accent);
  background: rgba(255, 255, 255, .12); }
#smapInfo.hidden, .smap-side .smap-menu.hidden { display: none; }
/* Tilbage-knappen staar oeverst paa indstillings-siden og fylder bredden -
   den skal findes uden at man skal lede. */
/* Tilbage i kortets egen violette farve - den samme som Dana-knappen og
   ruten. Den lyseblaa var programmets almindelige accent, og i en skuffe der
   ellers er blaa, forsvandt den ind i sin egen baggrund. */
.smap-tilbage { width: 100%; height: 32px; margin-bottom: 4px;
  background: #8b3ffb; border-color: #8b3ffb; color: #fff; font-weight: 700; }
.smap-tilbage:hover { background: #9b57ff; border-color: #9b57ff; }

/* Ligger skibet stille, er der ingen ETA - og en tankestreg er et aerligere
   svar end et tal der loeber mod uendelig. */
.smap-range .smap-r-tom { opacity: .45; }

/* ---- LAAST STATION ----
   To ringe: én fast, saa man kan se laasen ogsaa naar animationen staar stille
   (print, reduceret bevaegelse, en fane der ikke tegnes), og én der puster.
   Den faste alene ville vaere nok til at FINDE stationen; pusten er det der
   gør at man opdager at der ER laast, uden at lede. */
.smap-laasring { pointer-events: none; }
.smap-laasring i { position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #f0c869; box-sizing: border-box; }
.smap-laasring i:first-child { opacity: .9; inset: 13px; }
.smap-laasring i:last-child { animation: smapPuls 2.2s ease-out infinite; }
@keyframes smapPuls {
  0%   { transform: scale(.32); opacity: .85; }
  70%  { transform: scale(1);   opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .smap-laasring i:last-child { animation: none; opacity: .35; }
}
/* Baandet skifter farve naar der er laast - samme gule som ringen, saa de to
   hoerer synligt sammen. */
.smap-range.er-laast { border-color: rgba(240, 200, 105, .55); }
.smap-range.er-laast .smap-r-fra { color: #f0c869; }

/* Retningspile paa sporet. Sporet er pink, saa pilene er pink - de hoerer til
   stregen, ikke til stationerne, og skal ikke forveksles med de blaa
   rute-pile paa et togt uden spor. */
.smap-arrow-spor { color: #ff4d6d; font-size: 12px;
  text-shadow: 0 0 3px rgba(255,255,255,.9), 0 0 8px rgba(255,77,109,.5); }
.smap.er-lys .smap-arrow-spor { color: #d81b47;
  text-shadow: 0 0 3px rgba(255,255,255,.95); }

/* ---- STATIONSBOBLEN SOM MATRIX ----
   To spalter i stedet for fjorten linjer under hinanden: samme indhold paa
   det halve hoejde, og oejet kan springe direkte til det felt det leder
   efter i stedet for at laese sig ned gennem listen. */
.smap-pop-net { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  margin: 9px 0 4px; padding-top: 9px;
  border-top: 1px solid var(--line-soft); }
.smap-pop-f span { display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; opacity: .5; }
.smap-pop-f b { display: block; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Positionen faar hele bredden - to koordinater brydes ikke midt over. */
.smap-pop-pos { margin-top: 8px; padding-top: 9px;
  border-top: 1px solid var(--line-soft); }
.smap-pop-pos span { display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; opacity: .5; }
.smap-pop-pos b { font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ICES-maerkaten. Foerst moerkegul (#b98c00) paa boblens moerke baggrund -
   moerkt paa moerkt, og saa kunne koden ikke laeses. Farven skal foelge
   PROGRAMMETS tema (boblen er programmets flade), ikke kortets lyse eller
   moerke fliser - derfor data-theme og ikke .er-lys. */
.smap-pop-pos u { display: inline-block; text-decoration: none; margin-left: 8px;
  padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; color: #ffd479; background: rgba(240, 200, 105, .16);
  border: 1px solid rgba(240, 200, 105, .35); }
:root[data-mode="light"] .smap-pop-pos u { color: #6b4e00;
  background: rgba(240, 200, 105, .34); border-color: rgba(150, 115, 0, .45); }

/* Ramfeltet om en station: usynligt, men det er DET der tager musen. Haanden
   vises saa snart man er inde i feltet - saa ved man at der er noget at
   klikke paa, foer man klikker. */
.smap .smap-ram { cursor: pointer; }

/* Snapshot uden optagelse: overskriften siger det, i gult. Bedre end et tomt
   display man kan naa at tro er en fejl i skaermen. */
.dl-snap-tom { color: #f0b429 !important; }

/* GAMMELT FIX: pilen bliver tom. Fyldt = skibet er her nu; tom = her var det
   sidst. Formen aendrer sig ikke, saa den er lige let at finde paa kortet. */
.smap-skib.er-gammel { color: transparent; -webkit-text-stroke: 1.5px #ff8fa3;
  text-shadow: none; opacity: .75; }
.smap-live-h.er-gammel { color: #f0b429; }
.smap-live-tom { font-size: 11.5px; line-height: 1.45; color: #f0b429;
  opacity: .9; margin: 2px 0 8px; }

/* ---- TOGTVAELGEREN I SKUFFEN ----
   Titlen ER knappen: den staar der i forvejen med togtets navn, og et lille
   nedad-mærke er nok til at sige at der kan skiftes. En knap mere i raekken
   ville vaere endnu en ting at laese. */
button.smap-side-titel { display: flex; align-items: baseline; gap: 6px;
  width: 100%; text-align: left; font-family: inherit; cursor: default;
  background: none; border: 0; padding: 0; color: var(--ink); }
button.smap-side-titel.kan-skifte { cursor: pointer; }
button.smap-side-titel .smap-togt-pil { font-size: 10px; opacity: 0; flex: 0 0 auto; }
button.smap-side-titel.kan-skifte .smap-togt-pil { opacity: .55; }
button.smap-side-titel.kan-skifte:hover { color: var(--accent); }
button.smap-side-titel.kan-skifte:hover .smap-togt-pil { opacity: 1; }

.smap-togtliste.hidden { display: none; }
.smap-togt-r { display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; margin-bottom: 6px; padding: 9px 11px; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--line-soft); color: var(--ink); }
.smap-togt-r:hover { border-color: var(--accent); }
.smap-togt-r b { display: block; font-size: 13px; font-weight: 700; }
.smap-togt-r span { display: block; font-size: 11px; opacity: .6; margin-top: 1px; }
/* Arkiveret: mattet, ikke skjult. Det er ryddet af vejen, ikke hemmeligt. */
.smap-togt-r.er-ark { opacity: .62; }
.smap-togt-r.er-her { border-color: #8b3ffb; background: rgba(139, 63, 251, .12); }
.smap-togt-nu { display: block; font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #b98bff; margin-top: 3px; }
.smap-togt-tom { font-size: 12.5px; opacity: .6; padding: 10px 0; }

/* =====================================================================
   ILT-OVERLAY paa Dana Mini Map
   =====================================================================
   Laerredet ligger i sit EGET Leaflet-pane (smapO2, z-index 350) mellem
   fliserne (200) og sporet/ICES-gitteret (400). Panelet tager ingen mus, saa
   ramfelter, hover-boble, klik-laas og maalebaand virker praecis som foer. */
.smap-o2-canvas { position: absolute; top: 0; left: 0; }

.smap-o2 { margin-top: 4px; }
.smap-o2-body { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }

/* Legenden er et LAERRED - ikke en css-gradient og ikke en <button>.
   Chrome dropper baggrunde ved print som standard, og rampen ER oplysningen. */
.smap-o2-legend { display: block; width: 100%; height: 46px; }

.smap-o2-cap { font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
.smap-o2-cap b { color: var(--ink); font-weight: 700; }
.smap-o2-mgl { font-style: normal; color: var(--warn, #e0a33a); }
/* Hvor tallene kommer fra, staar PAA arket. Et farvet felt ser ud som en
   maaling; det er et skoen mellem cast, og det skal der staa. */
.smap-o2-src { display: block; font-size: 10px; opacity: .62; margin-top: 2px; }

.smap-o2-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.smap-o2-row.hidden { display: none; }
.smap-o2-row > span:first-child { flex: 0 0 74px; color: var(--ink-soft); }
.smap-o2-row > b { flex: 0 0 58px; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.smap-o2-row input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.smap-o2-row input[type="number"] { flex: 1 1 auto; min-width: 0; width: 100%;
  font-family: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--line-soft); color: var(--ink); }
.smap-o2-row .smap-sel { flex: 1 1 auto; min-width: 0; }

/* Den paene liste laa BAG kortet: .psel-pop stod paa 990 og .smap paa 1200.
   Derfor havde kortvaelgeren faaet [data-plain] - en native <select> var det
   eneste der kunne ses. Nu er listen loeftet over kortet i stedet, saa
   dropdowns ser ens ud i hele programmet. */
.psel-pop { z-index: 1300; }

/* CENTRERET popup (select[data-pop="center"]): baggrunds-sloer + kort midt paa
   skaermen i stedet for en liste der haenger under feltet. Bruges til smaa
   vaelgere INDE i en modal (fx CTD-arkets Decimal/Sensor), saa listen hverken
   daekker tabellen eller lander skaevt ved UI-zoom. Samme .psel-opt-rows. */
.psel-back {
  position: fixed; inset: 0; z-index: 1299;
  background: rgba(2, 8, 13, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.psel-pop-c {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 240px; max-width: min(360px, calc(100vw - 32px)); padding: 8px;
}
.psel-pop-h {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
  padding: 3px 8px 8px; margin-bottom: 3px; border-bottom: 1px solid var(--line);
}

@media print {
  /* Rampen skal FAKTISK trykkes. Uden det her printer Chrome den som hvid. */
  body.smap-printer .smap-o2-legend,
  body.smap-printer .smap-o2-legend * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.smap-printer .smap-o2 { display: block !important; }
  body.smap-printer .smap-o2-body { display: block !important; }
  body.smap-printer .smap-o2-cap { color: #333; }
  body.smap-printer .smap-o2-cap b { color: #000; }
  body.smap-printer .smap-o2-src { color: #666; opacity: 1; }
  /* Legenden og teksten hoerer paa arket. Skyderne goer ikke. */
  body.smap-printer .smap-o2-row,
  body.smap-printer #smapO2Blok > .smap-sw,
  body.smap-printer #smapO2OnlyRow { display: none !important; }
  /* Rampen ligger vandret og lavt, saa den ikke skubber sig selv over paa
     side to: der er ca. 45 mm tilbage under kortet paa et liggende A4. */
  body.smap-printer .smap-o2-legend { height: 12mm; max-width: 90mm; }
}

/* =====================================================================
   ILTVISNING SOM TILSTAND
   =====================================================================
   Knappen bor oppe i panelet ved siden af Dana og Fit - laget aendrer hvad
   hele kortet handler om, og saa hoerer kontakten dér hvor man kan se dens
   tilstand uden at aabne noget.

   Farven er teal og ikke lilla: Dana-knappen ejer den lilla, og to naboknapper
   i samme farve laeses som to udgaver af det samme. */
.smap-float .smap-o2b { position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 180, 138, .30), rgba(46, 224, 176, .12) 60%);
  color: #c6f7e8; border-color: rgba(46, 224, 176, .45);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  animation: o2-aande 3.6s ease-in-out infinite; }
.smap-float .smap-o2b:hover { background: linear-gradient(135deg,
    rgba(0, 180, 138, .46), rgba(46, 224, 176, .22) 60%);
  border-color: rgba(46, 224, 176, .7); }

/* LYSSTRIBEN. Et smalt skraat lys der stryger over knappen og saa holder
   pause. Den ligger i ::after, saa den ikke roerer teksten - og BAG den
   (z-index 0 mod 1) af samme grund. */
.smap-float .smap-o2b::after { content: ""; position: absolute; z-index: 0;
  top: -60%; bottom: -60%; width: 38%; left: -70%;
  background: linear-gradient(100deg, transparent,
    rgba(255, 255, 255, .55) 45%, rgba(198, 247, 232, .8) 55%, transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: o2-glimt 5s ease-in-out infinite; }
.smap-float .smap-o2b > * { position: relative; z-index: 1; }

@keyframes o2-glimt {
  0%   { left: -70%; opacity: 0; }
  4%   { opacity: .9; }
  18%  { left: 130%; opacity: .9; }
  22%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}
@keyframes o2-aande {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 224, 176, 0),
                         0 2px 10px rgba(0, 180, 138, .18); }
  50%      { box-shadow: 0 0 0 3px rgba(46, 224, 176, .16),
                         0 2px 16px rgba(0, 180, 138, .34); }
}

/* TAENDT = FUNDET. Saa holder den op med at vinke. */
.smap-float .smap-o2b.er-paa { animation: none; }
.smap-float .smap-o2b.er-paa::after { display: none; }

/* Den der har slaaet bevaegelse fra, skal stadig kunne SE knappen - farven
   bliver, kun bevaegelsen gaar. */
@media (prefers-reduced-motion: reduce) {
  .smap-float .smap-o2b { animation: none; }
  .smap-float .smap-o2b::after { display: none; }
}
.smap-float .smap-o2b.er-paa { background: #00b48a; color: #04231b;
  border-color: #2ee0b0; box-shadow: 0 0 0 2px rgba(0, 180, 138, .3); }
.smap-float .smap-o2b.er-paa:hover { background: #16c79c; }
.smap-float .smap-o2b.hidden { display: none; }

/* ---- SKUFFEN SKIFTER SIDE ----
   Med laget taendt handler skuffen KUN om laget. Togtets tal og typefilteret
   er stadig rigtige - de er bare ikke det man staar og kigger efter, og en
   skuffe hvor det man skal bruge ligger under noget andet, er en skuffe man
   scroller i. */
.smap.o2-mode #smapLive,
.smap.o2-mode #smapStatsH,
.smap.o2-mode #smapStats,
.smap.o2-mode #smapLeg { display: none; }
/* ... og omvendt: blokken findes kun i tilstanden. */
.smap:not(.o2-mode) #smapO2Blok { display: none; }

/* EN KORT BEVAEGELSE VED SKIFTET. Uden den ligner det at skuffens indhold
   bare forsvandt. 260 ms - laenge nok til at ses, kort nok til ikke at vente
   paa. Respekterer den der har slaaet bevaegelse fra i systemet. */
@keyframes smapO2Skift {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.smap-side-krop.skifter { animation: smapO2Skift .26s cubic-bezier(.2, .7, .3, 1); }
/* Farvefeltet toner op i stedet for at blive smidt paa skaermen. */
.smap-o2-canvas { transition: opacity .22s ease; }
.smap:not(.o2-mode) .smap-o2-canvas { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .smap-side-krop.skifter { animation: none; }
  .smap-o2-canvas { transition: none; }
}

/* ---- VANDSOEJLEN I BOBLEN ---- */
.smap-wc { display: block; border-radius: 8px; cursor: crosshair;
  background: var(--surface-3); }
/* Aflaesningen staar STORT under soejlen: det er tallet man kom efter, og det
   skal kunne ses uden at boeje sig ind mod skaermen. */
.smap-wc-ud { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.smap-wc-ud b { font-size: 21px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; }
.smap-wc-ud span { font-size: 11.5px; opacity: .65; }
.smap-wc-h { margin-top: 3px; font-size: 10.5px; opacity: .5; }
.smap-wc-tom { margin: 6px 0; font-size: 11.5px; color: var(--warn, #e0a33a); }

@media print {
  body.smap-printer .smap-float { display: none !important; }
}

/* =====================================================================
   ILTVISNING: SKUFFEN BAERER TALLENE
   =====================================================================
   Efter CTD Xplorer-forbilledet. Musen viser ét tal; skuffen viser hele
   vandsoejlen, springlagene og listen over togtets cast. Derfor er skuffen
   bredere naar laget er taendt - en tabel med fire talkolonner kan ikke
   klemmes ned i 320 px uden at blive ulaeselig. */
.smap.o2-mode .smap-side { --sw: 408px; }

/* ---- STATIONSLISTEN ----
   Som Xplorers venstre panel: en prik i vaerdiens farve, filnavn, dato og
   tallet. Man laeser den for at finde ÉN station - og klikker for at faa
   kortet derhen og hele soejlen frem. */
.smap-o2-liste { max-height: 232px; overflow-y: auto; margin: 2px -4px 4px;
  padding: 0 4px; }
.smap-o2-st { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 7px; margin-bottom: 3px; border-radius: 8px; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--ink);
  background: var(--surface-3); border: 1px solid transparent; }
.smap-o2-st:hover { border-color: var(--line); }
.smap-o2-st.er-valgt { border-color: #2ee0b0; background: rgba(0, 180, 138, .16); }
.smap-o2-st.er-tom { opacity: .5; }
.smap-o2-st > i { flex: 0 0 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .55); }
.smap-o2-st > span { flex: 1 1 auto; min-width: 0; }
.smap-o2-st b { display: block; font-size: 11.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smap-o2-st u { display: block; font-size: 10px; opacity: .55;
  text-decoration: none; }
.smap-o2-st em { flex: 0 0 auto; font-style: normal; font-size: 12.5px;
  font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- DEN VALGTE STATIONS VANDSOEJLE ---- */
.smap-o2-valgt { margin: 8px 0 4px; }
.smap-o2-tom { font-size: 11.5px; opacity: .55; line-height: 1.45; margin: 6px 0; }
.smap-o2-valgt-h { display: flex; align-items: baseline; gap: 8px; }
.smap-o2-valgt-h b { font-size: 12.5px; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.smap-o2-valgt-h span { margin-left: auto; font-size: 10.5px; opacity: .55;
  white-space: nowrap; }
/* Bundtallet stort: paa et iltkort er det DÉT man kom efter. */
.smap-o2-stor { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; }
.smap-o2-stor span { font-size: 11px; opacity: .6; }
.smap-o2-stor b { margin-left: auto; font-size: 26px; font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums; }
.smap-o2-stor u { font-size: 11px; opacity: .6; text-decoration: none; }

/* Springlagene - hver sin farve, saa de kan kendes fra hinanden i en fart. */
.smap-o2-kliner { display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 7px; padding: 6px 8px; border-radius: 8px;
  background: var(--surface-3); font-size: 10.5px; line-height: 1.5; }
.smap-o2-klin b { font-weight: 700; }
.smap-o2-klin.k-dens { color: #b98bff; }
.smap-o2-klin.k-temp { color: #f0a63a; }
.smap-o2-klin.k-sal  { color: #4fd08a; }

/* ---- TABELLEN: DYBDE FOR DYBDE ---- */
.smap-o2-tab { width: 100%; border-collapse: collapse; font-size: 10.5px;
  font-variant-numeric: tabular-nums; }
.smap-o2-tab th, .smap-o2-tab td { padding: 1px 3px; }
.smap-o2-tab tr:first-child th { font-size: 9px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft); padding-bottom: 3px; }
.smap-o2-tab th { text-align: right; width: 30px; color: var(--ink-soft);
  font-weight: 600; }
.smap-o2-tab td { text-align: right; }
.smap-o2-tab tr:first-child th:nth-child(2) { width: auto; }
/* Bjaelken bruger kortets EGEN farveskala - saa en raekke i tabellen og et
   punkt paa kortet har samme farve for det samme tal. */
.smap-o2-bar { width: 40%; }
.smap-o2-bar i { display: block; height: 7px; border-radius: 4px; min-width: 2px;
  background: var(--line); }
.smap-o2-v { font-weight: 700; width: 42px; }
/* Den dybeste raekke er den der betyder noget - fremhaev den. */
.smap-o2-tab tr.er-bund td, .smap-o2-tab tr.er-bund th {
  background: rgba(255, 255, 255, .07); font-weight: 800; }
/* BUNDEN AF VANDSOEJLEN. Var en pil ned - men en pil PEGER, og der er ikke
   noget at pege paa: raekken ER den dybeste maaling. U+22A5 hedder "bottom"
   og tegner en flade med en streg ned til. Vil du have et andet tegn, er det
   det ene sted her. Alternativer der findes i alle fonte: \25ac bjaelke,
   \2261 tre streger, \23da jordforbindelse (flottest, men ikke overalt). */
.smap-o2-tab tr.er-bund th::before { content: "\22a5"; margin-right: 3px;
  opacity: .62; font-size: .92em; }

/* ---- BOBLEN UNDER MUSEN: ÉT TAL ---- */
.smap-pop-o2 { min-width: 150px; }
.smap-pop-o2v { display: flex; align-items: baseline; gap: 5px; margin: 4px 0 2px; }
.smap-pop-o2v b { font-size: 24px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; }
.smap-pop-o2v u { font-size: 11px; opacity: .65; text-decoration: none; }
.smap-pop-o2v span { margin-left: auto; font-size: 10.5px; opacity: .55; }

@media print {
  /* Listen er en betjeningsting; tabellen og springlagene er oplysninger. */
  body.smap-printer .smap-o2-liste,
  body.smap-printer #smapO2Liste,
  body.smap-printer .smap-side .smap-menu-h { display: none !important; }
  body.smap-printer .smap-o2-valgt { display: block !important; }
  body.smap-printer .smap-o2-tab { color: #111; }
  body.smap-printer .smap-o2-kliner { background: #f2f4f6; }
  body.smap-printer .smap-o2-bar i { -webkit-print-color-adjust: exact;
    print-color-adjust: exact; }
}

/* ---- NAALEN PAA DEN VALGTE STATION ----
   Peger ned paa prikken, saa man kan se hvilken af tredive man landede paa.
   Tager ingen mus - ramfeltet under skal stadig kunne rammes. */
.smap-o2-naal { pointer-events: none; }
.smap-o2-naal svg { display: block;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)); }
/* Den falder ned paa plads. Kort nok til ikke at vente paa, laenge nok til at
   oejet naar at foelge med derhen. */
@keyframes smapNaalNed {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
/* ... og saa vipper den ganske langsomt, som en naal der er stukket i.
   TRE OG EN HALV GRAD og tre sekunder frem og tilbage: nok til at oejet
   finder den i en klynge af prikker, lidt nok til at man ikke sidder og
   kigger paa den i stedet for paa kortet.

   Omdrejningspunktet er SPIDSEN (50% 100%). Vippede den om midten, ville
   spidsen svinge frem og tilbage hen over havet - og saa peger den ikke
   laengere paa den station den skal pege paa. */
@keyframes smapNaalVip {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-3.5deg); }
  75%      { transform: rotate(3.5deg); }
}
.smap-o2-naal svg { transform-origin: 50% 100%;
  /* Faldet foerst, saa vippet - vippet begynder og slutter paa nul grader,
     saa overgangen mellem de to ikke giver et ryk. */
  animation: smapNaalNed .22s cubic-bezier(.2, .8, .3, 1),
             smapNaalVip 3s ease-in-out .22s infinite; }
@media (prefers-reduced-motion: reduce) {
  .smap-o2-naal svg { animation: none; }
}

/* En station uden cast: sig HVORFOR, i stedet for en tankestreg der ligner
   en maaling paa nul. */
.smap-pop-o2tom { margin: 5px 0 2px; font-size: 11.5px; line-height: 1.45;
  color: var(--warn, #e0a33a); }

/* ---- OVERTONING VED SKIFT TIL/FRA CTD XPLORER ----
   Et dissolve, ikke et klip. Sloret toner op over kortet OG skuffen, selve
   skiftet sker paa toppen hvor det er taettest, og saa toner det ud igen.

   Z-INDEX 550 er valgt med omhu: over kortfladen og skuffen (500), men UNDER
   knappanelet (600). Man skal kunne se den knap man lige trykkede paa mens
   det sker - ellers foeles det ene sekund som om programmet haenger.

   Moerkt, ogsaa i lyst tema: et hvidt glimt paa en broskaerm om natten er
   ubehageligt, og et kort dyk til moerkt laeses fint begge veje. */
.smap-veil { position: absolute; inset: 0; z-index: 550; pointer-events: none;
  opacity: 0; border-radius: 14px; background: #08131c; }
@keyframes smapDissolve {
  0%        { opacity: 0; }
  34%, 62%  { opacity: 1; }
  100%      { opacity: 0; }
}
.smap-veil.er-paa { animation: smapDissolve 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .smap-veil { display: none; }
}
@media print { body.smap-printer .smap-veil { display: none !important; } }

/* ---- SAMMENLIGN TOGTER: STEPPEREN ---- */
.smap-o2-saml { margin-top: 6px; }
.smap-o2-togt { font-family: inherit; font-size: 11px; cursor: pointer;
  padding: 4px 8px; border-radius: 999px; color: var(--ink-soft);
  background: var(--surface-3); border: 1px solid var(--line-soft); }
.smap-o2-togt:hover { border-color: var(--line); }
.smap-o2-togt.er-paa { color: #04231b; background: #00b48a; border-color: #2ee0b0;
  font-weight: 700; }
/* Et togt der ikke KAN sammenlignes - ingen CTD, eller i et helt andet
   farvand - skal kunne ses paa chippen, ikke opdages naar kortet er tomt. */
.smap-o2-togt.er-advar { border-color: var(--warn, #e0a33a); }
.smap-o2-togt u { text-decoration: none; opacity: .7; }

.smap-o2-step { display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  padding: 5px 6px; border-radius: 10px; background: var(--surface-3); }
.smap-o2-pil { font-family: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  width: 30px; height: 28px; border-radius: 8px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-soft); }
.smap-o2-pil:hover { border-color: #2ee0b0; color: #2ee0b0; }
.smap-o2-stepnavn { flex: 1 1 auto; min-width: 0; text-align: center; }
.smap-o2-stepnavn b { display: block; font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smap-o2-stepnavn u { display: block; font-size: 10px; opacity: .55;
  text-decoration: none; }

/* Den faelles skala er ikke pynt - den er forudsaetningen for at de to
   billeder overhovedet kan sammenlignes. Derfor staar den, med tal. */
.smap-o2-skala { font-size: 10.5px; line-height: 1.5; color: var(--ink-soft);
  padding: 6px 8px; border-radius: 8px; background: var(--surface-3);
  margin-bottom: 7px; }
.smap-o2-skala b { color: var(--ink); font-variant-numeric: tabular-nums; }
.smap-o2-skala span { display: block; opacity: .65; margin-top: 1px; }

@media print {
  body.smap-printer .smap-o2-togter,
  body.smap-printer .smap-o2-pil { display: none !important; }
  body.smap-printer .smap-o2-step { background: none; padding: 0; }
  body.smap-printer .smap-o2-skala { background: #f2f4f6; color: #333; }
}

/* ---- CTD XPLORER · VIDEO ---- */
.cvid { position: fixed; inset: 0; z-index: 1250; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(3, 10, 18, .78); backdrop-filter: blur(3px); }
.cvid.hidden { display: none; }
.cvid-kort { width: min(980px, 100%); max-height: 92vh; display: flex;
  flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-4); }
.cvid-h { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft); }
.cvid-h b { font-size: 15px; font-weight: 800; }
.cvid-h span { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
.cvid-h .btn { margin-left: auto; }
.cvid-krop { display: grid; grid-template-columns: 1fr 330px; gap: 18px;
  padding: 16px 18px 18px; overflow-y: auto; }
.cvid-lab { display: flex; align-items: center; gap: 6px; font-size: 10px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px; }
.cvid-alle { margin-left: auto; font-family: inherit; font-size: 10px;
  cursor: pointer; padding: 2px 8px; border-radius: 999px; color: var(--ink-soft);
  background: var(--surface-3); border: 1px solid var(--line-soft);
  text-transform: none; letter-spacing: 0; }
.cvid-alle:hover { border-color: var(--accent); color: var(--accent); }
.cvid-r { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  margin-bottom: 7px; }
.cvid-r > span { flex: 0 0 128px; color: var(--ink-soft); }
.cvid-r > b { flex: 0 0 54px; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.cvid-r input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.cvid-r .smap-sel { flex: 1 1 auto; min-width: 0; }
/* Raekkefoelgen: hvad kommer efter hvad, og hvor mange cast har hvert togt.
   Man skal kunne se at et af dem er tyndt FOER man optager i otte sekunder. */
.cvid-orden { margin: 12px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.cvid-o { display: flex; align-items: baseline; gap: 8px; font-size: 12px;
  padding: 6px 9px; border-radius: 9px; background: var(--surface-3); }
.cvid-o u { flex: 0 0 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 50%; font-size: 10px; font-weight: 800; text-decoration: none;
  background: var(--accent); color: #04231b; }
.cvid-o b { font-weight: 700; }
.cvid-o span { margin-left: auto; font-size: 11px; opacity: .6; }
.cvid-o.er-tynd { border: 1px solid var(--warn, #e0a33a); }
.cvid-o.er-tynd span { color: var(--warn, #e0a33a); opacity: 1; }
.cvid-note { font-size: 11px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0; }
.cvid-advar { color: var(--warn, #e0a33a); }
.cvid-go { display: flex; gap: 8px; margin-top: 12px; }
.cvid-status { margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); }
/* Cast-listen: prikkens farve er den vaerdi den bidrager med til filmen. */
.cvid-liste { max-height: 420px; overflow-y: auto; }
.cvid-gruppe { margin-bottom: 10px; }
.cvid-gruppe > b { display: block; font-size: 11px; font-weight: 800;
  color: var(--ink-soft); margin-bottom: 4px; }
.cvid-st { display: flex; align-items: center; gap: 7px; padding: 3px 6px;
  border-radius: 7px; font-size: 11.5px; cursor: pointer; }
.cvid-st:hover { background: var(--surface-3); }
.cvid-st.er-fra { opacity: .42; }
.cvid-st i { flex: 0 0 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .5); }
.cvid-st span { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cvid-st em { font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .cvid-krop { grid-template-columns: 1fr; }
}

/* ---- CTD XPLORER: KNAP MED MENU ---- */
.smap-o2-wrap { position: relative; display: inline-flex; }
.smap-o2-wrap.hidden { display: none; }
.smap-o2b em { font-style: normal; opacity: .7; margin-left: 1px; }
/* Menuen haenger under knappen, i det flydende panel - en menu der aabner et
   andet sted end der hvor man trykkede, skal man lede efter. */
.smap-o2-menu { position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); z-index: 40; width: 268px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line); box-shadow: var(--sh-4); }
.smap-o2-menu.hidden { display: none; }
.smap-o2-menu button { display: flex; align-items: flex-start; gap: 9px;
  width: 100%; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--ink);
  background: none; border: 1px solid transparent; }
.smap-o2-menu button:hover:not(:disabled) { background: var(--surface-3);
  border-color: var(--line-soft); }
.smap-o2-menu button:disabled { opacity: .45; cursor: default; }
.smap-o2-menu i { flex: 0 0 16px; font-style: normal; font-size: 13px;
  line-height: 1.35; color: #2ee0b0; }
.smap-o2-menu b { display: block; font-size: 12.5px; font-weight: 700; }
.smap-o2-menu u { display: block; font-size: 10.5px; opacity: .6;
  text-decoration: none; line-height: 1.4; margin-top: 1px; }

/* ---- LEGENDENS TEKST: FASTE LINJER ----
   Advarslen stod midt i saetningen og braekkede den om til to linjer, saa alt
   under den flyttede sig. Nu har hver sin linje, og feltet har plads til dem
   begge ogsaa naar advarslen ikke er der. */
/* Advarslens linje bliver STAAENDE ogsaa naar der ikke er nogen. Lod man den
   klappe sammen, flyttede kortet sig tre pixels hver gang en advarsel kom
   eller gik - og med skyderne lige under er tre pixels nok til at man rammer
   ved siden af. Femten pixels reserveret er billigere end et kort der
   hopper. */
.smap-o2-cap { min-height: 62px; }
.smap-o2-cap1 { display: block; }
.smap-o2-cap2 { display: block; min-height: 15px; }
/* HVAD BETYDER ROED? Egen linje under advarslen, med fast mindstehoejde saa
   skuffen ikke hopper naar teksten skifter mellem de fire tilfaelde. */
/* NOTEN VED "TRACK": hvor mange broedkrummer, og hvornaar den sidste kom.
   Raekken maa ikke forsvinde naar der ikke er noget spor - en kontakt der
   ikke er der, laeses som "funktionen findes ikke". */
.smap-sw-note { font-style: normal; font-size: 10.5px; opacity: .62;
  margin-left: 6px; letter-spacing: .01em; }
.smap-sw.er-tom { opacity: .55; }
.smap-sw.er-tom input { cursor: not-allowed; }
.smap-o2-cap3 { display: block; min-height: 15px; }
.smap-o2-skala { font-style: normal; color: var(--muted, #93a7bb);
  border-bottom: 1px dotted currentColor; cursor: help; }

/* ---- INDSTILLINGERNE BAG ET KLIK ----
   Seks skydere man saetter én gang stod mellem legenden og stationslisten, saa
   man rullede forbi dem hver gang man ville se en anden station. Nu er de
   klappet sammen - og sammenfattet, saa man kan se hvad de staar paa uden at
   aabne dem. */
.smap-o2-fold { display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 2px 0 6px; padding: 5px 8px; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; text-align: left; color: var(--ink-soft);
  background: var(--surface-3); border: 1px solid transparent; }
.smap-o2-fold:hover { border-color: var(--line-soft); color: var(--ink); }
.smap-o2-fold-p { display: inline-block; transition: transform .16s ease; }
.smap-o2-fold.er-aaben .smap-o2-fold-p { transform: rotate(90deg); }
.smap-o2-fold u { margin-left: auto; font-size: 10px; font-weight: 600;
  letter-spacing: 0; text-transform: none; text-decoration: none; opacity: .75;
  font-variant-numeric: tabular-nums; }
.smap-o2-saet { display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 8px; }
.smap-o2-saet.hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
  .smap-o2-fold-p { transition: none; }
}
@media print {
  /* Paa papir er skyderne ligegyldige - men det de STAAR paa hoerer med, og
     det staar allerede i legendens kildelinje. */
  body.smap-printer .smap-o2-fold,
  body.smap-printer .smap-o2-saet { display: none !important; }
}

/* ---- VAELGEREN: TOGTER OG CAST ----
   Chips-raekken kunne baere tre togter. Om fem aar er der tredive, og de kan
   ikke ligge i en skuffe paa 400 pixels. Her er der plads: soegning, aarstal
   og en liste der kan rulles. */
.smap-pick { position: absolute; inset: 0; z-index: 700; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4, 12, 20, .72); }
.smap-pick.hidden { display: none; }
.smap-pick-kort { width: min(880px, 100%); max-height: 100%; display: flex;
  flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-4); }
.smap-pick-h { display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.smap-pick-h b { font-size: 14px; font-weight: 800; }
.smap-pick-h .btn { margin-left: auto; }
.smap-pick-krop { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 14px 16px; overflow: hidden; min-height: 0; }
.smap-pick-krop:has(.hidden#smapPickCastSide) { grid-template-columns: 1fr; }
.smap-pick-side { display: flex; flex-direction: column; min-height: 0; }
.smap-pick-side.hidden { display: none; }
.smap-pick-soeg { font-family: inherit; font-size: 12.5px; padding: 6px 10px;
  margin-bottom: 7px; border-radius: 9px; background: var(--surface-3);
  border: 1px solid var(--line-soft); color: var(--ink); }
.smap-pick-aarr { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.smap-pick-aar { font-family: inherit; font-size: 10.5px; cursor: pointer;
  padding: 3px 9px; border-radius: 999px; color: var(--ink-soft);
  background: var(--surface-3); border: 1px solid var(--line-soft); }
.smap-pick-aar.er-paa { color: #04231b; background: #00b48a;
  border-color: #2ee0b0; font-weight: 700; }
.smap-pick-liste { flex: 1 1 auto; min-height: 120px; max-height: 46vh;
  overflow-y: auto; }
.smap-pick-r { display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 9px; margin-bottom: 3px; border-radius: 9px;
  background: var(--surface-3); border: 1px solid transparent; }
.smap-pick-r:hover { border-color: var(--line); }
.smap-pick-r.er-paa { border-color: #2ee0b0; background: rgba(0, 180, 138, .14); }
/* Et togt uden CTD, eller et der ligger i et helt andet farvand, skal kunne
   ses paa raekken - ikke opdages naar filmen er tom. */
.smap-pick-r.er-advar em { color: var(--warn, #e0a33a); }
.smap-pick-r span { flex: 1 1 auto; min-width: 0; }
.smap-pick-r b { display: block; font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smap-pick-r u { display: block; font-size: 10.5px; opacity: .55;
  text-decoration: none; }
.smap-pick-r em { font-style: normal; font-size: 11px; opacity: .7;
  white-space: nowrap; }
.smap-pick-gr { margin-bottom: 10px; }
.smap-pick-gr > b { display: flex; gap: 6px; font-size: 11px; font-weight: 800;
  color: var(--ink-soft); margin-bottom: 4px; }
.smap-pick-gr > b u { margin-left: auto; text-decoration: none; opacity: .7; }
.smap-pick-c { display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 3px 7px; border-radius: 7px; font-size: 11.5px; }
.smap-pick-c:hover { background: var(--surface-3); }
.smap-pick-c.er-fra { opacity: .42; }
.smap-pick-c i { flex: 0 0 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .5); }
.smap-pick-c span { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.smap-pick-c em { font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.smap-pick-tom { font-size: 11.5px; opacity: .55; padding: 8px 2px; }
.smap-pick-fod { display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.smap-pick-fod span { font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.smap-pick-fod .btn { margin-left: auto; }

/* Knappen i skuffen der aabner den */
.smap-o2-vaelg { display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; padding: 7px 10px; margin-bottom: 7px; border-radius: 9px;
  color: var(--ink); background: var(--surface-3);
  border: 1px solid var(--line-soft); }
.smap-o2-vaelg:hover { border-color: #2ee0b0; }
.smap-o2-vaelg b { display: block; font-size: 12.5px; font-weight: 700; }
.smap-o2-vaelg u { display: block; font-size: 10.5px; opacity: .6;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

.smap-pick-fod span.er-advar { color: var(--warn, #e0a33a); }

/* Hvordan den korrigerede vind er regnet - staar ved siden af tallet, ikke i
   en fodnote man skal lede efter. */
.ov-vind-note { display: block; font-style: normal; font-size: 10.5px;
  opacity: .6; margin-top: 1px; }

/* Note under et tal i stationsarket: hvor det kommer fra, og hvilket nulpunkt
   det er maalt fra. Samme udtryk som vind-noten ovenfor - saa "lille tekst
   under tallet" betyder det samme overalt.

   Opaciteten er .68 og ikke .6: arket printes, og paa papir forsvinder en note
   der er for lys. Den skal kunne laeses af den der staar med udskriften om et
   aar - det er hele grunden til at den er der. */
.slp-note { display: block; font-style: normal; font-size: 10px;
  opacity: .68; margin-top: 1px; line-height: 1.35; }
@media print { .slp-note { opacity: 1; color: #444; } }

/* ===== CTD-OVERSIGTEN -> FISKELINE ===== */
.ctb-card { max-width: 1120px; }
.ctb-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0;
  flex-wrap: wrap; }
.ctb-prog { flex: 0 0 160px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.10); overflow: hidden; }
.ctb-prog span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2ee0b0, #6ea8ff); transition: width .2s; }
.ctb-progtxt { font-size: 12.5px; color: var(--ink-soft, #9fc0d2);
  font-variant-numeric: tabular-nums; }
.ctb-spring { flex: 1 1 auto; }
/* ALLE kontroller i baandet SAMME hoejde (Christian). */
.ctb-bar .btn, .ctb-bar select { height: 32px; box-sizing: border-box; }
.ctb-bar .btn { display: inline-flex; align-items: center; }
.ctb-dec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--ink-soft, #9fc0d2); }
/* background-COLOR (ikke shorthand!) - ellers nulstiller den chevron-billedet fra
   select:not(.sr-only), og feltet stod med en tom 32px-luft uden pil. min-width
   saa ", comma"/"First" ikke klemmes op mod chevronen. */
.ctb-dec select { background-color: rgba(255,255,255,.06);
  border: 1px solid rgba(120,160,200,.35); border-radius: 8px; color: #eaf2f6;
  font-size: 12px; min-width: 112px; padding-left: 11px; }
.ctb-scroll { max-height: 62vh; overflow: auto; border-radius: 10px;
  border: 1px solid rgba(120,160,200,.16); }
.ctb-tab { border-collapse: collapse; width: 100%; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.ctb-tab th, .ctb-tab td { padding: 9px 13px; text-align: center;
  white-space: nowrap; }
.ctb-tab thead th { position: sticky; top: 0; background: #14202e; z-index: 1; }
/* Hovedet stod SORT: den ugennemsigtige sticky-bund (#0c1826) havde HOEJERE
   specificitet end toningerne herunder (.ctb-gid osv.), saa farverne kom aldrig
   frem. Nu vinder UGENNEMSIGTIGE, tonede farver pr. kort - de SKAL vaere
   ugennemsigtige, ellers skinner raekkerne igennem naar man scroller. */
.ctb-tab thead th.ctb-gid  { background: #202d3c; }
.ctb-tab thead th.ctb-surf { background: #1d3252; }
.ctb-tab thead th.ctb-bot  { background: #3b2c1d; }
.ctb-tab thead th.ctb-hi   { background: #1a2836; }
.ctb-tab thead th.ctb-hs   { background: #172a45; }
.ctb-tab thead th.ctb-hb   { background: #322619; }
.ctb-tab thead tr:last-child th { border-bottom: 1px solid rgba(120,160,200,.30); }

/* --- TRE KORT PAA RAEKKE: Station / Surface / Bottom --- */
.ctb-grp th { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 800; text-align: center; padding: 7px 9px; }
.ctb-gid  { color: #cfe0ee; }
.ctb-surf { color: #8fc6ff; }
.ctb-bot  { color: #f6ac74; }
.ctb-hd th { font-size: 11px; color: #9fc0d2; text-align: center;
  border-bottom: 1px solid rgba(120,160,200,.28); }
.ctb-hi { background: rgba(150,180,210,.06); }
.ctb-hs { background: rgba(120,170,255,.08); }
.ctb-hb { background: rgba(240,150,90,.08); }
/* celletoner pr. kort */
.ctb-i { background: rgba(150,180,210,.05); }
.ctb-c.ctb-s { background: rgba(120,170,255,.06); }
.ctb-c.ctb-b { background: rgba(240,150,90,.06); }
/* ZEBRA: hver 2. raekke en anelse lysere. Ligger paa RAEKKEN, UNDER cellernes
   halvgennemsigtige kort-toner - saa striben skinner igennem paa normale celler,
   mens kort-farver, hover og "kopieret"-groen stadig vinder ovenpaa (de maler paa
   cellen). Nemmere at foelge en linje paa tvaers. */
.ctb-tab tbody tr:nth-child(even) { background-color: rgba(150,180,220,.065); }
/* lodret skillelinje mellem kortene - fra hoved til bund */
.ctb-surf, .ctb-bot, .ctb-hs.ctb-gstart, .ctb-hb.ctb-gstart,
.ctb-c.ctb-gstart { border-left: 2px solid rgba(8,16,26,.65); }
/* MATRIX: HVER celle er sit eget felt at kopiere - TYDELIGE net-linjer, klik pr.
   celle. Graesset gjort klarere (fra .07 til .16) saa det ligner et regneark. */
.ctb-c { position: relative; border-right: 1px solid rgba(120,160,200,.16);
  border-bottom: 1px solid rgba(120,160,200,.16); }
.ctb-c[data-cell] { cursor: copy; }
/* Allerede markeret felt: klik FJERNER markeringen (fortryd misclick) - pil, ikke kopi. */
.ctb-c.er-copied[data-cell] { cursor: pointer; }
.ctb-c[data-cell]:hover { background: rgba(120,170,255,.22);
  box-shadow: inset 0 0 0 1px rgba(150,195,255,.6); }
.ctb-c.ctb-empty { color: #5a7286; }
/* KOPIERET FELT: groen tone + lille flueben, saa man ser praecis hvilke felter
   der er taget (klik-igennem-fremdrift). */
.ctb-c.er-copied { background: rgba(46,224,176,.14); color: var(--ink-soft, #9fc0d2); }
.ctb-ck { position: absolute; top: 1px; right: 3px; font-size: 9px; font-style: normal;
  color: #2ee0b0; opacity: .9; line-height: 1; }
.ctb-no { text-align: center; font-weight: 800; }
.ctb-date { text-align: center; color: var(--ink-soft, #9fc0d2); }
.ctb-mangler td { color: #7fa2b8; opacity: .7; }
.ctb-mangler .ctb-why { text-align: center; font-style: italic; }
/* Mere luft mellem OK-knappen/overskriften og introteksten i CTD-arket. */
.ctb-card .modal-head { margin-bottom: 4px; }
.ctb-card .hint { margin-top: 12px; margin-bottom: 16px; }
.ctb-load { padding: 20px; color: var(--ink-soft, #9fc0d2); text-align: center; }

/* PRINT: kun tabellen, sort paa hvidt. */
@media print {
  body.ctb-printer > *:not(#ctdTableModal) { display: none !important; }
  body.ctb-printer #ctdTableModal { position: static !important;
    background: #fff !important; display: block !important; }
  body.ctb-printer #ctdTableModal .modal-card { box-shadow: none !important;
    max-width: none !important; width: auto !important; color: #000 !important;
    background: #fff !important; }
  /* LODRET (portraet) print via NAVNGIVET side, saa vi ikke roerer kort-printets
     liggende @page (smap-printer, laengere oppe). Lille skrift + fuld bredde saa
     alle 13 kolonner faar plads paa en staaende A4. */
  @page ctbPortrait { size: A4 portrait; margin: 10mm; }
  body.ctb-printer #ctdTableModal .modal-card { page: ctbPortrait; }
  body.ctb-printer .ctb-tab { font-size: 10px !important; width: 100% !important;
    table-layout: auto !important; }
  body.ctb-printer .ctb-bar, body.ctb-printer .modal-head button,
  body.ctb-printer .ctb-ck { display: none !important; }
  body.ctb-printer .ctb-scroll { max-height: none !important; overflow: visible !important;
    border: none !important; }
  body.ctb-printer .ctb-tab, body.ctb-printer .ctb-tab th,
  body.ctb-printer .ctb-tab td { color: #000 !important; }
  /* Overskrifter CENTRERET + FARVEDE kolonner ved print, saa oejet nemt kan
     foelge en kolonne ned og den samme maaling paa tvaers af surface/bottom.
     print-color-adjust: exact tvinger browseren til at printe baggrundene. */
  body.ctb-printer .ctb-tab, body.ctb-printer .ctb-tab * {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  /* ALT centreret paa papir (tal + overskrifter) — nemmest at scanne. */
  body.ctb-printer .ctb-tab th, body.ctb-printer .ctb-tab td { text-align: center !important; }
  /* gruppe-baand: Station / Surface / Bottom */
  body.ctb-printer .ctb-gid  { background: #e7ebf1 !important; }
  body.ctb-printer .ctb-surf { background: #dbe7fb !important; }
  body.ctb-printer .ctb-bot  { background: #fbe6d4 !important; }
  /* Stn/Date-underoverskriften (.ctb-hi uden kolonne-klasse) stod stadig MOERK
     paa papir - skaermens ugennemsigtige hoved-farve blev ikke overskrevet her. */
  body.ctb-printer .ctb-hi { background: #eef1f5 !important; }
  /* kolonne-toner: samme maaling faar samme farve i surface og bottom */
  body.ctb-printer .ctb-col-tot  { background: #eef1f5 !important; }
  body.ctb-printer .ctb-col-m    { background: #e8ecf3 !important; }
  body.ctb-printer .ctb-col-temp { background: #fde4de !important; }
  body.ctb-printer .ctb-col-o2   { background: #e0f3e6 !important; }
  body.ctb-printer .ctb-col-salt { background: #e1ebfb !important; }
  body.ctb-printer .ctb-col-chl  { background: #f3e7fb !important; }
  /* TRE KORT paa papir: et HVIDT mellemrum foer Surface og foer Bottom (baand +
     underoverskrift + data), saa hver sektion staar som sit eget farvede kort. */
  body.ctb-printer .ctb-surf, body.ctb-printer .ctb-bot,
  body.ctb-printer .ctb-gstart { border-left: 16px solid #fff !important; }
  /* lyse celle-linjer inde i hvert kort */
  body.ctb-printer .ctb-c { border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important; }
  /* kort-top (baandet) og kort-bund (sidste raekke) rammer hvert kort ind */
  body.ctb-printer .ctb-grp th { border-top: 1.5px solid #9aa7b0 !important; }
  body.ctb-printer .ctb-tab tbody tr:last-child > * {
    border-bottom: 1.5px solid #9aa7b0 !important; }
  /* Kopieret-groen fjernes automatisk: kolonne-tonerne (!important) vinder over
     .er-copied paa papir, saa kolonnerne staar som ubrudte farvebaand. */
}

/* ======================================================================
   NAVNGIVNE RANGE-FILTRE (Scanmar averages) — tandhjul + baand + piller
   ====================================================================== */

/* Read-only pillen: viser hvad det aktive filter foreslaar for kolonnen, men
   kan ikke redigeres (graenserne saettes i tandhjulet). Ren chip-stil, ikke den
   stiplede "skriv her"-kant. Et klik aabner dog manageren. */
.antbl-filt-ro { cursor: pointer; border-style: solid; }
.antbl-filt-ro:hover { border-color: var(--accent); color: var(--ink); }
.antbl-filt-ro:not(.on) { opacity: .8; }
/* "NO RANGE" SKAL FANGE OEJET (Christian 28/8): en stille aandende glod paa
   pillerne uden graense, saa man opdager at filtret mangler - kun i
   rense-tilstand, hvor beslutningen faktisk traeffes. Slaas fra ved
   reduced motion. */
@keyframes antblNudge {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 0%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent); }
}
#anTableModal.antbl-cleaning .antbl-filt-ro:not(.on) {
  animation: antblNudge 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .antbl-filt-ro:not(.on) { animation: none; }
}

/* Cog-knappen i vaerktoejsraekken viser samtidig HVILKET filter der er i brug. */
.btn.small.rf-cog { font-variant-numeric: tabular-nums; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.small.rf-cog.rf-cog-warn {
  border-color: var(--warn); color: var(--warn);
  background: rgba(var(--warn-rgb, 240,180,41), .12);
}

/* Baandet der siger hvilket filter der renses efter — eller advarer om at der
   ingen er. Staar oeverst i rense-visningen. */
.an-flt-banner {
  display: flex; align-items: flex-start; gap: 9px;
  border-radius: 10px; padding: 9px 12px; margin: 0 0 10px;
  font-size: 12.5px; line-height: 1.4;
}
.an-flt-banner.is-ok {
  background: rgba(63,214,176,.10); border: 1px solid rgba(63,214,176,.32);
  color: var(--ink-soft);
}
.an-flt-banner.is-warn {
  background: rgba(var(--warn-rgb, 240,180,41), .13);
  border: 1px solid rgba(var(--warn-rgb, 240,180,41), .45); color: var(--ink);
}
.an-flt-banner b { color: var(--ink); }
.an-flt-i {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; margin-top: 1px;
}
.an-flt-banner.is-ok .an-flt-i { color: #3fd6b0; background: rgba(63,214,176,.16); }
.an-flt-banner.is-warn .an-flt-i { color: #111; background: var(--warn); }
.an-flt-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline;
}
.an-flt-link:hover { filter: brightness(1.15); }

/* -------- Manageren (#rangeFilterModal) -------------------------------- */
/* 210, IKKE 130: editoren (#anTableModal) ligger paa 200, og manageren aabnes
   ogsaa INDE fra den (⚑-pillerne/tandhjulet paa vaerdikortene). Med 130 landede
   den bagved og kunne hverken ses eller lukkes (Christian 27/8). OBS: en
   tidligere fix-regel hoejere oppe i filen tabte til DENNE (senere = vinder) -
   z-index for modalen skal rettes HER. */
#rangeFilterModal { z-index: 210; }
.rf-card { width: min(860px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.rf-head-a { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.rf-save.is-dirty { animation: approvePulse 2.6s ease-in-out infinite; }
.rf-save:disabled { opacity: .55; }
.rf-top-hint { margin: 2px 2px 12px; }
.rf-body { overflow: auto; flex: 1 1 auto; }

.rf-grid { display: grid; grid-template-columns: 244px 1fr; gap: 16px; align-items: start; }
@media (max-width: 680px) { .rf-grid { grid-template-columns: 1fr; } }

.rf-left-h, .rf-fname {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 8px;
}
.rf-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rf-item {
  display: grid; grid-template-columns: 1fr auto; grid-auto-rows: auto; gap: 2px 8px;
  text-align: left; cursor: pointer; width: 100%;
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px;
  background: rgba(255,255,255,.02); color: var(--ink);
}
.rf-item:hover { border-color: var(--line); }
.rf-item.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.rf-item-nm { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-item-badges { display: flex; gap: 4px; justify-self: end; flex-wrap: wrap; }
.rf-item-n { grid-column: 1 / -1; font-size: 11px; color: var(--ink-soft); opacity: .8; }
.rf-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}
.rf-badge-act { color: #3fd6b0; background: rgba(63,214,176,.16); }
.rf-badge-def { color: var(--warn); background: rgba(var(--warn-rgb, 240,180,41), .16); }
.rf-empty, .rf-none { color: var(--ink-soft); font-size: 12.5px; padding: 10px 2px; }

/* Luft under hovedraekken: Rename/Delete har rigtige drop shadows, og med kun
   2px til hint-teksten landede skyggen OVEN I teksten - det lignede en beskidt
   kant under Delete-knappen (Christian 27/8). */
.rf-fhead { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; }
.rf-edit-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.rf-fhint { margin: 0 0 14px; }
.btn.small.danger { border-color: rgba(230,90,90,.5); color: #ff8a8a; }
.btn.small.danger:hover { border-color: #ff6b6b; background: rgba(230,90,90,.12); }

.rf-gears { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.rf-gear {
  cursor: pointer; border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 5px 12px; font: 600 12px system-ui, "Segoe UI", sans-serif;
  color: var(--ink-soft); background: rgba(255,255,255,.02);
}
.rf-gear:hover { border-color: var(--line); color: var(--ink); }
.rf-gear.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .13); color: var(--accent); }
.rf-gear.has:not(.on) { border-color: rgba(63,214,176,.4); }
.rf-gear-n {
  display: inline-block; min-width: 15px; text-align: center; margin-left: 3px;
  font-size: 10px; font-weight: 800; border-radius: 999px; padding: 0 4px;
  background: rgba(63,214,176,.18); color: #3fd6b0;
}

.rf-rows { display: flex; flex-direction: column; gap: 4px; }
.rf-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
}
.rf-row:hover { background: rgba(255,255,255,.02); }
.rf-row.set { border-color: rgba(var(--accent-rgb), .25); background: rgba(var(--accent-rgb), .05); }
.rf-row-lbl { font-size: 12.5px; color: var(--ink); min-width: 0; }
.rf-row-u { color: var(--ink-soft); font-size: 11px; }
.rf-row-code { color: var(--ink-soft); opacity: .55; font-size: 10.5px; font-family: ui-monospace, monospace; }
.rf-row-in { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rf-row-dash { color: var(--ink-soft); }
.rf-in {
  width: 66px; text-align: center; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-soft); border-radius: 7px; padding: 5px 6px;
  background: var(--bg, rgba(0,0,0,.15)); color: var(--ink); font-size: 12.5px;
}
.rf-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.rf-in:disabled { opacity: .55; }

.rf-foot {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* Paalidelighed pr. lag i vandsoejlen (O2/CTD-overlay): spredning ±sd og et
   flag naar laget kun har faa maalinger. Daempet - det er en note, ikke tallet. */
.smap-o2-sd { color: var(--ink-soft); opacity: .55; font-size: 9.5px; margin-left: 3px; font-style: normal; font-variant-numeric: tabular-nums; }
.smap-o2-v.er-tynd { opacity: .72; }
.smap-o2-nlow { color: var(--warn, #f0b429); opacity: .85; font-size: 9px; margin-left: 3px; font-weight: 700; }

/* Faste farve-graenser (O2/CTD-overlay, Scale = Fixed): to smalle talfelter + auto. */
.smap-o2-fixrow .smap-fixin {
  width: 4.6em; text-align: center; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 5px;
  background: var(--bg, rgba(0,0,0,.15)); color: var(--ink); font-size: 12px;
}
.smap-o2-fixrow .smap-fixin:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.smap-o2-fixrow .smap-fixreset {
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 8px;
  background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 11px;
}
.smap-o2-fixrow .smap-fixreset:hover { border-color: var(--line); color: var(--ink); }

/* QC-toggle: antal punkter kasseret (range-gate + 3 sigma), til hoejre i rækken. */
.smap-o2-qcn { margin-left: auto; color: var(--warn, #f0b429); font-size: 10.5px; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }

/* ===== CTD SECTION VIEW (afstand x dybde-snit) ===== */
/* Snittet aabnes OVENPAA Mini Maps (.smap = z-index 1200) uden at lukke kortet,
   saa det SKAL ligge hoejere end kortet - ellers "popper det frem bag kortet"
   (z 120 forsvandt bagom). Under .psel-pop (1300), saa dets egen Variable-
   dropdown stadig aabner ovenpaa. */
#smapSectionModal { z-index: 1250; }
.sect-card { width: min(1200px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.sect-head-a { display: flex; gap: 14px; margin-left: auto; align-items: center; }
.sect-ctl { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); }
.sect-ctl span { white-space: nowrap; }
.sect-ctl input[type=range] { width: 120px; }
.sect-ctl b { min-width: 34px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sect-body { overflow: auto; padding-top: 6px; }
.sect-canvas { display: block; width: 100%; border-radius: 10px; background: rgba(8,14,20,.5); }
.sect-hint { margin: 8px 2px 0; }

/* Section-modalens egne kontroller i hovedet. */
.sect-head-a { flex-wrap: wrap; }
.sect-ctl select.smap-sel { max-width: 190px; }
.sect-ctl.sect-iso { gap: 5px; cursor: pointer; }
.sect-ctl.sect-iso input { margin: 0; }

/* ===== SENSOR COMPARISON (sensor 1 vs 2, QC-diagnostik) ===== */
#sensorDiffModal { z-index: 130; }
.sd-card { width: min(880px, 96vw); max-height: 90vh; display: flex; flex-direction: column; }
.sd-intro { margin: 2px 2px 12px; }
.sd-body { overflow: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.sd-file { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-soft); opacity: .7; }
.sd-none, .sd-load { color: var(--ink-soft); padding: 16px 4px; }
.sd-pair { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.sd-phd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 9px 12px; background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line-soft); }
.sd-plab { font-weight: 800; font-size: 14px; color: var(--ink); }
.sd-plab u { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 12px; }
.sd-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.sd-n { opacity: .7; }
.sd-scroll { max-height: 300px; overflow: auto; }
.sd-tab { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sd-tab th { position: sticky; top: 0; background: #0c1826; text-align: right; padding: 5px 10px;
  color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.sd-tab th:first-child { text-align: left; }
.sd-tab td { text-align: right; padding: 4px 10px; border-bottom: 1px solid rgba(120,160,200,.06); }
.sd-dep { text-align: left; color: var(--ink); }
.sd-s1 { color: #9fc7ff; }
.sd-s2 { color: #ffc08a; }
.sd-barcell { width: 92px; }
.sd-bar { display: inline-block; height: 6px; border-radius: 3px; min-width: 2px; vertical-align: middle; }

/* ---- VEJRFIGURER: rose + tidsserie (Christian 31/8, Kai's Fig. 2) --------
   To laerreder side om side paa brede skaerme, stablet paa smalle. Hoejden er
   fast i px (ikke vh): de skal kunne staa i en fane der selv ruller, og en
   vh-hoejde ville aendre sig med UI-skalaen - se skalerings-faelden. */
.vl-plots { margin: 12px 0 6px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft); }
.vl-plots-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 13px; color: var(--ink); }
.vl-plots-n { color: var(--ink-soft); font-size: 11.5px;
  font-variant-numeric: tabular-nums; margin-left: auto; }
.vl-plots-h .btn { margin-left: 4px; }
.vl-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line-soft); }
.vl-sg { padding: 4px 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-soft); font-size: 11.5px;
  font-weight: 600; font-family: inherit; }
/* VALGT segment = en FYLDT knop med moerk tekst, som CTD-kildens
   SeaSave/Mini-SIS-omskifter (.ctd-src.is-on). En blaa tone paa blaa bund er
   ikke en kontakt, det er en skygge (Christian 31/8: "den her anden farve").
   Den fyldte knop laeses som et fysisk skifte - og huset har den i forvejen. */
/* TO TILSTANDE, TO FARVER (Christian 1/9: "farv knappen naar den staar i
   whole cruise - for mange blaa knapper"). Omfanget er ikke et vilkaarligt
   valg: staar man paa HELE TOGTET, ser man ikke stationens vejr, og det skal
   kunne ses paa ét blik uden at laese etiketten.
     This station = teal (naert, det man staar i)
     Whole cruise = dyb guld (bredere udsnit)
   Guldet er MOERKERE end advarsels-rav, saa de to aldrig forveksles. */
.vl-sg.is-on { background: var(--accent-2, var(--accent)); color: #04222a;
  box-shadow: var(--sh-1); font-weight: 700; }
.vl-sg.is-on[data-vlscope="cruise"] { background: #c9922f; color: #221703; }
:root[data-mode="light"] .vl-sg.is-on[data-vlscope="cruise"] {
  background: #f3d68a; color: #4a3306; }
/* Hele stribens kant faarver med, saa det ses i oejenkrogen at udsnittet er
   skiftet - ogsaa naar man kigger paa selve grafen. */
.vl-seg:has(.is-on[data-vlscope="cruise"]) {
  border-color: rgba(201,146,47,.55); background: rgba(201,146,47,.10); }
.vl-plots-g { display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px; align-items: stretch; }
@container page (max-width: 860px) { .vl-plots-g { grid-template-columns: 1fr; } }
.vl-rose { width: 100%; height: 300px; display: block; }
.vl-time { width: 100%; height: 300px; display: block; }

/* HENT-KNAPPER i de to CTD-moduler: samme kobber som .btn.save, saa "tag det
   ud af programmet" har ÉN farve overalt (Christian 31/8: ikke flere blaa). */
.ctp-btn.ctp-save { background: rgba(107,74,52,.55); color: #ffe3cd;
  border-color: rgba(215,150,105,.42); }
.ctp-btn.ctp-save:hover { background: rgba(139,96,66,.75); color: #fff; }
.cl-tbtn-save { background: rgba(107,74,52,.5); color: #ffe3cd;
  border-color: rgba(215,150,105,.4); }
.cl-tbtn-save:hover { background: rgba(139,96,66,.7); color: #fff; }

/* Togtets vindfigur-vindue: over stationskortet, som de andre nye popups. */
#vfModal { z-index: 130; }
.vf-card { width: min(1080px, calc(100vw - 36px)); padding: 20px 24px; }
.vf-g { margin-top: 4px; }
.vf-g .vl-rose, .vf-g .vl-time { height: 340px; }

/* Vindfigur-vinduet: roserne side om side (ét ben = én rose), tidsserien under. */
.vf-roser { display: grid; gap: 10px; margin-top: 4px; }
.vf-roser .vl-rose { width: 100%; height: 330px; }
.vf-tid { width: 100%; height: 260px; display: block; margin-top: 6px; }

/* Valg-vinduet foran download: hvad skal med i billedet. */
#vfOptModal { z-index: 140; }
.vfo-card { width: min(560px, calc(100vw - 36px)); padding: 20px 24px; }
/* Valgene som ét roligt gitter: navnene staar under hinanden i venstre
   kolonne, pillerne i hoejre. Stod navnet OVER hver raekke, blev det fire
   linjer der skiftede retning i stedet for to der flugter. */
.vfo-valg {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px 14px; align-items: center;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.vfo-valg .vfo-r { display: contents; }
.vfo-h { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px; }
.vfo-valg .vfo-h { margin-bottom: 0; white-space: nowrap; }
.vfo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Benene: en oplysning om togtet, ikke et valg - derfor ingen ramme, bare
   to rolige felter. */
.vfo-ben {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 2px;
  font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.vfo-ben b { color: var(--ink); font-weight: 700; }
.vfo-chip { padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: var(--surface-3); color: var(--ink-soft);
  border: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600;
  font-family: inherit; transition: color .12s, border-color .12s, background .12s; }
.vfo-chip:hover { color: var(--ink); border-color: var(--line); }
/* Valgt = fyldt knop med moerk tekst, samme sprog som de andre omskiftere. */
.vfo-chip.on { background: var(--accent-2, var(--accent)); color: #04222a;
  border-color: transparent; box-shadow: var(--sh-1); font-weight: 700; }
/* Knappen faar selskab af det den laver: format og maal til venstre, saa
   den ikke svaever alene i hjoernet. */
.vfo-fod {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.vfo-hvad {
  font-size: 11.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Figur-hovedet baerer nu tre udtraek - lad dem bryde paent paa smalle skaerme. */
.vl-plots-h { row-gap: 8px; }
.vl-plots-h .btn { margin-left: 0; }
.vl-plots-n { margin-left: auto; }

/* ---- FOLDBART TOGTKORT (1/9) ----------------------------------------
   Sidebaren voksede, og "Today's Program" - det man kigger paa hele dagen -
   laa under skaermkanten. Togtinfo laeses ÉN gang pr. vagt, saa den maa
   gerne kunne foldes vaek. Valget huskes pr. skaerm. */
.cd-fold { display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin: 0 0 8px; padding: 5px 8px; border-radius: 8px;
  background: transparent; border: 1px dashed var(--line-soft);
  color: var(--ink-soft); font-family: inherit; font-size: 11px;
  font-weight: 600; letter-spacing: .03em; cursor: pointer;
  transition: color .12s, border-color .12s; }
.cd-fold:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .55); }
.cd-fold-c { font-size: 14px; line-height: 1; transform: rotate(90deg); }
.cd-krop.er-foldet { display: none; }

/* Hover-etiket paa tidsserien: tid + fart for det naermeste MAALEPUNKT. */
.vl-plots-g, .vf-g, .vl-plots { position: relative; }
.vl-tip { position: absolute; z-index: 5; pointer-events: none;
  transform: translateX(-50%); padding: 3px 9px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--sh-2); }
.vl-tip.hidden { display: none; }

/* Foldeknappen skal FOELE hurtig: tryk-feedback med det samme, og chevronen
   drejer i stedet for at hoppe mellem to tegn. */
.cd-fold { transition: color .1s, border-color .1s, background .1s; }
.cd-fold:active { transform: translateY(1px); background: rgba(var(--accent-rgb), .08); }
.cd-fold-c { transition: transform .15s ease; }
.cd-fold[aria-expanded="false"] .cd-fold-c { transform: rotate(-90deg); }

/* ---- OVERFLADEVAND (stevnroer): togt-kort farvet efter maalingen -------- */
#ofModal { z-index: 130; }
.of-card { width: min(1080px, calc(100vw - 36px)); padding: 20px 24px; }
.of-vars { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.of-kort { width: 100%; height: min(560px, 62vh); display: block;
  border-radius: 10px; }

/* Doegn-listen i overflade-vinduet: en raekke smaa chips, ruller vandret hvis
   togtet er langt - de skal kunne ses uden at aabne noget. */



/* De to indgange til stevnroeret: hele togtet (rapportens varmekort) og et
   frit 24-timers vindue. Kalenderdagene staar som genveje under. */
/* Dag-vaelgeren: ÉN knap + popup. Raekken af chips rullede vandret, og paa et
   tre ugers togt skulle man lede i tyve knapper (Christian 1/9). */
.of-mode { position: relative; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 4px 0 10px; }
.of-mode-b em { font-style: normal; opacity: .7; margin-left: 4px; }
/* Pilene staar TAET om dagvaelgeren, saa de tre laeses som ét betjeningsfelt
   - dagen foer, dagen, dagen efter. */
.of-mode { gap: 6px; }
.of-pil {
  min-width: 30px; padding: 6px 0; text-align: center;
  font-size: 15px; line-height: 1;
}
.of-pil:disabled { opacity: .32; cursor: default; }
/* Tilbage-knappen staar for sig med lidt luft: den forlader visningen,
   pilene bliver i den. */
.of-tilbage { margin-right: 8px; }
/* Kort / tidsserie: staar for sig selv til hoejre for dagvaelgeren, med luft,
   saa de to valg ikke laeses som ét. */
.of-visvalg { display: inline-flex; gap: 5px; margin-left: 14px; }
.of-visvalg.hidden { display: none; }
/* Akse-retningen staar taet paa visnings-valget: det er en detalje VED
   tidsserien, ikke et sidestillet valg. */
.of-akse { display: inline-flex; gap: 5px; margin-left: 8px; }
.of-akse.hidden { display: none; }
.of-akse .vfo-chip { padding: 6px 10px; }
.of-pop { position: absolute; top: calc(100% + 5px); left: 0; z-index: 30;
  min-width: 320px; max-height: 46vh; overflow: auto; padding: 6px;
  border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line); box-shadow: var(--sh-4, 0 18px 50px rgba(0,0,0,.5)); }
.of-pop.hidden { display: none; }
.of-pop-r { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%; padding: 7px 11px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 0; color: var(--ink); font-family: inherit;
  font-size: 12.5px; text-align: left; font-variant-numeric: tabular-nums; }
.of-pop-r:hover { background: var(--surface-3); }
.of-pop-r.on { background: rgba(var(--accent-rgb), .16); color: var(--accent);
  font-weight: 700; }
.of-pop-h { color: var(--ink-soft); font-size: 11.5px; white-space: nowrap; }
.of-pop-h2 { padding: 9px 11px 4px; font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); }






/* Krydset i kolonne-panelets titel. Panelet daekker den knap der aabnede det
   (Christian 2/9: "kan ikke lukke columns igen, knap er bag drop down"), saa
   uden det her er der ingen synlig vej ud. Esc og et klik udenfor virker
   ogsaa - men det er krydset man leder efter foerst. */
.sf-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-luk {
  font: inherit; font-size: 14px; line-height: 1;
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: var(--surface-3, rgba(255, 255, 255, .07));
  border: 1px solid var(--line-soft, rgba(255, 255, 255, .14));
  color: var(--ink-soft); flex: 0 0 auto;
  transition: background .12s, color .12s, border-color .12s;
}
.sf-luk:hover { color: var(--ink); border-color: var(--line); }
.sf-luk:focus-visible { outline: 2px solid var(--accent, #5aa9e6); outline-offset: 2px; }


/* GRAF-PREVIEW i stationslisten: PDF-siden som den bliver, paa skaermen.
   Lys ramme om hver graf - de tegnes paa hvid bund til papir, og uden en ramme
   flyder de ud i det moerke panel. */
.slp-gp { margin-top: 12px; }
.slp-gp-note { font-size: 11.5px; opacity: .7; margin: 0 0 8px; }
.slp-gp-load { font-size: 12px; opacity: .7; padding: 10px 0; }
.slp-gp-t {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-soft); margin: 10px 0 3px;
}
.slp-gp-cv {
  /* Maalene saettes af slGpTilpas() - her kun midterstillingen, saa en graf
     der er smallere end kortet ikke klistrer til venstre kant. */
  display: block; margin: 0 auto;
  /* Trådkorset foelger musen - saa skal markoeren sige at der ER noget at
     pege paa. */
  cursor: crosshair;
  background: #fff; border: 1px solid var(--line-soft, rgba(255, 255, 255, .16));
  border-radius: 4px;
}


/* GRAF-PREVIEW SOM POPUP. Ligger ovenpaa i stedet for at skubbe arket ned -
   et preview er noget man kigger paa og lukker. */
.slgp-vindue {
  /* De fire sider enkeltvis. (`inset: 0` gjorde det samme - jeg troede et
     stykke tid at den var skyld i et 26 px bredt vindue, men det var
     maaleopstillingen: browserruden havde selv bredde 0, saa ALT fixed maalte
     0. Longhands er beholdt fordi de er lige saa rigtige, ikke fordi inset var
     forkert.) */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  /* OVER HELE STATIONSKORTETS STAK. Kortet selv er 90, men Scanmar-vinduerne
     oven paa det ligger 205-230 - en popup paa 140 ville aabne BAG dem, og
     man ville tro den ikke virkede. Under 400 (toasts) og 1000 (bekraeft),
     saa en advarsel stadig kan komme foran. */
  z-index: 235;
  background: rgba(4, 12, 20, .66);
  /* BLOK, IKKE FLEX. Kortet laa i venstre side i demoen: flex-centrering af
     et element der er hoejere end ruden opfoerer sig forskelligt alt efter
     overflow-retning. `margin: auto` i et blok-layout goer det samme uden den
     slags - simplere er her ogsaa mere paalideligt. */
  /* MIDT I RUDEN, baade paa tvaers og paa hoejden. Flex kan centrere begge
     veje; det der drillede sidst var at kortet var HOEJERE end ruden - og det
     er loest ved at graferne nu skaleres til pladsen (slGpTilpas). */
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
}
.slgp-kort {
  background: var(--surface-1, #10202e);
  border: 1px solid var(--line, rgba(255, 255, 255, .16));
  border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  /* PLADS PAA DE STORE SKAERME. 760 px var sat da hoejden alligevel var det
     bindende maal - efter zoom-rettelsen er det bredden der braemser paa en
     1080p-skaerm, og saa stod der en tredjedel af ruden tom. Paa smaa skaerme
     goer min() ingen forskel. */
  width: min(1080px, 100%); padding: 14px 16px 18px;
  /* Kortet maa aldrig blive hoejere end ruden - saa ville topraekken med Luk
     forsvinde ud over kanten. Kroppen giver sig i stedet.

     Ingen height her: kortet foelger sit indhold, og INDHOLDET er skaleret til
     ruden af slGpTilpas(). Satte vi en hoejde her og delte DEN ud, ville de to
     regne paa hinanden. */
  /* VAERN FOER JS'EN HAR KOERT. Det rigtige loft saettes af slGpTilpas() -
     viewport-enheder foelger ikke root-zoom, saa 100vh er for lidt naar
     brugeren har skruet ned for UI-skalaen. */
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
.slgp-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.slgp-t { font-weight: 700; font-size: 13px; color: var(--ink); }
.slgp-knapper { display: flex; gap: 8px; flex: 0 0 auto; }
/* Kroppen ruller for sig selv, saa top-raekken med Luk og Print altid er
   synlig - ellers skal man rulle op igen for at komme ud. */
/* Kroppen tager den plads der er tilovers efter top og note. min-height: 0
   er ikke pynt: uden den naegter et flex-barn at krympe under sit indhold, og
   saa vokser kortet ud over ruden alligevel. */
.slgp-krop { flex: 1 1 auto; min-height: 0; overflow: hidden; }


/* PREVIEW-KNAPPEN har sin EGEN farve. Groen betyder GAA her (Approve, Done),
   og et preview udfoerer ingenting - det viser noget. Violet er print og
   kobber er gem-billede; den kolde blaagroenne er "kig". Saa kan de tre
   kendes fra hinanden paa afstand uden at man skal laese dem. */
.btn.slp-gp-btn {
  background: linear-gradient(180deg, #1f5a63, #17434b);
  color: #d3f2f7; border-color: rgba(110, 200, 215, .45);
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn.slp-gp-btn:hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(60, 180, 200, .28);
}
.btn.slp-gp-btn:active { transform: translateY(0); }
.btn.slp-gp-btn .gpb-ico {
  display: inline-block; font-size: 13px; line-height: 1;
  /* Traekker vejret langsomt naar knappen staar stille - nok til at oejet
     finder den, ikke nok til at den blinker i et styrehus. */
  animation: gpbAande 3.4s ease-in-out infinite;
}
.btn.slp-gp-btn:hover .gpb-ico { animation: none; transform: translateX(1px) scale(1.08); }
@keyframes gpbAande {
  0%, 100% { opacity: .62; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.slp-gp-btn, .btn.slp-gp-btn .gpb-ico { transition: none; animation: none; }
  .btn.slp-gp-btn:hover { transform: none; }
}

/* HVILKE TAL ER GRAFEN TEGNET PAA. Samme gule som resten af programmet bruger
   til "det her er ikke det endelige" - graferne foelger arket, og arket siger
   allerede at gennemsnittene er ufiltrerede indtil nogen godkender en rensning. */
.slgp-note {
  font-size: 11px; line-height: 1.45; margin: 0 0 10px;
  padding: 6px 9px; border-radius: 5px;
  background: rgba(214, 158, 46, .13);
  border: 1px solid rgba(214, 158, 46, .34);
  color: #f0c674;
}




/* PRINT SPOERGER OM FORMATET. Ét spoergsmaal med to svar - nemmere at ramme
   end en pil ved siden af en knap, og valget staar frit fremme i stedet for at
   gemme sig bag et klik man skal vide findes.

   Ligger INDE i graf-popup'en: man er allerede i gang med at kigge paa
   siderne, og et vindue mere oveni ville skjule det man skal vaelge ud fra. */
.gp-valg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
  background: rgba(4, 12, 20, .55);
  display: flex; align-items: center; justify-content: center;
}
.gp-valg-kort {
  background: var(--surface-2, #16293a);
  border: 1px solid var(--line, rgba(255, 255, 255, .2));
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  padding: 16px; width: min(340px, 88%);
  display: flex; flex-direction: column; gap: 8px;
}
.gp-valg-t {
  font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px;
}
.gp-valg-b {
  font: inherit; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-soft, rgba(255, 255, 255, .16));
  color: var(--ink); display: flex; flex-direction: column; gap: 2px;
  transition: background .12s, border-color .12s, transform .12s;
}
.gp-valg-b b { font-size: 12.5px; font-weight: 700; }
.gp-valg-b span { font-size: 11px; opacity: .72; }
.gp-valg-b:hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
/* Det man plejer at vaelge er fremhaevet - saa kan den der altid printer
   liggende se det med det samme og bare trykke. */
.gp-valg-b.on {
  background: linear-gradient(180deg, #4b4168, #372e52);
  border-color: rgba(155, 135, 215, .5); color: #e6ddff;
}
.gp-valg-b:focus-visible, .gp-valg-fortryd:focus-visible {
  outline: 2px solid var(--accent, #5aa9e6); outline-offset: 2px;
}
.gp-valg-fortryd {
  font: inherit; font-size: 11.5px; cursor: pointer; margin-top: 2px;
  padding: 7px; border-radius: 7px; border: 0; background: transparent;
  color: var(--ink-soft);
}
.gp-valg-fortryd:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) {
  .gp-valg-b { transition: none; }
  .gp-valg-b:hover { transform: none; }
}


/* EGEN PDF-OVERSKRIFT. Staar under Station list-kortet, dér hvor man printer
   fra. Tomt felt = togtets navn; placeholderen viser hvad der saa kommer til
   at staa, saa man kan se resultatet uden at gaette.

   VIOLET, ikke endnu en blaa (Christian 3/9: "det hele er meget blaat").
   Huset afgjorde det da hent-knapperne blev kobber: en handling faar sin egen
   farve. Blokken her HANDLER om print - det er den linje der kommer oeverst
   paa arket - saa den laaner print-familiens violet i stedet for at finde paa
   en farve mere. Saa siger farven noget.

   Kun kanten baerer farven; fladen er svagt toenet. Fyldt violet ville skrige
   hoejere end de knapper den staar ved siden af, og det er en indstilling,
   ikke en handling. */
.sl-titel {
  margin: 12px 0 0; padding: 12px 14px 12px 16px;
  border: 1px solid rgba(155, 135, 215, .34);
  border-left: 3px solid rgba(155, 135, 215, .72);
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(120, 100, 190, .13), rgba(120, 100, 190, .05));
}
.sl-titel label {
  display: block; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: #c3b3ec; margin-bottom: 6px;
}
.sl-titel-row { display: flex; gap: 8px; align-items: center; }
.sl-titel-row input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid rgba(155, 135, 215, .38);
  background: rgba(20, 14, 38, .38); color: var(--ink);
}
.sl-titel-row input::placeholder { color: rgba(200, 190, 230, .5); }
.sl-titel-row input:disabled { opacity: .7; cursor: default; }
.sl-titel-row input:focus-visible {
  outline: 2px solid rgba(155, 135, 215, .85); outline-offset: 1px;
  border-color: rgba(155, 135, 215, .7);
}
/* Gem hoerer til blokken, men er ikke en print-knap - derfor omrids og ikke
   fyld, saa den ikke forveksles med Print lige ovenfor. */
.sl-titel-row .btn {
  background: rgba(120, 100, 190, .2); color: #e6ddff;
  border-color: rgba(155, 135, 215, .5);
}
.sl-titel-row .btn:hover { background: rgba(120, 100, 190, .34); }
/* REGLEN staar foerst og laeses foerst: stoerre end den fine skrift under,
   og med en pil der viser hvad tomt FOERER TIL. */
.sl-titel-regel {
  margin: 8px 0 0 !important; font-size: 12.5px !important;
  color: var(--ink) !important; line-height: 1.4;
}
.sl-titel-regel b { color: #d3c6f2; font-weight: 700; }
/* Sidst aendret. Staar under reglen, mindre - det er en oplysning, ikke en
   besked. Tom p-tag fylder ingenting, saa den forsvinder af sig selv naar der
   ikke er nogen overskrift. */
.sl-titel-dato {
  margin: 3px 0 0; font-size: 10.5px; color: var(--ink-soft); opacity: .85;
}
.sl-titel-dato:empty { display: none; }
.sl-titel p {
  margin: 6px 0 0; font-size: 11px; line-height: 1.45;
  color: var(--ink-soft);
}
.sl-titel p b { color: #d3c6f2; }

/* LYSE TEMAER: den samme violet paa hvid bund skal vaere moerkere for at
   kunne laeses - se de andre lyse tilpasninger. */
[data-mode="light"] .sl-titel label { color: #5b4a91; }
[data-mode="light"] .sl-titel p b { color: #4d3f7d; }
[data-mode="light"] .sl-titel-row input { background: rgba(255, 255, 255, .7); }
[data-mode="light"] .sl-titel-row .btn { color: #3f3369; }


/* Kvitteringen ("er arket kommet ud?") over overskrift-feltet i Station list.
   Samme linje som Scanmar-fanen tegner - kun luften omkring er ny. */
.sl-kvit { margin-top: 10px; }