/* Document version-history timeline, document nav links, module table-of-contents list.
   Split out of theme.css (original lines 2397-2828) — 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 {
/* Document version history — a Basecamp-style timeline (dot + connecting
   line) with a git-diff-style inline word diff (additions/removals),
   rendered inside the document's own formatting for body changes. */
.version-timeline {
    list-style: none;
    margin: 0;
    /* Innrykk mot boksen over (Torleiv, 10.09.2026, #10290422954: «litt
       innrykk på historie under nyeste»). Punktmarkørene lå på linje med
       .version-timeline__latest sin YTTERKANT, så de eldre versjonene
       leste som likestilte med den nyeste framfor som historikken under
       den. space-4 er boksens egen vannrette padding, så markørene lander
       der boksens tekst begynner. */
    padding: 0 0 0 var(--space-4);
}

.version-timeline__entry {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-6);
    border-left: 2px solid color-mix(in srgb, var(--text-900) 10%, transparent);
}

.version-timeline__entry:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.version-timeline__entry::before {
    content: "";
    position: absolute;
    top: 0.4em;
    left: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal-color);
}

.version-timeline__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-size-base);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.version-timeline__meta time {
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

/* «4 redigeringer slått sammen» (#10335701824). Et merke, ikke et varsel:
   at flere redigeringer vises som én er en egenskap ved visningen, ikke
   noe som krever handling. Derfor nøytral flate og ingen semantisk farge
   — de er reservert for status. VERSALER som alle andre merker. */
/* Rolleendringer i historikken (#10393104048, 10.10.2026). Torleiv:
   «ikke legg inn harde stengsler, men logg det som gjøres.» Linja er da
   den eneste kontrollen på den veien, og må leses — ikke gjemmes bort i
   en detalj-utvidelse.

   Tonet ned mot tittelen over, men ikke like svak som metalinja: dette
   er en handling noen gjorde, ikke et tidsstempel. */
.version-timeline__role-change {
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 78%, transparent);
    margin-top: 0.15rem;
}

.version-timeline__collapsed {
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--text-900) 60%, transparent);
    background: color-mix(in srgb, var(--text-900) 7%, transparent);
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0.1em 0.5em;
}

/* Basecamp #10285340978 (Torleiv, skjermbilde av 1Password-leverandøren:
   åtte versjonsrader med identisk dato og navn, umulig å skille uten å
   åpne hver enkelt): den avledede endringstittelen per versjon — se
   ApplicationHelper#version_change_title for hvorfor den er avledet av
   feltene som faktisk endret seg, ikke skrevet av den som lagret.

   Ligger under dato/hvem-linjen og er den linjen man faktisk skanner
   etter i en lang liste, så den er den tyngste av de to. Dato/hvem
   beholder sitt uendrede utseende fra #10280438445 — den skal ikke
   dempes, bare grupperes tettere mot tittelen sin (regelen under), slik
   at de to linjene leses som én overskrift framfor to løse linjer.

   600, ikke 500: temaets fontstack har ingen 500-vekt, så 500 rendres
   identisk med 400 og tittelen ble ikke til å skille fra dato-linja
   (verifisert på oppskalert skjermbilde, ikke antatt). */
.version-timeline__title {
    font-weight: 600;
    font-size: var(--text-size-base);
    margin-bottom: var(--space-2);
}

.version-timeline__meta:has(+ .version-timeline__title) {
    margin-bottom: var(--space-1);
}

/* Den alltid synlige nyeste-raden (#10280438445) er en flex-boks med
   wrap, så tittelen havnet klemt inn til høyre for dato/hvem og leste
   som en løsrevet etikett. flex-basis: 100% tvinger den ned på egen
   linje, slik at boksen leses i samme rekkefølge som radene under:
   dato/hvem, hva som endret seg, godkjenningsstatus. */
.version-timeline__latest .version-timeline__title {
    flex-basis: 100%;
    margin-bottom: 0;
}

/* #10285613879 punkt 1: nyeste versjons egne detaljer ligger nå i denne
   boksen, ved siden av godkjenningen de hører til. Som flex-element ble
   <details> klemt til en smal kolonne ved siden av datoen — egen linje,
   samme grep som tittelen over. */
.version-timeline__latest .version-timeline__details {
    flex-basis: 100%;
}

.version-timeline__revert {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--text-size-sm);
}

.version-timeline__summary {
    margin: 0;
    font-size: var(--text-size-base);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

.version-timeline__details summary {
    cursor: pointer;
    font-size: var(--text-size-base);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
    margin-bottom: var(--space-2);
}

.version-timeline__diff-frame {
    padding: var(--space-4);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg-muted);
}

.version-timeline__type-changes {
    margin: 0 0 var(--space-3);
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 60%, transparent);
}

.version-timeline__diff {
    font-size: var(--text-size-lg);
    line-height: 1.6;
}

.version-timeline__diff ins {
    background: rgba(47, 158, 68, 0.15);
    color: var(--success-color);
    text-decoration: none;
}

.version-timeline__diff del {
    background: rgba(178, 47, 47, 0.12);
    color: var(--danger-color);
    text-decoration: line-through;
}

/* Shrink Lexxy's toolbar buttons so every button (image, attach, bold/
   italic/strike/underline, heading, highlight, link, quote, code, lists,
   table, undo/redo) fits on one row by default instead of collapsing
   into the "…" overflow menu. Was scoped to .document-sheet — the only
   place Lexxy was used when this was written — but the sizing/overflow
   problem it fixes has nothing to do with being inside a document
   specifically; a comment editor's own Lexxy toolbar (comments/
   _new_comment.html.erb) hit the exact same overflow and rendered
   without this fix, reading as a different, less-finished component
   from the document editor's toolbar right next to it (Torleiv,
   2026-08-10). Unscoped so every Lexxy toolbar in the app gets it. */
lexxy-toolbar {
    --lexxy-toolbar-button-size: 1.35lh;
    --lexxy-toolbar-icon-size: 0.8em;
    --lexxy-toolbar-gap: 0px;
    --lexxy-toolbar-spacing: 0.2ch;
}

/* Lexxy's own dropdown-panel background rule is wrapped in :where(...),
   which carries zero specificity — an explicit background here guarantees
   an opaque backdrop for the heading/highlight/link flyouts regardless of
   what else is loaded, instead of letting the surrounding page show
   through. Same reasoning as above for unscoping this from
   .document-sheet — an opaque dropdown isn't a document-specific need. */
lexxy-toolbar [data-dropdown-panel] {
    background-color: var(--card-bg);
}

/* Reading comfort for document prose — larger than the app's default UI text
   and generously spaced, in both read mode (.ui-document-rich-content) and
   edit mode (the Lexxy editor's own content area). Kept raw, not a
   --text-size-* token: deliberately above --text-size-xl's 1.05rem
   ceiling — that scale is for UI text, not long-form reading content.

   .supplier-assessment-editor (Basecamp #10261945911, Torleiv screenshots:
   own_assessment_body reads at this size in show mode but shrinks back to
   sand_ui's smaller --font-size-md the moment you click into edit) —
   suppliers/show.html.erb and suppliers/_form.html.erb's own
   .ui-document-rich-content-editor wrapper for that one field, same
   allowlist pattern as .document-sheet/.company-section rather than a
   blanket size bump for every .ui-document-rich-content-editor (the
   comment box and task body editor deliberately stay compact). */
.ui-document-rich-content,
.document-sheet .ui-document-rich-content-editor lexxy-editor,
.company-section .ui-document-rich-content-editor lexxy-editor,
.supplier-assessment-editor lexxy-editor,
.supplier-compact-editor lexxy-editor {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* #10285378177: de sju korte leverandørfeltene i samme editor som
   vurderingen, men uten vurderingens høyde — et felt for
   «hendelsesvarslingsrutine» skal ikke starte som en side. Verktøylinja
   krympes av CompactToolbarExtension (JS), som leser nettopp denne klassen.

   Torleiv, 15.09.2026 ("tekst vises mye mindre i show enn i edit"): denne
   regelen ble 10.09 (31e93c77) limt inn MIDT I selektorlista over — etter
   et etterhengende komma — slik at .ui-document-rich-content og de to
   dokument-editorene fikk min-height i stedet for skriftstørrelsen, og
   all lesevisning av rik tekst i appen krympet til sand_ui sin 0.875rem.
   Holdes derfor som en egen regel, og kompakt-editoren står i tillegg i
   størrelseslista over, så feltet ser likt ut før og etter klikk. */
.supplier-compact-editor lexxy-editor {
    min-height: 5.5rem;
}

/* Focused programmatically (tabindex="-1", see document_selection_controller)
   purely so Cmd/Ctrl+A can be scoped to this content — not a real focusable
   widget, so it shouldn't look like one. */
.ui-document-rich-content:focus {
    outline: none;
}

/* Search-result landing highlight (search_highlight_controller.js) —
   deliberately not plain <mark>'s default yellow, which is already the
   Lexxy editor's own user-applied "highlight" formatting color; a search
   hit needs to read as transient/system-generated, not as text someone
   deliberately marked up. */
.search-highlight {
    background: rgba(255, 145, 0, 0.3);
    border-radius: 2px;
}

.search-highlight--current {
    background: rgba(255, 145, 0, 0.55);
    box-shadow: 0 0 0 2px rgba(255, 145, 0, 0.55);
}

.ui-document-rich-content p,
.document-sheet .ui-document-rich-content-editor lexxy-editor p,
.company-section .ui-document-rich-content-editor lexxy-editor p,
.supplier-assessment-editor lexxy-editor p {
    margin-bottom: var(--space-4);
}

.document-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--text-900) 8%, transparent);
}

.document-nav__link {
    font-size: var(--text-size-base);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

.document-nav__link--toc {
    text-align: center;
}

.document-nav__link--next {
    text-align: right;
}

/* #10276047895 (mobilgjennomgang, målt på et personalhåndbok-dokument ved
   375px: siden skrollet 18px sidelengs): prev/TOC/next is a nowrap flex row,
   and none of the three can shrink — "← Innholdsfortegnelse" alone is 131px
   as a single unbreakable phrase, so 131 + 131 + 85 + two 16px gaps needed
   379px of a 349px row and the "next" link ended up past the screen edge.
   Stacked on a phone instead of truncated: these links say which chapter
   you're going to, and cutting that off with an ellipsis defeats the point
   of the link. All left-aligned once stacked — a column of left/centre/right
   text reads as broken alignment rather than as three deliberate positions. */
@media (max-width: 640px) {
    .document-nav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .document-nav__link--toc,
    .document-nav__link--next {
        text-align: left;
    }
}

/* A module's TOC reads as a page in a book, not a compact file list — larger
   type, calmer weight, more breathing room between chapters. */
.toc-list,
.toc-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-list ul {
    /* Torleiv, 2026-08-19 ("la filer i mappe synligere høre til mappa"):
       was var(--space-5) (20px) — a folder row's OWN text starts well past
       that (drag-handle + disclosure chevron + folder icon, ~4.5rem before
       the label), but a nested document row has only a drag-handle before
       its title (~1.5rem). Net effect: a document filed inside a folder
       rendered with its title starting to the LEFT of its own parent
       folder's title, reading as a sibling instead of a child. This value
       roughly matches a folder row's own icon-prefix width, so nested
       rows' text lands clearly right of their parent's. */
    padding-left: 2.75rem;
    /* Torleiv, 2026-08-19 ("gjør mulig å dra dokument inn i mappe"): an
       empty (or not-yet-populated) folder's nested <ul> rendered at 0px
       height — SortableJS hit-tests against the element's own bounding
       box, so a zero-height list is a drop target that physically cannot
       be dropped onto. This is why dragging a document onto any folder
       with nothing in it yet silently just reordered it at the top level
       instead of reparenting it. A folder that already has children was
       never affected — its rows already gave the <ul> real height. */
    min-height: var(--space-6);
}

.toc-list__item {
    padding: var(--space-3) 0;
}

/* A folder item's own bottom padding sat AFTER its nested <ul> (the
   padding belongs to the <li> wrapping that list, not the list itself),
   stacking with the last nested child's own bottom padding — e.g. "9.
   Vedlegg" > "Forsikring" > "Waco forsikringsportal" read with a visibly
   bigger gap before the next row ("Utleggsfaktura") than any other pair
   of adjacent rows in the TOC. The nested list's own last item already
   supplies that trailing space, so a folder item doesn't need its own
   copy of it once something is nested inside. Top padding is untouched —
   that one IS the normal "breathing room before this row" every item
   gets, folder or not. */
.toc-list__item:has(> .toc-list) {
    padding-bottom: 0;
}

/* Drag-and-drop hover feedback for Mine dokumenter (Torleiv, 2026-08-10:
   "lag intuitiv hover/markering når du drar dokument inn i mappe (eller
   ut)") — SortableJS already inserts a .sortable-ghost placeholder row
   into whichever list is currently under the pointer during a drag (see
   sortable_toc_controller.js's defaultOptions, which doesn't
   override the ghostClass default), so :has() alone highlights the
   right folder with no JS: it matches only while a ghost actually sits
   inside that folder's own list, and stops matching the instant the
   ghost moves elsewhere (dragged back out, or into a different folder),
   without any dragenter/dragleave bookkeeping of our own. */
.toc-list__item:has(> div > .toc-list > .sortable-ghost) {
    background: rgba(37, 99, 235, 0.06);
    outline: 2px dashed var(--signal-color);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* Only the outermost chapter list gets a divider between entries — nested
   folder/heading lists stay undivided so the TOC doesn't turn into a grid
   of lines. */
.toc-sheet > .toc-list > .toc-list__item + .toc-list__item {
    border-top: 1px solid color-mix(in srgb, var(--text-900) 6%, transparent);
}

/* Feedback while dragging OS files over a folder page (Torleiv, Basecamp
   #10217893071) — upload_dropzone_controller.js toggles this on dragover/
   dragleave/drop. Dashed outline rather than a solid border so it doesn't
   look like a permanent, always-there UI element. */
.upload-dropzone--active {
    outline: 2px dashed var(--signal-color);
    outline-offset: -2px;
    background: var(--signal-color-tint);
    border-radius: var(--radius-md);
}

/* The empty-state row (Mine dokumenter, when there's nothing of the
   person's own yet) shouldn't read as its own separate section from
   whatever follows it (e.g. the IMS-arkitektur/Stilguide rows) — no
   divider right after it, same as within a single ungrouped list. */
.toc-list__item--empty-state + .toc-list__item {
    border-top: none;
}

/* A top-level folder chapter (e.g. "9. Vedlegg") got a noticeably heavier
   treatment than its plain-document sibling chapters ("1. Favo AS" through
   "8. HMS", rendered as .toc-list__link — no icon, regular weight) purely
   because it happens to be a Folder in the data, not because it's meant
   to stand out. font-weight toned down from 600 to match .toc-list__link's
   own weight, and the icon switched to the same regular (thin) Phosphor
   style already used everywhere else in the TOC (drag handle, external-
   link, caret) instead of the heavier default fill style — still a
   folder icon (readers still need SOME cue this one expands into more
   chapters, not a document), just no longer the loudest thing on the
   page. */
.toc-list__folder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-size-xl);
    font-weight: 500;
}

/* A folder nested inside another TOC entry (an attachments sub-group,
   e.g. "Forsikring" under a top-level "9. Vedlegg" chapter) — reads as a
   quieter label, not a second chapter heading at the same visual
   weight as its parent. */
.toc-list__folder--nested {
    font-size: var(--text-size-base);
    font-weight: 500;
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

/* Torleiv, 2026-08-20 (#10222026203): "Vis antall dokumenter når mappe
   er lukket" — a plain CSS toggle off the disclosure button's own
   aria-expanded, same element the JS controller already flips on every
   open/close, rather than a second thing for that JS to separately
   manage. Muted/small like .toc-list__language-tag (a disambiguator,
   not something worth drawing the eye to), pushed to the row's far end
   so it doesn't visually compete with the folder name for attention. */
.toc-list__folder-count {
    display: none;
    margin-left: auto;
    font-size: var(--text-size-xs, 0.75rem);
    font-weight: 400;
    color: var(--text-500, #666);
}

.toc-list__folder:has([aria-expanded="false"]) .toc-list__folder-count {
    display: inline;
}

.toc-list__link {
    display: block;
    padding: var(--space-1) 0;
    font-size: 1.125rem;
    line-height: 1.5;
    /* #10281061392 (mobile round 2): a title with no space to break at (a
       link node named by its URL, an untitled document falling back to
       its path) is one unbreakable word — measured at 375px it ran to
       471px and gave the whole module page a horizontal scroll. Real
       titles wrap at their spaces exactly as before; this only lets the
       pathological one break mid-word instead of pushing the page. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.toc-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Statusmerkene i innholdslista (#10355337391, 30.09.2026).
   Torleiv ville se GODKJENT og OFFENTLIG uten å åpne dokumentet, og
   valgte uttrykkelig at godkjent-merket skal stå på HVER godkjent rad —
   ikke bare når noe mangler, som ellers er regelen (approval_badge
   returnerer nil for :approved).

   Innvendingen min mot det er tatt inn her i stedet for å stoppe
   bestillingen: et merke som står overalt slutter å bety noe. Derfor
   dempet — mindre skrift og lavere metning — så fjorten grønne rader
   ikke stjeler blikket fra det ene dokumentet som mangler noe. Rødt og
   gult beholder full styrke og leses fortsatt først.

   margin-left: auto skyver dem til høyre, vekk fra tittelen. Uten det
   ville de klemt seg inntil lenka og gjort raden vanskeligere å skanne.
   flex-shrink: 0 fordi et merke som brekker er verre enn et som stikker
   ut; lange titler får heller kortes. */
.toc-list__badges {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    flex-shrink: 0;
}

.toc-list__badges .ui-badge {
    font-size: var(--text-size-xs);
    opacity: 0.72;
}

/* Det som TRENGER oppmerksomhet står i full styrke. Uten dette ville
   dempingen over også dempet «ikke godkjent», og da hadde vi gjort lista
   verre enn før — målt av testen, som først fant 0.72 på utkast-merket.

   ui_badge legger fargen i data-color, ikke i en klasse (se
   SandUi::UiHelper#ui_badge). Første utgave av denne regelen brukte
   .ui-badge.red og traff ingenting. */
.toc-list__badges .ui-badge[data-color="red"],
.toc-list__badges .ui-badge[data-color="yellow"] {
    opacity: 1;
}

/* Torleiv, 2026-08-20 (#10221925317): "diskre språk-indikator" — a
   document's translation pair (see Document#language_tag) can carry the
   exact same title as its sibling, so this is the only thing telling the
   two rows apart in the list. Deliberately quiet (muted color, no
   border/background) rather than a loud badge — it's a disambiguator,
   not a status worth drawing the eye to. */
.toc-list__language-tag {
    font-size: var(--text-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-500, #666);
    text-transform: uppercase;
}

/* Torleiv, 2026-08-20 (#10222061459): "se om du finner løsning der en/no-tag
   + lenke står i samme posisjon nedover" — this wrapper, not each badge, owns
   the push-to-the-right, so the language tag and the public-link icon line up
   in the same spot down the list regardless of which combination a given row
   actually has. */
.toc-list__row-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Torleiv, 2026-08-21 (#10226245076, "TOC må ha globe og språk i rett
   kolonne") — rendered even when a row has no language tag (see
   systems/_toc.html.erb), so this reserves a fixed-width column instead
   of collapsing to 0 and letting the icon slide left into its spot on
   those rows. Width covers the widest real tag (two letters, e.g. "NO"/
   "EN") plus a little breathing room; text-align: center keeps a single
   narrower tag looking intentional, not left-jammed against the icon. */
.toc-list__language-tag {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
}

/* Torleiv, 2026-08-20 (#10222061459/#10222139211): "mulig å slå på
   offentlig deling [fra] toc" — a quiet icon-only trigger, matching
   .toc-list__public-icon's own muted color so it reads as "same slot,
   not-yet-active state" rather than a loud new call to action. Only
   rendered for the owner/approver who's actually allowed to flip this
   (see systems/_toc.html.erb's can_share_document). */
.toc-list__share-button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-500, #666);
}

.toc-list__share-button:hover {
    color: var(--text-900, #111);
}

/* Two click zones on the same row: the title text (.toc-list__link)
   navigates via its own <a> behavior; the rest of the row toggles the
   heading sub-list open/closed (see disclosure_controller.js#toggleUnlessLink). */
.toc-list__row:has(.toc-list__disclosure) {
    cursor: pointer;
}

/* The actual drag target (sortable_toc_controller.js restricts SortableJS's
   handle option to this class specifically — #10276047895, so a touch
   anywhere else on the row is always free for scrolling), matching the
   app's hover-only editing-affordance convention (see .system-settings__trigger)
   for when it's shown rather than showing at rest. */
.toc-list__drag-handle {
    cursor: grab;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.toc-list__item:hover .toc-list__drag-handle,
.toc-list__item:focus-within .toc-list__drag-handle {
    opacity: 1;
}

/* A non-draggable row (shared shortcuts like IMS-arkitektur/Stilguide,
   see folders/_personal_toc_document.html.erb and _personal_toc.html.erb)
   still renders this icon to reserve its layout space, so the row's text
   lines up with every draggable sibling instead of sitting flush with the
   edge — but it must never actually appear, hover or not. */
.toc-list__drag-handle--placeholder,
.toc-list__item:hover .toc-list__drag-handle--placeholder {
    cursor: default;
    opacity: 0;
}

/* Collapsed by default (see disclosure_controller.js) — a chapter's heading
   sub-items are noise until asked for. Purely a visual indicator (not its
   own click target) — the click handler lives on .toc-list__row. */
.toc-list__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: var(--space-1);
    color: color-mix(in srgb, var(--text-900) 40%, transparent);
}

/* 2026-08-28 (#10251049374, "Toc vilkår og avtaler - la ikoner flyte mot
   høyre"): found live — .toc-list__row-meta ALSO carries its own
   margin-left: auto (see that rule's own comment), and when both
   siblings claim an auto margin, flexbox splits the row's free space
   EQUALLY between the two rather than pushing both flush right — the
   language tag/share icon ended up stranded with a big gap before the
   chevron instead of sitting right next to it. Only override the
   adjacent-sibling case (row-meta present) — a row with no row-meta at
   all (a Folder, or a Document with no tag/share icon) still needs
   .toc-list__disclosure's own auto margin above to push the lone
   chevron flush right by itself. */
.toc-list__row-meta + .toc-list__disclosure {
    margin-left: 0;
}

/* Torleiv 13.10.2026 («taggene må lines opp, ikke flyte nedover»): samme
   sak som over, nå med TRE som krever plassen. Da statusmerkene kom inn i
   modullista (#10401635546) ble .toc-list__badges det tredje søskenet med
   margin-left: auto, ved siden av row-meta og disclosure — og flexbox
   deler den ledige plassen likt mellom dem alle. Merkene havnet derfor
   et sted som fulgte tittelens lengde: målt til 366 px sprik mellom
   lengste og korteste rad.

   Badges er FØRST i rada, så den beholder sin auto og eier
   skyvet-til-høyre. De to andre nullstilles når de står etter den.
   Rader uten merker (en mappe, en lenke) treffes ikke av disse
   selektorene og beholder sin egen auto, som før. */
.toc-list__badges + .toc-list__row-meta,
.toc-list__badges + .toc-list__disclosure,
.toc-list__badges + .toc-list__row-meta + .toc-list__disclosure {
    margin-left: 0;
}

.toc-list__disclosure i {
    transition: transform 0.15s ease;
}

.toc-list__disclosure[aria-expanded="true"] i {
    transform: rotate(90deg);
}

/* A folder row (folders/_personal_toc_folder.html.erb) has several
   distinct click targets on the same row (name renames, delete deletes),
   unlike a heading row's single "anywhere toggles" click zone — so its
   own disclosure toggle is a real, explicit button rather than a purely
   visual indicator, and sits right after the drag handle instead of
   pushed to the end of the row via margin-left: auto. */
.toc-list__disclosure--folder {
    margin-left: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.toc-list__folder-name-wrap {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.toc-list__folder-name {
    cursor: text;
}

.toc-list__folder-name:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.toc-list__folder-name-form {
    flex: 1;
    min-width: 0;
}

.toc-list__folder-name-input {
    width: 100%;
    font: inherit;
    font-weight: 600;
    border: 1px solid var(--signal-color);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
    background: var(--card-bg);
}

/* Same hover-revealed affordance as the drag handle right next to it —
   a delete icon showing at rest on every single folder row would be
   visually loud for an action that's rarely used. */
/* 15.09.2026 (UX review, #10306664278): the three folder actions and the
   drag handle were revealed by :hover only. They are real links/buttons
   in the tab order, so a keyboard user tabbed onto invisible controls —
   including «Slett mappe». :focus-within on the row shows the whole set
   while any of them has focus (same rule .lexxy-caption-toggle already
   follows); hidden at rest is unchanged. */
.toc-list__folder-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: color-mix(in srgb, var(--text-900) 35%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.toc-list__item:hover .toc-list__folder-delete,
.toc-list__item:focus-within .toc-list__folder-delete,
.toc-list__folder-delete:focus-visible {
    opacity: 1;
}

.toc-list__folder-delete:hover {
    color: var(--danger-color);
}

/* Torleiv, 2026-08-19 ("+mulighet for undermapper også"): same hover-reveal
   affordance as .toc-list__folder-delete right above, just for adding a
   subfolder instead of removing this one — green instead of red since it's
   a constructive action, not a destructive one. */
.toc-list__folder-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: color-mix(in srgb, var(--text-900) 35%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.toc-list__item:hover .toc-list__folder-add,
.toc-list__item:focus-within .toc-list__folder-add,
.toc-list__folder-add:focus-visible {
    opacity: 1;
}

.toc-list__folder-add:hover {
    color: var(--signal-color);
}

/* Torleiv, 2026-08-20 (#10224015214): "Last ned som zip" moved from one
   page-level button to a per-folder action — same hover-reveal affordance
   as .toc-list__folder-add/-delete right next to it, neutral color since
   it's neither constructive nor destructive. */
.toc-list__folder-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: color-mix(in srgb, var(--text-900) 35%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.toc-list__item:hover .toc-list__folder-download,
.toc-list__item:focus-within .toc-list__folder-download,
.toc-list__folder-download:focus-visible {
    opacity: 1;
}

.toc-list__folder-download:hover {
    color: color-mix(in srgb, var(--text-900) 75%, transparent);
}

/* Torleiv, 2026-08-19 ("vis format, størrelse og navn på filer"): format +
   size, muted and pushed to the row's far side — informational, not the
   thing a reader scans for first (the name already carries that). */
.toc-list__file-meta {
    margin-left: auto;
    padding-right: var(--space-2);
    color: color-mix(in srgb, var(--text-900) 45%, transparent);
    font-size: var(--text-size-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Opens the file in a new tab — separated from the name itself now that
   the name is the rename-trigger (see folders/_toc_uploaded_file.html.erb's
   own comment for why those two can't be the same click target anymore). */
.toc-list__file-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    flex-shrink: 0;
}

.toc-list__headings {
    margin-top: var(--space-1);
}

.toc-list__heading {
    padding: 0;
}

.toc-list__heading-link {
    display: block;
    padding: var(--space-1) 0;
    padding-left: var(--space-6);
    font-size: var(--text-size-xl);
    color: color-mix(in srgb, var(--text-900) 80%, transparent);
}

/* A document's own h3s nested under one of its h2s — deeper indent and a
   visibly lighter/smaller treatment than the h2 rows around it, so a flat
   disclosure list (h1/h2/h3 all queried together, see Document#headings)
   still reads as a hierarchy instead of one undifferentiated list. */
.toc-list__heading-link--level-3 {
    padding-left: var(--space-8);
    font-size: var(--text-size-base);
    color: color-mix(in srgb, var(--text-900) 60%, transparent);
}


} /* @layer overrides */

/* Torleiv, 10.09.2026 (#10285378177, to skjermbilder: «Kan du beholde
   ramme rundt i edit-modus også?»): lesevisningen er en tydelig avgrenset
   boks (.click-to-edit__display, med vilje lik .ui-input så ingenting
   flytter seg når feltet aktiveres), mens Lexxy-editoren den byttes ut
   med hadde sin egen, mye rundere ramme — og på leverandørsiden ingen i
   det hele tatt, fordi sand_ui slår den av for enhver .ui-box (se
   unntaket i sand_ui/components/document.css).

   BEVISST UTENFOR @layer, samme grunn som lexxy-toolbar sin sticky-regel
   i 05_buttons_and_rich_content_editor.css: lexxy.css er ulaget, og en
   ulaget regel slår ENHVER laget regel uansett spesifisitet. Skrevet
   inne i @layer overrides tapte border-radius mot lexxys egen
   `calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap))` — målt til
   6,45px mot lesevisningens 12px, altså to ulike bokser på samme felt.

   Verdiene er de samme tre som .click-to-edit__display bruker; endres den,
   må denne endres i samme slengen. */
.ui-document-rich-content-editor.supplier-compact-editor lexxy-editor,
.ui-document-rich-content-editor.supplier-assessment-editor lexxy-editor {
    border: var(--spaceing-xxs) solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
}

/* Verktøylinja er klistret øverst inne i den rammen, så dens egne hjørner
   må følge boksens — ellers stikker et kvadratisk hjørne ut av den
   avrundede kanten når man skroller i et langt felt. */
.ui-document-rich-content-editor.supplier-compact-editor lexxy-toolbar,
.ui-document-rich-content-editor.supplier-assessment-editor lexxy-toolbar {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

/* Torleiv, 16.09.2026 (#10306664607): the folder row's own actions —
   delete, add a subfolder, download, and the drag handle — were
   hover-only with no touch variant, so they did not exist on a phone at
   all. Same treatment as the supplier file list, and the same ::after
   fingertip area as .system-settings__trigger. */
@media (hover: none) {
    .toc-list__drag-handle,
    .toc-list__folder-delete,
    .toc-list__folder-add,
    .toc-list__folder-download {
        opacity: 1;
        position: relative;
    }

    .toc-list__drag-handle::after,
    .toc-list__folder-delete::after,
    .toc-list__folder-add::after,
    .toc-list__folder-download::after {
        content: "";
        position: absolute;
        inset: -9px;
    }
}

/* Torleiv, 16.09.2026 (#10309255105): mappefargen ble valgt, lagret — og
   aldri vist. Alle trærne tegnet samme ikon i én fast farge, så man valgte
   noe ingen kunne se etterpå.

   De tre verdiene er de samme sand_ui bruker i selve velgeren
   (.ui-folder[data-color], --amber-300/--red-300/--blue-300), så ikonet i
   treet har fargen på brikken man trykket på. Ikke en fjerde palett.

   Dette er steg én av anbefalingen i todoen: vis fargen først, og bestem
   etterpå om mappefarge er nyttig nok til å slås sammen med modulpaletten
   (tretten farger, definert i 07_workspace_home_and_people_list.css). Å
   utvide til tretten før noen har sett én, ville vært å avgjøre det
   spørsmålet uten å ha svaret. */
.toc-list__folder-icon--yellow {
    color: var(--amber-300);
}

.toc-list__folder-icon--red {
    color: var(--red-300);
}

.toc-list__folder-icon--blue {
    color: var(--blue-300);
}

/* Oversikten over dokumenter uten eier eller godkjenner (#10393104180,
   10.10.2026). Lista er lang — 90 av 97 etter nullstillingen — så raden
   må kunne skumleses: tittelen bærer, resten er støtte. */
.document-roles__lead {
    margin: 0;
}

.document-roles__group-lead {
    margin: 0 0 var(--space-sm, 0.5rem);
    color: color-mix(in srgb, var(--text-900) 70%, transparent);
}

.document-roles__link {
    font-weight: 600;
}

.document-roles__meta,
.document-roles__has {
    display: block;
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

.document-roles__number {
    font-variant-numeric: tabular-nums;
    margin-right: 0.4em;
}

/* Plassholderen for en rad uten overskrifter (13.10.2026). Den holder
   pilas kolonne åpen så statusmerkene til venstre står i linje nedover —
   uten den skjøv merkene seg 31 px til høyre på nettopp de radene.

   Samme grep som .toc-list__language-tag alt bruker for språkkolonnen.
   Ingen innhold, ingen peker: den er en avstand, ikke en kontroll. */
.toc-list__disclosure--placeholder {
    pointer-events: none;
}

/* BREDDEN LIGGER I INNHOLDET, ikke på boksen. Første forsøk satte
   width: 14px på selve plassholderen, og med box-sizing: border-box ble
   DET totalbredden — altså 14 mot pilas 23, og merkene sto fortsatt 9 px
   i spenn. Målt, ikke antatt.

   En tom boks på ikonets egen størrelse (ui_icon_regular "caret-right",
   size: 14) pluss paddingen den arver fra .toc-list__disclosure gir
   nøyaktig samme ytre mål som en ekte pil, uten at tallet 23 står noe
   sted — det ville brutt første gang noen endret paddingen. */
.toc-list__disclosure--placeholder::before {
    content: "";
    display: block;
    width: 14px;
}

/* DIFF PÅ KLADDER (Torleiv 16.10.2026: «diff må vises eller kunne vises
   på kladder»).

   SAMME FARGESPRÅK som versjonshistorikken rett over, og det er ikke
   pynt: grønt tillegg og rød stryking er det leseren alt har lært ett
   sted i appen. En diff med to nye farger ville vært en ny ting å lære
   for det samme budskapet.

   Reglene gjentas framfor å slå selektorene sammen: .version-timeline__diff
   setter også font-size: lg og line-height 1.6, som hører til
   tidslinjens egen typografi. Kladd-diffen står inne i
   .ui-document-rich-content og skal arve dokumentets. Slo jeg dem
   sammen, ville den ene fått den andres skriftstørrelse — nøyaktig den
   feilen som krympet all lesevisning til 14 px 10.09. */
.document-draft-diff {
    margin-bottom: var(--space-4);
}

.document-draft-diff__summary {
    cursor: pointer;
    font-weight: 600;
}

.document-draft-diff__against {
    color: var(--text-500, #777);
    margin: var(--space-1) 0 var(--space-2);
}

.document-draft-diff__body ins {
    background: rgba(47, 158, 68, 0.15);
    color: var(--success-color);
    text-decoration: none;
}

.document-draft-diff__body del {
    background: rgba(178, 47, 47, 0.12);
    color: var(--danger-color);
    text-decoration: line-through;
}


/* GODKJENNINGSVISNINGEN (#10412766267, Torleiv 16.10.2026).

   Knapperaden i info-boksen øverst. Bunnbåndet (.save-actions) står
   fast og følger med nedover, men på et langt dokument begynner man i
   toppen — og den som alt har lest teksten skal kunne svare med én
   gang, uten å lete. Torleiv: «må ha tydelige Godkjenn, Avvis-knapper i
   toppen, inni info-boksen».

   Samme rekkefølge som i bunnbåndet: Avvis før Godkjenn, mildest til
   sterkest, og det sterkeste til høyre der tommelen og blikket lander. */
.document-review__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

/* Tilstandsboksene: godkjent og avvist skal kunne skilles uten å lese.
   Farge OG en strek i kanten — en fargedimensjon alene leses ikke i
   gråtoner, og ikke av den som ikke skiller fargene. */
.document-review__state {
    border-inline-start: 4px solid var(--border-color);
}

.document-review__state--approved {
    border-inline-start-color: var(--signal-green, #2f7d4f);
}

.document-review__state--rejected {
    border-inline-start-color: var(--signal-yellow, #b8860b);
}