/* Referencearkitektur — designsystem
   Samme visuelle udtryk som hovedwebsitet: én coralfarve i fuld styrke og som
   tints, varme neutraler, Schibsted Grotesk + IBM Plex Mono. Coral til tekst
   og knapper er den mørke variant (AA-kontrast); brandfarven selv bruges til
   flader og mærker. */

:root {
  --grund:        #faf9f7;
  --flade:        #ffffff;
  --flade-2:      #f4f2ee;
  --blaek:        #1c1a19;
  --daempet:      #625d58;
  --svag:         #767069;
  --linje:        #e4e2de;
  --linje-fin:    #efede9;

  --coral:        #e4685a;
  --coral-tekst:  #b8412f;
  --coral-60:     #ee9a90;
  --coral-28:     #f7cdc8;
  --coral-svag:   #fdf3f1;
  --tom:          #e8e6e2;

  --maks:         1264px;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --sans: 'Schibsted Grotesk', system-ui, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--blaek); font-family: var(--sans);
       font-size: 15px; -webkit-font-smoothing: antialiased; }
a { color: var(--coral-tekst); text-decoration: none; }
a:hover { color: var(--blaek); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--coral-tekst); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lille-mono { font-family: var(--mono); font-size: 11px; color: var(--svag); }
.over { font-family: var(--mono); font-size: 10.5px; letter-spacing: .17em;
        text-transform: uppercase; color: var(--svag); }

h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
h3 { margin: 0; font-size: 15px; font-weight: 600; }
p  { margin: 0; }

/* ---------------------------------------------------------- ramme */

.ramme { max-width: var(--maks); margin: 0 auto; padding: 0 44px; }

.masthead { display: flex; align-items: center; justify-content: space-between;
            gap: 32px; padding: 24px 0 22px; flex-wrap: wrap; }
.masthead .venstre { display: flex; align-items: center; gap: 20px; }
.logo img { width: 168px; height: auto; display: block; }
.skel { width: 1px; height: 38px; background: var(--linje); }
.kontekst { display: flex; flex-direction: column; gap: 3px; }
.kontekst .titel { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }

.bruger { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blaek); color: var(--grund);
          font-family: var(--mono); font-size: 10.5px; display: flex; align-items: center; justify-content: center; }

nav.faner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
            border-top: 1.5px solid var(--blaek); border-bottom: 1px solid var(--linje); }
nav.faner a { padding: 13px 0; font-size: 14px; color: var(--daempet);
              border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.faner a:hover { color: var(--blaek); text-decoration: none; }
nav.faner a.aktiv { color: var(--blaek); font-weight: 600; border-bottom-color: var(--coral); }
nav.faner .hoejre { margin-left: auto; display: flex; align-items: center; gap: 14px;
                    font-family: var(--mono); font-size: 11px; color: var(--svag); }
nav.faner .hoejre form { margin: 0; }
.linkknap { background: none; border: 0; padding: 0; font: inherit; color: var(--coral-tekst); cursor: pointer; }
.linkknap:hover { color: var(--blaek); text-decoration: underline; }

footer.bund { margin-top: 56px; padding: 18px 0 40px; border-top: 1px solid var(--linje);
              font-size: 12.5px; color: var(--svag); display: flex; justify-content: space-between;
              gap: 20px; flex-wrap: wrap; }

.sektion { margin-top: 34px; }
.sektion > .hoved { display: flex; align-items: flex-end; justify-content: space-between;
                    gap: 24px; padding-bottom: 10px; flex-wrap: wrap; }
.sidehoved { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
             padding-top: 34px; flex-wrap: wrap; }
.sidehoved .under { margin-top: 10px; color: var(--daempet); max-width: 70ch; line-height: 1.5; }

/* ---------------------------------------------------------- beskeder */

.besked { display: flex; align-items: center; gap: 11px; padding: 12px 15px; margin-top: 14px;
          border-left: 3px solid var(--coral); background: var(--coral-svag); font-size: 14px; }
.besked.fejl { border-left-color: var(--blaek); background: var(--flade-2); }

/* ---------------------------------------------------------- nøgletal */

.noegletal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
             margin-top: 22px; border-top: 1px solid var(--linje); }
.noegletal > div { padding: 20px 26px; border-right: 1px solid var(--linje); }
.noegletal > div:first-child { padding-left: 0; }
.noegletal > div:last-child { border-right: 0; }
.noegletal .tal { font-size: 44px; font-weight: 700; letter-spacing: -.045em; line-height: 1;
                  font-variant-numeric: tabular-nums; }
.noegletal .tal small { font-size: 22px; color: var(--svag); font-weight: 400; }
.noegletal .under { margin-top: 8px; font-size: 13px; color: var(--daempet); }

/* ---------------------------------------------------------- status */

.s-kladde      { background: var(--coral-28); }
.s-til-review  { background: var(--coral-60); }
.s-fremlagt    { background: var(--coral); }
.s-godkendt    { background: var(--blaek); }
.mærke { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--daempet);
         white-space: nowrap; }
.mærke i { width: 9px; height: 9px; display: inline-block; }
.mærke.m-godkendt { color: var(--blaek); font-weight: 600; }

.statusbjaelke { display: flex; height: 10px; gap: 2px; margin-top: 14px; }
.statusbjaelke span { display: block; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.legende .mærke { font-size: 12px; }

/* ---------------------------------------------------------- register over afsnit */

.del-hoved { display: flex; align-items: baseline; gap: 14px; padding: 26px 0 9px;
             border-bottom: 1.5px solid var(--blaek); }
.del-hoved h2 { font-size: 17px; }
.register .raekke { display: grid; align-items: center; gap: 18px;
                    grid-template-columns: 40px minmax(0, 1fr) 130px 150px 120px;
                    padding: 13px 0; border-bottom: 1px solid var(--linje-fin); color: var(--blaek); }
a.raekke:hover { text-decoration: none; background: var(--flade-2); }
.register .nr { font-family: var(--mono); font-size: 12px; color: var(--svag); }
.register .navn { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.register .budskab { font-size: 13px; color: var(--daempet); margin-top: 3px; line-height: 1.45; }
.register .meta { font-size: 12.5px; color: var(--daempet); }
.register .hoejre { text-align: right; }

.to-spalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; }

.liste .post { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
               border-bottom: 1px solid var(--linje-fin); font-size: 14px; }
.liste .post .prik { margin-top: 6px; width: 7px; height: 7px; flex: none; background: var(--coral); }
.liste .post .ts { font-family: var(--mono); font-size: 11.5px; color: var(--svag); width: 178px; flex: none; }
.liste .post .lille { font-family: var(--mono); font-size: 11.5px; color: var(--svag); }

/* ---------------------------------------------------------- knapper og felter */

.knapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.knap { font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex;
        align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px;
        border: 1px solid var(--blaek); background: var(--grund); color: var(--blaek); border-radius: 0;
        white-space: nowrap; }
.knap:hover { background: var(--flade-2); color: var(--blaek); text-decoration: none; }
.knap.primær { background: var(--coral-tekst); border-color: var(--coral-tekst); color: #fff; font-weight: 600; }
.knap.primær:hover { background: #9d3626; color: #fff; }
.knap.moerk { background: var(--blaek); color: var(--grund); }
.knap.moerk:hover { background: #3a3634; color: var(--grund); }
.knap.lille { height: 34px; padding: 0 14px; font-size: 13px; }

.felt { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.felt label { font-size: 13.5px; font-weight: 600; }
.felt .hjaelp { font-size: 12.5px; color: var(--daempet); }
.feltraekke { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 18px; }

input[type=text], input[type=password], select, textarea {
  font-family: inherit; font-size: 14.5px; color: var(--blaek); background: var(--flade);
  border: 1px solid #d9d5d0; border-radius: 0; padding: 10px 12px; width: 100%; }
textarea { resize: vertical; line-height: 1.55; }

/* ---------------------------------------------------------- læsevisning */

.laes { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-top: 30px; }
.toc { position: sticky; top: 18px; align-self: start; font-size: 13.5px;
       max-height: calc(100vh - 36px); overflow: auto; }
.toc .del { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
            color: var(--svag); padding: 16px 0 6px; }
.toc .del:first-child { padding-top: 0; }
.toc a { display: flex; gap: 10px; padding: 6px 0; color: var(--daempet); border-left: 2px solid transparent;
         padding-left: 10px; margin-left: -12px; }
.toc a:hover { color: var(--blaek); text-decoration: none; }
.toc a.aktiv { color: var(--blaek); font-weight: 600; border-left-color: var(--coral); }
.toc a .nr { font-family: var(--mono); font-size: 11px; color: var(--svag); padding-top: 2px; }

.afsnithoved { padding-bottom: 22px; border-bottom: 1.5px solid var(--blaek); }
.afsnithoved h1 { font-size: 36px; margin-top: 8px; }
.afsnithoved .metalinje { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 16px;
                          font-size: 13px; color: var(--daempet); }
.kernebudskab { margin-top: 22px; padding: 16px 20px; background: var(--coral-svag);
                border-left: 3px solid var(--coral); font-size: 16.5px; line-height: 1.5; font-weight: 500; }
.kernebudskab .over { display: block; margin-bottom: 6px; color: var(--coral-tekst); }

.prosa { font-size: 16px; line-height: 1.65; max-width: 78ch; }
.prosa h1 { font-size: 28px; margin: 34px 0 12px; }
.prosa h2 { font-size: 22px; margin: 34px 0 12px; }
.prosa h3 { font-size: 17px; margin: 26px 0 8px; }
.prosa p, .prosa ul, .prosa ol, .prosa table, .prosa pre, .prosa blockquote, .prosa dl { margin: 0 0 16px; }
.prosa ul, .prosa ol { padding-left: 22px; }
.prosa li { margin-bottom: 5px; }
.prosa li::marker { color: var(--coral); }
.prosa strong { font-weight: 650; }
.prosa hr.skift { border: 0; height: 1px; background: var(--linje); margin: 36px 0; }
.prosa blockquote { border-left: 3px solid var(--coral); padding: 2px 0 2px 18px; color: var(--daempet); }
.prosa code { font-family: var(--mono); font-size: .86em; background: var(--flade-2); padding: 1px 5px; }
.prosa pre { background: var(--flade-2); padding: 14px 16px; overflow-x: auto; }
.prosa pre code { background: none; padding: 0; }
.prosa table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.prosa th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--svag); text-align: left; font-weight: 500; padding: 10px 12px 9px;
            border-bottom: 1.5px solid var(--blaek); white-space: nowrap; }
.prosa td { padding: 9px 12px; border-bottom: 1px solid var(--linje-fin); vertical-align: top; }
.prosa tr:last-child td { border-bottom: 1.5px solid var(--blaek); }
.prosa img { max-width: 100%; }
.prosa .mermaid { background: var(--flade); border: 1px solid var(--linje-fin); padding: 18px;
                  margin: 0 0 16px; text-align: center; overflow-x: auto; }
.prosa .admonition { border-left: 3px solid var(--blaek); background: var(--flade-2);
                     padding: 12px 16px; margin: 0 0 16px; }
.prosa .admonition-title { font-weight: 600; margin-bottom: 4px; }
.prosa .admonition.beslutning, .prosa .admonition.note { border-left-color: var(--coral); background: var(--coral-svag); }

.blad { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 18px;
        border-top: 1px solid var(--linje); font-size: 14px; }
.blad .over { display: block; margin-bottom: 4px; }

/* ---------------------------------------------------------- editor */

.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 20px; }
.editor textarea.kilde { font-family: var(--mono); font-size: 13.5px; min-height: 66vh; tab-size: 2; }
.editor .forhaand { background: var(--flade); border: 1px solid var(--linje); padding: 22px 26px;
                    max-height: 72vh; overflow: auto; }
.editor .forhaand .prosa { font-size: 14.5px; }
.vaerktoej { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.vaerktoej button { font-family: var(--mono); font-size: 11.5px; height: 28px; padding: 0 10px;
                    background: var(--flade); border: 1px solid #d9d5d0; cursor: pointer; color: var(--daempet); }
.vaerktoej button:hover { border-color: var(--blaek); color: var(--blaek); }
.gemlinje { position: sticky; bottom: 0; background: var(--grund); border-top: 1.5px solid var(--blaek);
            padding: 14px 0; margin-top: 18px; display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.gemlinje .felt { padding: 0; flex: 1; min-width: 200px; }

/* ---------------------------------------------------------- login */

body.login-side { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-kort { width: 100%; max-width: 420px; padding: 0 24px; }
.login-kort .logo img { width: 200px; margin-bottom: 30px; }
.login-kort h1 { font-size: 26px; margin-bottom: 6px; }
.login-kort .under { color: var(--daempet); font-size: 14px; margin-bottom: 18px; }
.login-kort .knap { width: 100%; margin-top: 8px; }

@media screen and (max-width: 900px) {
  .ramme { padding: 0 18px; }
  .noegletal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noegletal > div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--linje); }
  .to-spalter, .laes, .editor { grid-template-columns: 1fr; gap: 28px; }
  .toc { position: static; max-height: none; }
  .register .raekke { grid-template-columns: 32px minmax(0, 1fr) 110px; }
  .register .raekke > :nth-child(4), .register .raekke > :nth-child(5) { display: none; }
  .skel, .kontekst { display: none; }
}

/* ---------------------------------------------------------- prioritering og køreplan */
/* Horisont vises med coral-intensitet: stærkest for det, der skal ske først. */

.horisont { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
            white-space: nowrap; color: var(--blaek); }
.horisont i { width: 11px; height: 11px; display: inline-block; flex: none; }
.horisont small { font-weight: 400; color: var(--daempet); font-size: .92em; }
.horisont.h-1 i { background: var(--coral); }
.horisont.h-2 i { background: var(--coral-60); }
.horisont.h-3 i { background: var(--coral-28); }
.horisont.h-4 i { background: var(--flade); border: 1.5px solid var(--coral-60); }
.horisont.h-0 { color: var(--svag); font-weight: 400; }

table.prio th.tal, table.prio td.tal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.koereplan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.koereplan .kolhoved { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px;
                       border-bottom: 1.5px solid var(--blaek); margin-bottom: 6px; }
.koereplan .kolhoved .horisont { font-size: 15px; }
.koereplan .kolhoved .tid { font-family: var(--mono); font-size: 11px; color: var(--svag); letter-spacing: .04em; }
.koereplan .kolhoved .betyder { font-size: 12.5px; color: var(--daempet); }
.koereplan .kort { padding: 10px 12px; margin-top: 8px; background: var(--flade);
                   border: 1px solid var(--linje-fin); border-left: 3px solid var(--coral-28); }
.koereplan .h-1 .kort { border-left-color: var(--coral); }
.koereplan .h-2 .kort { border-left-color: var(--coral-60); }
.koereplan .h-4 .kort { border-left-color: var(--linje); }
.koereplan .hvad { font-size: 14px; line-height: 1.4; }
.koereplan .hvor { margin-top: 5px; font-size: 11.5px; color: var(--svag); display: flex; gap: 8px;
                   justify-content: space-between; flex-wrap: wrap; }
.koereplan .tom { font-size: 12.5px; color: var(--svag); padding: 10px 0; }
.note { font-size: 12.5px; color: var(--daempet); margin-top: 14px; }

@media screen and (max-width: 900px) {
  .koereplan { grid-template-columns: 1fr 1fr; }
}