/* Afklaret — shared design system, lifted from the afklaret.dk landing page (dk-landing.html).
   One stylesheet for _Layout, Index, Bestil and Status so the order flow reads as the same site. */
:root{
  --paper:#F2F3EF;
  --ink:#171D1A;
  --red:#C8102E;
  --red-dark:#A80D26;
  --mist:#DDE0D9;
  --moss:#4C5B52;
  --green:#2E7D5B;
  --green-bright:#5FCB98;
  --red-bright:#FF6B81;
  --card:#FBFBF9;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Schibsted Grotesk',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
main{min-height:60vh}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
::selection{background:var(--red);color:#fff}

/* ---------- nav ---------- */
nav{border-bottom:1px solid var(--mist)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;text-decoration:none}
.logo-mark{height:19px;width:auto;display:block}
.logo span{color:var(--red)}
.nav-links{display:flex;gap:26px;align-items:center;font-size:.92rem}
.nav-links a{text-decoration:none;color:var(--moss)}
.nav-links a:hover{color:var(--ink)}
/* You are here. Marked with aria-current="page" rather than a class, so the same attribute a screen
   reader announces is the one that draws the underline — they cannot drift apart.
   Underline via text-decoration, NOT a border: a border adds 2px to the box and nudges the whole nav
   row, so the marker would move the thing it marks. This changes no geometry at all. */
.nav-links a[aria-current=page]{color:var(--ink);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:6px}
.nav-cta{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--ink)!important;border:1.5px solid var(--ink);padding:8px 14px;border-radius:6px;text-decoration:none}
.nav-cta:hover{background:var(--ink);color:var(--paper)!important}
/* Phone: the logo already goes to /, so "Tjek domæne" and "Pris" fold away — but Bestil stays.
   This rule used to except .nav-cta, which lived inside .nav-links; the CTA is now the account
   action and sits outside, so keying on it would have hidden ordering entirely on a phone. */
@media(max-width:640px){.nav-links a:not(.nav-order){display:none}}

/* ---------- hero + section headings ---------- */
.hero{padding:72px 0 56px}
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;letter-spacing:-0.035em;line-height:1.07;max-width:16ch}
h1 .dk,h1 .domain{color:var(--red)}
.lede{margin-top:22px;font-size:1.15rem;color:var(--moss);max-width:54ch}
section{padding:56px 0}
.sec-label{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--moss);margin-bottom:14px}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-0.03em;line-height:1.12;max-width:24ch}

/* ---------- whois terminal (signature component) ---------- */
.term{margin-top:40px;background:var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(23,29,26,.45);max-width:720px}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(242,243,239,.12)}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(242,243,239,.22)}
/* The window's own label. Bolder and larger than the .45 whisper it was — it names the tool. */
.term-title{margin-left:auto;font-family:var(--mono);font-size:.84rem;font-weight:600;color:rgba(242,243,239,.72)}
.term-body{padding:20px 20px 24px}
.term-form{display:flex;gap:0;align-items:stretch}
.prompt{font-family:var(--mono);color:var(--green-bright);display:flex;align-items:center;padding-right:10px;font-size:.95rem;user-select:none}
.term input[type=text]{flex:1;background:transparent;border:none;outline:none;color:var(--paper);font-family:var(--mono);font-size:1rem;padding:10px 0;min-width:0}
.term input::placeholder{color:rgba(242,243,239,.35)}
.term input:focus-visible{box-shadow:0 2px 0 var(--green-bright)}
.term button{font-family:var(--mono);font-weight:600;font-size:.88rem;background:var(--red);color:#fff;border:none;border-radius:7px;padding:10px 18px;cursor:pointer}
.term button:hover{background:var(--red-dark)}
.term button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
/* Near-white: this is the answer the visitor came for, on a dark panel, and .85 read as dimmed. */
.term-out{font-family:var(--mono);font-size:.86rem;line-height:1.9;margin-top:16px;color:rgba(242,243,239,.97)}
.term-out .t-line{display:block}
/* Labels stay quieter than the values they introduce, but lifted with them so the contrast between
   the two is a deliberate step rather than both being dim. */
.term-out .t-label{color:rgba(242,243,239,.6)}
.t-dim{color:rgba(242,243,239,.4)}
.t-green{color:var(--green-bright)}
.t-red{color:var(--red-bright)}
.t-cta{display:inline-block;margin-top:14px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;border-radius:7px;padding:10px 16px;font-size:.86rem;font-family:var(--sans)}
.t-cta:hover{background:#fff}
/* Transfer offer on a taken domain — an outline, so it reads as the secondary path it is. */
.t-cta-alt{background:transparent;color:var(--paper);border:1.5px solid rgba(242,243,239,.55)}
.t-cta-alt:hover{background:rgba(242,243,239,.12);border-color:var(--paper)}
.t-note{margin-top:14px;font-family:var(--sans);font-size:.85rem;color:rgba(242,243,239,.7);max-width:56ch}
.t-note a{color:var(--green-bright)}
.term-note{margin-top:12px;font-size:.85rem;color:var(--moss)}
@media(max-width:560px){.term-form{flex-wrap:wrap}.term button{width:100%;margin-top:10px}}

/* ---------- order form (Bestil), in the same idiom ---------- */
.order{padding:56px 0 72px}
.order h1{max-width:none}
.order form{max-width:640px;margin-top:12px}

/* Order page = form column (640px, per the UI conventions in CLAUDE.md) + price panel. Everything
   that is not the form or the panel spans both columns, so headings keep the full width. */
.order .wrap{display:grid;grid-template-columns:minmax(0,640px) minmax(210px,1fr);gap:32px;align-items:start}
.order .wrap > :not(form):not(.price-panel){grid-column:1/-1}

.price-panel{position:sticky;top:24px;padding:20px;border:1px solid var(--mist);border-radius:12px;background:var(--card)}
.pp-table{width:100%;border-collapse:collapse}
.pp-span{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--moss);text-align:left;padding-bottom:8px}
.pp-sub{font-size:.76rem;font-weight:500;color:var(--moss);text-align:left;padding-bottom:4px;border-bottom:1px solid var(--mist)}
.pp-sub:last-child,.pp-amount:last-child{text-align:right}
.pp-amount{font-family:var(--mono);font-size:1.15rem;font-weight:600;padding-top:10px;white-space:nowrap}
.pp-total{margin-top:16px;padding-top:14px;border-top:1px solid var(--mist)}
.pp-total-label{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--moss)}
.pp-total-amount{font-size:1.6rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1;margin-top:4px}
.pp-total-note{font-size:.8rem;color:var(--moss);margin-top:6px}
/* min-height on both: they fill in from the basket, and must not resize the panel when they do. */
.pp-count{font-size:.88rem;margin-top:16px;padding-top:14px;border-top:1px solid var(--mist);min-height:1.2rem}
.price-panel .tier-nudge{margin-top:6px}
.pp-link{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:.78rem;color:var(--moss);text-decoration:underline}

/* Narrow: one column, and the panel pins to the bottom of the viewport so the price stays visible
   while scrolling a long form rather than being stranded below it. */
@media(max-width:980px){
  .order .wrap{display:block}
  .price-panel{position:sticky;top:auto;bottom:0;margin-top:24px;border-radius:12px 12px 0 0;
    box-shadow:0 -10px 28px -14px rgba(23,29,26,.3)}
  .pp-amount{font-size:1rem}
  .pp-total-amount{font-size:1.3rem}
}
fieldset{border:1px solid var(--mist);border-radius:12px;padding:22px 22px 24px;margin-top:22px;background:var(--card)}
legend{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--moss);padding:0 8px}
label{display:block;font-size:.9rem;color:var(--moss);margin-top:14px}
fieldset > label:first-of-type{margin-top:6px}
/* Every text-entry type, not a hand-listed few. type=password was missing, so the login,
   registration and change-password fields rendered as raw browser inputs next to styled ones —
   invisible until you land on a page that happens to use one. number/search/url are included
   pre-emptively for the same reason: the failure is silent and the fix is one selector. */
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=search],input[type=url],select{display:block;width:100%;margin-top:6px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--mist);border-radius:7px;padding:10px 12px;outline:none}
input:focus-visible,select:focus-visible{border-color:var(--green)}
.row{display:grid;grid-template-columns:1fr 2fr;gap:14px}
@media(max-width:520px){.row{grid-template-columns:1fr}}

/* price table — styled like the landing 'compare' table */
.price-table{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:6px}
.price-table td{padding:11px 2px;border-bottom:1px solid var(--mist)}
.price-table td:last-child{text-align:right;font-family:var(--mono);white-space:nowrap}
.price-table tr.total td{border-bottom:none;font-weight:700;padding-top:14px}
.price-table tr.total td:last-child{color:var(--red)}
.price-note{margin-top:12px;font-size:.85rem;color:var(--moss)}

/* volume tier table (_TierTable) — the shared component on Index, Bestil, panel and bulk intake */
.tier-block{margin:18px 0}
.tier-headline{font-weight:700;font-size:1.05rem;margin:0 0 4px}
.tier-table th{padding:8px 2px;font-size:.8rem;font-weight:500;color:var(--moss);text-align:left;border-bottom:1px solid var(--mist)}
.tier-table th:not(:first-child){text-align:right}
.tier-table td:not(:first-child){text-align:right;font-family:var(--mono);white-space:nowrap}
/* Spanning header sits centred over the two money columns it covers. */
.tier-table th.tier-span{text-align:center;border-bottom:none;padding-bottom:2px}
.tier-sub{font-weight:400}
.tier-table tr.tier-current td{background:var(--card);font-weight:700}
.tier-badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--green);color:#fff;font-family:var(--sans);font-size:.72rem;font-weight:600;vertical-align:middle}
/* min-height so the nudge appearing/disappearing as the basket changes never shifts the page. */
.tier-nudge{margin-top:10px;font-size:.9rem;color:var(--green);font-weight:500;min-height:1.2rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.registry-note{font-size:.9rem;color:var(--moss);margin-bottom:12px}
.mandated-text{font-size:.9rem;color:var(--moss);background:var(--paper);border:1px dashed var(--mist);border-radius:8px;padding:14px 16px;margin:6px 0 14px}
/* These blocks hold Punktum's verbatim consent texts — several paragraphs, not the single
   placeholder line they were first built for. The measure is the supporting-note one; the labels
   reuse .sec-label, so the betaler/fuldmægtig split reads like every other section marker. */
.mandated-text p{max-width:54ch;margin:0 0 10px}
.mandated-text p:last-child{margin-bottom:0}
.mandated-text .sec-label{margin-bottom:6px}
.mandated-text .sec-label ~ .sec-label{margin-top:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink);cursor:pointer;margin-top:8px}
.consent input{flex:0 0 18px;width:18px;height:18px;margin-top:2px;accent-color:var(--red)}
.cta{display:inline-block;margin-top:26px;font-family:var(--mono);font-weight:600;font-size:.95rem;background:var(--red);color:#fff;border:none;border-radius:8px;padding:13px 22px;cursor:pointer;text-decoration:none}
.cta:hover{background:var(--red-dark)}
.panel-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.panel-actions form{margin:0}
.panel-actions .cta{margin-top:0}
.field-error,.validation-summary-errors{color:var(--red);font-size:.85rem;margin-top:6px}
/* The ONE error list. Errors never render inside a row, so no grid can reflow when one appears.
   validation-summary-valid is what ASP.NET stamps on the summary when nothing is wrong — it still
   renders an empty <ul>, so :empty never matches it and it must be hidden explicitly. */
.validation-summary-valid{display:none}
.validation-summary-errors:empty,.validation-summary-errors[hidden]{display:none}
.validation-summary-errors{border:1px solid var(--red);border-radius:10px;padding:12px 16px;background:#fff}
.validation-summary-errors .vs-title{font-weight:700;margin:0 0 6px}
.validation-summary-errors ul{list-style:none;margin:0;padding:0}
.validation-summary-errors li{padding:2px 0}
.validation-summary-errors a{color:var(--red);text-decoration:underline}
/* Invalid controls are marked by colour + aria only — never by inserting a node next to them. */
.order input.is-invalid,.order select.is-invalid{border-color:var(--red)}

/* ---------- mandatory-field affordances ---------- */
/* The asterisk is decorative — `required` already exposes the state to assistive tech. */
.req{color:var(--red);font-weight:700;margin-left:3px}
.req-legend{font-size:.85rem;color:var(--moss);margin-bottom:4px}
/* :user-invalid (not :invalid) so untouched empty fields aren't red on first paint. */
.order input:user-invalid,.order select:user-invalid{border-color:var(--red)}

/* ---------- sign-in offer above the order form ---------- */
/* max-width matches `.order form` (640px). The sign-in offer is a sibling of the form, not a child,
   so without this it takes the full 1060px .wrap column and reads as a different, wider page than
   the form directly beneath it. Anything added to .order must align to the same 640px column. */
.signin-offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  max-width:640px;margin:22px 0 4px;padding:16px 18px;border:1px solid var(--mist);
  border-radius:12px;background:var(--card)}
.signin-offer p{margin:0;font-size:.95rem;color:var(--moss);max-width:46ch}
.signin-offer.is-signed-in{border-style:dashed}
.cta-secondary{flex:none;font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--ink);
  background:none;border:1.5px solid var(--ink);border-radius:8px;padding:10px 16px;text-decoration:none}
.cta-secondary:hover{background:var(--ink);color:var(--paper)}

/* ---------- domain basket rows (Bestil) ---------- */
.domain-row{border:1px solid var(--mist);border-radius:10px;padding:16px;margin-top:14px;background:var(--paper)}
/* Everything in a row STACKS — no grid, no shared lines. That is what keeps "Fjern" pinned as the
   last thing in the row: nothing appearing above it (a verdict, auth-ID, an error) can move it
   sideways or share its line. */
.domain-row label{margin-top:0}
.domain-row .row-remove{display:block;width:100%;margin-top:14px}
.kind-toggle{display:block;margin-top:10px;background:none;border:none;padding:0;font-family:var(--sans);
  font-size:.85rem;color:var(--moss);text-decoration:underline;cursor:pointer}
/* Availability verdict, under the row and out of the grid. min-height keeps the row's height
   steady between "" and a verdict, so classifying a domain doesn't nudge the rows below it. */
.row-status{margin:8px 0 0;font-size:.85rem;min-height:1.15rem;color:var(--moss)}
.row-status.is-free{color:var(--green)}
.row-status.is-taken{color:var(--ink)}
.row-status.is-unknown{color:var(--red)}
.row-status.is-checking{color:var(--moss);opacity:.75}
.transfer-hint{grid-column:1/-1;margin:8px 0 0;font-size:.82rem;color:var(--moss)}
.domain-row .transfer-fields{display:none;grid-template-columns:1fr;gap:12px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--mist)}
.domain-row.is-transfer .transfer-fields{display:grid}
.row-remove{font-family:var(--mono);font-size:.78rem;color:var(--moss);background:none;border:1px solid var(--mist);border-radius:7px;padding:9px 12px;cursor:pointer}
.row-remove:hover{border-color:var(--red);color:var(--red)}
.add-row{margin-top:14px;font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--ink);background:none;border:1.5px dashed var(--moss);border-radius:8px;padding:11px 16px;cursor:pointer}
.add-row:hover{border-color:var(--ink)}
.basket-note{margin-top:12px;font-size:.85rem;color:var(--moss)}

/* ---------- registrant: CVR verdict + DAR address picker (plan #27) ----------
   Both status lines reuse .row-status, so a CVR verdict and a domain verdict read as the same kind
   of statement — and inherit its min-height, which is what keeps the fields below from moving when
   an answer arrives.

   The suggestion list is a real list of buttons rather than a <datalist>: a datalist can only carry
   the text, and what has to travel is the DAR id behind it. It is positioned in the normal flow, not
   absolutely — the fieldset is not a grid here, so an appearing list pushes the rest down once and
   collapses again on pick, which is steadier on a phone than an overlay that can sit off-screen. */
.address-list{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--mist);border-radius:10px;
  background:var(--paper);overflow:hidden}
.address-list li + li{border-top:1px solid var(--mist)}
.address-option{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:.95rem;color:var(--ink);padding:11px 13px}
.address-option:hover,.address-option:focus-visible{background:var(--card);color:var(--red-dark);outline:none}
.cvr-status,.address-status{margin-top:6px}
input[type=date]{display:block;width:100%;margin-top:6px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--mist);border-radius:7px;padding:9px 12px;outline:none}

/* ---------- status page ---------- */
.status{padding:64px 0 72px}
.status h1{max-width:none}
.status-item{border-top:1px solid var(--mist);padding:20px 0}
.status-item h2{font-size:1.15rem;display:flex;align-items:center;gap:10px}
.tag{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);border-radius:5px;padding:2px 7px}
.state{margin-top:20px;font-size:1.1rem;display:flex;align-items:center;gap:10px}
.state::before{font-family:var(--mono);font-size:.9rem}
.state.pending{color:var(--moss)}
.state.action{color:var(--red)}
.state.ok{color:var(--green)}
.state.error{color:var(--red)}
.status .note{margin-top:12px;color:var(--moss);font-size:.92rem;max-width:54ch}
/* The efterkontrol receipt. A card (12px, per the radii-by-role rule) rather than another `.state`
   line, because it is a multi-line document the customer may want to keep, not a status. The left
   border carries the verdict so the two outcomes are distinguishable at a glance without the failing
   one being dressed up as an error — the domain migrated either way. */
.receipt{margin-top:20px;background:var(--card);border:1px solid var(--mist);border-radius:12px;padding:18px 20px}
.receipt.ok{border-left:3px solid var(--green)}
.receipt.attention{border-left:3px solid var(--red)}
.receipt .eyebrow{margin-bottom:10px}
/* The panel renders the same card as a <details>. Styled explicitly — a summary outside the base
   element selectors would fall back to the browser's own font and marker. */
.receipt summary{font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--ink);cursor:pointer}
.receipt summary::marker{color:var(--moss)}
.receipt[open] summary{margin-bottom:10px}
/* pre-line, not `pre`: the body is composed with real line breaks and needs them kept, but it is
   prose in the body font — a monospace block would read as a log excerpt pasted into the page. */
.receipt-body{white-space:pre-line;font-size:.95rem;color:var(--moss);max-width:56ch}

/* ---------- DNS editing (/panel/dns) ---------- */
/* "These records are not in use" — a card, not a `.state` line, because it is the most important
   thing on the page and has to out-weigh the list beneath it. Dashed and red-edged: the same
   vocabulary as the read-only managed block, which also means "shown, but not what you think". */
.dns-elsewhere{max-width:640px;margin-top:20px;padding:16px 18px;border:1px solid var(--red);
  border-left:3px solid var(--red);border-radius:12px;background:var(--card)}
.dns-elsewhere .state{margin-top:0}
.dns-elsewhere .note{max-width:56ch}
/* textarea was NOT in the base input enumeration above, and this is the first page with one — the
   same silent gap that left type=password rendering as a raw grey box for the whole of plan #49.
   Matched to the input rule field for field rather than approximated, so the values box and the
   name box beside it read as one control family. */
textarea{display:block;width:100%;margin-top:6px;font-family:var(--mono);font-size:.95rem;
  color:var(--ink);background:var(--paper);border:1px solid var(--mist);border-radius:7px;
  padding:10px 12px;outline:none;resize:vertical;line-height:1.5}
textarea:focus-visible{border-color:var(--green)}

/* Reserved, so the layout is identical whether or not a save just succeeded or failed. Both states
   land in this node on consecutive requests, and without a floor the list below jumps. */
.dns-status{min-height:2.6rem;margin-top:20px}
.dns-form{max-width:640px;margin-top:10px;padding:20px 22px;border:1px solid var(--mist);
  border-radius:12px;background:var(--card)}
.dns-form .eyebrow{margin-bottom:4px}
/* Name / type / TTL on one line at desk width. A fixed three-column grid rather than flex: the
   type picker must not resize as its selection changes length. */
.dns-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
@media(max-width:560px){.dns-fields{grid-template-columns:1fr}}
.dns-form .note{max-width:56ch}
/* Reserved space: this line changes with the record type, and a note that grows or vanishes would
   shift the Gem button under the cursor mid-click. Two lines at this measure covers every hint. */
.dns-hint{min-height:2.8em}
.dns-form .cta,.dns-form .cta-secondary{margin-top:16px;margin-right:8px;display:inline-block}

.dns-list{list-style:none;margin:14px 0 0;padding:0}
.dns-row{border:1px solid var(--mist);border-radius:10px;padding:14px 16px;margin-top:10px;background:var(--paper)}
/* Ours by design: the dashed border and card background say "shown, not yours" without greying the
   text out — a customer still has to be able to READ their nameservers. */
.dns-row-managed{border-style:dashed;background:var(--card)}
.dns-row-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dns-ttl{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:var(--moss)}
.dns-values-list{list-style:none;margin:8px 0 0;padding:0;font-family:var(--mono);font-size:.88rem;
  word-break:break-all}
.dns-values-list li{padding:2px 0}
/* An <a> and a <button> sit side by side here wearing the same class. inline-flex on both so the
   link's inline box and the button's block box come out the same height — otherwise "Ret" and
   "Slet" are a couple of pixels out of line, which is the kind of thing that reads as unfinished. */
.dns-row-actions{display:flex;gap:8px;margin-top:12px;align-items:center}
.dns-row-actions form{margin:0}
.dns-row-actions .cta-secondary{display:inline-flex;align-items:center;line-height:1}

/* The order-level confirmation sits under the domain list, separated from it. */
.order-confirmed{margin-top:28px;padding-top:24px;border-top:1px solid var(--mist)}
.status .cta{margin-top:20px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--mist);padding:36px 0 48px;margin-top:24px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem;color:var(--moss)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .mono{font-size:.78rem}

/* ---------- auth pages (/log-ind, /opret, /konto/sikkerhed) ---------- */
/* A sign-in form is short and wants a narrower column than the 640px order form — a full-width
   email field reads as a mistake. Everything auth-related sits inside .auth-col so the width is
   declared in ONE place rather than on each block (the drift CLAUDE.md warns about). */
.auth{padding:56px 0 72px}
.auth-col{max-width:440px;margin-top:24px}
.auth-form{margin-top:4px}
.auth-form .cta{width:100%;text-align:center}
/* Reserved space: the error fills in on a failed attempt and must not shove the form down when it
   does — same rule as .row-status and .tier-nudge. */
.auth-error{min-height:1.4rem;color:var(--red);font-size:.9rem;max-width:46ch}
.auth-error:empty{margin:0}
/* Which account the remaining steps belong to, once the email step is behind us. */
.auth-who{font-family:var(--mono);font-size:.88rem;color:var(--moss);margin-bottom:4px}
.auth-alt{margin-top:18px;font-size:.88rem;color:var(--moss);max-width:46ch}
.auth-method{margin-top:26px;padding-top:20px;border-top:1px solid var(--mist)}
.auth-method:first-of-type{border-top:none;padding-top:0}
.auth-method .cta,.auth-method .cta-secondary{margin-top:14px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:26px 0 18px;color:var(--moss);
  font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--mist)}
.auth-idps{display:flex;flex-direction:column;gap:10px}
.auth-idps .cta-secondary{text-align:center}
/* The last-chance login (intent #194). Ordinary weight normally; when the email turns out to have
   an account, signing in IS the right action and it takes the card treatment to say so. */
.auth-lastchance{font-size:.9rem;color:var(--moss);margin-bottom:20px}
.auth-lastchance.is-urgent{background:var(--card);border:1px solid var(--red);border-radius:12px;
  padding:14px 16px;color:var(--ink)}
.auth-secret{font-size:1.05rem;letter-spacing:.12em;word-break:break-all;background:var(--card);
  border:1px solid var(--mist);border-radius:7px;padding:10px 12px;margin:10px 0}
/* A genuine secondary action, not a button pretending to be a link — skipping two-factor and
   requesting a reset are both legitimate choices, just not the promoted ones. */
.auth-skip{background:none;border:none;padding:0;margin-top:14px;font-family:var(--mono);
  font-size:.8rem;color:var(--moss);text-decoration:underline;cursor:pointer}
.cred-list{list-style:none;margin:0 0 16px;padding:0}
.cred-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--mist);border-radius:10px;padding:10px 14px;margin-top:8px;background:var(--paper)}
.cred-row form{margin:0}
.cred-remove{background:none;border:none;padding:0;font-family:var(--mono);font-size:.78rem;
  color:var(--red);text-decoration:underline;cursor:pointer}
.cred-remove:disabled{color:var(--moss);text-decoration:none;cursor:not-allowed}
.cred-add{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.cred-add label{flex:1;min-width:180px;margin-top:0}
/* Nav greeting. Mono like every other label in the nav, and muted: it identifies who is signed in,
   it is not a link and must not read as one. */
.nav-greeting{font-family:var(--mono);font-size:.82rem;color:var(--moss)}
@media(max-width:640px){.nav-greeting{display:none}}

/* ---------- nav account toolbar + restored price overview ---------- */
/* The account side is its own group so it reads as "who you are", not more site navigation. */
.nav-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
/* The wordmark needs room: at 26px gap the links read as part of the brand rather than as
   navigation beside it. */
.nav-links{margin-right:auto;margin-left:44px}
@media(max-width:820px){.nav-links{margin-left:22px}}
/* Buttons-as-labels: mono, 8px radius per the radii-by-role rule. Outlined rather than filled —
   several equal actions, none of them the promoted one. */
.nav-tool{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.78rem;
  font-weight:600;color:var(--ink);text-decoration:none;border:1.5px solid var(--mist);
  border-radius:8px;padding:7px 11px;white-space:nowrap}
.nav-tool:hover{border-color:var(--ink);background:var(--card)}
/* Current page, same accent the nav-links underline uses so both markers read as one idea. Colour
   and weight are NOT set here: .nav-tool is already --ink at 600, so setting them again would be a
   rule that looks like styling and changes nothing. Border-color only — hover owns --ink, this owns
   --red, and the 1.5px width is untouched so nothing reflows. */
.nav-tool[aria-current=page]{border-color:var(--red)}
/* Icons inherit currentColor, so they follow the palette and the hover state with no extra rules. */
.nav-tool svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Narrow: keep the icons, drop the words. The row stays usable instead of wrapping onto three
   lines, and every action is still reachable — which a hidden menu would not be. */
@media(max-width:820px){
  .nav-tool span{display:none}
  .nav-tool{padding:7px 9px}
}

/* Price overview (restored from the marketing page). Card + comparison side by side on a wide
   screen, stacked on a narrow one. */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;
  align-items:start;margin-top:28px}
.price-card{border:1px solid var(--mist);border-radius:12px;background:var(--card);padding:22px}
.pc-amount{font-size:1.9rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.pc-amount small{display:block;margin-top:6px;font-size:.82rem;font-weight:500;color:var(--moss);
  letter-spacing:0;max-width:46ch}
.price-card ul{list-style:none;margin:18px 0 0;padding:0}
.price-card li{position:relative;padding-left:22px;margin-top:9px;font-size:.92rem;max-width:46ch}
.price-card li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:6px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.compare table{width:100%;border-collapse:collapse;font-size:.9rem}
.compare th{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--moss);text-align:left;padding-bottom:8px;
  border-bottom:1px solid var(--mist)}
.compare td{padding:10px 0;border-bottom:1px solid var(--mist)}
.compare td+td,.compare th+th{text-align:right}
/* Our own row carries the emphasis — the table exists to make this line obvious. */
.compare .us td{font-weight:700;color:var(--ink)}
.compare .us td:first-child{color:var(--red)}
.compare-note{margin-top:12px;font-size:.8rem;color:var(--moss);max-width:52ch}
.tier-heading{margin-top:44px;font-size:1.15rem;font-weight:700;letter-spacing:-0.02em;max-width:24ch}
@media(max-width:860px){.price-grid{grid-template-columns:1fr;gap:24px}}

/* --- Registrant-handle (plan #323 unit 5) -------------------------------------------------------
   The ONE handle component, rendered inside the order form on /bestil and standalone on /panel. Both
   surfaces get these rules, which is the point: two stylesheets for one component is how the two
   drift apart visually even when the markup is shared.

   `.note` is given a base rule HERE because it never had one — the class is used on /bestil
   (.cvr-note) and read as existing, but only `.status .note`, `.dns-form .note` and
   `.dns-elsewhere .note` were ever defined, so a supporting note outside those three containers has
   been rendering at the browser's default paragraph size. The scoped rules are more specific and
   keep winning where they set a property. */
.note{margin-top:10px;font-size:.9rem;color:var(--moss);max-width:56ch}

.handle-block{max-width:640px}
.handle-question{margin-top:4px;font-size:1.05rem;color:var(--ink);max-width:46ch}
/* The handle itself, shown plainly — an identifier, so mono, like every other piece of data here. */
.handle-current{margin-top:10px}
.handle-current code{font-family:var(--mono);font-size:1rem;color:var(--ink);background:var(--card);
  border:1px solid var(--mist);border-radius:7px;padding:6px 10px;display:inline-block}
/* List rows: 10px per the radii-by-role rule. */
.handle-domains{list-style:none;margin:8px 0 0;padding:0}
.handle-domains li{font-family:var(--mono);font-size:.88rem;color:var(--ink);background:var(--card);
  border:1px solid var(--mist);border-radius:10px;padding:7px 11px;margin-top:6px}
/* Domains under a DIFFERENT handle. Distinguished from the list above, because reading the two as
   one list is exactly the wrong conclusion — those domains stay where they are. */
.handle-elsewhere{color:var(--red-dark)}

/* A fieldset because a radio group IS one semantically — but stripped of the card styling the
   global `fieldset` rule gives it, or checkout would render a card inside a card. */
.handle-choice{margin-top:16px;border:none;border-radius:0;background:none;padding:0}
.handle-heading{margin:0 0 4px;font-size:1.05rem;font-weight:700;letter-spacing:-0.01em;max-width:24ch}
.handle-option{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink);
  cursor:pointer;margin-top:12px}
/* Radio inputs are OUTSIDE the enumerated input rule above and would otherwise render as browser
   defaults beside styled fields — the same gap that left every password box unstyled through plan
   #49. Sized and coloured to match .consent's checkbox. */
.handle-option input[type=radio]{flex:0 0 18px;width:18px;height:18px;margin-top:2px;
  accent-color:var(--red)}
.handle-fields{margin-top:10px;padding-left:28px}
/* Reserved height, so the layout is identical whether or not a verification has failed. */
.handle-status{min-height:1.15rem;color:var(--red-dark)}
.handle-block .cta-secondary{margin-top:16px;display:inline-block}
@media(max-width:860px){.handle-fields{padding-left:0}}