/* ==========================================================================
   St. Theresa Oral History — layer on top of the main site's design system.
   /assets/css/site.css is the main site's styles.css, copied in at build time, so tokens
   (--navy, --gold, --red, --font-head, --step-*, --sp-*) and components (.btn, .card,
   .callout, .pagehead, .masthead, .footer, .chips) are shared. Only add what the microsite
   needs here. Page-specific styles live in their own files (record.css, admin.css, pages.css).
   Audience note: many contributors are in their 70s and 80s. Generous type, 48px+ targets,
   plain words, strong contrast.
   ========================================================================== */

/* Text size (remembered per device) -------------------------------------- */
html[data-textsize="large"] { font-size: 112.5%; }
html[data-textsize="xlarge"] { font-size: 125%; }

.oh-textsize {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; white-space: nowrap;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--navy); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; min-height: 44px; cursor: pointer;
}
.oh-textsize:hover { border-color: var(--navy); }
.oh-textsize__glyph { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1; }
.oh-textsize__glyph span { font-size: 1.3rem; }
/* In the top bar (wider screens): a quiet text button on navy. */
.utilitybar .oh-textsize--util {
  margin-left: auto; min-height: 32px; padding: 0.2rem 0.8rem; font-size: 0.85rem;
  color: #fff; background: transparent; border-color: rgba(255,255,255,0.35);
}
.utilitybar .oh-textsize--util:hover { border-color: var(--gold); color: var(--gold); }
/* In the masthead: phones only (the top bar is hidden under 621px). */
.oh-textsize--compact { display: none; padding: 0.35rem 0.7rem; }
@media (max-width: 620px) { .oh-textsize--compact { display: inline-flex; margin-left: auto; } }

/* Brand: the parish logo plus the project name ------------------------------ */
.masthead .container { min-height: 76px; flex-wrap: nowrap; }
.oh-brand { display: flex; align-items: center; gap: 0.9rem; flex: none; text-decoration: none; color: var(--navy); }
.oh-brand__logo { height: 52px; width: auto; display: block; }
.oh-brand__project {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.15; color: var(--navy);
  padding-left: 0.9rem; border-left: 2px solid var(--gold); white-space: nowrap;
}
.oh-brand:hover .oh-brand__project { color: var(--red); }
@media (max-width: 620px) {
  .masthead .container { min-height: 68px; }
  .oh-brand { flex-direction: column; align-items: flex-start; gap: 3px; }
  .oh-brand__logo { height: 38px; }
  .oh-brand__project {
    font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    padding-left: 0; border-left: 0; line-height: 1;
  }
}

/* Navigation ----------------------------------------------------------------
   The real logo is wider than the old "T" mark, so the menu folds into the hamburger at
   1180px instead of the main site's 940px. These rules mirror the main site's mobile nav. */
.masthead .nav__link { white-space: nowrap; }
.nav__ask { white-space: nowrap; }
.oh-nav-extra { display: none; }
.oh-nav-close-item { display: none; }
html { overflow-x: clip; }
@media (max-width: 1180px) {
  /* The shared masthead's backdrop-filter makes it the containing block for position:fixed
     children, which trapped the off-canvas menu inside the 68px header. Drop it here. */
  .masthead { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  /* The top bar keeps only the parish link and text size; its other links live in the menu. */
  .utilitybar .container > a:not(:first-child) { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none;
    width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 20px; height: 2px; background: var(--navy); position: relative; transition: 0.2s;
  }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
  .oh-textsize--compact + .nav-toggle { margin-left: var(--sp-2); }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: #fff; margin: 0;
    transform: translateX(100%); box-shadow: var(--shadow-2);
    padding: var(--sp-5) var(--sp-4); overflow-y: auto; z-index: 70;
  }
  .masthead .nav:not([data-open="true"]) { visibility: hidden; transition: transform 0.25s var(--ease), visibility 0s linear 0.25s; }
  .masthead .nav[data-open="true"] { visibility: visible; transform: translateX(0); transition: transform 0.25s var(--ease); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link { padding: 0.85rem 0.5rem; display: block; }
  .nav__ask { margin: var(--sp-4) 0 0; width: 100%; justify-content: center; }
  .oh-nav-extra { display: list-item; }
  .nav__list > li.oh-nav-close-item { border-bottom: 0; display: flex; }
  .oh-nav-close {
    display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4) auto;
    font: inherit; font-weight: 600; color: var(--navy); background: var(--paper-2);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; min-height: 44px; cursor: pointer;
  }
  body[data-navopen="true"] { overflow: hidden; }
}
@media (min-width: 1181px) {
  .masthead .nav { margin-left: auto; }
  .nav-toggle { display: none; }
}

/* The header keeps a fixed size so it always fits: the text-size control enlarges the reading
   text below it (browser zoom still scales everything, header included). */
.utilitybar { font-size: 15px; }
.utilitybar .container > a { white-space: nowrap; }
.masthead .nav__link { font-size: 17px; padding: 10px 12px; }
.masthead .btn-sm { font-size: 15px; padding: 7px 14px; }
.oh-textsize { font-size: 15px; }
.utilitybar .oh-textsize--util { font-size: 14px; }
.oh-textsize__glyph { font-size: 16px; }
.oh-textsize__glyph span { font-size: 21px; }
.oh-brand__project { font-size: 18px; }
.oh-nav-close { font-size: 16px; }
@media (max-width: 620px) {
  .oh-brand__project { font-size: 11px; }
  .masthead .container { padding-inline: 24px; column-gap: 8px; }
  .oh-textsize--compact { padding: 6px 10px; }
  .oh-textsize--compact + .nav-toggle { margin-left: 8px; }
}
@media (max-width: 359px) { .masthead .container { padding-inline: 16px; } }
.utilitybar .container > a { padding-block: 10px; }
.utilitybar .oh-textsize--util { min-height: 44px; }

/* Wrapping: balanced headings and labels, no lonely last words in paragraphs. */
h1, h2, h3, h4, legend, summary, th, figcaption, .lede, .eyebrow, .btn, .choice__title, .oh-kicker, .oh-footer__h { text-wrap: balance; }
p, li, dd, .field__hint, .choice__desc { text-wrap: pretty; }
/* `text-wrap: balance` also switches wrapping back on, so anything that must stay on one line
   says so again here, after the balance rule. */
.nav__ask, .masthead .nav__link, .oh-brand__project, .oh-textsize, .utilitybar .container > a { white-space: nowrap; text-wrap: nowrap; }

/* Accessibility helpers -------------------------------------------------- */
.oh-live, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
main:focus { outline: none; }
[hidden] { display: none !important; }

/* Footer additions ------------------------------------------------------- */
.oh-footer__h {
  color: #fff; font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--sp-3); font-weight: 700;
}
.oh-footer__muted { color: #c9c9e0; margin-top: 0.5rem; }
.oh-footer__logo { display: inline-block; }
.oh-footer__logo img { height: 56px; width: auto; display: block; }
.oh-footer__logo:hover { opacity: 0.9; }
.oh-footer__project {
  color: var(--gold); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin: var(--sp-3) 0 0;
}
.oh-footer__debug {
  font: inherit; font-size: 0.82rem; color: #fff; background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: 0.5rem 1rem; min-height: 44px;
}
.oh-footer__debug:hover { border-color: var(--gold); color: var(--gold); }

/* Buttons ---------------------------------------------------------------- */
.btn-xl { font-size: var(--step-1); padding: 1rem 1.75rem; min-height: 60px; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #8f000d; color: #fff; }
.btn-link {
  background: none; border: 0; padding: 0.25rem 0; min-height: 44px; font: inherit; font-weight: 600;
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn-link:hover { color: var(--red); }
.btn .oh-spinner { width: 1em; height: 1em; }

/* Page head (reuses .pagehead from the main site) ------------------------ */
.pagehead .lede { margin-bottom: 0; }
.oh-section-head { max-width: 60ch; margin-bottom: var(--sp-6); }
.oh-section-head h2 { margin-bottom: var(--sp-3); }

/* Forms ------------------------------------------------------------------ */
.oh-form { display: grid; gap: var(--sp-5); max-width: 640px; }
.oh-form--wide { max-width: 860px; }
.field { display: grid; gap: var(--sp-2); }
.field > label, .field__label, .oh-form legend {
  font-weight: 700; color: var(--navy); font-size: var(--step-0);
}
.field__hint { color: var(--muted); font-size: 0.95rem; margin: 0; }
.field__optional { font-weight: 500; color: var(--muted); font-size: 0.9rem; }
.oh-form input[type="text"], .oh-form input[type="email"], .oh-form input[type="tel"],
.oh-form input[type="number"], .oh-form input[type="search"], .oh-form select, .oh-form textarea,
.oh-input {
  width: 100%; font: inherit; font-size: var(--step-0); color: var(--ink); background: #fff;
  border: 2px solid #8a8aa0; border-radius: var(--radius); padding: 0.75rem 0.9rem; min-height: 52px;
}
.oh-form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.oh-form input:focus-visible, .oh-form select:focus-visible, .oh-form textarea:focus-visible, .oh-input:focus-visible {
  border-color: var(--navy); outline: 3px solid var(--gold); outline-offset: 1px;
}
.oh-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-3); min-width: 0; }
.oh-form legend { padding: 0; margin-bottom: var(--sp-2); }

/* Big radio / checkbox cards */
.choice-list { display: grid; gap: var(--sp-3); }
.choice {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
  padding: var(--sp-4); border: 2px solid var(--line); border-radius: var(--radius-lg); background: #fff; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.choice:hover { border-color: #6b6b85; }
.choice input { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.choice__title { font-weight: 700; color: var(--navy); display: block; }
.choice__desc { color: var(--muted); font-size: 0.95rem; display: block; margin-top: 2px; }
.choice:has(input:checked) { border-color: var(--navy); background: var(--paper-2); box-shadow: inset 4px 0 0 var(--gold); }
.choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.choice--inline { display: inline-grid; padding: var(--sp-3) var(--sp-4); }

/* Errors */
.field--error input, .field--error select, .field--error textarea { border-color: var(--red); }
.field--error .choice { border-color: #e7a3a9; }
.field__error { color: var(--red); font-weight: 600; font-size: 0.95rem; margin: 0; display: flex; gap: var(--sp-2); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--red); color: #fff; font-size: 0.8em; flex: none; margin-top: 0.15em; }
.form-error {
  border: 2px solid var(--red); background: #fbeaec; border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
}
.form-error h2, .form-error h3 { color: #7c000b; font-size: var(--step-1); margin-bottom: var(--sp-2); }
.form-error ul { margin: 0; }
.form-error a { color: #7c000b; font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Notices ---------------------------------------------------------------- */
.oh-notice {
  display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg);
  background: var(--paper-2); border: 1px solid var(--line); border-left: 5px solid var(--navy);
}
.oh-notice--warn { border-left-color: var(--gold); background: var(--gold-soft); }
.oh-notice--error { border-left-color: var(--red); background: #fbeaec; }
.oh-notice--success { border-left-color: #1d7a46; background: #eaf6ef; }
.oh-notice > :last-child { margin-bottom: 0; }
.oh-notice h2, .oh-notice h3 { font-size: var(--step-1); margin: 0; }

/* Progress --------------------------------------------------------------- */
.oh-progress { height: 14px; border-radius: 999px; background: var(--mist); overflow: hidden; border: 1px solid var(--line); }
.oh-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--navy), #2a2a8a); border-radius: 999px; transition: width 0.25s var(--ease); }
.oh-progress--gold .oh-progress__bar { background: var(--gold); }

.oh-spinner {
  display: inline-block; width: 1.25em; height: 1.25em; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent; animation: oh-spin 0.8s linear infinite; vertical-align: -0.2em;
}
@keyframes oh-spin { to { transform: rotate(360deg); } }

/* Status pills (admin + public) ----------------------------------------- */
.oh-pill {
  display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.02em; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--mist); color: var(--ink); white-space: nowrap;
}
.oh-pill--new { background: #e8f0ff; border-color: #b7cbf4; color: #173a7a; }
.oh-pill--reviewed { background: var(--gold-soft); border-color: #f0dfa0; color: #6b5300; }
.oh-pill--transcribed { background: #efe8fb; border-color: #d3c3f0; color: #4a2a86; }
.oh-pill--published { background: #eaf6ef; border-color: #b6dfc5; color: #155c34; }
.oh-pill--restricted { background: #fbeaec; border-color: #f0b9bf; color: #7c000b; }

/* Steps (How it works) -------------------------------------------------- */
.oh-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: oh-step; }
.oh-steps > li { counter-increment: oh-step; position: relative; padding: var(--sp-5); padding-top: calc(var(--sp-5) + 2.6rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.oh-steps > li::before {
  content: counter(oh-step); position: absolute; top: var(--sp-5); left: var(--sp-5);
  width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--navy); color: var(--gold);
  font-family: var(--font-head); font-weight: 700; display: grid; place-items: center;
}
.oh-steps h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.oh-steps p { margin: 0; color: var(--muted); }

/* Timeline -------------------------------------------------------------- */
.oh-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* An even gap either side of the dot: year column 4.25rem, gap 2rem, line at the gap's middle. */
.oh-timeline::before { content: ""; position: absolute; left: calc(5.25rem - 1px); top: 0.4rem; bottom: 0.4rem; width: 2px; background: linear-gradient(var(--gold), var(--navy)); }
.oh-timeline > li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 2rem; padding: 0 0 var(--sp-5); position: relative; }
.oh-timeline > li::before { content: ""; position: absolute; left: calc(5.25rem - 7px); top: 0.45rem; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); }
.oh-timeline__year { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: var(--step-1); text-align: right; line-height: 1.2; white-space: nowrap; }
@media (max-width: 420px) {
  .oh-timeline::before { left: calc(4.375rem - 1px); }
  .oh-timeline > li { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.75rem; }
  .oh-timeline > li::before { left: calc(4.375rem - 7px); }
}
.oh-timeline__text { margin: 0; max-width: 62ch; }
.oh-timeline > li.is-now::before { background: var(--gold); border-color: var(--red); }

/* Misc ------------------------------------------------------------------ */
.oh-kicker { font-family: "Cormorant Garamond", var(--font-head); font-style: italic; font-size: var(--step-1); color: var(--muted); }
.oh-refcode {
  display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--step-2);
  font-weight: 700; letter-spacing: 0.08em; color: var(--navy); background: var(--gold-soft);
  border: 2px dashed #e0c25a; border-radius: var(--radius); padding: 0.35rem 0.9rem;
}
.oh-meta { color: var(--muted); font-size: 0.92rem; }
.oh-divider { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* The debug overlay reuses the main site's .sttlog-* styles; keep it above everything. */
.sttlog-overlay { z-index: 1000; }

@media print {
  .oh-textsize, .oh-footer__debug, .oh-live { display: none !important; }
}