/* Document TOC sidebar, document metadata card, the "ark" sheet, sticky document title/actions header.
   Split out of stomn_theme.css (original lines 1522-2033) — 2026-08-18,
   CSS @layer restructuring step 2 (Basecamp "Fra Fizzy-gjennomgang:
   CSS-arkitektur"). Numeric filename prefix controls load order (see
   app/helpers/application_helper.rb#stomn_theme_stylesheet_link_tag) —
   files are concatenated in this exact original order, so no cascade
   tie-break changes. */
@layer overrides {
/* A single document read/edited on its own, with no dashboard chrome competing
   for attention — matches Basecamp's own document width (wider than
   .workspace-home's card column) rather than a narrow prose column. A real
   flex item at >=1280px now (see .document-layout below) rather than an
   unconditionally self-centering block — margin:0 auto on a flex item
   centers it within whatever space actually remains next to the TOC
   column, which is what makes the document shift over as that column
   grows/shrinks purely via ordinary flex layout, with no JS-computed
   transform involved. */
.document-focus {
    max-width: var(--content-width);
    min-width: 0;
    margin: 0 auto;
    width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.page-title-header__back a {
    color: rgba(28, 25, 20, 0.65);
    text-decoration: none;
}

.page-title-header__back a:hover {
    color: rgba(28, 25, 20, 0.85);
    text-decoration: underline;
}

.page-title-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(28, 25, 20, 0.65);
    margin-left: auto;
}


} /* @layer overrides */