/* /stilguide reference samples, page-title-header grid with settings/nav-gear dialogs, person-mention chips, overlay card restyle.
   Split out of theme.css (original lines 4817-5448) — 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 {
/* /stilguide — a living reference of the design system as it actually
   exists today, not an idealized target (see app/views/style_guide). */
.style-guide__section {
    margin-top: var(--space-8);
}

/* .ark already has its own space-8 top padding — without this, the first
   section inside it (Logo) would get that PLUS its own space-8
   margin-top stacked on top, doubling the gap under the page lead
   paragraph compared to every section after it. */
.style-guide__ark .style-guide__section:first-child {
    margin-top: 0;
}

.style-guide__logo-sample {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg-muted);
    font-size: var(--text-size-xs);
}

.style-guide__logo-image {
    max-width: 100%;
    height: auto;
}

/* A live, working .ark right inside the section that explains what .ark
   is — the demonstration is the same real class, not a screenshot or a
   hand-drawn approximation of it. */
.style-guide__ark-sample {
    padding: var(--space-5);
    max-width: 24rem;
}

.style-guide__subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--text-size-lg);
    font-weight: 700;
}

.style-guide__note {
    max-width: 60ch;
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
    font-size: var(--text-size-base);
    line-height: 1.5;
}

.style-guide__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.style-guide__swatch {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 9rem;
    font-size: var(--text-size-xs);
}

.style-guide__swatch-color {
    display: block;
    width: 100%;
    height: 3rem;
    border-radius: var(--card-radius);
}

.style-guide__swatch-value {
    color: color-mix(in srgb, var(--text-900) 50%, transparent);
}

.style-guide__type-sample {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.style-guide__mono-sample {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: var(--text-size-sm);
}

.style-guide__digit-sample {
    align-self: flex-start;
    padding: var(--space-2) var(--space-3);
    border: var(--card-border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.75rem;
}

.style-guide__digit-caption {
    font-size: var(--text-size-xs);
    color: color-mix(in srgb, var(--text-900) 50%, transparent);
}

.style-guide__type-scale {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.style-guide__spacing {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.style-guide__spacing-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.style-guide__spacing-row code {
    width: 6rem;
}

.style-guide__spacing-bar {
    display: block;
    height: 1rem;
    background: var(--signal-color);
    border-radius: 3px;
}

.style-guide__radius-sample {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 5rem;
    border: var(--card-border);
    background: var(--card-bg-muted);
    font-size: var(--text-size-xs);
    text-align: center;
    line-height: 1.3;
}

.style-guide__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.style-guide__row--stack {
    align-items: flex-start;
}

/* The module title + its settings gear — used by documents/_toolbar.html.erb,
   shared/_page_title_header, and the ISMS-style hero header. A 3-column
   grid rather than a centered flex row: the title sits in the middle
   column and stays mathematically centered on the page (matching every
   other page title) because the two outer columns are always equal width
   (1fr each), regardless of the gear's own size — a flex row centering
   title+gear as one unit would instead pull the title itself off-center
   by roughly half the gear's width. */
.document-page-header__title-row,
.page-title-header__title-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
}

.document-page-header__title-row .document-page-header__title,
.page-title-header__title-row .page-title-header__title {
    width: auto;
    grid-column: 2;
}


/* Wraps whatever sits at the end of the title (document-nav-gear + the
   copy-link button; or, on a module's TOC front page, the bookmark toggle +
   system-settings gear) as one flex unit in the grid's 3rd column, instead
   of each icon needing its own placement rule. The module front page used
   to give system-settings its own bare `grid-column: 3` — with the
   bookmark toggle as an unpositioned sibling, CSS Grid's auto-placement
   claimed column 3's row for the toggle FIRST (browsers place unpositioned
   items before resolving later ones with explicit positions), pushing the
   gear into an auto-generated second row below the title entirely — not
   just misaligned from the star, but detached from the title row
   completely (Torleiv, 2026-08-11, screenshot). Confirmed via
   getBoundingClientRect in the real dev page before fixing: column 3
   starts flush against the title's own right edge regardless of how wide
   the two balancing 1fr columns are, so wrapping both icons here keeps
   them right next to short titles like "ISMS" without sacrificing the
   centering this grid exists for. */
.document-page-header__title-row .document-page-header__title-actions,
.page-title-header__title-row .page-title-header__title-actions {
    grid-column: 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* #10276047895 (mobilgjennomgang, funnet med getBoundingClientRect på
   /hms-internkontroll ved 375px: siden skrollet 7px sidelengs): the
   centering grid above can't hold both a title and an action group on a
   phone. "HMS/Internkontroll" is 213px and the Bokmerk+gear pair is 124px,
   which with the two balancing 1fr columns needs 353px of a 317px row —
   so column 3 simply ran off the screen, taking the whole page's
   horizontal scroll with it.
   Below 640px the actions get their own centered row underneath instead.
   Both items pinned to column 1 of a single-column grid, so normal row
   auto-placement stacks them — and the title stays centered, which is the
   point of this header on mobile too (see Torleiv's own screenshots).
   Robust for any title length rather than tuned to this one page. */
@media (max-width: 640px) {
    .document-page-header__title-row,
    .page-title-header__title-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .document-page-header__title-row .document-page-header__title,
    .page-title-header__title-row .page-title-header__title,
    .document-page-header__title-row .document-page-header__title-actions,
    .page-title-header__title-row .page-title-header__title-actions {
        grid-column: 1;
        justify-self: center;
    }
}

/* Invisible until the title row is hovered/focused — explicitly requested
   over the app's usual "faintly visible at rest" gear treatment (see
   .workspace-shortcut__gear) for this specific control. Only the
   module-settings gear (systems/show.html.erb's single-document front
   page) still lives in the title row this way — the per-document nav
   gear moved into the ••• menu instead (see documents/_toolbar). */
.system-settings__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--space-1);
    color: color-mix(in srgb, var(--text-900) 45%, transparent);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* 15.09.2026, første kjøring av /web-design-guidelines: `outline: none`
   sto her uten erstatning, så tannhjulet var usynlig for den som tabber
   seg fram. Samme ring som .isms-status-summary-attention__link bruker;
   :focus-visible, så et museklikk ikke tegner den. */
.system-settings__trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-900) 35%, transparent);
    border-radius: var(--radius-md, 6px);
}

.document-page-header__title-row:hover .system-settings__trigger,
.page-title-header__title-row:hover .system-settings__trigger,
.system-settings__trigger:focus-visible {
    opacity: 1;
}

/* #10281061392 (mobile round 2): hover-revealed means never revealed on
   a phone — the module's settings were unreachable there. Shown where
   nothing can hover, with a fingertip-sized hit area around the 26px
   button (see .ui-box__gear's own note in 09_profile_and_dialogs.css). */
@media (hover: none) {
    .system-settings__trigger {
        opacity: 1;
        position: relative;
    }

    .system-settings__trigger::after {
        content: "";
        position: absolute;
        inset: -9px;
    }
}

/* opacity:1 above only reveals the icon — same gap as .workspace-hero__gear
   had, a keyboard user still needs an actual ring to see it's specifically
   focused, not just hover-adjacent. Matches .workspace-shortcut__gear's
   own focus-visible ring. */
.system-settings__trigger:focus-visible {
    box-shadow: 0 0 0 2px var(--signal-color);
}

/* Per-document settings dialog (show/hide prev-next, TOC link, own TOC
   sidebar) — same modal chrome as .system-settings__dialog. */
/* #10246995725 (2026-08-28): switched from top/left/transform centering
   to inset+margin:auto — see .org-chart-box-dialog's own comment
   (11_org_chart.css) for the full Chromium-151-regression reasoning this
   applies to every dialog in the app sharing the old pattern, not just
   the one it was first caught on. */
.document-nav-gear__dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 22rem;
    max-width: calc(100dvw - var(--space-6));
    max-height: calc(100vh - var(--space-6) * 2);
    overflow-y: auto;
    padding: var(--space-6);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--dialog-shadow);
    text-align: left;
}

/* «Legg bort»-dialogen (19.10.2026): spørsmålet og merkelappen over
   feltet sto klistret sammen, så de leste som én setning. Luft mellom
   dem, og feltet får plass til et par linjer uten å vokse. */
.discard-dialog__label {
    display: block;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.document-nav-gear__dialog::backdrop {
    background: var(--dialog-backdrop);
}

/* Torleiv, 2026-08-13 ("Todoer, oppfølging, venter på meg") — the approval
   confirm dialog shares .document-nav-gear__dialog's chrome (same corner
   close button, same title/actions layout) but needs real reading room for
   the document body inside it, not the 22rem width tuned for a couple of
   form fields (see .document-nav-gear__dialog above). */
.task-approval-dialog {
    width: 40rem;
}

.task-approval-dialog__document {
    max-height: 50vh;
    overflow-y: auto;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg-muted);
}

.document-nav-gear__title {
    margin: 0 0 var(--space-4);
    padding-right: 2rem;
    font-family: var(--font-sans);
    /* Matched to .system-settings__title's own 1.25rem — this dialog was
       always meant to share its chrome (see the comment above
       .document-nav-gear__dialog). Kept raw, not a --text-size-* token:
       a dialog title, not body/UI text — well above --text-size-xl's
       1.05rem ceiling, same reasoning as the page-headline sizes
       elsewhere in this file (.document-page-header__title etc). */
    font-size: 1.25rem;
    font-weight: 700;
}

.document-nav-gear__checkbox {
    display: block;
    padding: var(--space-1) 0;
    font-size: var(--text-size-base);
}

.document-nav-gear__select-label {
    display: block;
    padding: var(--space-2) 0;
    font-size: var(--text-size-base);
}

.document-nav-gear__select-label select,
.document-nav-gear__select-label input {
    display: block;
    width: 100%;
    margin-top: var(--space-1);
}

.document-nav-gear__actions {
    display: flex;
    /* Torleiv, 16.09.2026 (#10309549522, «all tekst må vises»): three
       buttons, one of them «Lagre og send til godkjenning», do not fit
       this dialog's 22rem on one line — they overflowed past its left
       edge and the longest label was cut in half. Wrapping keeps every
       label whole and still right-aligned; the row grows downwards
       instead of out of the box. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--text-900) 8%, transparent);
}

/* Reusable close-X for every native <dialog> in the app (nav-gear, global
   search, module settings) — shared/_dialog_close_button.html.erb. Each
   dialog it's used in has `position: fixed`, making it this button's
   containing block, so top/right here always means that dialog's own
   corner regardless of the dialog's size or on-screen position. */
.dialog-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: color-mix(in srgb, var(--text-900) 45%, transparent);
    cursor: pointer;
    transition: background 0.15s ease;
}

.dialog-close:hover {
    background: color-mix(in srgb, var(--text-900) 8%, transparent);
}

/* Module settings dialog (rename, front-page layout, tools) — a real
   modal, not a dropdown, since it's a multi-field form rather than a
   single quick action. Centered the same way .app-confirm-dialog is. */
.system-settings__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 26rem;
    max-width: calc(100dvw - var(--space-6));
    padding: var(--space-6);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--dialog-shadow);
    text-align: left;
}

.system-settings__dialog::backdrop {
    background: var(--dialog-backdrop);
}

.system-settings__form {
    display: flex;
    flex-direction: column;
}

/* Kept raw — see the comment on .document-nav-gear__title above. */
.system-settings__title {
    margin: 0 0 var(--space-4);
    padding-right: 2rem;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
}

.system-settings__radios {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

/* Two columns instead of one long list — Verktøy grew from 4 to 7 entries
   tonight (Torleiv, 2026-08-10) and a single column was starting to make
   the whole dialog feel like an endless flat stack. */
.system-settings__checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-1);
}

.system-settings__radio,
.system-settings__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-size-base);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Between each of the dialog's top-level fields (Navn/Oppsett/Offentlig
   tilgang/Verktøy) — the dialog picked up its 4th field tonight and a
   plain margin-top between plain labels no longer read as distinct
   groups, just one long stack (Torleiv, 2026-08-10). Same border token as
   .system-settings__danger-zone's own divider, just without that one's
   extra padding-top (this sits between form fields, not before a whole
   separate actions row). */
.system-settings__divider {
    border: none;
    border-top: var(--card-border);
    margin: var(--space-4) 0;
}

/* Snarveier lives inside the Verktøy field rather than as its own
   divided section — which of the checked-off tools get a shortcut card
   is a detail OF Verktøy, not a separate concern, so a lighter dashed
   rule (vs. the solid .system-settings__divider above) keeps it visually
   grouped with the checkboxes above it instead of reading as a 5th
   top-level field. */
.system-settings__subsection {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed color-mix(in srgb, var(--text-900) 14%, transparent);
}

.system-settings__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* Archive/delete — set apart from the rename/layout/tools form above by a
   divider and left-aligned (Avbryt/Lagre stay right-aligned above), so
   this doesn't read as one more pair of options in that same form. */
.system-settings__danger-zone {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: var(--card-border);
}

/* Same ghost/size-sm shape as every other button in this dialog (see
   .person-admin-actions__item--danger) — only the label color marks these
   as the risky ones. */
.system-settings__danger-action {
    color: var(--danger-color);
}

/* Nested inside .system-settings__dialog's own <dialog> — native <dialog>
   stacking handles a second showModal() on top without any z-index of our
   own to manage. */
.system-delete-dialog {
    /* #10281061392 (mobile round 2): a flat 24rem is 384px — wider than a
       375px phone, and .app-confirm-dialog's own max-width is the same
       24rem, so nothing capped it. Measured, not eyeballed: every other
       dialog in the app already carries calc(100vw - var(--space-6)). */
    width: min(24rem, calc(100dvw - var(--space-6)));
}

.system-delete-dialog__code {
    margin: 0 0 var(--space-4);
    font-family: ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
}

/* @-mention chip inserted into a document body (see people/_person.html.erb,
   used as the lexxy-prompt "editor" template for the @ trigger) — opens the
   person's full profile card (people/_card.html.erb) in the shared "modal"
   turbo-frame rather than navigating straight to their profile page.
   Torleiv, 2026-08-18 ("Bruk 'utvidet modal' alle steder"): used to open a
   narrower, mention-specific card with no edit/share/bookmark affordances
   (people/_mention_card.html.erb, now deleted) — every person-modal trigger
   in the app opens the same card now. */
/* Lexxy wraps every custom attachment (mentions included) in its own
   <action-text-attachment> element and sets it to `display: inline-flex;
   align-items: center` app-wide (lexxy-content.css) — built for its own
   block-level file/image preview cards, not an inline text pill. Two
   problems for a mention specifically: an inline-flex box's own
   participating child gets "blockified" per the flex spec regardless of
   the child's own `display` value, and a centered flex container has no
   real text baseline to align on — together, that's what floated the
   pill above the surrounding line instead of sitting on it. Restoring
   plain inline flow here fixes both at once, since our single <a> child
   no longer participates in flex layout at all. The exact content-type
   match plus :has() together outrank lexxy's own (prefix-matching)
   attribute selector on specificity — a bare :has() ties it exactly
   (its specificity is its argument's, not additive), which would still
   lose to lexxy.css loading AFTER this file (see shared/_head.html.erb). */
action-text-attachment[content-type="application/vnd.actiontext.mention"]:has(.person-mention) {
    display: inline;
    align-items: unset;
}

/* A pill chip, not a plain blue link — avatar + name only, no @ prefix, no
   initials. Explicit `display: inline` (not inline-flex/inline-block) so
   the name text is a normal run of text sharing the surrounding
   paragraph's baseline — needed to beat lexxy's own
   `a:has(img, video, embed, object) { display: inline-block }` (any link
   wrapping a media element, lexxy-content.css), which otherwise applies
   unopposed since nothing here used to declare `display` at all. Higher
   specificity here (one class beats lexxy's tag+:has()) means this wins
   regardless of stylesheet load order, no extra trickery needed the way
   the action-text-attachment override above needed. Only the avatar
   image gets its own vertical-align, the usual trick for an icon next to
   text. No font-weight override either — it should read as part of the
   sentence, same weight as the body text around it. */
.person-mention {
    display: inline;
    padding: 0.05em 0.5em 0.05em 0.15em;
    background: color-mix(in srgb, var(--text-900) 4.5%, transparent);
    border-radius: var(--radius-pill);
    color: inherit;
    text-decoration: none;
}

.person-mention:hover {
    background: color-mix(in srgb, var(--text-900) 7.5%, transparent);
}

.person-mention .profile-picture {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.2em;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* Torleiv, 2026-08-14 ("Person-visning"): PeopleHelper#person_link reuses
   this same .person-mention pill outside of rich-text bodies (Company's
   Styret/Daglig leder, comment bylines) — those go through person_avatar
   (a .ui-avatar img or an initials-placeholder div), not the mention
   template's own bare <img class="profile-picture">, so someone with no
   photo still shows their initials instead of nothing. Same sizing as
   .profile-picture above, just targeting the other markup shape. */
.person-mention .ui-avatar {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.2em;
    vertical-align: middle;
    font-size: 0.6em;
}

/* Torleiv, 2026-08-15 ("Person-visning" comment: "mentions: større bilde på
   selskapsinfo"). person_link's own doc comment above already notes Company's
   Styret/Daglig leder as one of two call sites sharing .person-mention's
   default 1.1em icon-scale sizing — right for an inline @-mention inside a
   sentence, too small once it's the ONLY content of an access-list row.
   #brreg_section is that row's own container (company/_brreg_section.html.erb)
   and — per PeopleHelper#person_link's grep — the sole current caller of
   person_link, so this scoped override only touches Styret/Daglig leder, not
   prose mentions or (if person_link ever gains another caller) that caller's
   own row. Font-size scaled up to match (0.6em -> 1em) so a photoless
   holder's initials placeholder grows with the circle instead of shrinking
   into it.

   Torleiv, 17.09.2026 («avatar er for liten», skjermbilde av Intern
   tjenesteeier på Anthropic-leverandøren): samme sak, flere steder. Da
   dette ble skrevet var Styret/Daglig leder det eneste stedet en omtale
   sto alene i en rad; siden har person_link blitt koblet inn på
   leverandørens tjenesteeier, risikoens og avvikets ansvarlige, og på
   brikken i personvelgeren. Alle fire er samme slag: omtalen ER verdien i
   feltet, ikke et navn inne i en setning. 1.1em er riktig for det andre og
   for lite for dette.

   Scoped til feltbeholderne, ikke til .person-mention selv: en omtale i
   rik tekst, i en bevisloggrad (.controls-row__meta) eller i
   rollelista på organisasjonssida står fortsatt midt i tekst, og skal
   fortsatt være på ikonstørrelse. */
#brreg_section .person-mention,
.click-to-edit__display .person-mention,
.controls-detail__value .person-mention,
.person-mention-field .person-mention {
    padding: 0.15em 0.6em 0.15em 0.15em;
}

#brreg_section .person-mention .ui-avatar,
.click-to-edit__display .person-mention .ui-avatar,
.controls-detail__value .person-mention .ui-avatar,
.person-mention-field .person-mention .ui-avatar {
    width: 2em;
    height: 2em;
    margin-right: 0.35em;
    font-size: 1em;
}

/* Job title line in the person profile popup (people/_card.html.erb,
   .ui-overlay-card — the small "torn paper" card, shared by every trigger:
   @-mentions, org chart avatars, comment authors, the Binder's people list). */
.mention-card__title {
    margin: 0 0 var(--space-2);
    color: color-mix(in srgb, var(--text-900) 60%, transparent);
    font-size: var(--text-size-base);
}

/* Every modal in the app (this card, form modals in links/folders/meetings)
   used sand_ui's raw, never-restyled default: a diagonal-stripe backdrop
   and a second, rotated "torn paper" duplicate layer behind the card —
   generic framework look, not Stomn's own (Torleiv, 2026-08-12: "endre
   personmodal til stomn-stil"). Plain dimmed backdrop and a clean single
   card instead, matching .ui-box's own visual language elsewhere. */
.ui-overlay .overlay-bg {
    background: rgba(28, 25, 20, 0.5);
}

.ui-overlay-card {
    box-shadow: 0 12px 32px rgba(28, 25, 20, 0.2);
}

/* Torleiv, 2026-08-16 ("boksen er smalere enn kode-holderne" / "modal
   vinduet er for smalt"): sand_ui's own .ui-overlay-card is fixed at
   300px, sized for the small person-profile popup — the signature
   modal's 6 code-input__digit boxes alone are already ~330px wide
   (6 × 3rem + 5 × var(--space-2) gaps), before the card's own padding,
   so the card was clipping its own content. Raising max-width only
   (min-width/width:100% stay sand_ui's own, so this still shrinks
   correctly on a narrow viewport) — scoped to this modifier, not a
   change to the base class, since the small person-card popup should
   stay exactly as narrow as it already was. */
.ui-overlay-card--wide {
    max-width: 440px;
}

/* Basecamp #10273275033 ("Ønsker at dokumenter åpnes i modal ved klikk"):
   a document (PDF/image/markdown) needs far more room than the 440px
   --wide modifier above gives the signature code-input modal it was
   sized for — a separate modifier rather than growing --wide, since that
   modal should stay exactly as narrow as it already was. 800px matches
   this app's own existing precedent for "document-sized" overlay content
   (sand_ui's .ui-popover-container .ui-document, used by the
   meeting-scheduling popover). */
.ui-overlay-card--document {
    max-width: 800px;
}

.document-preview__embed {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--border-color-light);
    border-radius: var(--rounded);
}

.document-preview__image {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    border-radius: var(--rounded);
}

/* Commonmarker's own output (headings, paragraphs, lists) — scoped
   instead of relying on browser defaults, and capped/scrollable so a
   long document doesn't blow out the modal instead of the page. */
.document-preview__markdown {
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--border-color-light);
    border-radius: var(--rounded);
    line-height: 1.5;

    h1, h2, h3, h4, h5, h6 {
        margin: var(--space-4) 0 var(--space-2);
    }

    h1:first-child, h2:first-child, h3:first-child {
        margin-top: 0;
    }

    p, ul, ol, pre, blockquote {
        margin: 0 0 var(--space-3);
    }

    pre {
        overflow-x: auto;
        padding: var(--space-2);
        background: var(--ui-50);
        border-radius: var(--rounded);
    }

    blockquote {
        margin-left: 0;
        padding-left: var(--space-3);
        border-left: 2px solid var(--border-color-light);
        color: color-mix(in srgb, var(--text-900) 70%, transparent);
    }
}

/* Torleiv, 2026-08-17 (mobile audit): sand_ui's own .ui-popover-container
   (used by the meeting-scheduling popover) is fixed at width: 800px with
   margin: 0 var(--spaceing) on each side — on a 375px phone that forces
   the popover to overflow the viewport and clip/scroll horizontally.
   max-width only (width/margin stay sand_ui's own) so this still renders
   at the intended 800px on anything wide enough for it. */
.ui-popover-container {
    max-width: calc(100dvw - 2 * var(--spaceing));
}

.ui-overlay-card::after {
    content: none;
}

.ui-overlay-card .outcut {
    display: none;
}

/* Leverandørdokumentasjon som en Finder-liste — Basecamp #10272495310
   (mapper, egen sortering, beskrivelse), #10280951579 ("Vis opplastede
   filer mer kompakt") og til slutt #10281481456 ("Lag enda mindre og mer
   plassbesparende. Nesten på finder-nivå"), som er formen den har nå:
   fire kolonner (Navn, Størrelse, Type, Dato), én linje per fil, og
   leverandøren selv som rotmappe. Brukes av både skrive- og
   lesevisningen på suppliers/show.html.erb. */
.doc-finder {
    border: 1px solid var(--border-color-light);
    border-radius: var(--rounded);
    overflow: hidden;
}

/* Rutenettet ALLE rader deler — kolonneoverskriftene, mapperadene og
   filradene — så kolonnene står i flukt uansett hvor dypt en rad ligger.
   Innrykket legges på navnecella alene (--doc-finder-indent lenger nede),
   ikke på raden, nettopp for at de tre høyre kolonnene skal bli stående. */
/* #10289915888. Listas egen fot: «Ny mappe» hørte til lista, men lå
   under boksen som løs understreket tekst, rett over neste
   seksjonstittel — uten tilhørighet til noen av dem. Toppkanten skiller
   handlingen fra radene uten å lage en ny boks. */
/* 15.09.2026 (UX review): a supplier with no files and no folders — one
   line saying so, with the same footer (Ny mappe, Last opp fil) as the
   list would have had. Not .doc-finder, so nothing that counts lists
   mistakes it for one. */
.doc-finder-empty {
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-3) var(--space-4) 0;
}

.doc-finder-empty__text {
    margin: 0 0 var(--space-2);
}

.doc-finder__footer {
    display: flex;
    align-items: center;
    /* Høyrestilt (Torleiv, 10.09.2026: «i foten, men på høyre side»).
       Venstrekanten er filnavnkolonnen — en handling som starter der
       leser seg som nok en rad i lista. Høyre side er der radenes egne
       handlinger allerede ligger (.doc-finder__actions), så knappen
       lander i den kolonnen øyet alt bruker til å handle. */
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-2);
    border-top: 1px solid var(--border-color-light);
}

.doc-finder__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem 5rem 8.5rem 6.5rem 4rem;
    align-items: center;
    gap: var(--space-2);
    padding: var(--spaceing-xs) var(--space-2);
    min-height: var(--space-5);
}

.doc-finder__columns {
    border-bottom: 1px solid var(--border-color-light);
    background-color: var(--ui-50);
    font-size: var(--font-size-sm);
    color: var(--text-500);
    letter-spacing: var(--letter-spacing-xs);
    text-transform: uppercase;
}

.doc-finder__name {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    padding-left: var(--doc-finder-indent, 0);
    color: inherit;
    text-decoration: none;
}

.doc-finder__filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.doc-finder__name:hover .doc-finder__filename {
    text-decoration: underline;
}

.doc-finder__name--destroyed {
    color: var(--text-500);
    text-decoration: line-through;
}

/* Statuskolonnen — se suppliers/_documentation_flags.html.erb for hvorfor
   merkelappene ble til ikoner. */
.doc-finder__flags {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.doc-finder__flag {
    display: inline-flex;
    cursor: help;
}

/* #10290049345. The wrapper exists only to give hover_popover_controller
   an element to hang mouseenter/focusin on that covers both the icon and
   nothing else — inline-flex so it takes the icon's own size rather than
   a text line's. */
.doc-finder__flag-wrap {
    display: inline-flex;
}

/* #10290044754. DPA-raden kan bære to lenker — leverandørens publiserte
   avtale og vårt eget eksemplar. De skal leses som to, ikke flyte
   sammen til én setning, så de stables med luft mellom framfor å ligge
   inline. */
.dpa-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.dpa-value__own {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* #10318090911: advarselen under «vårt eksemplar av avtalen» når feltet
   peker på et avløst eller tømt vedlegg.

   --warning-color, ikke --amber-600: den siste måler 1,58:1 mot bakgrunnen
   og er ikke lesbar som tekst (se 01_foundation_and_header.css). Ikonet
   bærer meldingen uten farge, for den som ikke skiller dem. */
.dpa-stale-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    color: var(--warning-color);
    font-size: var(--text-size-sm);
    line-height: 1.4;
}

/* Same position: fixed reasoning as .assessment-dot-popover — see
   hover_popover_controller.js. Text only here, so no list/link rules:
   this one carries one sentence, not a set of links.

   .hover-popover-box er det NØYTRALE navnet, og det er det nye kall skal
   bruke. .doc-finder__flag-popover står igjen fordi filfinneren allerede
   heter det. Hjelpetegnet i click_to_edit lånte det navnet 23.09.2026 og
   ble et dokumentflagg i alt annet enn navnet — og en systemtest som
   målte «første .doc-finder__flag-popover i DOM-en» traff da en skjult
   hjelpeboks i stedet for tooltipen den nettopp hadde åpnet. Et delt
   utseende skal ha et delt navn; et lånt navn ser ut som en sammenheng
   som ikke finnes. */
/* ⓘ-knappen ved en etikett (#10382727630, 07.10.2026). Den bærer «resten»
   av en hjelpetekst, slik at kontrollen selv kan nøye seg med én setning.

   En ekte <button> og ikke et <span>: den skal nås med tabulator og
   utløses med mellomrom, og den har en aria-label. Et ikon man bare kan
   holde musa over, finnes ikke for den som bruker tastatur.

   vertical-align: middle fordi den står inne i en <label> ved siden av
   tekst — uten den sitter ikonet på skriftlinjen og drar etiketten skjev. */
.field-help {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-left: var(--space-1);
    vertical-align: middle;
}

.field-help__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 24 x 24 klikkflate (WCAG 2.2, 2.5.8) rundt et ikon på 15. Boksen er
       usynlig; ikonet står der det står. */
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: color-mix(in srgb, var(--text-900) 45%, transparent);
}

.field-help__trigger:hover,
.field-help__trigger:focus-visible {
    color: var(--text-900);
}

.hover-popover-box,
.doc-finder__flag-popover {
    display: none;
    position: fixed;
    z-index: 20;
    /* width: max-content is doing real work, not tidying. Without it the
       box shrank to 82px and wrapped the sentence to roughly one word per
       line — measured, not guessed. .assessment-dot-popover papers over
       the same thing with min-width: 180px; max-content is the honest
       version, since this tooltip's length varies with the date in it. */
    width: max-content;
    max-width: 280px;
    padding: var(--space-2) var(--space-3);
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(28, 25, 20, 0.18);
    font-size: var(--text-size-xs);
    color: var(--text-600, #666);
    font-weight: 400;
}

.doc-finder__size,
.doc-finder__kind,
.doc-finder__date {
    font-size: var(--font-size-sm);
    color: var(--text-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tall i en kolonne skal stå under hverandre. */
.doc-finder__size,
.doc-finder__date {
    font-variant-numeric: tabular-nums;
}

.doc-finder__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* size-sm er 28px, og det er knappen — ikke teksten — som setter radhøyden
   i en liste som skal ned mot Finders 20-ish. Egen, mer spesifikk regel i
   samme lag som .ghost.size-sm-overstyringen i
   05_buttons_and_rich_content_editor.css (se dens egen kommentar om
   hvorfor den overstyringen i det hele tatt må finnes). */
.doc-finder__actions .ui-button.size-sm {
    height: var(--space-5);
    width: var(--space-5);
    min-width: 0;
    padding: 0;
}

/* Ett innrykk per nivå: leverandørmappa er rot (0), undermapper og
   løse filer ligger ett hakk inn, filer inne i en undermappe to. Dypere
   enn det finnes ikke — SupplierDocumentationFolder har ingen forelder.

   Steget var --space-4 (16 px). Torleiv, 14.09.2026 (skjermbilde av
   Customer.io: «gjør det litt tydeligere at filer ligger i mapper»):
   mapperadens chevron er like bred som filradens ikon, så med 16 px
   havnet et filnavn inne i en mappe ~5 px til VENSTRE for mappenavnet
   over — barnet leste som et søsken. Et tre leser først tydelig når
   barnets ikon starter under forelderens NAVN, ikke under chevronen:
   det er chevron + mellomrom + mappeikon + mellomrom, målt til ~40 px.
   Første forsøk med 28 px ga bare 9 px forskjell — for lite til å se.
   Ett token, tre steder som regner på det (nivå 1, nivå 2,
   historikklista), så steget kan justeres én gang. */
.doc-finder {
    --doc-finder-step: calc(var(--space-8) + var(--space-2));
}

.doc-finder__folder-body {
    --doc-finder-indent: var(--doc-finder-step);
}

.doc-finder__folder-body .doc-finder__folder-body {
    --doc-finder-indent: calc(2 * var(--doc-finder-step));
}

.doc-finder__folder-summary {
    cursor: default;
    list-style: none;
}

.doc-finder__folder-summary::-webkit-details-marker {
    display: none;
}

.doc-finder__folder-summary:hover,
.doc-finder__row:hover {
    background-color: var(--ui-50);
}

.doc-finder__caret {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

details[open] > .doc-finder__folder-summary .doc-finder__caret {
    transform: rotate(90deg);
}

.doc-finder__folder-name {
    min-width: 0;
    display: flex;
}

.doc-finder__folder-name-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
}

.doc-finder__unfiled-header {
    color: color-mix(in srgb, var(--text-900) 60%, transparent);
    font-size: var(--font-size-sm);
}

/* Torleiv, 10.09.2026: «uten mappe kan kanskje sløyfes?» — skjermbildet
   viser den som en etikett over ingenting, fordi alle filene lå i mapper.

   Den kan ikke sløyfes helt: den navngir slippsonen man drar en fil TIL
   for å ta den ut av en mappe igjen (se .doc-finder__files' min-height).
   Fjerner man etiketten, står det igjen en umerket stripe man bare
   finner ved å prøve.

   Så: skjult når gruppa er tom OG ingenting dras — og tilbake i det
   øyeblikket en drag starter, altså nettopp når den trengs. Samme
   .sortable-ghost + :has()-mønster som .toc-list__item allerede bruker
   (06_document_history_and_toc.css).

   Tomheten avgjøres i ERB (--empty), ikke i CSS. To forsøk feilet
   først, begge målt i nettleseren: :empty er usann fordi ERB legger
   igjen linjeskift som tekstnoder inne i <ul>, og
   :has(+ ul:not(:has(*))) er UGYLDIG — :has() kan ikke nøstes i :has()
   — så hele regelen ble stille forkastet ved parsing. Serveren vet
   svaret uansett. */
.doc-finder:not(:has(.sortable-ghost)) .doc-finder__unfiled-header--empty {
    display: none;
}

.doc-finder__files {
    list-style: none;
    margin: 0;
    padding: 0;
    /* En tom "Uten mappe"-liste må fortsatt være stor nok til å slippe en
       fil på — det er slik man tar en fil ut av en mappe igjen. */
    min-height: var(--space-5);
}

.doc-finder__row {
    position: relative;
}

/* Same hover-only grab affordance as .toc-list__drag-handle (this app's
   established convention for a draggable row — see that class's own
   comment), scoped to this component instead of reusing it directly:
   .toc-list__drag-handle's hover-reveal is written against
   .toc-list__item, not .doc-finder__row.

   Håndtaket ligger UTENFOR rutenettet — absolutt plassert i lista sin
   venstre marg, ikke som en sjette kolonne. En kolonne til ville tvunget
   hver eneste rad (også kolonneoverskriftene og mapperadene, som ikke kan
   dras) til å rendre en tom celle bare for å holde de andre kolonnene på
   plass. */
.supplier-doc__drag-handle {
    position: absolute;
    left: 0;
    top: var(--space-1);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.doc-finder__hover-action {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.doc-finder__row:hover .supplier-doc__drag-handle,
.doc-finder__row:hover .doc-finder__hover-action,
.doc-finder__folder-summary:hover .doc-finder__hover-action,
.doc-finder__hover-action:focus-visible {
    opacity: 1;
}

/* #10281481456: linja under filnavnet — merket, bevisdato, merkelapper og
   beskrivelsen. Målt på ekte data hadde 18 av Brightbox' 20 filer ingen av
   delene, og brukte likevel en hel linje på plassholderteksten. Nå er den
   sammenklappet til null høyde med mindre den har noe å vise.
   height: 0 + overflow: hidden, ikke display: none: beskrivelsesfeltet bor
   her inne, og inline-rename#edit gir det fokus i samme øyeblikk som
   blyanten klikkes — et display: none-element kan ikke få fokus, et
   null-høyt kan. */
/* Torleiv, 16.09.2026 (#10306664607, «ja til anbefaling»): these were
   opacity: 0 with no hover: none variant, so on a phone or tablet the
   delete, description and drag controls in a supplier's file list were
   permanently invisible — while still clickable, which is the worst of
   both: you could hit «slett» without seeing it. Shown for good on a
   touch device, with the same ::after fingertip area
   .system-settings__trigger already uses, since the icons themselves are
   smaller than a fingertip. The drag handle is already absolutely
   positioned, so only the ones that are not need position: relative for
   their own ::after. */
@media (hover: none) {
    .supplier-doc__drag-handle,
    .doc-finder__hover-action {
        opacity: 1;
    }

    .doc-finder__hover-action {
        position: relative;
    }

    .supplier-doc__drag-handle::after,
    .doc-finder__hover-action::after {
        content: "";
        position: absolute;
        inset: -9px;
    }
}

.doc-finder__note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-500);
    height: 0;
    overflow: hidden;
}

/* Merk .doc-finder__description-input og ikke bare `input` i den siste
   regelen: her sto det opprinnelig et <form> med form_with sitt
   <input type="hidden" name="authenticity_token">, og
   `input:not([hidden])` treffer DET (type="hidden" er ikke det samme som
   HTML-attributtet hidden) — linja sto derfor alltid åpen, uansett om det
   var noe i den. Skjemaet er borte nå, men den navngitte klassen er
   fortsatt det riktige å spørre etter. */
.doc-finder__note:has(.doc-finder__note-text),
.doc-finder__note:has(.doc-finder__description-display:not(:empty)),
.doc-finder__note:has(.doc-finder__description-input:not([hidden])) {
    height: auto;
    overflow: visible;
    padding: 0 var(--space-2) var(--space-1) calc(var(--space-2) + var(--doc-finder-indent, 0px) + var(--space-5));
}

.doc-finder__description-display {
    cursor: text;
}

.doc-finder__description-input {
    font-size: var(--font-size-sm);
    height: auto;
    padding: var(--space-1) var(--space-2);
    width: min(100%, 28rem);
}

/* Historikken bak en fil — samme rader, ett hakk inn, og lukket som
   standard slik den alltid har vært. */
/* #10289915888. Utslaget gjelder ÉN fil (record.history), men spente
   hele boksens bredde og la seg som en frittstående linje under siste
   rad — der det leses som en handling for hele lista. width: max-content
   krymper det til sin egen tekst, så det synlig hører til raden over,
   og hover gir det formen til en kontroll framfor en etterlatt setning.
   Innrykket er uendret: det er dét som holder det i flukt med filnavnet
   det gjelder. */
.doc-finder__history > summary {
    font-size: var(--font-size-sm);
    color: var(--text-500);
    cursor: pointer;
    width: max-content;
    max-width: 100%;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-2) var(--space-1) calc(var(--space-2) + var(--doc-finder-indent, 0px) + var(--space-5));
}

.doc-finder__history > summary:hover {
    color: var(--text-700);
    text-decoration: underline;
}

.doc-finder__history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Samme dybde som filer i en undermappe — se --doc-finder-step over. */
    --doc-finder-indent: calc(2 * var(--doc-finder-step));
}

/* Kolonnene Størrelse og Type er de første som må vike når det blir
   trangt — filnavnet og datoen er det man faktisk leter etter. */
@media (max-width: 700px) {
    /* Uendret 16 px her, med vilje: på 375 px er navnekolonnen alt så smal
       at filnavn kuttes til «202…», og hvert ekstra innrykk på nivå to
       koster det dobbelte. Nesting bæres av chevronene på mobil; det
       tydeligere innrykket er for skjermer der plassen finnes. */
    .doc-finder {
        --doc-finder-step: var(--space-4);
    }

    .doc-finder__line {
        grid-template-columns: minmax(0, 1fr) 2.5rem 6.5rem 4rem;
    }

    .doc-finder__size,
    .doc-finder__kind {
        display: none;
    }
}

/* På en telefon er lista bare ~240 px bred (siden har sin egen marg), og
   da er det ikke plass til en datokolonne ved siden av filnavnet i det
   hele tatt — den flytter ned på egen rad under navnet i stedet for å
   forsvinne. Målt på 375 px: navnekolonnen gikk fra 3 px til ~115 px. */
@media (max-width: 520px) {
    .doc-finder__line {
        grid-template-columns: minmax(0, 1fr) 1.5rem 4rem;
    }

    .doc-finder__date {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-left: var(--doc-finder-indent, 0);
    }

    /* Kolonneoverskriften «Lastet opp» ville blitt en tom andrelinje i
       hodet — datoen står nå rett under hvert filnavn, der den forklarer
       seg selv. */
    .doc-finder__columns .doc-finder__date {
        display: none;
    }
}

/* Her lå fire regler som strammet inn sand_ui sin .ui-file-meta bare
   inne i leverandørens filliste (#10280951579). De er borte fordi lista
   ikke bruker ui_file lenger i det hele tatt — #10281481456 erstattet
   filkortet med en Finder-rad (.doc-finder__line lenger opp), så det er
   ingen delt komponent å stramme inn. ui_file selv er uendret og brukes
   fortsatt av agenda_items/_files.html.erb og de andre kallstedene. */


} /* @layer overrides */

/* #10373300552: merket «Ikke i Basecamp» ved en tildelt person.

   Holder navnet og merket sammen på én linje, med luft imellom. Uten
   wrapperen brekker de fra hverandre når feltet er smalt, og merket
   havner under et annet navn enn det gjelder — som er verre enn ikke å
   vise det, siden det da peker på feil person. */
.task-assignee {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* Samme rolle som .doc-finder__flag-wrap: noe for hover_popover å henge
   mouseenter/focusin på som dekker merket og ikke mer. */
.task-assignee__flag-wrap {
    display: inline-flex;
}