/* sd1toolkit.org
   There is no separate brand colour. The five authority colours ARE the identity,
   because the promise of this project is that you can see where a rule comes from.
   Links stay ink-coloured so nothing competes with them.
   An adopting district changes the tokens below and nothing else. */
:root{
  --paper:#fcfcfb;--ink:#14141a;--muted:#494952;--rule:#d8d8dd;--panel:#f1f1ef;--flag:#fdf6e3;
  --law:#5b21b6;--sos:#1d4ed8;--rpt:#9b1c1c;--local:#8a3d0b;--practice:#15603a;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --measure:36rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:1.25rem;line-height:1.6;text-align:left}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.5rem}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:block;padding:.7rem;background:var(--ink);color:#fff}

.top{border-bottom:3px solid var(--ink);padding:1.6rem 0 0}
/* The mark is the five authority colours set beside the wordmark. There is no emblem.
   SD1 carries the weight, toolkit sits under it, and the bars are the height of the cap. */
.mark{display:inline-flex;align-items:flex-start;gap:.65rem;text-decoration:none;color:var(--ink)}
.mark .bars{height:2.05rem;width:auto;flex:none;margin-top:.12rem}
.mark .n{display:block;font-size:2.05rem;font-weight:700;letter-spacing:-.03em;line-height:.88}
.mark .s{display:block;font-size:.95rem;font-weight:600;color:var(--muted);line-height:1;margin-top:.3rem}
.attrib{margin:0 0 .6rem;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.blank{background:#fdf6e3;border-bottom:1px solid var(--ink);padding:0 2.5rem}
.tag{margin:.35rem 0 0;color:var(--muted);font-size:1.05rem}
nav{margin:1.3rem 0 0;display:flex;flex-wrap:wrap;gap:0 1.9rem}
nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.1rem;
  padding:.45rem 0 .8rem;border-bottom:4px solid transparent;display:inline-block}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--ink)}
nav a[aria-current]{border-bottom-color:var(--rpt)}

main{padding:2.4rem 0 3.5rem}
h1{font-size:2.4rem;line-height:1.15;letter-spacing:-.025em;margin:0 0 1rem}
h2{font-size:1.55rem;margin:2.6rem 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--rule)}
h3{font-size:1.25rem;margin:0 0 .4rem}
p,li{max-width:var(--measure)}
.lede{font-size:1.4rem;line-height:1.45;color:var(--muted);margin:0 0 2rem}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-thickness:4px}
.crumb{font-size:1.05rem;color:var(--muted);margin:0 0 1rem}
.crumb a{display:inline-block;padding:.4rem 0}

.src{border-left:8px solid var(--rule);padding:1rem 0 1rem 1.3rem;margin:0 0 1.4rem}
.src.law{border-color:var(--law)}.src.sos{border-color:var(--sos)}
.src.rpt{border-color:var(--rpt)}.src.local{border-color:var(--local)}
.src.practice{border-color:var(--practice)}
.src p{margin:.4rem 0}
.chip{display:inline-block;font-size:.95rem;font-weight:700;letter-spacing:.1em;color:#fff;
  padding:.3rem .7rem;margin-bottom:.55rem;vertical-align:.1em}
.chip.law{background:var(--law)}.chip.sos{background:var(--sos)}
.chip.rpt{background:var(--rpt)}.chip.local{background:var(--local)}
.chip.practice{background:var(--practice)}
.meta{font-size:1.05rem;line-height:1.75;color:var(--muted);margin:.7rem 0 0}
.meta a,footer.site a{padding:.25rem 0;display:inline-block}
.warn{background:var(--flag);border-left:6px solid var(--local);padding:.8rem 1rem;
  font-size:1.05rem;margin:.8rem 0 0;max-width:var(--measure)}

ol.steps{list-style:none;margin:0;padding:0}
ol.steps li{border-bottom:2px solid var(--rule);max-width:none}
ol.steps .row{display:flex;gap:1.2rem;align-items:baseline;padding:1.15rem .2rem}
ol.steps .num{flex:0 0 3rem;font-size:2.1rem;font-weight:700;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
ol.steps .txt{font-size:1.25rem;line-height:1.35}
ol.steps .sub{display:block;color:var(--muted);font-size:1.05rem;margin-top:.2rem}

.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1.5rem 0}
.card{border:2px solid var(--rule);padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);display:block}
.card:hover{border-color:var(--ink)}
.card strong{display:block;font-size:1.2rem;margin-bottom:.25rem}
.card span{color:var(--muted);font-size:1.05rem}
main p a{padding:.15rem 0}

.grid19{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  margin:1.4rem 0;padding:0;list-style:none}
.grid19 li{max-width:none}
.grid19 a{display:block;border:2px solid var(--rule);padding:.8rem .9rem;text-decoration:none;color:var(--ink)}
.grid19 a:hover{border-color:var(--ink)}
.grid19 .seat{display:block;font-size:1.05rem;color:var(--muted)}

pre.tpl{background:var(--panel);border-left:8px solid var(--ink);padding:1.1rem 1.2rem;
  font-family:var(--sans);font-size:1.1rem;line-height:1.55;white-space:pre-wrap;
  margin:1rem 0;max-width:var(--measure);overflow-wrap:break-word}
.copy{font:inherit;font-size:1.05rem;font-weight:600;background:var(--ink);color:#fff;
  border:0;padding:.7rem 1.2rem;cursor:pointer}
.copy:hover{background:var(--law)}

.blank{display:block;border-bottom:2px solid var(--muted);min-height:2.1rem;background:var(--panel);margin-top:.3rem}
table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:1.1rem}
th,td{text-align:left;padding:.7rem .6rem;border-bottom:2px solid var(--rule);vertical-align:top}
th{font-size:1rem;letter-spacing:.03em;color:var(--muted)}

form label{display:block;font-weight:600;margin:1.3rem 0 .35rem;max-width:var(--measure)}
form .hint{display:block;font-weight:400;color:var(--muted);font-size:1.05rem}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font:inherit;width:100%;max-width:var(--measure);padding:.7rem .8rem;
  border:2px solid var(--muted);background:#fff;color:var(--ink)}
textarea{min-height:6rem}
fieldset{border:2px solid var(--rule);padding:1rem 1.2rem;margin:1.5rem 0;max-width:var(--measure)}
legend{font-weight:700;padding:0 .5rem}
.check{display:flex;gap:.9rem;align-items:center;margin:0;padding:.85rem 0;font-weight:400;
  border-bottom:2px solid var(--rule);min-height:3.4rem}
.check input{width:1.9rem;height:1.9rem;flex:0 0 auto;margin-top:.1rem}
.scale{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.scale label{display:flex;flex-direction:column-reverse;gap:.4rem;align-items:center;
  border:2px solid var(--rule);padding:.8rem 1rem;margin:0;cursor:pointer;min-width:3.8rem;min-height:4.4rem;
  justify-content:center;font-size:1.2rem;font-weight:700}
.scale input{width:1.6rem;height:1.6rem}
.scale label:hover{border-color:var(--ink)}
button[type=submit]{font:inherit;font-size:1.2rem;font-weight:700;background:var(--ink);color:#fff;
  border:0;padding:.9rem 1.8rem;cursor:pointer;margin-top:1.8rem}
button[type=submit]:hover{background:var(--law)}

.qr{width:190px;height:190px;image-rendering:pixelated;border:1px solid var(--rule)}
.row2{display:flex;gap:1.8rem;align-items:center;flex-wrap:wrap}

footer.site{border-top:2px solid var(--rule);padding:1.6rem 0 3rem;font-size:1.05rem;color:var(--muted)}
footer.site p{max-width:var(--measure)}
.scope{border-left:4px solid var(--rule);padding-left:1rem}
.stamp{color:var(--ink);font-weight:600}
:focus-visible{outline:3px solid var(--law);outline-offset:2px}
@media (max-width:640px){
  body{font-size:1.18rem}
  h1{font-size:1.95rem}.lede{font-size:1.25rem}
  ol.steps .num{flex:0 0 2.4rem;font-size:1.8rem}
  nav{gap:0 1.2rem}
  .scale label{min-width:3rem;padding:.6rem .7rem}
}
@media print{
  nav,.copy,.skip{display:none}
  body{font-size:11pt;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}