@echodial/deck 0.1.0

package/dist/layers/datepicker.css

@@ -0,0 +1,305 @@
+/* ==========================================================================
+   Deck — 10 Date picker
+   Popover calendar on desktop, bottom sheet on a phone. Single date, range,
+   and month/year jump. Behaviour lives in deck.js; this file is the skin.
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* --- Trigger field ------------------------------------------------------ */
+  /* The trigger for a date picker: an input with a calendar icon inside its
+     starting edge and a clear button at the end. The input is readonly and
+     cursor: pointer, because the value comes from the calendar — which also
+     means a reader who knows the date cannot type it. */
+  .datefield { position: relative; display: flex; align-items: center; }
+  .datefield > .icon {
+    position: absolute;
+    inset-inline-start: var(--space-3);
+    color: var(--text-faint);
+    pointer-events: none;
+  }
+  .datefield > .input { padding-inline-start: var(--space-10); cursor: pointer; }
+  /* Clears the field. Hidden until .has-value is set by deck.js. */
+  .datefield > .datefield-clear {
+    position: absolute;
+    inset-inline-end: var(--space-2);
+    inline-size: 28px;
+    block-size: 28px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-full);
+    color: var(--text-faint);
+    cursor: pointer;
+  }
+  .datefield > .datefield-clear:hover { background: var(--surface-hover); color: var(--text); }
+  .datefield:not(.has-value) .datefield-clear { display: none; }
+
+  /* --- Panel -------------------------------------------------------------- */
+  /* The calendar panel: a native popover, anchored to its field by
+     25-anchor.css with the same fallback chain as a menu. Where there is no
+     room below it opens upward, and position-try-order: most-block-size picks
+     the direction with the most room rather than the first that fits — which
+     matters more for a calendar than for a menu. */
+  .datepicker {
+    position: absolute;
+    margin: 0;
+    inset: auto;
+    padding: 0;
+    inline-size: max-content;
+    max-inline-size: calc(100vw - var(--space-6));
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    box-shadow: var(--shadow-4);
+    color: var(--text);
+    opacity: 0;
+    translate: 0 -6px;
+    transition: opacity var(--dur-2) var(--ease-out),
+                translate var(--dur-2) var(--ease-out),
+                overlay var(--dur-2) allow-discrete,
+                display var(--dur-2) allow-discrete;
+  }
+  .datepicker:popover-open { opacity: 1; translate: 0; }
+  @starting-style { .datepicker:popover-open { opacity: 0; translate: 0 -6px; } }
+  .datepicker::backdrop { background: transparent; }
+
+  .datepicker-layout { display: flex; flex-direction: column; }
+  @media (min-width: 40rem) {
+    .datepicker-layout:has(.datepicker-presets) { flex-direction: row; }
+  }
+
+  /* --- Preset rail --------------------------------------------------------- */
+  /* The shortcut rail — "Last 7 days", "This month". A horizontal scroller
+     below 40rem and a column beside the calendar above it. */
+  .datepicker-presets {
+    display: flex;
+    gap: var(--space-1);
+    padding: var(--space-2);
+    overflow-x: auto;
+    scrollbar-width: none;
+    border-block-end: 1px solid var(--line);
+  }
+  .datepicker-presets::-webkit-scrollbar { display: none; }
+  @media (min-width: 40rem) {
+    .datepicker-presets {
+      flex-direction: column;
+      inline-size: 10.5rem;
+      overflow-x: visible;
+      border-block-end: 0;
+      border-inline-end: 1px solid var(--line);
+      background: var(--surface-2);
+    }
+  }
+  .datepicker-preset {
+    padding: var(--space-2) var(--space-3);
+    min-block-size: 36px;
+    border-radius: var(--r-xs);
+    font-size: var(--text-sm);
+    font-weight: 520;
+    color: var(--text-muted);
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+  }
+  .datepicker-preset:hover { background: var(--surface-hover); color: var(--text); }
+  .datepicker-preset[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-soft-text); font-weight: 600; }
+
+  /* --- Calendar ----------------------------------------------------------- */
+  .datepicker-main { padding: var(--space-3); }
+
+  .datepicker-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-block-end: var(--space-2);
+  }
+  .datepicker-title {
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    min-block-size: 36px;
+    padding-inline: var(--space-3);
+    border-radius: var(--r-sm);
+    font-weight: 620;
+    font-size: var(--text-sm);
+    cursor: pointer;
+    letter-spacing: -.01em;
+  }
+  .datepicker-title:hover { background: var(--surface-hover); }
+  .datepicker-nav {
+    inline-size: 36px;
+    block-size: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+  .datepicker-nav:hover { background: var(--surface-hover); color: var(--text); }
+  .datepicker-nav[disabled] { opacity: .35; pointer-events: none; }
+
+  .datepicker-months { display: flex; gap: var(--space-5); }
+  .datepicker-month { display: flex; flex-direction: column; }
+
+  .datepicker-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+  }
+  .datepicker-dow {
+    text-align: center;
+    font-size: var(--text-2xs);
+    font-weight: 620;
+    color: var(--text-faint);
+    padding-block: var(--space-2);
+  }
+
+  /* One day cell. 38px, raised to 42px on a coarse pointer so it approaches
+     the touch target. Eight is- states compose on it, and the range band is
+     built from is-in-range plus logical corner radii on the two ends. */
+  .datepicker-day {
+    position: relative;
+    inline-size: 38px;
+    block-size: 38px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-sm);
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+  }
+  @media (pointer: coarse) { .datepicker-day { inline-size: 42px; block-size: 42px; } }
+
+  .datepicker-day:hover { background: var(--surface-hover); }
+  .datepicker-day.is-outside { color: var(--text-faint); opacity: .55; }
+  .datepicker-day[disabled], .datepicker-day.is-blocked {
+    color: var(--text-faint);
+    opacity: .4;
+    pointer-events: none;
+    text-decoration: line-through;
+  }
+
+  /* Today gets a marker, not a fill, so it never competes with the selection */
+  .datepicker-day.is-today::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 5px;
+    inline-size: 4px;
+    block-size: 4px;
+    border-radius: var(--r-full);
+    background: var(--brand);
+  }
+
+  .datepicker-day.is-selected {
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    font-weight: 620;
+  }
+  .datepicker-day.is-selected::after { background: var(--text-on-brand); }
+
+  /* Range: the middle days get a continuous band, the ends get the caps */
+  .datepicker-day.is-in-range {
+    background: var(--brand-soft);
+    color: var(--brand-soft-text);
+    border-radius: 0;
+  }
+  .datepicker-day.is-range-start {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .datepicker-day.is-range-end {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .datepicker-day.is-range-start.is-range-end { border-radius: var(--r-sm); }
+  .datepicker-grid:has(.is-in-range) .datepicker-day.is-in-range:first-child {
+    border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm);
+  }
+  .datepicker-grid:has(.is-in-range) .datepicker-day.is-in-range:nth-child(7n) {
+    border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm);
+  }
+  .datepicker-day.is-preview { background: color-mix(in oklab, var(--brand-soft) 60%, transparent); }
+  .datepicker-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 1; }
+
+  /* --- Month and year jump grid ------------------------------------------- */
+  /* Opens the month and year grid. A picker without one makes a reader press
+     the next-month arrow twenty-four times to reach a date two years out. */
+  .datepicker-jump {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-1);
+    padding-block: var(--space-2);
+  }
+  .datepicker-jump > button {
+    min-block-size: 40px;
+    padding-inline: var(--space-2);
+    border-radius: var(--r-sm);
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+  .datepicker-jump > button:hover { background: var(--surface-hover); color: var(--text); }
+  .datepicker-jump > button[aria-selected="true"] {
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    font-weight: 620;
+  }
+
+  /* --- Time row and footer ------------------------------------------------- */
+  .datepicker-time {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border-block-start: 1px solid var(--line);
+  }
+  .datepicker-time .input { inline-size: auto; min-inline-size: 7.5rem; }
+
+  .datepicker-foot {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border-block-start: 1px solid var(--line);
+    background: var(--surface-2);
+  }
+  .datepicker-readout {
+    flex: 1 1 auto;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+    min-inline-size: 0;
+  }
+
+  /* --- Phone: the picker becomes a sheet ---------------------------------- */
+  @media (max-width: 30rem) {
+    .datepicker {
+      position: fixed;
+      inset: auto 0 0 0;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      border-radius: var(--r-lg) var(--r-lg) 0 0;
+      border-inline: 0;
+      border-block-end: 0;
+      translate: 0 100%;
+      padding-block-end: env(safe-area-inset-bottom);
+      transition: translate var(--dur-3) var(--ease-out),
+                  overlay var(--dur-3) allow-discrete,
+                  display var(--dur-3) allow-discrete;
+      opacity: 1;
+    }
+    .datepicker:popover-open { translate: 0; }
+    @starting-style { .datepicker:popover-open { translate: 0 100%; } }
+    .datepicker::backdrop { background: oklch(18% .02 var(--hue-neutral) / .45); }
+    .datepicker-months { flex-direction: column; }
+    .datepicker-day { inline-size: 100%; }
+    .datepicker-main { padding-inline: var(--space-4); }
+  }
+}

package/dist/layers/forms.css

@@ -0,0 +1,401 @@
+/* ==========================================================================
+   Deck — 06 Forms
+   Inputs are 16px on touch devices so iOS never zooms on focus.
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* One form control and everything attached to it: label, input, help
+     text, error. The vertical gap between them comes from here, so a field
+     never needs margins. */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-inline-size: 0;
+  }
+
+  /* The label for a control. A flex row, so a "required" or "optional"
+     marker sits beside the text without extra markup. */
+  .label {
+    font-size: var(--text-sm);
+    font-weight: 580;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  /* The marker for an optional field. Where most fields are required this
+     reads better than an asterisk on nearly every label. */
+  .label .optional { color: var(--text-faint); font-weight: 400; }
+  /* The marker beside a required field's label. Visual only — a screen
+     reader announces the required attribute, not the asterisk. */
+  .label .required { color: var(--bad-500); }
+
+  /* A hint below a control. Needs aria-describedby on the control to reach
+     a screen reader — sitting next to it is not an association. */
+  .help { font-size: var(--text-sm); color: var(--text-muted); }
+  /* A validation message below a control. Lightened for dark mode with
+     light-dark(), and aligned to flex-start so an icon stays on the first
+     line of a two-line message. */
+  .error {
+    font-size: var(--text-sm);
+    color: light-dark(var(--bad-700), oklch(76% .13 var(--hue-bad)));
+    display: flex;
+    gap: var(--space-2);
+    align-items: flex-start;
+  }
+
+  .input, .textarea, .select {
+    inline-size: 100%;
+    min-block-size: var(--control-h);
+    padding: var(--space-2) var(--space-3);
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--r-sm);
+    box-shadow: var(--shadow-1);
+    font-size: var(--text-base);
+    line-height: 1.45;
+    transition: border-color var(--dur-1) var(--ease-out),
+                box-shadow var(--dur-1) var(--ease-out),
+                background-color var(--dur-1) var(--ease-out);
+  }
+
+  @media (pointer: coarse) {
+    .input, .textarea, .select { font-size: 16px; }
+  }
+
+  .input::placeholder, .textarea::placeholder { color: var(--text-faint); }
+
+  .input:hover, .textarea:hover, .select:hover { border-color: var(--ink-400); }
+
+  .input:focus, .textarea:focus, .select:focus {
+    outline: none;
+    border-color: var(--focus);
+    box-shadow: var(--ring);
+  }
+
+  .input[disabled], .textarea[disabled], .select[disabled] {
+    background: var(--bg-sunken);
+    color: var(--text-faint);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+  .input[readonly] { background: var(--surface-2); }
+
+  /* Grows with its content instead of scrolling in a 4-row box */
+  .textarea {
+    min-block-size: calc(var(--control-h) * 2);
+    resize: vertical;
+    field-sizing: content;
+    max-block-size: 22rem;
+  }
+
+  .select {
+    appearance: none;
+    padding-inline-end: var(--space-10);
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+                      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+
+  /* Validation only after the user has actually interacted */
+  /* Marks a field invalid from your own validation, producing the same
+     border and ring as :user-invalid without needing the browser to agree.
+     One of the few states an author writes by hand. */
+  .input:user-invalid, .textarea:user-invalid, .select:user-invalid,
+  .field.is-invalid :is(.input, .textarea, .select) {
+    border-color: var(--bad-500);
+  }
+  .input:user-invalid:focus, .field.is-invalid :is(.input, .textarea, .select):focus {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad-500) 26%, transparent);
+  }
+
+  /* --- Input group: prefix / suffix / attached button --------------------- */
+  /* A prefix, suffix or attached button joined to a control. The group
+     takes over the border, radius and shadow, and the input inside strips
+     its own, so the seam does not double up. :focus-within puts the ring
+     around the whole assembly. */
+  .input-group {
+    display: flex;
+    align-items: stretch;
+    inline-size: 100%;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--r-sm);
+    background: var(--surface);
+    box-shadow: var(--shadow-1);
+    overflow: hidden;
+  }
+  .input-group:focus-within { border-color: var(--focus); box-shadow: var(--ring); }
+  .input-group > .input {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .input-group > .input:focus { box-shadow: none; }
+  /* A prefix or suffix attached to a control inside .input-group. Its
+     divider is border-inline-end normally and border-inline-start on
+     :last-child, so a leading and a trailing addon each get their rule on
+     the correct side in both writing directions. */
+  .input-group > .addon {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-inline: var(--space-3);
+    background: var(--surface-2);
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    border-inline-end: 1px solid var(--line);
+  }
+  .input-group > .addon:last-child { border-inline-start: 1px solid var(--line); border-inline-end: 0; }
+  .input-group > .btn { border-radius: 0; border-block: 0; border-inline-end: 0; box-shadow: none; }
+
+  /* --- Search field ------------------------------------------------------- */
+  /* A control with an icon inside its starting edge. The icon is
+     pointer-events: none, so clicking it focuses the field underneath
+     rather than doing nothing. */
+  .search { position: relative; display: flex; align-items: center; }
+  .search > .icon {
+    position: absolute;
+    inset-inline-start: var(--space-3);
+    color: var(--text-faint);
+    pointer-events: none;
+  }
+  .search > .input { padding-inline-start: var(--space-10); border-radius: var(--r-full); }
+
+  /* --- Checkbox and radio ------------------------------------------------- */
+  /* A checkbox or radio and its text, laid out as a row that clears the
+     44px touch target. Wrap the text in .check-text to add a second line. */
+  .check {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    min-block-size: var(--tap);
+    padding-block: var(--space-2);
+    cursor: pointer;
+    line-height: 1.4;
+  }
+  .check input[type="checkbox"], .check input[type="radio"] {
+    appearance: none;
+    flex: 0 0 auto;
+    inline-size: 20px;
+    block-size: 20px;
+    margin-block-start: 1px;
+    border: 1.5px solid var(--line-strong);
+    background: var(--surface);
+    border-radius: var(--r-xs);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    transition: background-color var(--dur-1) var(--ease-out),
+                border-color var(--dur-1) var(--ease-out);
+  }
+  .check input[type="radio"] { border-radius: var(--r-full); }
+  .check input:hover { border-color: var(--brand-400); }
+  .check input:checked { background: var(--brand-600); border-color: var(--brand-600); }
+  .check input[type="checkbox"]::before {
+    content: "";
+    inline-size: 11px;
+    block-size: 11px;
+    scale: 0;
+    transition: scale var(--dur-2) var(--ease-spring);
+    box-shadow: inset 1em 1em var(--text-on-brand);
+    clip-path: polygon(14% 44%, 0 65%, 41% 100%, 100% 16%, 84% 0, 39% 68%);
+  }
+  .check input[type="radio"]::before {
+    content: "";
+    inline-size: 9px;
+    block-size: 9px;
+    border-radius: var(--r-full);
+    background: var(--text-on-brand);
+    scale: 0;
+    transition: scale var(--dur-2) var(--ease-spring);
+  }
+  .check input:checked::before { scale: 1; }
+  .check input:indeterminate { background: var(--brand-600); border-color: var(--brand-600); }
+  .check input:indeterminate::before {
+    scale: 1;
+    clip-path: polygon(10% 42%, 90% 42%, 90% 58%, 10% 58%);
+  }
+  .check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+  /* The text beside a checkbox or radio. A column, so a .check-note can sit
+     under the label as a second line. */
+  /* The text beside a checkbox, as a column, so a .check-note can sit
+     beneath the label as a second line. */
+  .check .check-text { display: flex; flex-direction: column; gap: 2px; }
+  /* A muted second line inside .check-text. It is inside the label, so it
+     becomes part of the accessible name — move it out and use
+     aria-describedby if that name gets too long. */
+  .check .check-note { font-size: var(--text-sm); color: var(--text-muted); }
+
+  /* Card-style choice, good for pricing and plan pickers */
+  .check-card {
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    padding: var(--space-4);
+    background: var(--surface);
+    transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
+  }
+  .check-card:has(input:checked) {
+    border-color: var(--brand-500);
+    background: var(--brand-soft);
+  }
+
+  /* --- Switch ------------------------------------------------------------- */
+  /* An on/off control that takes effect immediately, drawn over a real
+     checkbox. If the reader has to press Save afterwards, use .check
+     instead. Add role="switch" when "on"/"off" reads better than
+     "checked"/"unchecked". */
+  .switch { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--tap); cursor: pointer; }
+  .switch input {
+    appearance: none;
+    flex: 0 0 auto;
+    inline-size: 46px;
+    block-size: 28px;
+    border-radius: var(--r-full);
+    background: var(--ink-300);
+    position: relative;
+    cursor: pointer;
+    transition: background-color var(--dur-2) var(--ease-out);
+  }
+  .switch input::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-start: 3px;
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: var(--r-full);
+    background: var(--ink-0);
+    box-shadow: var(--shadow-2);
+    transition: translate var(--dur-2) var(--ease-spring);
+  }
+  .switch input:checked { background: var(--brand-600); }
+  .switch input:checked::after { translate: 18px 0; }
+  .switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+  /* --- Range -------------------------------------------------------------- */
+  /* A slider. The track and thumb are vendor pseudo-elements with
+     different names and different box models per engine, so every
+     declaration is written twice — WebKit needs a negative block-start
+     margin to centre the thumb and Firefox does not. */
+  .range {
+    inline-size: 100%;
+    appearance: none;
+    background: transparent;
+    block-size: var(--tap);
+  }
+  .range::-webkit-slider-runnable-track {
+    block-size: 6px;
+    border-radius: var(--r-full);
+    background: var(--ink-200);
+  }
+  .range::-moz-range-track {
+    block-size: 6px;
+    border-radius: var(--r-full);
+    background: var(--ink-200);
+  }
+  .range::-webkit-slider-thumb {
+    appearance: none;
+    margin-block-start: -8px;
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: var(--r-full);
+    background: var(--brand-600);
+    border: 3px solid var(--ink-0);
+    box-shadow: var(--shadow-2);
+    cursor: grab;
+  }
+  .range::-moz-range-thumb {
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: var(--r-full);
+    background: var(--brand-600);
+    border: 3px solid var(--ink-0);
+    box-shadow: var(--shadow-2);
+    cursor: grab;
+  }
+  .range:active::-webkit-slider-thumb { cursor: grabbing; scale: 1.08; }
+
+  /* --- File --------------------------------------------------------------- */
+  /* A dashed drop zone wrapping a real file input. The input is 1px and
+     transparent rather than display: none, so it keeps its place in the
+     tab order, and :focus-within is what makes that focus visible. Deck
+     styles the zone; dropping needs a handler of your own. */
+  .file {
+    display: grid;
+    place-items: center;
+    gap: var(--space-2);
+    padding: var(--space-6);
+    border: 1.5px dashed var(--line-strong);
+    border-radius: var(--r-md);
+    background: var(--surface-2);
+    text-align: center;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
+  }
+  .file:hover, .file:focus-within { border-color: var(--brand-500); background: var(--brand-soft); }
+  .file input[type="file"] { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
+
+  /* --- Fieldset ----------------------------------------------------------- */
+  /* A bordered group of controls that answer one question. Its legend is
+     the group's accessible name, which is what a radio group needs and
+     what a .label above one does not provide. */
+  .fieldset {
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    padding: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-inline-size: 0;
+  }
+  .fieldset > legend {
+    padding-inline: var(--space-2);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--text-muted);
+  }
+
+  /* Two fields side by side on anything wider than a phone */
+  .field-row {
+    display: grid;
+    gap: var(--space-4);
+    grid-template-columns: 1fr;
+  }
+  @media (min-width: 40rem) {
+    .field-row { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
+  }
+
+  /* Sticky save bar for long forms on mobile */
+  .form-actions {
+    display: flex;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+  }
+  /* Pins the action row to the bottom of the viewport with a blur behind
+     it and a safe-area inset for the home indicator. Add matching bottom
+     padding to the form, or the last field sits underneath it. */
+  .form-actions-sticky {
+    position: sticky;
+    inset-block-end: 0;
+    z-index: var(--z-sticky);
+    background: color-mix(in oklab, var(--bg) 88%, transparent);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-block-start: 1px solid var(--line);
+    padding-block: var(--space-3);
+    padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom));
+  }
+  .form-actions-sticky > .btn { flex: 1 1 auto; }
+  @media (min-width: 48rem) {
+    .form-actions-sticky > .btn { flex: 0 0 auto; }
+  }
+}