/* Public document page, bookmark/task toggles, task detail overrides, awareness wizard dialog, onboarding form/document styling.
   Split out of stomn_theme.css (original lines 6557-7107) — 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 {
/* The public, unauthenticated document page (PublicDocumentsController) —
   deliberately its own small, self-contained block since this page has
   none of the app's usual chrome (.page-frame/.page-header etc.) to
   inherit spacing/width conventions from. Meant to be embeddable in an
   <iframe> on a customer's own site, so the content column stays
   comfortably narrow and centered rather than assuming full-viewport
   control the way the rest of the app's pages do. */
.public-document-page {
    background: var(--background-color);
    min-height: 100vh;
}

.public-document {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.public-document__title {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-6);
}

/* Torleiv, 2026-08-20 (#10221637345): "tydelig lenke tilbake til der den
   kom fra" — this page has no other navigation at all (see the block
   comment above), so the link has to stand on its own rather than
   sitting inside a header bar this page doesn't have. */
.public-document__back-link {
    display: inline-block;
    margin-bottom: var(--space-4);
    font-size: var(--text-size-sm, 0.85rem);
    color: var(--text-500, #666);
}

.public-document__article--not-found {
    text-align: center;
    color: rgba(28, 25, 20, 0.6);
}

/* documents/edit_draft.html.erb's own unmissable "this isn't the live
   document" signal — sitting above the whole page rather than folded
   into .document-page-header so it can't be mistaken for part of the
   title row itself. */
.document-draft-banner {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: var(--card-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-weight: 600;
}

/* people/_profile.html.erb — reuses .controls-detail/.controls-detail__grid
   wholesale (same key-value card language as Control/Risk/Deviation and
   the document metadata card) for the contact-info fields; this is the
   one bit that section doesn't already have a slot for. */
.person-profile-card__header {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

/* Bookmark star toggle (bookmarks/_toggle.html.erb) — dropped inline into
   page_title_header's own action row/documents' toolbar, so it needs to
   sit at the same height/scale as its siblings rather than a full
   .ui-button. Always visible (unlike .toc-list__folder-delete's
   hover-reveal) since bookmarked-or-not is itself useful information at
   rest, not just an editing affordance.

   Torleiv, 2026-08-13: the old icon-only, color-only distinction between
   states ("Veldig lite forskjell på av/på") wasn't enough at a glance —
   pointed at Basecamp's own bookmark toggle as the reference: a visible
   text label next to the icon, and the active state built as a solid,
   differently-SHAPED pill rather than just a recolored icon on the same
   plain background. Rebuilt on that shape: a compact rounded-pill button
   (fully rounded, not the app's standard --card-radius, since a pill this
   small reads as a plain rectangle with anything less) with its own
   border in the inactive state and a solid signal-color fill in the
   active one — so the two states differ in silhouette, not just hue,
   even before the star glyph or label text is read. */
.bookmark-toggle__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: 9999px;
    border: 1px solid rgba(28, 25, 20, 0.16);
    color: rgba(28, 25, 20, 0.55);
    font-size: var(--text-size-sm);
    font-weight: 600;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.bookmark-toggle__button:hover {
    border-color: rgba(28, 25, 20, 0.3);
    color: rgba(28, 25, 20, 0.8);
}

/* Signal color, not the more conventional bookmark-star yellow (Torleiv,
   2026-08-10, questioning the yellow) — this app deliberately settled on
   one single accent color for "this is active/preferred" (see the button
   hierarchy redesign earlier tonight); a standalone yellow here would
   reintroduce exactly the multi-accent-color fragmentation that redesign
   moved away from. Solid fill (not just a recolored border/icon) is what
   actually fixes the "too subtle" report — white text/icon on a filled
   background reads as a clearly different control at a glance, the same
   way Basecamp's own filled "Remove" pill does next to its outline
   "Bookmark" one. */
.bookmark-toggle__button--active,
.bookmark-toggle__button--active:hover {
    background: var(--signal-color);
    border-color: var(--signal-color);
    color: #ffffff;
}

/* documents/_toolbar.html.erb's language-pair link (Torleiv, 2026-08-13,
   "Dokumenter på to språk") — same pill shape as .bookmark-toggle__button
   above, minus the active/inactive state since this is a plain navigation
   link, not a toggle: there's nothing to turn on or off, only "go to the
   other language version" when one exists. */
.language-pair-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: 9999px;
    border: 1px solid rgba(28, 25, 20, 0.16);
    color: rgba(28, 25, 20, 0.55);
    font-size: var(--text-size-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.language-pair-link:hover {
    border-color: rgba(28, 25, 20, 0.3);
    color: rgba(28, 25, 20, 0.8);
}

/* tasks/show.html.erb's completion toggle (Torleiv, 2026-08-13,
   "Todo-layout" — "Bli inspirert av Basecamp"): same pill-toggle shape
   .bookmark-toggle__button above uses, for the same reason — Basecamp's
   own to-do page leads with an explicit "Mark as complete" pill, not a
   bare checkbox glyph. The real <input type="checkbox"> is visually
   hidden (still focusable/keyboard-operable — sr-only-style clipping,
   not display:none, which would break tabbing to it); the styled pill is
   its <label>, and the :checked sibling selector below swaps both the
   pill's own fill AND which of the two text+icon spans inside it shows —
   pure CSS, no JS state to keep in sync, since the checkbox's checked
   attribute already reflects the server-rendered truth on every load. */
/* Used to float as its own centered block between the page title and the
   metadata card (needing its own text-align/margin here to do that) —
   now lives inside .controls-detail__header--end instead (Torleiv,
   2026-08-20, "Style denne siden at den er konsistent med stil på andre
   sider"), which already handles alignment and spacing, so this class
   itself no longer needs to. */

.task-complete-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.task-complete-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 9999px;
    border: 1px solid rgba(28, 25, 20, 0.16);
    color: rgba(28, 25, 20, 0.55);
    font-size: var(--text-size-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.task-complete-toggle__label:hover {
    border-color: rgba(28, 25, 20, 0.3);
    color: rgba(28, 25, 20, 0.8);
}

.task-complete-toggle__input:focus-visible ~ .task-complete-toggle__label {
    outline: 2px solid var(--signal-color);
    outline-offset: 2px;
}

.task-complete-toggle__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.task-complete-toggle__state--complete {
    display: none;
}

.task-complete-toggle__input:checked ~ .task-complete-toggle__label {
    background: var(--signal-color);
    border-color: var(--signal-color);
    color: #ffffff;
}

.task-complete-toggle__input:checked ~ .task-complete-toggle__label .task-complete-toggle__state--incomplete {
    display: none;
}

.task-complete-toggle__input:checked ~ .task-complete-toggle__label .task-complete-toggle__state--complete {
    display: inline-flex;
}

/* Same technique .document-metadata already established for reskinning
   .controls-detail's shared __grid/__item/__label/__value structure in
   one specific context (see the comment there) — Basecamp's own to-do
   page renders each field as a plain "label: value" row with no per-field
   box at all, much lighter than the boxed-pill .controls-detail__item's
   base rule gives every field on Control/Risk/Deviation. Strips that
   chrome back to a plain row here, separated by a hairline divider
   instead of a background/border per item, without touching the shared
   rule those other pages still rely on. */
.task-detail .controls-detail__item {
    padding: var(--space-3) 0;
    border: none;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid rgba(28, 25, 20, 0.08);
}

.task-detail .controls-detail__item:last-child {
    border-bottom: none;
}

/* documents/_toolbar.html.erb's "•••" menu — the destructive action, set
   apart by color alone (same convention as .person-admin-actions__item--
   danger and .system-settings__danger-action), never by hiding it behind
   an extra dialog or otherwise making it harder to reach. */
.header-user-menu__item--danger {
    color: var(--danger-color);
}

/* tasks/_awareness_wizard.html.erb — the "Bevisstgjøringsgjennomgang"
   compliance task's own multi-step content, opened from a trigger button
   into a <dialog> (Torleiv, 2026-08-12: "legg kurset i modal... større
   skrift, mer pedagogisk og oppmuntrende og lettlest tekst" — was
   previously an always-open card directly on the page). Own classes
   rather than reusing .integrations-card__setup-steps: that one's
   list-style is `decimal` for an install/setup SEQUENCE, this one is a
   plain tip list with no inherent order within a step. */
.awareness-wizard__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Own layout (not .app-confirm-dialog) — a confirmation dialog's 24rem max
   width and standard body text are too cramped for a multi-paragraph
   lesson step with a tip list; this one is deliberately wider and roomier. */
.awareness-wizard-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--dialog-shadow);
    width: calc(100vw - var(--space-6) * 2);
    max-width: 40rem;
    max-height: calc(100vh - var(--space-6) * 2);
    overflow-y: auto;
}

.awareness-wizard-dialog::backdrop {
    background: var(--dialog-backdrop);
}

.awareness-wizard {
    padding: var(--space-6);
}

.awareness-wizard__step-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Larger and warmer than the app's usual .h3/.workspace-section-title —
   this is meant to read as an encouraging, easy lesson, not a dense
   settings page. */
.awareness-wizard__title {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: var(--space-2) 0 0;
}

.awareness-wizard__lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(28, 25, 20, 0.8);
    margin-top: var(--space-3);
}

.awareness-wizard__points {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(28, 25, 20, 0.8);
}

.awareness-wizard__points li {
    list-style: disc;
}

.awareness-wizard__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* The explicit last-step pointer at the completion checkbox (Torleiv:
   "siste side: Nå er du klar for å krysse av: HER ✅") — set apart from
   the plain lesson text above it so it reads as a distinct call to
   action, not one more tip in the list. */
.awareness-wizard__finish-hint {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--ui-50, #f5f5f5);
    border-radius: var(--card-radius);
    font-size: 1.125rem;
    font-weight: 600;
}

.service-property-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.service-property-suggestions__chip {
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border: var(--card-border);
    border-radius: 999px;
    background: transparent;
    /* Was --text-size-small, a token that doesn't exist anywhere in this
       file (only --text-size-sm does) — silently used the 0.8125rem
       fallback on every render instead of the real design-system size. */
    font-size: var(--text-size-sm);
    color: rgba(28, 25, 20, 0.75);
}

.service-property-suggestions__chip:hover {
    background: rgba(28, 25, 20, 0.04);
}

.service-property-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: var(--space-2);
    align-items: start;
    margin-top: var(--space-2);
}

.service-properties-list {
    display: flex;
    flex-direction: column;
}

.service-properties-list__row {
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.6fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--card-border);
}

.service-properties-list__row:last-child {
    border-bottom: none;
}

.service-properties-list__label {
    color: var(--text-500, #666);
    font-size: var(--text-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-properties-list__value {
    color: rgba(28, 25, 20, 0.85);
}

.service-property-row__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-top: 1.6rem;
    border: none;
    background: transparent;
    color: rgba(28, 25, 20, 0.5);
    cursor: pointer;
    border-radius: var(--card-radius);
}

.service-property-row__remove:hover {
    background: rgba(28, 25, 20, 0.06);
    color: rgba(28, 25, 20, 0.9);
}

/* Onboarding's terms-acceptance checkbox/marketing-consent radios (Torleiv,
   2026-08-16: "lett leselig tekst, og relativt 'store' bokser å krysse av
   i... en grønnfarge... litt sånn 'go-følelse' enn grå-blå?"). Deliberately
   scoped to this one form, not a global native-checkbox restyle — #3FB37F
   is the same green auth-methods-list__status-dot--green already uses for
   "done/confirmed", not a new color introduced just for this page.
   align-items: center on the row (not the browser default, which leaves a
   native checkbox sitting slightly low against the text baseline) is what
   actually answers "check horizontal alignment of the checkbox". */
.onboarding-form__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Torleiv, 2026-08-16 ("mer luft her" — between the last checkbox/fieldset
   and the submit button): the .mb utility on whatever comes right before
   the button (a checkbox row, or the marketing-consent fieldset) is only
   10px (sand_ui's --spaceing) — fine as inter-row spacing, too tight as
   the gap before a button asking for a separate, deliberate click. Scoped
   to the submit button itself (not raised generally) so it's correct
   regardless of what precedes it in either step. */
.onboarding-form input[type="submit"] {
    margin-top: var(--space-4);
}

/* Torleiv, 2026-08-16 ("her også mer luft"): the NDA step has no checkbox
   row between the document body and its action — just the sign link
   directly after .onboarding-document's own 10px .mb, which read as even
   tighter than the checkbox case above since there's nothing softening
   the transition from prose to button. Same fix, same reasoning, just a
   different sibling shape (a link, not a form/submit). */
.onboarding-document + .ui-button.solid {
    margin-top: var(--space-4);
}

/* Torleiv, 2026-08-16 ("Mer luft mellom alternativer"): each radio/
   checkbox option is its own sibling row (see onboardings/show.html.erb)
   with no spacing of its own between them — fine for the lone terms
   checkbox, cramped once the marketing-consent fieldset stacks two
   radio rows directly on top of each other. */
.onboarding-form__row + .onboarding-form__row {
    margin-top: var(--space-3);
}

.onboarding-form__check {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    accent-color: #3FB37F;
}

.onboarding-form__row span {
    font-size: var(--text-size-lg);
}

/* Torleiv, 2026-08-16 ("la tekst i boksen se lik ut, med unntak av
   utheving"): the placeholder document body (18px, .ui-document-rich-
   content's normal site-wide size), the fieldset legend (15px, browser
   UA default) and the checkbox/radio labels (16px, .onboarding-form__row
   span above) were three different sizes in the same box. Normalized to
   the same 16px the labels already used — .onboarding-document is a
   page-scoped class specifically so this doesn't touch
   .ui-document-rich-content's real, larger size everywhere it renders
   an actual document body elsewhere in the app. The bold "MAL —
   erstatt med reelt innhold" lead-in is a <strong> inside the body
   text, not a separate rule, so it stays bold at the new size — the
   one deliberate exception this was asked to keep. */
.onboarding-document {
    font-size: var(--text-size-lg);
}

/* Torleiv, 2026-08-16 ("Sjekk overskrifter; mer luft over, mindre luft
   under"): the Terms/Privacy Policy/NDA bodies rendered here are plain
   <h3>-per-section HTML (see Workspace::DEFAULT_TERMS_BODY etc.) with no
   heading-specific rule of its own anywhere else in this file — outside
   .document-sheet/.company-section, an <h3> just gets the browser's own
   symmetric margin-block default, which reads as too little separation
   from the PRECEDING section and too much before the heading's own
   first paragraph. Asymmetric margins fix both at once: more air above
   (so a new numbered section clearly starts) less below (so the heading
   reads as attached to the text under it, not floating between the two). */
.onboarding-document h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
}

.onboarding-document h3:first-child {
    margin-top: 0;
}

.onboarding-form legend {
    font-size: var(--text-size-lg);
    margin-bottom: var(--space-2);
}

/* Torleiv, 2026-08-16 ("sjekk justering av knappene" / "knappene har ikke
   samme størrelse"): both language buttons now share .ghost as their ONE
   common base (see onboardings/show.html.erb — .ghost.solid is added only
   to the language that's still an invitation to switch to), so height/
   padding/radius are guaranteed identical instead of coming from two
   different button families (bare .ghost vs. .ui-button.solid) with their
   own, different box models. The plain-.ghost (current/muted) state still
   needs a visible pill outline of its own — bare .ghost (background:
   none, border: none, see the .ghost rule above) reads as unstyled plain
   text next to a real filled pill. :not(.solid) keeps this scoped to that
   muted state only — .ghost and .ghost.solid share equal selector
   specificity, so without it this would win the cascade race against
   .ghost.solid's fill purely on source order and repaint the "still
   clickable" pill grey too. */
.onboarding-language-choice .ghost:not(.solid) {
    border: 1px solid rgba(28, 25, 20, 0.16);
    background: rgba(28, 25, 20, 0.04);
}

.onboarding-language-choice .ghost:not(.solid):hover {
    background: rgba(28, 25, 20, 0.08);
}

/* Torleiv, 2026-08-16 ("Til godkjenning - tilbake til justering"): the
   rejection notice in shared/_request_approval.html.erb — a left accent
   border in the same blue the :rejected approval_badge already uses
   (application_helper.rb#APPROVAL_STATUS_COLORS), so the two visibly
   belong to the same concept without introducing a second new color. */
.rejection-notice {
    border-left: 3px solid var(--blue-600);
}

/* Torleiv, 2026-08-20 ("A" — documents/_task_context_banner.html.erb):
   shown when a document is opened via a task's "Referanse" link, so
   reading it and completing the task can happen without hunting back
   through the task list. Green rather than .rejection-notice's blue —
   a different concept (a nudge forward, not a rejected-approval status)
   deserves its own accent, not a borrowed one. */
.task-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    border-left: 3px solid var(--green-600);
    margin-bottom: var(--space-4);
}

.task-context-banner__link {
    white-space: nowrap;
    font-weight: 600;
}

} /* @layer overrides */