/* Goal100 "School by the Numbers" (Nov 13-14, 2026). Uses site.css variables, so light and dark both work.
   Chart colors validated with the dataviz palette checker (light: #4B49C8 #008A6C #B4720A; dark: #7F7CF0 #1FA285 #B5812A). */
.nb-page{--s1:#4B49C8; --s2:#008A6C; --s3:#B4720A; --s0:#A3A3B8; --ref:#16163A; --track:#ECEBF8;
  --q0:#D9D8F5; --q1:#ABA9EA; --q2:#615ED0; --q3:#3B39A8; --qink0:#16163A; --qink2:#FFFFFF}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nb-page{--s1:#7F7CF0; --s2:#1FA285; --s3:#B5812A; --s0:#5E607F; --ref:#EEEEFB; --track:#25265A;
  --q0:#2E2F66; --q1:#46479A; --q2:#8481F2; --q3:#A9A6FF; --qink0:#EEEEFB; --qink2:#101126}}
:root[data-theme="dark"] .nb-page{--s1:#7F7CF0; --s2:#1FA285; --s3:#B5812A; --s0:#5E607F; --ref:#EEEEFB; --track:#25265A;
  --q0:#2E2F66; --q1:#46479A; --q2:#8481F2; --q3:#A9A6FF; --qink0:#EEEEFB; --qink2:#101126}
.nb-main{display:flex; flex-direction:column; gap:28px; padding-block:22px 64px}
.nb-kicker{font-weight:800; color:var(--gold-deep); letter-spacing:.02em; margin:0}
.nb-roles{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.nb-role{display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:6px 16px; border-radius:999px; border:2px solid var(--line); background:var(--card); color:var(--ink); font-weight:800; text-decoration:none}
.nb-role[aria-current="page"]{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.nb-role:hover{border-color:var(--brand)}
.nb-pagetools{gap:12px}
.nb-pagetools .btn.ghost,.nb-tools .btn.ghost{color:var(--ink); border-color:var(--line); background:var(--card)}
.nb-checked{flex:1 1 18em; margin:0}
.nb-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
.nb-panel{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0; box-shadow:var(--shadow); scroll-margin-top:150px}
.nb-h{font-size:clamp(1.2rem,2.6vw,1.45rem); display:flex; gap:10px; align-items:flex-start}
.nb-h > span{display:flex; gap:10px; align-items:flex-start}
.nb-no{flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:1rem}
.nb-viz{min-width:0}
.nb-mean{background:var(--teal-soft); border-radius:14px; padding:12px 14px; line-height:1.5}
.nb-src{color:var(--ink2); line-height:1.5; margin:0}
.nb-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start}
.nb-tools .btn{min-height:48px; padding:8px 16px; font-size:.98rem}
/* number buttons: look like numbers, act like buttons (44 px tall tap area) */
.nb-num{font:inherit; font-weight:800; color:var(--brand); background:none; border:0; padding:0 2px; margin:0; cursor:pointer; text-decoration:underline dotted 2px; text-underline-offset:4px;
  position:relative; display:inline; border-radius:6px}
.nb-num::after{content:""; position:absolute; left:-4px; right:-4px; top:50%; height:44px; transform:translateY(-50%)}
.nb-num:hover{background:var(--brand-soft)}
.nb-big{font-family:var(--display); font-size:clamp(2.6rem,10vw,3.6rem); line-height:1.05; text-decoration:none; color:var(--brand); display:inline-block; min-height:44px}
.nb-mid{font-family:var(--display); font-size:clamp(1.4rem,5vw,1.8rem); line-height:1.15; text-decoration:none; display:inline-block; min-height:44px; text-align:left}
.nb-info{font:700 .92rem var(--body); color:var(--brand); background:var(--brand-soft); border:0; border-radius:999px; min-height:44px; padding:6px 14px; cursor:pointer; margin-top:4px}
.nb-hero-n{display:flex; flex-direction:column; gap:2px}
.nb-unit{color:var(--ink2); font-weight:700}
.nb-legend{color:var(--ink2); font-size:.95rem; margin:8px 0 0; line-height:1.9}
.nb-axisnote{font-size:.88rem; line-height:1.4}
/* bars */
.nb-bars{display:flex; flex-direction:column; gap:10px}
.nb-row{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"l v" "t t"; gap:2px 10px; align-items:center}
.nb-bl{grid-area:l; font-size:.95rem; line-height:1.3}
.nb-row .nb-num{grid-area:v; justify-self:end; min-height:30px}
.nb-track{grid-area:t; position:relative; height:12px; background:var(--track); border-radius:999px}
.nb-fill{position:absolute; left:0; top:0; bottom:0; width:var(--w); background:var(--s1); border-radius:999px; transform-origin:left center}
.nb-fill.nb-s0{background:var(--s0)}
.nb-ref{position:absolute; top:-5px; bottom:-5px; left:var(--x); width:0; border-left:2px dashed var(--ref)}
.nb-key{display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:6px; vertical-align:-2px; background:var(--s1)}
.nb-key-ref{background:none; border-left:2px dashed var(--ref); border-radius:0; width:6px}
@media (min-width:620px){ .nb-row{grid-template-columns:minmax(120px,38%) minmax(0,1fr) auto; grid-template-areas:"l t v"} }
/* line */
.nb-linewrap{position:relative}
.nb-line{width:100%; height:auto; display:block; touch-action:pan-y}
.nb-line .nb-grid{stroke:var(--line); stroke-width:1}
.nb-line .nb-ax{fill:var(--ink2); font:600 13px var(--body)}
.nb-line .nb-path{fill:none; stroke:var(--s1); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
.nb-line .nb-dot{fill:var(--s1); stroke:var(--card); stroke-width:2}
.nb-line .nb-cross{stroke:var(--ink2); stroke-width:1; stroke-dasharray:3 3}
.nb-tip{position:absolute; top:4px; transform:translateX(-50%); background:var(--ink); color:var(--bg); font-weight:700; font-size:.9rem; padding:4px 10px; border-radius:8px; pointer-events:none; white-space:nowrap}
/* stack */
.nb-stack{display:flex; gap:2px; height:34px; border-radius:10px; overflow:hidden}
.nb-seg{flex:0 0 var(--w); background:var(--s1); transform-origin:left center}
.nb-c0{background:var(--s1)} .nb-c1{background:var(--s2)} .nb-c2{background:var(--s3)} .nb-cx{background:var(--track)}
.nb-keys{list-style:none; padding:0; display:flex; flex-direction:column; gap:2px; margin-top:8px}
.nb-keys li{line-height:1.9}
/* chips */
.nb-chips{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:8px; margin-top:8px}
.nb-chips li{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--brand-soft); font-weight:700; line-height:1.25}
.nb-chips li span{font-size:1.5rem}
/* test grid */
.nb-tgrid{width:100%; border-collapse:separate; border-spacing:0 4px; text-align:center}
.nb-tgrid th,.nb-tgrid td{padding:6px 4px; font-size:.95rem}
.nb-tgrid thead th{color:var(--ink2); font-weight:700}
.nb-tgrid tbody th{text-align:left; font-weight:800}
.nb-tgrid tr.nb-me th,.nb-tgrid tr.nb-me td{background:var(--gold-soft)}
.nb-tgrid tr.nb-me th{border-radius:10px 0 0 10px} .nb-tgrid tr.nb-me td:last-child{border-radius:0 10px 10px 0}
.nb-yes{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--s2); color:#fff; font-weight:800}
.nb-no2{color:var(--ink2)}
.nb-pill{display:inline-block; font-size:.75rem; background:var(--gold); color:#1B1300; border-radius:999px; padding:0 8px; margin-left:4px}
/* calendar windows */
.nb-cal{display:flex; flex-direction:column; gap:12px}
.nb-months{display:grid; grid-template-columns:repeat(4,1fr); color:var(--ink2); font-weight:700; font-size:.9rem; border-bottom:1px solid var(--line); padding-bottom:4px}
.nb-win{display:flex; flex-direction:column; gap:4px}
.nb-wl{font-size:.95rem; line-height:1.3}
.nb-wtrack{position:relative; height:16px; background:var(--track); border-radius:999px}
.nb-wbar{position:absolute; top:0; bottom:0; left:var(--l); width:var(--w); border-radius:999px; background:var(--s1); transform-origin:left center}
.nb-wbar.nb-s0{background:var(--s2)}
.nb-win .nb-num{align-self:flex-start; min-height:30px}
/* scale (levels) */
.nb-scale{margin-bottom:10px}
.nb-sl{font-weight:800; margin-bottom:4px}
.nb-sbar{display:flex; gap:2px; height:30px; border-radius:10px; overflow:hidden}
.nb-sseg{flex:0 0 var(--w); display:grid; place-items:center; font-size:.9rem; transform-origin:left center}
.nb-q0{background:var(--q0); color:var(--qink0)} .nb-q1{background:var(--q1); color:var(--qink0)} .nb-q2{background:var(--q2); color:#fff} .nb-q3{background:var(--q3); color:var(--qink2)}
.nb-sv{display:flex; flex-wrap:wrap; gap:0 14px; font-size:.92rem; color:var(--ink2); margin-top:4px; line-height:2}
.nb-words{font-size:.95rem; gap:2px; margin-top:6px}
/* attendance */
.nb-abar{display:flex; gap:2px; height:30px; border-radius:10px; overflow:hidden}
.nb-aseg{flex:0 0 var(--w); display:grid; place-items:center; transform-origin:left center}
.nb-aseg.nb-chronic{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 4px,transparent 4px 9px)}
.nb-key.nb-chronic{background:var(--q0); background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.25) 0 3px,transparent 3px 6px)}
.nb-aticks{position:relative; height:20px; font-size:.82rem; color:var(--ink2)}
.nb-aticks span{position:absolute; left:var(--x); transform:translateX(-50%); white-space:nowrap}
.nb-aticks span:first-child{transform:none}
/* ring */
.nb-ringwrap{position:relative; width:min(100%,220px); margin:0 auto}
.nb-ring{width:100%; height:auto; display:block}
.nb-rseg{fill:none; stroke:var(--s2); stroke-width:22}
.nb-ringc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
/* path & timeline */
.nb-path,.nb-tl{list-style:none; padding:0; display:flex; flex-direction:column; gap:0; position:relative}
.nb-path li,.nb-tl li{position:relative; padding:4px 0 14px 34px; display:flex; flex-direction:column; gap:2px; line-height:1.4}
.nb-path li::before,.nb-tl li::before{content:""; position:absolute; left:8px; top:10px; width:14px; height:14px; border-radius:50%; background:var(--s1); box-shadow:0 0 0 3px var(--card)}
.nb-path li::after,.nb-tl li::after{content:""; position:absolute; left:14px; top:24px; bottom:-6px; width:2px; background:var(--line)}
.nb-path li:last-child::after,.nb-tl li:last-child::after{display:none}
.nb-path li:last-child::before{background:var(--gold)}
.nb-when{align-self:flex-start; min-height:30px}
/* dates */
.nb-dates{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:10px}
.nb-date{border-radius:16px; padding:12px 14px; background:var(--brand-soft); display:flex; flex-direction:column; gap:4px}
.nb-date.nb-d1{background:var(--gold-soft)}
/* table view */
.nb-table summary{min-height:48px; display:flex; align-items:center; padding:0 14px; border:2px solid var(--line); border-radius:14px; cursor:pointer; font-weight:700}
.nb-tscroll{overflow-x:auto; margin-top:8px}
.nb-table table{border-collapse:collapse; min-width:100%; font-size:.95rem}
.nb-table th,.nb-table td{border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top}
.nb-tools details{flex:1 1 100%; border:0; padding:0; margin:0; background:none; box-shadow:none}
/* role cards on the index */
.nb-rolecards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.nb-rolecard{text-decoration:none; color:inherit; transition:transform .2s ease}
.nb-rolecard:hover{transform:translateY(-3px); border-color:var(--brand)}
.nb-rc-ic{font-size:2.4rem}
.nb-rc-n{font-weight:800; color:var(--brand)}
.nb-foot ul{line-height:1.5}
/* source sheet */
.nb-sheet{border:0; padding:0; border-radius:22px; max-width:min(560px,calc(100vw - 24px)); width:100%; background:var(--card); color:var(--ink); box-shadow:var(--shadow); max-height:calc(100dvh - 32px)}
.nb-sheet::backdrop{background:rgba(16,17,38,.55)}
.nb-sheet-in{padding:22px; display:flex; flex-direction:column; gap:10px; overflow:auto}
.nb-sheet h2{font-size:clamp(1.6rem,6vw,2.2rem)}
.nb-sheet dl{margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px}
.nb-sheet dt{font-weight:800; margin-top:8px}
.nb-sheet dd{margin:0; color:var(--ink2); line-height:1.5}
.nb-sheet .row{margin-top:10px}
.nb-toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); max-width:min(520px,calc(100vw - 32px)); background:var(--ink); color:var(--bg); padding:12px 16px; border-radius:14px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50}
.nb-toast.on{opacity:1; transform:translate(-50%,0)}
/* motion: only when JavaScript added .nb-anim (never with reduced motion) */
.nb-anim .nb-panel:not(.nb-in) .nb-fill,.nb-anim .nb-panel:not(.nb-in) .nb-wbar,.nb-anim .nb-panel:not(.nb-in) .nb-seg,.nb-anim .nb-panel:not(.nb-in) .nb-sseg,.nb-anim .nb-panel:not(.nb-in) .nb-aseg{transform:scaleX(0)}
.nb-anim .nb-panel:not(.nb-done) .nb-fill,.nb-anim .nb-panel:not(.nb-done) .nb-wbar,.nb-anim .nb-panel:not(.nb-done) .nb-seg,.nb-anim .nb-panel:not(.nb-done) .nb-sseg,.nb-anim .nb-panel:not(.nb-done) .nb-aseg{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.nb-anim .nb-panel:not(.nb-in) .nb-path{stroke-dashoffset:1}
.nb-anim .nb-panel:not(.nb-done) .nb-path{transition:stroke-dashoffset 1.4s ease}
.nb-anim .nb-panel:not(.nb-in) .nb-rseg,.nb-anim .nb-panel:not(.nb-in) .nb-chips li,.nb-anim .nb-panel:not(.nb-in) .nb-tl li,.nb-anim .nb-panel:not(.nb-in) .nb-path li{opacity:0}
.nb-anim .nb-panel:not(.nb-done) .nb-rseg,.nb-anim .nb-panel:not(.nb-done) .nb-chips li,.nb-anim .nb-panel:not(.nb-done) .nb-tl li,.nb-anim .nb-panel:not(.nb-done) .nb-path li{transition:opacity .5s ease calc(var(--i,0) * .15s)}
@media (prefers-reduced-motion:reduce){ .nb-fill,.nb-wbar,.nb-seg,.nb-sseg,.nb-aseg{transform:none!important} .nb-rseg,.nb-chips li,.nb-tl li,.nb-path li{opacity:1!important} .nb-line .nb-path{stroke-dashoffset:0!important} }
/* print: every panel whole, every source visible, no buttons */
@media print{
  header.top,.note,footer.foot,.nb-roles,.nb-tools,.nb-pagetools .btn,.nb-info,.g100-homelogo,.nb-toast,.skip{display:none!important}
  body{background:#fff; color:#000; font-size:12pt}
  .nb-grid{display:block}
  .nb-panel{break-inside:avoid; box-shadow:none; border:1px solid #999; margin:0 0 12pt}
  .nb-num{color:#000; text-decoration:none}
  .nb-fill,.nb-wbar,.nb-seg,.nb-sseg,.nb-aseg{transform:none!important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .nb-rseg,.nb-chips li,.nb-tl li,.nb-path li{opacity:1!important}
  .nb-line .nb-path{stroke-dashoffset:0!important}
  .nb-src{color:#000}
}
.nb-roles .nb-role[aria-current="page"]{background:var(--brand)!important; border-color:var(--brand)!important; color:var(--brand-ink)!important}
/* job pogfix (Nov 14): contrast 4.5:1 for the white check mark */
.nb-yes{background:#007D62}