/* ===================================================================
   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.
   =================================================================== */
/* ---- 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;
  --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 */
  --line: #24506a;            /* visible edge */
  --line-soft: #17384b;
  --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-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);
}
:root[data-theme="light"] {
  --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-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);
}

/* ---- 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-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);
}

/* "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: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  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; }
/* 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;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(var(--accent-rgb),.10), transparent 70%),
    radial-gradient(700px 500px at 50% 100%, rgba(20,48,64,.55), transparent 70%);
}
/* 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;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  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; }

/* 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;
}
.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; }
.topbar-right { overflow: hidden; }
/* 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. */
@container shell (max-width: 1150px) { .topbar .brand .ver-badge { display: none; } }
@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; }
}
.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; }
.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: 3px 9px; border-radius: 999px;
  background: rgba(var(--accent-rgb),.16); color: var(--accent); font-weight: 700;
  border: 1px solid rgba(var(--accent-rgb),.3); box-shadow: var(--sh-1);
}
.role-tag.client { background: rgba(240,180,41,.16); color: var(--warn); border-color: rgba(240,180,41,.32); }
.tabs { display: flex; gap: 6px; flex: 0 0 auto; 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;
}
.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;
}
.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. */
#tab-dashboard { max-width: none; width: 64%; margin-inline: auto; padding: 22px 0; }
#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. */
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 26px;
}
.ss-who { display: flex; flex-direction: column; gap: 7px; justify-self: start; }
.ss-live {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ok); display: flex;
  align-items: center; gap: 7px;
}
.ss-live::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 10px var(--ok);
  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;
}
.station-prep { display: flex; flex-direction: column; }
.prep-title { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 11px; font-weight: 700; }
.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);
}
.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; }

.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 */
.next-no {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ok);
  background: rgba(61,220,151,.12); padding: 3px 9px; border-radius: 999px; margin-left: 8px;
  box-shadow: inset 0 0 0 1px rgba(61,220,151,.25); text-transform: none;
}
.col-no { width: 62px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
/* 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 {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 62px; font-weight: 600; color: var(--ok);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  line-height: 1; letter-spacing: -.02em;
  text-shadow: 0 0 30px rgba(var(--ok-rgb), .30);
}
.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 .06s, filter .15s, box-shadow .15s;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.18);
}
.big-btn:hover:not(:disabled) { filter: brightness(1.1); }
.big-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--sh-1); }
.big-btn.start { background: linear-gradient(180deg, #2fa87f, #1c7a5b); }
.big-btn.stop { background: linear-gradient(180deg, #d9584a, #a83a2e); }
/* 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; box-shadow: none;
  background: transparent !important;
  border: 1px dashed var(--line); color: var(--ink-soft);
  text-shadow: none;
}

/* 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; }
.col-time { width: 140px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.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; }
.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); }
.edited { color: var(--warn); cursor: help; }
.active-row { background: rgba(var(--accent-rgb),.07); }

.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); }
.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);
}

/* station types editor */
.types-list { display: flex; flex-direction: column; gap: 10px; }
.type-item {
  display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: center;
  background: var(--surface-3); padding: 11px 13px; 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); }

/* 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; }
/* Numeric columns: header and values must share the same edge, otherwise the
   numbers appear to float away from their heading. */
.col-num, th.col-num, td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.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; }
/* 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: 1120px; }
.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); }
.an-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.an-chart {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 12px; box-shadow: var(--sh-2);
}
.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; }
.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: 78px; }

/* 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; }

/* 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);
}
.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: 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-theme="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;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .06s, filter .15s, box-shadow .15s;
}
.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: var(--sh-1); }
.btn.small.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(239,107,94,.25); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* modal */
.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: 50; padding: 20px; }
.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;
}
.modal-card.wide { width: 1020px; }
.modal-card.narrow { width: 430px; }
.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; }
.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; }
.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; }
  .clocks .clock:nth-child(2) { display: none; }
  .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; }

/* 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: -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-theme="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); }
.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. */
.op-main .prep-fields {
  display: grid; grid-template-columns: 190px minmax(300px, 1.3fr) 1fr;
  gap: 16px; 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: 4px 0; }
/* 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; }
}
@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; }

/* "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; }
/* 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: 70px; }
}
@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;
}
@media (max-width: 1100px) { .ui-scale { display: none; } }

/* ---- 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); }

/* ---- Huskesedler ---- */
.note-form {
  background: var(--surface-3); border: 1px solid var(--line-soft);
  border-radius: 13px; padding: 14px; margin-bottom: 14px;
}
/* Teksten foerst og stoerst - overskrift og initialer er valgfri pynt under. */
.nf-meta { display: flex; gap: 10px; margin-top: 10px; }
.nf-meta input:first-child { flex: 1; min-width: 0; }
.nf-meta input:last-child { width: 120px; }
.nf-tip { font-size: 11px; color: var(--ink-soft); opacity: .7; }
.note-form input, .note-form textarea {
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--input-bg); font-size: 14px; color: var(--ink);
  font-family: inherit; box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.note-form textarea {
  width: 100%; resize: vertical; line-height: 1.6;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}
.nf-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.nf-spacer { flex: 1; }
.notes-list { display: flex; flex-direction: column; gap: 10px; }
.note {
  border: 1px solid var(--line-soft); border-radius: 13px; padding: 13px 15px;
  background: var(--surface-2); box-shadow: var(--sh-1);
}
.note-head { display: flex; align-items: center; gap: 12px; }
.note-title { font-weight: 700; font-size: 15px; color: var(--ink); flex: 1; min-width: 0; }
.note-when { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.note-del { width: 30px; height: 30px; font-size: 13px; }
.note-text {
  margin: 9px 0 0; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  line-height: 1.65; color: var(--ink-soft);
}
.note-snap { margin-top: 10px; }
.note-snap summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent);
  padding: 5px 0; user-select: none;
}
.snap-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.snap-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); font-weight: 600;
  padding: 5px 8px; border-bottom: 1px solid var(--line);
}
.snap-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
.snap-table code { color: var(--accent); }
.note-edit { margin-top: 8px; font-size: 11.5px; color: var(--ink-soft); opacity: .8; }

/* 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 ---- */
.det-card { max-height: calc(90vh / 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; }
.det-body { overflow-y: auto; margin-top: 18px; padding-right: 4px; }
/* To spalter naar der er plads: sektionerne er korte og staar ellers som en
   lang smal remse man skal rulle igennem. */
.det-body { columns: 2; column-gap: 26px; }
@container page (max-width: 900px) { .det-body { columns: 1; } }
.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; }
.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 {
  text-align: left; 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: 10px; width: 100%; min-width: 0;
  padding: 10px 10px 10px 14px; 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);
  background: linear-gradient(0deg, rgba(var(--needed-rgb), .08),
                              rgba(var(--needed-rgb), .08)),
              linear-gradient(180deg, var(--surface-3), var(--surface-2));
}
.pf-missing .tp-empty { color: rgba(var(--needed-rgb), .8); }

.tp-card h2 { margin-bottom: 6px; }
.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; }
.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; }


/* ---- Bemaerkninger paa Scanmar-graferne ---- */
.an-remarks {
  margin: 14px 0 4px; padding: 14px 16px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.an-remarks > label {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.an-remarks textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; resize: vertical;
  background: var(--input-bg); color: var(--ink); font-family: inherit;
  font-size: 13.5px; line-height: 1.6; border: 1px solid var(--line-soft);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.an-remarks textarea: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);
}
.an-remarks-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.an-remarks-foot .hint { flex: 1; margin: 0; font-size: 11.5px; }

/* ---- 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; }

/* Laesevisning af bemaerkninger (view-only) */
.an-remarks-read {
  margin: 14px 0 4px; padding: 13px 16px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.arr-label {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px;
}
.arr-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.65; color: var(--ink); }

/* ---- 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; } }
.hb-count {
  position: absolute; right: -3px; bottom: -2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; font-size: 9.5px; font-weight: 800;
  line-height: 15px; text-align: center; color: #fff; background: var(--ink-soft);
}
.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; gap: 18px; align-items: stretch; margin-bottom: 18px;
}

.op-row > #opCard    { flex: 7 1 0; }
.op-row > #opActions { flex: 3 1 0; }

/* 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. */
@container page (max-width: 900px) {
  .op-row { flex-direction: column; }
  .op-row .op-actions-card { display: block; }
  .op-row .op-actions { grid-template-columns: 2fr 1fr; align-items: center; }
  .op-row .op-actions-card.running .op-actions { grid-template-columns: 1fr 2fr; }
  .op-row .op-actions .big-btn.stop { grid-column: 2; grid-row: 1; }

  .op-row .op-actions .big-btn {
    flex-direction: row; gap: 12px; padding: 16px; line-height: 1.2;
  }
  .op-row .op-actions .big-btn span { white-space: nowrap; }
  .op-row .op-actions .big-btn:disabled { min-height: 46px; font-size: 14px; }
  .op-row .op-actions .big-btn:not(:disabled) { min-height: 76px; font-size: 22px; }
  .op-row .op-actions .big-btn:disabled .bb-icon { width: 17px; height: 17px; }
  .op-row .op-actions .big-btn:not(:disabled) .bb-icon { width: 27px; height: 27px; }
  .op-row .op-actions .big-btn { max-width: 420px; }
  .op-row .op-actions .big-btn:disabled { max-width: 320px; }
}

/* Og paa en rigtig smal skaerm stables de igen. */
@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); }

@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. */
.tp-card { width: 760px; }

/* Koden i sin egen faste spalte. Med flex flyttede beskrivelsen sig for hver
   raekke efter hvor langt kodenavnet var ("Beam Trawl" mod "GOV"), saa
   teksten stod i takker ned gennem listen. */
.tp-card .tp-row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: baseline; gap: 14px;
}

.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: 96px 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;
}

#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 {
  position: fixed; z-index: 60; 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;
}

.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);
}

.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; }
.gm-danger .gm-ico { color: var(--danger); }

/* 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;
}

/* 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: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}

.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;
}
.sortable th[data-sort]:hover { color: var(--ink); }
.sortable th[data-sort]::after {
  content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px;
  vertical-align: middle; 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;
}

/* 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);
}

/* ---------------- 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. */
.st-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  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;
}
.st-btn:hover { border-color: var(--accent); box-shadow: var(--sh-2); }
.st-btn:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: var(--sh-2), 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.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, faar KNAPPEN ogsaa den varme kant - man
   kigger paa knappen naar man vil skifte, ikke paa banneret. */
.st-btn.is-old { border-color: rgba(var(--warn-rgb), .55); }

.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;
}

/* ---------------- 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); }

/* 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: 0;
  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); }

/* 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;
  margin: 0 0 18px; padding: 10px 22px;
  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; }