/* ---------- Content-specific components ---------- */
.timeline { display:grid; gap:12px; }
.phase { display:grid; grid-template-columns:142px 1fr; gap:22px; padding:21px 23px; }
.phase .when { color:var(--text-tertiary); font-size:11px; font-weight:620; line-height:1.55; }
.phase h3 { margin:0 0 8px; font-size:16px; font-weight:650; letter-spacing:-.015em; }
.phase p { margin:0; }
.signal { margin-top:12px; padding:9px 11px; border-radius:10px; background:var(--surface-inset); color:var(--text-secondary); font-size:11px; }

.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.person { position:relative; overflow:hidden; }
.person::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue); }
.person.person-b::before { background:var(--purple); }
.person h3 { margin:0 0 9px; font-size:23px; font-weight:700; letter-spacing:-.025em; }
.person>p { margin:0 0 13px; }
.traits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.trait { padding:12px 13px; border-radius:13px; background:var(--surface-inset); }
.trait-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.trait-top b { font-size:12px; font-weight:620; }
.trait-top span { color:var(--text-tertiary); font-size:10px; }
.trait p { margin:0; color:var(--text-secondary); font-size:11px; line-height:1.6; }

.matrix { display:grid; grid-template-columns:150px 1fr 1fr; border:1px solid var(--separator-soft); border-radius:14px; overflow:hidden; }
.matrix>div { padding:11px 12px; border-right:1px solid var(--separator-soft); border-bottom:1px solid var(--separator-soft); color:var(--text-secondary); font-size:11.5px; }
.matrix>div:nth-child(3n) { border-right:0; }
.matrix>div:nth-last-child(-n+3) { border-bottom:0; }
.matrix .mh { background:var(--surface-inset); color:var(--text-tertiary); font-weight:620; }
.score-row { display:grid; grid-template-columns:132px 1fr 52px; gap:10px; align-items:center; margin:10px 0; }
.score-row>span { color:var(--text-secondary); font-size:11px; }
.track { height:8px; border-radius:999px; background:var(--surface-inset); overflow:hidden; }
.fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--purple)); }
.score-row b { text-align:right; color:var(--text-tertiary); font-size:11px; }

.evidence-grid,.revision-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.evidence,.revision { padding:18px 19px; }
.date,.revision-tag { color:var(--accent); font-size:10px; font-weight:680; letter-spacing:.035em; }
.evidence h3,.revision h3 { margin:7px 0 7px; font-size:15px; font-weight:650; line-height:1.4; }
.evidence p,.revision p { margin:0; font-size:11.5px; line-height:1.65; }
.warn { border-left:3px solid var(--orange); }
.big-quote { padding:26px; font-size:21px; line-height:1.55; font-weight:620; letter-spacing:-.018em; }
.action { display:grid; grid-template-columns:42px 1fr; gap:12px; padding:17px 19px; align-items:start; }
.step { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; }
.action h3 { margin:0 0 5px; font-size:14px; font-weight:650; }
.action p { margin:0; font-size:11.5px; }
.priority { margin:0; padding-left:21px; }
.priority li { margin-bottom:10px; color:var(--text-secondary); }

/* Native details restyled as Cupertino disclosure groups. */
details { margin:10px 0; border-radius:17px; background:var(--surface-raised); border:1px solid var(--separator-soft); box-shadow:var(--shadow-1); overflow:hidden; }
summary { min-height:54px; display:flex; align-items:center; gap:12px; padding:0 17px; cursor:pointer; list-style:none; color:var(--text); font-size:13px; font-weight:620; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"›"; margin-left:auto; color:var(--text-tertiary); font-size:22px; line-height:1; transition:transform 180ms var(--ease-out); }
details[open] summary::after { transform:rotate(90deg); }
.archive { padding:0 18px 20px; max-width:100%; }
.archive ol { columns:2; column-gap:38px; margin:0; padding-left:22px; }
.archive li { break-inside:avoid; margin:0 0 9px; color:var(--text-secondary); font-size:12px; }
.prose-archive { color:var(--text-secondary); }
.prose-archive h4 { margin:19px 0 8px; font-size:15px; }
.prose-archive p { color:var(--text-secondary); }

.text-archive-section { margin-top:104px; }
.verbatim-intro { padding:23px 24px; margin-bottom:14px; }
.verbatim-intro p { max-width:920px; margin:0 0 9px; color:var(--text-secondary); font-size:14px; }
.verbatim-table { display:grid; grid-template-columns:1.1fr .55fr .55fr 1.8fr; overflow:auto; margin-bottom:14px; }
.verbatim-table>div { min-width:0; padding:12px 14px; border-right:1px solid var(--separator-soft); border-bottom:1px solid var(--separator-soft); color:var(--text-secondary); font-size:12px; }
.verbatim-table>div:nth-child(4n) { border-right:0; }
.verbatim-table .vt-head { position:sticky; top:0; background:var(--surface-raised); color:var(--text); font-weight:650; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.verbatim-flow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.text-chapter { padding:22px 23px; min-height:100%; }
.text-chapter.wide { grid-column:1/-1; }
.text-chapter .chapter-no { margin-bottom:12px; color:var(--accent); font-size:9px; font-weight:720; letter-spacing:.06em; }
.text-chapter h3 { margin:0 0 10px; font-size:17px; line-height:1.42; font-weight:650; letter-spacing:-.015em; }
.text-chapter p { margin:0 0 9px; color:var(--text-secondary); }
.text-chapter.person-b { border-top:3px solid color-mix(in srgb,var(--purple) 62%,transparent); }
.final-chapter { padding:27px; }
.footer { text-align:center; padding:38px 0 12px; color:var(--text-tertiary); font-size:11px; }
.footer strong { color:var(--text-secondary); }

.tabbar { display:none; }

/* Editorial density: the analysis is the protagonist. */
.section-head { margin-bottom: 15px; }
.section-head h2 { font-size: clamp(1.52rem, 2.15vw, 1.9rem); font-weight: 670; }
.card, .chart, .person { padding: 20px 22px; }
.callout { font-size: 17px; padding: 20px 22px; border-left-width: 3px; }
.metric { min-height: 96px; }
.metric b { font-size: 23px; }
.text-chapter { padding: 20px 21px; }
.text-chapter h3 { font-size: 16px; }
.big-quote { font-size: 19px; }