/* Workspace hero/logo upload, module and shortcut cards, quicklinks, people directory list.
   Split out of stomn_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#stomn_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. */
.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: linear-gradient(155deg, #FBF8F3 0%, var(--card-bg) 55%);
    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;
}

/* 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;
}

/* 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 rgba(28, 25, 20, 0.22);
    border-radius: var(--card-radius);
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1);
}

.workspace-logo-edit__image-wrap:hover {
    border-color: rgba(28, 25, 20, 0.4);
}

.workspace-logo-edit__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.92);
    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 rgba(28, 25, 20, 0.15);
    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: rgba(28, 25, 20, 0.3);
    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;
}

.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;
}

/* 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;
}

/* 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);
}

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

.workspace-shortcut {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 150px;
    padding: var(--space-5);
    border-radius: var(--card-radius);
    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. */
.workspace-shortcut[data-color="blue"] {
    background: var(--signal-color-tint);
}

.workspace-shortcut[data-color="green"] {
    background: #E1F0E5;
}

.workspace-shortcut[data-color="purple"] {
    background: #ECE4F5;
}

.workspace-shortcut[data-color="rose"] {
    background: #F5E4EC;
}

.workspace-shortcut[data-color="amber"] {
    background: #F6EEDD;
}

.workspace-shortcut[data-color="teal"] {
    background: #DCEFEE;
}

.workspace-shortcut[data-color="orange"] {
    background: #F7E6D2;
}

/* 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;
}

.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. */
.workspace-shortcut__gear,
.workspace-shortcut__icon-button {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(28, 25, 20, 0.65);
    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 rgba(28, 25, 20, 0.15);
    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;
}

.workspace-shortcut__swatch span[data-color="blue"] { background: var(--signal-color); }
.workspace-shortcut__swatch span[data-color="green"] { background: #3FB37F; }
.workspace-shortcut__swatch span[data-color="purple"] { background: #8B5FBF; }
.workspace-shortcut__swatch span[data-color="rose"] { background: #E0607E; }
.workspace-shortcut__swatch span[data-color="amber"] { background: #E3A72F; }
.workspace-shortcut__swatch span[data-color="teal"] { background: #2F9E96; }
.workspace-shortcut__swatch span[data-color="orange"] { background: #DB7C2E; }

.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 rgba(28, 25, 20, 0.35);
    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: rgba(28, 25, 20, 0.6);
}

.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;
    }
}

/* The workspace home page's plain "Snarveier" row list (Møteplan/Todoer/
   Personer) — deliberately its own class, not a reuse of .workspace-shortcut
   above, since that one is shared with the Moduler cards (draggable,
   colorable, inline-editable) and the module-front-page shortcut cards
   (systems/_shortcuts.html.erb); lightening it here would have lightened
   those too. 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 rgba(28, 25, 20, 0.06);
    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: rgba(28, 25, 20, 0.65);
}

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

.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 rgba(28, 25, 20, 0.06);
}

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

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

.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: rgba(28, 25, 20, 0.65);
}

/* 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: rgba(28, 25, 20, 0.65);
}

/* 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: rgba(28, 25, 20, 0.35);
}

/* 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: rgba(28, 25, 20, 0.35);
}

.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;
}


} /* @layer overrides */