@charset "UTF-8";
/*
* Devise / auth surfaces
* ──────────────────────
*
* Split-brand landing shell for unauthenticated routes. Scoped under
* `.vm-auth` so nothing here leaks into the main app. Colors resolve
* through the semantic tokens in `_color_tokens.scss` — no new hex/rgb
* literals.
*/
/*
* Forms — unified field system
* ────────────────────────────
*
* One wrapper (`.vm-field`) holds the label, control, hint, help, and
* error message. Stacked-label is the default — labels sit on top,
* always visible, and track the data-density toggle alongside the
* control. Floating labels stay as a Bootstrap-native pattern for
* minimal auth forms; this is the primary system everywhere else.
*
* Structure:
*
* .vm-field
* ├─ .vm-field__label (required/optional markers inline)
* ├─ .vm-field__hint (description shown above control)
* ├─ .vm-field__control (wraps the control)
* │ └─ .vm-input / .vm-select / .vm-textarea
* ├─ .vm-field__help (muted caption shown below control)
* └─ .vm-field__error (shown when --invalid)
*
* Composition:
* .vm-field-row two or more fields side-by-side
* .vm-field-grid responsive auto-fit grid of fields
* .vm-fieldset grouped fields with an editorial legend
*
* Selection controls:
* .vm-check styled native checkbox with label
* .vm-radio styled native radio with label
* .vm-switch large pill-style toggle (no Bootstrap dependency)
* .vm-check-list bordered list panel of checkboxes / radios
* .vm-option-card card-sized choice tile (radio or checkbox)
* .vm-segmented segmented control (replaces "All/Any" radio pairs)
*
* Adornments:
* .vm-input-group input + leading / trailing button or static text
*
* All colors, borders, and focus rings read from the semantic tokens
* in _color_tokens.scss, so the whole system flips cleanly under
* data-theme="dark".
*/
/* ── Tokens scoped to the form system ───────────────────────────────── */
/* line 44, app/assets/stylesheets/_forms.scss */
:root {
--vm-field-radius: 0.4375rem;
--vm-field-border: var(--color-border);
--vm-field-border-strong: var(--color-border-strong);
--vm-field-bg: var(--color-surface);
--vm-field-bg-disabled: var(--color-bg-muted);
--vm-field-text: var(--color-text-strong);
--vm-field-placeholder: var(--color-text-muted);
--vm-field-padding-y: 0.4375rem;
--vm-field-padding-x: 0.75rem;
--vm-field-gap: 0.375rem;
--vm-field-row-gap: 1.125rem;
--vm-field-label-size: 0.8125rem;
--vm-field-label-color: var(--color-text-strong);
--vm-field-hint-size: 0.8125rem;
--vm-field-hint-color: var(--color-text-muted);
}
/* Dark-mode — inputs sit on a translucent overlay instead of white so
* the field reads against navy without turning into a floodlit box. */
/* line 67, app/assets/stylesheets/_forms.scss */
[data-theme='dark']:root {
--vm-field-bg: var(--color-overlay-light-10);
--vm-field-bg-disabled: var(--color-overlay-light-10);
--vm-field-border: var(--color-overlay-light-15);
--vm-field-border-strong: var(--color-overlay-light-25);
--vm-field-text: var(--color-text-strong);
--vm-field-placeholder: var(--color-text-muted);
}
/* ── Wrapper ────────────────────────────────────────────────────────── */
/* line 78, app/assets/stylesheets/_forms.scss */
.vm-field {
display: flex;
flex-direction: column;
gap: var(--vm-field-gap);
min-width: 0;
}
/* line 85, app/assets/stylesheets/_forms.scss */
.vm-field__label {
display: inline-flex;
align-items: baseline;
gap: 0.375rem;
font-family: var(--font-sans);
font-size: var(--vm-field-label-size);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.002em;
color: var(--vm-field-label-color);
}
/* line 97, app/assets/stylesheets/_forms.scss */
.vm-field__required {
color: var(--color-primary);
font-weight: 500;
line-height: 1;
}
/* line 103, app/assets/stylesheets/_forms.scss */
.vm-field__optional {
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
padding: 0.0625rem 0.375rem;
border-radius: 999px;
background-color: var(--color-bg-muted);
font-feature-settings: 'ss01';
}
/* line 115, app/assets/stylesheets/_forms.scss */
.vm-field__hint {
font-size: var(--vm-field-hint-size);
color: var(--vm-field-hint-color);
line-height: 1.5;
margin-top: -0.125rem;
max-width: 62ch;
}
/* line 123, app/assets/stylesheets/_forms.scss */
.vm-field__help {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.5;
margin-top: -0.125rem;
max-width: 62ch;
}
/* line 131, app/assets/stylesheets/_forms.scss */
.vm-field__error {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
line-height: 1.35;
color: var(--color-danger);
margin-top: -0.125rem;
}
/* line 141, app/assets/stylesheets/_forms.scss */
.vm-field__error > svg {
width: 0.875rem;
height: 0.875rem;
flex: 0 0 0.875rem;
stroke-width: 2;
}
/* ── Base control — shared ring/border between input, select, textarea ─ */
/* line 150, app/assets/stylesheets/_forms.scss */
.vm-input,
.vm-select,
.vm-textarea {
width: 100%;
padding: var(--vm-field-padding-y) var(--vm-field-padding-x);
border: 1px solid var(--vm-field-border);
border-radius: var(--vm-field-radius);
background-color: var(--vm-field-bg);
color: var(--vm-field-text);
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.45;
appearance: none;
outline: none;
transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
/* line 171, app/assets/stylesheets/_forms.scss */
.vm-input::placeholder,
.vm-textarea::placeholder {
color: var(--vm-field-placeholder);
opacity: 0.85;
}
/* line 177, app/assets/stylesheets/_forms.scss */
.vm-input:hover,
.vm-select:hover,
.vm-textarea:hover {
border-color: var(--vm-field-border-strong);
}
/* line 183, app/assets/stylesheets/_forms.scss */
.vm-input:focus,
.vm-select:focus,
.vm-textarea:focus {
border-color: var(--color-primary);
}
/* Keyboard-only offset ring — paired with the border-color swap
* above so mouse focus is announced subtly (border only) while
* tab navigation draws the full halo. */
/* line 192, app/assets/stylesheets/_forms.scss */
.vm-input:focus-visible,
.vm-select:focus-visible,
.vm-textarea:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* line 199, app/assets/stylesheets/_forms.scss */
.vm-input:disabled,
.vm-select:disabled,
.vm-textarea:disabled,
.vm-input[readonly],
.vm-select[readonly],
.vm-textarea[readonly] {
background-color: var(--vm-field-bg-disabled);
color: var(--color-text-muted);
cursor: not-allowed;
box-shadow: none;
}
/* line 211, app/assets/stylesheets/_forms.scss */
.vm-input[readonly],
.vm-textarea[readonly] {
cursor: text;
color: var(--color-text);
}
/* line 217, app/assets/stylesheets/_forms.scss */
.vm-textarea {
resize: vertical;
min-height: 5.5rem;
line-height: 1.5;
}
/* Native select gets a custom chevron so the caret reads the same
* across browsers — matches the filter-row select treatment. */
/* line 225, app/assets/stylesheets/_forms.scss */
.vm-select {
padding-right: 2rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 0.6875rem auto;
}
/* Dark mode — lighten the chevron so it still reads on navy. */
/* line 234, app/assets/stylesheets/_forms.scss */
[data-theme='dark']:root .vm-select {
background-image: url("data:image/svg+xml;utf8,");
}
/* ── Control wrapper ────────────────────────────────────────────────── */
/* line 240, app/assets/stylesheets/_forms.scss */
.vm-field__control {
display: flex;
align-items: stretch;
min-width: 0;
width: 100%;
}
/* line 247, app/assets/stylesheets/_forms.scss */
.vm-field__control > .vm-input,
.vm-field__control > .vm-select,
.vm-field__control > .vm-textarea {
flex: 1 1 auto;
min-width: 0;
}
/* ── Invalid state ──────────────────────────────────────────────────── */
/* line 256, app/assets/stylesheets/_forms.scss */
.vm-field--invalid .vm-input,
.vm-field--invalid .vm-select,
.vm-field--invalid .vm-textarea {
border-color: var(--color-danger);
background-color: color-mix(in srgb, var(--color-danger-soft-bg) 65%, var(--vm-field-bg));
}
/* line 263, app/assets/stylesheets/_forms.scss */
.vm-field--invalid .vm-input:focus,
.vm-field--invalid .vm-select:focus,
.vm-field--invalid .vm-textarea:focus {
border-color: var(--color-danger);
}
/* Invalid state overrides the standard ring with a danger-tinted
* halo so the keyboard affordance still signals the error state. */
/* line 271, app/assets/stylesheets/_forms.scss */
.vm-field--invalid .vm-input:focus-visible,
.vm-field--invalid .vm-select:focus-visible,
.vm-field--invalid .vm-textarea:focus-visible {
outline-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
}
/* line 277, app/assets/stylesheets/_forms.scss */
.vm-field--invalid .vm-field__label {
color: var(--color-text-strong);
}
/* ── Composition ────────────────────────────────────────────────────── */
/* line 283, app/assets/stylesheets/_forms.scss */
.vm-field-row {
display: flex;
flex-wrap: wrap;
gap: var(--vm-field-row-gap);
}
/* line 289, app/assets/stylesheets/_forms.scss */
.vm-field-row > .vm-field {
flex: 1 1 14rem;
min-width: 0;
}
/* line 294, app/assets/stylesheets/_forms.scss */
.vm-field-row > .vm-field--narrow {
flex: 0 1 9rem;
}
/* line 295, app/assets/stylesheets/_forms.scss */
.vm-field-row > .vm-field--medium {
flex: 1 1 18rem;
}
/* line 296, app/assets/stylesheets/_forms.scss */
.vm-field-row > .vm-field--wide {
flex: 2 1 24rem;
}
/* line 298, app/assets/stylesheets/_forms.scss */
.vm-field-grid {
display: grid;
gap: var(--vm-field-row-gap);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* line 304, app/assets/stylesheets/_forms.scss */
.vm-field-stack {
display: flex;
flex-direction: column;
gap: var(--vm-field-row-gap);
}
/* Fieldset — groups related fields under a quiet eyebrow title with
* a single divider. Styled to sit inside a .settings-card body. */
/* line 312, app/assets/stylesheets/_forms.scss */
.vm-fieldset {
border: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--vm-field-row-gap);
}
/* line 321, app/assets/stylesheets/_forms.scss */
.vm-fieldset + .vm-fieldset {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
/* line 327, app/assets/stylesheets/_forms.scss */
.vm-fieldset__legend {
float: none;
width: auto;
padding: 0;
margin-bottom: 0.25rem;
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
font-feature-settings: 'ss01';
}
/* line 341, app/assets/stylesheets/_forms.scss */
.vm-fieldset__description {
margin-top: -0.25rem;
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.55;
max-width: 62ch;
}
/* ── Input groups (input + adjacent button / prefix text) ───────────── */
/*
* Single rounded wrapper that visually contains an input plus one or
* more adjacent elements. Avoids the conjoined-border look flagged in
* the UI guidelines — the border lives on the wrapper and the inner
* controls are borderless.
*/
/* line 358, app/assets/stylesheets/_forms.scss */
.vm-input-group {
display: inline-flex;
width: 100%;
align-items: stretch;
background-color: var(--vm-field-bg);
border: 1px solid var(--vm-field-border);
border-radius: var(--vm-field-radius);
overflow: hidden;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
/* line 371, app/assets/stylesheets/_forms.scss */
.vm-input-group:hover {
border-color: var(--vm-field-border-strong);
}
/* line 375, app/assets/stylesheets/_forms.scss */
.vm-input-group:focus-within {
border-color: var(--color-primary);
}
/* Ring lives on the wrapper — `overflow: hidden` above clips any
* outline drawn on the inner input. `_focus_ring.scss` also applies
* this via `:has(:focus-visible)`; the rule is repeated here so the
* group-level halo is defined alongside its hover/focus-within
* border transition. */
/* line 384, app/assets/stylesheets/_forms.scss */
.vm-input-group:has(:focus-visible) {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* line 389, app/assets/stylesheets/_forms.scss */
.vm-input-group > .vm-input,
.vm-input-group > .vm-select,
.vm-input-group > .vm-textarea {
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
flex: 1 1 auto;
min-width: 0;
}
/* line 400, app/assets/stylesheets/_forms.scss */
.vm-input-group > .vm-input:focus,
.vm-input-group > .vm-select:focus,
.vm-input-group > .vm-textarea:focus {
box-shadow: none;
}
/* line 406, app/assets/stylesheets/_forms.scss */
.vm-input-group__text {
display: inline-flex;
align-items: center;
padding: 0 0.5rem;
background-color: transparent;
color: var(--color-text-muted);
font-size: 0.875rem;
font-weight: 400;
white-space: nowrap;
}
/* line 417, app/assets/stylesheets/_forms.scss */
.vm-input-group__text:first-child {
padding-left: 0.75rem;
padding-right: 0.25rem;
}
/* line 422, app/assets/stylesheets/_forms.scss */
.vm-input-group__text:last-child {
padding-left: 0.25rem;
padding-right: 0.75rem;
}
/* line 427, app/assets/stylesheets/_forms.scss */
.vm-input-group__btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0 0.875rem;
background-color: var(--color-bg-muted);
border: 0;
border-left: 1px solid var(--vm-field-border);
color: var(--color-text);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.12s ease, color 0.12s ease;
}
/* line 444, app/assets/stylesheets/_forms.scss */
.vm-input-group__btn:first-child {
border-left: 0;
border-right: 1px solid var(--vm-field-border);
}
/* line 449, app/assets/stylesheets/_forms.scss */
.vm-input-group__btn:hover,
.vm-input-group__btn:focus-visible {
background-color: var(--color-surface-muted);
color: var(--color-text-strong);
outline: none;
}
/* line 456, app/assets/stylesheets/_forms.scss */
.vm-input-group__btn > svg {
width: 0.9375rem;
height: 0.9375rem;
stroke-width: 1.75;
}
/* line 462, app/assets/stylesheets/_forms.scss */
.vm-input-group__btn--primary {
background-color: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
/* line 468, app/assets/stylesheets/_forms.scss */
.vm-input-group__btn--primary:hover,
.vm-input-group__btn--primary:focus-visible {
background-color: var(--color-primary-hover);
color: var(--color-text-inverse);
}
/* ── Checkbox + radio — custom look on top of native controls ───────── */
/* line 476, app/assets/stylesheets/_forms.scss */
.vm-check,
.vm-radio {
display: inline-flex;
align-items: flex-start;
gap: 0.625rem;
cursor: pointer;
user-select: none;
min-width: 0;
}
/* line 486, app/assets/stylesheets/_forms.scss */
.vm-check__input,
.vm-radio__input {
appearance: none;
flex: 0 0 auto;
width: 1.0625rem;
height: 1.0625rem;
margin: 0;
margin-top: 0.1875rem;
background-color: var(--vm-field-bg);
border: 1px solid var(--vm-field-border-strong);
transition: background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
cursor: inherit;
}
/* line 503, app/assets/stylesheets/_forms.scss */
.vm-check__input {
border-radius: 0.25rem;
}
/* line 507, app/assets/stylesheets/_forms.scss */
.vm-radio__input {
border-radius: 999px;
}
/* line 511, app/assets/stylesheets/_forms.scss */
.vm-check__input:hover,
.vm-radio__input:hover {
border-color: var(--color-primary);
}
/* line 516, app/assets/stylesheets/_forms.scss */
.vm-check__input:focus-visible,
.vm-radio__input:focus-visible {
border-color: var(--color-primary);
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* line 523, app/assets/stylesheets/_forms.scss */
.vm-check__input:checked,
.vm-radio__input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
/* Check glyph — inline SVG painted with currentColor so it flips with
* the checked background. */
/* line 531, app/assets/stylesheets/_forms.scss */
.vm-check__input:checked {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 0.75rem auto;
}
/* line 538, app/assets/stylesheets/_forms.scss */
.vm-check__input:indeterminate {
background-color: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 0.75rem auto;
}
/* line 547, app/assets/stylesheets/_forms.scss */
.vm-radio__input:checked {
background-image: radial-gradient(circle, #fff 34%, transparent 38%);
}
/* line 551, app/assets/stylesheets/_forms.scss */
.vm-check__input:disabled,
.vm-radio__input:disabled {
background-color: var(--color-bg-muted);
border-color: var(--color-border);
cursor: not-allowed;
}
/* line 558, app/assets/stylesheets/_forms.scss */
.vm-check__input:disabled:checked,
.vm-radio__input:disabled:checked {
background-color: var(--color-border-strong);
border-color: var(--color-border-strong);
}
/* line 564, app/assets/stylesheets/_forms.scss */
.vm-check__body,
.vm-radio__body {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
/* line 572, app/assets/stylesheets/_forms.scss */
.vm-check__label,
.vm-radio__label {
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
color: var(--color-text-strong);
}
/* line 581, app/assets/stylesheets/_forms.scss */
.vm-check__hint,
.vm-radio__hint {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.45;
max-width: 52ch;
}
/* Grouped lists — stack checks/radios in a vertical flow. */
/* line 590, app/assets/stylesheets/_forms.scss */
.vm-check-list {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
/* line 596, app/assets/stylesheets/_forms.scss */
.vm-check-list--inline {
flex-direction: row;
flex-wrap: wrap;
gap: 0.375rem 1.25rem;
}
/* Bordered panel variant — use when the list needs to scroll or when
* it replaces a multi-select. Matches the shift-detail / settings-card
* surface language. */
/* line 605, app/assets/stylesheets/_forms.scss */
.vm-check-list--bordered {
padding: 0.75rem 0.875rem;
background-color: var(--color-surface);
border: 1px solid var(--vm-field-border);
border-radius: var(--vm-field-radius);
max-height: 14rem;
overflow-y: auto;
}
/* Card-sized choice tile — for high-stakes radio/checkbox choices like
* plan pickers or "send immediately / schedule" toggles. One row in a
* stack, or a responsive grid. */
/* line 617, app/assets/stylesheets/_forms.scss */
.vm-option-card {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 0.875rem 1rem;
background-color: var(--color-surface);
border: 1px solid var(--vm-field-border);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
/* line 632, app/assets/stylesheets/_forms.scss */
.vm-option-card:hover {
border-color: var(--vm-field-border-strong);
}
/* line 636, app/assets/stylesheets/_forms.scss */
.vm-option-card:has(.vm-check__input:checked),
.vm-option-card:has(.vm-radio__input:checked) {
border-color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
/* line 643, app/assets/stylesheets/_forms.scss */
.vm-option-card:has(input:focus-visible) {
border-color: var(--color-primary);
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* The card carries the ring; suppress the inner check/radio halo so
* only a single outline paints around the tile. */
/* line 651, app/assets/stylesheets/_forms.scss */
.vm-option-card .vm-check__input:focus-visible,
.vm-option-card .vm-radio__input:focus-visible {
outline: none;
}
/* line 656, app/assets/stylesheets/_forms.scss */
.vm-option-card__body {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
flex: 1;
}
/* line 664, app/assets/stylesheets/_forms.scss */
.vm-option-card__title {
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-strong);
}
/* line 671, app/assets/stylesheets/_forms.scss */
.vm-option-card__meta {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.5;
}
/* ── Switch (toggle) — no Bootstrap dependency ──────────────────────── */
/* line 679, app/assets/stylesheets/_forms.scss */
.vm-switch {
display: inline-flex;
align-items: center;
gap: 0.875rem;
cursor: pointer;
user-select: none;
}
/* line 687, app/assets/stylesheets/_forms.scss */
.vm-switch__track {
position: relative;
flex: 0 0 auto;
width: 2.375rem;
height: 1.375rem;
background-color: var(--color-border-strong);
border-radius: 999px;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* line 697, app/assets/stylesheets/_forms.scss */
.vm-switch__track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 1.125rem;
height: 1.125rem;
background-color: var(--color-white);
border-radius: 999px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
transition: transform 0.18s ease;
}
/* line 710, app/assets/stylesheets/_forms.scss */
.vm-switch__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: inherit;
}
/* line 720, app/assets/stylesheets/_forms.scss */
.vm-switch__input:checked ~ .vm-switch__track {
background-color: var(--color-primary);
}
/* line 724, app/assets/stylesheets/_forms.scss */
.vm-switch__input:checked ~ .vm-switch__track::after {
transform: translateX(1rem);
}
/* Switch track draws its own ring via box-shadow because `outline`
* would sit outside the pill's bounding box and visually collide
* with the thumb. Shadow spread matches --focus-ring-width + offset
* so the halo scales with density alongside the rest of the system. */
/* line 732, app/assets/stylesheets/_forms.scss */
.vm-switch__input:focus-visible ~ .vm-switch__track {
box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-app-main-bg), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}
/* line 739, app/assets/stylesheets/_forms.scss */
.vm-switch__input:disabled ~ .vm-switch__track {
opacity: 0.55;
cursor: not-allowed;
}
/* Because the input overlaps the whole switch, we need a wrapper for
* positioning. Add `.vm-switch__slot` around the track + input. */
/* line 746, app/assets/stylesheets/_forms.scss */
.vm-switch__slot {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
/* line 752, app/assets/stylesheets/_forms.scss */
.vm-switch__body {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
/* line 759, app/assets/stylesheets/_forms.scss */
.vm-switch__label {
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
color: var(--color-text-strong);
}
/* line 767, app/assets/stylesheets/_forms.scss */
.vm-switch__hint {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.45;
max-width: 52ch;
}
/* ── Segmented control ──────────────────────────────────────────────── */
/*
* Replacement for "All / Any" radio pairs and similar 2–4 option
* choosers. Markup uses native radios so keyboard + screen reader
* behavior stays correct — the label becomes the visible segment.
*/
/* line 782, app/assets/stylesheets/_forms.scss */
.vm-segmented {
display: inline-flex;
padding: 0.25rem;
background-color: var(--color-bg-muted);
border-radius: 0.5rem;
gap: 0.125rem;
}
/* line 790, app/assets/stylesheets/_forms.scss */
.vm-segmented__item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.3125rem 0.875rem;
border-radius: 0.375rem;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.3;
color: var(--color-text-muted);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: color 0.1s ease, background-color 0.1s ease;
}
/* line 809, app/assets/stylesheets/_forms.scss */
.vm-segmented__item:hover {
color: var(--color-text-strong);
}
/* line 813, app/assets/stylesheets/_forms.scss */
.vm-segmented__input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/* line 821, app/assets/stylesheets/_forms.scss */
.vm-segmented__item:has(.vm-segmented__input:checked) {
background-color: var(--color-surface);
color: var(--color-text-strong);
box-shadow: var(--shadow-elevation-sm);
}
/* line 827, app/assets/stylesheets/_forms.scss */
.vm-segmented__item:has(.vm-segmented__input:focus-visible) {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* Dark mode — surface lifts read poorly on navy, so use a translucent
* overlay for the active pill and a subtle border for separation. */
/* line 834, app/assets/stylesheets/_forms.scss */
[data-theme='dark']:root .vm-segmented {
background-color: var(--color-overlay-light-10);
}
/* line 838, app/assets/stylesheets/_forms.scss */
[data-theme='dark']:root .vm-segmented__item:has(.vm-segmented__input:checked) {
background-color: var(--color-overlay-light-18);
box-shadow: none;
}
/* ── Density overrides ──────────────────────────────────────────────── */
/*
* Density follows the site-wide `[data-density="compact"]` contract —
* no body-scoped prefix, so a local wrapper can opt in independently.
* Halve from the comfortable baseline: padding, gap, and font-size
* only. Borders and colors are untouched so the two modes feel like
* the same product, just denser.
*/
/* line 853, app/assets/stylesheets/_forms.scss */
[data-density='compact'] {
--vm-field-padding-y: 0.3125rem;
--vm-field-padding-x: 0.625rem;
--vm-field-gap: 0.25rem;
--vm-field-row-gap: 0.875rem;
--vm-field-label-size: 0.75rem;
--vm-field-hint-size: 0.75rem;
}
/* line 862, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-input,
[data-density='compact'] .vm-select,
[data-density='compact'] .vm-textarea {
font-size: 0.8125rem;
}
/* line 868, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-textarea {
min-height: 4.25rem;
}
/* line 872, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-check__input,
[data-density='compact'] .vm-radio__input {
width: 0.9375rem;
height: 0.9375rem;
margin-top: 0.125rem;
}
/* line 879, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-check__label,
[data-density='compact'] .vm-radio__label,
[data-density='compact'] .vm-switch__label {
font-size: 0.8125rem;
}
/* line 885, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-option-card {
padding: 0.625rem 0.75rem;
}
/* line 889, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-segmented__item {
padding: 0.1875rem 0.625rem;
font-size: 0.75rem;
}
/* line 894, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-switch__track {
width: 2rem;
height: 1.125rem;
}
/* line 899, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-switch__track::after {
width: 0.875rem;
height: 0.875rem;
}
/* line 904, app/assets/stylesheets/_forms.scss */
[data-density='compact'] .vm-switch__input:checked ~ .vm-switch__track::after {
transform: translateX(0.875rem);
}
/*
* Buttons — unified button system
* ───────────────────────────────
*
* Extends the editorial feel of `.vm-btn-icon` and `.vm-btn-quiet` (the
* row-action primitives in `_tables.scss`) out to full-size page buttons.
* One base (`.vm-btn`) + variant modifiers = every CTA, toolbar, cancel,
* delete, and split button in the app.
*
* Anchor style: the icon buttons in `.vm-table-actions` — quiet at rest,
* tinted on hover (10% bg / 30% border / full-color text), 0.375rem radius,
* 0.1s transitions, density-aware. Every variant below follows the same
* chrome so buttons compose cleanly beside table actions without jarring.
*
* Variants:
* .vm-btn--primary filled brand CTA
* .vm-btn--danger filled destructive
* .vm-btn--neutral filled neutral (save-and-stay, secondary panel action)
* .vm-btn--outline outlined neutral
* .vm-btn--outline-primary outlined, brand-tinted border + text
* .vm-btn--outline-danger outlined, rust-tinted border + text
* .vm-btn--ghost transparent, muted text — the full-size twin of .vm-btn-icon
* .vm-btn--ghost-primary quiet with brand tint on hover
* .vm-btn--ghost-danger quiet with rust tint on hover
*
* Sizes:
* (default) md — every-day row/toolbar
* .vm-btn--sm small — dense toolbars, inline controls
* .vm-btn--lg large — page hero CTAs
*
* Shape:
* .vm-btn--icon-only square target for icon-only actions at any size
* .vm-btn--pill fully rounded (for status/toggle contexts)
* .vm-btn--block full-width
*
* State:
* :hover / :focus-visible tinted accent
* :disabled / [aria-disabled] 0.55 opacity, not-allowed cursor
* [aria-pressed="true"] persistent active tint (toggles)
* [aria-busy="true"] inline spinner, locks interaction
*
* Groups:
* .vm-btn-group segmented control — shared seams, unified radii
* .vm-btn-split split button — primary + caret
*
* Density:
* Tracks `data-density="compact"` on any ancestor, identical scheme to
* the rest of the app.
*/
/* ── Base ───────────────────────────────────────────────────────────── */
/* line 53, app/assets/stylesheets/_buttons.scss */
.vm-btn {
--vm-btn-px: 0.75rem;
--vm-btn-py: 0.4375rem;
--vm-btn-font-size: var(--fs-small);
--vm-btn-gap: 0.5rem;
--vm-btn-radius: 0.375rem;
--vm-btn-icon-size: 1em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--vm-btn-gap);
padding: var(--vm-btn-py) var(--vm-btn-px);
border: 1px solid transparent;
border-radius: var(--vm-btn-radius);
background-color: transparent;
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--vm-btn-font-size);
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.005em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}
/* line 86, app/assets/stylesheets/_buttons.scss */
.vm-btn > svg {
width: var(--vm-btn-icon-size);
height: var(--vm-btn-icon-size);
stroke-width: 1.75;
flex: 0 0 auto;
}
/* line 93, app/assets/stylesheets/_buttons.scss */
.vm-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* line 98, app/assets/stylesheets/_buttons.scss */
.vm-btn:disabled,
.vm-btn.disabled,
.vm-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
/* ── Sizes ──────────────────────────────────────────────────────────── */
/* line 108, app/assets/stylesheets/_buttons.scss */
.vm-btn--sm {
--vm-btn-px: 0.5rem;
--vm-btn-py: 0.25rem;
--vm-btn-font-size: 0.75rem;
--vm-btn-gap: 0.375rem;
}
/* line 115, app/assets/stylesheets/_buttons.scss */
.vm-btn--lg {
--vm-btn-px: 1.125rem;
--vm-btn-py: 0.625rem;
--vm-btn-font-size: var(--fs-body);
--vm-btn-gap: 0.5rem;
--vm-btn-icon-size: 1.125em;
}
/* ── Variants: solid fills ──────────────────────────────────────────── */
/* line 125, app/assets/stylesheets/_buttons.scss */
.vm-btn--primary {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
}
/* line 130, app/assets/stylesheets/_buttons.scss */
.vm-btn--primary:hover,
.vm-btn--primary:focus-visible {
background-color: var(--color-primary-active);
border-color: var(--color-primary-active);
color: var(--color-text-inverse);
}
/* line 136, app/assets/stylesheets/_buttons.scss */
.vm-btn--primary:active,
.vm-btn--primary[aria-pressed="true"] {
background-color: var(--color-primary-active);
border-color: var(--color-primary-active);
}
/* line 142, app/assets/stylesheets/_buttons.scss */
.vm-btn--danger {
background-color: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-text-inverse);
}
/* line 147, app/assets/stylesheets/_buttons.scss */
.vm-btn--danger:hover,
.vm-btn--danger:focus-visible {
background-color: var(--color-danger-hover);
border-color: var(--color-danger-hover);
color: var(--color-text-inverse);
}
/* line 154, app/assets/stylesheets/_buttons.scss */
.vm-btn--neutral {
background-color: var(--color-bg-muted);
border-color: var(--color-border-strong);
color: var(--color-text-strong);
}
/* line 159, app/assets/stylesheets/_buttons.scss */
.vm-btn--neutral:hover,
.vm-btn--neutral:focus-visible {
background-color: var(--color-border);
border-color: var(--color-border-strong);
color: var(--color-text-strong);
}
/* ── Variants: outlined ─────────────────────────────────────────────── */
/* line 168, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline {
color: var(--color-text);
border-color: var(--color-border-strong);
}
/* line 172, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline:hover,
.vm-btn--outline:focus-visible {
background-color: var(--color-bg-muted);
color: var(--color-text-strong);
border-color: var(--color-border-strong);
}
/* line 179, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline-primary {
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
/* line 183, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline-primary:hover,
.vm-btn--outline-primary:focus-visible {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
}
/* line 190, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline-danger {
color: var(--color-danger);
border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}
/* line 194, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline-danger:hover,
.vm-btn--outline-danger:focus-visible {
background-color: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-text-inverse);
}
/* ── Variants: ghost (transparent-at-rest, vm-btn-icon twin) ────────── */
/* line 203, app/assets/stylesheets/_buttons.scss */
.vm-btn--ghost {
color: var(--color-text-muted);
border-color: transparent;
}
/* line 207, app/assets/stylesheets/_buttons.scss */
.vm-btn--ghost:hover,
.vm-btn--ghost:focus-visible {
background-color: var(--color-bg-muted);
border-color: var(--color-border);
color: var(--color-text-strong);
}
/* line 214, app/assets/stylesheets/_buttons.scss */
.vm-btn--ghost-primary {
color: var(--color-primary);
border-color: transparent;
}
/* line 218, app/assets/stylesheets/_buttons.scss */
.vm-btn--ghost-primary:hover,
.vm-btn--ghost-primary:focus-visible {
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
color: var(--color-primary);
}
/* line 225, app/assets/stylesheets/_buttons.scss */
.vm-btn--ghost-danger {
color: var(--color-danger);
border-color: transparent;
}
/* line 229, app/assets/stylesheets/_buttons.scss */
.vm-btn--ghost-danger:hover,
.vm-btn--ghost-danger:focus-visible {
background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
color: var(--color-danger);
}
/* ── Shape modifiers ────────────────────────────────────────────────── */
/* line 238, app/assets/stylesheets/_buttons.scss */
.vm-btn--block {
display: flex;
width: 100%;
}
/* line 243, app/assets/stylesheets/_buttons.scss */
.vm-btn--pill {
border-radius: 999px;
}
/*
* Icon-only — squares the target while reusing the same size-scaled
* padding so icon and labeled buttons line up visually on a toolbar.
* Composes with any size / variant.
*/
/* line 252, app/assets/stylesheets/_buttons.scss */
.vm-btn--icon-only {
--vm-btn-icon-size: 1rem;
padding: 0;
aspect-ratio: 1 / 1;
width: calc(var(--vm-btn-py) * 2 + var(--vm-btn-icon-size) + 2px);
}
/* line 260, app/assets/stylesheets/_buttons.scss */
.vm-btn--icon-only.vm-btn--sm {
--vm-btn-icon-size: 0.875rem;
}
/* line 264, app/assets/stylesheets/_buttons.scss */
.vm-btn--icon-only.vm-btn--lg {
--vm-btn-icon-size: 1.125rem;
}
/* ── State: aria-pressed (toggles) ──────────────────────────────────── */
/* line 270, app/assets/stylesheets/_buttons.scss */
.vm-btn[aria-pressed="true"]:not(.vm-btn--primary):not(.vm-btn--danger):not(.vm-btn--neutral) {
background-color: var(--color-bg-muted);
border-color: var(--color-border-strong);
color: var(--color-text-strong);
}
/* ── State: aria-busy (loading) ─────────────────────────────────────── */
/*
* Hides the label to transparent and draws a spinner centered in the
* button. Label stays in DOM so width doesn't jump. Filled variants
* get a white spinner; outlined/ghost get the variant's text color.
*/
/* line 283, app/assets/stylesheets/_buttons.scss */
.vm-btn[aria-busy="true"] {
color: transparent !important;
cursor: progress;
position: relative;
}
/* line 289, app/assets/stylesheets/_buttons.scss */
.vm-btn[aria-busy="true"] > * {
visibility: hidden;
}
/* line 293, app/assets/stylesheets/_buttons.scss */
.vm-btn[aria-busy="true"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.875em;
height: 0.875em;
margin: -0.4375em 0 0 -0.4375em;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 999px;
animation: vm-btn-spin 0.65s linear infinite;
}
/* line 307, app/assets/stylesheets/_buttons.scss */
.vm-btn--primary[aria-busy="true"]::after,
.vm-btn--danger[aria-busy="true"]::after {
color: var(--color-text-inverse);
}
/* line 312, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline[aria-busy="true"]::after,
.vm-btn--outline-primary[aria-busy="true"]::after,
.vm-btn--outline-danger[aria-busy="true"]::after,
.vm-btn--ghost[aria-busy="true"]::after,
.vm-btn--ghost-primary[aria-busy="true"]::after,
.vm-btn--ghost-danger[aria-busy="true"]::after,
.vm-btn--neutral[aria-busy="true"]::after {
color: var(--color-text);
}
/* line 322, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline-primary[aria-busy="true"]::after,
.vm-btn--ghost-primary[aria-busy="true"]::after {
color: var(--color-primary);
}
/* line 327, app/assets/stylesheets/_buttons.scss */
.vm-btn--outline-danger[aria-busy="true"]::after,
.vm-btn--ghost-danger[aria-busy="true"]::after {
color: var(--color-danger);
}
@keyframes vm-btn-spin {
to {
transform: rotate(360deg);
}
}
/* ── Density ────────────────────────────────────────────────────────── */
/* line 338, app/assets/stylesheets/_buttons.scss */
[data-density="compact"] .vm-btn {
--vm-btn-px: 0.625rem;
--vm-btn-py: 0.3125rem;
--vm-btn-font-size: 0.75rem;
--vm-btn-gap: 0.4375rem;
}
/* line 345, app/assets/stylesheets/_buttons.scss */
[data-density="compact"] .vm-btn--sm {
--vm-btn-px: 0.4375rem;
--vm-btn-py: 0.1875rem;
--vm-btn-font-size: 0.6875rem;
--vm-btn-gap: 0.3125rem;
}
/* line 352, app/assets/stylesheets/_buttons.scss */
[data-density="compact"] .vm-btn--lg {
--vm-btn-px: 0.875rem;
--vm-btn-py: 0.4375rem;
--vm-btn-font-size: var(--fs-small);
--vm-btn-gap: 0.5rem;
--vm-btn-icon-size: 1em;
}
/* ── Groups ─────────────────────────────────────────────────────────── */
/*
* Segmented control — buttons share a border, seams collapse, and the
* hovered / pressed segment lifts over its neighbors. Works with any
* variant but reads best with .vm-btn--outline or .vm-btn--ghost.
*/
/* line 368, app/assets/stylesheets/_buttons.scss */
.vm-btn-group {
display: inline-flex;
gap: 0;
}
/* line 373, app/assets/stylesheets/_buttons.scss */
.vm-btn-group > .vm-btn {
border-radius: 0;
position: relative;
}
/* line 378, app/assets/stylesheets/_buttons.scss */
.vm-btn-group > .vm-btn:first-child {
border-top-left-radius: var(--vm-btn-radius);
border-bottom-left-radius: var(--vm-btn-radius);
}
/* line 383, app/assets/stylesheets/_buttons.scss */
.vm-btn-group > .vm-btn:last-child {
border-top-right-radius: var(--vm-btn-radius);
border-bottom-right-radius: var(--vm-btn-radius);
}
/* line 388, app/assets/stylesheets/_buttons.scss */
.vm-btn-group > .vm-btn + .vm-btn {
margin-left: -1px;
}
/* line 392, app/assets/stylesheets/_buttons.scss */
.vm-btn-group > .vm-btn:hover,
.vm-btn-group > .vm-btn:focus-visible,
.vm-btn-group > .vm-btn[aria-pressed="true"] {
z-index: 1;
}
/*
* Split button — primary action + caret for a menu. Seam uses the
* same pixel trick as .vm-btn-group; the caret half gets tighter
* padding so it sits narrower than the main action.
*/
/* line 404, app/assets/stylesheets/_buttons.scss */
.vm-btn-split {
display: inline-flex;
}
/* line 408, app/assets/stylesheets/_buttons.scss */
.vm-btn-split > .vm-btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* line 413, app/assets/stylesheets/_buttons.scss */
.vm-btn-split > .vm-btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* line 421, app/assets/stylesheets/_buttons.scss */
.vm-btn-split > .vm-btn:hover,
.vm-btn-split > .vm-btn:focus-visible {
z-index: 1;
}
/* ── Toolbar ────────────────────────────────────────────────────────── */
/*
* Generic flex container for a row of buttons (page header, form
* footer, empty state). Keeps a consistent gap so buttons line up
* whether they are icon-only, labeled, or grouped.
*/
/* line 434, app/assets/stylesheets/_buttons.scss */
.vm-btn-toolbar {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.375rem;
}
/* line 441, app/assets/stylesheets/_buttons.scss */
.vm-btn-toolbar--split {
justify-content: space-between;
width: 100%;
}
/* line 446, app/assets/stylesheets/_buttons.scss */
[data-density="compact"] .vm-btn-toolbar {
gap: 0.25rem;
}
/* ── Shell reset ────────────────────────────────────────────────────── */
/* line 16, app/assets/stylesheets/devise.scss */
html,
body {
height: 100%;
margin: 0;
}
/* line 22, app/assets/stylesheets/devise.scss */
body.vm-auth {
min-height: 100dvh;
display: block;
padding: 0;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-feature-settings: var(--font-sans-features);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Shared form polish ─────────────────────────────────────────────── */
/* line 36, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .form-control {
background-color: var(--color-surface);
color: var(--color-text-strong);
border-color: var(--color-border);
border-radius: 0.625rem;
padding: 1rem 0.875rem;
font-size: 0.9375rem;
}
/* line 45, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .form-control:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 22%, transparent);
}
/* line 51, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .form-floating > label {
color: var(--color-text-muted);
padding: 1rem 0.875rem;
}
/* line 56, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .form-floating > .form-control:focus ~ label,
.vm-auth
.auth-form
.form-floating
> .form-control:not(:placeholder-shown)
~ label {
color: var(--color-primary);
}
/* line 65, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .form-check-input {
border-color: var(--color-border-strong);
}
/* line 69, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .form-check-input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
/* line 74, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .btn-primary,
.vm-auth .auth-form .btn-spark {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
padding: 0.875rem 1.25rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 0.625rem;
box-shadow: var(--shadow-elevation-sm);
transition: transform 0.12s ease, background-color 0.12s ease;
}
/* line 89, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .btn-primary:hover,
.vm-auth .auth-form .btn-spark:hover {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
transform: translateY(-1px);
}
/* line 96, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .btn-primary:active,
.vm-auth .auth-form .btn-spark:active {
background-color: var(--color-primary-active);
border-color: var(--color-primary-active);
transform: translateY(0);
}
/* line 103, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .btn-outline-light {
color: var(--color-text);
border-color: var(--color-border-strong);
background-color: transparent;
}
/* line 109, app/assets/stylesheets/devise.scss */
.vm-auth .auth-form .btn-outline-light:hover {
background-color: var(--color-bg-muted);
color: var(--color-text-strong);
border-color: var(--color-border-strong);
}
/* ── Auth links footer ──────────────────────────────────────────────── */
/* line 117, app/assets/stylesheets/devise.scss */
.vm-auth .auth-links {
display: flex;
flex-wrap: wrap;
gap: 0.375rem 1.25rem;
padding: 0;
margin: 1.5rem 0 0;
list-style: none;
font-size: 0.875rem;
}
/* line 127, app/assets/stylesheets/devise.scss */
.vm-auth .auth-links a {
color: var(--color-link);
text-decoration: none;
font-weight: 500;
}
/* line 133, app/assets/stylesheets/devise.scss */
.vm-auth .auth-links a:hover {
color: var(--color-link-hover);
text-decoration: underline;
}
/* line 138, app/assets/stylesheets/devise.scss */
.vm-auth .auth-links--inverse a {
color: var(--color-text-inverse);
opacity: 0.85;
}
/* line 143, app/assets/stylesheets/devise.scss */
.vm-auth .auth-links--inverse a:hover {
color: var(--color-primary);
opacity: 1;
}
/* line 148, app/assets/stylesheets/devise.scss */
.vm-auth .auth-footnote {
margin: 2rem 0 0;
color: var(--color-text-muted);
font-size: 0.8125rem;
}
/* line 154, app/assets/stylesheets/devise.scss */
.vm-auth .auth-footnote--inverse {
color: var(--color-text-inverse-muted);
}
/* ── Heading group ──────────────────────────────────────────────────── */
/* line 160, app/assets/stylesheets/devise.scss */
.vm-auth .auth-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.625rem;
margin: 0 0 1.25rem;
border-radius: 999px;
background-color: var(--color-bg-muted);
color: var(--color-text-muted);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* line 175, app/assets/stylesheets/devise.scss */
.vm-auth .auth-eyebrow--inverse {
background-color: var(--color-overlay-light-10);
color: var(--color-text-inverse);
}
/* line 180, app/assets/stylesheets/devise.scss */
.vm-auth .auth-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background-color: var(--color-primary);
}
/* line 188, app/assets/stylesheets/devise.scss */
.vm-auth .auth-headline {
font-size: var(--fs-h1);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text-strong);
margin: 0 0 0.75rem;
}
/* line 197, app/assets/stylesheets/devise.scss */
.vm-auth .auth-headline--inverse {
color: var(--color-text-inverse);
}
/* line 201, app/assets/stylesheets/devise.scss */
.vm-auth .auth-subhead {
font-size: 1rem;
line-height: 1.55;
color: var(--color-text-muted);
margin: 0 0 2rem;
max-width: 36ch;
}
/* line 209, app/assets/stylesheets/devise.scss */
.vm-auth .auth-subhead--inverse {
color: var(--color-text-inverse-muted);
}
/* ── Split layout: brand story + form ───────────────────────────────── */
/* line 215, app/assets/stylesheets/devise.scss */
.vm-auth-split {
min-height: 100dvh;
display: grid;
grid-template-columns: 1fr;
background-color: var(--color-bg);
}
@media (min-width: 992px) {
/* line 223, app/assets/stylesheets/devise.scss */
.vm-auth-split {
grid-template-columns: 11fr 9fr;
}
}
/* line 228, app/assets/stylesheets/devise.scss */
.vm-auth-split__brand {
position: relative;
overflow: hidden;
padding: 3rem 2rem;
background: radial-gradient(120% 120% at 0% 0%, var(--color-navy-800) 0%, var(--color-nav-bg) 55%, var(--color-nav-bg) 100%);
color: var(--color-text-inverse);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 3rem;
}
@media (min-width: 992px) {
/* line 246, app/assets/stylesheets/devise.scss */
.vm-auth-split__brand {
padding: 3.5rem 4rem;
}
}
/* line 251, app/assets/stylesheets/devise.scss */
.vm-auth-split__brand::before {
content: '';
position: absolute;
inset: auto -20% -30% auto;
width: 60%;
aspect-ratio: 1;
background: radial-gradient(circle at center, var(--color-brand-500) 0%, transparent 65%);
opacity: 0.35;
pointer-events: none;
}
/* line 266, app/assets/stylesheets/devise.scss */
.vm-auth-split__brand-body {
position: relative;
max-width: 32rem;
}
/* line 271, app/assets/stylesheets/devise.scss */
.vm-auth-split__form-col {
padding: 2.5rem 1.25rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-surface);
}
@media (min-width: 992px) {
/* line 280, app/assets/stylesheets/devise.scss */
.vm-auth-split__form-col {
padding: 3.5rem 4rem;
}
}
/* line 285, app/assets/stylesheets/devise.scss */
.vm-auth-split__form {
width: 100%;
max-width: 26rem;
}
/* line 290, app/assets/stylesheets/devise.scss */
.vm-auth-split__logo {
height: 2.25rem;
width: auto;
}
/* line 295, app/assets/stylesheets/devise.scss */
.vm-auth-feature-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
}
/* line 303, app/assets/stylesheets/devise.scss */
.vm-auth-feature-list li {
display: flex;
align-items: flex-start;
gap: 0.875rem;
color: var(--color-text-inverse);
font-size: 0.9375rem;
line-height: 1.4;
}
/* line 312, app/assets/stylesheets/devise.scss */
.vm-auth-feature-list svg {
flex-shrink: 0;
width: 1.375rem;
height: 1.375rem;
color: var(--color-primary);
margin-top: 0.125rem;
}
/* line 320, app/assets/stylesheets/devise.scss */
.vm-auth-quote {
position: relative;
padding: 1.25rem 1.25rem;
border-left: 3px solid var(--color-primary);
background-color: var(--color-overlay-light-10);
border-radius: 0 0.5rem 0.5rem 0;
}
/* line 328, app/assets/stylesheets/devise.scss */
.vm-auth-quote p {
margin: 0 0 0.5rem;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-text-inverse);
}
/* line 335, app/assets/stylesheets/devise.scss */
.vm-auth-quote cite {
font-style: normal;
font-size: 0.8125rem;
color: var(--color-text-inverse-muted);
}