/* Workspace hero/logo upload, module and shortcut cards, quicklinks, people directory list.
   Split out of theme.css (original lines 2829-3558) — 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#theme_stylesheet_link_tag) —
   files are concatenated in this exact original order, so no cascade
   tie-break changes. */
@layer overrides {
/* Torleiv, 2026-08-19 (premium refresh): the hero used to be visually
   identical to the module cards below it (same plain white .ui-box) —
   the first thing anyone sees after logging in read as just another
   card in the grid, not the one place that's actually THIS company's
   own space. A soft warm-tinted background (barely a shade off the
   page itself, not a hard color block) plus a touch more padding gives
   it its own quiet presence without competing with the name/description
   text sitting on top of it. */
/* #10278596584 (dark mode, screenshot: "fiks bakgrunn i selskap-boks"):
   #FBF8F3 is a light-mode-only literal (never redefined for dark mode),
   so the gradient still ran light-cream-to-card-bg even once --card-bg
   itself flips to Blekk — a bright cream corner on an otherwise-black
   card. var(--card-bg-muted) already IS "barely a shade off --card-bg,
   warm-tinted" in both themes (see its own two definitions), which is
   exactly this gradient's original intent — reusing it instead of a
   bespoke light-only value. border: var(--card-border) added for the
   same reason .workspace-shortcut gets one below: this card previously
   had no border and no shadow at rest, relying entirely on --card-bg
   contrasting against the page's own --background-color — a contrast
   that exists in light mode (white card on Bein page) but disappears in
   dark mode, where both are Blekk.

   Torleiv, 15.09.2026 (screenshot of the home page: "fjern gradient på
   selskap-boksen"): the cream-to-white sweep is gone; the card is the
   same flat --card-bg as the module cards under it. What still sets it
   apart is the extra padding, the border and the size of the name —
   not a wash of colour behind them. */
.workspace-dashboard__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr);
    gap: var(--space-4);
    padding: var(--space-6);
    position: relative;
    background: var(--card-bg);
    border: var(--card-border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Torleiv, 2026-08-19 (premium refresh follow-up): the whole box is
   already a stretched link to /company (see .workspace-hero__link below)
   — the module/shortcut cards it sits above already lift on hover to
   signal "this is clickable", so the one card at the very top of the
   page that's MOST clickable had less affordance than the ones below it. */
.workspace-dashboard__hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(28, 25, 20, 0.05), 0 16px 32px -16px rgba(28, 25, 20, 0.18);
}

/* Keeps the hero's two-column layout intact while the view/edit toggle
   swaps content — the view wrapper's own children (intro, logo) become the
   grid's direct items via display:contents; edit mode instead spans both
   columns as one block, since a name/description/logo form doesn't need to
   preserve that two-column split. */
.workspace-dashboard__hero [data-workspace-hero-target="view"],
.workspace-dashboard__hero [data-workspace-hero-target="edit"] {
    display: contents;
}

.workspace-dashboard__hero [data-workspace-hero-target="view"][hidden],
.workspace-dashboard__hero [data-workspace-hero-target="edit"][hidden] {
    display: none;
}

/* Small hover-only hit zone in the corner — the gear (and its hover reveal)
   is scoped to this zone specifically, not the whole hero box, so it only
   appears when the pointer is actually near the corner. */
.workspace-hero__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--space-3);
}

/* Editing the Selskap box is a desktop-only action — hidden until the
   corner is hovered, with no touch equivalent needed since there's no
   touch-only path to this edit mode in the first place. */
.workspace-hero__gear {
    background: none;
    border: none;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    /* #10371227376: 24 × 24 klikkflate (WCAG 2.2, 2.5.8). Ikonet er
       urørt — knappen er flex-sentrert, så glyfen står der den sto.
       Det er boksen rundt som vokser, og den er usynlig. */
    min-width: 24px;
    min-height: 24px;
}

/* Stretched link — covers the whole box so the entire "Selskapet" hero
   navigates to Company, same click-anywhere pattern as the Moduler/
   Snarveier cards below. Lower z-index than .workspace-hero__corner (2)
   so the edit gear stays independently clickable above it. */
.workspace-hero__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Not `inherit` — this link's actual DOM parent
       ([data-workspace-hero-target="view"], display: contents) has no
       border-radius of its own for `inherit` to pick up; go straight to
       the same token .ui-box itself resolves to. */
    border-radius: var(--box-roundness, 7px);
}

/* Torleiv, 2026-08-18 ("Grønn ramme rundt selskapsinfo på startsiden har
   defekt i hjørnene"): this link is the whole hero box (inset: 0), so its
   default browser focus outline is a plain rectangle — .workspace-dashboard__hero
   clips its children to its own rounded corners (overflow: hidden), which
   cuts that rectangle off unevenly right at each corner instead of curving
   with it. box-shadow (already the pattern .workspace-hero__gear below
   uses for the same reason) follows border-radius properly instead. */
.workspace-hero__link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--signal-color);
}

/* Bottom-right corner — same position the arrow sits at in the Moduler/
   Snarveier cards below, so this reads as the same "whole card is a
   link" affordance rather than a one-off. Well clear of the gear's
   top-right 56px zone, so a permanent (not hover-revealed) indicator
   here never competes with it. */
.workspace-hero__link-arrow {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    color: var(--signal-color);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.workspace-hero__corner:hover .workspace-hero__gear,
.workspace-hero__gear:focus-visible {
    opacity: 1;
}

/* #10281061392 (mobile round 2): hover-revealed is never revealed on a
   phone — see .ui-box__gear's own note (09_profile_and_dialogs.css) for
   the reasoning and the hit-area technique shared with it. */
@media (hover: none) {
    .workspace-hero__gear {
        opacity: 1;
        position: relative;
    }

    .workspace-hero__gear::after {
        content: "";
        position: absolute;
        inset: -12px;
    }
}

/* opacity:1 alone only makes the icon visible — a keyboard user still
   needs an actual focus ring to tell "focused" apart from "just
   revealed", same reasoning as .workspace-shortcut__gear and
   .system-settings__trigger/.document-nav-gear__trigger below. */
.workspace-hero__gear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--signal-color);
}

.workspace-logo-edit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

/* Same footprint as view mode's plain image — controls overlay on hover
   instead of adding height below the image, so toggling edit mode on/off
   doesn't change the box's height (that was the "hopper" jump). */
.workspace-logo-edit__image-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Sized to the image itself (not a fixed box) so the frame doesn't
       change the box's height vs. view mode — just outlines whatever
       .workspace-logo-upload__image already renders at. */
    border: 1px dashed color-mix(in srgb, var(--text-900) 22%, transparent);
    border-radius: var(--card-radius);
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1);
}

.workspace-logo-edit__image-wrap:hover {
    border-color: color-mix(in srgb, var(--text-900) 40%, transparent);
}

.workspace-logo-edit__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* 15.09.2026: was rgba(255,255,255,.92) — a white veil under links that
       turn light in dark mode. The card's own ground, mostly opaque. */
    background: color-mix(in srgb, var(--card-bg) 92%, transparent);
    border-radius: var(--card-radius);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.workspace-logo-edit__image-wrap:hover .workspace-logo-edit__overlay,
.workspace-logo-edit__overlay:focus-within {
    opacity: 1;
}

.workspace-logo-edit__remove {
    display: inline;
}

.workspace-logo-upload {
    display: flex;
}

.workspace-logo-upload__input {
    display: none;
}

.workspace-logo-upload__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-4);
    border: 2px dashed color-mix(in srgb, var(--text-900) 15%, transparent);
    border-radius: var(--card-radius);
    color: var(--text-400, #aaa);
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: var(--text-size-sm);
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
}

.workspace-logo-upload__label:hover {
    border-color: color-mix(in srgb, var(--text-900) 30%, transparent);
    color: var(--text-600, #666);
}

.workspace-logo-upload--filled {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4);
    border-radius: var(--card-radius);
}

.workspace-logo-upload__image {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}

/* Torleiv (todo #10229728755): the "velg fra Våre dokumenter" picker
   modal — a grid of already-uploaded images to click instead of
   uploading a duplicate copy. */
.logo-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
}

.logo-picker__form {
    display: contents;
}

.logo-picker__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    background: none;
    cursor: pointer;
    text-align: center;
}

.logo-picker__item:hover {
    background: color-mix(in srgb, var(--text-900) 3%, transparent);
}

.logo-picker__image {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.logo-picker__title {
    font-size: var(--text-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.workspace-dashboard__lead {
    margin: var(--space-3) 0 0;
    max-width: 60ch;
    color: var(--text-700, #444);
    line-height: 1.65;
    white-space: pre-wrap;
}

/* Basecamp #10272663119 ("klikk på visjonen gjør at den legges i
   utklippstavle"). position: relative + z-index: 2 is what makes this
   element's own click land here instead of falling through to
   .workspace-hero__link (the stretched card-wide link underneath,
   z-index: 1) — same stacking level .workspace-hero__corner already
   uses for the edit gear, not a new mechanism. Hover background reuses
   .click-to-edit__display's own "this is clickable" affordance. */
.workspace-dashboard__lead--copyable {
    position: relative;
    z-index: 2;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
}

.workspace-dashboard__lead--copyable:hover {
    background: color-mix(in srgb, var(--text-900) 6%, transparent);
}

/* No new flash-tooltip CSS needed — copy_value_controller.js hardcodes
   the access-list__copy-button--copied/--failed class names it flashes
   on `this.element` (not a per-instance value), and those two classes'
   own ::after "Kopiert!"/"Kunne ikke kopiere" tooltip rule
   (09_profile_and_dialogs.css) is already generic (anchors off whatever
   positioned ancestor it's added to — this element, via position:
   relative above), not scoped to the access-list component despite the
   name. Same reuse shared/_copy_value_button.html.erb's own button
   already relies on. */

/* Torleiv, 2026-08-19 (premium refresh follow-up): was var(--signal-color)
   — green section labels next to the app's own green accent buttons/badges
   read as competing for the same "this is actionable" meaning, when these
   are just plain headings. Deep neutral instead, same role as any other
   section heading in the app. */
.workspace-section-title {
    margin: 0 0 var(--space-4);
    color: var(--text-900);
    font-family: var(--font-sans), sans-serif;
    font-size: var(--text-size-xl);
    font-weight: 700;
}

/* 2026-08-28 (#10248539324, "Lag ⚙️-meny"): only the Snarveier section
   pairs its own heading with a settings trigger today, but named
   generically (not .workspace-shortcuts-title-row) so any other section
   heading that grows its own gear later can reuse this instead of a
   bespoke row. The row itself carries the heading's own bottom margin
   now, not the h2 — a flex child's own margin would just add uneven
   space next to the gear instead of below the whole row. */
.workspace-section-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

.workspace-section-title-row .workspace-section-title {
    margin: 0;
}

.workspace-section-title__gear-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: color-mix(in srgb, var(--text-900) 45%, transparent);
    cursor: pointer;
    opacity: 0;
    transition: color 0.15s ease, opacity 0.15s ease;
    /* #10371227376: 24 × 24 klikkflate (WCAG 2.2, 2.5.8). Ikonet er
       urørt — knappen er flex-sentrert, så glyfen står der den sto.
       Det er boksen rundt som vokser, og den er usynlig. */
    min-width: 24px;
    min-height: 24px;
}

/* #10278596584 (dark mode): rgb(28, 25, 20) is Blekk, this app's own
   dark-mode page background — hover text nearly vanished against it. */
.workspace-section-title__gear-trigger:hover {
    color: var(--text-900);
}

/* Torleiv, 2026-08-21 (#10226232424, "Layout organisasjon / rolle") — the
   assigned-person chip on the Organisasjon page used to be a bare .ui-box
   at p-xs: that class is the app's page-level *card* primitive (border +
   shadow), sized for a whole section, not an inline pill — shrunk down
   it reads as plain unstyled text next to the person's name. A dedicated
   small pill instead, same visual language as .ui-badge but built to hold
   a name plus a remove action rather than a single label. */
.org-role-member {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    height: var(--height-xs);
    background-color: var(--text-100);
    border: var(--border-width) solid var(--text-200);
    border-radius: var(--rounded-full);
    font-size: var(--font-size-sm);
    color: var(--text-800);
}

/* #10253034472 ("style denne siden bedre" / "uten knapper"): the role
   name field and delete action used to sit in two separate stacked rows
   (a form of its own, then a separate button_to below) — one header row
   reads as one unit, and freeing the name field from its own <form>
   layout lets it size to content instead of stretching edge-to-edge like
   a full-width page field. */
.org-role-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.org-role-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.org-role-card__name-form {
    flex: 1 1 auto;
    max-width: 20rem;
}

.org-role-card__members {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.org-role-card__assign-form {
    max-width: 20rem;
}

/* FORSLAG FRA JOBBTITTELEN (#10399092218, 14.10.2026). Et forslag er
   ikke en tilstand kortet har, det er en handling som tilbys — derfor
   knapper og ikke merker, og derfor ghost og ikke solid: de skal ligge
   lavere enn navnene på dem som faktisk HAR rollen, rett over. */
.org-role-card__suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

/* «Ny rolle»-raden skjøv sida sidelengs på smal skjerm (målt på 500 px,
   14.10.2026). To ting måtte til, og bare den ene er åpenbar:

   flex-wrap alene holder ikke. Et <input> har en egen minstebredde fra
   nettleseren, så `flex: 1 1 auto` kan ikke krympe det under den — raden
   blir bredere enn forelderen uansett hvor mye den får lov til å brytes.
   min-width: 0 er det som faktisk slipper krympingen løs.

   Eldre enn forslagene over; funnet mens de ble målt. */
.org-role-new-form {
    flex-wrap: wrap;
}

.org-role-new-form .ui-input {
    min-width: 0;
}

.org-role-suggestion {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Begrunnelsen, ikke navnet. Den skal kunne leses når man lurer, og
   ellers ligge i ro.

   BARE FARGE, INGEN EGEN STØRRELSE. Første utgave satte også
   --font-size-sm (0,6875rem). Liten OG dempet er to dempinger på samme
   tekst, og knappen er alt size-sm. .text-dense — mønsteret resten av
   appen bruker for nedtonet tekst — endrer bare fargen, av samme grunn.
   OG IKKE --text-300, SOM VAR FØRSTE FORSØK. Målt mot kortets egen
   bakgrunn, i begge temaer:

     --text-300   2,08 lyst   <- under WCAG AA (4,5:1 for brødtekst)
     --text-600   4,04 lyst   <- fortsatt under
     --text-700   6,26 lyst / 8,93 mørkt   <- valgt

   Samme svar som .workspace-hero-eyebrow kom til 05.10.2026, og samme
   tall. Teksten er 11 px (knappen er size-sm), så kravet er 4,5 og ikke
   3 — «stor tekst» begynner først ved 18,66 px.

   Dempingen ligger dermed i at den står ETTER navnet og uten egen vekt,
   ikke i at den er lys. Det er den eneste dempingen som ikke koster
   lesbarhet. Måles i org_role_title_suggestion_test, i begge temaer. */
.org-role-suggestion__reason {
    color: var(--text-700);
}

.workspace-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-3);
}

/* #10278596584 (dark mode, screenshot: "rammer på moduler"): no border
   here before — the card read fine in light mode purely from --card-bg
   (white) contrasting against the page's own --background-color (Bein),
   but --card-bg and --background-color are the SAME Blekk value in dark
   mode, so the card had zero edge definition there at rest (only the
   hover box-shadow, which is itself a fixed dark rgba that barely shows
   on an already-dark page — see this file's own :hover rule below). */
.workspace-shortcut {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 150px;
    padding: var(--space-5);
    border-radius: var(--card-radius);
    border: var(--card-border);
    background: var(--card-bg);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Torleiv, 2026-08-19 (premium refresh): the lift already existed but had
   nothing backing it up — a card moving 1px with no shadow change reads
   as a glitch more than a deliberate hover state. Pairing the existing
   translateY with a deeper --card-shadow-style shadow makes the card
   actually feel like it's lifting off the page. */
.workspace-shortcut:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(28, 25, 20, 0.05), 0 16px 32px -16px rgba(28, 25, 20, 0.18);
}

/* Torleiv, 2026-08-13: the Skjult/Privat/Under arbeid badge used to sit
   inline right after the title text, crowding it. flex + space-between
   pushes the badge to the right when the title fits on one line;
   flex-wrap: wrap-reverse means that when the title's too long to share
   a line with the badge, the badge is what wraps — and wrap-reverse
   stacks that wrapped line ABOVE the first line instead of below, so the
   badge floats on top of the title in that case rather than getting
   squeezed awkwardly beside it or dropping under it. */
.workspace-shortcut [data-module-card-target="titleDisplay"] {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

/* Curated background tints for module cards (see System::COLORS) — soft,
   on-brand fills rather than a free color picker, so a card never clashes
   with the rest of the page regardless of which one is chosen. */
/* 15.09.2026 (UX review, dark mode): these were six fixed light pastels
   (#E1F0E5 …), while the card's text inherits --text-900 — Bein in dark
   mode, so nearly white text on a light pastel, about 1.2:1, on the
   first page after login. Mixed from a brand hue into --card-bg instead,
   the same way --signal-color-tint is built, so the tint follows the
   ground in both themes: pale over white, deep over Blekk. */
/* 16.09.2026 (#10309145611): one definition per hue, read by BOTH the card
   tint here and the swatch chip further down. The two lists had already
   drifted — teal was #2F9C96 as a tint and #2F9E96 as a chip, orange
   #E08A3C and #DB7C2E — so the chip you picked was not quite the colour
   you got.
   The mix went from 14% to 22% at the same time, and that was measured
   rather than chosen by eye: at 14% the thirteen tints land within a few
   RGB steps of each other, so a colour could not tell one card from the
   next (green and teal sat 5 apart, amber and orange 4). 22% roughly
   doubles every gap while keeping the card soft — it is still more than
   three quarters ground — and text contrast stays 12:1 on Bein and
   8.5:1 on Blekk. */
:root {
    --module-color-sky: #4F7FC9;
    --module-color-teal: #2F9C96;
    --module-color-green: #3FB37F;
    --module-color-leaf: #5CB84E;
    --module-color-moss: #94B83E;
    --module-color-amber: #E3A72F;
    --module-color-orange: #E08A3C;
    --module-color-brick: #C74B41;
    --module-color-rose: #E0607E;
    --module-color-plum: #BF5FA8;
    --module-color-purple: #8B5FBF;
    --module-color-slate: #6E7E8F;
}

/* Blue is the profile's own pair rather than a hue of its own: Blekk for
   the chip, Sand for the fill (see --signal-color-tint's comment in
   01_foundation_and_header.css). */
.workspace-shortcut[data-color="blue"] {
    background: var(--signal-color-tint);
}

.workspace-shortcut[data-color="sky"] {
    background: color-mix(in srgb, var(--module-color-sky) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="teal"] {
    background: color-mix(in srgb, var(--module-color-teal) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="green"] {
    background: color-mix(in srgb, var(--module-color-green) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="leaf"] {
    background: color-mix(in srgb, var(--module-color-leaf) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="moss"] {
    background: color-mix(in srgb, var(--module-color-moss) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="amber"] {
    background: color-mix(in srgb, var(--module-color-amber) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="orange"] {
    background: color-mix(in srgb, var(--module-color-orange) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="brick"] {
    background: color-mix(in srgb, var(--module-color-brick) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="rose"] {
    background: color-mix(in srgb, var(--module-color-rose) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="plum"] {
    background: color-mix(in srgb, var(--module-color-plum) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="purple"] {
    background: color-mix(in srgb, var(--module-color-purple) 22%, var(--card-bg));
}

.workspace-shortcut[data-color="slate"] {
    background: color-mix(in srgb, var(--module-color-slate) 22%, var(--card-bg));
}

/* Module-front-page Snarveier cards (systems/_shortcuts.html.erb) are
   draggable directly on the card link itself, unlike the dashboard's own
   module cards above — no separate -wrap element, since there's no
   inline-edit/color-panel content to toggle alongside the link here. */
.workspace-shortcut[draggable="true"] {
    cursor: grab;
}

.workspace-shortcut.is-dragging {
    opacity: 0.4;
}

.workspace-shortcut-wrap {
    position: relative;
}

/* 16.09.2026 (#10308527092): the «Ny modul» card — same box as a module,
   dashed and quiet, so it reads as a place to add rather than a module. */
.workspace-shortcut--add {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border-style: dashed;
    background: transparent;
    color: var(--text-700);
    text-decoration: none;
}

.workspace-shortcut--add:hover {
    color: var(--text-900);
    background: color-mix(in srgb, var(--text-900) 4%, transparent);
}

/* systems/new.html.erb: the colour swatches as a labelled radio group. */
.system-new__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.system-new__swatch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.system-new__swatch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.system-new__swatch input:focus-visible + .workspace-shortcut__swatch {
    outline: 2px solid color-mix(in srgb, var(--text-900) 35%, transparent);
    outline-offset: 2px;
}

.system-new__swatch input:checked + .workspace-shortcut__swatch {
    box-shadow: 0 0 0 2px var(--text-900);
}

.workspace-shortcut-wrap[draggable="true"] {
    cursor: grab;
}

.workspace-shortcut-wrap.is-dragging {
    opacity: 0.4;
}

.workspace-shortcut-wrap .workspace-shortcut {
    height: 100%;
}

/* The view/edit toggle wrapper (data-module-card-target) sits between the
   wrap and the card itself, with no height of its own (auto) — breaking
   the 100% chain above, since a percentage height can't resolve against
   an indefinite auto-height parent. Give it the same 100% so the card's
   own height:100% has something definite to resolve against. */
.workspace-shortcut-wrap > [data-module-card-target] {
    height: 100%;
}

/* Color-picker + gear icons, side by side. Both stay fully hidden until the
   pointer is in the corner hit-zone specifically (not the whole card),
   mirroring the workspace hero's own corner gear. */
.workspace-shortcut__corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
}

.workspace-shortcut__menu {
    position: relative;
    display: flex;
}

/* Adjusting a module card (text, color, order) is a desktop-only action —
   hidden until the corner is hovered, same as the other editing gears. */
/* #10371227376: begge var under 24 px (gear 16, icon-button 12). Samme
   løsning som tannhjulene over — boksen vokser, ikonet står. */
.workspace-shortcut__gear,
.workspace-shortcut__icon-button {
    min-width: 24px;
    min-height: 24px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
    outline: none;
}

.workspace-shortcut__gear:focus-visible,
.workspace-shortcut__icon-button:focus-visible {
    box-shadow: 0 0 0 2px var(--signal-color);
}

.workspace-shortcut__corner:hover .workspace-shortcut__gear,
.workspace-shortcut__corner:hover .workspace-shortcut__icon-button,
.workspace-shortcut__gear:focus-visible,
.workspace-shortcut__icon-button:focus-visible {
    opacity: 1;
}

/* Always a small color wheel, regardless of the card's current color — a
   generic "customize color" affordance rather than a swatch of the current
   selection (the card's own tinted background already shows that). */
.workspace-shortcut__color-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #E4574C, #E3A72F, #3FB37F, #2F5D8A, #8B5FBF, #E0607E, #E4574C);
    -webkit-mask: radial-gradient(circle, transparent 48%, #000 49%);
    mask: radial-gradient(circle, transparent 48%, #000 49%);
}

.workspace-shortcut__panel {
    top: 36px;
    right: 4px;
    min-width: 200px;
}

.workspace-shortcut__swatches {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.workspace-shortcut__swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    padding: 2px;
    cursor: pointer;
    background: none;
}

.workspace-shortcut__swatch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-900) 15%, transparent);
    background: #fff;
}

/* "No color" swatch — a diagonal slash through a plain circle, the
   standard "none" affordance (as opposed to a solid color chip). */
.workspace-shortcut__swatch span[data-color="default"] {
    background:
        linear-gradient(45deg, transparent 46%, #E4574C 47%, #E4574C 53%, transparent 54%),
        #fff;
}

/* Torleiv, 16.09.2026 (#10309255168): brikken viste Blekk, kortet ble Sand,
   og navnet sa «Blå». Ingen av de tre stemte med hverandre. Brikken viser
   nå det man faktisk får. Den lagrede verdien er fortsatt "blue", så ingen
   modul skifter farge — det er navnet og brikken som var feil, ikke fargen. */
.workspace-shortcut__swatch span[data-color="blue"] { background: var(--signal-color-tint); }
.workspace-shortcut__swatch span[data-color="sky"] { background: var(--module-color-sky); }
.workspace-shortcut__swatch span[data-color="teal"] { background: var(--module-color-teal); }
.workspace-shortcut__swatch span[data-color="green"] { background: var(--module-color-green); }
.workspace-shortcut__swatch span[data-color="leaf"] { background: var(--module-color-leaf); }
.workspace-shortcut__swatch span[data-color="moss"] { background: var(--module-color-moss); }
.workspace-shortcut__swatch span[data-color="amber"] { background: var(--module-color-amber); }
.workspace-shortcut__swatch span[data-color="orange"] { background: var(--module-color-orange); }
.workspace-shortcut__swatch span[data-color="brick"] { background: var(--module-color-brick); }
.workspace-shortcut__swatch span[data-color="rose"] { background: var(--module-color-rose); }
.workspace-shortcut__swatch span[data-color="plum"] { background: var(--module-color-plum); }
.workspace-shortcut__swatch span[data-color="purple"] { background: var(--module-color-purple); }
.workspace-shortcut__swatch span[data-color="slate"] { background: var(--module-color-slate); }

.workspace-shortcut__swatch.is-selected span {
    border-color: var(--signal-color);
    border-width: 2px;
}

.workspace-shortcut strong {
    font-size: var(--text-size-xl);
}

/* Inline click-to-edit fields for a module card's title/text — text reads
   identically to view mode (same weight/size/line-height, no background
   fill), just a dotted frame around it, always dashed even while focused
   (unlike the Selskap box's inputs, which solidify on focus). */
.workspace-shortcut-inline-input,
.workspace-shortcut-inline-textarea {
    display: block;
    width: calc(100% + var(--space-2));
    /* Cancel out the field's own padding+border on every axis — otherwise
       the 1px border alone shifts the text ~1-2px right of view mode, and
       the padding+border together add height that grows two stacked
       fields past view mode's card height. */
    margin: calc((var(--space-1) + 1px) * -1) 0 calc((var(--space-1) + 1px) * -1) calc((var(--space-2) + 1px) * -1);
    border: 1px dashed color-mix(in srgb, var(--text-900) 35%, transparent);
    border-radius: var(--radius-sm);
    background: none;
    padding: var(--space-1) var(--space-2);
    font-family: inherit;
    color: inherit;
}

.workspace-shortcut-inline-input {
    font-weight: 700;
    font-size: var(--text-size-xl);
}

.workspace-shortcut-inline-textarea {
    line-height: 1.5;
    resize: vertical;
    overflow-y: hidden;
}

.workspace-shortcut-inline-input:focus,
.workspace-shortcut-inline-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--text-900) 60%, transparent);
}

.workspace-shortcut span:last-child {
    margin-top: auto;
}

.workspace-shortcut__arrow {
    align-self: flex-end;
    color: var(--signal-color);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 900px) {
    .workspace-dashboard__hero {
        grid-template-columns: 1fr;
    }

    .workspace-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .workspace-shortcuts {
        grid-template-columns: 1fr;
    }
}

/* The "Moduler" grid (workspaces/_module_cards.html.erb) — its own class
   rather than a reuse of .workspace-shortcuts above (which stays a fixed
   3-column grid for its other two users: the module-front-page shortcut
   cards in systems/_shortcuts.html.erb, and this same file's Snarveier
   comment below) — Moduler's own column count instead varies with
   exactly how many module cards exist (WorkspacesHelper#module_grid_columns,
   [data-columns] set from the view), which the other two users have no
   need for. Fixes 4 modules leaving the 4th stranded alone on a
   full-width row under the old fixed-3-column grid (Torleiv, 2026-08-11,
   screenshot — HMS/Internkontroll's split into its own module made 4 the
   first real 4-module workspace). The two responsive breakpoints below
   match [data-columns] on attribute PRESENCE (not a specific value) so
   they share the same specificity as the desktop per-count rules and
   reliably override them at narrow widths regardless of which count is
   set, rather than accidentally losing a specificity comparison to
   whichever direction happened to declare `!important` or come later. */
.workspace-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-3);
}

.workspace-modules-grid[data-columns="1"] {
    grid-template-columns: 1fr;
}

.workspace-modules-grid[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-modules-grid[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .workspace-modules-grid[data-columns] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .workspace-modules-grid[data-columns] {
        grid-template-columns: 1fr;
    }
}

/* .workspace-quicklinks/.workspace-quicklink — a plain bordered row list
   (icon, title+subtitle pair, trailing arrow). Shared beyond just this
   page: platform/index.html.erb, integrations/new.html.erb, and
   administration/index.html.erb all reuse this exact class for their own,
   unrelated link lists — do NOT rename or restyle it for one caller only,
   see .workspace-home-shortcuts below for that (Torleiv, 2026-08-11,
   Basecamp's "Recently visited" as loose inspiration — own icon/color/
   typography kept, not a copy). Same single-box/bottom-border-per-row
   shape as .people-list below (established first in the Papirkurv
   redesign) rather than a new pattern. */
.workspace-quicklinks {
    padding: 0 var(--space-4);
}

.workspace-quicklink {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-900) 6%, transparent);
    color: inherit;
    text-decoration: none;
}

.workspace-quicklink:last-child {
    border-bottom: none;
}

.workspace-quicklink:hover strong {
    text-decoration: underline;
}

.workspace-quicklink__icon {
    flex: 0 0 auto;
    color: var(--signal-color);
}

.workspace-quicklink__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.workspace-quicklink__text strong {
    font-size: var(--text-size-lg);
    font-weight: 600;
}

.workspace-quicklink__text span {
    font-size: var(--text-size-xs);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

.workspace-quicklink__arrow {
    flex: 0 0 auto;
    color: var(--signal-color);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

/* The workspace home page's OWN "Snarveier" row (Møteplan/Todoer/
   Personer) — Torleiv, 2026-08-28 (#10248539324, "Gjør om snarveier til
   små knapper på en linje"): this one caller moved off the shared
   .workspace-quicklink row-list look above to a single wrapping row of
   plain ui_link_button/size-sm pills instead (see workspaces/show.html.erb)
   — its own class, not a restyle of .workspace-quicklinks, since that
   class is shared with three other, unrelated pages (see that rule's own
   comment) that still want the original row-list look. */
/* Torleiv, 21.09.2026 (#10322837491, skjermbilde av forsida): «begrens til
   en linje». Sju piller brakk over to; taket er fem nå (ShortcutsHelper).

   nowrap og ikke wrap: fem korte navn står på én linje på desktop, men
   ikke på 375px — målt, ikke antatt (test/system/home_shortcuts_one_line_test.rb
   var rød med wrap og tre linjer på mobil). Raden ruller vannrett i stedet
   for å brekke, så «én linje» holder på alle bredder uten at en snarvei
   forsvinner: det som ikke får plass er innen rekkevidde med et sveip, ikke
   klippet bort. Samme grep som risikomatrisens egen grid-wrap.

   Negativ margin + tilsvarende padding: rullefeltet skal gå helt ut til
   skjermkanten, ellers ser den siste pillen ut som om den er kuttet av en
   marg i stedet for å fortsette. */
.workspace-home-shortcuts {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.workspace-home-shortcuts::-webkit-scrollbar {
    display: none;
}

/* Pillene skal beholde sin egen bredde i en rullende rad — uten dette
   klemmer flex dem sammen til navnene brekker. */
.workspace-home-shortcuts > * {
    flex: 0 0 auto;
}

/* A module's own front-page "Snarveier" (Tiltak/Risikoregister/Avvikslogg/
   etc.) — same 2026-08-28 (#10248539324) small-button conversion as
   .workspace-home-shortcuts above, but stays reorderable (module_cards_controller.js
   doesn't care about the dragged element's own styling, only its
   data-module-cards-target/data-code — see systems/_shortcuts.html.erb's
   own comment), so this also carries the same [draggable]/.is-dragging
   treatment .workspace-shortcut/.workspace-shortcut-wrap already have,
   just scoped to .ui-button instead. */
/* Torleiv, 16.09.2026 (#10309477131): «lag lenkene som mer markerte
   knapper, de er jo vesentlige... La dem ha samme bredde.» They were small
   ghost pills that read as grey text on a line.
   Follow-up the same day: «dette blir for brede knapper... tilpass til
   tekstlengden, der den lengste blir lik for alle.» The first attempt
   stretched them across the whole row, so three buttons each took a third
   of a wide screen. width: max-content on a grid whose columns are 1fr is
   what gives "as wide as the longest label, and all the same": the
   container sizes itself to the content, and the equal tracks then resolve
   to the widest one. */
.workspace-module-shortcuts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: start;
    width: max-content;
    max-width: 100%;
    gap: var(--space-2);
}

/* One column per row on a phone: side by side, three buttons at the width
   of the longest label do not fit, and squeezing them would undo the point
   of making them readable. */
@media (max-width: 640px) {
    .workspace-module-shortcuts {
        grid-auto-flow: row;
        width: 100%;
    }
}

.workspace-module-shortcuts__card {
    justify-content: center;
    background: var(--card-bg-muted);
    border: var(--card-border);
    font-weight: 600;
}

.workspace-module-shortcuts__card:hover {
    background: var(--signal-color-tint);
}

.workspace-module-shortcuts .ui-button[draggable="true"] {
    cursor: grab;
}

.workspace-module-shortcuts .ui-button.is-dragging {
    opacity: 0.4;
}

/* Torleiv, 16.09.2026 (#10309477131): «skjul ⚙️ til høyre for teksten,
   kun hover». Same hover-reveal the rest of the app's gears use, and the
   same touch exception — a control that only exists on hover does not
   exist at all on a phone (#10306664607). The opacity itself sits on the
   base rule above, so there is one place that decides how this button
   looks. */
.workspace-section-title-row:hover .workspace-section-title__gear-trigger,
.workspace-section-title-row:focus-within .workspace-section-title__gear-trigger,
.workspace-section-title__gear-trigger:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .workspace-section-title__gear-trigger {
        opacity: 1;
        position: relative;
    }

    .workspace-section-title__gear-trigger::after {
        content: "";
        position: absolute;
        inset: -9px;
    }
}

.people-list {
    padding: var(--space-3);
}

.people-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--text-900) 6%, transparent);
}

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

.people-list__name {
    flex: 1 1 260px;
    min-width: 0;
    font-weight: 600;
}

/* 16.09.2026 (#10309437874): quieter than the job titles above it — this
   is a fact about the account, not about the person's role, and it must
   not compete with the name. */
.people-list__last-active {
    display: block;
    color: var(--text-700);
    font-size: var(--text-size-sm);
}

.people-list__name-line,
.people-list__job-titles {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.people-list__job-titles {
    font-weight: 400;
    font-size: var(--text-size-xs);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

/* A single muted meta line (role · ansatt · kontoeier) under the name,
   instead of a row of colored badges competing for attention on the
   right — matches the plain-text-list look used elsewhere (e.g. the
   Papirkurv rows). */
.people-list__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-weight: 400;
    font-size: var(--text-size-xs);
    color: color-mix(in srgb, var(--text-900) 65%, transparent);
}

/* Each meta item renders inside its own turbo-frame (independently
   updatable role/employee toggles) — without this, the frame's own box
   breaks the `+` adjacent-sibling selector below, and the "·" separator
   only appears between items that happen to share a frame. */
.people-list__meta turbo-frame,
.people-list__meta form.button_to {
    display: contents;
}

.people-list__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.people-list__meta-item + .people-list__meta-item::before {
    content: "\00b7";
    margin: 0 var(--space-2);
    color: color-mix(in srgb, var(--text-900) 35%, transparent);
}

/* Explicit separator between the role/kontoeier turbo-frame and the
   employee-status turbo-frame — the adjacent-sibling rule above only
   reaches within a single frame's own content, not across a frame boundary
   wrapping a `button_to` form, so the boundary between the two frames
   needs a plain element instead. */
.people-list__meta-sep {
    margin: 0 var(--space-2);
    color: color-mix(in srgb, var(--text-900) 35%, transparent);
}

.people-list__meta-item--action {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.people-list__meta-item--action:hover {
    text-decoration: underline;
}

.people-list__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* The invite action renders inside its own turbo-frame (independently
   updatable after generating/opening a link), and — when it POSTs — inside a
   button_to form. Neither is a flex item by default, so without this the
   Inviter/Endre pair loses its inline alignment in .people-list__actions. */
.people-list__actions turbo-frame,
.people-list__actions form.button_to {
    display: contents;
}

/* Mobile (#10276047895, Torleiv screenshot): .people-list__row never
   wrapped, so .people-list__name's flex-basis:260px lost the fight for
   space against the fixed-width Inviter/Rediger actions column on a
   narrow viewport — names truncated ("Te'ena Ben...") even with plenty
   of vertical room to spare. Wrapping the row lets the avatar+name pair
   claim the full line width once .people-list__actions (flex-basis:100%)
   drops to its own line below, instead of splitting one line three ways. */
@media (max-width: 640px) {
    .people-list__row {
        flex-wrap: wrap;
    }

    .people-list__actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

/* #10276047895 (mobilgjennomgang): the role trigger ("Admin", which opens
   the role menu) and the meta-item buttons in a person's row measure 37x18px
   at 375px — real controls at half a fingertip. They're deliberately styled
   as plain inline text with padding: 0 (see .people-role-menu__trigger in
   09_profile_and_dialogs.css), and growing them would push the row's own
   metadata line apart, so the HIT area grows instead of the box: an
   absolutely positioned ::after with negative insets takes the tappable
   region to ~34px tall with no layout shift and no visual change at all.
   Only on real touch devices — a narrow desktop window has a mouse
   pointer and doesn't need it. Horizontal expansion stays small (4px) on
   purpose: these controls sit on one line separated by a middot, and a
   wider overlay would start stealing taps from its neighbour. */
@media (hover: none) and (pointer: coarse) {
    .people-role-menu__trigger,
    button.people-list__meta-item {
        position: relative;
    }

    .people-role-menu__trigger::after,
    button.people-list__meta-item::after {
        content: "";
        position: absolute;
        inset: -8px -4px;
    }

    /* #10281061392 (mobile round 2): the section-title gear is a bare
       16x16 icon button (padding: 0, by design — it sits inline with the
       heading). Same hit-area trick, wider insets since nothing else
       shares its line. */
    .workspace-section-title__gear-trigger {
        position: relative;
    }

    .workspace-section-title__gear-trigger::after {
        content: "";
        position: absolute;
        inset: -12px;
    }
}


} /* @layer overrides */

/* Utboksen (#10346372601-oppfølging, 28.09.2026). Tabell og ikke kort:
   poenget er å se hele utsendingen under ett før den går, og en liste
   leses raskere enn tolv kort. Egen overflow-wrapper mangler med vilje —
   fire kolonner hvorav den siste er en dato får plass på telefon, i
   motsetning til underleverandørtabellen på trust-sida. */
.outbox-table {
    width: 100%;
    border-collapse: collapse;
}

.outbox-table th,
.outbox-table td {
    text-align: left;
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    border-bottom: var(--card-border);
    vertical-align: middle;
}

.outbox-table th {
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.outbox-table td:first-child .ui-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}