:root {
  color-scheme: light dark;
  --bg: #f5f5f2;
  --surface: #ffffff;
  --surface-2: #eceee9;
  --text: #1c1f1b;
  --muted: #5a5f58;
  --border: #6e746b;
  --accent: #2f7d5b;
  --accent-ink: #1f5f43;
  --accent-contrast: #ffffff;
  --match-bg: #e2f0e8;
  --focus: #2f7d5b;
  --toast-bg: #1c1f1b;
  --toast-text: #f5f5f2;
  --toast-border: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131614;
    --surface: #1d211e;
    --surface-2: #252a26;
    --text: #e8ebe6;
    --muted: #aab1a9;
    --border: #8a9288;
    --accent: #5fb88c;
    --accent-ink: #9fe0be;
    --accent-contrast: #0f1411;
    --match-bg: #1b3328;
    --focus: #9fe0be;
    --toast-bg: #2a302b;
    --toast-text: #e8ebe6;
    --toast-border: #8a9288;
  }
}

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.screen {
  max-width: 420px;
  margin: 0 auto;
  padding: 64px 20px;
  text-align: center;
}

.screen p {
  overflow-wrap: anywhere;
}

/* Buttons */

.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Header */

.app-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-name {
  font-size: 1.125rem;
}

.header-top,
.week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* The label takes whatever width is left, so the arrows keep their place as the range text changes. */
.week-nav {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-btn {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  font-size: 1.25rem;
  line-height: 1;
}

.today-btn {
  flex: none;
  min-height: 44px;
  padding: 0 10px;
}

.week-label {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.label-short {
  display: none;
}

@media (min-width: 720px) {
  .app-header {
    flex-direction: row;
    align-items: center;
    gap: 8px 16px;
    padding: 10px max(16px, calc((100% - 1200px) / 2));
  }

  .header-top,
  .week-row {
    display: contents;
  }

  .week-nav {
    flex: none;
  }

  .week-label {
    flex: none;
    width: 26ch;
  }

  .header-actions {
    order: 1;
  }

  .label-long {
    display: inline;
  }
}

@media (max-width: 719px) {
  .label-long {
    display: none;
  }

  .label-short {
    display: inline;
  }
}

.menu-wrap {
  position: relative;
}

.me-button {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  display: grid;
  min-width: 200px;
  padding: 6px;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}

.menu-item {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.menu-hint {
  margin: 0;
  padding: 6px 12px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.menu-item:hover {
  background: var(--surface-2);
}

/* Week */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: min(calc(100% - 32px), 1200px);
  margin: 0 auto;
  padding: 12px 0 32px;
}

.empty-week {
  margin: 0 0 12px;
  color: var(--muted);
}

.week {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .week {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.day-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.day-card.past {
  background: var(--bg);
  color: var(--muted);
}

.day-card.past .slot:not([data-match="true"]) {
  background: transparent;
}

.day-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1rem;
  font-weight: 400;
}

.dow {
  font-weight: 600;
}

.dom {
  color: var(--muted);
}

.today-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.75rem;
  font-weight: 600;
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
}

.slot[data-match="true"] {
  padding: 7px 9px;
  border: 2px solid var(--accent);
  background: var(--match-bg);
}

.slot-top {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.match-count {
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
}

.my-status {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.my-status.unmarked {
  font-weight: 400;
  color: var(--muted);
}

.my-note,
.person-note {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.my-note {
  font-size: 0.8125rem;
}

.open-line {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-ink);
  overflow-wrap: anywhere;
}

.people {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.8125rem;
}

.person {
  display: block;
  min-width: 0;
}

.person-line {
  display: block;
  overflow-wrap: anywhere;
}

.person-name {
  font-weight: 600;
}

.person-note {
  font-size: 0.75rem;
}

/* Dialogs */

dialog.sheet {
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto 0 0;
  padding: 0;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-radius: 16px 16px 0 0;
}

@media (min-width: 720px) {
  dialog.sheet {
    width: min(480px, calc(100% - 32px));
    margin: auto;
    border-radius: 16px;
  }
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.sheet-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
}

.status-list {
  display: grid;
  gap: 8px;
}

.status-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
}

.status-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--match-bg);
  font-weight: 600;
}

.status-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.check {
  flex: none;
  color: var(--accent-ink);
}

.status-option:not([aria-pressed="true"]) .check {
  visibility: hidden;
}

.field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.field label,
.also h3 {
  color: var(--muted);
  font-size: 0.875rem;
}

.field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-overflow: ellipsis;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: right;
}

.field-hint[hidden] {
  display: none;
}

.field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.actions > [data-testid="clear-mark"] {
  margin-right: auto;
}

/* Keeps the primary action first in tab order while it stays on the right. */
.actions-primary-first {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.invite-result {
  display: grid;
  gap: 12px;
}

.also {
  display: grid;
  gap: 8px;
}

.also-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.also-list li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}

.also-list .who {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.also-list .also-status,
.also-list .also-note {
  overflow-wrap: anywhere;
}

.also-list .also-note {
  color: var(--muted);
}

.also-empty {
  margin: 0;
  color: var(--muted);
}

/* Toast */

.toast {
  inset: auto auto 16px 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--toast-border);
  border-radius: 10px;
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  overflow-wrap: anywhere;
}

/* Board design (chosen 2026-10-26): purple aubergine ground, mint for matches, the own open mark and Save; Jost. Layered over the base rules above. */
/* The well-kept board: the week is a board of flat tiles fitted edge to edge, one tile per day part and one per day heading.
   A match is the one mint tile; the viewer's own open mark is a mint edge on its tile. Aubergine ground, Jost throughout. */

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Dark is the main scheme. Tiles are one mid-purple step above the aubergine ground (3.6:1), so every tile is identifiable without an outline. */
:root {
  color-scheme: dark;
  --bg: #1c1230;
  --surface: #2a1f42;
  --surface-2: #7866a6;
  --tile: #7866a6;
  --on-tile: #fbf9ff;
  --text: #fbf9ff;
  --muted: #bcaed9;
  --border: #8c7bb5;
  --accent: #7ef5cc;
  --accent-ink: #7ef5cc;
  --accent-contrast: #1c1230;
  --edge: #7ef5cc;
  --match-bg: #7ef5cc;
  --focus: #fbf9ff;
  --pressed: #fbf9ff;
  --pressed-ink: #1c1230;
  --today: #fbf9ff;
  --today-ink: #1c1230;
  --toast-bg: #7866a6;
  --toast-text: #fbf9ff;
  --toast-border: transparent;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --step-display: clamp(2.5rem, 1.3rem + 3.2vw, 4rem);
  --gutter: 8px;
}

/* Light is the same board on a lavender ground. Tiles are deep purple (5.9:1 against the ground); the match is still mint, with an ink edge because mint is only 1.0:1 against lavender. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #e6dcf4;
    --surface: #f4f0fb;
    --surface-2: #5b4590;
    --tile: #5b4590;
    --on-tile: #fbf9ff;
    --text: #1c1230;
    --muted: #4f4370;
    --border: #6a5799;
    --accent: #7ef5cc;
    --accent-ink: #1c1230;
    --accent-contrast: #1c1230;
    --edge: #1c1230;
    --match-bg: #7ef5cc;
    --focus: #1c1230;
    --pressed: #1c1230;
    --pressed-ink: #fbf9ff;
    --today: #1c1230;
    --today-ink: #fbf9ff;
    --toast-bg: #5b4590;
    --toast-text: #fbf9ff;
  }
}

html {
  background: var(--bg);
}

body {
  font-family: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  background: var(--bg);
  color: var(--text);
}

button,
input {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Signed-out, invalid invite, offline and loading: each is a board of two tiles, the name and the message. */

.screen {
  display: grid;
  gap: 8px;
  align-content: start;
  max-width: none;
  margin: 0;
  padding: 8px;
  text-align: left;
  min-height: 100dvh;
}

.screen > h1 {
  display: flex;
  align-items: flex-end;
  min-height: 46dvh;
  padding: 24px;
  background: var(--surface);
  font-size: var(--step-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.screen > p {
  margin: 0;
  padding: 20px 24px;
  background: var(--surface);
  font-size: var(--step-lead);
  line-height: 1.3;
}

p.screen#loading {
  min-height: 0;
  padding: 20px 24px;
  background: var(--surface);
  font-size: var(--step-lead);
}

.screen .btn {
  justify-self: start;
}

/* Buttons: one square shape, one tile fill, ink text. Primary is the mint Save. */

.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--tile);
  color: var(--on-tile);
  font-size: var(--step-body);
  font-weight: 500;
  cursor: pointer;
}

.btn-primary {
  border-color: var(--edge);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Header: a row of tiles. The name is a surface tile at display size; the week and its arrows are tiles beside it. */

.app-header {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: var(--gutter);
  background: var(--bg);
  border-bottom: 0;
}

.header-top,
.week-row {
  gap: 8px;
}

.app-name {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  min-height: 56px;
  margin: 0;
  padding: 10px 16px 8px;
  background: var(--surface);
  font-size: var(--step-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.week-nav {
  gap: 8px;
}

.nav-btn {
  min-width: 44px;
  padding: 0 10px;
  font-size: var(--step-lead);
  line-height: 1;
}

.week-label,
.btn {
  white-space: nowrap;
}

.week-label {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 14px;
  background: var(--surface);
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
}

.today-btn {
  min-height: 44px;
  padding: 0 16px;
}

.header-actions {
  gap: 8px;
}

.me-button {
  max-width: 14ch;
}

.menu {
  top: calc(100% + 8px);
  min-width: 240px;
  padding: 8px;
  gap: 4px;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
}

.menu-item {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 0;
  font-size: var(--step-body);
}

.menu-item:hover {
  background: var(--tile);
  color: var(--on-tile);
}

.menu-hint {
  color: var(--muted);
  font-size: var(--step-small);
  padding: 8px 14px;
}

/* Week: a board of day columns. Each column is a heading tile over two slot tiles. */

main {
  width: 100%;
  margin: 0;
  padding: var(--gutter);
}

.empty-week {
  margin: 0 0 var(--gutter);
  padding: 16px 20px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--step-lead);
  line-height: 1.3;
}

.week {
  gap: var(--gutter);
}

@media (min-width: 720px) {
  .app-header {
    flex-direction: row;
    align-items: stretch;
    gap: var(--gutter);
    padding: var(--gutter);
  }

  .header-top,
  .week-row {
    display: contents;
  }

  .app-name {
    order: 0;
  }

  .week-nav {
    order: 2;
    flex: 1 1 auto;
  }

  .today-btn {
    order: 3;
  }

  .header-actions {
    order: 4;
  }

  .week-label {
    width: auto;
    flex: 1 1 auto;
    font-size: var(--step-lead);
  }

  main {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .week {
    flex: 1 1 auto;
    align-items: stretch;
  }
}

@media (min-width: 1100px) {
  .week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .week-label {
    font-size: var(--step-head);
  }
}

/* Four columns hold seven days: the last day takes the spare column so the board has no empty cell. The header shortens its action label to fit beside the week. */
@media (min-width: 720px) and (max-width: 1099px) {
  .day-card:last-child {
    grid-column: span 2;
  }

  .app-name {
    font-size: var(--step-head);
  }

  .label-long {
    display: none;
  }

  .label-short {
    display: inline;
  }
}

.day-card {
  gap: var(--gutter);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.day-card.past {
  background: transparent;
  color: var(--muted);
}

.day-head {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--surface);
  font-size: var(--step-lead);
  font-weight: 400;
  line-height: 1.1;
}

.dow {
  font-weight: 700;
}

.dom {
  color: var(--text);
  font-size: var(--step-body);
  font-weight: 500;
}

.day-head:has(.today-badge) {
  background: var(--today);
  color: var(--today-ink);
}

.day-head:has(.today-badge) .dom {
  color: var(--today-ink);
}

.today-badge {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1;
}

.day-card.past .day-head {
  background: transparent;
  color: var(--muted);
}

.day-card.past .dom {
  color: var(--muted);
}

/* Slots are the tiles. Own open is a mint edge on the leading side; a match is the one solid mint tile. */

.slot {
  position: relative;
  flex: 1 1 0;
  gap: 6px;
  min-height: min-content;
  padding: 14px 16px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--tile);
  color: var(--on-tile);
  font-size: var(--step-small);
  line-height: 1.35;
}

.slot[data-match="true"] {
  padding: 14px 16px;
  border: 2px solid var(--edge);
  background: var(--match-bg);
  color: var(--accent-contrast);
}

.slot[data-mine="open"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--accent);
}

.slot[data-match="true"][data-mine="open"]::before {
  background: var(--accent-contrast);
}

/* Past days keep their slots as outlined tiles on the ground, so they read as not-now without a tone of their own. */
.day-card.past .slot:not([data-match="true"]) {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.slot-top {
  color: inherit;
  font-size: var(--step-small);
  font-weight: 500;
}

.match-count {
  color: inherit;
  font-size: var(--step-small);
  font-weight: 700;
}

.my-status {
  color: inherit;
  font-size: var(--step-body);
  font-weight: 600;
  line-height: 1.2;
}

.my-status.unmarked {
  color: inherit;
  font-size: var(--step-lead);
  font-weight: 500;
}

.my-note,
.person-note {
  color: inherit;
  font-size: var(--step-small);
}

.open-line {
  color: inherit;
  font-size: var(--step-lead);
  font-weight: 700;
  line-height: 1.1;
}

.people {
  margin-top: auto;
  padding-top: 6px;
  gap: 4px;
  font-size: var(--step-small);
}

.person-line {
  color: inherit;
}

.person-name {
  font-weight: 700;
}

/* Phone: each day is one row of three tiles: the heading, the day and the evening. */
@media (max-width: 719px) {
  .week {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-card {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .day-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    padding: 10px 12px;
  }

  .today-badge {
    margin: 4px 0 0;
  }

  .slot {
    min-height: 112px;
    padding: 10px 12px;
  }

  .slot[data-match="true"] {
    padding: 10px 12px;
  }

  .open-line {
    font-size: var(--step-body);
  }

  .week-label {
    font-size: var(--step-body);
  }

  .app-name {
    min-height: 0;
    padding: 8px 12px 6px;
  }

  .actions > .btn {
    flex: 1 1 0;
  }

  .actions > [data-testid="clear-mark"] {
    margin-right: 0;
  }

  .actions > .btn-primary {
    flex-basis: 100%;
  }
}

/* Dialogs: square sheets on the surface step. Status is a column of tiles; the pressed status inverts. */

dialog.sheet {
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.35);
}

@media (min-width: 720px) {
  dialog.sheet {
    width: min(560px, calc(100% - 32px));
    border-radius: 0;
  }
}

dialog::backdrop {
  background: rgb(14 8 24 / 0.7);
}

.sheet-body {
  gap: 12px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

.sheet-body > h2 {
  font-size: var(--step-head);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.status-list {
  gap: 8px;
}

.status-option {
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--tile);
  color: var(--on-tile);
  font-size: var(--step-body);
  font-weight: 500;
}

.status-option[aria-pressed="true"] {
  background: var(--pressed);
  color: var(--pressed-ink);
  font-weight: 700;
}

.status-option[aria-pressed="true"] .check {
  color: var(--pressed-ink);
}

.check {
  color: inherit;
  font-weight: 700;
}

.field label,
.also h3 {
  color: var(--muted);
  font-size: var(--step-small);
  font-weight: 500;
}

.also h3 {
  color: var(--text);
  font-size: var(--step-lead);
  font-weight: 700;
}

.field input {
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--step-body);
}

.field input::placeholder {
  color: var(--muted);
}

.field-hint {
  color: var(--muted);
  font-size: var(--step-small);
}

.actions {
  gap: 8px;
  flex-wrap: wrap;
}

.also {
  gap: 8px;
}

.also-list {
  gap: 8px;
}

.also-list li {
  padding: 10px 12px;
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--step-body);
}

.also-list .also-note,
.also-empty {
  color: var(--muted);
  font-size: var(--step-small);
}

/* Toast: a floating tile. */

.toast {
  inset: auto auto 16px 50%;
  transform: translateX(-50%);
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: var(--toast-bg);
  color: var(--toast-text);
  font-size: var(--step-body);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
}

/* Press feedback only; the editor sheet's entrance is the one larger move, and reduced motion drops it. */

.btn:active,
.slot:active,
.status-option:active,
.menu-item:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] {
    animation: sheet-in 180ms ease-out both;
  }
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}