/* Stylesheet for web/text.html — the primer as a page you can copy words
 * out of. Hand-edited like primer.css; tools/build_text_page.py only links
 * it. Verified for WCAG AA contrast in all three theme states: the light
 * default, prefers-color-scheme: dark, and an explicit data-theme stamp.
 */
:root{
  --ground:#F4F7F3; --surface:#FFFFFF; --raise:#FAFCF9;
  --ink:#1E2A26; --muted:#5F6E67; --faint:#64726A;
  --accent:#52796F; --deep:#354F52; --data:#3A6853;
  --edge:#DBE3DC; --edge-soft:#E8EEE8; --chip-bg:#EAF0EA;
  --shadow:0 1px 2px rgba(30,42,38,.05), 0 8px 24px -16px rgba(30,42,38,.28);
  --measure:66ch;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --ground:#141917; --surface:#1C2321; --raise:#222A27;
  --ink:#E2E9E3; --muted:#9BAAA2; --faint:#93A29B;
  --accent:#8FB6A6; --deep:#A8C7B8; --data:#A3CBAE;
  --edge:#2C3733; --edge-soft:#242E2B; --chip-bg:#25302C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}
}
:root[data-theme="dark"]{
  --ground:#141917; --surface:#1C2321; --raise:#222A27;
  --ink:#E2E9E3; --muted:#9BAAA2; --faint:#93A29B;
  --accent:#8FB6A6; --deep:#A8C7B8; --data:#A3CBAE;
  --edge:#2C3733; --edge-soft:#242E2B; --chip-bg:#25302C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 17px/1.62 "Source Sans 3","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:calc(var(--measure) + 13rem); margin:0 auto; padding:0 1.5rem 6rem}

/* ---- masthead ---------------------------------------------------------- */
.mast{padding:4.5rem 0 2rem; max-width:var(--measure)}
.eyebrow{
  font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1rem;
}
.mast h1{
  font:800 clamp(2.1rem,5.5vw,3.1rem)/1.05 Barlow,"Source Sans 3",sans-serif;
  letter-spacing:-.018em; margin:0 0 .9rem; text-wrap:balance; color:var(--ink);
}
.lede{font-size:1.09rem; color:var(--muted); margin:0 0 1.6rem}
.meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; padding:1rem 0 0;
  border-top:1px solid var(--edge);
  font:400 13px/1.5 "IBM Plex Mono",ui-monospace,monospace; color:var(--faint);
}
.meta b{color:var(--muted); font-weight:500}

/* ---- how-to ------------------------------------------------------------ */
.howto{
  max-width:var(--measure); margin:2rem 0 0; padding:1.15rem 1.35rem;
  background:var(--raise); border:1px solid var(--edge-soft);
  border-left:3px solid var(--accent); border-radius:3px;
}
.howto ul{margin:.4rem 0 0; padding-left:1.15rem}
.howto li{margin:.35rem 0; color:var(--muted); font-size:.96rem}
.howto li b{color:var(--ink); font-weight:600}

/* ---- nav --------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:10; margin:2.75rem 0 0;
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:.7rem 0; background:var(--ground);
  border-bottom:1px solid var(--edge);
}
.nav a{
  font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--muted); padding:.42rem .6rem; border-radius:2px;
}
.nav a:hover,.nav a:focus-visible{color:var(--deep); background:var(--chip-bg)}

/* ---- sections & page cards -------------------------------------------- */
.sect{margin:3.25rem 0 0}
.sect-h{
  font:700 12px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1rem; padding-bottom:.7rem; border-bottom:1px solid var(--edge);
}
.page{
  position:relative; background:var(--surface); border:1px solid var(--edge-soft);
  border-radius:4px; box-shadow:var(--shadow); margin:0 0 1.1rem;
}
.page-h{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.5rem; border-bottom:1px solid var(--edge-soft);
}
.chip{
  font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.05em;
  color:var(--deep); background:var(--chip-bg); padding:.32rem .55rem;
  border-radius:2px;
}
.copy{
  font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.05em;
  color:var(--muted); background:none; border:1px solid var(--edge);
  padding:.4rem .7rem; border-radius:2px; cursor:pointer;
}
.copy:hover,.copy:focus-visible{color:var(--deep); border-color:var(--accent)}
.copy[data-done="1"]{color:var(--data); border-color:var(--data)}
.page-b{padding:1.5rem 1.5rem 1.7rem; max-width:var(--measure)}
.page-b>*:first-child{margin-top:0}
.page-b>*:last-child{margin-bottom:0}

/* ---- prose ------------------------------------------------------------- */
.page-b p{margin:0 0 1rem}
.page-b h2,.page-b h3,.page-b h4,.page-b h5,.page-b h6{
  font-family:Barlow,"Source Sans 3",sans-serif; color:var(--ink);
  letter-spacing:-.008em; text-wrap:balance; margin:1.9rem 0 .7rem;
}
.page-b h2{font-size:1.55rem; font-weight:800}
.page-b h2.h-major{
  font-size:1.85rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.005em; color:var(--deep);
}
.page-b h3{font-size:1.28rem; font-weight:700}
.page-b h4{font-size:1.08rem; font-weight:700}
.page-b h5,.page-b h6{font-size:1rem; font-weight:700}
.page-b ul,.page-b ol{margin:0 0 1rem; padding-left:1.25rem}
.page-b li{margin:.32rem 0}
.page-b ol{font-variant-numeric:tabular-nums}
#notes .page-b li{
  font-size:.9rem; color:var(--muted); line-height:1.55; margin:.55rem 0;
  overflow-wrap:anywhere;
}
#notes .page-b li::marker{color:var(--accent)}
sup.fn{
  font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--accent);
  vertical-align:super; padding-left:.12em;
}
.figcap{font-size:.95rem; color:var(--muted)}
.figcap strong{color:var(--ink)}
.note{
  font-size:.9rem; color:var(--faint); font-style:italic;
  border-left:2px solid var(--edge); padding-left:.8rem;
}
.imgnote{
  font:400 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;
  color:var(--faint); margin:0 0 1rem;
}
.tocrow{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0; border-bottom:1px dotted var(--edge);
  font-variant-numeric:tabular-nums;
}
.tocrow span:last-child{color:var(--faint); font-family:"IBM Plex Mono",monospace; font-size:.85rem}

/* ---- lifecycle steps --------------------------------------------------- */
.step{display:flex; gap:.9rem; padding:.42rem 0; align-items:baseline}
.step-k{
  flex:0 0 5.6rem;
  font:500 11.5px/1.5 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.05em; color:var(--accent);
}
.step-t{flex:1; font-size:.97rem}

/* ---- tax reform heads -------------------------------------------------- */
/* Tag-agnostic: the heading level follows the source report, so this must not
   depend on which one it lands on. */
.page-b .reform{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:1.08rem; font-weight:700; margin:2rem 0 .7rem;
}
.rnum{
  flex:0 0 auto; width:1.55rem; height:1.55rem; border-radius:50%;
  background:var(--accent); color:var(--surface);
  font:500 12px/1.55rem "IBM Plex Mono",monospace; text-align:center;
}
.rttl{flex:1 1 auto}
.rtag{
  font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.04em;
  color:var(--data); background:var(--chip-bg); padding:.36rem .55rem;
  border-radius:2px; white-space:nowrap;
}

/* ---- chart data -------------------------------------------------------- */
.data{
  margin:0 0 1.35rem; padding:1rem 1.15rem 1.1rem;
  background:var(--raise); border:1px solid var(--edge-soft); border-radius:3px;
}
.data .eyebrow{margin:0 0 .7rem}
.dhead{
  font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin:1.1rem 0 .5rem;
}
.dl{margin:0; display:flex; flex-direction:column}
.drow{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.34rem 0; border-bottom:1px solid var(--edge-soft);
}
.drow:last-child{border-bottom:0}
.drow dt{font-size:.94rem; color:var(--ink)}
.drow dd{
  margin:0; text-align:right; white-space:nowrap;
  font:500 .92rem/1.4 "IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; color:var(--data);
}
.drow-multi{flex-direction:column; align-items:stretch; gap:.2rem}
.drow-multi dt{font-weight:600}
.drow-multi dd.sub{
  display:flex; flex-wrap:wrap; gap:.25rem .9rem; text-align:left;
  white-space:normal; color:var(--muted); font-size:.85rem;
}
.drow-multi dd.sub span:first-child{color:var(--data)}
.labs{
  font:400 .87rem/1.7 "IBM Plex Mono",ui-monospace,monospace;
  color:var(--muted); margin:0;
}
.labs .sep{color:var(--faint)}
.legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  margin:-.6rem 0 1.35rem;
}
.legend .eyebrow{margin:0 .3rem 0 0}
.key{
  font-size:.85rem; color:var(--muted); background:var(--chip-bg);
  padding:.24rem .5rem; border-radius:2px;
}

/* ---- tables ------------------------------------------------------------ */
.scroll{overflow-x:auto; margin:0 0 1.35rem; border:1px solid var(--edge-soft); border-radius:3px}
table{border-collapse:collapse; width:100%; min-width:34rem; font-size:.9rem}
th,td{
  padding:.55rem .8rem; text-align:right; border-bottom:1px solid var(--edge-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
th{
  font:500 11.5px/1.4 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.05em;
  color:var(--accent); background:var(--raise); text-transform:uppercase;
}
tr td:first-child,tr th:first-child{text-align:left; white-space:normal; font-family:inherit}
td:first-child{color:var(--muted); font-size:.88rem}
tr:last-child td{border-bottom:0; font-weight:600; color:var(--ink)}
tbody tr:last-child td:not(:first-child){color:var(--data)}

/* ---- details ----------------------------------------------------------- */
details{
  margin:0 0 1.35rem; border:1px dashed var(--edge); border-radius:3px;
  padding:.85rem 1.1rem;
}
summary{
  cursor:pointer; font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.05em; color:var(--accent); text-transform:uppercase;
}
summary::marker{color:var(--edge)}
.dnote{
  display:block; text-transform:none; letter-spacing:0; color:var(--faint);
  font-weight:400; font-size:11px; margin-top:.25rem;
}
.dbody{margin-top:1rem}
.dbody>*:last-child{margin-bottom:0}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 1rem 4rem}
  .mast{padding:3rem 0 1.5rem}
  .page-h,.page-b{padding-left:1.1rem; padding-right:1.1rem}
  .step{flex-direction:column; gap:.1rem}
  .step-k{flex:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* The one control this page adds beyond the deck itself. */
.back { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor;
        padding-bottom: 1px; }
.back:hover, .back:focus-visible { color: var(--deep); }