/* ============================================================
   The AI Bill — Parents field guide
   Page-local components for /parents, /parents/how, /parents/practice.
   Built on the site's tokens in styles.css so the guide reads as part of
   the publication rather than a bolted-on microsite. Load after styles.css.
   ============================================================ */

.guide-hero{padding:64px 0 40px;border-bottom:1px solid var(--line);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.guide-hero h1{font-size:clamp(34px,5.4vw,58px);margin:18px 0 0;max-width:16ch;}
.guide-hero h1 em{font-style:normal;color:var(--accent);}
.guide-hero .lede{font-size:19px;color:var(--ink-soft);max-width:60ch;margin-top:20px;}
.byline{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin-top:26px;font-size:14px;color:var(--ink-soft);}
.byline b{color:var(--ink);font-weight:600;}

.partnav{display:flex;flex-wrap:wrap;gap:0 22px;align-items:baseline;margin-top:34px;padding-top:16px;border-top:1px solid var(--line);}
.partnav a,.partnav span{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding-bottom:6px;border-bottom:2px solid transparent;}
.partnav a{color:var(--ink-soft);border-bottom-color:transparent;}
.partnav a:hover{color:var(--accent);}
.partnav .here{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
.partnav .locked::after{content:" · locked";color:var(--ink-soft);font-weight:400;}

section.guide{padding:52px 0;border-bottom:1px solid var(--line);}
section.guide h2{font-size:clamp(25px,3.6vw,34px);margin-bottom:16px;}
section.guide h3{font-size:20px;margin:0 0 8px;}
section.guide p{margin-bottom:15px;}
.stack{display:flex;flex-direction:column;gap:26px;}

.thesis{border-left:3px solid var(--accent);padding:6px 0 6px 20px;margin:28px 0;}
.thesis p{font-family:var(--serif);font-size:clamp(19px,2.6vw,25px);line-height:1.34;color:var(--ink);margin:0;}
.thesis em{font-style:normal;color:var(--accent);}

.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:2px solid var(--ink);margin-top:8px;}
.figures div{padding:16px 18px 18px 0;border-bottom:1px solid var(--line);}
.figures b{display:block;font-family:var(--serif);font-size:clamp(28px,4vw,40px);line-height:1;letter-spacing:-.03em;}
.figures .hot b{color:var(--accent);}
.figures span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-soft);line-height:1.45;}

.reason{border-top:1px solid var(--line);padding-top:22px;}
.reason h3{font-family:var(--serif);font-size:22px;}
.receipt{background:var(--paper-2);border-left:3px solid var(--money);padding:14px 16px;margin:14px 0;}
.receipt .fig{font-family:var(--serif);font-size:26px;line-height:1;color:var(--money);}
.receipt .src{display:block;margin-top:7px;font-size:13px;color:var(--ink-soft);line-height:1.5;}
.caveat{font-size:14px;color:var(--ink-soft);font-style:italic;line-height:1.6;}

.callout{background:var(--paper-2);border-left:3px solid var(--accent);padding:14px 16px;font-size:15.5px;line-height:1.6;}
.callout.warn{border-left-color:var(--gold);}

.limits{list-style:none;display:flex;flex-direction:column;gap:13px;}
.limits li{padding-left:22px;position:relative;}
.limits li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:2px;background:var(--gold);}

details.q{border-bottom:1px solid var(--line);}
details.q summary{cursor:pointer;list-style:none;padding:15px 30px 15px 0;position:relative;font-family:var(--serif);font-size:18px;color:var(--ink);}
details.q summary::-webkit-details-marker{display:none;}
details.q summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--mono);font-size:19px;color:var(--accent);}
details.q[open] summary::after{content:"–";}
details.q summary:hover{color:var(--accent);}
details.q .a{padding:0 0 18px;}
details.q .a p{font-size:15.5px;}
details.q .say{font-family:var(--serif);font-size:17px;line-height:1.45;border-left:3px solid var(--accent);padding:2px 0 2px 16px;color:var(--ink);}

/* ---------- Numbered sequence ---------- */
ol.steps{list-style:none;display:flex;flex-direction:column;gap:26px;counter-reset:s;}
ol.steps>li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:0 16px;align-items:start;}
ol.steps>li::before{content:counter(s);font-family:var(--serif);font-size:21px;line-height:1;color:var(--accent);border-top:2px solid var(--accent);padding-top:5px;}
ol.steps .body{display:flex;flex-direction:column;gap:10px;}
ol.steps .mins{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);grid-column:2;margin-bottom:4px;}

/* ---------- Two-column keep/cut ---------- */
.worksheet{display:grid;grid-template-columns:1fr;gap:28px;}
@media(min-width:760px){.worksheet{grid-template-columns:1fr 1fr;gap:34px;}}
.worksheet h3{border-bottom:2px solid var(--ink);padding-bottom:8px;font-family:var(--serif);}
.worksheet .cut h3{border-bottom-color:var(--gold);color:var(--gold);}
.worksheet ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:14px;}
.worksheet li{padding-left:24px;position:relative;font-size:15.5px;line-height:1.55;}
.worksheet .keep li::before{content:"✓";position:absolute;left:0;color:var(--money);font-weight:700;}
.worksheet .cut li::before{content:"✗";position:absolute;left:0;color:var(--gold);font-weight:700;}
.worksheet .cut li{color:var(--ink-soft);}

/* ---------- Tabs / picker ---------- */
.picker{display:flex;flex-wrap:wrap;gap:8px;}
.picker button{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--card);color:var(--ink-soft);border:1px solid var(--line);padding:8px 15px;cursor:pointer;}
.picker button:hover{color:var(--ink);border-color:var(--ink-soft);}
.picker button[aria-selected="true"]{background:var(--accent);color:#fff;border-color:var(--accent);}
.panel{margin-top:22px;}
.panel[hidden]{display:none;}
.panel .verdict{font-family:var(--serif);font-size:19px;line-height:1.4;margin-bottom:12px;}
.panel ul{margin:0 0 0 20px;display:flex;flex-direction:column;gap:9px;}
.panel ul li{font-size:15.5px;line-height:1.55;}

.play{display:flex;flex-direction:column;border-top:2px solid var(--ink);}
.play .row{display:grid;grid-template-columns:1fr;gap:4px;padding:15px 0;border-bottom:1px solid var(--line);}
@media(min-width:640px){.play .row{grid-template-columns:104px 1fr;gap:0 20px;}}
.play .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-top:4px;}
.play .row.flag .k{color:var(--gold);}
.play .row.flag .v{color:var(--ink-soft);}
.play .v{line-height:1.6;font-size:15.5px;}

/* ---------- Prompt cards ---------- */
.prompt{background:var(--code-bg);color:var(--code-ink);padding:16px 18px;display:flex;flex-direction:column;gap:12px;font-family:var(--mono);font-size:13.5px;line-height:1.65;}
.prompt button{align-self:flex-start;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:transparent;color:var(--code-ink);border:1px solid rgba(201,232,217,.35);padding:6px 12px;cursor:pointer;}
.prompt button:hover{background:rgba(201,232,217,.12);}
.prompts{display:flex;flex-direction:column;gap:18px;}
.prompts .item h3{font-family:var(--serif);font-size:18px;margin-bottom:10px;}

/* ---------- Table ---------- */
.tablewrap{overflow-x:auto;border-top:2px solid var(--ink);}
table.g{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;}
table.g th,table.g td{text-align:left;padding:14px 16px 14px 0;vertical-align:top;border-bottom:1px solid var(--line);}
table.g thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
table.g td b{font-family:var(--serif);}
table.g .flag{color:var(--gold);font-weight:600;}

/* ---------- Weeks ---------- */
.weeks{display:flex;flex-direction:column;border-top:2px solid var(--ink);}
.weeks>div{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 0;border-bottom:1px solid var(--line);}
@media(min-width:640px){.weeks>div{grid-template-columns:84px 1fr;gap:0 20px;}}
.weeks .w{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding-top:5px;}
.weeks h3{font-family:var(--serif);font-size:18px;margin-bottom:6px;}
.weeks p{font-size:15.5px;margin:0;}

/* ---------- Agreement ---------- */
.agreement{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--signal);padding:26px;}
.agreement fieldset{border:0;display:flex;flex-direction:column;gap:12px;}
.agreement label{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;cursor:pointer;}
.agreement input[type=checkbox]{width:17px;height:17px;margin-top:4px;accent-color:var(--accent);}
.agreement label span{line-height:1.55;font-size:15.5px;}
.agreement .sign{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:22px;}
.agreement .sign div{flex:1 1 160px;}
.agreement .sign .line{border-bottom:1px solid var(--ink);height:30px;}
.actionbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px;}
button.action{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:#fff;border:1px solid var(--accent);padding:11px 18px;cursor:pointer;}
button.action.ghost{background:transparent;color:var(--accent);}
button.action:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}

/* ---------- Gate ---------- */
.gate{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--signal);padding:28px;max-width:640px;}
.gate h3{font-family:var(--serif);font-size:23px;}
.gate ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:14px 0 20px;}
.gate ul li{padding-left:22px;position:relative;font-size:15.5px;line-height:1.55;}
.gate ul li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:2px;background:var(--accent);}
.gate-row{display:flex;flex-wrap:wrap;gap:10px;}
.gate input[type=email]{flex:1 1 15rem;min-width:0;font-family:var(--sans);font-size:16px;padding:13px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);}
.gate input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.gate button{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:#fff;border:none;padding:13px 22px;cursor:pointer;white-space:nowrap;}
.gate button:hover{background:var(--accent-deep);}
.gate button[disabled]{opacity:.55;cursor:default;}
.gate .note{margin-top:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;}
.gate .note.err{color:#a3341f;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

footer.guide-foot{padding:38px 0 64px;}
footer.guide-foot p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:70ch;}
.sources{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14px;line-height:1.55;}
.sources li{padding-left:20px;text-indent:-20px;color:var(--ink-soft);}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

@media print{
  nav.site,.partnav,.gate,.picker,.actionbar,.prompt button{display:none!important;}
  body{background:#fff;font-size:11pt;}
  section.guide{padding:14px 0;page-break-inside:avoid;}
  a{text-decoration:none;}
}