/* ==========================================================================
   OUR LIST - app layer
   --------------------------------------------------------------------------
   Sits on top of pulse-core.css and reuses its tokens. Every value here is a
   token or derived from one: no raw hex, no magic spacing, so re-theming
   stays a one-file job.

   Mobile first throughout. The phone is the real device; the desktop rules
   are the afterthought, not the other way round.
   ========================================================================== */

.pulse-main {
  max-width: 900px;
  margin-inline: auto;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
/* Board and table are wide working surfaces; give them the room Trello would. */
.pulse-main--wide { max-width: 1280px; }

/* A single view with nothing open reads best as one comfortable column, and a
   detail opened from the board or table gets the same treatment. */
.list-pane--solo,
.list-solo {
  max-width: 680px;
  margin-inline: auto;
}

.pulse-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.list-boot { display: grid; gap: var(--pulse-space-sm); padding-top: var(--pulse-space-md); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.list-head {
  position: relative;
  padding: var(--pulse-space-lg) 0 var(--pulse-space-md);
}
.list-head__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pulse-text);
}
/* The opening note carries the tone of the whole thing, so it gets real
   breathing room and a soft ground rather than being squeezed into fine print. */
.list-head__intro {
  margin: var(--pulse-space-sm) 0 0;
  padding: var(--pulse-space-sm) var(--pulse-space-md);
  background: var(--pulse-brand-soft);
  border-left: 3px solid var(--pulse-brand);
  border-radius: var(--pulse-radius-s);
  color: var(--pulse-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.list-head__count {
  margin: var(--pulse-space-sm) 0 0;
  font-weight: 600;
  color: var(--pulse-text-muted);
  font-size: 0.9rem;
}
.list-head__seen {
  margin: var(--pulse-space-2xs) 0 0;
  font-size: 0.8rem;
  color: var(--pulse-text-faint);
}
.list-head__edit {
  position: absolute;
  top: var(--pulse-space-lg);
  right: 0;
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-sm);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-s);
  background: var(--pulse-surface);
  color: var(--pulse-text-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Toolbar: filter bar + sort + view switch
   -------------------------------------------------------------------------- */
/* Static by default. On a phone the bar is taller than a third of the viewport,
   so pinning it eats the reading room the list needs; it scrolls away with the
   page instead. Pull-to-refresh and the header sync line still bring it back by
   scrolling up. Sticky returns once the screen has room to spare. */
.list-toolbar {
  position: static;
  padding: var(--pulse-space-xs) 0;
  background: var(--pulse-bg);
  border-bottom: 1px solid var(--pulse-border);
}
@media (min-width: 640px) {
  .list-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
  }
}

/* The vendored Pulse filter bar (assets/pulse/filters.js). Everything visual
   comes from .pulse-filterbar in pulse-core.css; this is only the glue that
   sits it in the toolbar and hides the one control the board cannot use. */
.list-filterbar {
  /* The multi-select panels are absolutely positioned against their own
     control, which on a phone can push them past the right edge. Contain them
     against the bar instead (see the narrow-screen rule below). */
  position: relative;
}
/* The bar's controls are 36px in Pulse, which is under the 44px this app holds
   itself to on a touch screen. */
.list-filterbar .pulse-filter__control {
  min-height: var(--pulse-touch-target);
}
/* 16px is the iOS Safari threshold below which focusing an input zooms the
   page. The bar's search box inherits the smaller Pulse control size, so it is
   set back up here, the same way the form fields and the note box are. */
.list-filterbar input {
  font-size: 16px;
}
/* On the board the five columns ARE the stage, so the stage control steps out
   of the way. The anchor is STRUCTURAL, not the module-generated id: the stage
   facet is this app's only select-widget facet, so "the facet wrapper holding
   a select" identifies it across every repaint the bar does (it rebuilds its
   facet DOM wholesale on each change, which is also why a JS-added class
   cannot serve here). The separator in front of it goes too, or two dividers
   would sit side by side. */
.list-filterbar.is-board .pulse-filter:has(select),
.list-filterbar.is-board .pulse-filterbar__sep:has(+ .pulse-filter select) {
  display: none;
}
@media (max-width: 560px) {
  .list-filterbar .pulse-multiselect { position: static; }
  .list-filterbar .pulse-multiselect__panel {
    left: 0;
    right: 0;
    min-width: 0;
  }
}
.list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pulse-space-sm);
  margin-top: var(--pulse-space-xs);
}
.list-sort { flex: 1 1 auto; min-width: 0; }
.list-sort select { width: 100%; min-height: var(--pulse-touch-target); }
.list-view { flex: none; margin-left: auto; }
/* Once there is room the sort control takes its natural width instead of
   stretching across the page. */
@media (min-width: 640px) {
  .list-sort { flex: 0 1 auto; }
  .list-sort select { width: auto; min-width: 230px; }
}

/* Header freshness */
.list-head__fresh {
  margin: var(--pulse-space-2xs) 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pulse-accent-strong);
}
.list-head__sync {
  display: inline-flex;
  align-items: flex-end;
  background: none;
  border: 0;
  height: auto;
  /* Small text, full-size tap: the visible line stays quiet but the target
     clears the 44px minimum like everything else. */
  min-height: var(--pulse-touch-target);
  padding: 12px 0 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--pulse-text-faint);
  text-decoration: underline dotted;
  cursor: pointer;
}
.list-head__sync:hover { color: var(--pulse-text-muted); }

/* Pull-to-refresh pill */
.list-ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pulse-toast-bg);
  color: var(--pulse-toast-text);
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear;
}
.list-ptr.is-armed { background: var(--pulse-brand); }

/* Detail: connected items */
.list-deplinks { display: grid; gap: var(--pulse-space-xs); }
.list-deplink {
  display: block;
  width: 100%;
  text-align: left;
  min-height: var(--pulse-touch-target);
  height: auto;
  padding: var(--pulse-space-xs) var(--pulse-space-sm);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  background: var(--pulse-surface-sunken);
  color: var(--pulse-text);
  font: inherit;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
.list-deplink:hover { border-color: var(--pulse-border-strong); background: var(--pulse-surface); }
.list-deplink__phrase {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pulse-text-faint);
  display: block;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.list-cards { display: grid; gap: var(--pulse-space-sm); padding-top: var(--pulse-space-md); }

.list-card {
  display: flex;
  gap: var(--pulse-space-sm);
  align-items: flex-start;
  padding: var(--pulse-space-md);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
  box-shadow: var(--pulse-shadow-1);
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: box-shadow var(--pulse-transition), border-color var(--pulse-transition);
}
.list-card__body { flex: 1; min-width: 0; }

/* The one-tap Sorted circle. A 44px touch target drawing a 26px ring, so the
   tap is easy and the visual stays quiet. */
.list-card__tick {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -9px 0 0 -9px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
}
.list-card__tick::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 2px solid var(--pulse-border-strong);
  border-radius: 50%;
  transition: border-color var(--pulse-transition), background var(--pulse-transition);
}
.list-card__tick:hover::before {
  border-color: var(--pulse-success);
  background: color-mix(in srgb, var(--pulse-success) 12%, var(--pulse-surface));
}
.list-card__tick:focus-visible { outline: 2px solid var(--pulse-focus); outline-offset: -4px; }
.list-card__tick--done {
  display: inline-grid;
  place-items: center;
  color: var(--pulse-success);
  font-weight: 700;
}

/* Whose an item is. Solid and inverted, deliberately unlike the soft tinted
   category pill beside it: a person and a category are different kinds of
   fact, and matching them would make the row read as two of the same tag. */
.list-who {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--_who, var(--list-who-both));
  color: var(--pulse-text-invert);
}

/* "New since you last looked" */
.list-new {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pulse-accent-strong);
  background: var(--pulse-accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.list-new-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pulse-accent);
  margin-right: 6px;
  vertical-align: 1px;
}

/* Dependency lines on a card */
.list-dep {
  margin-top: var(--pulse-space-2xs);
  font-size: 0.8rem;
  color: var(--pulse-text-faint);
  display: flex;
  align-items: center;
  gap: 5px;
}
.list-dep--holds { color: var(--pulse-warning); font-weight: 600; }
.list-dep wa-icon { font-size: 0.75rem; }

/* Finished items folded behind one line */
.list-done-tuck { margin-top: var(--pulse-space-md); }
.list-done-tuck summary {
  cursor: pointer;
  min-height: var(--pulse-touch-target);
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--pulse-text-muted);
}
.list-done-tuck summary:hover { color: var(--pulse-text); }
.list-done-tuck .list-cards { padding-top: var(--pulse-space-xs); }
.list-card:hover { box-shadow: var(--pulse-shadow-2); border-color: var(--pulse-border-strong); }
.list-card:focus-visible { outline: 2px solid var(--pulse-focus); outline-offset: 2px; }
.list-card--done { opacity: 0.62; }
.list-card--done .list-card__title { text-decoration: line-through; }

/* His own items read differently at a glance, so a private one is never
   mistaken for something she has been asked for. */
.list-card--mine-only {
  border-style: dashed;
  background: color-mix(in srgb, var(--pulse-surface-sunken) 45%, var(--pulse-surface));
}

.list-card__top {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--pulse-space-xs);
}
.list-card__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pulse-text);
}
.list-card__why {
  margin: var(--pulse-space-2xs) 0 0;
  color: var(--pulse-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.list-card__foot {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  flex-wrap: wrap;
  margin-top: var(--pulse-space-sm);
}
.list-meta { font-size: 0.8rem; color: var(--pulse-text-faint); }

/* Timing. Amber for near or past, never red: a late item is a nudge, not an
   emergency, and red would undo the whole point of this board. */
.list-when {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}
.list-when--soft { color: var(--pulse-text-faint); }
.list-when--near { color: var(--pulse-warning); }
.list-when--late { color: var(--pulse-warning); }

/* --------------------------------------------------------------------------
   Board view
   -------------------------------------------------------------------------- */
.list-board { padding-top: var(--pulse-space-md); }
.list-kcard { cursor: pointer; }
.list-kcard .list-card__title { font-size: 0.92rem; }

/* Desktop board, Trello rules: the columns share the full width instead of
   sitting at their fixed 290px against a sea of empty page. Folded strips
   keep their slim 44px; the phone keeps the swipe-scroll of fixed columns. */
@media (min-width: 700px) {
  .list-board .pulse-column:not(.pulse-column--folded) {
    flex: 1 1 0;
    max-width: 420px;
  }
}

/* --------------------------------------------------------------------------
   Table view
   -------------------------------------------------------------------------- */
.list-table-wrap { margin-top: var(--pulse-space-md); }
/* Header cells are the sort control. The button resets the vendored form
   styling and inherits the pulse-table header typography. */
.list-th {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  min-height: var(--pulse-touch-target);
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.list-th:hover { color: var(--pulse-text); }
.list-table__what { font-weight: 600; }
.list-row { cursor: pointer; }
.list-row:hover td { background: color-mix(in srgb, var(--pulse-brand) 6%, var(--pulse-surface)); }
.list-row:focus-visible { outline: 2px solid var(--pulse-focus); outline-offset: -2px; }
.list-row--done { opacity: 0.62; }
.list-row--done .list-table__what { text-decoration: line-through; }
/* On a phone the table keeps its three load-bearing columns: what, whose
   turn, when. Category, notes and added re-appear with room. */
@media (max-width: 759px) {
  .list-table__hide-sm { display: none; }
}

/* --------------------------------------------------------------------------
   Detail
   -------------------------------------------------------------------------- */
.list-detail { padding-top: var(--pulse-space-md); }
.list-detail__head { margin-bottom: var(--pulse-space-md); }
.list-detail__title {
  margin: var(--pulse-space-2xs) 0 0;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--pulse-text);
  overflow-wrap: anywhere;
}

.list-block {
  padding: var(--pulse-space-md);
  margin-bottom: var(--pulse-space-sm);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
}
.list-block--why {
  background: var(--pulse-brand-soft);
  border-color: color-mix(in srgb, var(--pulse-brand) 22%, var(--pulse-surface));
}
.list-block__head {
  margin: 0 0 var(--pulse-space-xs);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pulse-text-faint);
}
.list-block__body {
  margin: 0;
  line-height: 1.6;
  color: var(--pulse-text);
  overflow-wrap: anywhere;
}

/* Stage and person: full-width targets on a phone, side by side once there is
   room. Both blocks reuse this grid, so it has to hold three buttons and five
   without either wrapping to a stripe of unreadable stubs. */
.list-status { display: grid; gap: var(--pulse-space-xs); }
.list-status__btn {
  --_status: var(--pulse-text-muted);
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-md);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  background: var(--pulse-surface);
  color: var(--pulse-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--pulse-transition), color var(--pulse-transition), border-color var(--pulse-transition);
}
.list-status__btn:hover { border-color: var(--pulse-border-strong); }
.list-status__btn.is-active {
  color: color-mix(in srgb, var(--_status) 80%, var(--pulse-text));
  background: color-mix(in srgb, var(--_status) 15%, var(--pulse-surface));
  border-color: color-mix(in srgb, var(--_status) 48%, var(--pulse-surface));
}

/* --------------------------------------------------------------------------
   Notes
   -------------------------------------------------------------------------- */
.list-notes { display: grid; gap: var(--pulse-space-xs); }
.list-note {
  position: relative;
  padding: var(--pulse-space-sm) var(--pulse-space-md);
  padding-right: calc(var(--pulse-space-md) + 20px);
  background: var(--pulse-surface-sunken);
  border-radius: var(--pulse-radius-m);
  overflow-wrap: anywhere;
}
.list-note--mine { background: var(--pulse-brand-soft); }
.list-note__meta { font-size: 0.75rem; color: var(--pulse-text-faint); margin-bottom: 2px; }
.list-note__body { line-height: 1.5; white-space: pre-wrap; }
.list-note__del {
  position: absolute;
  top: 4px; right: 4px;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--pulse-text-faint);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.list-note__del:hover { color: var(--pulse-danger); background: var(--pulse-surface); }
.list-note-empty { margin: 0; color: var(--pulse-text-faint); font-size: 0.9rem; line-height: 1.5; }

.list-noteform { display: flex; gap: var(--pulse-space-xs); margin-top: var(--pulse-space-sm); }
.list-noteform__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--pulse-space-sm);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  background: var(--pulse-surface);
  color: var(--pulse-text);
  font: inherit;
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font-size: 16px;
  resize: vertical;
}
.list-noteform__input:focus-visible { outline: 2px solid var(--pulse-focus); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   Photos
   -------------------------------------------------------------------------- */
.list-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--pulse-space-xs);
}
.list-photos:empty { display: none; }
.list-photo { position: relative; }
.list-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--pulse-radius-m);
  border: 1px solid var(--pulse-border);
  display: block;
  background: var(--pulse-surface-sunken);
  cursor: pointer;
}
/* A button, not a link: attachments are fetched with the bearer token and
   handed over as a blob, so there is no URL to put in an href. */
.list-photo__file {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 1;
  border: 1px dashed var(--pulse-border-strong);
  border-radius: var(--pulse-radius-m);
  background: var(--pulse-surface);
  color: var(--pulse-text-muted);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: none;
  cursor: pointer;
}
.list-photo__del {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: var(--pulse-surface);
  color: var(--pulse-text-muted);
  box-shadow: var(--pulse-shadow-1);
  cursor: pointer;
  line-height: 1;
}
.list-attach { margin-top: var(--pulse-space-sm); display: inline-flex; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-md);
  border-radius: var(--pulse-radius-m);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.list-btn--primary { background: var(--pulse-brand); color: var(--pulse-text-invert); }
.list-btn--primary:hover { background: var(--pulse-brand-strong); }
.list-btn--ghost {
  background: var(--pulse-surface);
  border-color: var(--pulse-border-strong);
  color: var(--pulse-text);
}
.list-btn--quiet { background: none; color: var(--pulse-text-muted); }
.list-btn--quiet:hover { color: var(--pulse-danger); }

.list-owner {
  display: flex;
  gap: var(--pulse-space-sm);
  flex-wrap: wrap;
  padding-top: var(--pulse-space-sm);
}

/* Add button. Sits above the home indicator on iOS. */
.list-fab {
  position: fixed;
  right: var(--pulse-space-md);
  bottom: calc(var(--pulse-space-md) + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: var(--pulse-brand);
  color: var(--pulse-text-invert);
  font-size: 1.8rem;
  line-height: 1;
  box-shadow: var(--pulse-shadow-2);
  cursor: pointer;
  z-index: 10;
}

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */
.list-dialog {
  width: min(560px, calc(100vw - 2 * var(--pulse-space-md)));
  padding: 0;
  border: 0;
  border-radius: var(--pulse-radius-l);
  background: var(--pulse-surface);
  color: var(--pulse-text);
}
.list-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.list-form { display: grid; gap: var(--pulse-space-sm); padding: var(--pulse-space-lg); }
.list-form__head { margin: 0; font-size: 1.15rem; }
.list-form__row { display: grid; gap: var(--pulse-space-sm); }
.list-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pulse-space-sm);
  padding-top: var(--pulse-space-xs);
}
.list-field { display: grid; gap: var(--pulse-space-2xs); }
.list-field > span { font-size: 0.82rem; font-weight: 600; color: var(--pulse-text-muted); }
.list-field input,
.list-field select,
.list-field textarea {
  width: 100%;
  min-height: var(--pulse-touch-target);
  padding: var(--pulse-space-xs) var(--pulse-space-sm);
  border: 1px solid var(--pulse-border-strong);
  border-radius: var(--pulse-radius-m);
  background: var(--pulse-surface);
  color: var(--pulse-text);
  font: inherit;
  font-size: 16px;   /* no iOS zoom on focus */
}
.list-field textarea { resize: vertical; line-height: 1.5; }

/* Checkbox row: the box sits beside its label with the hint under both. */
.list-field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--pulse-space-2xs) var(--pulse-space-xs);
  min-height: var(--pulse-touch-target);
  cursor: pointer;
}
.list-field--check input { width: 20px; height: 20px; accent-color: var(--pulse-accent); }
.list-field--check > span { font-size: 0.82rem; font-weight: 600; color: var(--pulse-text-muted); }
.list-field--check .list-field__hint {
  grid-column: 2;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--pulse-text-faint);
}
.list-field input:focus-visible,
.list-field select:focus-visible,
.list-field textarea:focus-visible { outline: 2px solid var(--pulse-focus); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   Gate (no link, or a dead link)
   -------------------------------------------------------------------------- */
.list-gate {
  padding: var(--pulse-space-xl) var(--pulse-space-md);
  text-align: center;
  color: var(--pulse-text-muted);
  line-height: 1.6;
}
.list-gate h1 { color: var(--pulse-text); font-size: 1.35rem; margin-bottom: var(--pulse-space-sm); }

/* --------------------------------------------------------------------------
   Wider screens
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .list-status { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .list-form__row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .list-head__title { font-size: 1.9rem; }
  .pulse-main { padding-bottom: var(--pulse-space-xl); }
}