/* /stilguide reference samples, page-title-header grid with settings/nav-gear dialogs, person-mention chips, overlay card restyle.
   Split out of stomn_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#stomn_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: rgba(28, 25, 20, 0.65);
    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: rgba(28, 25, 20, 0.5);
}

.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: rgba(28, 25, 20, 0.5);
}

.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);
}

/* 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;
    outline: none;
    padding: var(--space-1);
    color: rgba(28, 25, 20, 0.45);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.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;
}

/* 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. */
.document-nav-gear__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 22rem;
    max-width: calc(100vw - 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;
}

.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__actions {
    display: flex;
    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 rgba(28, 25, 20, 0.08);
}

/* 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: rgba(28, 25, 20, 0.45);
    cursor: pointer;
    transition: background 0.15s ease;
}

.dialog-close:hover {
    background: rgba(28, 25, 20, 0.08);
}

/* 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(100vw - 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 rgba(28, 25, 20, 0.14);
}

.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 {
    width: 24rem;
}

.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: rgba(28, 25, 20, 0.045);
    border-radius: var(--radius-pill);
    color: inherit;
    text-decoration: none;
}

.person-mention:hover {
    background: rgba(28, 25, 20, 0.075);
}

.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. */
#brreg_section .person-mention {
    padding: 0.15em 0.6em 0.15em 0.15em;
}

#brreg_section .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: rgba(28, 25, 20, 0.6);
    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;
}

/* 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(100vw - 2 * var(--spaceing));
}

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

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


} /* @layer overrides */