/* ------------------------------------------------------------------
   MHMH public page (Mission: Help My Home casting call)
   Source of truth: design-kit/reference/mhmh-mockup.dc.html (Chris's
   Claude Design mockup) plus the design-system tokens it links
   (~/mhmh-casting/design-src/_ds/.../tokens/*.css, light context) and
   the Field / Input / Select / Textarea / Checkbox component styles from
   its bundle. Every value below is taken from those files; nothing is
   provisional. Load after wheelhouse.css and app.css, public page only.
   ------------------------------------------------------------------ */

/* the mockup's paragraph weight is Book (450); the site loads Regular and Bold only */
@font-face { font-family: "Suisse Intl"; src: url("fonts/SuisseIntl-Book.otf") format("opentype"); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/SuisseIntl-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/SuisseIntl-BookItalic.otf") format("opentype"); font-weight: 450; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/SuisseIntl-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---- MHMH accent (mockup <style>, accent = Rose) ---- */
  --mh-accent: linear-gradient(30deg, #d35c7e 0%, #885dc1 55%, #47a0d1 95%);   /* Gradient 2: rose, violet, blue; 30deg like the logo */
  --mh-ink: #a82e52;
  --mh-wash: rgba(211, 92, 126, 0.10);
  --mh-on-ink: #f2f2f2;                                                       /* --wh-off-white */
  --mh-g1-start: #fe5343;                                                     /* required asterisk, errors, checked checkbox (design-system defaults) */
  --mh-gradient-1: linear-gradient(30deg, #fe5343 0%, #fca725 50%, #96e02a 96%);
  --mh-focus-ring: #fca725;

  /* ---- spacing.css ---- */
  --mh-space-1: 4px;  --mh-space-2: 8px;  --mh-space-3: 12px; --mh-space-4: 16px; --mh-space-5: 20px;
  --mh-space-6: 24px; --mh-space-8: 32px; --mh-space-10: 40px; --mh-space-12: 48px; --mh-space-16: 64px;
  --mh-space-20: 80px; --mh-space-24: 96px;
  --mh-page-gutter: clamp(20px, 5vw, 80px);
  --mh-section-y: clamp(64px, 10vw, 160px);
  --mh-content-max: 1320px;
  --mh-measure: 66ch;
  --mh-grid-gap: 24px;

  /* ---- effects.css ---- */
  --mh-radius-xs: 4px; --mh-radius-sm: 8px; --mh-radius-md: 16px; --mh-radius-lg: 24px; --mh-radius-pill: 999px;
  --mh-radius-card: var(--mh-radius-lg);
  --mh-radius-media: var(--mh-radius-md);
  --mh-radius-input: var(--mh-radius-sm);
  --mh-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.16), 0 12px 32px rgba(0, 0, 0, 0.18);
  --mh-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mh-dur-fast: 150ms; --mh-dur-base: 240ms;
  --mh-press-scale: 0.98;

  /* ---- colors.css, light context (.wh-light) ---- */
  --mh-surface-page: #f2f2f2;
  --mh-surface-card: #ffffff;
  --mh-surface-sunken: #e8e8e8;
  --mh-text-heading: #111111;
  --mh-text-body: #333333;
  --mh-text-secondary: rgba(51, 51, 51, 0.75);
  --mh-text-muted: rgba(51, 51, 51, 0.5);
  --mh-text-eyebrow: #111111;
  --mh-border-hairline: rgba(17, 17, 17, 0.12);
  --mh-border-strong: rgba(17, 17, 17, 0.26);

  /* ---- typography.css ---- */
  --mh-font: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mh-tracking-tight: -0.01em;
  --mh-tracking-normal: 0;
  --mh-tracking-wide: 0.1em;
  --mh-type-h1: 700 clamp(40px, 5vw, 72px)/1.06 var(--mh-font);
  --mh-type-h2: 700 clamp(30px, 3.2vw, 48px)/1.2 var(--mh-font);
  --mh-type-h3: 700 24px/1.2 var(--mh-font);
  --mh-type-h4: 700 20px/1.2 var(--mh-font);
  --mh-type-body-lg: 450 20px/1.55 var(--mh-font);
  --mh-type-body: 450 17px/1.55 var(--mh-font);
  --mh-type-secondary: 400 15px/1.55 var(--mh-font);
  --mh-type-eyebrow: 450 12px/1.2 var(--mh-font);
  --mh-fs-body: 17px; --mh-fs-body-sm: 15px; --mh-fs-caption: 13px;
}

/* ---------- page (base.css, light) ---------- */
.mh { background: var(--mh-surface-page); color: var(--mh-text-body); font: var(--mh-type-body); letter-spacing: var(--mh-tracking-tight); text-wrap: pretty; }
.mh main a:hover { color: var(--mh-ink); }
.mh .wrap { max-width: calc(var(--mh-content-max) + 2 * var(--mh-page-gutter)); margin-inline: auto; padding-inline: var(--mh-page-gutter); }
.mh-section { padding-block: 0 var(--mh-section-y); }
.mh-section--hero { padding-block: var(--mh-space-16) var(--mh-space-12); }
.mh-section--strip { padding-block: 0 var(--mh-space-16); }
.mh-section--done { padding-block: var(--mh-space-24) var(--mh-section-y); }

/* ---------- type roles ---------- */
.mh-eyebrow { font: var(--mh-type-eyebrow); letter-spacing: var(--mh-tracking-wide); text-transform: uppercase; color: var(--mh-text-muted); margin: 0; }
.mh-eyebrow--dark { color: var(--mh-text-eyebrow); }                       /* "Series description", "Apply", "While you wait" */
.mh-eyebrow--ink { color: var(--mh-ink); }                                 /* card label, drop-zone label */
.mh-eyebrow--num { text-transform: none; color: var(--mh-ink); }           /* 01 to 05 */
.mh-h1 { font: var(--mh-type-h1); letter-spacing: var(--mh-tracking-tight); color: var(--mh-text-heading); margin: 0; max-width: 20ch; text-wrap: balance; }
.mh-h2 { font: var(--mh-type-h2); letter-spacing: var(--mh-tracking-tight); color: var(--mh-text-heading); margin: 0; text-wrap: balance; }
.mh-h3 { font: var(--mh-type-h3); letter-spacing: var(--mh-tracking-tight); color: var(--mh-text-heading); margin: 0; }
.mh-h4 { font: var(--mh-type-h4); letter-spacing: var(--mh-tracking-tight); color: var(--mh-text-heading); margin: 0; }
.mh-lede { font: var(--mh-type-body-lg); color: var(--mh-text-secondary); margin: 0; max-width: 52ch; }
.mh-body { font: var(--mh-type-body); color: var(--mh-text-secondary); margin: 0; max-width: var(--mh-measure); }
.mh-body strong { font-weight: 700; color: var(--mh-text-heading); }
.mh-secondary { font: var(--mh-type-secondary); letter-spacing: var(--mh-tracking-normal); color: var(--mh-text-secondary); margin: 0; }
.mh-secondary--muted { color: var(--mh-text-muted); }
.mh-accent-word { font-style: italic; color: var(--mh-ink); }

/* ---------- pills and buttons (Button.jsx sizes; mockup inline styles) ---------- */
.mh-pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--mh-radius-pill); background: var(--mh-ink); color: var(--mh-on-ink); font: var(--mh-type-eyebrow); letter-spacing: var(--mh-tracking-wide); text-transform: uppercase; white-space: nowrap; }
.mh-pill--outline { background: transparent; color: var(--mh-text-muted); border: 1px solid var(--mh-border-hairline); padding: 10px 18px; font: var(--mh-type-secondary); letter-spacing: var(--mh-tracking-normal); text-transform: none; }
.mh-btn { display: inline-flex; align-items: center; gap: var(--mh-space-2); padding: 16px 32px; border-radius: var(--mh-radius-pill); background: var(--mh-ink); color: var(--mh-on-ink); font: 450 var(--mh-fs-body-sm)/1 var(--mh-font); letter-spacing: var(--mh-tracking-wide); text-transform: uppercase; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: all var(--mh-dur-base) var(--mh-ease); }
.mh-btn:hover { background: #8c2443; color: var(--mh-on-ink); transform: translateY(-2px); }
.mh-btn:active { transform: scale(var(--mh-press-scale)); }
.mh-btn--lg { padding: 18px 36px; font-size: var(--mh-fs-body); }
.mh-btn[disabled], .mh-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }   /* --disabled-opacity from the system */
.mh-btn-quiet { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: var(--mh-radius-pill); border: 1px solid var(--mh-border-strong); background: transparent; color: var(--mh-text-body); font: var(--mh-type-eyebrow); letter-spacing: var(--mh-tracking-wide); text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all var(--mh-dur-base) var(--mh-ease); }
.mh-btn-quiet:hover { border-color: var(--mh-text-heading); }
.mh-link { display: inline-flex; align-items: center; gap: var(--mh-space-2); font: var(--mh-type-eyebrow); letter-spacing: var(--mh-tracking-wide); text-transform: uppercase; color: var(--mh-text-body); }
.mh a:focus-visible, .mh button:focus-visible, .mh input:focus-visible, .mh select:focus-visible, .mh textarea:focus-visible { outline: 2px solid var(--mh-focus-ring); outline-offset: 3px; }

/* ---------- hero ---------- */
.mh-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--mh-space-16); align-items: center; }
.mh-hero > .copy { display: grid; gap: var(--mh-space-6); justify-items: start; }
.mh-hero .tags { display: flex; align-items: center; gap: var(--mh-space-3); flex-wrap: wrap; }
.mh-hero .cta { display: flex; gap: var(--mh-space-4); align-items: center; flex-wrap: wrap; }
.mh-portrait { position: relative; padding: 0 var(--mh-space-10) var(--mh-space-10) 0; }
.mh-portrait .block { position: absolute; right: 0; bottom: 0; width: calc(100% - var(--mh-space-16)); height: calc(100% - var(--mh-space-16)); border-radius: var(--mh-radius-media); background: var(--mh-accent); }
.mh-portrait .frame { position: relative; padding: 10px; border-radius: calc(var(--mh-radius-media) + 10px); background: var(--mh-accent); }
.mh-portrait .media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--mh-radius-media); overflow: hidden; background: var(--mh-surface-sunken); }
.mh-portrait .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-portrait .media .placeholder { display: grid; place-items: center; height: 100%; font: var(--mh-type-eyebrow); letter-spacing: var(--mh-tracking-wide); text-transform: uppercase; color: var(--mh-text-muted); text-align: center; padding: var(--mh-space-6); }

/* ---------- strip of four ---------- */
.mh-strip { border-top: 1px solid var(--mh-border-hairline); border-bottom: 1px solid var(--mh-border-hairline); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--mh-space-8); padding: var(--mh-space-8) 0; }
.mh-strip > div { display: grid; gap: var(--mh-space-2); }

/* ---------- series + asides ---------- */
.mh-series { display: grid; gap: var(--mh-space-12); }
.mh-series .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--mh-space-16); align-items: start; }
.mh-series .copy { display: grid; gap: var(--mh-space-4); }
.mh-series .asides { display: grid; gap: var(--mh-space-6); align-content: start; border-top: 1px solid var(--mh-border-hairline); padding-top: var(--mh-space-8); }
.mh-series .aside { display: grid; gap: var(--mh-space-3); }
.mh-series .aside + .aside { border-top: 1px solid var(--mh-border-hairline); padding-top: var(--mh-space-6); }

/* ---------- cards ---------- */
.mh-cards { display: grid; gap: var(--mh-space-6); }
.mh-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--mh-grid-gap); }
.mh-card { background: var(--mh-surface-card); border: 1px solid var(--mh-border-hairline); border-radius: var(--mh-radius-card); box-shadow: var(--mh-shadow-card); padding: var(--mh-space-8); display: grid; gap: var(--mh-space-3); align-content: start; }
.mh-card .quote { font: var(--mh-type-body-lg); font-style: italic; color: var(--mh-text-heading); margin: 0; }

/* ---------- apply: head + the form card ---------- */
.mh-apply { max-width: 920px; margin: 0 auto; display: grid; gap: var(--mh-space-8); }
.mh-apply > .head { display: grid; gap: var(--mh-space-4); justify-items: start; }
.mh-form-card { min-width: 0; background: var(--mh-surface-card); border: 1px solid var(--mh-border-hairline); border-radius: var(--mh-radius-card); box-shadow: var(--mh-shadow-card); padding: clamp(20px, 4vw, 48px); display: grid; gap: var(--mh-space-16); }
.mh-fs { display: grid; gap: var(--mh-space-6); min-width: 0; }
.mh-fs > .head { display: flex; align-items: baseline; gap: var(--mh-space-4); border-bottom: 1px solid var(--mh-border-hairline); padding-bottom: var(--mh-space-4); }
.mh-fs > .head .mh-secondary { margin-left: auto; color: var(--mh-text-muted); }
.mh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--mh-space-6); align-items: start; min-width: 0; }
.mh-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.mh-grid .span { grid-column: 1 / -1; }

/* fields (Field.jsx + Input.jsx): eyebrow label, hairline box, 14px 16px padding, Body type, 8px radius */
.mh-field { display: grid; gap: var(--mh-space-2); }
.mh-field > label { font: var(--mh-type-eyebrow); letter-spacing: var(--mh-tracking-wide); text-transform: uppercase; color: var(--mh-text-secondary); }
.mh-field > label .req { color: var(--mh-g1-start); }
.mh-field .hint { font: var(--mh-type-secondary); letter-spacing: var(--mh-tracking-normal); color: var(--mh-text-muted); margin: 0; }
.mh-field .hint.is-over, .mh-field .error { font: var(--mh-type-secondary); color: var(--mh-g1-start); margin: 0; }
.mh-field .error:empty, .mh-file .note:empty { display: none; }   /* an empty message line adds no gap */
.mh-input, .mh-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .mh-field select, .mh-field textarea {
  width: 100%; padding: 14px 16px;
  font: var(--mh-type-body); letter-spacing: var(--mh-tracking-tight); color: var(--mh-text-body);
  background: transparent; border: 1px solid var(--mh-border-hairline); border-radius: var(--mh-radius-input);
  transition: border-color var(--mh-dur-fast) var(--mh-ease);
}
.mh-field textarea { resize: vertical; min-height: 150px; }
.mh-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.mh-field select option { color: #111; }
.mh-field ::placeholder { color: var(--mh-text-muted); opacity: 1; }
.mh-field input:hover, .mh-field select:hover, .mh-field textarea:hover { border-color: var(--mh-border-strong); }
.mh-field.is-invalid input, .mh-field.is-invalid select, .mh-field.is-invalid textarea { border-color: var(--mh-g1-start); }
.mh-field input:disabled, .mh-field select:disabled { opacity: 0.4; cursor: not-allowed; }

/* the wash row (mockup) and the Checkbox component: 18px, 4px radius, strong border, Gradient 1 when checked */
.mh-wash { background: var(--mh-wash); border-radius: var(--mh-radius-input); padding: var(--mh-space-4) var(--mh-space-5); }
.mh-check { display: inline-flex; align-items: center; gap: var(--mh-space-3); cursor: pointer; font: var(--mh-type-body); color: var(--mh-text-secondary); }
.mh-check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: var(--mh-radius-xs); border: 1px solid var(--mh-border-strong); background: transparent; cursor: pointer; transition: background var(--mh-dur-fast) var(--mh-ease); }
.mh-check input:checked { background: var(--mh-gradient-1); border-color: transparent; }
.mh-check input:disabled { opacity: 0.4; cursor: not-allowed; }
.mh-wash.is-locked { opacity: 0.55; }

/* drop zones */
.mh-drop { position: relative; border: 1px dashed var(--mh-border-strong); border-radius: var(--mh-radius-media); padding: var(--mh-space-8); display: grid; gap: var(--mh-space-3); align-content: center; justify-items: center; text-align: center; min-height: 220px; cursor: pointer; transition: border-color var(--mh-dur-base) var(--mh-ease), background-color var(--mh-dur-base) var(--mh-ease); }
.mh-drop:hover { border-color: var(--mh-ink); }                                          /* hover only darkens the dash */
.mh-drop.is-over { border-color: var(--mh-ink); background: var(--mh-wash); }           /* the wash is for drag-over ... */
.mh-drop.is-error { border-color: var(--mh-g1-start); background: var(--mh-wash); }     /* ... and error, nothing else */
.mh-drop:has(input:focus-visible) { outline: 2px solid var(--mh-focus-ring); outline-offset: 3px; }
/* the native input is kept in the tree for the label click and keyboard focus, but clipped to nothing so it shows
   no tooltip, no ring and no "No file chosen"; drag-and-drop is handled on the label by the app's script */
.mh-drop input[type="file"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.mh-grid--drops { align-items: stretch; }                                                /* the two zones side by side share one height */
.mh-drop .mh-secondary { max-width: 34ch; }
.mh-drop .mh-btn-quiet { margin-top: var(--mh-space-2); pointer-events: none; }

/* file row with progress */
.mh-file { display: flex; align-items: center; gap: var(--mh-space-4); border: 1px solid var(--mh-border-hairline); border-radius: var(--mh-radius-input); padding: var(--mh-space-4) var(--mh-space-5); }
.mh-file > .info { flex: 1; display: grid; gap: var(--mh-space-2); min-width: 0; }
.mh-file .line { display: flex; justify-content: space-between; gap: var(--mh-space-4); font: var(--mh-type-secondary); letter-spacing: var(--mh-tracking-normal); color: var(--mh-text-secondary); }
.mh-file .line span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-file .note { font: var(--mh-type-secondary); letter-spacing: var(--mh-tracking-normal); color: var(--mh-text-muted); margin: 0; }   /* a nudge under the bar: "looks horizontal", "over two minutes" */
.mh-file .bar { height: 6px; border-radius: var(--mh-radius-pill); background: var(--mh-surface-sunken); overflow: hidden; }
.mh-file .bar > span { display: block; width: var(--p, 0%); height: 100%; background: var(--mh-accent); transition: width var(--mh-dur-base) var(--mh-ease); }
.mh-file.is-done .bar > span { background: #96e02a; }
.mh-file.is-error .bar > span { background: var(--mh-g1-start); width: 100%; }
.mh-file .mh-btn-quiet { flex: none; }

/* release box: sunken, 8px radius, label inside, scrolls */
.mh-release { border: 1px solid var(--mh-border-hairline); border-radius: var(--mh-radius-input); background: var(--mh-surface-sunken); padding: var(--mh-space-6); max-height: 260px; overflow: auto; display: grid; gap: var(--mh-space-4); overscroll-behavior: contain; }
.mh-release .mh-body { max-width: none; }

/* submit row */
.mh-submit { display: flex; align-items: center; gap: var(--mh-space-6); flex-wrap: wrap; padding-top: var(--mh-space-2); }
.mh-submit .mh-secondary { max-width: 40ch; }

/* ---------- confirmation ---------- */
.mh-done { max-width: 820px; margin: 0 auto; display: grid; gap: var(--mh-space-8); justify-items: start; }
.mh-done .mh-h1 { max-width: 24ch; }
.mh-steps { display: grid; width: 100%; margin-top: var(--mh-space-8); }
.mh-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--mh-space-6); padding: var(--mh-space-6) 0; border-top: 1px solid var(--mh-border-hairline); }
.mh-step:last-child { border-bottom: 1px solid var(--mh-border-hairline); }
.mh-step > div { display: grid; gap: var(--mh-space-2); }

/* ---------- episodes ---------- */
.mh-episodes { display: grid; gap: var(--mh-space-10); }
.mh-episodes .head { display: flex; align-items: end; justify-content: space-between; gap: var(--mh-space-8); flex-wrap: wrap; }
.mh-episodes .head > div { display: grid; gap: var(--mh-space-3); }
.mh-ep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--mh-grid-gap); }
.mh-ep { display: grid; gap: var(--mh-space-4); color: inherit; }
.mh-ep .still { aspect-ratio: 16 / 9; border-radius: var(--mh-radius-media); overflow: hidden; background: var(--mh-surface-sunken); }
.mh-ep .still img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--mh-ease); }
.mh-ep:hover .still img { transform: scale(1.03); }
.mh-ep > div { display: grid; gap: var(--mh-space-1); }

@media (prefers-reduced-motion: reduce) { .mh-btn, .mh-btn-quiet, .mh-ep .still img, .mh-file .bar > span { transition: none; } }