/* MyLFCHistory app layer: page-level layout built on the design kit's tokens and components (mylfc.css).
   Only mlh- classes and --mlh-* tokens; anything shared by the design kit lives in mylfc.css. */

/* ---------- Shell ---------- */
.mlh-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--mlh-btn); color: var(--mlh-btn-text); padding: 10px 16px; border-radius: var(--mlh-radius); }
.mlh-skip:focus { left: 8px; }
.mlh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mlh-ink2 { color: var(--mlh-ink-2); }
.mlh-main { display: block; }
.mlh-header__inner > .mlh-logo { flex: none; }
.mlh-header__end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mlh-header__end form { margin: 0; }
.mlh-linkbtn { background: none; border: 0; padding: 10px 12px; color: var(--mlh-text); font: 500 15px var(--mlh-font-body); text-decoration: none; cursor: pointer; }
.mlh-linkbtn:hover { color: #fff; text-decoration: underline; }
.mlh-linkbtn:focus-visible { outline: 2px solid var(--mlh-link); outline-offset: 2px; }
.mlh-headerlink { font-size: 15px; color: var(--mlh-text-muted); }
.mlh-headerlink a { font-weight: 600; }
.mlh-nav__soon { color: var(--mlh-text-muted); opacity: .55; font-weight: 500; font-size: 15px; padding: 10px 0; cursor: default; }
.mlh-footer { margin-top: 24px; padding: 36px 16px 40px; text-align: center; background: var(--mlh-footer-bg); border-top: 1px solid var(--mlh-line); }
.mlh-footer p { margin: 0; }
.mlh-footer__tag { font: 600 15px var(--mlh-font-body); color: var(--mlh-text); }
.mlh-footer__tag--serif { font: 700 20px/1.35 var(--mlh-font-display); text-transform: none; letter-spacing: 0; max-width: 30ch; margin: 0 auto !important; }
.mlh-footer__sub { margin-top: 10px !important; font-size: 14px; color: var(--mlh-text-muted); }
.mlh-footer__sub .mlh-hand { font-size: 17px; color: var(--mlh-text); }

/* Tab bar extras; Passport and Timeline are not built yet so they render inert, as in the desktop nav. */
.mlh-tabbar__soon, .mlh-tabbar__more { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; color: var(--mlh-text-muted); font: 600 11px var(--mlh-font-body); background: none; border: 0; padding: 0; }
.mlh-tabbar__soon { opacity: .5; }
.mlh-tabbar__more:focus-visible { outline: 2px solid var(--mlh-link); outline-offset: -4px; }
@media (max-width: 900px) {
  .mlh--app .mlh-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mlh--app .mlh-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* "More" sheet */
.mlh-sheet { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; color: var(--mlh-text); background: linear-gradient(160deg, var(--mlh-ground-mid), var(--mlh-ground-end)); overflow-y: auto; }
.mlh-sheet[open] { display: flex; flex-direction: column; gap: 18px; padding: 16px 20px 28px; box-sizing: border-box; }
.mlh-sheet::backdrop { background: rgba(20, 3, 5, .8); }
.mlh-sheet__head { display: flex; align-items: center; justify-content: space-between; }
.mlh-sheet__profile { display: flex; align-items: center; gap: 14px; padding: 16px; }
.mlh-sheet__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.mlh-sheet__links a { color: var(--mlh-text-muted); font-weight: 500; padding: 10px 0; }
.mlh-sheet__links form { margin: 0; }
.mlh-sheet__links .mlh-linkbtn { padding: 10px 0; color: var(--mlh-text-muted); }
.mlh-sheet__ynwa { margin: auto 0 0; text-align: center; font-size: 22px; color: var(--mlh-text); }
@media (min-width: 901px) { .mlh-sheet { display: none !important; } }

/* ---------- Shared page bits ---------- */
.mlh-h1--page { font-size: clamp(38px, 5vw, 64px); }
.mlh-lede { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--mlh-text-soft); max-width: 52ch; }
.mlh-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.mlh-actions--center { justify-content: center; margin-top: 28px; }
.mlh-eyebrow { margin: 0 0 14px; }
.mlh-alert--on-ground { margin: 0 0 20px; background: #FFF4F1; }
.validation-summary-valid { display: none; }
.mlh-alert ul { margin: 0; padding-left: 18px; }
.mlh-empty { padding: 32px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mlh-empty p { margin: 0; color: var(--mlh-text-soft); max-width: 52ch; }
.mlh-empty .mlh-h3 { color: var(--mlh-text); }
.mlh-empty .mlh-btn { margin-top: 8px; }
.mlh-crowd__label { padding: 10px 12px; }

/* ---------- Landing ---------- */
.mlh-landing-hero { text-align: center; padding-top: 72px; padding-bottom: 56px; }
.mlh-landing-hero__line { margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 26px); color: var(--mlh-accent); }
.mlh-landing-hero .mlh-h1 { max-width: 22ch; margin: 0 auto; font-size: clamp(38px, 6.4vw, 80px); }
.mlh-landing-hero__accent { color: var(--mlh-accent); }
.mlh-landing-hero__sub { max-width: 52ch; margin: 22px auto 0; font-size: 18px; line-height: 1.55; color: var(--mlh-text-soft); }
.mlh-drawer { padding-bottom: 56px; }
.mlh-drawer__title { margin: 0 0 22px; text-align: center; color: var(--mlh-text-muted); letter-spacing: .3em; }
.mlh-drawer__strip { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; padding: 24px 0 64px; }
.mlh-drawer__item { transform: rotate(var(--tilt, 0deg)); flex: none; }
.mlh-drawer .mlh-programme { width: 170px; }
.mlh-drawer__prog-title { font-size: 20px; font-weight: 800; margin-top: 4px; }
.mlh-drawer__prog-body { padding: 16px; }
.mlh-drawer .mlh-polaroid { width: 230px; }
.mlh-drawer__photo { height: 170px; }
.mlh-drawer__item--ticket { position: relative; width: min(100%, 420px); }
.mlh-drawer__item--ticket .mlh-stamp { position: absolute; right: -14px; bottom: -58px; }
.mlh-drawer__item--ticket .mlh-ticket__stub { width: 22%; font-size: 10px; }
.mlh-drawer__years { list-style: none; margin: 40px 0 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; border-top: 1px solid var(--mlh-line); }
.mlh-drawer__years li { display: flex; flex-direction: column; gap: 2px; max-width: 220px; }
.mlh-drawer__years strong { font-size: 22px; font-weight: 800; }
.mlh-drawer__years .mlh-hand { color: var(--mlh-text-soft); font-size: 17px; }
.mlh-statement { text-align: center; padding-top: 32px; padding-bottom: 64px; }
.mlh-statement__title { margin: 0 auto; max-width: 24ch; font: 500 clamp(26px, 3.4vw, 40px)/1.25 var(--mlh-font-display); }
.mlh-statement__title span { color: var(--mlh-accent); }
.mlh-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 32px; }
.mlh-how li { padding-top: 18px; border-top: 1px solid var(--mlh-line-strong); }
.mlh-how p { margin: 8px 0 0; color: var(--mlh-text-soft); line-height: 1.5; }
.mlh-cta-band { margin-top: 72px; border-radius: 0; box-shadow: none; padding: 72px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mlh-cta-band__title { max-width: 16ch; font-size: clamp(34px, 4.6vw, 56px); }
.mlh-cta-band p { margin: 0; max-width: 40ch; color: var(--mlh-ink-2); font-size: 18px; }

/* ---------- Home ---------- */
.mlh-hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: 52px; padding-bottom: 36px; }
.mlh-hero__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.mlh-hero__copy .mlh-eyebrow { margin: 0; }
.mlh-hero__text { margin: 0; font-size: 18px; line-height: 1.55; color: var(--mlh-text-soft); max-width: 480px; }
.mlh-hero__art { flex: 1.3 1 560px; min-width: 0; }
.mlh-hero__banner { right: 0; top: -10px; width: 34%; height: 300px; transform: rotate(3deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; box-sizing: border-box; text-align: center; }
.mlh-hero__banner-name { font-size: 30px; font-weight: 800; letter-spacing: .04em; }
.mlh-hero__polaroid { left: 18%; top: 20px; width: 40%; transform: rotate(-4deg); }
.mlh-hero__photo { aspect-ratio: 4 / 5; }
.mlh-hero__note { right: 3%; top: 318px; width: 30%; margin: 0; font-size: 21px; line-height: 1.3; color: var(--mlh-banner-text); transform: rotate(-6deg); text-align: center; }
.mlh-hero__ticket { left: 0; top: 70px; width: 62%; transform: rotate(-6deg); }
.mlh-ticket--empty .mlh-ticket__main { border: 2px dashed rgba(42, 36, 32, .35); margin: 10px; justify-content: center; min-height: 120px; }
.mlh-hero__ghost-stamp { left: 30%; top: 280px; opacity: .2; }
.mlh-home-grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-bottom: 56px; }
.mlh-home-grid__main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.mlh-home-grid__side { flex: 1 1 280px; min-width: 0; }
.mlh-story { display: flex; flex-wrap: wrap; }
.mlh-story__intro { flex: 1 1 260px; padding: 26px 28px; }
.mlh-story__intro p { margin: 10px 0 0; }
.mlh-story__stats { flex: 2 1 340px; margin: 0; padding: 26px 28px; border-left: 2px dashed rgba(42, 36, 32, .3); display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 22px 18px; align-content: center; }
.mlh-story__stats > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.mlh-story__stats dd { margin: 0; font: 800 28px/1 var(--mlh-font-display); }
.mlh-story__stats dt { font-weight: 400; font-size: 13px; color: var(--mlh-ink-muted); }
.mlh-memories-head { border-bottom: 1px solid var(--mlh-line); margin-bottom: 24px; padding-bottom: 10px; }
.mlh-memory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; }
.mlh-memory__sub { font-size: 14px; color: var(--mlh-ink-2); }
.mlh-memory__media .mlh-tag { top: 12px; }
.mlh-favs { padding: 20px 22px; }
.mlh-favs__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mlh-favs__head a { font-size: 14px; color: var(--mlh-text-muted); }
.mlh-favs__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mlh-favs__list li { display: flex; gap: 12px; align-items: center; }
.mlh-favs__list a { display: block; font-size: 15px; color: var(--mlh-text); }
.mlh-favs__list small { display: block; font-size: 13px; color: var(--mlh-text-muted); }
.mlh-favs p { margin: 12px 0 0; }

/* ---------- Add a match ---------- */
.mlh-add { padding-top: 48px; padding-bottom: 64px; }
.mlh-add__layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; margin-top: 28px; }
.mlh-add__card { flex: 1 1 480px; max-width: 640px; }
.mlh-add__side { flex: 1 1 260px; display: flex; justify-content: center; }
.mlh-input--story { padding: 12px 14px; font-family: var(--mlh-font-hand); font-size: 19px; line-height: 1.5; resize: vertical; min-height: 120px; }
.mlh-stamp-target--static { cursor: default; flex-direction: column; text-align: center; }
.mlh-stamp-target--static:hover { border-color: rgba(246, 235, 221, .55); }
.mlh-stamp-target__sub { font: 600 13px var(--mlh-font-label); letter-spacing: .2em; color: var(--mlh-text-muted); }
@media (max-width: 900px) { .mlh-add__side { display: none; } }

/* ---------- Match page ---------- */
.mlh-match { padding-top: 24px; padding-bottom: 64px; }
.mlh-backlink { display: inline-block; padding: 10px 0; font-weight: 600; font-size: 14px; }
.mlh-match__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 28px; }
.mlh-match__head .mlh-eyebrow { margin: 0; }
.mlh-scoreline { margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 22px; font: 800 clamp(34px, 5.2vw, 72px)/1.05 var(--mlh-font-display); letter-spacing: -.015em; }
.mlh-scoreline__score { color: var(--mlh-accent); }
.mlh-match__venue { margin: 6px 0 22px; color: var(--mlh-text-soft); font-size: 16px; }
.mlh-note { max-width: 780px; margin: 0 auto 56px; padding: 40px 44px; }
.mlh-note p { margin: 0; }
.mlh-note__story { font: 400 22px/1.5 var(--mlh-font-hand); color: var(--mlh-ink); white-space: pre-line; }
.mlh-note__sign { margin-top: 14px !important; font: 400 18px var(--mlh-font-hand); color: var(--mlh-pencil); }
.mlh-note__prompt { font-size: 22px; line-height: 1.5; }
.mlh-match__layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.mlh-match__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.mlh-match__side { flex: 1 1 260px; min-width: 0; }
.mlh-chapter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 16px; }
.mlh-chapter .mlh-muted { font-size: 14px; }
.mlh-facts { padding: 24px 28px; }
.mlh-facts dl { margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 24px; }
.mlh-facts dt { font: 600 13px var(--mlh-font-body); color: var(--mlh-ink-muted); }
.mlh-facts dd { margin: 4px 0 0; font-weight: 600; }
.mlh-facts p { margin: 0; }
.mlh-instory { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.mlh-instory p { margin: 0; }
.mlh-instory .mlh-h3 { font-size: 26px; }

/* ---------- Auth ---------- */
.mlh-auth__form .mlh-h1 { margin: 0; }
.mlh-auth--narrow { max-width: 760px; padding-top: 56px; justify-content: flex-start; }
.mlh-auth__form--state { align-items: flex-start; gap: 18px; }
.mlh-auth__alt { margin: 0; font-size: 15px; color: var(--mlh-text-muted); }
.mlh-auth__alt a { font-weight: 600; }
.mlh-auth__quote { margin: 28px 0 0; font-size: 28px; line-height: 1.35; color: var(--mlh-text); }
.mlh-auth-card--stack .mlh-auth-card__body { padding: 32px; }
.mlh-auth-card__title { margin: 0; display: flex; align-items: baseline; gap: 4px; color: var(--mlh-ink-2); }
.mlh-logo__my--sm { font-size: 22px; }
.mlh-dashrule { border: 0; border-top: 2px dashed rgba(42, 36, 32, .3); margin: 0; opacity: 1; }
.mlh-auth-card__admit { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--mlh-ink-muted); font-size: 11px; }
.mlh-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mlh-field__row a { font-size: 14px; font-weight: 600; }
.mlh-field__wrap { position: relative; }
.mlh-field__wrap .mlh-input--paper { padding-right: 52px; }
.mlh-field__wrap .mlh-reveal[hidden] { display: none; }
.mlh-field > label, .mlh-field__row > label { font-size: 14px; font-weight: 600; }
.mlh-check { cursor: pointer; }
.mlh-sent .mlh-stamp { border-radius: 50%; padding: 26px; }
.mlh-auth-polaroids { position: relative; height: 380px; }
.mlh-auth-polaroids__a, .mlh-auth-polaroids__b { position: absolute; width: 58%; }
.mlh-auth-polaroids__a { left: 0; top: 0; transform: rotate(-3deg); }
.mlh-auth-polaroids__b { right: 0; top: 120px; transform: rotate(4deg); }
.mlh-auth-polaroids__photo { aspect-ratio: 4 / 3; }
.mlh-next { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; font-size: 18px; }
.mlh-next li { display: flex; align-items: center; gap: 14px; }
.mlh-next__stamp { display: inline-block; margin-left: 14px; }
@media (max-width: 900px) {
  .mlh-landing-hero { padding-top: 44px; }
  .mlh-drawer__strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 24px 16px 44px; margin: 0 -16px; scroll-snap-type: x proximity; }
  .mlh-drawer__item { scroll-snap-align: center; }
  .mlh-drawer__item--ticket { width: 340px; }
  .mlh-note { padding: 30px 24px; }
  .mlh-auth-card { flex-direction: column; }
  .mlh-auth-card__band { width: auto; height: 14px; }
  .mlh-auth-card__body, .mlh-auth-card--stack .mlh-auth-card__body { padding: 22px 20px; }
}

/* ---------- Legacy (Bootstrap) screens sitting on paper until they're redesigned ---------- */
.mlh-legacy-wrap { padding-top: 40px; padding-bottom: 40px; }
.mlh-legacy-wrap > .mlh-h1 { margin-bottom: 24px; }
.mlh-legacy { padding: 28px; margin-bottom: 24px; }
.mlh-legacy .mlh-h2, .mlh-legacy h2, .mlh-legacy h3 { font-family: var(--mlh-font-display); font-weight: 800; }
.mlh-legacy .text-muted { color: var(--mlh-ink-muted) !important; }
.mlh-legacy .btn-primary { --bs-btn-bg: var(--mlh-red); --bs-btn-border-color: var(--mlh-red); --bs-btn-hover-bg: var(--mlh-red-hover); --bs-btn-hover-border-color: var(--mlh-red-hover); --bs-btn-active-bg: var(--mlh-red-hover); --bs-btn-active-border-color: var(--mlh-red-hover); --bs-btn-disabled-bg: var(--mlh-red); --bs-btn-disabled-border-color: var(--mlh-red); }
.mlh-legacy .btn-outline-danger { --bs-btn-color: var(--mlh-paper-link); --bs-btn-border-color: var(--mlh-paper-link); --bs-btn-hover-bg: var(--mlh-red); --bs-btn-hover-border-color: var(--mlh-red); }
.mlh-legacy .btn-outline-secondary { --bs-btn-color: var(--mlh-ink-2); --bs-btn-border-color: var(--mlh-ink-muted); --bs-btn-hover-bg: var(--mlh-ink-2); --bs-btn-hover-border-color: var(--mlh-ink-2); }
.mlh-legacy .form-control { background: #FBF6EC; border-color: rgba(42, 36, 32, .28); color: var(--mlh-ink); }
.mlh-legacy .list-group-item { background: transparent; color: var(--mlh-ink); border-color: rgba(42, 36, 32, .18); }
.mlh-legacy .nav-pills .nav-link { color: var(--mlh-ink-2); }
.mlh-legacy .nav-pills .nav-link.active { background: var(--mlh-red); color: #fff; }
.mlh-legacy .text-danger { color: var(--mlh-paper-link) !important; }
.mlh-legacy .btn:focus-visible, .mlh-legacy .form-control:focus { box-shadow: 0 0 0 .2rem rgba(176, 16, 31, .35); }

@media (prefers-reduced-motion: reduce) { .mlh-memory { transition: none; } .mlh-memory:hover { transform: none; } }

/* Paper-like auth cards aren't .mlh-paper, so flip the primary button to red here too. */
.mlh-auth-card .mlh-btn--primary, .mlh-sheet__profile ~ .mlh-btn--primary { background: var(--mlh-red); color: #fff !important; }
.mlh-auth-card .mlh-btn--primary:hover { background: var(--mlh-red-hover); }
.mlh-sheet > .mlh-btn--primary { background: var(--mlh-btn); color: var(--mlh-btn-text) !important; }
/* .mlh-auth sets its own vertical padding; keep the container's gutters. */
.mlh-auth.mlh-wrap { padding-left: 32px; padding-right: 32px; }
@media (max-width: 900px) { .mlh-auth.mlh-wrap { padding-left: 16px; padding-right: 16px; } }
.mlh-flash { padding-top: 24px; }

/* Without JavaScript the "More" link targets the sheet; it shows full-screen and the x link clears the hash. */
.mlh-sheet:target:not([open]) { display: flex; flex-direction: column; gap: 18px; position: fixed; inset: 0; z-index: 1100; padding: 16px 20px 28px; box-sizing: border-box; }
.mlh-tabbar__more, .mlh-iconbtn { text-decoration: none; }
.mlh-btn--ringed { box-shadow: 0 0 0 3px var(--mlh-btn), inset 0 0 0 1px var(--mlh-action-ring); }
@media (max-width: 900px) { body.mlh--app { --mlh-bottom-offset: calc(64px + env(safe-area-inset-bottom)); } }

/* ---------- Stamp journey (JOURNEY §5–§7): page layout around the kit's rows, chips and status marks ---------- */
.mlh-inline { display: inline-flex; margin: 0; }
.mlh-link { background: none; border: 0; padding: 10px 2px; min-height: 44px; color: inherit; font: 600 15px var(--mlh-font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mlh-notice { margin: 0; padding: 12px 16px; border-radius: var(--mlh-radius); background: var(--mlh-surface); border: 1px solid var(--mlh-line-strong); box-shadow: inset 4px 0 0 var(--mlh-btn); }
.mlh-toast__text { flex: 1; }
.mlh-alert p { margin: 0; }

.mlh-stamp-page { padding-top: 40px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; }
.mlh-stamp-page__head .mlh-eyebrow { margin: 0 0 10px; }
.mlh-stamp-page__tabs { border-bottom: 1px solid var(--mlh-line); }
.mlh-stamp-page__layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.mlh-stamp-page__main, .mlh-stamp-page__list { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mlh-stamp-page__side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mlh-stamp-page__panel { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.mlh-stamp-page__panel p { margin: 0; }

.mlh-search { display: flex; flex-direction: column; gap: 10px; }
.mlh-search__box { display: flex; gap: 10px; }
.mlh-search__box .mlh-input { flex: 1; min-width: 0; font-size: 18px; }
.mlh-search__help { margin: 0; color: var(--mlh-text-muted); font-size: 14px; }
.mlh-filters { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mlh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
a.mlh-chip, span.mlh-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; box-sizing: border-box; }
a.mlh-chip:hover { color: var(--mlh-text); border-color: var(--mlh-text-muted); }
.mlh-chip[aria-current="page"], .mlh-chip[aria-current="true"] { background: var(--mlh-text); color: var(--mlh-ground-end); border-color: var(--mlh-text); }
.mlh-results { display: flex; flex-direction: column; gap: 10px; }
.mlh-results-head { margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 15px; color: var(--mlh-text-soft); }
.mlh-row__act { flex: none; display: flex; align-items: center; gap: 12px; }
@media (max-width: 600px) { .mlh-row { flex-wrap: wrap; } .mlh-row__act { width: 100%; justify-content: flex-end; } }

.mlh-seasonpick { display: flex; flex-direction: column; gap: 12px; }
.mlh-seasonpick__group { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 600px) { .mlh-seasonpick__group { grid-template-columns: minmax(0, 1fr); } .mlh-seasonpick__group .mlh-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } }
.mlh-season-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.mlh-season-head__name { display: flex; align-items: center; gap: 12px; }
.mlh-season-head__step { border: 1px solid var(--mlh-line-strong); border-radius: 8px; }
.mlh-season-head .mlh-seg { margin-left: auto; }
.mlh-season-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mlh-season-filters__field { width: auto; min-height: 44px; flex: 0 1 200px; }
.mlh-season-filters select option { color: var(--mlh-ink); }
.mlh-season-filters__order { margin-left: auto; font-size: 14px; }
.mlh-srow__haword { display: none; }
.mlh-srow__failed { font: 600 13px var(--mlh-font-body); color: var(--mlh-error); }
.mlh-srow--error { box-shadow: inset 4px 0 0 var(--mlh-error); }
@media (max-width: 600px) { .mlh-srow__haword { display: inline; } .mlh-season-head .mlh-seg { margin-left: 0; width: 100%; } }
/* Without JS the real checkbox carries the tick; site.js mirrors it onto aria-checked. */
.mlh-slist--pick .mlh-srow:has(input:checked) { background: var(--mlh-surface-selected); box-shadow: inset 4px 0 0 var(--mlh-action); }
.mlh-slist--pick .mlh-srow:has(input:checked) .mlh-tick { background: var(--mlh-action); border-color: var(--mlh-btn); }
.mlh-slist--pick .mlh-srow:has(input:focus-visible) { outline: 3px solid var(--mlh-focus); outline-offset: -3px; }
.mlh-slist--pick .mlh-srow:focus-visible { outline: 3px solid var(--mlh-focus); outline-offset: -3px; }
@media (max-width: 900px) { body:has(.mlh-creambar) .mlh-tabbar { display: none; } }
.mlh-pick { display: flex; flex-direction: column; gap: 14px; }
.mlh-pick__later { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mlh-creambar__count { font: 800 20px var(--mlh-font-display); }
.mlh-creambar__gap { flex: 1; }
.mlh-creambar .mlh-link { color: var(--mlh-paper-link); }

.mlh-batch { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.mlh-batch p { margin: 0; }
.mlh-batch__head { display: flex; align-items: center; gap: 16px; }
.mlh-batch__line { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(42, 36, 32, .15); font-size: 15px; }
.mlh-batch__ok, .mlh-batch__bad { flex: none; width: 22px; text-align: center; font-weight: 800; }
.mlh-batch__ok { color: var(--mlh-ok); }
.mlh-batch__bad { color: var(--mlh-red); }
.mlh-batch__failed { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mlh-batch__failed li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.mlh-batch .mlh-link { color: var(--mlh-paper-link); }

.mlh-ywt { padding: 56px 0 64px; }
.mlh-ywt__inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.mlh-ywt__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mlh-ywt__copy p { margin: 0; }
.mlh-ywt__saved { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--mlh-link-hover); }
.mlh-ywt__tick { width: 26px; height: 26px; border-radius: 50%; background: var(--mlh-btn); color: var(--mlh-btn-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mlh-ywt__title { margin: 0; font: 800 clamp(48px, 6vw, 84px)/.98 var(--mlh-font-display); letter-spacing: -.015em; }
.mlh-ywt__match { font: 700 24px var(--mlh-font-display); }
.mlh-ywt__detail { font-size: 17px; color: var(--mlh-text-soft); }
.mlh-ywt__kalam { font-size: 26px; line-height: 1.3; color: var(--mlh-link-hover); transform: rotate(-1.5deg); transform-origin: left; }
.mlh-ywt__actions { margin-top: 8px; }
.mlh-ywt__add { min-height: 52px; font-size: 17px; }
.mlh-ywt__more, .mlh-ywt__undo { font-size: 14px; color: var(--mlh-link-hover); }
.mlh-ywt__art { flex: 1 1 460px; min-width: 0; position: relative; min-height: 300px; }
.mlh-ywt__ticket { position: absolute; left: 0; right: 50px; top: 30px; transform: rotate(-4deg); }
.mlh-ywt__ticket-title { font: 800 28px/1.05 var(--mlh-font-display); }
.mlh-ywt__ticket .mlh-label--caps { font-size: 13px; color: var(--mlh-ink-2); }
.mlh-ywt__stamp { position: absolute; right: 0; bottom: 10px; }
.mlh-ywt__after { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 20px; }
.mlh-ywt__firsts { margin: 0; font-size: 16px; color: var(--mlh-text-soft); }
@media (max-width: 600px) {
  .mlh-ywt { padding: 32px 0 40px; }
  .mlh-ywt__art { min-height: 0; display: flex; flex-direction: column; align-items: flex-end; }
  .mlh-ywt__ticket { position: relative; left: auto; right: auto; top: auto; width: 100%; transform: rotate(-2deg); }
  .mlh-ywt__stamp { position: relative; right: 8px; bottom: auto; margin-top: -18px; }
  .mlh-ywt__ticket-title { font-size: 22px; }
}

.mlh-matches-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mlh-matches-removed { margin: 0; font-weight: 600; }
.mlh-removed { display: flex; flex-direction: column; gap: 12px; }
.mlh-removed__item { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.mlh-removed__item p { margin: 0; }
.mlh-removed__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.mlh-removed__delete summary { cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.mlh-removed__confirm { margin-top: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; }

.mlh-manage { margin-top: 6px; }
.mlh-manage summary { list-style: none; width: fit-content; }
.mlh-manage summary::-webkit-details-marker { display: none; }
.mlh-manage__menu { list-style: none; margin: 8px 0 0; padding: 6px 0; border-top: 1px solid rgba(42, 36, 32, .15); }
.mlh-manage__menu a { display: flex; align-items: center; min-height: 44px; font-weight: 600; }
.mlh-dialog { border: 0; padding: 24px; max-width: min(480px, calc(100% - 32px)); box-sizing: border-box; }
.mlh-dialog p { margin: 12px 0 0; }
.mlh-dialog .mlh-actions { margin-top: 18px; }
.mlh-dialog::backdrop { background: rgba(20, 3, 5, .8); }
/* Without JavaScript the "Remove…" link targets the dialog, which then shows in place. */
.mlh-dialog:target:not([open]) { display: block; position: static; margin: 16px 0 0; }
.mlh-match__more { margin: 14px 0 0; font-weight: 600; }

/* Phone collage: the kit's `zoom: .56; width: 178%` overflows in browsers with standardized CSS zoom,
   where a percentage width is not scaled by zoom. A fixed design width scales predictably, so each step
   below keeps 640px × zoom inside the 16px-gutter column. */
@media (max-width: 900px) {
  .mlh-hero__art { overflow: hidden; }
  .mlh-collage { width: 640px; zoom: .8; margin: 0 auto; }
}
@media (max-width: 600px) { .mlh-collage { zoom: .6; } }
@media (max-width: 415px) { .mlh-collage { zoom: .55; } }
@media (max-width: 383px) { .mlh-collage { zoom: .5; } }
@media (max-width: 351px) { .mlh-collage { zoom: .44; } }

/* Select several on phones has no action column, so a locked row's status mark drops under the title
   instead of wrapping into the 26px tick column, where it spilled off the row's left edge. */
@media (max-width: 600px) {
  .mlh-slist--pick .mlh-srow[aria-disabled="true"] .mlh-srow__act { grid-column: 3; justify-content: flex-start; }
}

/* Short pages: the footer sits at the bottom of the window instead of leaving bare ground below it. */
body.mlh { min-height: 100vh; display: flex; flex-direction: column; }
body.mlh > .mlh-main { flex: 1 0 auto; }

/* Tab bar: solid surface, and the active Stamp "+" keeps its crimson on the cream disc. */
.mlh-tabbar { background: var(--mlh-surface-2); }
.mlh-tabbar__stamp span { box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 0 4px var(--mlh-surface-2), 0 0 0 6px var(--mlh-btn); }
.mlh-tabbar a.mlh-tabbar__stamp[aria-current="page"] svg { color: var(--mlh-ground-mid); }

/* Text on the paper ticket uses ink, not the light muted colour meant for the crimson ground. */
.mlh-ticket .mlh-muted, .mlh-ticket__main .mlh-label { color: var(--mlh-ink-muted); }
.mlh-ticket__stub .mlh-label { color: var(--mlh-ink-2); }

/* Rows already in your history: the plain name opens the match, and the whole row is the target. */
.mlh-srow, .mlh-row { position: relative; }
.mlh-srow__title a, .mlh-row__title a { color: inherit !important; text-decoration: none; }
.mlh-srow__title a::after, .mlh-row__title a::after { content: ""; position: absolute; inset: 0; }
.mlh-srow__title a:hover, .mlh-row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mlh .mlh-srow__title a:focus-visible, .mlh .mlh-row__title a:focus-visible { outline: none; }
.mlh-srow:has(.mlh-srow__title a:focus-visible), .mlh-row:has(.mlh-row__title a:focus-visible) { outline: 3px solid var(--mlh-focus); outline-offset: -3px; }

/* Row dates: the month and weekday pieces render inline on wide screens, stacked under the day on phones. */
.mlh-row__date b .mlh-row__mon { font: inherit; color: inherit; }
.mlh-srow__meta { overflow-wrap: normal; }
.mlh-srow__haword--sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
  .mlh-srow__day { display: block; font-size: 18px; }
  .mlh-srow__mon { display: block; font: 500 12px var(--mlh-font-body); color: var(--mlh-text-muted); }
}
@media (max-width: 360px) {
  .mlh-row__date { width: 44px; text-align: center; }
  .mlh-row__date b .mlh-row__mon { display: block; font: 500 12px var(--mlh-font-body); color: var(--mlh-text-muted); }
  .mlh-row__sep { display: none; }
  .mlh-row__wd { display: block; }
}

/* Select several bar: a disabled submit is an outline, not the dashed "after the beta" look. */
.mlh-creambar [data-mlh-clear][hidden] { display: none; }
.mlh-creambar [data-mlh-submit]:disabled { background: transparent; color: var(--mlh-red) !important; box-shadow: inset 0 0 0 2px var(--mlh-red); opacity: .6; cursor: not-allowed; }
@media (max-width: 600px) {
  .mlh-creambar { gap: 4px 12px; padding: 12px 16px; }
  .mlh-creambar__count { flex: 1 1 0; min-width: 0; font-size: 18px; }
  .mlh-creambar__gap, .mlh-creambar .mlh-btn--paper { display: none; }
  .mlh-creambar [data-mlh-submit] { flex: 1 1 100%; justify-content: center; }
}

/* Sign-in page: one card, three modes (sign in, create account, reset). */
.mlh-auth__form [hidden] { display: none !important; }
.mlh-alert--ok { background: var(--mlh-ok-surface); border-color: var(--mlh-ok); }
.mlh-auth-card__fields { display: flex; flex-direction: column; gap: 18px; }
.mlh-or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; color: var(--mlh-ink-muted); }
.mlh-or::before, .mlh-or::after { content: ""; flex: 1; border-top: 2px dashed rgba(42, 36, 32, .3); }
.mlh-auth-card button:disabled { opacity: .6; cursor: not-allowed; }