/* TG-01 – Nordisk Klar. Fælles kontrakt for web, native webviews og redaktør.
   Ældre strukturelle modulregler ligger i @layer tg-legacy. Identiteten og
   interaktive tilstande ejes her, også når et modul indlæses senere. */
@import url('nordisk-tokens.css?v=191');
html { scroll-padding-top: 88px; }
body { margin: 0; background: var(--tg-bg); color: var(--tg-ink); font: 400 16px/1.55 var(--sans); }
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: var(--sans); }
h1,h2,h3,h4,h5,h6 { color: var(--tg-navy); font-family: var(--sans); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
h1 { font-size: clamp(28px, 3vw, 38px); } h2 { font-size: 24px; } h3 { font-size: 20px; }
a { color: var(--tg-primary); text-underline-offset: 3px; }
small { font-size: 14px; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tg-focus); outline-offset: 3px;
}
:where(button, [role=button]) {
  min-height: 44px; border-radius: var(--tg-radius-button); cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
}
.knap, .doer-knap, .ds-root .ds-primary, .ds-root .ds-secondary, .tg-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border: 1px solid transparent;
  border-radius: var(--tg-radius-button); background: var(--tg-primary); color: white;
  box-shadow: none; font: 600 15px/1.4 var(--sans); text-decoration: none;
  white-space: normal; text-align: center; transition: background .15s, border-color .15s, box-shadow .15s;
}
.knap:hover, .doer-knap:hover, .ds-root .ds-primary:hover, .tg-button:hover { background: var(--tg-hover); color: white; box-shadow: none; }
.knap:active, .tg-button:active { background: var(--tg-pressed); transform: translateY(1px); }
.knap.stille, .ds-root .ds-secondary, .tg-button.secondary {
  color: var(--tg-navy); background: var(--tg-surface); border-color: var(--tg-line-strong);
}
.knap.stille:hover, .ds-root .ds-secondary:hover, .tg-button.secondary:hover { color: var(--tg-navy); background: var(--tg-bg); border-color: var(--tg-primary); }
.knap.tekst, .som-link { color: var(--tg-primary); background: transparent; border-color: transparent; box-shadow: none; }
.knap.roed, .knap.fare { background: var(--tg-danger); color: white; }
.knap.slet, .knap.stille.slet { color: var(--tg-danger); background: white; border-color: #E6B8C0; }
.knap.roed:hover, .knap.fare:hover { background: #94192B; }
.knap.slet:hover { background: var(--tg-danger-soft); color: var(--tg-danger); }
button:disabled, .knap:disabled, .ds-root button:disabled, [aria-disabled=true] {
  color: var(--tg-muted); background: var(--tg-disabled); border-color: var(--tg-line);
  cursor: not-allowed; opacity: 1; box-shadow: none; transform: none;
}
[aria-busy=true] { cursor: progress; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea,
.felt input:not([type=checkbox]):not([type=radio]), .felt select, .felt textarea,
.ds-root input:not([type=checkbox]):not([type=range]):not([type=color]), .ds-root select, .ds-root textarea) {
  min-height: 46px; max-width: 100%; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--tg-line-strong); border-radius: 10px;
  background: white; color: var(--tg-ink); font: 400 16px/1.5 var(--sans); box-shadow: none;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tg-subtle); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--tg-primary); box-shadow: 0 0 0 3px #009C9A1A; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--tg-danger); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--tg-primary); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: 0 0 20px; }
.felt>span, .felt>label, .ds-root .ds-field>span { display: block; margin-bottom: 8px; color: var(--tg-ink); font-size: 14px; font-weight: 600; }
.felt-afsnit strong { color: var(--tg-navy); font: 700 20px/1.3 var(--sans); }
.felt-afsnit em, .felt-tom, .felt-visning, .linje { font-family: var(--sans); font-size: 14px; }
.tg-field-error { margin: 6px 0 0; color: var(--tg-danger); font-size: 14px; }
.blok, .kort, .soft-card, .vejl-gruppe, .tg-card {
  background: white; border: 1px solid var(--tg-line); border-radius: 12px; box-shadow: var(--tg-shadow);
}
.note { border: 1px solid #BFDEEA; background: #EDF6FB; color: #234E67; border-radius: 10px; font-size: 15px; }
.note.fejl, [role=alert]:not(:empty) { color: var(--tg-danger); }
.note.fejl { border-color: #E6B8C0; background: var(--tg-danger-soft); }
.pille { background: #EDF3F7; color: var(--tg-muted); font-size: 14px; }
.pille.god { background: var(--tg-soft); color: #00635F; }
.pille.obs { background: var(--tg-warning-soft); color: var(--tg-warning); }
.tom { background: white; border: 1px dashed var(--tg-line-strong); border-radius: 12px; padding: 32px 24px; }
.tom h2 { font: 700 22px/1.3 var(--sans); }
.tom p { color: var(--tg-muted); font-size: 16px; }
.spinner { border-color: var(--tg-line); border-top-color: var(--tg-primary); }
table { border-collapse: collapse; width: 100%; color: var(--tg-ink); font-size: 15px; }
th { text-align: left; background: #EDF3F7; color: var(--tg-navy); font-weight: 600; }
th,td { padding: 12px 16px; border-bottom: 1px solid var(--tg-line); vertical-align: middle; }
th:last-child, td:last-child:has(button) { text-align: right; }
tr:hover>td { background: #F8FBFD; }
.tg-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tg-table-scroll:focus-visible { outline-offset: -3px; }
.faner, .filter, .filtre, .sub161-tabs { gap: 8px; flex-wrap: wrap; }
.faner button, .filter button, .filtre button, .sub161-tabs button { border-radius: 10px; }
.faner .aktiv, .faner [aria-selected=true], .filter .aktiv, .sub161-tabs .aktiv { background: var(--tg-soft); color: var(--tg-primary); }
/* Alle modaltyper: native dialog, fælles ark, lokal bekræftelse og React. */
dialog, .ark-boks, .bekraeft, .ds-root .ds-dialog, .tg-dialog {
  background: white; color: var(--tg-ink); border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-dialog); box-shadow: var(--tg-shadow-dialog);
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px);
}
dialog:not([open]) { display: none; }
dialog::backdrop { background: #12304766; backdrop-filter: blur(2px); }
.ark-lag, .ds-root .ds-backdrop { background: #12304766; backdrop-filter: blur(2px); padding: 24px; }
.ark-top, dialog>header, dialog>form>header, .ds-root .ds-dialog>header {
  background: white; color: var(--tg-navy); border-bottom: 1px solid var(--tg-line); padding: 20px 24px;
}
.ark-top strong, dialog h2, .ds-root .ds-dialog h2 { color: var(--tg-navy); font: 700 22px/1.3 var(--sans); }
.ark-top em { color: var(--tg-muted); font-size: 14px; }
.ark-luk, dialog header>button, dialog>form>header>button { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--tg-muted); }
.ark-luk:hover, dialog header>button:hover { background: var(--tg-bg); color: var(--tg-navy); }
.ark-krop { padding: 24px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ark-bund, .bekraeft-knapper, dialog>footer, dialog>form>footer, .ds-root .ds-actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px;
  padding: 16px 24px; background: white; border-top: 1px solid var(--tg-line);
}
.ark-bund .knap { flex: 0 1 auto; min-height: 44px; }
.ark-bund .slet { margin-right: auto; }
.bekraeft { padding: 24px; }
.bekraeft-knapper { padding: 16px 0 0; margin-top: 24px; }
.tg-dialog { padding: 0; width: min(480px, calc(100vw - 32px)); }
.tg-dialog>div { padding: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tg-toast-region { position: fixed; bottom: 24px; right: 24px; z-index: 120; width: min(440px, calc(100vw - 32px)); display: grid; gap: 12px; }
.tg-toast { background: white; border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-teal); border-radius: 12px; box-shadow: var(--tg-shadow-dialog); padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.tg-toast>span { flex: 1; overflow-wrap: anywhere; }
.tg-toast.error { border-left-color: var(--tg-danger); }
.tg-toast button { background: transparent; border: 0; color: var(--tg-muted); padding: 0; min-width: 44px; margin: -10px -10px -10px 0; }
/* Offentlige indgange og informationssider. */
.doer,.doer-skinne { --accent: var(--tg-primary); --accent-dyb: var(--tg-hover); --accent-bleg: var(--tg-soft); --login167-ink: var(--tg-navy); --login167-muted: var(--tg-muted); --login167-green: var(--tg-primary); --login167-border: var(--tg-line); }
.doer { background: var(--tg-bg); }
.doer-skinne { background: white; border-color: var(--tg-line); }
.doer-skinne .skinne-navn { color: var(--tg-navy); font-family: var(--sans); }
.doer .doer-kort, .doer .login-samlet { padding: 28px; border: 1px solid var(--tg-line); border-radius: 12px; background: white; box-shadow: var(--tg-shadow); }
.doer h1, .doer .doer-hilsen, .doer .doer-spoergsmaal { color: var(--tg-navy); font-family: var(--sans); font-weight: 700; }
.doer .rolle { background: white; border: 1px solid var(--tg-line); border-radius: 12px; box-shadow: var(--tg-shadow); color: var(--tg-navy); }
.doer .rolle:hover { border-color: var(--tg-teal); background: #F8FDFC; }
.doer .rolle-ryg { background: var(--tg-teal); }
.doer .rolle-maerke { color: var(--tg-primary); background: var(--tg-soft); }
.doer .rolle-note, .doer .doer-under { color: var(--tg-muted); font-size: 16px; }
.doer .login-modes button[aria-pressed=true] { color: var(--tg-primary); background: var(--tg-soft); }
.tg-public-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.tg-public-nav a { text-decoration: none; color: var(--tg-navy); font-weight: 600; }
.tg-hero { width: 100%; max-width: 1200px; margin: 0 auto; padding: 72px 24px 48px; position: relative; overflow: hidden; }
.tg-hero>div { max-width: 720px; position: relative; z-index: 1; }
.tg-hero::after { content: ''; position: absolute; right: -80px; bottom: -160px; width: 400px; height: 400px; background: #B9EEEA; border-radius: 50%; }
.tg-hero h1 { font-size: clamp(36px, 5vw, 60px); margin: 0 0 24px; max-width: 800px; letter-spacing: -.045em; }
.tg-hero p { font-size: 20px; color: var(--tg-muted); max-width: 600px; margin: 0 0 24px; }
.tg-public-features { max-width: 1200px; padding: 24px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.tg-public-features article { padding: 24px; }
.tg-public-features h2 { font-size: 22px; margin: 0 0 12px; }
.tg-public-features p { margin: 0; color: var(--tg-muted); }
.politik-side { background: var(--tg-bg); }
.politik-side>header { background: white; max-width: none; padding: 16px max(24px,calc((100vw - 900px)/2)); border-bottom: 1px solid var(--tg-line); }
.politik-dokument { background: white; border: 1px solid var(--tg-line); border-radius: 12px; margin: 32px auto; padding: 32px; }
.politik-dokument p { font-size: 16px; }
.politik-dokument nav { line-height: 2; }
.apv-public>header,.temperature-public>header,.tg-public-form .band { color: var(--tg-navy); background: white; border-bottom: 1px solid var(--tg-line); }
.apv-public>header p,.temperature-public>header p,.tg-public-form .band p { color: var(--tg-muted); }
.tg-public-form .band h1 { font: 700 30px/1.25 var(--sans); }
.tg-public-form main { max-width: 760px; }
.tg-public-form .ark { background: white; border: 1px solid var(--tg-line); border-radius: 12px; box-shadow: var(--tg-shadow); }
.tg-public-form button[type=submit] { background: var(--tg-primary); color: white; border: 0; min-height: 48px; }
.tg-public-form button[type=submit]:hover { background: var(--tg-hover); }
.tg-public-form .stribe { background: var(--tg-teal); }
/* Designværkstedets brugerflade. Brugerens egne plakatfarver ændres ikke. */
.ds-root { --ds-ink: var(--tg-ink); --ds-muted: var(--tg-muted); --ds-line: var(--tg-line); --ds-accent: var(--tg-primary); --ds-soft: var(--tg-soft); --ds-paper: white; font: 400 16px/1.5 var(--sans); }
.ds-root small, .ds-root .ds-check, .ds-root .ds-tool span { font-size: 14px; }
.ds-root .ds-tool { color: var(--tg-muted); min-width: 44px; min-height: 44px; border-radius: 10px; }
.ds-root .ds-tool:hover, .ds-root .ds-tool.is-active { background: var(--tg-soft); color: var(--tg-primary); }
.ds-root .ds-dialog { border-radius: 16px; }
.ds-root .ds-start-band, .ds-root .ds-recent, .ds-root .ds-template { border-radius: 12px; border: 1px solid var(--tg-line); background: white; }
.ds-root .ds-top { min-height: 64px; }
.ds-root .ds-error { background: var(--tg-danger-soft); color: var(--tg-danger); border-color: var(--tg-danger); border-radius: 10px; font-size: 14px; }
.ds-root .ds-format.is-active { border-color: var(--tg-primary); background: var(--tg-soft); }
.native-wait { color: var(--tg-muted); font: 400 16px/1.5 var(--sans); }
@media(max-width: 900px) { .tg-public-features { grid-template-columns: 1fr; } .tg-public-nav { gap: 12px; } }
@media(max-width: 600px) {
  :root { --gutter: 16px; }
  .ark-lag,.ds-root .ds-backdrop { padding: 8px; }
  dialog,.ark-boks,.ds-root .ds-dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .ark-top,.ark-krop,dialog>header,dialog>form>header { padding: 16px; }
  .ark-bund,dialog>footer,dialog>form>footer { padding: 16px; padding-bottom: max(16px,env(safe-area-inset-bottom)); gap: 8px; }
  .ark-bund .knap { flex: 1 1 auto; }
  .ark-bund .slet { flex-basis: 100%; }
  .politik-dokument { margin: 16px; padding: 20px; }
  .tg-public-nav a:not(.knap) { display: none; }
  .tg-hero { padding: 48px 20px 32px; }
  .tg-hero::after { opacity: .4; }
  .tg-toast-region { bottom: max(16px,env(safe-area-inset-bottom)); right: 16px; }
}
@media(prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.tg-hero::before{content:"";position:absolute;right:80px;bottom:-210px;width:320px;height:320px;border-radius:50%;background:var(--tg-teal);opacity:.85;z-index:1}
@media(max-width:900px){.tg-hero::before{opacity:.15}}

@media(max-width:600px){.doer .doer-kort,.doer .login-samlet{padding:20px}}

.doer-skinne .skinne-maerke{text-decoration:none}

.tg-notification-dialog{width:min(600px,calc(100vw - 32px))}.tg-notification{padding:20px 0;border-bottom:1px solid var(--tg-line)}.tg-notification:first-child{padding-top:0}.tg-notification>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.tg-notification h3{font-size:18px;margin:0}.tg-notification p{white-space:pre-wrap}.tg-notification small{color:var(--tg-muted)}.tg-notification-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
/* Dialoger vises som faste hvide flader fra første billede. */
.ark-lag{opacity:1;transition:none}
.ark-boks{transform:none;transition:none}

.tg-prices{width:100%;max-width:1200px;margin:0 auto;padding:32px 24px}
.tg-prices-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.tg-prices-top h2{font-size:32px;margin:0 0 12px}.tg-prices-top p{margin:0;color:var(--tg-muted)}
.tg-price-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:24px}.tg-price-card{padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}.tg-price-card h3{font-size:24px;margin:0}.tg-price-card p{margin:0;color:var(--tg-muted)}.tg-price-card .knap{margin-top:auto;width:100%}.tg-price-card small{color:var(--tg-muted);margin-bottom:16px}.tg-price-amount{font-size:32px;color:var(--tg-navy);overflow-wrap:anywhere;line-height:1.2}.tg-price-period{max-width:280px;margin:0 0 24px}.tg-price-period select{width:100%}.tg-prices-empty{padding:24px}.tg-prices-empty h3{margin-top:0}.tg-price-terms{margin-bottom:0}
@media(max-width:600px){.tg-prices{padding:24px 20px}.tg-price-grid{gap:16px}}

.ds-root .ds-save-state{font-size:14px;color:var(--tg-muted)}.ds-root .ds-wordmark span{color:var(--tg-primary)}
.ds-root .ds-check{min-height:44px}
.ds-root .ds-canvas-meta,.ds-root .ds-canvas-bottom{height:48px;min-height:48px;font-size:14px}
.ds-root .ds-canvas-meta>span,.ds-root .ds-canvas-bottom .ds-check{font-size:14px}
input[type=file]{padding:8px;min-height:64px}
input[type=file]::file-selector-button{min-height:44px;padding:8px 12px;margin-right:12px;border:1px solid var(--tg-line-strong);border-radius:10px;background:var(--tg-bg);color:var(--tg-navy);font:600 14px/1.4 var(--sans);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--tg-soft)}
input[type=color]{width:44px;height:44px;min-height:44px;padding:4px;border:1px solid var(--tg-line-strong);border-radius:10px;background:white;cursor:pointer}
input[type=range]{min-height:44px}
.login-privacy label{min-height:44px}

.lf-band{background:white;color:var(--tg-navy);border:1px solid var(--tg-line);border-radius:12px;box-shadow:var(--tg-shadow);flex-wrap:wrap;gap:16px}
.lf-band>div:first-child{min-width:0;flex:1 1 240px}
.lf-band .lf-eyebrow,.lf-band .lf-connection,.lf-band .lf-connection span{color:var(--tg-muted)}
.lf-band .lf-connection.offline{color:var(--tg-danger)}
.ny-compose-top,.amr-followup header{background:white;color:var(--tg-navy);border-bottom:1px solid var(--tg-line)}
.ny-compose-heading>div>span{color:var(--tg-muted)}
.ny-compose-mark{color:var(--tg-primary);background:var(--tg-soft)}
.ny-compose-draft{color:var(--tg-primary);background:var(--tg-soft);border-color:var(--tg-line)}
.ny-compose-close{width:44px;min-width:44px;height:44px;min-height:44px;background:transparent;color:var(--tg-muted);border:0;border-radius:10px}