/* LearnScope District Org Benchmark
   Tokens mirror capacity.learnscope.co so the two sites read as one. */
:root{
  --bg:#f7f7f4; --panel:#ffffff; --tint:#eeeee8;
  --ink:#26313f; --ink-soft:#4a5568; --ink-faint:#79828f;
  --line:#e6e6e0; --line-strong:#d3d3ca;
  --navy:#1a3a5b; --navy-600:#2b4d70; --navy-800:#14314f; --navy-100:#dfe7ef;
  --sage:#779876; --sage-600:#5f7d5e;
  --c-school:#1a3a5b; --c-field:#779876; --c-central:#c2c8d1;
  --bar-sel:#1a3a5b; --bar-bench:#8b96a6;
  --label-on-school:#ffffff; --label-on-field:#ffffff; --label-on-central:#26313f;
  --font-sans:"Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --radius:10px; --radius-sm:6px;
  --shadow-sm:0 1px 2px rgba(20,40,63,.06),0 1px 3px rgba(20,40,63,.08);
  --shadow-md:0 4px 14px rgba(20,40,63,.10);
  --maxw:1180px;
}

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.5}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--navy-600)}
h1,h2,h3{font-family:var(--font-serif);font-weight:700;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:clamp(28px,4vw,40px);line-height:1.15}
h2{font-size:20px;line-height:1.3}
h3{font-size:17px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-600)}
.muted{color:var(--ink-soft)} .small{font-size:12px}
.print-only{display:none}

/* header */
.site-header{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:5}
.hdr{display:flex;align-items:center;gap:14px;min-height:56px;padding-block:8px;flex-wrap:wrap}
.brand img{height:22px;width:auto;display:block}
.hdr .sep{width:1px;height:26px;background:var(--line-strong)}
.hdr .app{font-family:var(--font-serif);font-weight:700;font-size:17px;color:var(--navy-800)}
.hdr .tag{margin-left:auto;font-size:12px;color:var(--ink-faint)}

/* intro band */
.band{background:var(--tint);border-bottom:1px solid var(--line)}
.band-grid{padding-block:40px 32px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:32px;align-items:end}
.band p{max-width:62ch;margin:12px 0 0;color:var(--ink-soft)}
.picker{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-md)}
.picker label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.picker select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink)}
.picker select:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center;font-size:13px;color:var(--ink-soft)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--navy-100);color:var(--navy-800);font-weight:600;font-size:12px}

/* main */
.main-grid{padding-block:28px 48px;display:grid;gap:24px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;min-width:0}
.tile .l{font-size:12px;color:var(--ink-soft);margin-bottom:4px}
.tile .v{font-size:28px;font-weight:600;line-height:1.1;color:var(--ink)}
.tile .s{font-size:12px;color:var(--ink-faint);margin-top:4px}
.tile.accent{border-color:var(--navy-600)}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 14px;min-width:0;position:relative}
.card h2{margin-bottom:2px}
.card .sub{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
.chart svg{width:100%;height:auto;display:block;font-family:var(--font-sans)}
.note{font-size:12px;color:var(--ink-faint);margin:8px 0 0}
.warn{font-size:13px;color:var(--ink-soft);background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;line-height:1.4;padding:8px 10px;border-radius:6px;box-shadow:var(--shadow-md);max-width:240px;z-index:3}
.tip b{display:block;font-size:12px;margin-bottom:2px}

/* axis + marks */
.grid line{stroke:var(--line);stroke-width:1}
.axis text{fill:var(--ink-faint);font-size:11px;font-variant-numeric:tabular-nums}
.xlab,.ylab{fill:var(--ink-soft);font-size:12px}
.xlab.sel,.ylab.sel{fill:var(--ink);font-weight:600}
.cap{fill:var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.anno{fill:var(--ink-soft);font-size:11px;font-variant-numeric:tabular-nums}
.anno.up{fill:var(--navy-600)} .anno.down{fill:var(--sage-600)}
.hit{fill:transparent}
.bar{transition:opacity .15s}

/* donut */
.donut-row{display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:20px;align-items:center}
.donut svg{max-width:220px;margin:0 auto}
.donut .center-v{fill:var(--ink);font-size:30px;font-weight:600}
.donut .center-l{fill:var(--ink-faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.donut-legend{display:grid;gap:10px;font-size:14px}
.donut-legend .row{display:grid;grid-template-columns:14px 1fr auto auto;gap:10px;align-items:center;min-width:0}
.donut-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.donut-legend .k{color:var(--ink)}
.donut-legend .n{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.donut-legend .p{font-weight:600;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.donut-legend .d{grid-column:2/-1;font-size:12px;color:var(--ink-faint);margin-top:-6px}

/* strategic design questions */
.questions{margin:12px 0 0;padding:0 0 0 22px;display:grid;gap:12px;color:var(--ink-soft)}
.questions li{padding-left:4px}
.questions li::marker{color:var(--sage-600);font-weight:700}

/* positioning */
.positioning{padding:28px 24px}
.positioning h2{font-size:24px;margin:6px 0 14px}
.positioning .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.positioning .cols p{margin:0;color:var(--ink-soft);font-size:14.5px}
.cta{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:18px;align-items:center}
.cta strong{display:block;font-family:var(--font-serif);font-size:17px;color:var(--navy-800);margin-bottom:4px}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.cta-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cta-btn .qr{width:96px;height:96px}
.btn{display:inline-block;font:inherit;font-size:14px;font-weight:600;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--panel);color:var(--navy-800);text-decoration:none;cursor:pointer;box-shadow:var(--shadow-sm)}
.btn:hover{border-color:var(--navy-600)}
.btn.primary{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn.primary:hover{background:var(--navy-600)}
.btn:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:default}

/* table */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th{font-size:12px;color:var(--ink-soft);font-weight:600;letter-spacing:.03em;text-transform:uppercase}
th:first-child,td:first-child{text-align:left;white-space:normal}
th.left,td.left{text-align:left;white-space:normal}
td.sel,th.sel{background:var(--navy-100)}
tr.me td{font-weight:700;background:var(--navy-100)}
.scroll{overflow-x:auto}
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--navy-800);list-style:none;display:flex;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);transform:rotate(-45deg);transition:transform .15s}
details[open] summary::before{transform:rotate(45deg)}
details .body{padding:0 18px 16px}
details .body p{margin:0 0 10px}

/* share form */
.share{padding:24px}
.share-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1.2fr);gap:28px;align-items:start}
.share h2{margin:6px 0 8px}
form{display:grid;gap:12px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.field input{width:100%;font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink)}
.field input:focus-visible{outline:2px solid var(--navy-600);outline-offset:1px}
.field input[aria-invalid="true"]{border-color:#b4533c}
.form-error{margin:0;font-size:13px;color:#b4533c}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.share-done h3{margin-bottom:6px}

footer .wrap{padding-block:20px 36px;font-size:12px;color:var(--ink-faint);border-top:1px solid var(--line)}
footer p{margin:4px 0}

@media (max-width:900px){
  .band-grid,.charts,.share-grid,.cta{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .positioning .cols{grid-template-columns:1fr}
}
@media (max-width:520px){ .tile .v{font-size:24px} .donut-row{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* print: the page becomes the report */
@media print{
  @page{margin:14mm}
  html,body{background:#fff;font-size:11.5px}
  .site-header,.band,.no-print,.note,.tip,footer .no-print{display:none!important}
  .print-only{display:block}
  .report-head{margin-bottom:4px;padding-bottom:10px;border-bottom:2px solid #14314f}
  .report-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5f7d5e;font-weight:700}
  .report-brand img{height:18px;width:auto}
  .report-head h1{font-size:26px}
  .report-head p{margin:4px 0 0;font-size:11px}
  .main-grid{padding-block:0;gap:10px}
  .tiles{grid-template-columns:repeat(4,1fr);gap:8px}
  .tile{padding:8px 10px}
  .tile .v{font-size:20px}
  .charts{grid-template-columns:1fr 1fr;gap:10px}
  .card{box-shadow:none;border-color:#ddd;padding:10px 12px;break-inside:avoid}
  .card h2{font-size:14px}
  .card .sub{font-size:10.5px;margin-bottom:6px}
  .donut-row{grid-template-columns:150px 1fr;gap:12px}
  .donut svg{max-width:150px}
  .donut-legend{font-size:11px;gap:8px}
  .donut-legend .d{display:none}
  .donut-legend .n{white-space:nowrap}
  .interp p{font-size:11px;margin-top:6px}
  .positioning{break-before:page;padding:14px 16px}
  .positioning h2{font-size:18px;margin:4px 0 10px}
  .positioning .cols{grid-template-columns:1fr 1fr 1fr;gap:14px}
  .positioning .cols p{font-size:11px}
  .cta{grid-template-columns:1fr;gap:10px;margin-top:14px;padding-top:12px}
  .cta strong{font-size:14px}
  .cta-btns{gap:28px}
  .cta-btn{align-items:center;gap:6px}
  .cta-btn .qr{display:block;width:28mm;height:28mm}
  .cta-btn .btn{font-size:11px;padding:6px 10px}
  .questions{gap:8px;font-size:11px}
  table{font-size:11px}
  th,td{padding:5px 8px}
  .btn{box-shadow:none}
  .btn.primary{background:#14314f!important;color:#fff!important}
  .scroll{overflow:visible}
  svg,*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit;text-decoration:none}
}