/* Document version-history timeline, document nav links, module table-of-contents list.
   Split out of stomn_theme.css (original lines 2397-2828) — 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 {
/* Document version history — a Basecamp-style timeline (dot + connecting
   line) with a git-diff-style inline word diff (additions/removals),
   rendered inside the document's own formatting for body changes. */
.version-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.version-timeline__entry {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-6);
    border-left: 2px solid rgba(28, 25, 20, 0.1);
}

.version-timeline__entry:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.version-timeline__entry::before {
    content: "";
    position: absolute;
    top: 0.4em;
    left: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal-color);
}

.version-timeline__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-size-base);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.version-timeline__meta time {
    color: rgba(28, 25, 20, 0.65);
}

.version-timeline__revert {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--text-size-sm);
}

.version-timeline__summary {
    margin: 0;
    font-size: var(--text-size-base);
    color: rgba(28, 25, 20, 0.65);
}

.version-timeline__details summary {
    cursor: pointer;
    font-size: var(--text-size-base);
    color: rgba(28, 25, 20, 0.65);
    margin-bottom: var(--space-2);
}

.version-timeline__diff-frame {
    padding: var(--space-4);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg-muted);
}

.version-timeline__type-changes {
    margin: 0 0 var(--space-3);
    font-size: var(--text-size-sm);
    color: rgba(28, 25, 20, 0.6);
}

.version-timeline__diff {
    font-size: var(--text-size-lg);
    line-height: 1.6;
}

.version-timeline__diff ins {
    background: rgba(47, 158, 68, 0.15);
    color: var(--success-color);
    text-decoration: none;
}

.version-timeline__diff del {
    background: rgba(178, 47, 47, 0.12);
    color: var(--danger-color);
    text-decoration: line-through;
}

/* Shrink Lexxy's toolbar buttons so every button (image, attach, bold/
   italic/strike/underline, heading, highlight, link, quote, code, lists,
   table, undo/redo) fits on one row by default instead of collapsing
   into the "…" overflow menu. Was scoped to .document-sheet — the only
   place Lexxy was used when this was written — but the sizing/overflow
   problem it fixes has nothing to do with being inside a document
   specifically; a comment editor's own Lexxy toolbar (comments/
   _new_comment.html.erb) hit the exact same overflow and rendered
   without this fix, reading as a different, less-finished component
   from the document editor's toolbar right next to it (Torleiv,
   2026-08-10). Unscoped so every Lexxy toolbar in the app gets it. */
lexxy-toolbar {
    --lexxy-toolbar-button-size: 1.35lh;
    --lexxy-toolbar-icon-size: 0.8em;
    --lexxy-toolbar-gap: 0px;
    --lexxy-toolbar-spacing: 0.2ch;
}

/* Lexxy's own dropdown-panel background rule is wrapped in :where(...),
   which carries zero specificity — an explicit background here guarantees
   an opaque backdrop for the heading/highlight/link flyouts regardless of
   what else is loaded, instead of letting the surrounding page show
   through. Same reasoning as above for unscoping this from
   .document-sheet — an opaque dropdown isn't a document-specific need. */
lexxy-toolbar [data-dropdown-panel] {
    background-color: var(--card-bg);
}

/* Reading comfort for document prose — larger than the app's default UI text
   and generously spaced, in both read mode (.ui-document-rich-content) and
   edit mode (the Lexxy editor's own content area). Kept raw, not a
   --text-size-* token: deliberately above --text-size-xl's 1.05rem
   ceiling — that scale is for UI text, not long-form reading content. */
.ui-document-rich-content,
.document-sheet .ui-document-rich-content-editor lexxy-editor,
.company-section .ui-document-rich-content-editor lexxy-editor {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* Focused programmatically (tabindex="-1", see document_selection_controller)
   purely so Cmd/Ctrl+A can be scoped to this content — not a real focusable
   widget, so it shouldn't look like one. */
.ui-document-rich-content:focus {
    outline: none;
}

/* Search-result landing highlight (search_highlight_controller.js) —
   deliberately not plain <mark>'s default yellow, which is already the
   Lexxy editor's own user-applied "highlight" formatting color; a search
   hit needs to read as transient/system-generated, not as text someone
   deliberately marked up. */
.search-highlight {
    background: rgba(255, 145, 0, 0.3);
    border-radius: 2px;
}

.search-highlight--current {
    background: rgba(255, 145, 0, 0.55);
    box-shadow: 0 0 0 2px rgba(255, 145, 0, 0.55);
}

.ui-document-rich-content p,
.document-sheet .ui-document-rich-content-editor lexxy-editor p,
.company-section .ui-document-rich-content-editor lexxy-editor p {
    margin-bottom: var(--space-4);
}

.document-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(28, 25, 20, 0.08);
}

.document-nav__link {
    font-size: var(--text-size-base);
    color: rgba(28, 25, 20, 0.65);
}

.document-nav__link--toc {
    text-align: center;
}

.document-nav__link--next {
    text-align: right;
}

/* A module's TOC reads as a page in a book, not a compact file list — larger
   type, calmer weight, more breathing room between chapters. */
.toc-list,
.toc-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-list ul {
    /* Torleiv, 2026-08-19 ("la filer i mappe synligere høre til mappa"):
       was var(--space-5) (20px) — a folder row's OWN text starts well past
       that (drag-handle + disclosure chevron + folder icon, ~4.5rem before
       the label), but a nested document row has only a drag-handle before
       its title (~1.5rem). Net effect: a document filed inside a folder
       rendered with its title starting to the LEFT of its own parent
       folder's title, reading as a sibling instead of a child. This value
       roughly matches a folder row's own icon-prefix width, so nested
       rows' text lands clearly right of their parent's. */
    padding-left: 2.75rem;
    /* Torleiv, 2026-08-19 ("gjør mulig å dra dokument inn i mappe"): an
       empty (or not-yet-populated) folder's nested <ul> rendered at 0px
       height — SortableJS hit-tests against the element's own bounding
       box, so a zero-height list is a drop target that physically cannot
       be dropped onto. This is why dragging a document onto any folder
       with nothing in it yet silently just reordered it at the top level
       instead of reparenting it. A folder that already has children was
       never affected — its rows already gave the <ul> real height. */
    min-height: var(--space-6);
}

.toc-list__item {
    padding: var(--space-3) 0;
}

/* A folder item's own bottom padding sat AFTER its nested <ul> (the
   padding belongs to the <li> wrapping that list, not the list itself),
   stacking with the last nested child's own bottom padding — e.g. "9.
   Vedlegg" > "Forsikring" > "Waco forsikringsportal" read with a visibly
   bigger gap before the next row ("Utleggsfaktura") than any other pair
   of adjacent rows in the TOC. The nested list's own last item already
   supplies that trailing space, so a folder item doesn't need its own
   copy of it once something is nested inside. Top padding is untouched —
   that one IS the normal "breathing room before this row" every item
   gets, folder or not. */
.toc-list__item:has(> .toc-list) {
    padding-bottom: 0;
}

/* Drag-and-drop hover feedback for Mine dokumenter (Torleiv, 2026-08-10:
   "lag intuitiv hover/markering når du drar dokument inn i mappe (eller
   ut)") — SortableJS already inserts a .sortable-ghost placeholder row
   into whichever list is currently under the pointer during a drag (see
   sortable_toc_controller.js's defaultOptions, which doesn't
   override the ghostClass default), so :has() alone highlights the
   right folder with no JS: it matches only while a ghost actually sits
   inside that folder's own list, and stops matching the instant the
   ghost moves elsewhere (dragged back out, or into a different folder),
   without any dragenter/dragleave bookkeeping of our own. */
.toc-list__item:has(> div > .toc-list > .sortable-ghost) {
    background: rgba(37, 99, 235, 0.06);
    outline: 2px dashed var(--signal-color);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* Only the outermost chapter list gets a divider between entries — nested
   folder/heading lists stay undivided so the TOC doesn't turn into a grid
   of lines. */
.toc-sheet > .toc-list > .toc-list__item + .toc-list__item {
    border-top: 1px solid rgba(28, 25, 20, 0.06);
}

/* Feedback while dragging OS files over a folder page (Torleiv, Basecamp
   #10217893071) — upload_dropzone_controller.js toggles this on dragover/
   dragleave/drop. Dashed outline rather than a solid border so it doesn't
   look like a permanent, always-there UI element. */
.upload-dropzone--active {
    outline: 2px dashed var(--signal-color);
    outline-offset: -2px;
    background: var(--signal-color-tint);
    border-radius: var(--radius-md);
}

/* The empty-state row (Mine dokumenter, when there's nothing of the
   person's own yet) shouldn't read as its own separate section from
   whatever follows it (e.g. the IMS-arkitektur/Stilguide rows) — no
   divider right after it, same as within a single ungrouped list. */
.toc-list__item--empty-state + .toc-list__item {
    border-top: none;
}

/* A top-level folder chapter (e.g. "9. Vedlegg") got a noticeably heavier
   treatment than its plain-document sibling chapters ("1. Favo AS" through
   "8. HMS", rendered as .toc-list__link — no icon, regular weight) purely
   because it happens to be a Folder in the data, not because it's meant
   to stand out. font-weight toned down from 600 to match .toc-list__link's
   own weight, and the icon switched to the same regular (thin) Phosphor
   style already used everywhere else in the TOC (drag handle, external-
   link, caret) instead of the heavier default fill style — still a
   folder icon (readers still need SOME cue this one expands into more
   chapters, not a document), just no longer the loudest thing on the
   page. */
.toc-list__folder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-size-xl);
    font-weight: 500;
}

/* A folder nested inside another TOC entry (an attachments sub-group,
   e.g. "Forsikring" under a top-level "9. Vedlegg" chapter) — reads as a
   quieter label, not a second chapter heading at the same visual
   weight as its parent. */
.toc-list__folder--nested {
    font-size: var(--text-size-base);
    font-weight: 500;
    color: rgba(28, 25, 20, 0.65);
}

/* Torleiv, 2026-08-20 (#10222026203): "Vis antall dokumenter når mappe
   er lukket" — a plain CSS toggle off the disclosure button's own
   aria-expanded, same element the JS controller already flips on every
   open/close, rather than a second thing for that JS to separately
   manage. Muted/small like .toc-list__language-tag (a disambiguator,
   not something worth drawing the eye to), pushed to the row's far end
   so it doesn't visually compete with the folder name for attention. */
.toc-list__folder-count {
    display: none;
    margin-left: auto;
    font-size: var(--text-size-xs, 0.75rem);
    font-weight: 400;
    color: var(--text-500, #666);
}

.toc-list__folder:has([aria-expanded="false"]) .toc-list__folder-count {
    display: inline;
}

.toc-list__link {
    display: block;
    padding: var(--space-1) 0;
    font-size: 1.125rem;
    line-height: 1.5;
}

.toc-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Torleiv, 2026-08-20 (#10221925317): "diskre språk-indikator" — a
   document's translation pair (see Document#language_tag) can carry the
   exact same title as its sibling, so this is the only thing telling the
   two rows apart in the list. Deliberately quiet (muted color, no
   border/background) rather than a loud badge — it's a disambiguator,
   not a status worth drawing the eye to. */
.toc-list__language-tag {
    font-size: var(--text-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-500, #666);
    text-transform: uppercase;
}

/* Torleiv, 2026-08-20 (#10222061459): "se om du finner løsning der en/no-tag
   + lenke står i samme posisjon nedover" — this wrapper, not each badge, owns
   the push-to-the-right, so the language tag and the public-link icon line up
   in the same spot down the list regardless of which combination a given row
   actually has. */
.toc-list__row-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Torleiv, 2026-08-21 (#10226245076, "TOC må ha globe og språk i rett
   kolonne") — rendered even when a row has no language tag (see
   systems/_toc.html.erb), so this reserves a fixed-width column instead
   of collapsing to 0 and letting the icon slide left into its spot on
   those rows. Width covers the widest real tag (two letters, e.g. "NO"/
   "EN") plus a little breathing room; text-align: center keeps a single
   narrower tag looking intentional, not left-jammed against the icon. */
.toc-list__language-tag {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
}

.toc-list__public-icon {
    display: inline-flex;
    color: var(--text-500, #666);
}

/* Torleiv, 2026-08-20 (#10222061459/#10222139211): "mulig å slå på
   offentlig deling [fra] toc" — a quiet icon-only trigger, matching
   .toc-list__public-icon's own muted color so it reads as "same slot,
   not-yet-active state" rather than a loud new call to action. Only
   rendered for the owner/approver who's actually allowed to flip this
   (see systems/_toc.html.erb's can_share_document). */
.toc-list__share-button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-500, #666);
}

.toc-list__share-button:hover {
    color: var(--text-900, #111);
}

/* Two click zones on the same row: the title text (.toc-list__link)
   navigates via its own <a> behavior; the rest of the row toggles the
   heading sub-list open/closed (see disclosure_controller.js#toggleUnlessLink). */
.toc-list__row:has(.toc-list__disclosure) {
    cursor: pointer;
}

/* Visual/grab affordance only — the whole row is draggable (see the sortable
   controller on .toc-list), matching the app's hover-only editing-affordance
   convention (see .system-settings__trigger) rather than showing at rest. */
.toc-list__drag-handle {
    cursor: grab;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.toc-list__item:hover .toc-list__drag-handle {
    opacity: 1;
}

/* A non-draggable row (shared shortcuts like IMS-arkitektur/Stilguide,
   see folders/_personal_toc_document.html.erb and _personal_toc.html.erb)
   still renders this icon to reserve its layout space, so the row's text
   lines up with every draggable sibling instead of sitting flush with the
   edge — but it must never actually appear, hover or not. */
.toc-list__drag-handle--placeholder,
.toc-list__item:hover .toc-list__drag-handle--placeholder {
    cursor: default;
    opacity: 0;
}

/* Collapsed by default (see disclosure_controller.js) — a chapter's heading
   sub-items are noise until asked for. Purely a visual indicator (not its
   own click target) — the click handler lives on .toc-list__row. */
.toc-list__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: var(--space-1);
    color: rgba(28, 25, 20, 0.4);
}

.toc-list__disclosure i {
    transition: transform 0.15s ease;
}

.toc-list__disclosure[aria-expanded="true"] i {
    transform: rotate(90deg);
}

/* A folder row (folders/_personal_toc_folder.html.erb) has several
   distinct click targets on the same row (name renames, delete deletes),
   unlike a heading row's single "anywhere toggles" click zone — so its
   own disclosure toggle is a real, explicit button rather than a purely
   visual indicator, and sits right after the drag handle instead of
   pushed to the end of the row via margin-left: auto. */
.toc-list__disclosure--folder {
    margin-left: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.toc-list__folder-name-wrap {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.toc-list__folder-name {
    cursor: text;
}

.toc-list__folder-name:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.toc-list__folder-name-form {
    flex: 1;
    min-width: 0;
}

.toc-list__folder-name-input {
    width: 100%;
    font: inherit;
    font-weight: 600;
    border: 1px solid var(--signal-color);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
    background: var(--card-bg);
}

/* Same hover-revealed affordance as the drag handle right next to it —
   a delete icon showing at rest on every single folder row would be
   visually loud for an action that's rarely used. */
.toc-list__folder-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: rgba(28, 25, 20, 0.35);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.toc-list__item:hover .toc-list__folder-delete {
    opacity: 1;
}

.toc-list__folder-delete:hover {
    color: var(--danger-color);
}

/* Torleiv, 2026-08-19 ("+mulighet for undermapper også"): same hover-reveal
   affordance as .toc-list__folder-delete right above, just for adding a
   subfolder instead of removing this one — green instead of red since it's
   a constructive action, not a destructive one. */
.toc-list__folder-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: rgba(28, 25, 20, 0.35);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.toc-list__item:hover .toc-list__folder-add {
    opacity: 1;
}

.toc-list__folder-add:hover {
    color: var(--signal-color);
}

/* Torleiv, 2026-08-20 (#10224015214): "Last ned som zip" moved from one
   page-level button to a per-folder action — same hover-reveal affordance
   as .toc-list__folder-add/-delete right next to it, neutral color since
   it's neither constructive nor destructive. */
.toc-list__folder-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: rgba(28, 25, 20, 0.35);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.toc-list__item:hover .toc-list__folder-download {
    opacity: 1;
}

.toc-list__folder-download:hover {
    color: rgba(28, 25, 20, 0.75);
}

/* Torleiv, 2026-08-19 ("vis format, størrelse og navn på filer"): format +
   size, muted and pushed to the row's far side — informational, not the
   thing a reader scans for first (the name already carries that). */
.toc-list__file-meta {
    margin-left: auto;
    padding-right: var(--space-2);
    color: rgba(28, 25, 20, 0.45);
    font-size: var(--text-size-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Opens the file in a new tab — separated from the name itself now that
   the name is the rename-trigger (see folders/_toc_uploaded_file.html.erb's
   own comment for why those two can't be the same click target anymore). */
.toc-list__file-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    flex-shrink: 0;
}

.toc-list__headings {
    margin-top: var(--space-1);
}

.toc-list__heading {
    padding: 0;
}

.toc-list__heading-link {
    display: block;
    padding: var(--space-1) 0;
    padding-left: var(--space-6);
    font-size: var(--text-size-xl);
    color: rgba(28, 25, 20, 0.8);
}

/* A document's own h3s nested under one of its h2s — deeper indent and a
   visibly lighter/smaller treatment than the h2 rows around it, so a flat
   disclosure list (h1/h2/h3 all queried together, see Document#headings)
   still reads as a hierarchy instead of one undifferentiated list. */
.toc-list__heading-link--level-3 {
    padding-left: var(--space-8);
    font-size: var(--text-size-base);
    color: rgba(28, 25, 20, 0.6);
}


} /* @layer overrides */