/* Ghost/plain button system overrides, Lexxy rich-content editor styling, heading permalinks.
   Split out of stomn_theme.css (original lines 2034-2396) — 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 {
/* This look — no border, no fill at rest, a soft grey hover fill, rounded
   rectangle rather than a pill — started 2026-08-08 as a toolbar-only
   "ghost" exception alongside .ui-button's own pill default. Torleiv
   corrected that same day: it's now .ui-button's ONE default appearance,
   used everywhere including primary actions/form submission (Lagre,
   Bekreft, Opprett), not just toolbar context — see the .ui-button
   override below. `class: "ghost"` stays as a standalone utility for
   hand-written <button>/<a> elements that never had .ui-button applied
   in the first place (bare markup, no ui_button/ui_link_button helper).
   .document-page-header__action/.page-title-header__action (Endre,
   Avbryt, Lagre, the …-trigger) are this same look under their existing
   names, so every current caller gets it for free either way. */
.ghost,
.document-page-header__action,
.page-title-header__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(28, 25, 20, 0.65);
    font: inherit;
    /* .ui-button's own base styling (when .ghost is combined with it, e.g.
       via ui_button icon_name: ..., class: "ghost") sets letter-spacing:1px
       for its pill look — `font: inherit` above doesn't touch that, it's
       a separate property, so it needs its own explicit reset. */
    letter-spacing: normal;
    text-decoration: none;
    cursor: pointer;
    /* Fixed height (rather than relying on padding + content) so all of
       these hover-highlight at exactly the same height regardless of their
       different content. Width stays snug to the content plus this
       padding — nothing stretches it. */
    height: 2.75rem;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

/* .ghost's own height/font above (font:inherit — the shorthand, so it
   resets font-size too, not just family/weight) are unlayered, which by
   CSS layer rules always beats sand_ui's OWN, layered .size-sm rule
   (buttons.css/sizes.css, both under @layer components) — REGARDLESS OF
   SELECTOR SPECIFICITY, since layer priority is checked before
   specificity at all. A button combining .ghost with .size-sm (Lagre/
   Avbryt pairs on Control/Risk/Deviation/Document's edit-in-place forms,
   the version-history "Godkjenn" button) silently ignored size-sm
   entirely — rendering at .ghost's own 44px/inherited-font-size instead
   of size-sm's real 28px/11px, next to a SEPARATE button (Lagre, no
   .ghost) that WAS getting size-sm correctly, since nothing unlayered
   competed with it. Reported: Lagre/Avbryt visibly different heights on
   the document metadata form (Torleiv, 2026-08-10) — this is systemic,
   not specific to that one pair. Explicit override restores the real
   sand_ui size-sm values for this exact combination: var(--height-sm)/
   var(--bt-spacing) are sand_ui's own tokens (still cascading normally —
   only the PROPERTIES .ghost sets unlayered are immune to sand_ui's
   layer, not custom properties sand_ui itself already assigned onto
   the element), font-size is sand_ui's own hardcoded size-sm value
   (sizes.css has no reusable var for it, so hardcoded here for a
   provable match, not because there is a "magic number"). */
.ghost.size-sm,
.document-page-header__action.size-sm,
.page-title-header__action.size-sm {
    height: var(--height-sm, 1.75rem);
    padding: 0 var(--bt-spacing, 9px);
    font-size: 11px;
}

.ghost:hover,
.document-page-header__action:hover,
.page-title-header__action:hover {
    background: rgba(28, 25, 20, 0.08);
}

.ghost.solid {
    background: var(--signal-color);
    color: #fff;
}

.ghost.solid:hover {
    background: var(--signal-dark);
}

/* Torleiv, 2026-08-08: supersedes the "two deliberate variants" plan above
   — sand_ui's own pill/bordered/filled .ui-button default is replaced
   app-wide with the ghost look (rounded rectangle, no border, no fill at
   rest, soft grey hover). .solid keeps its filled color for the
   primary/CTA variant, just no longer a pill either. --radius-pill stays
   in use elsewhere (badges, person-mentions) — just not on buttons.
   Unlayered, so — like the .ui-input override above — this wins over
   sand_ui's own @layer components rule regardless of source order. */
.ui-button {
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: rgba(28, 25, 20, 0.65);
}

.ui-button:hover {
    background-color: rgba(28, 25, 20, 0.08);
}

/* Re-asserted rather than left to sand_ui's own .solid rule: the base
   override above would otherwise win (unlayered beats layered) and flatten
   every filled button back to transparent/grey text. --bt-background and
   --text-color are still whatever sand_ui's .solid/.ui-NNN modifiers set,
   so the actual fill/text colors are untouched — only the shape changes. */
.ui-button.solid {
    border-radius: var(--radius-md);
    background-color: var(--bt-background);
    color: var(--text-color);
}

.ui-button.solid:hover {
    filter: brightness(0.92);
}

/* The ONE emphasized action on a screen — Lagre/Opprett/Bekreft when it's
   the actual thing the user came to do, as opposed to a merely-solid
   neighbor (e.g. a muted .ui-50/.ui-100 toolbar button) sitting next to
   it. Same --signal-color/--signal-dark already used for links/accents
   elsewhere and for hand-written .ghost.solid buttons (e.g.
   shared/_confirm_dialog.html.erb's "Bekreft") — one accent color, not
   two, even though the selector paths differ (ui_button-helper output vs
   raw <button> markup that never gets a .ui-button class). Not the same
   as bare .solid (--ui-800 charcoal, see above) — apply this explicitly,
   don't assume every .solid is automatically the preferred one. */
.ui-button.solid.preferred {
    background-color: var(--signal-color);
    color: #fff;
}

.ui-button.solid.preferred:hover {
    background-color: var(--signal-dark);
    filter: none;
}

/* .circle (sand_ui) only sets aspect-ratio, relying on .ui-button's own
   pill radius to render round — now that the base default above is a
   rounded rectangle, every icon-only round button in the app (search,
   close-X, avatar-adjacent triggers, dropdown triggers) needs this
   explicit full-round radius or it renders as a rounded square instead. */
.ui-button.circle {
    border-radius: 50%;
}

/* .ui-button-group (sand_ui) merges adjacent buttons into one bordered
   pill — square inner corners plus a -1px margin to collapse the shared
   border. Now that .ui-button has no border by default, that illusion is
   invisible at rest but leaves a stray square-corner/overlap artifact on
   hover. Torleiv: drop the merged-segment look entirely — plain ghost
   buttons with normal spacing reads better now that pills are gone
   everywhere else too (agenda_items/show.html.erb's case pager,
   documents/index.html.erb's arrows and grid/list toggle). */
.ui-button-group {
    gap: var(--space-1);
}

.ui-button-group > * {
    border-radius: var(--radius-md);
}

.ui-button-group .ui-button + .ui-button {
    margin-left: 0;
}

/* Endre/Avbryt/Lagre/the …-trigger keep their tighter horizontal padding —
   .ghost's own default (--space-4) suits a single word with room to
   breathe, these sit closer together in a row. */
.document-page-header__action,
.page-title-header__action {
    padding: 0 var(--space-2);
}

/* The "…" overflow menu (Historikk/Slett) — Basecamp-style: Endre stays
   inline, everything else tucks behind this, reusing the header avatar's
   own dropdown component/behavior (.header-user-menu, header-menu
   controller) with different labels. Plain bullet characters instead of
   the "…" character — that glyph sits on the text baseline like
   punctuation dots, noticeably lower than a vertically-centered
   kebab/ellipsis should sit. Repeats the padding here (both classes, to
   outrank .header-user-menu__trigger's own padding: 0 later in this file)
   so it always matches Endre's. */
.document-page-header__menu-trigger.document-page-header__action {
    padding: 0 var(--space-2);
}

/* Kept raw, not a --text-size-* token: this sizes a glyph ("•••"), not
   body/UI text — same reasoning as .workspace-hero__link-arrow and
   .workspace-shortcut__arrow's own 1.1rem below. */
.document-page-header__menu-dots {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: rgba(28, 25, 20, 0.7);
}

.document-page-header__menu-panel {
    text-align: left;
    font-size: var(--text-size-base);
}

/* Inside the sheet, the document's own rich-content editor shouldn't repeat
   the sheet's white background or padding — the sheet already provides it.
   Company's own rich-text sections (.company-section) get the
   same treatment — they sit inside a .ui-box, not a .document-sheet, but
   want the identical editor typography, not a smaller one-off scale. */
.document-sheet .ui-document-rich-content-editor,
.company-section .ui-document-rich-content-editor {
    border: none;
    padding: 0;
}

/* A wide table (e.g. IS-SOA-01's 93-row Annex A statement-of-applicability
   table, imported tonight from Basecamp) is wider than the 900px document
   column — table { display: block } turns the table element itself into
   its own horizontal-scroll container, so it scrolls in place instead of
   spilling past the edge of the document-sheet card onto the page
   background underneath. No wrapper div needed, so this works on already-
   stored content without a migration. */
.ui-document-rich-content table,
.ui-document-rich-content-editor lexxy-editor table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Hover-revealed show/hide toggle for an attachment's caption (see
   lexxy_caption_visibility_extension.js) — hidden until the attachment is
   hovered, then a plain icon button in the corner. data-caption-hidden is
   set by that extension and, since it's just an HTML attribute, hides the
   caption identically here in the editor and in the read-only
   ui-document-rich-content view below. */
.ui-document-rich-content-editor lexxy-editor .attachment,
.ui-document-rich-content .attachment {
    position: relative;
}

.lexxy-caption-toggle {
    position: absolute;
    top: 0.3ch;
    right: 0.3ch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(28, 25, 20, 0.12);
    border-radius: 50%;
    color: rgba(28, 25, 20, 0.6);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.attachment:hover .lexxy-caption-toggle,
.lexxy-caption-toggle:focus-visible {
    opacity: 1;
}

[data-caption-hidden] > figcaption,
[data-caption-hidden] .attachment__caption {
    display: none;
}

/* Basecamp-style typography for headings written inside the body text —
   bold sans, matching the page title, instead of the app's serif accent. */
.document-sheet .ui-document-rich-content h1,
.document-sheet .ui-document-rich-content h2,
.document-sheet .ui-document-rich-content h3,
.document-sheet .ui-document-rich-content-editor lexxy-editor h1,
.document-sheet .ui-document-rich-content-editor lexxy-editor h2,
.document-sheet .ui-document-rich-content-editor lexxy-editor h3,
.company-section .ui-document-rich-content h1,
.company-section .ui-document-rich-content h2,
.company-section .ui-document-rich-content h3,
.company-section .ui-document-rich-content-editor lexxy-editor h1,
.company-section .ui-document-rich-content-editor lexxy-editor h2,
.company-section .ui-document-rich-content-editor lexxy-editor h3 {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-style: normal;
    /* A #heading-N link (TOC sub-items, document.rb#headings, the nav gear's
       heading list) would otherwise land the heading flush against the top
       of the viewport, hidden behind the sticky .page-header AND, now,
       the also-sticky .document-page-header right below it — clear both
       real (measured, not guessed) heights, see sticky_offset_controller.js. */
    scroll-margin-top: calc(var(--page-header-height, 60px) + var(--document-header-height, 0px) + var(--space-4));
    position: relative;
}

/* Copy-a-direct-link button appended inside each heading (see
   Document#body_with_heading_anchors) — hover-only, same convention as
   .system-settings__trigger, so headings don't clutter the page at rest.
   font-size below (and on .heading-permalink--copied::after further down)
   is deliberately `em`, not a --text-size-* token: it needs to scale with
   whichever heading it's attached to (h1 vs h2 vs h3), not sit at one
   fixed size regardless of context. */
.heading-permalink {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--space-2);
    padding: 0.15em;
    background: none;
    border: none;
    color: rgba(28, 25, 20, 0.35);
    font-size: 0.7em;
    vertical-align: middle;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.document-sheet .ui-document-rich-content h1:hover .heading-permalink,
.document-sheet .ui-document-rich-content h2:hover .heading-permalink,
.document-sheet .ui-document-rich-content h3:hover .heading-permalink,
.company-section .ui-document-rich-content h1:hover .heading-permalink,
.company-section .ui-document-rich-content h2:hover .heading-permalink,
.company-section .ui-document-rich-content h3:hover .heading-permalink,
.heading-permalink:focus-visible {
    opacity: 1;
}

.heading-permalink--copied {
    opacity: 1;
    color: var(--success-color);
}

.heading-permalink--copied::after {
    content: "Lenke kopiert";
    position: absolute;
    top: -1.8em;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2em 0.6em;
    border-radius: var(--radius-md);
    background: rgba(28, 25, 20, 0.85);
    color: #fff;
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: normal;
    white-space: nowrap;
}


} /* @layer overrides */