/* The homeschool law and curriculum sections. Tokens come from site.css, so
   these pages inherit the site's light and dark themes without restating them.

   The reading column in site.css is 46rem, right for prose and too narrow for a
   51-row comparison table, so .wide widens only the pages that need it. */

.wrap.wide{max-width:64rem}

main{padding:1.5rem 0 3rem}

.page-head{margin:0 0 1.75rem}
.page-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(1.65rem,4.5vw,2.4rem);line-height:1.15;margin:0 0 .5rem}
.standfirst{font-family:var(--serif);font-size:1.08rem;color:var(--ink2);margin:0 0 .9rem;max-width:34em}
.meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;font-size:.86rem;color:var(--ink3);margin:0}
.meta a{color:var(--accent)}

/* Regulation level. Colour is a secondary cue only: each tag carries its word. */
.tag{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.78rem;font-weight:600;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink2);white-space:nowrap}
.tag-none{background:var(--accent-soft);color:var(--accent-2);border-color:transparent}
.tag-low{background:var(--accent-soft);color:var(--accent-2);border-color:transparent}
.tag-moderate{background:#FBF0E2;color:#8A5A1E;border-color:transparent}
.tag-high{background:#F9E6E6;color:#8E3434;border-color:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag-moderate{background:#3A2C18;color:#E2B477}
  :root:not([data-theme="light"]) .tag-high{background:#3A1F1F;color:#E39A9A}}

/* The answer box: the five facts a parent came for, above everything else. */
.answer{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.1rem 1.25rem;margin:0 0 1.75rem;box-shadow:var(--shadow)}
.answer h2{font-family:var(--disp);font-size:1.15rem;margin:0 0 .75rem}
.answer dl{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr;gap:.55rem 1.1rem;margin:0}
.answer dt{font-weight:600;font-size:.9rem;color:var(--ink2)}
.answer dd{margin:0}
@media (max-width:34rem){.answer dl{grid-template-columns:1fr;gap:.15rem}
  .answer dd{margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule-2)}
  .answer dd:last-child{border:0;margin-bottom:0}}

section{margin:0 0 1.9rem}
section h2{font-family:var(--disp);font-weight:600;font-size:1.3rem;margin:0 0 .6rem;
  padding-top:1.2rem;border-top:1px solid var(--rule-2)}
section h3{font-size:1.02rem;margin:1.2rem 0 .4rem}
section p{margin:0 0 .75rem;max-width:38em}
section ul{margin:0 0 .85rem;padding-left:1.15rem}
section li{margin:0 0 .35rem;max-width:37em}

/* The one instruction to act on, where the state's text contains one. */
.first-move{background:var(--accent-soft);border-left:3px solid var(--accent);
  padding:.7rem .95rem;border-radius:var(--r-s);margin:0 0 .9rem !important}

.routes dt{font-weight:600;margin:.85rem 0 .2rem}
.routes dd{margin:0;color:var(--ink2);max-width:38em}

section > dl:not(.answer dl){display:grid;grid-template-columns:minmax(7rem,10rem) 1fr;gap:.5rem 1rem;margin:0 0 1rem}
section > dl dt{font-weight:600;font-size:.9rem;color:var(--ink2)}
section > dl dd{margin:0}
@media (max-width:34rem){section > dl:not(.answer dl){grid-template-columns:1fr;gap:.1rem}
  section > dl dd{margin:0 0 .6rem}}

.flag{font-size:.9rem;color:var(--ink2);background:var(--ground);border:1px dashed var(--rule);
  padding:.6rem .85rem;border-radius:var(--r-s)}

.cta-link{font-weight:600;text-decoration:none}
.cta-link:hover{text-decoration:underline}

/* Tables. The 51-row one scrolls sideways on a phone rather than reflowing,
   because a comparison only works if the columns stay beside each other. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 .9rem}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--paper)}
table.states{min-width:40rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--rule-2);vertical-align:top}
thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);
  border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper)}
tbody th{font-weight:600}
tbody tr:hover{background:var(--ground)}
table.courses{margin:0 0 1.1rem}
table.courses td:first-child{white-space:nowrap;color:var(--ink2);width:6rem}

.also h2{font-size:1.1rem}
.also ul{margin:0;padding-left:1.15rem}

.disclaimer{margin:2.25rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--paper)}
.disclaimer p{margin:0;font-size:.88rem;color:var(--ink2);max-width:none}

.fine{color:var(--ink3);font-size:.86rem;max-width:38em}

/* Comparison rows stay one line tall each: the point of the table is that 51
   states can be scanned down a column, which fails as soon as rows differ in
   height. Fixed layout plus per-column widths keeps a long deadline from
   setting the height of its whole row. */
table.states{table-layout:fixed}
table.states th:nth-child(1){width:10rem}
table.states th:nth-child(2){width:6.5rem}
table.states th:nth-child(3){width:7rem}
table.states th:nth-child(4){width:5rem}
table.states th:nth-child(5){width:5.5rem}
table.states td,table.states tbody th{overflow-wrap:anywhere}

/* Jump to your state. Real form controls so the keyboard and a screen reader
   get the usual select behavior; the script turns submit into a jump. */
.state-pick{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:1rem 1.25rem;margin:0 0 1.5rem;box-shadow:var(--shadow)}
.state-pick label{display:block;font-weight:600;font-size:.95rem;margin:0 0 .5rem}
.pick-row{display:flex;gap:.6rem;flex-wrap:wrap}
.state-pick select{flex:1 1 14rem;min-width:0;padding:.55rem .7rem;font:inherit;font-size:.95rem;
  color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-s)}
.state-pick select:focus-visible,.state-pick button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.state-pick button{padding:.55rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;
  color:var(--paper);background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-s)}
.state-pick button:hover{background:var(--accent-2);border-color:var(--accent-2)}

/* Worksheet listings. Two columns of wrapping text, so unlike the 51-state
   comparison these must not force a minimum width or scroll sideways. */
table.sheets{width:100%;table-layout:auto;border-collapse:collapse;margin:0 0 .6rem;font-size:.92rem}
table.sheets th{text-align:left;font-weight:600;width:48%;padding:.45rem .7rem .45rem 0;
  border-bottom:1px solid var(--rule-2);vertical-align:top}
table.sheets td{padding:.45rem 0;border-bottom:1px solid var(--rule-2);vertical-align:top}
table.sheets tr:hover{background:var(--ground)}
@media (max-width:30rem){
  table.sheets th,table.sheets td{display:block;width:auto;border:0;padding:.25rem 0}
  table.sheets td{padding-bottom:.6rem;border-bottom:1px solid var(--rule-2)}
}

/* The weekly-email form, and the year grid. */
.signup h2{font-family:var(--disp);font-size:1.15rem;margin:0 0 .5rem}
.signup input[type=email]{flex:1 1 15rem;min-width:0;padding:.55rem .7rem;font:inherit;font-size:.95rem;
  color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-s)}
.signup button{padding:.55rem 1.2rem;font:inherit;font-weight:600;cursor:pointer;color:var(--paper);
  background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-s)}
.signup button:hover{background:var(--accent-2);border-color:var(--accent-2)}
.signup input:focus-visible,.signup button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.year-grid{min-width:46rem;table-layout:auto}
table.year-grid th[scope=row]{width:3.5rem;text-align:center;color:var(--ink2)}
table.year-grid td{font-size:.86rem}