/* RC2 S8b (plan work/plans/20261023-rc2-s8-reading-pages.md): Terms and Privacy as the prototype's `legalPage()`. Loaded
   after shell.css on those routes only. Colours, text sizes and spacing come from app.css's tokens. About and Help left
   this sheet for the kit (information pages PR 2, plan work/plans/20261102-information-and-account-pages.md). */
.wrap:has(.rd){max-width:1280px;padding-inline:var(--space-5)}
.rd{padding-bottom:var(--space-5)}
.rd p,.rd li{line-height:1.55}
.rd h1{margin:0 0 var(--space-4);max-width:770px}
.rd h2{font-size:var(--text-2xl);font-weight:500;line-height:1.2;letter-spacing:-.025em;margin:0 0 var(--space-4)}
.rd .eyebrow{font-size:var(--text-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-3)}
.rd .btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);box-sizing:border-box;text-decoration:none}
/* Terms and Privacy (S8b, `legalPage()`): the eyebrow, title and version lines, the version picker (a fold drawn as
   the prototype's select: every version, newest first, the viewed one marked), then the contents list beside the
   document column (245px + up to 700px, 64px apart; 210px and 32px to 1000px). Under 761px the open list hides and
   its phone fold shows. The legal text keeps its words; only its measure and spacing are set here. */
/* RC2 S9-E1: Terms and Privacy titles are the prototype's `.legal-heading h1` (48px; 39px on phones; app.css). */
.rd-legal h1{font-size:var(--h1-legal);line-height:1.05;margin-bottom:var(--space-4)}
.rd-legal .legal-version{color:var(--body-text);margin:0 0 var(--space-2)}
.rd-versions{width:fit-content;max-width:400px;margin:var(--space-4) 0 var(--space-5)}
.rd-versions>summary{display:block;list-style:none}
.rd-versions>summary::-webkit-details-marker{display:none}
.rd-versions>summary>span:first-child{display:block;font-size:var(--text-label);color:var(--ink);margin-bottom:var(--space-2)}
.rd-versions-now{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--tap);box-sizing:border-box;padding:0 var(--space-3);background:var(--paper);border:1px solid var(--border-strong);border-radius:var(--radius-btn);color:var(--ink)}
.rd-versions-now::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.rd-versions[open] .rd-versions-now::after{transform:translateY(2px) rotate(-135deg)}
.rd-versions>ul{list-style:none;margin:var(--space-1) 0 0;padding:var(--space-1) 0;max-height:320px;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-btn)}
.rd-versions li{margin:0}
.rd-versions li a{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--space-3);text-decoration:none;color:var(--ink)}
.rd-versions a[aria-current]{font-weight:600;background:var(--rail-bg)}
.rd-legal-layout{display:grid;grid-template-columns:245px minmax(0,700px);gap:calc(var(--space-5) + var(--space-3));align-items:start}
.rd-toc{position:sticky;top:104px}  /* Below the sticky header (app.css's scroll padding). */
/* RC2 S17g: the wide contents list is the drawn `.legal-nav` fold, open (19px "On this page", 12px above the links;
   the links scroll inside 78vh). Its links stay at 16px against the drawn 14px (navigation text, checklist line 6). */
.rd-toc>summary{font-size:var(--text-lg);font-weight:500;line-height:1.55;color:var(--ink);min-height:var(--tap);box-sizing:border-box;padding-bottom:var(--space-12);cursor:pointer}
/* Review fix: the sticky box (104px top + the 44px summary) stays inside a short screen, so the last link shows. */
.rd-toc>nav{max-height:min(78vh,calc(100vh - 168px));overflow-y:auto}
.rd-toc ul,.rd-toc-fold ul{list-style:none;margin:0;padding:0}
.rd-toc li,.rd-toc-fold li{margin:0}
.rd-toc a,.rd-toc-fold a{display:flex;align-items:center;min-height:var(--tap);box-sizing:border-box;padding-block:var(--space-2);border-bottom:1px solid var(--line);font-size:var(--text-form);line-height:1.3;color:var(--body-text);text-decoration:none;overflow-wrap:anywhere}
.rd-toc-fold{display:none}
.rd-legal-doc{min-width:0}
.rd-legal .legal-page{max-width:75ch;margin:0}
.rd-legal .legal-page p,.rd-legal .legal-page li{line-height:1.75}
.rd-legal .legal-page>p{margin:0 0 var(--space-4)}  /* RC2 S17g: the drawn `.legal-document>p`. */
.rd-legal .legal-page>ul{margin:0 0 var(--space-4);padding-left:var(--space-4)}
.rd-legal .legal-page li{margin:0 0 var(--space-3)}
.rd-next{margin:calc(var(--space-4) + var(--space-3)) 0 0;padding-top:var(--space-3);border-top:1px solid var(--line)}  /* S17g: the drawn note's 20px. */

@media(min-width:761px) and (max-width:1000px){.wrap:has(.rd){padding-inline:var(--space-32)}}
/* RC2 R4: the drawn frame (`style.css:1`: `main` 1184px wide and centred, 40px sides at 1240px and under). */
@media(min-width:1001px) and (max-width:1240px){.wrap:has(.rd){padding-inline:var(--space-32)}}
@media(min-width:1241px){.wrap:has(.rd){max-width:1184px;padding-inline:0}}
@media(max-width:1000px){.rd-legal-layout{grid-template-columns:210px minmax(0,1fr);gap:calc(var(--space-4) + var(--space-2))}}
@media(max-width:760px){
.wrap:has(.rd){padding-inline:var(--space-3)}
.rd h2{font-size:var(--text-xl)}
.rd-versions{width:auto;max-width:none}
.rd-legal-layout{display:block}
.rd-toc{display:none}
.rd-toc-fold{display:block;margin:0 0 var(--space-4);padding:var(--space-12) var(--space-3);background:var(--rail-bg);border-radius:var(--radius-btn)}
.rd-toc-fold>summary{color:var(--ink);font-weight:500;font-size:var(--text)}
.rd-toc-fold ul{max-height:240px;overflow-y:auto}
}