/* ============================ MOBILE ============================
   The ONE definition of "a phone" for this site is the @media line
   below: a touch screen (no hover, coarse pointer) at most 40rem
   (640px) wide. Every phone rule lives in this file, inside that one
   block; nothing else in the site tests for phones. If something looks
   wrong on a phone, the fix goes here. Desktop windows never match,
   however narrow: they freeze at the page floor and scroll sideways.
   Knobs: section 6 of theme.css. Loaded last, so it outranks the rest.
   ================================================================ */
@media (hover: none) and (pointer: coarse) and (max-width: 40rem) {

  /* ---- geometry: the panel alone, edge to edge ---- */
  :root { --ribbon: 0rem; }
  body { max-width: none; padding: 1.25rem 1.25rem 3rem; border-left: 0; border-right: 0; }
  body::before, body::after { display: none; }   /* no ribbon texture, no rail */
  .scroll-ribbon { display: none; }               /* the live face's scroll ribbon: not on phones */

  /* ---- type ---- */
  body { font-size: min(var(--body-size, 1.125rem), 1.125rem); }

  /* ---- hero: a smaller photo, so the name fits beside it ---- */
  .hero { gap: 1rem; margin-bottom: 2.4rem; }
  figure.portrait.hero-portrait { flex-basis: var(--mobile-portrait-width, 7.5rem); width: var(--mobile-portrait-width, 7.5rem); }
  figure.portrait { width: 6rem; }                 /* the exploratory face's framed portrait */

  /* ---- the menu: a horizontal strip, edge to edge ---- */
  .menu { margin-left: -1.25rem; margin-right: -1.25rem; }
  .menu-main, .menu-sub { flex-wrap: nowrap; overflow-x: auto; gap: 1.2rem; padding-left: 1.25rem; padding-right: 1.25rem; scrollbar-width: none; }
  .menu-main::-webkit-scrollbar, .menu-sub::-webkit-scrollbar { display: none; }
  .menu a, .menu label { white-space: nowrap; }
  .menu .who span { display: none; }   /* the photo alone marks identity on the strip */
  .menu-main > .cv-chip { margin-left: calc(0.45em - 1.2rem); }   /* "about (cv ↗)": the row's gap here taken back */

  /* ---- rows keep their two columns; the key column narrows ---- */
  .rrow .rkey { width: var(--mobile-key-width, 7rem); }
  .rrow .rbody { margin-left: calc(var(--mobile-key-width, 7rem) + var(--mobile-key-gap, 0.75rem)); }
  /* the library (/ask/library/): only a letter in the key column, so the papers get the width */
  .lib-list .rrow .rkey { width: 1.2rem; }
  .lib-list .rrow .rbody { margin-left: calc(1.2rem + var(--mobile-key-gap, 0.75rem)); }
  .rkey { font-size: 0.7rem; padding-top: 0; }
  .rrow.paper .rbody { min-height: 0; }
  .rtitle br.tb { display: none; }   /* a title's manual break is for the wide column; here it wraps on its own */

  /* ---- an open card spans the whole panel (the phone's key column + gap) ---- */
  .face-rl .rrow input.margin-toggle:checked + .marginreader {
    margin-left: calc(-1 * (var(--mobile-key-width, 7rem) + var(--mobile-key-gap, 0.75rem)));
    width: calc(100% + var(--mobile-key-width, 7rem) + var(--mobile-key-gap, 0.75rem));
  }

  /* ---- chips: a taller tap target (vertical padding on an inline never moves the line) ---- */
  .rline .mtrig { padding: calc(0.4em - 0.07em) var(--mark-x) calc(0.4em + 0.07em); }   /* a taller tap target, the letters still in the middle of a highlight (theme.css) */   /* the sideways room stays: the chips' negative margins (face.css) take it back */

  /* ---- the PDF opens in the phone's own viewer (a PDF in a frame cannot
     scroll on iOS): the frame's labels hide, the plain-link twin shows ---- */
  .rline .fr.m-open, .rline .fr.m-close { display: none; }
  /* the chat likewise goes straight to its own page (the card would give the
     conversation a sliver of the screen): its card labels hide too */
  .rline .app.m-open, .rline .app.m-close { display: none; }
  .rline .m-direct { display: inline; }
  .rline .m-direct::after { content: "↗"; top: 0; }

  /* ---- the exploratory ledger: stacked entries instead of a 4-column table ---- */
  table.ledger thead { display: none; }
  table.ledger, table.ledger tbody,
  table.ledger tr, table.ledger td { display: block; width: 100%; }
  table.ledger tr { padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); }
  table.ledger td { border: none; padding: 0.06rem 0; }
  table.ledger td.t-date, table.ledger td.type,
  table.ledger td:last-child {
  display: inline-block;
  width: auto;
  margin-right: 0.8rem;
  }
  table.ledger td.t-title { width: 100%; font-size: 1.05rem; }
}