/* ===========================================================================
   Skipsregisteret. Retning: KLASSEREGISTERET.

   Formen er hentet fra skipsfartens egne dokumenter: klasseselskapenes trykte
   fartøysoppslag, dypgangsskalaen på baugen, lastelinjemerket.

   SKRIFT: IBM Plex, selvhostet og subsettet (~95 kB for fem snitt).
   Plex ble tegnet for teknisk dokumentasjon og har et ekte fastbreddesnitt
   med samme skjelett som groteskvarianten, slik at tabeller og brødtekst
   hører sammen. Systemfontene ga ingen slik sammenheng.
     - Sans Condensed Bold: overskrifter. Smal, som en skipsside i et register,
       og den sparer bredde der mobilen har minst av den.
     - Sans Regular/SemiBold: brødtekst.
     - Mono Regular/SemiBold: alle tall, koder og etiketter.

   FARGE: svart, blått, hvitt. Én signalfarge, brukt bare der den betyr noe
   (fartøyets eget merke, advarsler). --sjo bærer størrelse i diagrammene.
   Begge datafarger er kjørt gjennom validatoren og passerer alle seks
   sjekkene mot sin egen flate i lys og mørk modus.
   =========================================================================== */

@font-face {
  font-family: "Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Cond";
  src: url("/assets/fonts/IBMPlexSansCondensed-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --ink: #0a1017;
  --ink-svak: #4c5a67;
  --ink-svakest: #7e8c99;
  --paper: #ffffff;
  --flate: #f2f5f8;
  --flate-2: #e5ebf1;
  --rule: #dce3ea;
  --rule-sterk: #aebac6;

  /* Datafarger. Validert, ikke valgt på øyemål. */
  --sjo: #1257a6;
  --signal: #c2481a;
  --signal-flate: #fbeee8;

  --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --cond: "Plex Cond", "Plex Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maks: 1180px;
  --spor: 0.13em;
  --kant: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edf1f5;
    --ink-svak: #97a5b2;
    --ink-svakest: #6b7885;
    --paper: #080c10;
    --flate: #111820;
    --flate-2: #1a232c;
    --rule: #212b34;
    --rule-sterk: #3a4753;
    --sjo: #4e93dc;
    --signal: #e86a3c;
    --signal-flate: #24140d;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maks); margin: 0 auto; padding: 0 var(--kant); }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-sterk);
    text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--sjo); }
:focus-visible { outline: 2px solid var(--sjo); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper);
        padding: 10px 16px; z-index: 20; }
.skip:focus { left: 12px; top: 12px; }
.visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden;
                  clip: rect(0 0 0 0); white-space: nowrap; }

/* --- topp ---------------------------------------------------------------- */
.topp { border-bottom: 1px solid var(--ink); }
.topp-rad { display: flex; align-items: center; gap: 16px; justify-content: space-between;
            padding: 14px 0; flex-wrap: wrap; }
.merke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
         font-family: var(--cond); font-weight: 700; font-size: 1.08rem;
         letter-spacing: 0.005em; white-space: nowrap; }
.merke svg { display: block; flex: none; }
.merke .ring { fill: none; stroke: var(--sjo); stroke-width: 2.4; }
.merke .bar { stroke: var(--ink); stroke-width: 2.4; }

.sok { display: flex; flex: 1 1 280px; max-width: 430px; border: 1px solid var(--ink);
       background: var(--paper); }
.sok input { flex: 1; padding: 8px 11px; font-size: 0.9rem; font-family: var(--mono);
             border: 0; background: transparent; color: var(--ink); min-width: 0; }
.sok input::placeholder { color: var(--ink-svakest); }
.sok input:focus { outline: none; }
.sok:focus-within { outline: 2px solid var(--sjo); outline-offset: 1px; }
.sok button { padding: 8px 14px; font-family: var(--mono); font-size: 0.72rem;
              font-weight: 600; text-transform: uppercase; letter-spacing: var(--spor);
              cursor: pointer; border: 0; border-left: 1px solid var(--ink);
              background: var(--ink); color: var(--paper); }

.hovednav { border-bottom: 1px solid var(--rule); }
.hovednav .wrap { display: flex; gap: 24px; overflow-x: auto; padding-top: 9px;
                  padding-bottom: 9px; scrollbar-width: none; }
.hovednav .wrap::-webkit-scrollbar { display: none; }
.hovednav a { font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
              text-transform: uppercase; letter-spacing: var(--spor);
              color: var(--ink-svak); text-decoration: none; white-space: nowrap; }
.hovednav a:hover { color: var(--sjo); }

/* --- brødsmuler ---------------------------------------------------------- */
.brodsmuler { padding-top: 16px; font-family: var(--mono); font-size: 0.71rem;
              color: var(--ink-svak); }
.brodsmuler ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
                 margin: 0; padding: 0; }
.brodsmuler li + li::before { content: "/"; margin-right: 7px; color: var(--rule-sterk); }
.brodsmuler a { text-decoration: none; }
.brodsmuler a:hover { text-decoration: underline; }

/* --- typografi ----------------------------------------------------------- */
main { padding-top: 24px; padding-bottom: 68px; }

h1 { font-family: var(--cond); font-weight: 700;
     font-size: clamp(2.1rem, 7.5vw, 3.5rem); line-height: 1.02;
     letter-spacing: -0.012em; margin: 10px 0 8px; overflow-wrap: break-word; }

h2 { font-family: var(--mono); font-size: 0.73rem; font-weight: 600;
     text-transform: uppercase; letter-spacing: var(--spor); color: var(--ink-svak);
     margin: 46px 0 14px; padding-top: 10px; border-top: 1px solid var(--ink);
     display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; margin: 26px 0 8px; }

.eyebrow { font-family: var(--mono); font-size: 0.71rem; text-transform: uppercase;
           letter-spacing: var(--spor); color: var(--ink-svak); margin: 0; }
.undertittel { color: var(--ink-svak); font-size: 1.01rem; margin: 0 0 20px; max-width: 60ch; }
.prosa { max-width: 64ch; }
.prosa p, .prosa li { font-size: 1.02rem; }

.plate { display: inline-block; font-family: var(--mono); font-size: 0.76rem;
         font-weight: 600; letter-spacing: 0.05em; padding: 3px 8px;
         border: 1px solid var(--ink); }

/* --- nøkkeltall ---------------------------------------------------------- */
.tallrad { display: grid; gap: 0 24px; margin: 24px 0 8px;
           border-top: 1px solid var(--rule);
           grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tall { padding: 12px 0 14px; border-bottom: 1px solid var(--rule); }
.tall dt { font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
           text-transform: uppercase; letter-spacing: var(--spor);
           color: var(--ink-svak); margin: 0; }
.tall dd { margin: 5px 0 0; font-family: var(--mono); font-size: 1.4rem;
           font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
           overflow-wrap: anywhere; }
.tall .enhet { font-size: 0.74rem; font-weight: 400; color: var(--ink-svak);
               letter-spacing: 0; }

/* --- tabeller ------------------------------------------------------------ */
.tabellramme { overflow-x: auto; margin: 4px 0 18px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.91rem; }
th, td { padding: 9px 14px 9px 0; text-align: left; border-bottom: 1px solid var(--rule);
         vertical-align: baseline; }
thead th { font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
           text-transform: uppercase; letter-spacing: var(--spor); color: var(--ink-svak);
           border-bottom: 1px solid var(--ink); position: sticky; top: 0;
           background: var(--paper); padding-top: 8px; padding-bottom: 8px; z-index: 2; }
tbody th { font-weight: 600; }
tbody tr:hover { background: var(--flate); }
.num { text-align: right; font-family: var(--mono); font-size: 0.85rem;
       font-variant-numeric: tabular-nums; }
td.num, th.num { padding-right: 0; }
.tom { color: var(--ink-svakest); }

/* --- faktaliste ---------------------------------------------------------- */
.fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
         gap: 0 40px; margin: 0; }
.fakta div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
             border-bottom: 1px solid var(--rule); }
.fakta dt { color: var(--ink-svak); font-size: 0.88rem; }
.fakta dd { margin: 0; font-family: var(--mono); font-size: 0.85rem; font-weight: 600;
            text-align: right; font-variant-numeric: tabular-nums;
            overflow-wrap: anywhere; }

/* --- skipshode ----------------------------------------------------------- */
.skipshode { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
             align-items: start; }
@media (min-width: 880px) { .skipshode.med-bilde { grid-template-columns: minmax(0, 1fr) 320px; } }
.hode-merker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
.bilde { margin: 0; border: 1px solid var(--rule); background: var(--flate); }
.bilde img { display: block; width: 100%; height: auto; }
.bilde figcaption { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-svak);
                    padding: 8px 10px; line-height: 1.5; border-top: 1px solid var(--rule); }

/* --- merkelapper --------------------------------------------------------- */
.merkelapp { display: inline-block; font-family: var(--mono); font-size: 0.64rem;
             font-weight: 600; letter-spacing: var(--spor); text-transform: uppercase;
             padding: 3px 8px; border: 1px solid var(--rule-sterk); color: var(--ink-svak); }
.merkelapp.varsel { border-color: var(--signal); color: var(--signal);
                    background: var(--signal-flate); }

/* --- notat --------------------------------------------------------------- */
.notat { border-left: 2px solid var(--rule-sterk); padding: 2px 0 2px 15px;
         margin: 16px 0; font-size: 0.88rem; color: var(--ink-svak); max-width: 70ch; }
.notat.varsel { border-left-color: var(--signal); }

/* --- diagrammer ---------------------------------------------------------- */
/* Bredden er begrenset i begge ender. Uten maks-bredde blåses teksten i SVG-en
   opp på store skjermer; uten min-bredde krymper den under lesbar på mobil,
   der rammen i stedet ruller vannrett. */
.diagramramme { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 4px; }
.diagram, .lastelinje { display: block; width: 100%; height: auto; }
.diagram { max-width: 660px; min-width: 400px; }
.lastelinje { max-width: 660px; min-width: 380px; }
.diagram-vannrett { max-width: 720px; min-width: 460px; }
.soyle { fill: var(--sjo); }
.d-akse { font-family: var(--mono); font-size: 13px; fill: var(--ink-svak); }
.d-verdi { font-family: var(--mono); font-size: 13px; font-weight: 600; fill: var(--ink); }
.d-etikett { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.d-grunn { stroke: var(--ink); stroke-width: 1; }

.ll-spor { fill: var(--flate-2); }
.ll-merke { stroke: var(--rule-sterk); stroke-width: 1; }
.ll-merke.ll-lang { stroke: var(--ink-svak); }
.ll-median { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
.ll-fartoy path { fill: var(--signal); }
.ll-fartoy line { stroke: var(--signal); stroke-width: 2.5; }
.ll-ende { font-family: var(--mono); font-size: 12px; text-transform: uppercase;
           letter-spacing: 0.09em; fill: var(--ink-svakest); }

/* Sporkart, tegnet som sjøkart. Ingen kartfliser: konteksten er gradnettet,
   våre egne havner og en målestokk. Sporet er den eneste sterke streken, og
   alt annet ligger under det i vekt. */
.spor { display: block; width: 100%; height: auto; max-width: 700px; min-width: 460px; }
.sp-flate { fill: var(--flate); }
.sp-nett { stroke: var(--rule); stroke-width: 0.75; }
.sp-ramme { fill: none; stroke: var(--rule-sterk); stroke-width: 1; }
.sp-omslutning { fill: none; stroke: var(--paper); stroke-width: 4.5;
                 stroke-linejoin: round; stroke-linecap: round; }
.sp-spor { fill: none; stroke: var(--sjo); stroke-width: 1.7;
           stroke-linejoin: round; stroke-linecap: round; }
.sp-pil { fill: var(--sjo); }
.sp-havn { fill: var(--ink-svak); }
.sp-havnnavn { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-svak);
               paint-order: stroke; stroke: var(--flate); stroke-width: 3px; }
.sp-start { fill: var(--signal); stroke: var(--paper); stroke-width: 1.5; }
.sp-slutt { fill: var(--paper); stroke: var(--signal); stroke-width: 2.5; }
.sp-akse { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-svakest); }
.sp-malestokk { stroke: var(--ink-svak); stroke-width: 1.4; }
.sp-malestokk-tekst { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-svak);
                      paint-order: stroke; stroke: var(--flate); stroke-width: 3px; }
.sp-hjorne { font-family: var(--mono); font-size: 10px; fill: var(--ink-svakest);
             text-transform: none; }

/* --- lesehjelp ----------------------------------------------------------- */
/* De generiske forbeholdene, samlet ett sted. Åtte grå bokser nedover siden
   lærte leseren å hoppe over alle, inkludert de som betyr noe. */
.kildeliste { margin-top: 4px; }
.h1-side { font-family: var(--mono); font-size: 0.9rem; font-weight: 600;
           color: var(--ink-svak); letter-spacing: var(--spor);
           text-transform: uppercase; white-space: nowrap; }
.dekning { margin-top: 6px; }
.dekning dd { font-weight: 400; color: var(--ink-svak); }
.lesehjelp { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
             margin: 20px 0 0; padding: 0; }
.lesehjelp summary { font-family: var(--mono); font-size: 0.71rem; font-weight: 600;
                     text-transform: uppercase; letter-spacing: var(--spor);
                     color: var(--ink-svak); padding: 13px 0; cursor: pointer;
                     list-style: none; display: flex; align-items: center; gap: 9px; }
.lesehjelp summary::-webkit-details-marker { display: none; }
.lesehjelp summary::before { content: "+"; font-size: 1rem; line-height: 1;
                             color: var(--sjo); font-weight: 600; }
.lesehjelp[open] summary::before { content: "\2212"; }
.lesehjelp summary:hover { color: var(--sjo); }
.lesehjelp > div { padding: 0 0 16px; }
.lesehjelp p { font-size: 0.92rem; color: var(--ink-svak); margin: 0 0 12px; }
.lesehjelp strong { color: var(--ink); }

/* --- livekart ------------------------------------------------------------ */
.kartramme { margin: 20px 0 8px; border: 1px solid var(--ink); background: var(--flate); }
.kartverktoy { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--rule);
               align-items: center; }
.kartverktoy input { flex: 1 1 auto; min-width: 0; max-width: 320px; padding: 7px 10px;
                     font-family: var(--mono); font-size: 0.85rem;
                     border: 1px solid var(--rule-sterk); background: var(--paper);
                     color: var(--ink); }
.kartverktoy button { width: 34px; height: 34px; font-family: var(--mono); font-size: 1rem;
                      cursor: pointer; border: 1px solid var(--ink); background: var(--paper);
                      color: var(--ink); line-height: 1; }
.kartverktoy button:hover { background: var(--ink); color: var(--paper); }
#kart { display: block; width: 100%; cursor: grab; touch-action: none; }
#kart:active { cursor: grabbing; }
.kartlinje { margin: 0; padding: 9px 10px; border-top: 1px solid var(--rule);
             font-family: var(--mono); font-size: 0.7rem; color: var(--ink-svak); }
.kartdetalj { margin: 10px 0 0; }
.kartdetalj h3 { font-family: var(--cond); font-size: 1.3rem; margin: 8px 0 6px; }
.kartdetalj .fakta { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --- indeks -------------------------------------------------------------- */
.indeks { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.indeks li { border-bottom: 1px solid var(--rule); }
.indeks a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0;
            text-decoration: none; flex-wrap: wrap; }
.indeks a:hover { background: var(--flate); }
.indeks a:hover .i-navn { color: var(--sjo); }
.i-navn { font-family: var(--cond); font-weight: 700; font-size: 1.05rem;
          flex: 1 1 auto; min-width: 0; }
.i-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-svak);
          font-variant-numeric: tabular-nums; }

/* --- paginering ---------------------------------------------------------- */
.paginering { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
              margin: 28px 0 8px; font-family: var(--mono); font-size: 0.79rem; }
.paginering a, .paginering span { padding: 8px 12px; border: 1px solid var(--rule);
                                  text-decoration: none; }
.paginering a:hover { border-color: var(--ink); }
.paginering .naa { background: var(--ink); color: var(--paper); border-color: var(--ink);
                   font-weight: 600; }
.paginering .hopp { border: 0; color: var(--ink-svakest); padding: 8px 2px; }

/* --- søk ----------------------------------------------------------------- */
#treff { margin-top: 20px; }
.treff-merke { font-family: var(--mono); font-size: 0.63rem; font-weight: 600;
               text-transform: uppercase; letter-spacing: var(--spor);
               color: var(--ink-svak); border: 1px solid var(--rule);
               padding: 1px 5px; white-space: nowrap; }
.treff-tom { color: var(--ink-svak); max-width: 64ch; }

/* --- bunn ---------------------------------------------------------------- */
.bunn { border-top: 1px solid var(--ink); padding: 24px 0 40px; font-size: 0.85rem;
        color: var(--ink-svak); }
.bunn-hoved { max-width: 72ch; margin: 0 0 18px; }
.bunn-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px;
            font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: var(--spor); }
.bunn-nav a { text-decoration: none; }
.bunn-nav a:hover { color: var(--sjo); }
.bunn-meta { font-family: var(--mono); font-size: 0.69rem; color: var(--ink-svakest); margin: 0; }

/* ===========================================================================
   MOBIL
   Tabellene er den vanskelige delen: sju kolonner får aldri plass på 360 px.
   Rammen ruller vannrett, og FØRSTE KOLONNE ER LÅST, slik at man ser hvilket
   år eller hvilket fartøy raden gjelder mens man ruller til tallene.
   =========================================================================== */
@media (max-width: 720px) {
  :root { --kant: 16px; }
  body { font-size: 15px; }
  main { padding-top: 18px; padding-bottom: 52px; }

  .topp-rad { gap: 12px; padding: 12px 0; }
  .sok { flex: 1 1 100%; max-width: none; order: 3; }

  h2 { margin-top: 38px; }
  .undertittel { font-size: 0.97rem; }

  .tallrad { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 0 18px; }
  .tall dd { font-size: 1.18rem; }

  table { font-size: 0.86rem; }
  th, td { padding: 10px 12px 10px 0; }
  thead th:first-child, tbody th:first-child, thead td:first-child, tbody td:first-child {
    position: sticky; left: 0; background: var(--paper); z-index: 1;
    padding-right: 12px; box-shadow: 1px 0 0 var(--rule);
  }
  thead th:first-child { z-index: 3; }
  tbody tr:hover th:first-child { background: var(--flate); }

  .fakta { grid-template-columns: 1fr; gap: 0; }
  .indeks a { padding: 13px 0; }
  .i-navn { flex: 1 1 100%; }
  .paginering a, .paginering span { padding: 9px 13px; }
  .bunn-nav { gap: 12px 16px; }
}

@media (max-width: 400px) {
  h1 { font-size: clamp(1.7rem, 9vw, 2.3rem); }
  .tallrad { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}