/* Document TOC sidebar, document metadata card, the "ark" sheet, sticky document title/actions header.
   Split out of theme.css (original lines 1522-2033) — 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 {
/* A single document read/edited on its own, with no dashboard chrome competing
   for attention — matches Basecamp's own document width (wider than
   .workspace-home's card column) rather than a narrow prose column. A real
   flex item at >=1280px now (see .document-layout below) rather than an
   unconditionally self-centering block — margin:0 auto on a flex item
   centers it within whatever space actually remains next to the TOC
   column, which is what makes the document shift over as that column
   grows/shrinks purely via ordinary flex layout, with no JS-computed
   transform involved. */
.document-focus {
    max-width: var(--content-width);
    min-width: 0;
    margin: 0 auto;
    width: 100%;
}

/* Was display:none, with the sidebar living entirely outside this box —
   position:fixed, then position:absolute against .document-layout,
   z-index-stacked to "lie under" .document-sheet's left edge. An overlay
   illusion like that has to be re-derived by hand (exact height, exact
   overlap amount) every time anything else on the page changes shape, and
   broke again each time something did (reported repeatedly the same
   evening: height not matching the sheet, transition jank, and finally
   the panel overlapping straight into the newly-merged metadata card at
   the top of the sheet). A real two-column flex row instead: the TOC
   becomes an ordinary layout column sharing the row with .document-focus,
   sized by flex arithmetic the browser already guarantees is consistent,
   not by a hand-maintained approximation of the document's own height. */
.document-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.document-toc-sidebar {
    display: none;
}

/* 15.09.2026 (UX review, #10306669748): the sidebar's small-screen
   counterpart — a collapsed list above the sheet, gone again at 1280px
   where the sidebar takes over. Rendered before .document-layout, so it
   sits above the sheet rather than in the flex row beside it. */
.document-toc-mobile {
    margin-bottom: var(--space-4);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-size-base);
}

.document-toc-mobile__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    color: var(--text-700);
    list-style: none;
}

.document-toc-mobile__summary::-webkit-details-marker {
    display: none;
}

.document-toc-mobile__list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0 0 var(--space-1);
}

.document-toc-mobile__link {
    display: block;
    padding: var(--space-1) 0;
    color: var(--text-900);
    text-decoration: none;
}

.document-toc-mobile__link--level-3 {
    padding-left: var(--space-4);
}

@media (min-width: 1280px) {
    .document-toc-mobile {
        display: none;
    }
}

@media (min-width: 1280px) {
    /* Single source of truth for both widths, shared (via .document-layout,
       the nearest common ancestor) with the sidebar rule below — keeps
       the collapsed handle and the hover-expanded panel from drifting out
       of sync with each other. */
    .document-layout {
        /* Was 2.75rem — Torleiv found the collapsed handle too small a
           target to reliably notice/hit. Sole source of truth for
           .document-toc-sidebar__handle's own box size too (below), so
           the two can't drift apart. */
        --toc-collapsed-width: 3.25rem;
        /* No more "lying under the sheet" overlap to budget space for, and
           no more asymmetric-1fr-columns math to keep .document-focus
           centered (that job now falls to ordinary flex sizing, see
           .document-focus above) — just a flat cap, shrinking
           proportionally on narrower "large" viewports so the expanded
           panel can never crowd the document column out. */
        --toc-expanded-width: min(320px, 30vw);
    }

    .document-toc-sidebar {
        display: block;
        /* Torleiv, 2026-08-15: this used to GROW on hover (flex-basis/width),
           which pushed .document-focus sideways via ordinary flex reflow —
           "kun hover, ikke fast" — he wants a floating overlay that never
           shifts the document underneath, not a column that widens. Now
           this box always stays at the collapsed width; only its child
           .document-toc-sidebar__content (below) expands, absolutely
           positioned so it lies OVER the document instead of pushing it. */
        flex: 0 0 var(--toc-collapsed-width);
        width: var(--toc-collapsed-width);
        /* Sticks in place while scrolling instead of trying to visually
           span the document's full length — the "lying under the sheet,
           full document height" look is dropped entirely (Torleiv: "funker
           dårlig grafisk... finn en bedre og mer safe løsning"). This is
           now an ordinary sticky sidebar sized to its own content, the
           same pattern .document-page-header already uses just below it,
           and top here matches that header's own sticky offset for
           exactly that reason — clears both real (measured, not guessed)
           heights the whole page already tracks. Also the positioning
           anchor for .document-toc-sidebar__content's overlay below.
           https://developer.mozilla.org/en-US/docs/Web/CSS/position:
           sticky establishes a containing block same as relative would. */
        position: sticky;
        top: calc(var(--page-header-height, 60px) + var(--document-header-height, 0px) + var(--space-6));
        /* Torleiv, 2026-08-16 ("dok-toc må legge seg oppå hovedfeltet"):
           the z-index:95 below was only ever set on the CHILD
           (.document-toc-sidebar__content) — this sticky parent stayed at
           its default z-index:auto, which (confirmed live: an ancestor-less
           .document-sheet is also position:relative, z-index:auto)
           apparently doesn't reliably keep the child's z-index scoped
           above it in every engine. Setting the same z-index on the
           parent too makes it unambiguously establish its own stacking
           context, so the expanded panel actually paints over the
           document instead of the document's own heading/paragraph text
           showing through the right two-thirds of it. */
        z-index: 95;
    }

    /* Collapsed by default to a small square handle (just the list icon,
       see .document-toc-sidebar__handle). */
    .document-toc-sidebar__clip {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
    }

    /* Set by document_toc_sidebar_controller.js right when a heading
       link inside is clicked — beats the plain :hover/:focus-within
       selectors below on specificity alone, no !important needed. Forces
       the collapsed look back even while still hovered/focused (clicking
       a link doesn't move the mouse away, and leaves the link focused —
       neither pseudo-class would naturally clear on its own), removed
       again on the next mouseleave so a fresh hover still opens it
       normally afterward. */
}

/* The at-rest affordance — just the list icon, centered in the same
   square the collapsed sidebar occupies (var(--toc-collapsed-width),
   defined on .document-layout above — same variable, so this can't
   drift out of sync with the sidebar's own collapsed width again).
   Swapping for .document-toc-sidebar__content via display (not
   opacity) avoids reserving blank flex space for whichever one is
   currently hidden. */
.document-toc-sidebar__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--toc-collapsed-width, 2.75rem);
    height: var(--toc-collapsed-width, 2.75rem);
    color: color-mix(in srgb, var(--text-900) 40%, transparent);
}

.document-toc-sidebar:hover .document-toc-sidebar__handle,
.document-toc-sidebar:focus-within .document-toc-sidebar__handle {
    display: none;
}

.document-toc-sidebar.document-toc-sidebar--suppressed:hover .document-toc-sidebar__handle,
.document-toc-sidebar.document-toc-sidebar--suppressed:focus-within .document-toc-sidebar__handle {
    display: flex;
}

/* width matches --toc-expanded-width exactly (not a separate fixed value)
   — the two can't drift out of sync (see .document-toc-sidebar__label
   below for what happened the one time a fixed width here and the box's
   own expanded width disagreed: the label's last letter clipped off).
   Torleiv, 2026-08-15 ("kun hover, ikke fast... legge seg oppå
   hovedseksjonen"): absolutely positioned now (was a growing flex
   column that pushed .document-focus aside) — this floats OVER the
   document instead, anchored to the collapsed handle's own top-left
   (its parent .document-toc-sidebar is the containing block via its
   own position: sticky). The card styling that used to live on the
   parent (.document-toc-sidebar, before this fix) moved here with it,
   since the parent no longer visually changes size or shape at all. */
.document-toc-sidebar__content {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--toc-expanded-width, 320px);
    max-height: calc(100vh - var(--page-header-height, 60px) - var(--document-header-height, 0px) - var(--space-6) - var(--space-4));
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: 0 1px 2px rgba(28, 25, 20, 0.04), 0 8px 24px rgba(28, 25, 20, 0.06);
    /* Torleiv, 2026-08-15 ("dok-toc må ligge øverst"): 10 wasn't enough —
       .document-page-header sits right next to this in the DOM but is
       ITS OWN sticky/stacking context at z-index: 90 (see its own
       comment), so the document title/toolbar row was painting on TOP
       of this overlay instead of the reverse. Above that (but still
       below .page-header's own frozen z-index: 120, so the app-level
       header/search/user icons stay on top of everything, always). */
    z-index: 95;
}

.document-toc-sidebar:hover .document-toc-sidebar__content,
.document-toc-sidebar:focus-within .document-toc-sidebar__content {
    display: block;
}

.document-toc-sidebar.document-toc-sidebar--suppressed:hover .document-toc-sidebar__content,
.document-toc-sidebar.document-toc-sidebar--suppressed:focus-within .document-toc-sidebar__content {
    display: none;
}

/* max-width caps this the same way .document-toc-sidebar__content is
   sized above (both from --toc-expanded-width) — a fixed value here that
   disagreed with the box's real expanded width once clipped this label's
   last letter off at narrower viewports (reported: "I DETTE DOKUMENTE",
   missing the T). Wrapping to two lines instead of relying on clip-
   cropped text needing an exact width match. */
.document-toc-sidebar__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--text-900) 45%, transparent);
    max-width: calc(var(--toc-expanded-width, 320px) - var(--space-4) * 2);
}

.document-toc-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Bumped a couple steps up the type scale (sm → lg) — read noticeably
   smaller/denser than the rest of the app's established text sizes
   (Torleiv, 2026-08-10, screenshot of this sidebar's chapter list). */
.document-toc-sidebar__link {
    display: block;
    padding: var(--space-1) 0;
    font-size: var(--text-size-lg);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

.document-toc-sidebar__link:hover {
    color: inherit;
}

/* A document's own h3s nested under one of its h2s — same reasoning as
   .toc-list__heading-link--level-3: a flat list (h1/h2/h3 all queried
   together, see Document#headings) needs a visibly lighter/more-indented
   treatment to read as a hierarchy instead of one undifferentiated list. */
.document-toc-sidebar__link--level-3 {
    padding-left: var(--space-3);
    color: color-mix(in srgb, var(--text-900) 50%, transparent);
}

/* Eier/Deling/status/versjonshistorikk, nested as the FIRST child inside
   .document-sheet (see documents/show.html.erb) instead of its own
   separate .ui-box card above it — two stacked white cards (this one,
   then the body card right below with no gap of its own) read as two
   separate things stacked with a visible seam, not one document
   (reported). Still reuses .controls-detail's __header/__grid/__item/etc.
   sub-parts — same tile look Control/Risk/Deviation use for their own
   metadata — just overrides the OUTER box look .controls-detail's own
   base rule applies (border/background/padding), since .document-sheet
   right around this already provides that; a bottom divider is enough to
   separate this from the body content below within the same card. */
/* Status/Eier/Deling/versjonshistorikk — was briefly merged straight into
   .document-sheet (2026-08-09 evening) so it wouldn't read as two random
   floating cards with a gap between them. Torleiv corrected that the next
   morning: metadata is deliberately NOT the document's own content and
   should read as a clearly separate THING, not folded into "arket" itself
   (see .ark below) — but the fix for that isn't to go back to two
   disconnected cards either. This sits directly on top of .ark, touching
   it with no gap (margin-bottom: 0, flat bottom corners here / flat top
   corners on .ark right below, via the adjacent-sibling rule under .ark),
   and uses the app's own muted tile background instead of pure white so
   the two zones read as distinct at a glance without a visible seam of
   page background between them — one continuous card, two clearly
   different sections within it. */
/* .document-publishing deler flata (20.10.2026, #10417711151):
   publiseringsvalgene flyttet ut av metadatakortet i sitt eget, og de to
   skal lese som to deler av samme side — ikke som to systemer. Uten
   dette fikk feltene der standardfyllet, og de samme feltene så ulike ut
   på dokumentsida og i kladden. Målt av document_field_backgrounds_test. */
.document-metadata,
.document-publishing {
    background: var(--card-bg-muted);
    border: var(--card-border);
    border-bottom: none;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    padding: var(--space-5);
    margin-bottom: 0;
}

/* .controls-detail__item's own --card-bg-muted fill (its usual look —
   Control/Risk/Deviation nest it inside a WHITE .controls-detail card, so
   the muted tile reads as a step down in tone) would be invisible here:
   .document-metadata itself is now --card-bg-muted, so a tile with the
   identical fill and identical border would only be visible by its
   border line, no color contrast at all. Inverted for this one context —
   white tiles are a step UP from the muted strip around them instead,
   the same "give the tile contrast against its own container" idea, just
   flipped since the container itself is muted here, not white. */
.document-metadata .controls-detail__item,
.document-publishing .controls-detail__item {
    background: var(--card-bg);
}

/* BEKREFTELSESPLANEN (#10389441052, 09.10.2026).
   Torleiv, med skjermbilde: «Denne er ikke til å forstå», og «følg samme
   mønster som leverandør-kort».

   Står etter arket, som et eget kort. Samme flate og kant som
   .document-metadata over, bare uten den flate underkanten — dette
   kortet ligger ikke inntil noe, det står for seg selv. */
.document-confirmation-plan {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-5);
    margin-top: var(--space-5);
}

.document-confirmation-plan__title {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 var(--space-4);
}

/* Feltene ligger på rad når det er plass, under hverandre når det ikke
   er det. gap og ikke margin på hvert felt: to felt som skjules
   vekselvis (dato/ukedag) ville ellers etterlatt en tom luft der det
   skjulte sto. */
.document-confirmation-plan__fields {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.document-confirmation-plan__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}

.document-confirmation-plan__row > div {
    flex: 1 1 12rem;
    min-width: 0;
}

.document-confirmation-plan__repeat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Setningen planen leses tilbake som. Den ER dokumentasjonen av planen
   — se RecurrenceRule — så den skal være lesbar, ikke en bisetning. */
.document-confirmation-plan__summary {
    margin: 0;
    font-weight: 600;
}

.document-confirmation-plan__actions {
    display: flex;
    justify-content: flex-end;
}

/* Skilt fra feltene over med en strek: «Be alle lese på nytt nå» handler
   om NÅ, mens alt annet i kortet handler om senere. To skritt med helt
   ulike følger skal ikke se ut som ett. */
.document-confirmation-plan__now {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--text-900) 12%, transparent);
}

/* #10382802217, 07.10.2026. Merkeraden i toppen av kortet er en
   flex-rad med `items-center`. To av merkene ligger inne i en
   <span role="button"> (de åpner feltet de sier noe om); det nye
   «Revideres»-merket gjør ikke det, siden det peker på en annen side.

   En <span> er display: inline, og som flex-element blir den gjort om
   til blokk — med linjeboksens eget mellomrom på toppen og bunnen. Den
   ble derfor 2px høyere enn .ui-badge, som er inline-flex med fast
   høyde, og de to merkene havnet på hver sin linje. Målt, ikke antatt:
   392 mot 394 i document_draft_banner_test.

   inline-flex gjør at omslaget er nøyaktig like stort som merket inni,
   så alle tre merkene stiller på samme linje enten de er klikkbare eller
   ikke. */
.document-metadata .controls-detail__header [role="button"] {
    display: inline-flex;
}

/* "Arket" (Torleiv's own name for this) — the white "sheet" a document's
   actual content lives on, in both read and edit mode, sitting on top of
   the page background (elevation-1 shadow) like a sheet of paper on a
   table. Matches Basecamp's document card. Originally document-specific
   (.document-sheet, still the name used in documents/show.html.erb — kept
   as a working alias so that markup didn't need to change) but Torleiv
   wants this recognized as THE general standard for any page showing
   substantial content, not something documents happen to have and other
   pages don't: see the Stilguide page, which now uses .ark directly, and
   its own "Arket" section below documenting the standard itself. */
.document-sheet,
.ark {
    /* No longer needs its own z-index to win a stacking fight against the
       TOC sidebar — that "lying underneath" overlap illusion is gone now
       that the sidebar is a real, non-overlapping flex column beside this
       (see .document-layout). position:relative stays as a harmless,
       ordinary containing block for this card's own descendants. */
    position: relative;
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    /* A soft shadow blurs symmetrically around its offset point, so it
       normally bleeds upward by (blur - offset) — with the old 8px/24px
       that was 16px, reaching up into the Innholdsfortegnelse/Endre row
       right above the sheet and reading as a gray smear behind already-
       muted-gray text. A larger offset with a tighter blur keeps the same
       "sheet of paper" weight below/around the card while roughly halving
       how far it reaches upward. */
    box-shadow: 0 1px 2px rgba(28, 25, 20, 0.04), 0 12px 20px rgba(28, 25, 20, 0.06);
    padding: var(--space-8);
}

/* Flattens the top corners and drops the shadow-casting edge where .ark
   sits directly below .document-metadata (see above) — the pair reads as
   one continuous card with a color-change seam, not two stacked cards
   each with their own fully-rounded corners meeting in an awkward notch. */
.document-metadata + .document-sheet,
.document-metadata + .ark {
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* Above the sheet: the document title, centered and large, in the same
   sans-serif face as the body text (not the app's Instrument Serif/PT
   Serif accent) — plus the back-to-TOC link (top-left) and Endre/slett
   (top-right, hover-only), which sit alongside it rather than inside the
   sheet. Covers both read mode (h1) and edit mode (the title text_field,
   given the same .document-page-header__title class).
   .page-title-header (and its __title/__back/__actions/__action children)
   are the same rules under a page-agnostic name — the standard title +
   hover-action header for any page, not just documents (see
   shared/_page_title_header.html.erb), while .document-page-header stays
   as an alias so the document views above don't need to change.
   .page-title-header's own bottom padding is plain --space-4, NOT the
   generous --space-8 .document-page-header still needs below — its
   __actions row used to be absolutely positioned in that reserved band
   (see the 2026-08-18 rewrite lower in this file) and only needed
   padding as clearance; now that it's a real in-flow row instead, it
   brings its own vertical space and no longer needs the parent to
   reserve any. */
.document-page-header,
.page-title-header {
    position: relative;
    text-align: center;
    padding: var(--space-4) 6rem;
}

.document-page-header {
    padding-bottom: var(--space-8);
}

/* Documents only (not every .page-title-header user) — stays reachable
   (back-to-TOC, title, Avbryt/Lagre/Publiser) without scrolling back to
   the top of a long document. Still used as-is by the two edit-mode
   views (documents/edit.html.erb, edit_draft.html.erb), which keep back
   link + title field + actions together in one sticky box the way this
   always worked — only the READ view's toolbar (documents/_toolbar.html.erb,
   see .document-page-title/.document-page-actions below) split that
   combination apart. Sits right below the app's own sticky .page-header —
   using its REAL measured height (--page-header-height, set by
   sticky_offset_controller.js), not a guessed pixel value, since a
   mismatch there is exactly what clipped/overlapped the title before. */
.document-page-header {
    position: sticky;
    top: var(--page-header-height, 60px);
    z-index: 90;
    background: var(--background-color);
    /* .document-sheet's box-shadow (below) blurs 20px past the sheet's own
       left/right edges, which otherwise line up exactly with this header's.
       While scrolling, the sheet's top scrolls up behind this sticky
       header, and that sideways bleed showed as a thin gray sliver just
       outside the header's edges — nothing here was wide enough to occlude
       it. A pair of solid, unblurred box-shadows (0 blur, ±20px x-offset)
       paints two opaque strips flush against the header's own left/right
       edges, covering exactly that bleed — unlike a negative margin, a
       box-shadow never affects layout size, so this can't introduce
       horizontal overflow on narrow viewports the way widening the box
       itself would (confirmed the hard way: a margin/padding-based
       rewrite of this exact rule, tried and reverted the same day, added
       7px of real horizontal scroll at 480px width — .document-focus only
       has ~13px of margin to spare there, less than the 20px bleed
       needed).
       Was temporarily set to `none` as a diagnostic for a persistent
       blurry-compressed-text artifact reported around this header while
       scrolling — Torleiv confirmed the artifact is STILL there with the
       box-shadow gone, ruling it out. A separate paint-flashing/layer-
       borders check (DevTools Rendering tab) also showed zero repainting
       anywhere during scroll, ruling out a repaint-timing race too. Both
       leading theories are dead; root cause unknown, deprioritized rather
       than continuing to guess-and-check. Restored as originally written. */
    box-shadow: 20px 0 0 var(--background-color), -20px 0 0 var(--background-color);
}

/* Torleiv, 2026-08-17 ("La tittel skrolle opp, men knapper + brødtekst
   viser under logo"): the READ view's title used to be sticky together
   with its actions row (Bokmerk/Rediger/•••) inside .document-page-header
   above, through several rounds — a scroll-to-compact shrink animation
   (four separate bug reports: CLS, ghosting, a position jump, a race
   condition), then a fixed-size sticky box once that shrink was dropped
   entirely. Now the title itself scrolls away with the page like
   ordinary content — split into its own class (rather than reusing
   .document-page-header, which the edit-mode views still need sticky —
   see that rule's own comment) with the same base padding, just without
   the bottom space that used to leave room for the actions row nested
   inside it — with actions gone (see .document-page-actions below), that
   was just a gap. */
.document-page-title {
    text-align: center;
    padding: var(--space-4) 6rem;
}

/* Continuation of the history above: the actions row (Bokmerk/Rediger/
   •••) is the one piece of the old sticky title box that still needs to
   stay reachable without scrolling back to the top of a long document —
   now its own standalone sticky bar instead of pinned to the bottom of a
   big sticky title. Sits right below the app's own sticky .page-header —
   using its REAL measured height (--page-header-height, set by
   sticky_offset_controller.js), not a guessed pixel value, since a
   mismatch there is exactly what clipped/overlapped this header before. */
.document-page-actions {
    position: sticky;
    top: var(--page-header-height, 60px);
    z-index: 90;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-size-base);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
    /* Torleiv, 2026-08-17 (screenshot, red boxes): the split from
       .document-page-header dropped this bar's copy of the same
       bleed-covering box-shadow that header still has (see its own
       comment above) — .document-sheet's soft shadow blurs 20px past
       its own left/right edges, and with nothing here to cover that,
       it showed through as two thin gray strips flanking this bar
       while scrolled. Same fix, same reasoning, just on this class too. */
    box-shadow: 20px 0 0 var(--background-color), -20px 0 0 var(--background-color);
}

/* Kept raw, not a --text-size-* token: a page headline, not body/UI
   text — the --text-size-* scale tops out at 1.05rem (--text-size-xl),
   nowhere near headline territory. Same reasoning for .simple-page-title
   and .workspace-hero-name elsewhere in this file. */
.document-page-header__title,
.page-title-header__title {
    font-family: var(--font-sans);
    font-size: 2.25rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
}

/* Torleiv, 2026-08-17 (mobile audit, screenshot): 6rem side padding and a
   2.25rem title alone clipped titles like "Selskapsinformasjon" on a
   412px phone — this header's own padding was eating more than a third
   of the viewport before any title text got a chance to render. Same
   breakpoint already used elsewhere in this file (auth-methods-list,
   api-keys-list). .document-page-title (the read-mode-only split of
   .document-page-header) gets the same padding fix — it's the same
   header, just non-sticky now. */
@media (max-width: 640px) {
    .document-page-header,
    .page-title-header,
    .document-page-title {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .document-page-header__title,
    .page-title-header__title {
        font-size: 1.5rem;
    }
}

/* The title text_field (edit mode) is a plain <input> inside sand_ui's
   .ui-document-header wrapper — strip that wrapper's own box chrome, it's
   not a card here. */
.document-page-header .ui-document-header {
    border: none;
    min-height: 0;
    padding: 0;
    display: block;
}

/* Endre/slett (or Ferdig, while editing) — sitting low in the header, right
   above the sheet, in a muted grey rather than full-contrast link color so
   they don't compete with the title. Always shown as plain text; each one
   highlights individually on hover (see .document-page-header__action).
   Only .document-page-header (the sticky combined title+actions box the
   two edit-mode views still use) keeps this absolute, bottom-right-corner
   treatment — see .page-title-header__actions-row below for why the
   page-agnostic version no longer shares it. */
.document-page-header__actions {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-4);
    display: flex;
    align-items: center;
    /* Torleiv, 2026-08-15 ("litt trangt enda", screenshot): was --space-1
       (4px) — visibly cramped with four items in this row (bookmark
       toggle, language-pair link, Rediger, the ••• trigger). */
    gap: var(--space-2);
    font-size: var(--text-size-base);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

/* Torleiv, 2026-08-18 (#10210442574, "Sjekk med dokument-malen hvor mye
   plass endre-knappen bruker der ... Finn høyde, og gjennomfør konsistent
   ombygging av alle dokumenter og dok.typer"): .page-title-header__back
   and .page-title-header__actions used to each be absolutely positioned
   in their own bottom corner, floating in whatever padding the parent
   happened to reserve for them. Measured live on a real supplier page
   (single "Rediger" text link — the plain-text style every non-document
   page passes into the actions block), the actions box alone was 44px
   tall sitting 8px off the header's bottom edge, i.e. reaching 52px up —
   already taller than the --space-8 (32px) padding reserved for it, so
   it already overlapped the title above on every page using this
   partial with a real action, not just Selskapsinformasjon. A fixed
   offset can never be safe against that: any content taller than
   whatever padding was reserved silently overlaps, and a magic number
   picked today (even the document template's own 60px
   .document-page-actions bar, measured below) could just as easily be
   wrong for a future block with more items or a longer back-link label.
   A real flex row instead — the same choice .document-page-actions
   itself already made when it was pulled out of the old sticky combined
   box (see the file's own history above) — gives it whatever height its
   actual content needs, so back-link and actions can never overlap the
   title regardless of block content, back-link length, or viewport
   width. padding matches .document-page-actions (--space-2 --space-4)
   for the same visual weight the real template gives its own action
   row. margin-left: auto on .page-title-header__actions pushes it to
   the row's right edge whether or not a back-link is present next to
   it — simpler than justify-content: space-between, which only spaces
   two items apart and collapses to flex-start with just one.

   Torleiv, 2026-08-18 (same todo, follow-up: "La nytt aktiva-knapp vise
   ved skroll. Tilpass at det er likt vanlig dokumenter."): made sticky
   too, same as .document-page-actions above — an index page's "+ Ny X"
   button (Aktiva, Risiko, Leverandører, ...) previously scrolled
   away with the title the moment the list below it got long, unlike a
   document's own Bokmerk/Rediger/••• row, which stays reachable. Same
   --page-header-height offset and bleed-covering box-shadow as
   .document-page-actions, for the identical reason (see that rule's own
   comment) — this row sits directly below .document-sheet-width content
   in exactly the same way. */
.page-title-header__actions-row {
    position: sticky;
    top: var(--page-header-height, 60px);
    z-index: 90;
    background: var(--background-color);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-size-base);
    box-shadow: 20px 0 0 var(--background-color), -20px 0 0 var(--background-color);
}

/* #10292832557: the row is rendered whenever the caller passes a block,
   but on suppliers/show the block yields nothing for most people (the
   field editing there is click-to-edit, not a button) — leaving a bare
   16px sticky band with z-index 90 at exactly the offset the Lexxy
   toolbar sticks at, hiding the toolbar's top edge. No controls, no row.
   :has(), not :empty — the yielded block leaves whitespace text nodes,
   and :empty is false with those. */
.page-title-header__actions-row:not(:has(a, button, input, select, .page-title-header__back)) {
    display: none;
}

.page-title-header__back {
    font-size: var(--text-size-sm);
}

.page-title-header__back a {
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
    text-decoration: none;
}

.page-title-header__back a:hover {
    color: color-mix(in srgb, var(--text-900) 85%, transparent);
    text-decoration: underline;
}

.page-title-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
    margin-left: auto;
    /* «forskyv bokmerk inn mot midten» (Torleiv, 30.09.2026,
       #10355287123). MÅLT før og etter på 1400px: bokmerket sto på
       x 1071–1174 mot en rad som slutter på 1190 — altså klistret mot
       kanten, med 16px igjen.
       margin-right her og ikke padding på raden: raden har alt en
       padding-right på smale skjermer som reserverer plass til
       sidefelt-knappen (se 03_…), og to regler på samme side ville lagt
       seg oppå hverandre. */
    margin-right: var(--space-6, 2rem);
}

/* Prototype v2 (#10230712405, "Styrings-kjeden") — see
   documents/_governance_chain.html.erb's own comment for why some steps
   stay unlinked (no real per-module list page yet), and why this stays
   generic per step TYPE rather than a per-instance claim. */
.governance-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    text-align: center;
}

.governance-chain__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 84px;
}

/* #10235317938 — hover (mouse) or focus-within (keyboard, tabbing onto
   the circle itself) reveals the hint + any documents tagged for this
   step. Anchored to .governance-chain__item, not the circle/link alone,
   so moving the pointer down onto the flyout itself doesn't close it. */
.governance-chain__flyout {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: max-content;
    max-width: 220px;
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text-900) 12%, transparent);
    background: white;
    box-shadow: 0 4px 16px rgba(28, 25, 20, 0.12);
    text-align: left;
}

/* Torleiv, 2026-08-26 (screenshot: two flyouts open at once — mouse
   hovering one step while an earlier click left keyboard focus sitting
   on a different one's link, e.g. Kontroll's hover + Dokument's lingering
   focus both satisfied their own independent rule simultaneously).
   Focus always wins: hovering a step is only allowed to open ITS OWN
   flyout when nothing in the whole chain currently has focus — a
   focused step's own flyout still always shows regardless. */
.governance-chain:not(:has(.governance-chain__item:focus-within)) .governance-chain__item:hover .governance-chain__flyout {
    display: block;
}

.governance-chain__item:focus-within .governance-chain__flyout {
    display: block;
}

.governance-chain__flyout-hint {
    margin: 0;
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

.governance-chain__flyout-list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-900) 8%, transparent);
}

.governance-chain__flyout-list li {
    padding: var(--space-1) 0;
}

.governance-chain__flyout-list a {
    font-size: var(--text-size-sm);
}

.governance-chain__step {
    display: block;
    text-decoration: none;
    cursor: default;
    border-radius: 999px;
}

a.governance-chain__step--linked {
    cursor: pointer;
}

.governance-chain__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-900) 20%, transparent);
    color: color-mix(in srgb, var(--text-900) 55%, transparent);
    font-size: var(--text-size-sm);
    font-weight: 600;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* #10278596584 (dark mode, screenshot): the previous rgb(28, 25, 20)
   literal is Blekk's own ink color — a fixed dark circle with fixed
   white text, fine on light mode's light page background, but Blekk is
   ALSO this app's dark-mode --background-color, so the circle nearly
   vanished into the page there. --signal-color/--solid-text-color are
   the exact pairing sand_ui's own solid buttons already use for this
   same "always-legible filled marker" job — signal-color is Blekk in
   light mode (identical to the old literal) and flips to Bein in dark
   mode, with solid-text-color following it to stay readable either way. */
.governance-chain__step--current .governance-chain__circle {
    border-color: var(--signal-color);
    color: var(--solid-text-color);
    background: var(--signal-color);
}

/* #10278596584 (dark mode): rgb(28, 25, 20) is Blekk, this app's own
   dark-mode page background — the hover border nearly vanished against it. */
a.governance-chain__step--linked:hover .governance-chain__circle {
    border-color: var(--text-900);
    background: color-mix(in srgb, var(--text-900) 8%, transparent);
}

.governance-chain__label {
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

/* #10278596584 (dark mode): rgb(28, 25, 20) is Blekk, this app's own
   dark-mode page background — the label text nearly vanished against it.
   var(--text-900) is the same Blekk in light mode, Bein in dark mode. */
.governance-chain__step--current + .governance-chain__label,
.governance-chain__item:has(.governance-chain__step--current) .governance-chain__label {
    color: var(--text-900);
    font-weight: 600;
}

.governance-chain__connector {
    color: color-mix(in srgb, var(--text-900) 30%, transparent);
    font-size: var(--text-size-sm);
    margin-top: 8px;
}

/* #10244038077 ("Faner og TOC for ISMS") — literal browser-style tabs
   replacing the governance-chain circles on a module's own front page
   (systems/show.html.erb only; document pages keep the circles above,
   unchanged).

   2026-08-28 ("ønsker du en ramme rundt hele panelet... ja"):
   .governance-tabs__panel now DOES carry its own card framing (border/
   background), on top of whichever list partials inside it are already
   their own .ui-box card(s) — a deliberate double-box, by Torleiv's own
   choice, so every one of the 8 tabs reads as "this whole area belongs
   to the active tab" the same way, rather than only the multi-section
   tabs (Krav, Kontroll, Forbedring) having a visible boundary and the
   single-card tabs (Risiko, Bevis) not. */
.governance-tabs {
    margin: var(--space-4) 0;
}

/* 2026-08-28 ("skroll oppover stanser slik at fanene vises"): sticks
   right below the app's own sticky .page-header, same pattern and same
   real-measured --page-header-height as .document-page-actions (see
   that rule's own comment) — a guessed pixel value is exactly what
   caused the clipping bug this variable was introduced to fix.
   padding-bottom, not margin-bottom, for the spacer below the tab
   buttons — margin would sit outside this element's own background, so
   scrolled-past content would bleed through that gap once stuck.

   2026-08-31 (#10254838242, "Reduser avstanden mellom fane og ark, slik
   at det ser mer naturlig ut"): --space-4 (16px) read as too much air
   under the inactive tabs before the panel begins — the active tab
   itself was already flush (its own margin-bottom below cancels this
   padding exactly), so only the inactive tabs' resting gap needed
   shrinking. --space-2 keeps the same sticky-scroll spacer mechanism,
   just thinner.

   2026-08-31, "litt mer pirk": --space-2 (8px) was still visibly a gap
   — down to --space-1 (4px), the smallest step that still leaves a real
   spacer for the sticky-scroll fix to cover (see above) rather than
   zeroing it out and reopening that bug. */
.governance-tabs__strip {
    position: sticky;
    top: var(--page-header-height, 60px);
    z-index: 90;
    background: var(--background-color);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-bottom: var(--space-1);
}

.governance-tabs__tab {
    padding: var(--space-2) var(--space-4);
    border: var(--card-border);
    border-radius: 10px 10px 0 0;
    background: var(--card-bg-muted);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
    font-size: var(--text-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* #10278596584 (dark mode): rgb(28, 25, 20) is Blekk, this app's own
   dark-mode page background — hover text nearly vanished against it. */
.governance-tabs__tab:hover {
    background: color-mix(in srgb, var(--text-900) 6%, transparent);
    color: var(--text-900);
}

/* #10254936220 ("Oversikt ISMS", "Ikke ramme rundt 'Oversikt'"): the
   default UA focus ring on a <button> hugs this element's own
   border-radius closely enough to read as a heavy black frame around
   whichever tab last held focus — not this app's own --card-border (a
   near-invisible 8% one), which was never the actual source.

   2026-08-31, "litt mer pirk": a softer rgba(28, 25, 20, 0.35) inset
   ring (this rule's first attempt) still read as a visible frame —
   Torleiv flagged the exact same complaint a second time. Dropped to
   :focus-visible { outline: none } with no replacement.

   2026-09-01: still there after a plain mouse click, in Safari (his own
   screenshot's browser chrome) — Safari's :focus-visible matching after
   a pointer click doesn't reliably line up with Chrome's own heuristic,
   so that rule was silently not matching at all there, leaving the
   un-styled default :focus outline fully in place. :focus, not
   :focus-visible — unconditional, every browser, regardless of how it
   decides "was this keyboard-ish enough". Same reasoning as before on
   why nothing replaces it: the tab's own selected/hover states already
   carry enough feedback. */
.governance-tabs__tab:focus {
    outline: none;
}

/* #10252338424 (2026-08-30, "La valgt fane henge sammen med arket, i
   samme farge"): previously a solid near-black pill — read as "a chip
   you selected", not "the same surface as the panel below it". Same
   background as .governance-tabs__panel now, so the active tab reads as
   the panel's own surface continuing upward into the strip, not a
   separately-colored control sitting on top of it. Bold weight (already
   set on the base rule) is what still marks it active, not color.

   2026-08-31 follow-up ("Fjern ramme rundt fane som er valgt... La fane
   og ark henge sammen"): matching the background wasn't enough — the
   base rule's own border: var(--card-border) still outlined all four
   sides, so the active tab still read as a separate boxed chip floating
   above a gap instead of literally being the panel's own top edge.
   border-bottom-color: transparent removes the seam line along the one
   edge that touches the panel (top/left/right keep their border, same
   as every other tab, so it still reads as a tab — just not closed off
   from what's under it). margin-bottom pulls the panel up to close the
   actual gap that caused (.governance-tabs__strip's own
   padding-bottom, kept for the sticky-scroll clipping fix it was added
   for — see that rule's own comment — rather than removed and
   reintroducing that bug). Only the ACTIVE tab needs either change:
   every other tab already reads as "not open" via its own muted
   background, so a border/gap under THEM is correct, not a bug. */
/* #10278596584 (dark mode, Torleiv's own screenshot of this exact tab):
   rgb(28, 25, 20) is Blekk, and --card-bg is ALSO Blekk in dark mode
   (see the dark-mode :root block, 01_foundation_and_header.css) — the
   active tab's own label was rendering dark text on its own dark
   background, reading as blank/unreadable exactly where you'd look to
   see which tab is selected. var(--text-900) is the same Blekk in light
   mode, Bein in dark mode — matches --card-bg's own light/dark pairing
   instead of assuming light mode's pairing always holds. */
.governance-tabs__tab--active,
.governance-tabs__tab--active:hover {
    /* border-top/left/right already match .governance-tabs__panel's own
       via the base rule's border: var(--card-border) above — nothing to
       override there. */
    background: var(--card-bg);
    color: var(--text-900);
    border-bottom-color: transparent;
    margin-bottom: calc(var(--space-1) * -1);
}

/* See .governance-tabs's own comment above (2026-08-28) for why this
   panel gets its own card frame regardless of whether its content is
   already a .ui-box. Rounded on every corner — an earlier version
   squared the top-left one on the assumption the active tab was always
   the leftmost (Oversikt); once any of the 8 tabs can be active, that
   assumption no longer holds anywhere except tab 1, so a corner-specific
   match doesn't generalize. The seam itself (border-bottom-color/
   margin-bottom above, on the active tab) is what makes tab and panel
   read as one continuous surface — the corner radius no longer needs to
   carry that job.

   2026-08-31, "litt mer pirk" (screenshot): that reasoning missed one
   thing — a rounded corner only clashes with the tab strip where the
   PANEL's own top edge actually has a corner to round, i.e. only at the
   panel's far left and far right edge. Tabs 2 through 7 sit above a
   dead-straight section of that edge no matter which is active, so
   nothing there was ever at risk — only Oversikt (leftmost, panel's own
   top-left corner) and Forbedring (rightmost, top-right corner) sit
   exactly where the panel's own curve starts, which is what actually
   produced the small cream-colored notch in the screenshot. Each of the
   8 tab-panel <div>s is already its own separate element tied to
   exactly one tab (data-tab-panel, tabs_controller.js's own
   panel.hidden toggle) — squaring just the one corner each of THOSE
   TWO SPECIFIC panels sits under fixes both edge cases without
   reintroducing the old "assumes Oversikt is always active" bug, since
   tabs 2-7's panels are untouched here. */
.governance-tabs__panel {
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    padding: var(--space-4);
}

.governance-tabs__panel[data-tab-panel="oversikt"] {
    border-top-left-radius: 0;
}

.governance-tabs__panel[data-tab-panel="forbedring"] {
    border-top-right-radius: 0;
}

.governance-tabs__panel-empty {
    color: color-mix(in srgb, var(--text-900) 55%, transparent);
}

/* En lenke til en ANNEN side enn fanen viser (#10412290831, 17.10.2026):
   bevisloggen under signaturlista. Ikonlenka de andre fanene bruker betyr
   «det samme, som egen side», og den ble dessuten fjernet fra nettopp
   denne fanen 04.09.2026 fordi den sto klemt mot søkefeltet. Derfor en
   navngitt tekstlenke, og under lista framfor over den. */
.governance-tabs__panel-sidelink {
    margin-top: var(--space-4);
    font-size: var(--text-size-sm);
}

/* #10248561901 ("Faner i ISMS"): Forbedring is the one panel combining
   two standalone pages (Interne revisjoner + Avvik) rather than one —
   space between the two cards so they read as separate sections. */
.governance-tabs__panel--split > * + * {
    margin-top: var(--space-4);
}

/* controls-annex/_list.html.erb partials' own optional in-box header
   row (audits/_list, deviations/_list) — heading + a discreet "open as
   own page" icon-link, rendered as the card's own first child so it's
   unambiguously part of the box below it, replacing the old
   .governance-tabs__panel-link text link that floated above the box. */
.controls-annex__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.controls-annex__section-title {
    margin: 0;
    font-size: var(--text-size-lg);
    font-weight: 600;
}

.controls-annex__section-link {
    display: inline-flex;
    align-items: center;
    color: color-mix(in srgb, var(--text-900) 45%, transparent);
    transition: color 0.15s ease;
}

/* #10278596584 (dark mode): rgb(28, 25, 20) is Blekk, this app's own
   dark-mode page background — hover text nearly vanished against it. */
.controls-annex__section-link:hover {
    color: var(--text-900);
}

/* 2026-08-28 ("Vil du at jeg gjør samme diskrete-ikon-behandling der
   også"): the same header row with no title, used by list partials that
   have no per-item heading of their own to pair it with (the tab
   button's own label already says what the panel is) — risks,
   compliance_evidence_logs, task_lists, compliance_overviews, and above
   requirements/controls' own .controls-collections (each of those two
   already has its own per-section heading, so no title here would
   duplicate it). space-between with a single child left-aligns it, so
   this pushes it to the end instead. */
.controls-annex__section-header--icon-only {
    justify-content: flex-end;
    margin-bottom: var(--space-2);
}

} /* @layer overrides */

/* Torleiv, 16.09.2026 (#10309834855): «åpne redigering ved klikk». Selve
   dokumentteksten er ikke et skjemafelt, så den skal ikke se ut som ett:
   .click-to-edit__display sin inputboks (ramme, radius, dempet grå tekst,
   --text-size-lg) ville gjort hele arket om til en formkontroll. Her
   nullstilles den tilbake til dokumentets egen typografi, og det eneste
   som røper at teksten er klikkbar er en svak flate ved hover — samme
   affordanse, ti ganger roligere.

   Rekkefølgen betyr noe: denne fila lastes etter
   02_controls_and_compliance_overview.css i samme @layer, så disse
   reglene vinner over .click-to-edit__display uten !important. */
.document-sheet__display.click-to-edit__display {
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
    cursor: text;
}

/* Og teksten skal ha full styrke. Leverandørkortenes displays er dempet
   grå for å si «ikke et aktivt felt ennå» — men dette ER lesevisningen
   av dokumentet, den samme alle uten redigeringsrett ser, og den kan
   ikke være blekere for dem som kan redigere. Lexxy maler gjennom sin
   egen --lexxy-color-ink, så variabelen må settes tilbake, ikke bare
   `color` (se regelen den overstyrer i
   02_controls_and_compliance_overview.css). */
.document-sheet__display.click-to-edit__display .ui-document-rich-content {
    --lexxy-color-ink: var(--text-900);
    color: var(--text-900);
}

.document-sheet__display.click-to-edit__display:hover {
    background: color-mix(in srgb, var(--text-900) 3%, transparent);
}

/* Gul «dette endres ved lagring»-tone, som på leverandørkortene — men
   bare som en venstremarg, ikke en flate bak hele brødteksten. Et helt
   ark med gul bakgrunn er uleselig, og signalet trengs bare i utkanten
   av synsfeltet. */
.click-to-edit--dirty .document-sheet__display.click-to-edit__display {
    background: none;
    border-left: var(--space-1, 4px) solid rgba(234, 179, 8, 0.55);
    padding-left: var(--space-3, 12px);
}

/* BREDE TABELLER RULLER I STEDET FOR Å KLEMMES (Stomn #2, 16.10.2026,
   på Torleivs oppfordring: «IS-MÅL-01 hadde en KPI-tabell med åtte
   kolonner … KPI-01 ble brutt over to linjer, Hva måles-cellen over
   fire»).

   SPØRSMÅLET VAR OM WRAPPEREN KAN FÅ overflow-x: auto. Den HAR det —
   lexxy-content.css setter det på :where(.lexxy-content__table-wrapper).
   Grunnen til at ingenting ruller, er en annen: `table` får
   `inline-size: calc(100% - 0.5ch)` i samme fil, altså låst til
   beholderens bredde. Da finnes det per definisjon ikke noe å rulle, og
   det eneste tabellen kan gjøre er å klemme kolonnene.

   MÅLT I NETTLESER FØR RETTELSEN, åtte kolonner med setningslange
   celler: wrapper 809 px, tabell 803 px, scrollWidth == clientWidth,
   kan_rulle = false. I både lesevisning og redigering.

   inline-size: auto gir tabellen den automatiske algoritmen igjen: den
   krymper til plassen når den kan, og går ut over den når innholdets
   minstebredder krever det — og DA ruller wrapperen, slik den alltid
   var satt opp til.

   min-inline-size holder smale tabeller like brede som før, så en
   tretolonners tabell ikke plutselig står og flyter midt på arket.

   12ch og ikke lexxys 5ch: 5ch er 57 px, og åtte slike får plass med
   god margin i 809 px — derfor klemte den i stedet for å rulle. 12ch er
   bredt nok til at «KPI-01» og «Hva måles» står på én linje, som er
   hele poenget. Cellens egen max-width: 50ch står og hindrer at én lang
   celle alene drar tabellen flere skjermbredder ut.

   IKKE I ET LAG: lexxy.css er ulagdelt og vinner over alt lagdelt.
   Selektoren her er .lexxy-content__table-wrapper table (0,1,1) mot
   lexxys .lexxy-content table (0,1,0), så den vinner på spesifisitet
   uten !important. */
.lexxy-content__table-wrapper table {
    /* max-content og ikke auto. `auto` ble prøvd først og MÅLT: cellene
       fikk riktig min-width (137 px = 12ch), men tabellen la seg
       likevel på nøyaktig beholderens bredde — 828 av 834 px — fordi
       en tabell med width: auto krymper til den tilgjengelige plassen.
       Da var vi like langt.

       max-content lar tabellen bli så bred som innholdet trenger, og
       cellens egen max-width: 50ch står igjen som taket. */
    inline-size: max-content;
    /* Og denne verner de smale: min-width slår width, så en
       totolonners tabell fyller fortsatt arket i stedet for å krympe
       bort til innholdet sitt. */
    min-inline-size: calc(100% - 0.5ch);
}

.lexxy-content__table-wrapper :is(th, td) {
    min-width: 12ch;
}

/* VERSJONSVEKSLER (20.10.2026, #10422707728).

   Torleiv, etter første utgave: «må være mulig å veksle mellom
   versjonene — skjematisk, ikke prosa.»

   To felt side om side, ett per versjon. Navnet over, tilstanden under,
   samme oppsett i begge — så øyet kan SAMMENLIGNE dem i stedet for å
   lese dem. Det er forskjellen på skjematisk og prosa.

   DEN AKTIVE HAR HVIT FLATE OG FULL TEKSTFARGE; den andre er dempet og
   gjennomsiktig. Formen bærer forskjellen i tillegg til fargen: den
   aktive har en kant hele veien rundt, den andre bare en hover-flate —
   så de to leses i gråtoner og av den som ikke skiller fargene.

   Grid og ikke flex: to like brede felt uansett hvor lang teksten i
   hvert er. Med flex ville «venter på godkjenning fra Jon Håvard
   Gundersen» gjort sitt felt dobbelt så bredt som «godkjent 28. august
   2025», og da leses de ikke lenger som to av det samme. */
@layer overrides {
    .version-switch {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        /* Like høye felt, ikke bare like brede: to bokser i ulik høyde
           leses som to ulike ting, og det er nettopp sammenligningen
           som er poenget. stretch er grid-standarden, men .__item setter
           sin egen flex-retning, så den skrives ut her. */
        align-items: stretch;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
        /* Full bredde i banneret: uten dette får griddet bare plassen
           handlingene til høyre lar være igjen, og de to feltene blir
           ulikt brede avhengig av hvor lange lenketekstene er. */
        flex: 1 1 100%;
        min-width: 0;
    }

    .version-switch__item {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap: 0.125rem;
        padding: var(--space-2) var(--space-3);
        border: 1px solid transparent;
        border-radius: var(--card-radius);
        text-decoration: none;
        color: var(--text-600);
    }

    .version-switch__item.is-active {
        background: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-900);
    }

    /* Bare den som FAKTISK er en lenke får hover-svar. Et <span> som
       lyser opp under musa lover et klikk som ikke finnes. */
    a.version-switch__item:hover,
    a.version-switch__item:focus-visible {
        background: color-mix(in srgb, var(--text-900) 4%, transparent);
        border-color: var(--border-color);
        color: var(--text-900);
    }

    a.version-switch__item:focus-visible {
        outline: 2px solid var(--accent-color, currentColor);
        outline-offset: 2px;
    }

    .version-switch__name {
        font-weight: 600;
        font-size: 0.9375rem;
    }

    /* Dempet, men over kontrastgulvet i begge temaer: datoen og «venter
       på» er opplysninger man leser når man trenger dem, ikke støy. */
    .version-switch__meta {
        font-size: 0.8125rem;
        line-height: 1.4;
        color: var(--text-600);
    }
}