/* Public document page, bookmark/task toggles, task detail overrides, awareness wizard dialog, onboarding form/document styling.
   Split out of theme.css (original lines 6557-7107) — 2026-08-18,
   CSS @layer restructuring step 2 (Basecamp "Fra Fizzy-gjennomgang:
   CSS-arkitektur"). Numeric filename prefix controls load order (see
   app/helpers/application_helper.rb#theme_stylesheet_link_tag) —
   files are concatenated in this exact original order, so no cascade
   tie-break changes. */
@layer overrides {
/* The public, unauthenticated document page (PublicDocumentsController) —
   deliberately its own small, self-contained block since this page has
   none of the app's usual chrome (.page-frame/.page-header etc.) to
   inherit spacing/width conventions from. Meant to be embeddable in an
   <iframe> on a customer's own site, so the content column stays
   comfortably narrow and centered rather than assuming full-viewport
   control the way the rest of the app's pages do. */
.public-document-page {
    background: var(--background-color);
    min-height: 100vh;
}

.public-document {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.public-document__title {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-6);
}

/* Torleiv, 2026-08-20 (#10221637345): "tydelig lenke tilbake til der den
   kom fra" — this page has no other navigation at all (see the block
   comment above), so the link has to stand on its own rather than
   sitting inside a header bar this page doesn't have. */
.public-document__back-link {
    display: inline-block;
    margin-bottom: var(--space-4);
    font-size: var(--text-size-sm, 0.85rem);
    /* --text-500 sto her til 08.10.2026 og ga 2,36:1 i lyst tema og
       2,98:1 i mørkt, mot kravet 4,5:1 for tekst på 13,6px. Den eneste
       navigasjonen sida har, på den eneste flaten en utenforstående ser,
       og ingen test målte den før den offentlige sida kom med i
       text_contrast_test. --text-700 er det første trinnet som består
       begge temaer. */
    color: var(--text-700, #444);
}

/* Den daterte merknaden (#10387606685 trinn 4, 08.10.2026). Står over
   teksten fordi den endrer hvordan teksten skal leses — en merknad som
   kom etter innholdet ville nådd leseren for sent.
   Dempet og ikke alarmerende: dette er en opplysning, ikke et varsel.
   Fargene er tokens, ikke egne hex-verdier, så den følger begge temaer
   uten et eget kontrastgulv å passe på. */
.public-document__notice {
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid color-mix(in srgb, var(--text-900) 25%, transparent);
    background: color-mix(in srgb, var(--text-900) 5%, transparent);
    border-radius: 0 var(--card-radius) var(--card-radius) 0;
}

.public-document__notice-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-700);
}

/* Endringsloggen for kunden (#10387606685 trinn 3, 08.10.2026). Står
   under teksten og ikke over: den som åpner lenka skal lese dokumentet,
   ikke historikken. Skilt fra brødteksten med en strek framfor en egen
   boks — sida har ingen kort ellers, og ett ville sett ut som en del av
   innholdet. */
.public-document__versions {
    margin-top: var(--space-8, 3rem);
    padding-top: var(--space-6);
    border-top: 1px solid color-mix(in srgb, var(--text-900) 12%, transparent);
}

.public-document__versions-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.public-document__version-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.public-document__version-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.public-document__version-date {
    font-size: var(--text-size-sm, 0.85rem);
    font-variant-numeric: tabular-nums;
    /* 60 % ga 4,32:1 — under kravet på 4,5, og nær nok til at ingen ser
       det uten å måle. 70 % består begge temaer med margin. */
    color: color-mix(in srgb, var(--text-900) 70%, transparent);
}

/* Merket sier HVA slags endring det er, og de tre betyr ulike ting for
   kunden: en rettelse krever ingenting av dem, en ny underleverandør gir
   innsigelsesrett, og en vesentlig endring gir frist.
   Fargene kommer fra .ui-badge[data-color] og er ikke funnet opp her —
   de er alt løst i begge temaer (02_controls_and_compliance_overview.css),
   og en egen hex ville hatt sitt eget kontrastgulv å passe på i to
   temaer. Her settes bare størrelsen. */
.public-document__version-kind {
    font-size: 0.7rem;
}

.public-document__version-note {
    margin: var(--space-1, 0.25rem) 0 0;
    font-size: 0.95rem;
}

.public-document__article--not-found {
    text-align: center;
    color: color-mix(in srgb, var(--text-900) 60%, transparent);
}

/* documents/edit_draft.html.erb's own unmissable "this isn't the live
   document" signal — sitting above the whole page rather than folded
   into .document-page-header so it can't be mistaken for part of the
   title row itself. */
.document-draft-banner {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: var(--card-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-weight: 600;
}

/* #10382802217, 07.10.2026. Det samme banneret på DOKUMENTSIDA, der det i
   tillegg bærer veien videre — arket er ikke redigerbart mens et utkast
   venter, så lenka er ikke et tilbud, den er utgangen.

   Egen modifikator og ikke en endring i regelen over: den regelen eier
   også utkast-redigeringssidas eget banner, som bare er én tekst. En
   display:flex lagt rett på .document-draft-banner ville endret en side
   denne todoen ikke handler om.

   Mobil først: teksten og lenka står under hverandre til det er plass til
   begge på én linje. Bruddet er satt der teksten faktisk slutter å få
   plass, ikke på en enhetsbredde. */
.document-draft-banner--with-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.document-draft-banner__text {
    margin: 0;
}

/* Understreket, ikke en knapp: den står inne i et banner som allerede er
   gult, og en farget knapp oppå en farget flate ville vært to signaler om
   det samme. Understreking er dessuten det eneste som leses som «dette er
   en lenke» også uten farge. */
.document-draft-banner__link {
    text-decoration: underline;
    white-space: nowrap;
}

/* HVA KLADDEN ENDRER UTENOM TEKSTEN (08.10.2026, via Stomn #2). Torleiv
   så ikke metafeltene når han leste gjennom, og visste dermed ikke hva
   som faktisk publiseres sammen med teksten.

   IKKE GUL. Banneret over er varselet — «her ligger noe uferdig» — og
   denne er opplysningen som følger det. To gule flater etter hverandre
   ville gjort varselet til bakgrunn. Nøytral boks, og fargen er spart
   til det som faktisk krever oppmerksomhet.

   Mobil først: etiketten over verdiene til det er plass på én linje.
   Bruddet er satt der de tre delene slutter å få plass ved siden av
   hverandre, ikke på en enhetsbredde. */
.document-draft-changes {
    border: 1px solid var(--ui-200, rgba(0, 0, 0, 0.1));
    border-radius: var(--card-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.document-draft-changes__title {
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

.document-draft-changes__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.document-draft-changes__list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
}

.document-draft-changes__label {
    flex-basis: 100%;
    font-weight: 600;
}

/* Den gamle verdien er dempet og gjennomstreket: den SKAL leses som noe
   som går bort. Gjennomstreking og ikke bare farge, så forskjellen også
   finnes for den som ikke skiller fargene. */
.document-draft-changes__from {
    color: var(--text-600, #666);
    text-decoration: line-through;
}

.document-draft-changes__arrow {
    color: var(--text-600, #666);
}

/* DEN NYE VERDIEN BÆRER DEN GULE TONEN (08.10.2026, #10387653507 punkt 2).
   Torleiv: «samme måte som når noe er redigert i et dokument før det er
   lagret … uten farge skiller de seg ikke fra resten av sida.»

   Nøyaktig samme rgba(234, 179, 8, 0.1) som .click-to-edit--dirty, og
   av samme grunn: brukeren kjenner den alt fra teksten, og signalet
   betyr det samme — dette er endret og ennå ikke publisert. En egen
   nyanse her ville lært ham et nytt signal for et budskap han har.

   Tonen står fast i begge tema (den er en status, ikke en flate); bare
   tekstfargen følger temaet. Fet skrift i tillegg, så forskjellen også
   finnes i gråtoner — samme tanke som gjennomstrekingen over. */
.document-draft-changes__to {
    font-weight: 600;
    background: rgba(234, 179, 8, 0.1);
    color: var(--text-900);
    padding: 0.1em 0.35em;
    border-radius: var(--rounded-sm, 0.25rem);
}

@media (min-width: 40rem) {
    .document-draft-changes__label {
        flex-basis: auto;
        min-width: 14rem;
    }
}


@media (min-width: 40rem) {
    .document-draft-banner--with-action {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
    }
}

/* people/_profile.html.erb — reuses .controls-detail/.controls-detail__grid
   wholesale (same key-value card language as Control/Risk/Deviation and
   the document metadata card) for the contact-info fields; this is the
   one bit that section doesn't already have a slot for. */
.person-profile-card__header {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

/* Bookmark star toggle (bookmarks/_toggle.html.erb) — dropped inline into
   page_title_header's own action row/documents' toolbar, so it needs to
   sit at the same height/scale as its siblings rather than a full
   .ui-button. Always visible (unlike .toc-list__folder-delete's
   hover-reveal) since bookmarked-or-not is itself useful information at
   rest, not just an editing affordance.

   Torleiv, 2026-08-13: the old icon-only, color-only distinction between
   states ("Veldig lite forskjell på av/på") wasn't enough at a glance —
   pointed at Basecamp's own bookmark toggle as the reference: a visible
   text label next to the icon, and the active state built as a solid,
   differently-SHAPED pill rather than just a recolored icon on the same
   plain background. Rebuilt on that shape: a compact rounded-pill button
   (fully rounded, not the app's standard --card-radius, since a pill this
   small reads as a plain rectangle with anything less) with its own
   border in the inactive state and a solid signal-color fill in the
   active one — so the two states differ in silhouette, not just hue,
   even before the star glyph or label text is read. */
.bookmark-toggle__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--text-900) 16%, transparent);
    /* KONTRAST (#10371227376, 05.10.2026). 55 % ga 3,71:1 i lyst tema,
       under kravet på 4,5:1 for 13,6px. 70 % er samme trinn
       .section-toggle-link fikk samme dag, målt til 6,31 der — de to er
       den samme slags dempede knapp og skal ikke ha hvert sitt tall. */
    color: color-mix(in srgb, var(--text-900) 70%, transparent);
    font-size: var(--text-size-sm);
    font-weight: 600;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Hover må fortsatt ØKE kontrasten merkbart. Den sto på 80 %, og med
   hvilen hevet fra 55 til 70 ville spranget nesten forsvunnet. */
.bookmark-toggle__button:hover {
    border-color: color-mix(in srgb, var(--text-900) 30%, transparent);
    color: var(--text-900);
}

/* Signal color, not the more conventional bookmark-star yellow (Torleiv,
   2026-08-10, questioning the yellow) — this app deliberately settled on
   one single accent color for "this is active/preferred" (see the button
   hierarchy redesign earlier tonight); a standalone yellow here would
   reintroduce exactly the multi-accent-color fragmentation that redesign
   moved away from. Solid fill (not just a recolored border/icon) is what
   actually fixes the "too subtle" report — white text/icon on a filled
   background reads as a clearly different control at a glance, the same
   way Basecamp's own filled "Remove" pill does next to its outline
   "Bookmark" one. */
/* Basecamp #10273056977 (dark mode): same --signal-color/var(--solid-text-color)
   fix as .ghost.solid (05_buttons_and_rich_content_editor.css). */
.bookmark-toggle__button--active,
.bookmark-toggle__button--active:hover {
    background: var(--signal-color);
    border-color: var(--signal-color);
    color: var(--solid-text-color);
}

/* documents/_toolbar.html.erb's language-pair link (Torleiv, 2026-08-13,
   "Dokumenter på to språk") — same pill shape as .bookmark-toggle__button
   above, minus the active/inactive state since this is a plain navigation
   link, not a toggle: there's nothing to turn on or off, only "go to the
   other language version" when one exists. */
.language-pair-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--text-900) 16%, transparent);
    color: color-mix(in srgb, var(--text-900) 55%, transparent);
    font-size: var(--text-size-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.language-pair-link:hover {
    border-color: color-mix(in srgb, var(--text-900) 30%, transparent);
    color: color-mix(in srgb, var(--text-900) 80%, transparent);
}

/* tasks/show.html.erb's completion toggle (Torleiv, 2026-08-13,
   "Todo-layout" — "Bli inspirert av Basecamp"): same pill-toggle shape
   .bookmark-toggle__button above uses, for the same reason — Basecamp's
   own to-do page leads with an explicit "Mark as complete" pill, not a
   bare checkbox glyph. The real <input type="checkbox"> is visually
   hidden (still focusable/keyboard-operable — sr-only-style clipping,
   not display:none, which would break tabbing to it); the styled pill is
   its <label>, and the :checked sibling selector below swaps both the
   pill's own fill AND which of the two text+icon spans inside it shows —
   pure CSS, no JS state to keep in sync, since the checkbox's checked
   attribute already reflects the server-rendered truth on every load. */
/* Used to float as its own centered block between the page title and the
   metadata card (needing its own text-align/margin here to do that) —
   now lives inside .controls-detail__header--end instead (Torleiv,
   2026-08-20, "Style denne siden at den er konsistent med stil på andre
   sider"), which already handles alignment and spacing, so this class
   itself no longer needs to. */

.task-complete-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.task-complete-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--text-900) 16%, transparent);
    color: color-mix(in srgb, var(--text-900) 55%, transparent);
    font-size: var(--text-size-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.task-complete-toggle__label:hover {
    border-color: color-mix(in srgb, var(--text-900) 30%, transparent);
    color: color-mix(in srgb, var(--text-900) 80%, transparent);
}

.task-complete-toggle__input:focus-visible ~ .task-complete-toggle__label {
    outline: 2px solid var(--signal-color);
    outline-offset: 2px;
}

.task-complete-toggle__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.task-complete-toggle__state--complete {
    display: none;
}

/* Basecamp #10273056977 (dark mode): same --signal-color/var(--solid-text-color)
   fix as .ghost.solid (05_buttons_and_rich_content_editor.css). */
.task-complete-toggle__input:checked ~ .task-complete-toggle__label {
    background: var(--signal-color);
    border-color: var(--signal-color);
    color: var(--solid-text-color);
}

.task-complete-toggle__input:checked ~ .task-complete-toggle__label .task-complete-toggle__state--incomplete {
    display: none;
}

.task-complete-toggle__input:checked ~ .task-complete-toggle__label .task-complete-toggle__state--complete {
    display: inline-flex;
}

/* Same technique .document-metadata already established for reskinning
   .controls-detail's shared __grid/__item/__label/__value structure in
   one specific context (see the comment there) — Basecamp's own to-do
   page renders each field as a plain "label: value" row with no per-field
   box at all, much lighter than the boxed-pill .controls-detail__item's
   base rule gives every field on Control/Risk/Deviation. Strips that
   chrome back to a plain row here, separated by a hairline divider
   instead of a background/border per item, without touching the shared
   rule those other pages still rely on. */
.task-detail .controls-detail__item {
    padding: var(--space-3) 0;
    border: none;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text-900) 8%, transparent);
}

.task-detail .controls-detail__item:last-child {
    border-bottom: none;
}

/* documents/_toolbar.html.erb's "•••" menu — the destructive action, set
   apart by color alone (same convention as .person-admin-actions__item--
   danger and .system-settings__danger-action), never by hiding it behind
   an extra dialog or otherwise making it harder to reach. */
.header-user-menu__item--danger {
    color: var(--danger-color);
}

/* tasks/_awareness_wizard.html.erb — the "Bevisstgjøringsgjennomgang"
   compliance task's own multi-step content, opened from a trigger button
   into a <dialog> (Torleiv, 2026-08-12: "legg kurset i modal... større
   skrift, mer pedagogisk og oppmuntrende og lettlest tekst" — was
   previously an always-open card directly on the page). Own classes
   rather than reusing .integrations-card__setup-steps: that one's
   list-style is `decimal` for an install/setup SEQUENCE, this one is a
   plain tip list with no inherent order within a step. */
.awareness-wizard__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Own layout (not .app-confirm-dialog) — a confirmation dialog's 24rem max
   width and standard body text are too cramped for a multi-paragraph
   lesson step with a tip list; this one is deliberately wider and roomier. */
/* #10246995725 (2026-08-28): inset+margin:auto instead of top/left/
   transform — see .org-chart-box-dialog's own comment (11_org_chart.css)
   for the full Chromium-151-regression reasoning. */
.awareness-wizard-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--dialog-shadow);
    /* dvw/dvh, not vw/vh (15.09.2026): a fixed element sized in vw is wider
       than the visible screen on mobile Safari — see 01_…css's own note. */
    width: calc(100dvw - var(--space-6) * 2);
    max-width: 40rem;
    max-height: calc(100dvh - var(--space-6) * 2);
    overflow-y: auto;
}

.awareness-wizard-dialog::backdrop {
    background: var(--dialog-backdrop);
}

.awareness-wizard {
    padding: var(--space-6);
}

.awareness-wizard__step-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Larger and warmer than the app's usual .h3/.workspace-section-title —
   this is meant to read as an encouraging, easy lesson, not a dense
   settings page. */
.awareness-wizard__title {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: var(--space-2) 0 0;
}

.awareness-wizard__lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text-900) 80%, transparent);
    margin-top: var(--space-3);
}

.awareness-wizard__points {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--text-900) 80%, transparent);
}

.awareness-wizard__points li {
    list-style: disc;
}

.awareness-wizard__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* The explicit last-step pointer at the completion checkbox (Torleiv:
   "siste side: Nå er du klar for å krysse av: HER ✅") — set apart from
   the plain lesson text above it so it reads as a distinct call to
   action, not one more tip in the list. */
.awareness-wizard__finish-hint {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--ui-50, #f5f5f5);
    border-radius: var(--card-radius);
    font-size: 1.125rem;
    font-weight: 600;
}

.service-property-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.service-property-suggestions__chip {
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border: var(--card-border);
    border-radius: 999px;
    background: transparent;
    /* Was --text-size-small, a token that doesn't exist anywhere in this
       file (only --text-size-sm does) — silently used the 0.8125rem
       fallback on every render instead of the real design-system size. */
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 75%, transparent);
}

.service-property-suggestions__chip:hover {
    background: color-mix(in srgb, var(--text-900) 4%, transparent);
}

.service-property-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: var(--space-2);
    align-items: start;
    margin-top: var(--space-2);
}

.service-properties-list {
    display: flex;
    flex-direction: column;
}

.service-properties-list__row {
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.6fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--card-border);
}

.service-properties-list__row:last-child {
    border-bottom: none;
}

.service-properties-list__label {
    color: var(--text-500, #666);
    font-size: var(--text-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-properties-list__value {
    color: color-mix(in srgb, var(--text-900) 85%, transparent);
}

.service-property-row__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-top: 1.6rem;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--text-900) 50%, transparent);
    cursor: pointer;
    border-radius: var(--card-radius);
}

.service-property-row__remove:hover {
    background: color-mix(in srgb, var(--text-900) 6%, transparent);
    color: color-mix(in srgb, var(--text-900) 90%, transparent);
}

/* Onboarding's terms-acceptance checkbox/marketing-consent radios (Torleiv,
   2026-08-16: "lett leselig tekst, og relativt 'store' bokser å krysse av
   i... en grønnfarge... litt sånn 'go-følelse' enn grå-blå?"). Deliberately
   scoped to this one form, not a global native-checkbox restyle — #3FB37F
   is the same green auth-methods-list__status-dot--green already uses for
   "done/confirmed", not a new color introduced just for this page.
   align-items: center on the row (not the browser default, which leaves a
   native checkbox sitting slightly low against the text baseline) is what
   actually answers "check horizontal alignment of the checkbox". */
.onboarding-form__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Torleiv, 2026-08-16 ("mer luft her" — between the last checkbox/fieldset
   and the submit button): the .mb utility on whatever comes right before
   the button (a checkbox row, or the marketing-consent fieldset) is only
   10px (sand_ui's --spaceing) — fine as inter-row spacing, too tight as
   the gap before a button asking for a separate, deliberate click. Scoped
   to the submit button itself (not raised generally) so it's correct
   regardless of what precedes it in either step. */
.onboarding-form input[type="submit"] {
    margin-top: var(--space-4);
}

/* Torleiv, 2026-08-16 ("her også mer luft"): the NDA step has no checkbox
   row between the document body and its action — just the sign link
   directly after .onboarding-document's own 10px .mb, which read as even
   tighter than the checkbox case above since there's nothing softening
   the transition from prose to button. Same fix, same reasoning, just a
   different sibling shape (a link, not a form/submit). */
.onboarding-document + .ui-button.solid {
    margin-top: var(--space-4);
}

/* Torleiv, 2026-08-16 ("Mer luft mellom alternativer"): each radio/
   checkbox option is its own sibling row (see onboardings/show.html.erb)
   with no spacing of its own between them — fine for the lone terms
   checkbox, cramped once the marketing-consent fieldset stacks two
   radio rows directly on top of each other. */
.onboarding-form__row + .onboarding-form__row {
    margin-top: var(--space-3);
}

.onboarding-form__check {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    /* Torleiv, 2026-08-23 (#10229909903): was a hardcoded green (#3FB37F)
       that never got the app-wide --signal remap (01_foundation_and_header's
       own comment: every native checkbox is meant to use --signal-color,
       the near-black used everywhere else) — this is the one checkbox in
       the app that had drifted from that. var(--signal), not a bare
       omission, so this stays correct even if a future theme changes
       --signal-color again. */
    accent-color: var(--signal);
}

.onboarding-form__row span {
    font-size: var(--text-size-lg);
}

/* Torleiv, 2026-08-16 ("la tekst i boksen se lik ut, med unntak av
   utheving"): the placeholder document body (18px, .ui-document-rich-
   content's normal site-wide size), the fieldset legend (15px, browser
   UA default) and the checkbox/radio labels (16px, .onboarding-form__row
   span above) were three different sizes in the same box. Normalized to
   the same 16px the labels already used — .onboarding-document is a
   page-scoped class specifically so this doesn't touch
   .ui-document-rich-content's real, larger size everywhere it renders
   an actual document body elsewhere in the app. The bold "MAL —
   erstatt med reelt innhold" lead-in is a <strong> inside the body
   text, not a separate rule, so it stays bold at the new size — the
   one deliberate exception this was asked to keep. */
.onboarding-document {
    font-size: var(--text-size-lg);
}

/* Torleiv, 2026-08-16 ("Sjekk overskrifter; mer luft over, mindre luft
   under"): the Terms/Privacy Policy/NDA bodies rendered here are plain
   <h3>-per-section HTML (see Workspace::DEFAULT_TERMS_BODY etc.) with no
   heading-specific rule of its own anywhere else in this file — outside
   .document-sheet/.company-section, an <h3> just gets the browser's own
   symmetric margin-block default, which reads as too little separation
   from the PRECEDING section and too much before the heading's own
   first paragraph. Asymmetric margins fix both at once: more air above
   (so a new numbered section clearly starts) less below (so the heading
   reads as attached to the text under it, not floating between the two). */
.onboarding-document h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
}

.onboarding-document h3:first-child {
    margin-top: 0;
}

.onboarding-form legend {
    font-size: var(--text-size-lg);
    margin-bottom: var(--space-2);
}

/* Basecamp #10273132408: replaced the two ghost/solid pill buttons (see
   git history for that button-sizing reasoning, now moot) with plain text.
   The already-chosen language is inert text; the other stays a real
   button_to (a PATCH, not navigation) styled to read as a link. */
.onboarding-language-choice__current {
    font-weight: 700;
}

/* Torleiv, 2026-08-16 ("Til godkjenning - tilbake til justering"): the
   rejection notice in shared/_request_approval.html.erb — a left accent
   border in the same blue the :rejected approval_badge already uses
   (application_helper.rb#APPROVAL_STATUS_COLORS), so the two visibly
   belong to the same concept without introducing a second new color. */
.rejection-notice {
    border-left: 3px solid var(--blue-600);
}

/* #10322828792, opprinnelig: ingen ramme og ingen aksentfarge — «dette er
   ikke en status som skal ta oppmerksomhet, bare veien videre».

   #10342588987, 25.09.2026: snudd. Torleiv, med skjermbilde: dette ER det
   viktigste på sida — du kan ikke godkjenne noe uten å ha lest det — men
   så ut som en fotnote ved siden av knappen. Samme aksent-boks-mønster
   som .task-context-banner/.rejection-notice (venstre kant, .p-sm i
   viewet for padding/bakgrunn), gult som approval_badge sin egen
   pending_approval-farge — dette ER akkurat den ventende tilstanden,
   ikke en annen. */
.task-approval-subject {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    border-left: 3px solid var(--amber-600);
    margin-bottom: var(--space-4);
}

.task-approval-subject__link {
    font-weight: 600;
    font-size: var(--text-size-lg);
}

.task-approval-subject__explanation {
    color: var(--text-500);
    font-size: var(--text-size-sm);
}

/* Torleiv, 2026-08-20 ("A" — documents/_task_context_banner.html.erb):
   shown when a document is opened via a task's "Referanse" link, so
   reading it and completing the task can happen without hunting back
   through the task list. Green rather than .rejection-notice's blue —
   a different concept (a nudge forward, not a rejected-approval status)
   deserves its own accent, not a borrowed one. */
.task-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    border-left: 3px solid var(--green-600);
    margin-bottom: var(--space-4);
}

.task-context-banner__link {
    white-space: nowrap;
    font-weight: 600;
}

} /* @layer overrides */

/* FORHÅNDSVISNING AV TRUST-SENTERET (#10344248834, 05.10.2026).

   Sju kolonner er bredt, og tabellen skal ikke tvinge resten av sida
   sidelengs. Rullingen bor på beholderen, ikke på sida. */
.trust-preview__scroll {
    overflow-x: auto;
}

.trust-preview__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-size-sm);
}

.trust-preview__table th,
.trust-preview__table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

/* OVERSKRIFTENE BRYTES. Jeg satte først white-space: nowrap her, og det
   var det som gjorde at kolonnen sida er laget for havnet utenfor
   synsfeltet: «Personopplysninger» og «Databehandleravtale» tvang hver
   sin kolonne til 180 px på overskriften alene, mens innholdet under er
   «Ja» og «Inngått».

   Målt: tabellen gikk fra 1124 px til å få plass i beholderen på 904. */
.trust-preview__table th {
    font-weight: 600;
    /* «Personopplysninger» og «Databehandleravtale» er lange ENKELTORD, og
       uten dette tar de 177 og 186 px på overskriften alene — mens
       innholdet under er «Ja» og «Inngått». De to kolonnene alene sto for
       hele overflyten som dyttet overføringsgrunnlaget ut av syne.

       Sida ligger i appens lesespalte (.page-body, maks 1040 px), og den
       grensa gjelder hver eneste side i Stomn. Å flytte den for én tabell
       er feil sted å gripe inn; å la overskriftene brytes er riktig sted. */
    /* MYK BINDESTREK I SELVE TEKSTEN, ikke hyphens: auto. Den siste
       krever at nettleseren har en orddelingsordbok for språket, og i
       headless Chrome finnes den ikke — målt: null effekt, tabellen ble
       stående 139 px for bred.

       overflow-wrap: anywhere løste plassen, men brøt hvor som helst:
       «Personopplysninge / r» med én bokstav på egen linje. Bruddpunktet
       hører til ordet, ikke til stilarket, så det står i språkfila der
       noen som kan språket kan flytte det. */
}

/* Den som er KLAR, men ikke ute, tones ned — ikke fordi den er mindre
   viktig, men fordi raden ikke står noe sted ennå. Merket i første
   kolonne bærer budskapet; dette er bare en gjentakelse av det i form,
   så det også leses i gråtoner. */
.trust-preview__row--ready td {
    opacity: 0.72;
}

/* KOLONNEBREDDER. Første utgave lot «Hvor data behandles» ta all plassen
   den ville, og da havnet Overføringsgrunnlag — kolonnen hele sida ble
   laget for — utenfor synsfeltet bak en rullelinje. En forhåndsvisning
   der det nye er det man ikke ser, er ikke en forhåndsvisning.

   Målt i nettleser: med disse grensene får alle sju kolonner plass på
   1400 px, og tabellen ruller fortsatt når vinduet er smalere. */
.trust-preview__table td:nth-child(3),
.trust-preview__table td:nth-child(4),
.trust-preview__table td:nth-child(7) {
    max-width: 22ch;
}

/* Celle 5 og 6 er «Ja/Nei» og «Inngått» — korte nok i seg selv. Hadde de
   hatt nowrap, ville de arvet overskriftens bredde igjen. */

/* DET OFFENTLIGE TRUST-SENTERET (#10393087755, 11.10.2026).
   Torleiv: «ordne offentlig side, der en kan velge tjeneste.»

   Arver bredden og luften fra .public-document — sida leses av de samme
   kundene, ofte rett etter at de har fulgt en lenke derfra, og to ulike
   mål ville lest som to ulike nettsteder.

   MERKEVARE SIDEN 14.10.2026 (#10393087755). Tre tokens, satt inline på
   artikkelen av malen, og BARE når leietakeren har satt dem. Er de ikke
   satt, finnes reglene under heller ikke — da arves alt som før, og en
   uprofilert side ser ut nøyaktig som den gjorde.

   Fargene står på .is-branded og ikke på :root: en leietakerfarge skal
   ikke kunne nå banneret over, som sier noe om Stomn og ikke om dem.

   Ingen !important noe sted. Trenger en regel her å vinne, er det et
   tegn på at den kjemper mot noe den ikke burde — og !important snur
   lagrekkefølgen, som denne fila har betalt for før. */
.trust-public.is-branded {
    background: var(--brand-background);
    color: var(--brand-text);
    padding: var(--space-6);
    border-radius: var(--card-radius);
}

.trust-public.is-branded a {
    color: var(--brand-accent, var(--brand-text));
}

/* Ledeteksten demper seg mot SIN EGEN tekstfarge, ikke mot temaets.
   Uten dette ville en profilert side fått en ledetekst i temaets
   gråtone på leietakerens bakgrunn — altså nøyaktig den kontrastfeilen
   valideringen passer på ikke skal kunne oppstå. */
.trust-public.is-branded .trust-public__lead {
    color: color-mix(in srgb, var(--brand-text) 72%, transparent);
}

/* Logoen er et brevhode, ikke en illustrasjon: fast makshøyde så en
   bred og en smal logo tar like mye plass i oppsettet. width: auto
   eksplisitt, ellers strekker en SVG uten egne mål seg til full bredde. */
.trust-public__logo {
    display: block;
    max-height: 48px;
    width: auto;
    max-width: 240px;
    margin-bottom: var(--space-3);
}

/* Avsenderen står UNDER tittelen og er dempet: produktet har
   hovedplassen, selskapet rammer inn. Begge skal leses, men ikke
   samtidig. */
.trust-public__sender {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.trust-public__header {
    margin-bottom: var(--space-6);
}

.trust-public__title {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.trust-public__lead {
    margin: 0;
    color: color-mix(in srgb, var(--text-900) 72%, transparent);
}

/* Velgeren står på én linje på skrivebordet og brytes på mobil — tre
   kontroller ved siden av hverandre blir for trangt under 420 px. */
.trust-public__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.trust-public__filter-label {
    font-weight: 600;
}

.trust-public__filter-select {
    width: auto;
    min-width: 12rem;
}

.trust-public__filter-active {
    margin: 0 0 var(--space-5);
    color: color-mix(in srgb, var(--text-900) 72%, transparent);
}

.trust-public__section {
    margin-bottom: var(--space-6);
}

.trust-public__heading {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-3);
}

.trust-public__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.trust-public__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.trust-public__name {
    font-weight: 600;
}

.trust-public__link {
    font-weight: 600;
    color: var(--signal-color, var(--text-900));
}

/* Støttelinjene er tonet ned, men ikke under lesbarhet: dette er
   opplysninger en kunde faktisk vurderer oss på. */
.trust-public__meta,
.trust-public__purpose,
.trust-public__empty {
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 70%, transparent);
}

.trust-public__empty {
    margin: 0;
}

/* BANNERET NÅR TRUST-SIDA ER STENGT (#10393087755, 13.10.2026).
   Torleiv: «legg et banner helt i toppen ... slik at vi ser at den ikke
   er public.»

   Full bredde og over innholdet, ikke en diskré stripe inne i artikkelen:
   hele poenget er at den som åpner lenken for å se hva KUNDER ser, ikke
   skal rekke å trekke feil slutning først. Gul og ikke rød — dette er en
   tilstand noen har valgt, ikke en feil. */
/* FULL SKJERMBREDDE (Torleiv 13.10.2026). Sida ligger i en sentrert
   kolonne på 720 px; banneret skal ut til kanten likevel.

   calc(50% - 50vw) er det som gjør det fra innsiden av en sentrert
   forelder: marginen trekker elementet ut til viewportens kant uansett
   hvor bred kolonnen er. 100vw og ikke 100% — prosent ville vært
   kolonnens bredde, altså ingen endring. */
.trust-public-banner {
    display: block;
    margin: calc(-1 * var(--space-6)) calc(50% - 50vw) var(--space-6);
    width: 100vw;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--warning-color, #f5a623) 18%, var(--background-color));
    border-bottom: 2px solid color-mix(in srgb, var(--warning-color, #f5a623) 55%, transparent);
}

/* Bakgrunnen går helt ut, teksten gjør det ikke: en linje over hele en
   bred skjerm er uleselig. */
.trust-public-banner__inner {
    max-width: 720px;
    margin: 0 auto;
}

/* LENKEVELGEREN (#10398652829). Tjenesten ligger i stien nå, så hvert
   valg er en adresse — derfor lenker og ikke et skjema. Det aktive
   valget markeres med vekt og en understrek, ikke med farge alene. */
.trust-public__filter-choice {
    padding: 0.15em 0;
    border-bottom: 2px solid transparent;
    color: inherit;
}

.trust-public__filter-choice.is-active {
    font-weight: 700;
    border-bottom-color: currentColor;
}

.trust-public__filter-note {
    margin: 0 0 var(--space-4);
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 70%, transparent);
}

.trust-public-banner__title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-size-sm);
}

.trust-public-banner__text {
    display: block;
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 82%, transparent);
}

/* Tilbakelenka på undersida (#10398652829). Over tittelen, ikke under:
   den som er kommet hit ved et uhell skal se veien ut før han begynner
   å lese. */
.trust-public__back {
    margin: 0 0 var(--space-2);
    font-size: var(--text-size-sm);
}

/* MERKEVAREFELTENE PÅ INNSTILLINGSSIDA (#10393087755, 14.10.2026).
   Tre fargevelgere på rad, som brytes når det blir trangt — de hører
   sammen og leses som én innstilling, ikke tre. */
.trust-brand-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.trust-brand-fields .ui-input {
    display: block;
    min-width: 0;
    width: 4rem;
    height: 2.25rem;
    padding: 2px;
}

/* Den offentlige logoen vises her og ikke bare knappen: ellers er det
   umulig å svare på «hvilken logo ser kundene våre?» uten å åpne
   portalen. Rammen gjør at en hvit logo på hvit bakgrunn fortsatt har
   en kant å leses mot. */
.trust-brand-logo-preview {
    display: block;
    max-height: 48px;
    width: auto;
    max-width: 240px;
    padding: var(--space-2);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}


/* «Rettet etter siste godkjenning» (Torleivs valg 16.10.2026).

   NØYTRAL, OG DET ER POENGET. Den gule over bærer alt ett budskap:
   «her ligger et upublisert utkast». Lot denne seg låne den fargen,
   ville to ulike tilstander sett like ut — og de er motsetninger:
   den gule sier at teksten du ser IKKE er den nye, denne sier at den
   er det, men at godkjenneren ikke har sett den ennå.

   Stomn #2 om ordlyden: merket skal ikke høres ut som en advarsel.
   Teksten er jo riktig; den er bare ikke bekreftet. Derfor ramme og
   dempet skrift framfor farge. --card-bg og --border-color er de
   samme tokenene resten av appen bruker til et kort, og de følger
   mørk modus av seg selv. */
.document-correction-notice {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.document-correction-notice__title {
    font-weight: 600;
    margin: 0;
}

/* Dempet, men ikke under kontrastgulvet: --text-muted er tokenet som
   er målt i begge temaer. En egen opacity her ville gitt to ulike
   verdier i lys og mørk uten at noen hadde sett den mørke. */
.document-correction-notice__body {
    color: var(--text-muted);
    margin: var(--space-1) 0 0;
}