/* ============================================================
   COMMAND DECK — components
   Every interaction state is designed: hover, focus-visible,
   active, disabled, loading, empty, success, error.
   ============================================================ */

/* ---------------- Cards ---------------- */

.card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--elev-1);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: var(--sp-5) var(--sp-5) 0; margin-bottom: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-clock { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-clock { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- The clock card (the hero surface) ---------------- */

.clock-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-wash), transparent 65%),
    var(--bg-surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  box-shadow: var(--elev-2);
  position: relative;
  overflow: hidden;
}

.clock-face {
  font-size: var(--text-clock);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
}
.clock-suffix {
  font-size: 0.34em;
  color: var(--text-secondary);
  margin-left: 0.15em;
  letter-spacing: 0;
}
.clock-date {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--sp-2);
}

.clock-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
}
.clock-state[data-state="in"] {
  background: var(--status-ontime-bg);
  color: var(--status-ontime);
  border-color: var(--accent-line);
}
.clock-state[data-state="break"] {
  background: var(--status-late-bg);
  color: var(--status-late);
  border-color: rgba(255, 176, 32, 0.35);
}
.clock-state[data-state="out"],
.clock-state[data-state="idle"] {
  background: var(--status-neutral-bg);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}

.clock-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

.clock-rail {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.rail-item { text-align: center; min-width: 72px; }
.rail-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.rail-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: center;
  transition:
    background var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    transform var(--d-instant) var(--e-out);
}
.btn:hover { background: var(--bg-surface-3); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover { background: var(--bg-surface-2); border-color: var(--border-default); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  font-weight: var(--weight-bold);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

.btn-danger { color: var(--status-absent); border-color: rgba(255, 92, 92, 0.35); }
.btn-danger:hover {
  background: var(--status-absent-bg);
  border-color: var(--status-absent);
}

.btn { min-height: var(--control-h); }
.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); }

/* A button mid-submit: the label is replaced, so nothing looks frozen. */
.btn[data-busy="true"] { pointer-events: none; opacity: 0.7; }
.btn[data-busy="true"] .btn-label { visibility: hidden; }
.btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  animation: spin var(--d-spin) linear infinite;
}
.btn { position: relative; }

/* ---------------- Status chips ---------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip[data-tone="ontime"]  { background: var(--status-ontime-bg);  color: var(--status-ontime); }
.chip[data-tone="late"]    { background: var(--status-late-bg);    color: var(--status-late); }
.chip[data-tone="absent"]  { background: var(--status-absent-bg);  color: var(--status-absent); }
.chip[data-tone="leave"]   { background: var(--status-leave-bg);   color: var(--status-leave); }
.chip[data-tone="holiday"] { background: var(--status-holiday-bg); color: var(--status-holiday); }
.chip[data-tone="neutral"] { background: var(--status-neutral-bg); color: var(--text-secondary); }

.chip-role {
  background: var(--bg-surface-3);
  color: var(--text-secondary);
  border-color: var(--border-default);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.65rem;
}
.chip-role[data-role="owner"] { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-line); }
.chip-role[data-role="admin"] { background: var(--status-leave-bg); color: var(--status-leave); }

/* ---------------- Stats ---------------- */

.stat {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}
.stat-value[data-tone="ontime"] { color: var(--status-ontime); }
.stat-value[data-tone="late"]   { color: var(--status-late); }
.stat-value[data-tone="absent"] { color: var(--status-absent); }
.stat-hint { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------------- Team board ---------------- */

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.board-name { font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.board-count {
  font-family: var(--font-num);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.board-count .of { color: var(--text-muted); font-size: 0.6em; }

/* Discrete presence dots. No inline styles, so the strict CSP holds. */
.dots { display: flex; gap: 5px; margin-bottom: var(--sp-4); }
.dot {
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
}
.dot[data-on="1"] { background: var(--accent); border-color: var(--accent); }
.dot[data-on="late"] { background: var(--status-late); border-color: var(--status-late); }

.roster { display: flex; flex-direction: column; gap: var(--sp-1); }
.roster-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--d-fast) var(--e-out);
}
.roster-row:hover { background: var(--bg-surface-2); }
.roster-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.roster-time {
  font-family: var(--font-num);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ---------------- Avatar ---------------- */

.avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
}
.avatar-fallback {
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}
.avatar-lg { width: 96px; height: 96px; font-size: var(--text-xl); }
.avatar-sm { width: 26px; height: 26px; font-size: 0.65rem; }

/* ---------------- Tables ---------------- */

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 640px;
}
table.data th {
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--weight-bold);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  background: var(--bg-surface-1);
  position: sticky;
  top: 0;
}
table.data td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
table.data tbody tr { transition: background var(--d-fast) var(--e-out); }
table.data tbody tr:hover { background: var(--bg-surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data .num { text-align: right; white-space: nowrap; }
table.data .muted { color: var(--text-muted); }

/* ---------------- Forms ---------------- */

.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.input, select.input, textarea.input {
  width: 100%;
  padding: var(--sp-3);
  line-height: 1.4;
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  transition:
    border-color var(--d-fast) var(--e-out),
    background var(--d-fast) var(--e-out);
}
.input::placeholder { color: var(--text-muted); }
.input:hover { border-color: var(--border-strong); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-surface-1);
  box-shadow: var(--focus-ring);
}
.input:disabled { opacity: 0.5; cursor: not-allowed; }
/* Browsers give these different intrinsic heights: a date input renders
   49px where a select renders 47px. A minimum cannot remove a difference,
   so the height is fixed outright, which keeps a row of mixed controls on
   one line. Box-sizing is border-box, so padding and border are included. */
input.input, select.input { height: var(--control-h); }
textarea.input { resize: vertical; min-height: 84px; line-height: var(--leading-base); }

select.input {
  appearance: none;
  cursor: pointer;
  padding-right: var(--sp-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right var(--sp-4) center, right var(--sp-3) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field-hint { font-size: var(--text-xs); color: var(--text-muted); text-transform: none; letter-spacing: 0; }

.checks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  cursor: pointer;
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.check:hover { border-color: var(--border-strong); }
.check input { accent-color: var(--accent); cursor: pointer; }
.check:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

.toolbar {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.toolbar .field { margin-bottom: 0; }

/* A hint belongs under the whole row, not inside one field. Fields in a
   toolbar align on their bottom edge, so a hint inside one becomes that edge
   and lifts its own input out of line; squeezing it into a narrow flex column
   also makes it wrap and clip. Use .toolbar-note beneath the form instead. */
.toolbar-note {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---------------- Alerts and flash ---------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  font-size: var(--text-sm);
}
.alert[data-tone="success"] {
  background: var(--status-ontime-bg);
  border-color: var(--accent-line);
  color: var(--status-ontime);
}
.alert[data-tone="error"] {
  background: var(--status-absent-bg);
  border-color: rgba(255, 92, 92, 0.35);
  color: var(--status-absent);
}
.alert[data-tone="info"] {
  background: var(--status-holiday-bg);
  border-color: rgba(78, 212, 242, 0.3);
  color: var(--status-holiday);
}
/* Needs attention, but nothing has gone wrong — the same amber the app
   already uses for lateness, so the meaning is consistent across screens. */
.alert[data-tone="warn"] {
  background: var(--status-late-bg);
  border-color: rgba(255, 176, 32, 0.35);
  color: var(--status-late);
}
.alert-mark { font-weight: var(--weight-bold); flex-shrink: 0; }

/* ---------------- Empty state ---------------- */

.empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--text-muted);
}
.empty-mark {
  font-family: var(--font-num);
  font-size: var(--text-2xl);
  color: var(--border-strong);
  margin-bottom: var(--sp-3);
}
.empty-title {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  margin-bottom: var(--sp-1);
}
.empty-hint { font-size: var(--text-sm); }

/* ---------------- Details disclosure ---------------- */

details.panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface-1);
  overflow: hidden;
}
details.panel + details.panel { margin-top: var(--sp-2); }
details.panel > summary {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  transition: background var(--d-fast) var(--e-out);
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary:hover { background: var(--bg-surface-2); }
details.panel > summary::after {
  content: "+";
  font-family: var(--font-num);
  color: var(--text-muted);
  transition: transform var(--d-base) var(--e-out);
}
details.panel[open] > summary::after { transform: rotate(45deg); }
details.panel > .panel-body { padding: var(--sp-4); border-top: 1px solid var(--border-subtle); }

/* ---------------- Pagination ---------------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---------------- Utilities ---------------- */

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
.mono { font-family: var(--font-num); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.divider { height: 1px; background: var(--border-subtle); border: none; margin: var(--sp-4) 0; }

/* ---------------- Clock-in camera (opt-in per team) ---------------- */

.camera-panel {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  animation: rise var(--d-base) var(--e-out) both;
}
.camera-panel[hidden] { display: none; }

.camera-view {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-inset);
  object-fit: cover;
  transform: scaleX(-1); /* mirror, so it reads like a mirror not a photo */
}

/* ---------------- Clock step buttons ----------------
   The four steps of a day sit in one row and never move. A step that is not
   available right now stays in place, dimmed, rather than disappearing — so
   the row is a picture of the day rather than a shifting set of options. */

.clock-steps .btn {
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.btn-note {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* A break already taken reads as done, not as broken. Slightly less dimmed
   than a merely locked step, and with a settled edge instead of a flat one. */
.clock-steps .btn[data-step-state="used"]:disabled {
  opacity: 0.72;
  background: var(--bg-surface-1);
  border-style: dashed;
}

.rail-value[data-tone="late"] { color: var(--status-late); }

/* ---------------- Confirmation dialog ---------------- */

.confirm-dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  box-shadow: var(--elev-3);
  padding: 0;
  max-width: 30rem;
  width: calc(100% - var(--sp-8));
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.confirm-body { padding: var(--sp-6); }

.confirm-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--sp-3);
}

.confirm-text {
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
  line-height: 1.55;
}

.confirm-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* The held-shut confirm button must not look merely dim — it looks like a
   button that is counting, so the wait reads as deliberate rather than as a
   page that has failed to load. */
.confirm-actions .btn:disabled {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* Two small forms side by side inside a table cell. */
.row-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Four steps, one row. The default large padding pushed the fourth onto a
   second line, which broke the read of the day as a single sequence. */
.clock-steps .btn-lg {
  padding: var(--sp-3) var(--sp-5);
}

@media (max-width: 560px) {
  /* Two by two rather than a single tall column, so the sequence still reads
     left to right and the card does not become a ladder on a phone. */
  .clock-steps { display: grid; grid-template-columns: 1fr 1fr; }
  .clock-steps form { display: contents; }
  .clock-steps .btn { width: 100%; }
}

/* The overtime question, which appears above the clock the day after somebody
   worked late. Given the accent border so it reads as something asked OF the
   person, not another panel of numbers. */
.ot-prompt {
  border-color: var(--accent-line);
  background: var(--status-ontime-bg);
}
.ot-prompt .field-hint { color: var(--text-secondary); }

/* The two answers to the overtime question, as a pair. */
.ot-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* ---------------- Inbox, notices and submissions ---------------- */

/* An unread row has to be findable at a glance without shouting. A left rule
   plus a slightly lifted background does it; colour alone would not survive
   a monochrome screen or a colour-blind reader. */
.data tr.row-unread > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.data tr.row-unread > td { background: var(--bg-surface-2); }
.data tr.row-unread a { font-weight: var(--weight-bold); }

/* A letter is prose, so it gets reading measure and paragraph rhythm rather
   than the tight leading used for dense tables. */
.prose {
  max-width: 68ch;
  margin-top: var(--sp-4);
  color: var(--text-primary);
  line-height: 1.65;
}
.prose p + p { margin-top: var(--sp-4); }

/* Proof images. Fixed height, natural width: screenshots are all sorts of
   shapes and squashing them to squares hides what they are proving. */
.thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.thumb-strip:empty { display: none; }
.thumb {
  height: 96px;
  width: auto;
  max-width: 200px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  transition: transform var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.thumb-strip a:hover .thumb,
.thumb-strip a:focus-visible .thumb {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.detail-list { margin-top: var(--sp-4); display: grid; gap: var(--sp-4); }
.detail-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.detail-row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-row dt { color: var(--text-secondary); font-weight: var(--weight-bold); }
.detail-row dd { word-break: break-word; }

.plain-list { margin: var(--sp-3) 0; padding-left: var(--sp-5); }
.plain-list li { margin-bottom: var(--sp-1); }

/* Forms that are a grid of fields rather than a single column. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: end;
  margin-top: var(--sp-4);
}
.form-grid .field-wide { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; gap: var(--sp-3); }
.field-actions { display: flex; align-items: flex-end; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

.block { display: block; }

/* ---------------- Weekday checkboxes ---------------- */

/* The whole pill is the hit target, not just the 13px box — these get tapped
   on a phone, and a checkbox alone is well under the comfortable minimum. */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}
.checkbox:hover { border-color: var(--border-strong); }
.checkbox:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.checkbox:has(input:focus-visible) { outline: var(--focus-ring); }
.checkbox input { accent-color: var(--accent); width: 16px; height: 16px; }
.checkbox span { font-size: var(--text-sm); }