/* Info (About / FAQ / Terms / Privacy / Timeline) and the Privacy page: one reading size and rhythm (2026-11-04).
   Body text at the site's body size (--fs-body, 1.65 line height), headings stand alone, the same row treatment
   (term + description) for every policy section, and the same accordion rows for FAQ, Terms and Privacy.
   Loaded by info.html and privacy.html after glass.css. Tokens: assets/v2.css. */

/* ---------- Info tabs: the panel area keeps its place while a tab crossfades ---------- */
.info-main { display: block; }
.info-panel > section:first-child { padding-top: var(--sp-6); }
.info-panel .pg-head { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-5); max-width: 72ch; }
.info-panel .pg-head h2 { margin: 0; }
.info-panel .pg-head .lede { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }

/* ---------- accordions: FAQ, Terms, Privacy ---------- */
.info-panel .info-accordion-list { max-width: 880px; margin-top: 0; }
.info-panel :is(.tos-cat, .qa-cat) > summary { padding: 20px 4px; font-size: 1.25rem; line-height: 1.3; }
.info-panel :is(.tos-item, .qa-item) > summary { padding: 14px 4px; font-size: 1.0625rem; line-height: 1.45; }
.info-panel :is(.tos-cat-body, .qa-cat-body) { padding-left: 28px; margin: 0 0 var(--sp-3); }
.info-panel :is(.tos-item, .qa-item) > p,
.info-panel .tos-body,
.info-panel .tos-body p {
  font-size: var(--fs-body); line-height: 1.65; color: var(--muted); max-width: 72ch; }
.info-panel :is(.tos-item, .qa-item) > p { margin: 0 0 var(--sp-5); padding-left: 28px; }
.info-panel .tos-body { margin: 0 0 var(--sp-5); padding-left: 28px; }
.info-panel .tos-body p { margin: 0 0 var(--sp-3); }
.info-panel .tos-body > :last-child { margin-bottom: 0; }

/* ---------- policy rows: one treatment for every "term + description" list ---------- */
.info-panel .tos-body dl,
.pv-page .acct-rows { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 0 var(--sp-5); margin: 0 0 var(--sp-3); }
.info-panel .tos-body dl:last-child, .pv-page .acct-rows:last-child { margin-bottom: 0; }
.info-panel .tos-body :is(dt, dd),
.pv-page .acct-rows :is(dt, dd) { margin: 0; padding: var(--sp-3) 0; border-top: 1px solid var(--hair); font-size: var(--fs-body); line-height: 1.6; }
.pv-page .acct-rows dd { padding-inline-end: max(0px, calc(100% - 68ch)); } /* readable text, divider still full width (12.11) */
.info-panel .tos-body dl > dt:first-of-type, .info-panel .tos-body dl > dt:first-of-type + dd,
.pv-page .acct-rows > dt:first-of-type, .pv-page .acct-rows > dt:first-of-type + dd { border-top: 0; padding-top: 0; }
.info-panel .tos-body dl, .pv-page .acct-rows { column-gap: 0; }
.info-panel .tos-body dt, .pv-page .acct-rows dt { padding-right: var(--sp-5); }
.info-panel .tos-body dt, .pv-page .acct-rows dt { font-weight: 600; color: var(--text); }
.info-panel .tos-body dd, .pv-page .acct-rows dd { color: var(--muted); }

/* ---------- Privacy page, and the Privacy tab of Info (the same cards and tables, copied by tools/port_v2.py) ----------
   The card base is repeated from account.css, which info.html does not load. */
.pv-page .acct-panel { position: relative; display: grid; gap: var(--sp-4); align-content: start; min-width: 0; border-radius: var(--rad-l); }
.pv-page .pg-head { max-width: 72ch; }
.pv-page .pg-head .lede { font-size: 1.0625rem; line-height: 1.6; }
.pv-list { max-width: 960px; }
.pv-page .acct-panel { padding: var(--sp-6); }
.pv-page .acct-panel h2 { margin: 0 0 var(--sp-4); }
.pv-page .acct-panel p { font-size: var(--fs-body); line-height: 1.65; }
.pv-page .acct-panel p + .acct-rows { margin-top: var(--sp-2); }
.pv-page .acct-rows + p { margin-top: var(--sp-4); }

@media (max-width: 760px) {
  .info-panel :is(.tos-cat-body, .qa-cat-body) { padding-left: 12px; }
  .info-panel :is(.tos-item, .qa-item) > p, .info-panel .tos-body { padding-left: 0; }
  .info-panel .tos-body dl, .pv-page .acct-rows { grid-template-columns: minmax(0, 1fr); }
  .info-panel .tos-body dd, .pv-page .acct-rows dd { padding-top: 2px; border-top: 0; }
  .pv-page .acct-panel { padding: var(--sp-5); }
}

/* ---------- Contact (contact.html loads this file too) ----------
   The commercial email route sits inside the Email card (same inbox), so the reach row is Email and Discord.
   Hints read at the small body size, not 13 px (styles.css forced .cr-hint to .8125rem !important). */
.ct-page .ct-reach { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ct-page .ct-mail-routes { display: grid; gap: var(--sp-3); width: 100%; }
.ct-page .ct-mail-routes[hidden] { display: none; }
.ct-page .ct-mail-route { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; width: 100%;
  padding: var(--sp-3) 0; box-shadow: inset 0 -1px 0 var(--hair); }
.ct-page .ct-mail-route-t { display: grid; gap: 2px; min-width: 0; }
.ct-page .ct-mail-route h3 { margin: 0; font: 600 var(--fs-body)/1.35 "Hanken Grotesk", system-ui, sans-serif; color: var(--text); }
.ct-page .ct-mail-route .cr-btn { margin-top: 0; }
.ct-page p.cr-hint { font-size: var(--fs-sm) !important; line-height: 1.5; }
/* order-v2: the Terms carry their own clause numbers */
.info-panel .tos-n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: .3em; }
.ct-page .cr-card .ct-mail-route { box-shadow: none; }
.ct-page .ct-mail-route-t { flex: 1 1 220px; }