/* ------------------------------------------------------------------
   Wheelhouse app patterns
   Load after wheelhouse.css. Everything here is built from the site's
   tokens and type classes; nothing introduces a new colour, face or
   radius except where noted. See README "App patterns".
   ------------------------------------------------------------------ */

:root {
  /* the only two semantic colours: the two ends of Gradient 1 */
  --yes: #96e02a;
  --no: #fe5343;
  --warn: #fca725;   /* the gradient's middle, for "needs attention" */
}

/* ---------- page head for tools: Heading size, no lede, tighter ---------- */
.page-head--app { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-3); }
.page-head--app.section { padding-block: calc(var(--s-section) * 0.6); }
.page-head--app h1 { font-size: var(--t-heading); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; }
@media (max-width: 720px) { .page-head--app { grid-template-columns: 1fr; align-items: start; gap: var(--s-2); } }

/* ---------- a branded block (the MHMH hero): same type and spacing, its own paper and ink ---------- */
/* Set the three tokens in the app's stylesheet, e.g. .block-brand { --brand-paper: #f4c6d8; --brand-ink: #111; }.
   The gradient is not used inside a branded block; a photo may fill the right column like the Company hero. */
.block-brand {
  --paper: var(--brand-paper, #f9f9f9); --ink: var(--brand-ink, #111111);
  --muted: color-mix(in srgb, var(--ink) 72%, transparent);
  --hairline: color-mix(in srgb, var(--ink) 12%, transparent);
  --hairline-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  background: var(--paper); color: var(--ink);
}
.block-brand .hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-5) var(--s-7); align-items: center; }
.block-brand .hero-split img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) { .block-brand .hero-split { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---------- small actions: a row of quiet controls ---------- */
/* Label type in a hairline pill. Quiet by default; --primary fills Ink; --yes / --no colour only the outline and text
   until hover, when they fill. Use for pass / reject / vote / remove. The rounded gradient button stays for one primary
   call to action per page; button simple stays for navigation. */
.btn-s {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5rem 0.9rem;
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-s:hover, .btn-s:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--paper); outline: none; }
.btn-s:active { transform: scale(0.97); }
.btn-s--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-s--primary:hover, .btn-s--primary:focus-visible { background: transparent; color: var(--ink); }
.btn-s--yes { color: var(--ink); border-color: var(--yes); }
.btn-s--yes:hover, .btn-s--yes:focus-visible, .btn-s--yes[aria-pressed="true"] { background: var(--yes); border-color: var(--yes); color: #111; }
.btn-s--no { color: var(--ink); border-color: var(--no); }
.btn-s--no:hover, .btn-s--no:focus-visible, .btn-s--no[aria-pressed="true"] { background: var(--no); border-color: var(--no); color: #111; }
.btn-s[disabled] { opacity: 0.4; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.actions .spacer { flex: 1; }

/* ---------- status badge ---------- */
/* Label type, hairline pill, never coloured except the two warnings, which use the gradient's middle. */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.3em 0.7em;
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  color: var(--muted); border: 1px solid var(--hairline-strong); border-radius: 999px;
  white-space: nowrap;
}
.badge--ink { color: var(--paper); background: var(--ink); border-color: var(--ink); }   /* the state that matters most on the row, e.g. "Booked" */
.badge--warn { color: var(--ink); border-color: var(--warn); }                            /* "horizontal", "processing" */
.badge--yes { color: var(--ink); border-color: var(--yes); }
.badge--no { color: var(--ink); border-color: var(--no); }

/* ---------- vote dots ---------- */
.dots { display: inline-flex; gap: 0.35rem; align-items: center; }
.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1px solid var(--hairline-strong); background: transparent; }
.dot--up { background: var(--yes); border-color: var(--yes); }
.dot--down { background: var(--no); border-color: var(--no); }
.dot-list { display: grid; gap: 0.35rem; font-size: var(--t-small); color: var(--muted); }
.dot-list li { display: flex; align-items: center; gap: 0.6em; }

/* ---------- tabs and filters ---------- */
.tabs { display: flex; gap: var(--s-4); border-bottom: 1px solid var(--hairline); }
.tabs a, .tabs button { padding: 0.75rem 0; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tabs a > span, .tabs button > span { /* the site underline draws under the words */ }
.tabs .is-active { color: var(--ink); }
/* the site underline: give the word span the classes ul (draws on hover) and is-on when active */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem var(--s-3); align-items: center; }
.choices span .count { display: inline; border: 0; padding: 0; margin-left: 0.5em; color: var(--muted); letter-spacing: 0; background: transparent; }   /* the count sits inside the chip, not as a second box */
.choices input:checked + span .count { color: inherit; opacity: 0.7; }

/* ---------- list rows (the queue) ---------- */
/* Hairline-separated rows like the drop-down section. Focused row (keyboard j/k) shows a 2px Ink bar at the left edge
   and lifts to White; hover only lifts. */
.rows { display: grid; }
.row { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-2); margin-inline: calc(-1 * var(--s-2)); border-bottom: 1px solid var(--hairline); color: inherit; transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.row:hover { background: var(--white); }
.row.is-focused, .row:focus-visible { background: var(--white); box-shadow: inset 2px 0 0 var(--ink); outline: none; }
.row .thumb { width: 6rem; aspect-ratio: 3 / 4; object-fit: cover; background: var(--ink); display: block; }
.row .who { display: flex; flex-wrap: wrap; gap: 0.5rem var(--s-2); align-items: center; }
.row .who .name { font-size: var(--t-title); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }   /* Title bold: an item name */
.row .meta { margin-top: 0.35rem; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 720px) { .row { grid-template-columns: 4.5rem minmax(0, 1fr); } .row .thumb { width: 4.5rem; } .row > .dots { grid-column: 2; } }

/* ---------- plain list: the site's dash list, usable anywhere ---------- */
.list { display: grid; gap: 0.35rem; font-size: var(--t-body); color: var(--muted); }
.list li { display: flex; gap: 0.6em; }
.list li::before { content: "\2014"; color: var(--muted); flex: none; }
.list strong { color: var(--ink); font-weight: 700; }

/* ---------- two-column copy: first paragraph as Lede at left, the rest as Body at right ---------- */
.copy-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-4) var(--s-7); align-items: start; }
.copy-split .t-body + .t-body { margin-top: 1em; }
@media (max-width: 720px) { .copy-split { grid-template-columns: 1fr; } }

/* ---------- facts: a definition list ---------- */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem var(--s-4); font-size: var(--t-body); }
.facts dt { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.35em; }
.facts dd { margin: 0; }

/* ---------- data table (settings) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th { text-align: left; font-weight: 400; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 0.75rem 0.75rem 0; border-bottom: 1px solid var(--hairline-strong); }
.table td { padding: 0.8rem 0.75rem 0.8rem 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.table tr:hover td { background: var(--white); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table select, .table input[type="text"], .table input[type="email"], .table input[type="number"] { width: 100%; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; padding: 0.35rem 0; }
.table-wrap { overflow-x: auto; }

/* ---------- form additions ---------- */
.field input[type="number"], .field input[type="date"], .field input[type="datetime-local"], .field input[type="url"], .field input[type="password"], .field select {
  width: 100%; font: inherit; font-size: var(--t-body); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; padding: 0.6rem 0; transition: border-color 0.25s var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.5rem; }
.field input:focus, .field select:focus { border-color: var(--ink); outline: none; }
.field .counter { font-size: var(--t-label); letter-spacing: 0.1em; color: var(--muted); justify-self: end; }
.field .counter.is-over { color: var(--no); }
.field-help { font-size: var(--t-small); color: var(--muted); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-bottom-color: var(--no); }
.field-error { font-size: var(--t-small); color: var(--no); }

/* ---------- file upload with progress ---------- */
.upload { display: grid; gap: var(--s-2); }
.upload-drop { position: relative; display: grid; place-items: center; gap: 0.5rem; padding: var(--s-4); text-align: center; border: 1px dashed var(--hairline-strong); color: var(--muted); font-size: var(--t-body); transition: border-color 0.25s var(--ease), color 0.25s var(--ease); cursor: pointer; }
.upload-drop:hover, .upload-drop.is-over, .upload-drop:focus-within { border-color: var(--ink); color: var(--ink); }
.upload-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-file { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); }
.upload-file img, .upload-file video { width: 3rem; aspect-ratio: 3 / 4; object-fit: cover; background: var(--ink); display: block; }
.upload-file .fname { font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { position: relative; height: 2px; background: var(--hairline); margin-top: 0.5rem; overflow: hidden; }
.progress > span { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--ink); transition: width 0.3s var(--ease); }
.upload-file.is-done .progress > span { background: var(--yes); }
.upload-file.is-error .progress > span { background: var(--no); width: 100%; }

/* ---------- terms box + gate ---------- */
.terms { max-height: 16rem; overflow: auto; padding: var(--s-3); border: 1px solid var(--hairline-strong); font-size: var(--t-small); color: var(--muted); line-height: 1.55; overscroll-behavior: contain; }
.terms h3 { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 1.5em 0 0.5em; }
.terms p + p { margin-top: 0.75em; }
.terms-gate { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); transition: opacity 0.25s var(--ease); }
.terms-gate.is-locked { opacity: 0.4; pointer-events: none; }
.terms-gate .field-help { margin-left: auto; }

/* ---------- states: empty, closed, error, confirmation ---------- */
.state { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-6) 0; max-width: 40ch; }
.state .t-title { font-weight: 400; }
.state--center { justify-items: center; text-align: center; margin-inline: auto; }
.state--error .t-title::before { content: ""; display: block; width: 2rem; height: 2px; background: var(--no); margin-bottom: var(--s-2); }
.state--done .t-title::before { content: ""; display: block; width: 2rem; height: 2px; background: var(--yes); margin-bottom: var(--s-2); }
.notice { padding: var(--s-3) 0; border-top: 1px solid var(--hairline); font-size: var(--t-body); color: var(--muted); }
.notice--error { color: var(--ink); border-top-color: var(--no); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: var(--s-4); transform: translate(-50%, 0); z-index: 60; display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.8rem 1.25rem; background: var(--ink); color: var(--paper); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); animation: toast-up 0.4s var(--ease); }
.toast[hidden] { display: none; }
.toast .btn-s { border-color: rgba(249, 249, 249, 0.35); color: var(--paper); }
.toast .btn-s:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@keyframes toast-up { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- video player frame and photo strip ---------- */
.player { position: relative; width: 100%; max-height: 70vh; aspect-ratio: 9 / 16; background: #000; margin-inline: auto; }
.player video { width: 100%; height: 100%; display: block; object-fit: contain; }
.player.is-horizontal { aspect-ratio: 16 / 9; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.5rem; margin-top: var(--s-2); }
.thumbs button { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.thumbs button:hover img { transform: scale(1.04); }
/* lightbox: reuse the site's .reel-modal markup and main.js (openGallery); nothing new to style */

/* ---------- detail layout ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-5) var(--s-6); align-items: start; }
.detail > aside { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
.detail .stack { display: grid; gap: var(--s-4); }
.detail .stack > * + * { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } .detail > aside { position: static; } }

/* ---------- notes thread and history ---------- */
.thread { display: grid; gap: var(--s-3); }
.note { display: grid; gap: 0.35rem; font-size: var(--t-body); }
.note .by { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.history { display: grid; gap: 0.5rem; font-size: var(--t-small); color: var(--muted); }
.history li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-2); }
.history time { font-variant-numeric: tabular-nums; }

/* ---------- kbd chip ---------- */
/* The one place a 3px radius is allowed: a key cap should look like a key. */
.kbd { display: inline-block; min-width: 1.6em; padding: 0.15em 0.4em; font: inherit; font-size: 0.75em; line-height: 1.2; text-align: center; color: var(--muted); border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: 3px; }
.hints { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--t-small); color: var(--muted); }
.hints span { display: inline-flex; align-items: center; gap: 0.4em; }
@media (hover: none) { .hints { display: none; } }   /* keyboard hints mean nothing on a touch screen */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }