/* Workspace hero inline editing, header user menu, profile/2FA setup card rhythm, access-list, person forms, confirm dialog.
Split out of stomn_theme.css (original lines 4117-4816) — 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 {
/* Inline click-to-edit fields in the workspace hero (see workspace_hero_controller.js) —
look exactly like their view-mode counterparts (.h1 / .workspace-dashboard__lead)
until focused, no separate form chrome. */
.workspace-hero-inline-input,
.workspace-hero-inline-textarea {
display: block;
/* The view-mode counterparts below are width:auto with the same
negative margin-left, which (for a normal block box) *widens* them by
that amount rather than just shifting them — a block's auto width
fills "container width minus margins", so a negative margin adds to
it. Form controls don't get that for free: an explicit width is
required or they'd shrink to their intrinsic size, but plain 100%
only shifts left without the matching widen, ending up var(--space-2)
narrower than view mode and wrapping text onto an extra line. */
width: calc(100% + var(--space-2));
border: 1px dashed rgba(28, 25, 20, 0.22);
border-radius: var(--radius-sm);
background: none;
padding: var(--space-1) var(--space-2);
margin-left: calc(var(--space-2) * -1);
font-family: inherit;
color: inherit;
}
.workspace-hero-inline-textarea {
/* Explicit, not `inherit` — .workspace-dashboard__lead also sets
line-height on this same element (1.65), and since both rules have
equal specificity, whichever comes later in the file wins outright;
`inherit` doesn't defer to the other same-element rule, it just takes
whatever the *parent's* line-height is (1.5), which was the bug. */
line-height: 1.65;
resize: vertical;
/* Height is set inline by workspace_hero_controller.js#resizeDescription
to match view mode's wrapped-text height exactly — hide the scrollbar
that would otherwise flash during that resize. */
overflow-y: hidden;
}
.workspace-hero-inline-input:hover,
.workspace-hero-inline-textarea:hover {
border-color: rgba(28, 25, 20, 0.4);
}
.workspace-hero-inline-input:focus,
.workspace-hero-inline-textarea:focus {
outline: none;
border-style: solid;
border-color: var(--signal-color);
background: var(--card-bg);
}
.workspace-hero-inline-input--eyebrow {
width: fit-content;
min-width: 6ch;
}
/* Dedicated style instead of reusing the shared .workspace-eyebrow class —
that class's font-size/letter-spacing/uppercase didn't render consistently
once applied to an and the edit
and
edit
had no border-radius of its own, so the browser's default focus outline
traced the button's actual (square) box — a square frame around a
circle. Rounding the button to match its content, then swapping the
outline for a box-shadow ring (which clips to border-radius, unlike
outline in some browsers), keeps focus visible but circular. */
.header-user-menu__trigger:not(.document-page-header__menu-trigger) {
border-radius: 50%;
}
.header-user-menu__trigger:not(.document-page-header__menu-trigger):focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--signal-color);
}
.header-user-menu__panel {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
z-index: 20;
/* 220px still wrapped "Mine dokumenter" (icon + label, the widest item)
to two lines in practice — the icon's own gap plus each item's
horizontal padding eats more of that 220px than it looks like on
paper. 260px is the confirmed-comfortable width, not just a rounder
guess. */
min-width: 260px;
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
box-shadow: 0 8px 24px rgba(28, 25, 20, 0.12);
padding: var(--space-2);
display: flex;
flex-direction: column;
gap: 2px;
}
.header-user-menu__item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
text-align: left;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
border: none;
background: none;
color: inherit;
font-size: var(--text-size-base);
cursor: pointer;
}
.header-user-menu__item i {
color: rgba(28, 25, 20, 0.45);
flex-shrink: 0;
}
.header-user-menu__item:hover {
background: var(--background-color);
}
/* Keyboard-only active state (header_menu_controller.js's arrow-key nav) —
same background as :hover, since it marks the same "this is what Enter
activates" meaning, just via keyboard instead of the pointer. */
.header-user-menu__item--active {
background: var(--background-color);
}
.header-user-menu__form {
display: contents;
}
.header-user-menu__divider {
border: none;
border-top: 1px solid rgba(28, 25, 20, 0.08);
margin: var(--space-1) 0;
}
/* Reusable plain-centered-heading pattern for standalone pages (2FA setup,
"Meg", etc.) that don't need the full workspace-dashboard hero box. */
/* Matches .document-page-header__title/.page-title-header__title's font
treatment (sans, bold — not the app's serif accent) so every simple
centered-title page reads consistently with the document/list pages. */
.simple-page-title {
font-family: var(--font-sans);
font-weight: 700;
text-align: center;
font-size: 2.25rem;
margin-bottom: var(--space-2);
}
.simple-page-lead {
text-align: center;
color: rgba(28, 25, 20, 0.6);
max-width: 480px;
margin: 0 auto var(--space-6);
/* Preserves literal newlines (e.g. a multi-line System#description)
without affecting single-line lead text elsewhere, which has none
to collapse. */
white-space: pre-line;
}
/* "Meg" self-service profile page */
.profile-edit__section {
display: flex;
justify-content: center;
}
.profile-edit__box {
max-width: var(--content-width-narrow);
width: 100%;
position: relative;
}
/* Widened twice before (480 -> 640 -> 900px) chasing "use more of the
screen", but at 900px the short fields (Fornavn, Kallenavn, Initialer…)
stretched into long, sparse-looking inputs with too much vertical air
between groups — reverted back to the page's shared 480px default
(Torleiv, 2026-08-11) so the form box matches the access-list/2FA boxes
below it on the same page again. */
/* Consistent vertical rhythm for the 2FA setup cards (new_totp, new_sms,
recovery_codes_created) — every direct child (intro text, QR/phone
field, form, footer link) gets the same breathing room from the one
before it, and a form's own field-group/submit-button pairs get it too.
One rule instead of a scattered margin-top repeated per page/element. */
.auth-method-card {
padding: var(--space-6);
}
.auth-method-card > * + *,
.auth-method-card form > * + * {
margin-top: var(--space-5);
}
.auth-method-card .code-input,
.auth-method-card .phone-input {
margin-top: var(--space-2);
}
/* Two columns instead of one long left-aligned list — reads oddly centered
as a single column (ragged edge down the middle of the card), and this
is the conventional layout other apps use for a batch of recovery codes. */
.recovery-codes-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: var(--space-2) var(--space-6);
justify-content: center;
}
/* A short numbered sequence ("click → confirm on device → done") — plain
circular badges instead of default browser list numbering, matching the
app's flat black/white button language rather than introducing a new
accent color just for this. */
.setup-steps {
display: flex;
flex-direction: column;
gap: var(--space-3);
text-align: left;
list-style: none;
padding: 0;
margin: 0;
}
.setup-steps li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.setup-steps__number {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--radius-pill);
background: #111;
color: #fff;
font-size: var(--text-size-sm);
font-weight: 600;
}
.access-list__title {
font-size: var(--text-size-lg);
font-weight: 600;
margin-bottom: var(--space-3);
}
.access-list__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) 0;
border-bottom: 1px solid rgba(28, 25, 20, 0.06);
}
.access-list__row:last-child {
border-bottom: none;
}
.access-list__label {
font-weight: 500;
}
.access-list__value {
color: rgba(28, 25, 20, 0.6);
font-size: var(--text-size-base);
}
/* Wraps .access-list__value + an optional copy button (Torleiv, 2026-08-11
— org number/address/bank fields) as one flex item on the right side of
the row, so the row's own label-left/value-right layout doesn't change. */
.access-list__value-group {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Torleiv, 2026-08-14: a person's phone field can legitimately be long free
text (a person with numbers in two countries, "Israel: ... Norge: ...")
— sand_ui's .key-value .value is flex-shrink: 0 by design, correct for
the short single-value fields every other key-value list on the page
has, but that same rule let this one value's text run straight through
its own "Mobil" label instead of wrapping ("person-kort sprenges").
Scoped to this card rather than changing .key-value everywhere else it's
used, since those other lists don't have this problem to fix. */
.ui-overlay-card .key-value .value {
flex-shrink: 1;
min-width: 0;
}
/* Torleiv, 2026-08-19 ("E-postadresse (og andre felt) må ikke 'sprenge'
kontaktkort", screenshot): the fix above only addressed the VALUE side
— sand_ui's .key-value .key has no flex-shrink of its own, so it's
shrinkable by the browser's default (flex-shrink: 1), same as the value.
With both sides competing to shrink, the label itself got squeezed
below its own natural width, and ordinary line-breaking (not even
word-break) wrapped "E-post" at its own hyphen into "E-"/"post" on two
lines — nothing to do with the value's length at all. The label is
short, known text; only the value should ever need to shrink/wrap. */
.ui-overlay-card .key-value .key {
flex-shrink: 0;
white-space: nowrap;
}
.ui-overlay-card .access-list__value-group {
flex-wrap: wrap;
justify-content: flex-end;
}
/* Torleiv, 2026-08-20 (second pass): "Tekst må være venstrestilt mot
knappesymbolene / Større skrift, ikke to kolonner". Overrides three
separate sand_ui defaults, all scoped to this one list rather than
every .key-value-list in the app (minutes/_details.html.erb's own
usage has none of these problems to begin with):
- grid-template-columns: sand_ui's own .key-value-list auto-splits
into 2 columns at >=576px — a single column reads more like a
scannable cheat-sheet than a two-up table.
- margin-left/text-align on .value: sand_ui pushes the value to the
far right of the row (margin-left: auto) and right-aligns it —
wrong once each row spans the box's full width; the description
needs to sit right after the key, not stranded on the far edge.
- font-size: bumped again (first pass already went from --text-size-
base to --text-size-lg on the *guide steps* elsewhere, but this
list still inherited a much smaller sand_ui default (12px) never
addressed the first time). */
.support-shortcuts {
grid-template-columns: 1fr;
/* sand_ui's .key-value-list gap is "0 20px" (row-gap 0, column-gap
20px) — fine for the original 2-column layout where rows never
stack, but with grid-template-columns forced to 1fr above, that
0 row-gap meant stacked rows touched with zero air between them
(Torleiv, 2026-08-20, third pass: "Mer luft ... ikke så tett på
kanten"). */
row-gap: var(--space-2);
}
/* Same feedback pass: sand_ui's .ui-box has NO padding of its own — this
list's content sat flush against the card's border on every side. */
.support-shortcuts-box {
padding: var(--space-6);
}
.support-shortcuts .key-value {
min-height: 52px;
}
/* The keycap badge inherited sand_ui's --font-size-sm (11px), and its
is sized in em off of THAT (so ~10px rendered) — much smaller
than the description text next to it once that got bumped to
--text-size-lg below. Also .key-value .key's own margin-left is
sand_ui's var(--document-indent), which is only ever DEFINED inside an
actual .document component — here it resolves to nothing, i.e. 0,
which is the other half of "tight against the edge" (the box padding
above fixes the box-level edge; this would otherwise still leave the
keycap sitting flush against that new padding with no breathing room
of its own). */
.support-shortcuts .key-value .key {
margin-left: 0;
font-size: var(--text-size-lg);
}
.support-shortcuts .key-value .value {
flex-shrink: 1;
min-width: 0;
margin-left: var(--space-4);
text-align: left;
font-size: var(--text-size-xl);
letter-spacing: normal;
}
/* Two shortcut groups (Navigasjon/Avatarmeny) share one .ui-box — space
the second group's eyebrow label away from the first group's last row
instead of butting straight up against it. */
.support-shortcuts-box .support-shortcuts__group-label:not(:first-child) {
margin-top: 1.5rem;
}
.ui-overlay-card .access-list__value {
word-break: break-word;
text-align: right;
}
.access-list__copy-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-1);
border: none;
border-radius: var(--card-radius);
background: none;
color: rgba(28, 25, 20, 0.35);
cursor: pointer;
}
.access-list__copy-button:hover,
.access-list__copy-button:focus-visible {
color: rgba(28, 25, 20, 0.7);
background: var(--card-bg-muted);
}
/* Same "colored icon + floating tooltip label" confirmation as
.heading-permalink--copied, not an icon-glyph swap — this button's
Stimulus controller (copy_value_controller) just toggles these two
modifier classes, no icon-font-specific class names in the JS. */
.access-list__copy-button--copied {
color: var(--success-color);
}
.access-list__copy-button--failed {
color: var(--danger-color);
}
.access-list__copy-button--copied::after,
.access-list__copy-button--failed::after {
position: absolute;
top: -1.8rem;
left: 50%;
transform: translateX(-50%);
padding: 0.2em 0.6em;
border-radius: var(--radius-md);
background: rgba(28, 25, 20, 0.85);
color: #fff;
font-size: var(--text-size-xs);
font-weight: 600;
white-space: nowrap;
}
.access-list__copy-button--copied::after {
content: "Kopiert!";
}
.access-list__copy-button--failed::after {
content: "Kunne ikke kopiere";
}
/* Same "colored icon + floating tooltip label" confirmation as
.access-list__copy-button above — used by share_controller's download
fallback for browsers/file-types navigator.share can't hand off directly
(no File Share support at all, or — confirmed 2026-08-18 — a file type
like vCard that's outside Chrome's own safelist for shareable files).
Its own class (not .access-list__copy-button) since the share button is
a circular .ui-button, not one of the access-list rows this one was
built for. */
.share-trigger--downloaded {
position: relative;
color: var(--success-color);
}
.share-trigger--downloaded::after {
position: absolute;
top: -1.8rem;
left: 50%;
transform: translateX(-50%);
padding: 0.2em 0.6em;
border-radius: var(--radius-md);
background: rgba(28, 25, 20, 0.85);
color: #fff;
font-size: var(--text-size-xs);
font-weight: 600;
white-space: nowrap;
content: "Lastet ned!";
}
/* Same mechanism as .org-chart__box-gear (hover/focus-revealed corner
gear instead of an always-visible "Endre"/"Rediger" text link,
Torleiv 2026-08-11) — kept as its own class rather than sharing that
selector, since .org-chart__box is a distinct, actively-tuned
component and this needs to work on any plain .ui-box (which already
sets position: relative). Company's brreg/bank/rich-text section
boxes use this; the org chart keeps its own class untouched. */
.ui-box__gear {
position: absolute;
top: var(--space-1);
right: var(--space-1);
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-1);
border-radius: var(--radius-sm);
color: rgba(28, 25, 20, 0.4);
opacity: 0;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.ui-box:hover .ui-box__gear,
.ui-box:focus-within .ui-box__gear {
opacity: 1;
}
.ui-box__gear:hover {
background-color: rgba(28, 25, 20, 0.08);
color: var(--signal-color);
}
/* Company's reorderable sections (Torleiv, 2026-08-10) — a small
drag-handle floats in each section's top-right corner, hover-revealed
like the org chart's own per-box gear icon just above, rather than
shown at rest and competing with the section's own content. */
.company-section {
position: relative;
}
.company-section__drag-handle {
position: absolute;
top: var(--space-3);
right: var(--space-3);
cursor: grab;
color: rgba(28, 25, 20, 0.35);
opacity: 0;
transition: opacity 0.15s ease;
}
.company-section:hover .company-section__drag-handle {
opacity: 1;
}
/* Extra room before AND after the org chart specifically (Torleiv,
2026-08-11 for the bottom gap, 2026-08-13 for the top one) — on top of
.workspace-dashboard's own shared gap, not a replacement for it, so
only this one section's gaps grow rather than every gap on the page. */
.company-section--org-chart {
margin-top: var(--space-8);
margin-bottom: var(--space-8);
}
/* App-wide: bigger, rounder, softer form fields — sand_ui's defaults are a
3px radius and a 13px font, which reads dense/technical rather than
friendly. This file loads after sand_ui's own stylesheet and is
unlayered (sand_ui's rules live in @layer components), so plain
selectors here win regardless of specificity.
:not(.code-input__digit) excludes the 2FA/verification digit boxes —
they're a .ui-form input[type="text"] too, so without it this rule's
higher specificity ((0,2,1) vs. .code-input__digit's plain (0,1,0))
silently overrode that component's own font-size/padding/border-radius
regardless of source order, shrinking its digits from the intended
1.75rem down to this rule's 1rem — the actual root cause of Torleiv's
"sifrene er ikke tydelige nok" report, not just the font choice. */
.ui-input,
.ui-form input[type="text"]:not(.code-input__digit),
.ui-form input[type="email"],
.ui-form input[type="password"],
.ui-form select {
padding: 0.7em 1em;
border-radius: var(--radius-lg);
font-size: var(--text-size-lg);
}
/* Friendlier accent instead of the default stark black .solid button —
overrides just the background custom property .solid already reads from,
so only this button changes rather than every solid button app-wide. */
.person-form__save {
--bt-background: var(--signal-color);
}
.person-form__actions {
margin-top: var(--space-6);
margin-bottom: var(--space-4);
}
/* Plain inline list instead of a dropdown — sits as its own labeled
section directly above the Lagre/Avbryt row, so every admin action is
visible up front rather than hidden behind a gear menu. */
.person-admin-actions__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-1);
}
.person-admin-actions__item {
color: var(--signal-color);
font-size: var(--text-size-base);
text-decoration: none;
}
.person-admin-actions__item:hover {
text-decoration: underline;
}
.person-admin-actions__item--danger {
color: var(--danger-color);
}
/* Plain list, newest first — same "labeled section above Lagre/Avbryt"
placement as .person-admin-actions right above it, not a dropdown or
table (this is a handful of rows at most, capped server-side). */
.person-login-events {
list-style: none;
margin: var(--space-1) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.person-login-events__item {
display: flex;
justify-content: space-between;
gap: var(--space-2);
font-size: var(--text-size-base);
}
.person-login-events__meta {
color: rgba(28, 25, 20, 0.5);
font-size: var(--text-size-sm);
}
.people-index-wrap {
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.people-index-wrap > * + * {
margin-top: var(--space-3);
}
.people-role-menu {
position: relative;
}
.people-role-menu__trigger {
display: inline-flex;
align-items: center;
gap: var(--space-1);
background: none;
border: none;
padding: 0;
font: inherit;
font-weight: 600;
color: inherit;
cursor: pointer;
}
/* Replaces the old standalone "Aktiv" badge — a small dot in front of the
role reads at a glance without competing for attention the way a
separate colored pill did, and most people won't have a role/access yet
anyway (see people/_workspace_membership.html.erb). */
.people-status-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #3FB37F;
}
.people-role-menu__panel {
right: auto;
left: 0;
}
/* Confirmation dialog replacing Turbo's native window.confirm (see
confirm_dialog_controller.js) — styled like the rest of the app's cards
instead of the browser's unstyled confirm() box. */
.app-confirm-dialog {
/* 's own default centering relies on `margin: auto`, which the
app's global reset zeroes out along with every other element's
margin — position it explicitly instead of depending on that. */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: var(--space-6);
border: var(--card-border);
border-radius: var(--card-radius);
background: var(--card-bg);
box-shadow: var(--dialog-shadow);
max-width: 24rem;
}
.app-confirm-dialog::backdrop {
background: var(--dialog-backdrop);
}
.app-confirm-dialog__body {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.app-confirm-dialog__message {
margin: 0;
font-size: var(--text-size-lg);
line-height: 1.5;
}
.app-confirm-dialog__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-4);
}
} /* @layer overrides */