/* mediamindfulness/readability.css
   ------------------------------------------------------------------------
   Loaded AFTER each page's inline <style>, so it wins at equal specificity
   without a single !important. That ordering is the whole trick: the sitewide
   readability pass lives in a <link> ABOVE the page styles, which is why its
   `.wrap p{max-width:65ch}` never reached the exercise sheets. Those sheets
   use `.page`, and their component CSS (`.desc`, `.g-verdict`, `.audit-tbl
   textarea`) outranked it anyway.

   Everything here is inside @media screen. The print rules on each page are
   already tuned (the Lucy sheet paginates to exactly 10 pages) and must not
   move a millimetre.

   Measured, not guessed. Numbers come from puppeteer emulate() at real device
   metrics, because headless Chrome floors its viewport at 500px and will
   happily tell you a phone layout passes when it was never rendered at phone
   width. Four findings drove this file:

   1. 39 form controls across four sheets sat at 14-15px. iOS Safari zooms the
      whole viewport when you focus a field under 16px, so on a phone the page
      lurches sideways every time a catechist taps a box. These are worksheets
      people fill in on phones. Nothing below 16.5px goes near an input again.
   2. Line length ran to 92 characters on the Lucy sheet. `max-width:65ch` does
      NOT give you 65 characters: `ch` is the width of "0", and Newsreader's
      zero is narrower than its average lowercase letter, so 65ch measured out
      at 78-81 real characters. The cap here is set in ch but calibrated
      against measured average character width.
   3. Body copy on the sheets was still 14-15px while the rest of the site had
      moved to 17px.
   4. The four-column input tables were unusable at 375px: three text fields
      squeezed to about 90px each. They stack now.
*/

@media screen {

  :root {
    /* 17px at 375 wide, 19px by 1280. One scale for the whole site. */
    --mm-body: clamp(1.0625rem, 1.005rem + 0.245vw, 1.1875rem);
    /* 16px to 17.5px, for genuinely secondary copy */
    --mm-sm: clamp(1rem, 0.967rem + 0.14vw, 1.0938rem);
    /* never below 16px, or iOS zooms on focus */
    --mm-form: clamp(1.03rem, 1.0rem + 0.13vw, 1.0938rem);
    --mm-lh: 1.62;
    /* ~66 real characters in Newsreader, not 54 */
    --mm-measure: 54ch;
    --mm-tap: 44px;
  }

  /* ---- Prose ----------------------------------------------------------
     Selectors mirror the ones the pages actually declare, at matching
     specificity, so source order alone decides. */
  .desc,
  .prompt-box,
  .prayer,
  .header .subtitle,
  .followup p,
  .receipt .r-turn,
  .amen,
  .send-body,
  .gotcha .g-watch,
  .gotcha .g-verdict,
  .objection .q,
  .objection .a,
  .rule-block span,
  .moves .desc em,
  .moves .step em,
  .layer .lt span {
    font-size: var(--mm-body);
    line-height: var(--mm-lh);
  }

  .prompts li,
  .move-prompts li,
  .tip-list li,
  .test-list li {
    font-size: var(--mm-body);
    line-height: var(--mm-lh);
  }

  .result-note,
  .srcs li,
  .srcs .caveat,
  .gotchas .lede,
  .closing .scripture,
  .footer-saint,
  .test-list .sub,
  .examples,
  .schedule-item .text {
    font-size: var(--mm-sm);
    line-height: var(--mm-lh);
  }

  /* Inline markers inside running copy read as noise when they are much
     smaller than the sentence carrying them. Bring them up to the line. */
  .result-note b {
    font-size: 0.78em;
    letter-spacing: 1.1px;
  }

  /* ---- Measure ---------------------------------------------------------
     Capped on blocks that carry no rule or border of their own. Anything with
     a border-bottom acting as a separator is left full width on purpose: a
     capped max-width would pull the rule off the end of its own text. */
  .desc,
  .followup p,
  .send-body,
  .srcs .caveat,
  .gotchas .lede,
  .gotcha .g-watch,
  .gotcha .g-verdict,
  .receipt .r-turn,
  .page p,
  .page li,
  .step-body p {
    max-width: var(--mm-measure);
  }

  /* ---- Measure on the .wrap pages --------------------------------------
     site.css caps .moves .desc at 52ch and .tagline/.sub at 62ch, but .note
     carries no cap at all and ran 109 characters on the landing page, which
     is the first thing anyone reaching this site from the printed QR code
     sees. Centred text is the worst case for a long line: the eye has no
     fixed left edge to return to.
     .moves li is deliberately NOT capped. It is a two-column grid with a
     border-bottom separator; its text lives in .desc, which is already
     capped, and shortening the li would pull the rule off the end of its
     own row. */
  .wrap .note,
  .section-inner .note,
  .wrap .tagline,
  .wrap .sub,
  .section-inner p,
  .section-inner .lede {
    max-width: var(--mm-measure);
  }

  .wrap .note,
  .section-inner .note,
  .wrap .tagline,
  .wrap .sub {
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Form controls ---------------------------------------------------
     The iOS zoom floor, plus a 44px minimum so a field is also a tap target.
     Cormorant Garamond is named all over these pages but is not in fonts.css
     any more, so those fields were silently rendering in Georgia while the
     copy around them was Newsreader. */
  .page.page textarea,
  .page.page select,
  .page.page input,
  .wrap.wrap textarea,
  .wrap.wrap select,
  .wrap.wrap input {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-size: var(--mm-form);
    line-height: 1.45;
  }

  .page.page textarea,
  .page.page select,
  .page.page input[type="text"],
  .page.page input[type="email"],
  .wrap.wrap textarea,
  .wrap.wrap select,
  .wrap.wrap input[type="text"],
  .wrap.wrap input[type="email"] {
    min-height: var(--mm-tap);
    padding: 10px 12px;
  }

  .page.page select,
  .wrap.wrap select {
    padding-right: 30px;
  }

  /* The radios behind the decision cards are visually hidden; keep them so. */
  .decision-opt input,
  .opt input[type="radio"],
  .opt input[type="checkbox"] {
    min-height: 0;
    padding: 0;
  }

  /* ---- Touch targets ---------------------------------------------------
     Both naming conventions are live on this site: the top-level pages use
     .lang-toggle / .nav-bottom, the exercise sheets use .topbar .lang /
     .topbar .actions. The earlier 44px pass only named the first set, so on
     every exercise sheet the language switch stayed an 18px target.
     Inline links inside a sentence are deliberately left alone: WCAG 2.5.8
     exempts them, and inflating them would break the paragraph. */
  @media (pointer: coarse) {
    .topbar .actions a,
    .topbar .actions button,
    .topbar .lang a,
    .lang-toggle a,
    .nav-bottom a,
    .btn,
    .cta {
      min-height: var(--mm-tap);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .topbar .lang {
      align-items: stretch;
    }

    /* The resource list is a list of destinations, not links inside a
       sentence, so the 2.5.8 inline exemption does not cover them. They were
       19px tall. */
    .reslist a,
    .reslist .plain {
      min-height: var(--mm-tap);
      display: inline-flex;
      align-items: center;
    }
  }

  /* A pull quote is still a line of reading. 84 characters at 19px in the
     virtue report is the longest measure left on the site. */
  .wrap .pull,
  .wrap .pull p {
    max-width: var(--mm-measure);
  }

  /* ---- Input tables on small screens -----------------------------------
     Four columns of text fields at 375px gave each field about 90px. Below
     560px the rows become stacked cards: full-width fields, header row
     hidden, placeholders doing the labelling they were already written for.
     The two select columns get a visible label, because "Yes / No / Unsure"
     on its own does not say what the question was. */
  @media (max-width: 560px) {
    .audit-tbl thead,
    .perm-tbl thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .audit-tbl, .audit-tbl tbody, .audit-tbl tr, .audit-tbl td,
    .perm-tbl, .perm-tbl tbody, .perm-tbl tr, .perm-tbl td {
      display: block;
      width: 100%;
    }

    .audit-tbl tr,
    .perm-tbl tr {
      border: 1px solid var(--rule, #e0d8cc);
      border-radius: 6px;
      background: var(--white, #fff);
      padding: 12px 14px 14px;
      margin-bottom: 12px;
    }

    .audit-tbl td,
    .perm-tbl td {
      border: none;
      padding: 5px 0 0;
    }

    .audit-tbl td:first-child {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--gold, #a08030);
      text-align: left;
      width: 100%;
      padding: 0 0 4px;
    }

    /* Labels for the fields whose own options do not say what was asked. */
    .audit-tbl td:nth-child(4)::before,
    .perm-tbl td:nth-child(3)::before,
    .perm-tbl td:nth-child(4)::before {
      display: block;
      font-family: 'Cinzel', serif;
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--ink3, #9a8a78);
      margin-bottom: 3px;
    }

    .audit-tbl td:nth-child(4)::before { content: "Match?"; }
    .perm-tbl td:nth-child(3)::before { content: "Need it?"; }
    .perm-tbl td:nth-child(4)::before { content: "Decision"; }

    /* Six-digit escapes on purpose. A CSS hex escape consumes up to six hex
       digits, so "\00BFCoincide?" parses as \00BFC and renders a tofu box
       with the C eaten. It read "[]OINCIDE?" on the phone while every metric
       in the audit stayed green. */
    body.lang-es .audit-tbl td:nth-child(4)::before { content: "\0000BFCoincide?"; }
    body.lang-es .perm-tbl td:nth-child(3)::before { content: "\0000BFLa necesita?"; }
    body.lang-es .perm-tbl td:nth-child(4)::before { content: "Decisi\0000F3n"; }

    .audit-tbl textarea,
    .perm-tbl input[type="text"] {
      min-height: 56px;
    }
  }

  /* ---- Narrow phones ---------------------------------------------------
     320px is still a live width (SE 1st gen, and any phone at large text
     settings). Give the gutters back rather than letting copy touch glass. */
  @media (max-width: 400px) {
    .page { padding-left: 16px; padding-right: 16px; }
    .step-body { padding-left: 14px; padding-right: 14px; }
    .gotchas { padding-left: 12px; padding-right: 12px; }
    .followup { padding-left: 13px; padding-right: 13px; }
  }
}