:root{
  /* === HEY VEYRA BRAND — cream is the room, white is the furniture, purple is punctuation.
     Palette per "Veyra brand guideline" v1.0: purple #8452B5 · cream #F7EABF · white · ink
     #1B2139, with the brand-house tones (gold/indigo/teal/red/olive) as the functional data
     language. Keep this block in step with CHART_COLORS (js/utils.js) and the PALETTES in
     js/pebble-wiring.js. === */
  --white:#FFFFFF;--off:#F7EABF;--pale:#FBF3D9;--mist:#EEE9F5;--stone:#8B92A8;
  --mid:#4B5268;--ink:#1B2139;--deep:#141A30;
  --cream:#F7EABF;--cream-soft:#FBF3D9;--line:#E9DCAE;
  --primary:#8452B5;--primary-lt:#EFE6F7;--primary-md:#B491D6;--primary-dk:#6E3F9C;
  --accent-yellow:#D29B2E;--accent-yellow-lt:#F9EFD4;
  --accent-green:#2A6565;--accent-green-lt:#E0EAEA;
  --accent-red:#A8453D;--accent-red-lt:#F6E7E2;
  --blue:#8452B5;--blue-lt:#EFE6F7;--blue-md:#B491D6;
  --green:#2A6565;--green-lt:#E0EAEA;
  --red:#A8453D;--red-lt:#F6E7E2;
  --amber:#D29B2E;--amber-lt:#F9EFD4;
  --purple:#8452B5;--purple-lt:#EFE6F7;
  --teal:#2A6565;--teal-lt:#E0EAEA;
  --focus:#D29B2E;--focus-lt:#F9EFD4;--focus-md:#E3BC6B;--focus-dk:#B88420;
  --thinking:#2E2E7F;--thinking-lt:#E7E7F4;--thinking-md:#8484BC;--thinking-dk:#232366;
  --memory:#2A6565;--memory-lt:#E0EAEA;--memory-md:#79A5A5;--memory-dk:#1F4D4D;
  --veyra-navy:#1B2139;--veyra-gold:#D29B2E;
}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
body{font-family:'Jost',sans-serif;background:var(--off);color:var(--ink);line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:'Jost',sans-serif;cursor:pointer;border:none;font-size:.95rem}
input,select,textarea{font-family:'Jost',sans-serif}

/* AUTH */
.auth-screen{display:flex;height:100vh}
.auth-left{flex:1;background:#8452B5;color:#fff;padding:4rem;display:flex;flex-direction:column;justify-content:center}
.auth-left h1{font-family:'Nunito',sans-serif;font-size:3rem;font-weight:900;letter-spacing:-.02em;margin-bottom:1rem}
.auth-left p{font-family:'Playfair Display',serif;font-size:1.3rem;opacity:.9;margin-bottom:3rem}
.auth-left ul{list-style:none}
.auth-left li{padding:.8rem 0;font-size:1rem}
.auth-left li:before{content:"\2713\20";margin-right:.5rem} /* escaped: CSS is served without a charset header */
.auth-right{flex:1;background:var(--white);padding:4rem;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto}
.auth-right h2{margin-bottom:2rem;color:var(--ink)}
.auth-form{display:flex;flex-direction:column}
.auth-form input{padding:.8rem 1rem;margin-bottom:1rem;border:1px solid var(--mist);border-radius:.5rem}
.auth-form button{padding:.8rem 1rem;background:var(--primary);color:#fff;border-radius:.5rem;margin-bottom:.5rem;font-weight:600}
.auth-form button:hover{background:#6E3F9C}
/* SSO sign-in buttons (Google / Microsoft / myLogin) */
.sso-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1rem;background:#fff;color:var(--ink);border:1px solid var(--mist);border-radius:.5rem;margin-bottom:.6rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .12s,border-color .12s}
.sso-btn:hover{background:var(--pale);border-color:var(--mid)}

/* APP */
.app-hidden{display:none}
.app{display:flex;flex-direction:column;height:100vh}
.topbar{background:#fff;border-bottom:1px solid var(--mist);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}
.topbar-left{display:flex;align-items:center;gap:2rem;font-size:1.2rem;font-weight:600;color:var(--primary)}
.topbar-nav{display:flex;gap:2rem}
.topbar-nav button{background:none;padding:.5rem 0;border-bottom:2px solid transparent;color:var(--mid);font-weight:600}
.topbar-nav button.active{border-bottom-color:var(--primary);color:var(--primary)}
.topbar-right{display:flex;align-items:center;gap:1.5rem}
.school-chip{background:var(--pale);padding:.6rem 1rem;border-radius:2rem;font-size:.9rem;color:var(--ink)}
.avatar-section{display:flex;align-items:center;gap:.8rem}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.role-badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.3rem .6rem;border-radius:.3rem;text-transform:uppercase}
.role-badge.admin{background:var(--blue-lt);color:var(--primary)}
.role-badge.slt{background:var(--red-lt);color:var(--red)}
.role-badge.year{background:var(--amber-lt);color:var(--amber)}
.role-badge.tutor{background:var(--green-lt);color:var(--green)}

/* TABS */
.tabs-container{flex:1;overflow:hidden;display:flex;flex-direction:column}
.tab-pane{display:none;flex:1;overflow-y:auto;padding:2rem}
.tab-pane.active{display:flex;flex-direction:column}

/* SCOPE BAR */
.scope-bar{display:flex;gap:1.5rem;margin-bottom:2rem;align-items:center}
.scope-control{display:flex;gap:.5rem;align-items:center}
.scope-control label{font-weight:600;font-size:.9rem;color:var(--mid)}
.scope-control select{padding:.5rem .8rem;border:1px solid var(--mist);border-radius:.4rem;background:#fff}
.generate-report-btn{margin-left:auto;padding:.6rem 1.2rem;background:var(--primary);color:#fff;border-radius:.4rem;font-weight:600}
.generate-report-btn:hover{background:#6E3F9C}

/* DASHBOARD */
.dashboard-content{display:flex;flex-direction:column;gap:2rem}

/* METRIC CARDS — clean, no drill-down */
.metrics-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.metrics-row-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-bottom:.65rem;padding:0 .1rem}
.metrics-row-label{font-family:'Jost',sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--deep,#1B2139);display:flex;align-items:center;gap:.7rem}
.metrics-row-label::after{content:"";flex:1;height:1px;background:var(--mist,#EEE9F5)}
.metrics-row-label-progress{grid-column:span 2}
.metrics-row-label-challenges{grid-column:span 3}
.metric-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 1px 3px rgba(27,33,57,.06);cursor:pointer;transition:all .2s;position:relative;border:1px solid var(--mist)}
.metric-card:hover{box-shadow:0 4px 16px rgba(27,33,57,.12);transform:translateY(-2px)}
.metric-card-bar{display:none}
.metric-card-bar.c-blue{background:var(--blue)}
.metric-card-bar.c-red{background:var(--red)}
.metric-card-bar.c-amber{background:var(--amber)}
.metric-card-bar.c-teal{background:var(--teal)}
.metric-card-bar.c-purple{background:var(--purple)}
/* All KPI cards: uniform navy/blue outline — calm and consistent */
.metric-card{border:2px solid var(--blue) !important}
.metric-card-body{padding:1.2rem 1.4rem}
.metric-card-label{font-size:.8rem;color:var(--mid);text-transform:uppercase;font-weight:600;letter-spacing:.04em}
.metric-card-number{font-size:2.2rem;font-weight:700;color:var(--ink);margin:.3rem 0}
.metric-card-desc{font-size:.85rem;color:var(--stone)}
.metric-card-arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--mist);transition:color .2s}
.metric-card:hover .metric-card-arrow{color:var(--blue)}
.metric-card-hint{font-size:.72rem;color:var(--blue);font-weight:600;margin-top:.4rem;opacity:0;transition:opacity .2s}
.metric-card:hover .metric-card-hint{opacity:1}

/* CHART DESCRIPTIONS */
.chart-desc{font-size:.85rem;color:var(--mid);margin-top:-.3rem;margin-bottom:.8rem;line-height:1.4}
.abbr-tip{border-bottom:1px dotted var(--stone);cursor:help}

/* CHARTS */
.charts-section{background:#fff;border-radius:22px;padding:2rem;box-shadow:0 1px 3px rgba(27,33,57,.06);border:1px solid var(--mist)}
.charts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.charts-header h3{font-size:1.15rem;font-weight:600;color:var(--ink)}
.domain-pills{display:flex;gap:.6rem}
.domain-pill{padding:.45rem 1.1rem;border:2px solid var(--mist);border-radius:2rem;background:#fff;cursor:pointer;font-weight:600;font-size:.85rem;transition:all .2s;color:var(--mid)}
.domain-pill.active{background:var(--thinking);color:#fff;border-color:var(--thinking)}
.domain-pill:hover{border-color:var(--blue)}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.chart-container{position:relative;height:300px}

/* ENGAGEMENT */
.section-card{background:#fff;border-radius:22px;padding:2rem;box-shadow:0 1px 3px rgba(27,33,57,.06);border:1px solid var(--mist)}
.section-card h3{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:1.2rem}
.insight-box{background:var(--blue-lt);border-left:4px solid var(--blue);padding:1rem 1.5rem;border-radius:.4rem;margin-bottom:1.5rem;font-size:.95rem;color:var(--ink)}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.5rem}
.stat-box{background:var(--pale);padding:1rem;border-radius:.5rem;text-align:center}
.stat-label{font-size:.8rem;color:var(--mid);text-transform:uppercase;font-weight:600}
.stat-value{font-size:1.8rem;font-weight:700;color:var(--ink)}
.stat-unit{font-size:.8rem;color:var(--stone)}

/* ENGAGEMENT METRICS */
.eng-metric{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;background:var(--off);border-radius:.5rem;margin-bottom:.6rem}
.eng-metric-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0;font-weight:700}
.eng-metric-info{flex:1}
.eng-metric-label{font-size:.8rem;color:var(--mid);font-weight:600}
.eng-metric-value{font-size:1.3rem;font-weight:700;color:var(--ink)}
.eng-metric-sub{font-size:.75rem;color:var(--stone)}

/* SLOT TRACKER */
.slot-tracker{background:var(--off);border-radius:.6rem;padding:1rem 1.1rem;margin-bottom:1rem}
.slot-bar{height:10px;background:#fff;border:1px solid var(--mist);border-radius:6px;overflow:hidden;margin-top:.55rem}
.slot-fill{height:100%;border-radius:6px;transition:width .3s}
.slot-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--mid);font-weight:600}

/* REFER CTA (Pebble programme status widget) */
.refer-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;background:#F9EFD4;border:1px solid #E3BC6B;border-radius:.7rem;padding:.95rem 1.1rem;cursor:pointer;text-align:left;transition:transform .15s,box-shadow .2s;box-shadow:0 1px 2px rgba(176,130,40,.15);font-family:inherit}
.refer-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(176,130,40,.22)}
.refer-cta-body{display:flex;align-items:center;gap:1rem;min-width:0;flex:1}
.refer-cta-n{font-family:'Nunito',sans-serif;font-size:2.6rem;font-weight:800;color:#B88420;line-height:1;letter-spacing:-.02em;min-width:2rem;text-align:center}
.refer-cta-text{min-width:0}
.refer-cta-title{font-size:.95rem;font-weight:700;color:#1B2139;line-height:1.3}
.refer-cta-sub{font-size:.78rem;color:#4B5268;margin-top:.2rem;line-height:1.4}
.refer-cta-action{font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--purple,#8452B5);padding:.6rem .95rem;border-radius:.4rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;transition:background .15s;flex-shrink:0}
.refer-cta:hover .refer-cta-action{background:#6E3F9C}
.refer-cta-done{background:#E0EAEA;border-color:#E0EAEA;box-shadow:none;cursor:default}
.refer-cta-done:hover{transform:none;box-shadow:none}
.refer-cta-tick{font-size:1.4rem;color:var(--green,#2A6565);background:#fff;border:1px solid #E0EAEA;width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:600}
.refer-cta-done .refer-cta-title{color:var(--deep,#1B2139)}
.refer-cta-done .refer-cta-sub{color:var(--mid,#4B5268)}

/* card-flash is used when the refer CTA deep-links to the Interventions tab */
.card-flash{animation:card-flash 1.6s ease-out}
@keyframes card-flash{0%{box-shadow:0 0 0 0 rgba(205,154,44,.55)}50%{box-shadow:0 0 0 12px rgba(205,154,44,0)}100%{box-shadow:0 0 0 0 rgba(205,154,44,0)}}

/* CLICKABLE LINKS */
.link-action{color:var(--blue);cursor:pointer;font-weight:600;text-decoration:underline}
.link-action:hover{color:#6E3F9C}

/* LIST COLUMN TABS */
.list-col-tabs{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.list-col-tab{padding:.4rem .9rem;background:var(--pale);border:1px solid var(--mist);border-radius:.4rem;font-size:.8rem;font-weight:600;color:var(--mid);cursor:pointer}
.list-col-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.student-table td.sev-sig{background:var(--red-lt);color:var(--red);font-weight:600}
.student-table td.sev-mod{background:var(--amber-lt);color:var(--amber);font-weight:600}
.student-table td.sev-mild{background:var(--teal-lt);color:var(--teal);font-weight:600}
.student-table td.sev-healthy{background:var(--green-lt);color:var(--green);font-weight:600}
.student-table td.sev-above{background:var(--blue-lt);color:var(--blue);font-weight:600}

/* STUDENTS TAB */
.students-controls{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:center;flex-wrap:wrap}
.view-toggle{display:flex;gap:.4rem}
.view-toggle button{padding:.5rem 1rem;background:var(--pale);border:1px solid var(--mist);border-radius:.4rem;font-weight:600;color:var(--mid)}
.view-toggle button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.search-box{padding:.6rem 1rem;border:1px solid var(--mist);border-radius:.4rem;flex:1;max-width:300px}
.sort-select{padding:.6rem 1rem;border:1px solid var(--mist);border-radius:.4rem;background:#fff}
.count-display{margin-left:auto;font-size:.9rem;color:var(--mid)}

/* STUDENT CARDS */
.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.2rem}
.student-card{background:var(--pale);border-radius:22px;overflow:hidden;box-shadow:0 1px 3px rgba(27,33,57,.06);transition:box-shadow .2s;border:1px solid var(--mist)}
.student-card:hover{box-shadow:0 4px 12px rgba(27,33,57,.12)}
.sc-header{background:#8452B5;color:#fff;padding:1rem 1.2rem;display:flex;justify-content:space-between;align-items:center}
.sc-name{font-size:1.05rem;font-weight:700}
.sc-meta{font-size:.8rem;opacity:.85;margin-top:.15rem}
.sc-badge{font-size:.7rem;font-weight:600;padding:.25rem .55rem;border-radius:.25rem;text-transform:uppercase;background:rgba(255,255,255,.2);color:#fff}
.sc-body{padding:1.2rem;background:var(--pale)}
.sc-flags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.flag-chip{font-size:.75rem;padding:.2rem .5rem;border-radius:.25rem;font-weight:500}
.flag-chip.red{background:var(--red-lt);color:var(--red)}
.flag-chip.amber{background:var(--amber-lt);color:var(--amber)}
.flag-chip.teal{background:var(--teal-lt);color:var(--teal)}
.flag-chip.blue{background:var(--blue-lt);color:var(--blue)}
.flag-chip.purple{background:var(--purple-lt);color:var(--purple)}
.sc-domains{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:.8rem}
.sc-domain{text-align:center;padding:.6rem;background:#fff;border-radius:.4rem}
.sc-domain-pct{font-size:1.3rem;font-weight:700}
.sc-domain-label{font-size:.75rem;font-weight:600;color:var(--mid)}
.sc-domain-sev{font-size:.7rem;color:var(--stone)}
.sc-engagement{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;padding:.8rem;background:var(--pale);border-radius:.4rem;margin-bottom:.8rem}
.sc-eng-item{text-align:center}
.sc-eng-label{font-size:.7rem;color:var(--mid);text-transform:uppercase;font-weight:600}
.sc-eng-value{font-size:1.1rem;font-weight:700;color:var(--ink)}
.sc-actions{display:flex;gap:.5rem}
.sc-actions button{flex:1;padding:.55rem .6rem;font-size:.82rem;font-weight:600;border-radius:.4rem;border:1px solid var(--mist);background:#fff;color:var(--blue)}
.sc-actions button:hover{background:var(--blue-lt)}
.sc-actions button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.sc-actions button.primary:hover{background:#6E3F9C}

/* LIST VIEW */
.student-table{width:100%;border-collapse:collapse;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 1px 3px rgba(27,33,57,.06);border:1px solid var(--mist)}
.student-table thead{background:var(--pale)}
.student-table th{padding:.8rem 1rem;text-align:left;font-weight:600;font-size:.85rem;color:var(--ink);cursor:pointer;user-select:none}
.student-table th:hover{background:var(--mist)}
.student-table td{padding:.7rem 1rem;border-bottom:1px solid var(--mist);font-size:.9rem}
.student-table tbody tr{cursor:pointer}
.student-table tbody tr:hover{background:var(--off)}
.sort-indicator{margin-left:.3rem;font-size:.75rem}

/* PARENT PORTAL */
.parent-card{background:#fff;border-radius:22px;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 12px rgba(27,33,57,.06);border:1px solid var(--mist)}
.parent-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.parent-card-name{font-size:1.4rem;font-weight:700;color:var(--ink)}
.parent-card-meta{color:var(--stone);font-size:.9rem}
.parent-section{background:var(--cream,#F7EABF);border-radius:.8rem;padding:1.25rem;margin-bottom:1.25rem}
.parent-section-title{font-weight:700;color:var(--ink);margin-bottom:1rem;font-size:1rem}
.parent-domain-row{display:flex;align-items:center;margin-bottom:.75rem;gap:1rem}
.parent-domain-label{width:80px;font-weight:600;font-size:.9rem}
.parent-domain-level{width:120px;font-size:.85rem}
.parent-domain-bar{flex:1;height:10px;background:var(--mist);border-radius:5px;overflow:hidden}
.parent-domain-fill{height:100%;border-radius:5px;transition:width .5s}
.parent-engagement-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--mist);font-size:.95rem}
.parent-engagement-row:last-child{border-bottom:none}
.parent-engagement-label{color:var(--mid)}
.parent-engagement-value{font-weight:600;color:var(--ink)}
.parent-intervention-btn{background:var(--primary);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:.5rem;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit}
.parent-intervention-btn:hover{background:#6E3F9C}
.parent-request-status{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#EEF2DF;border-radius:.5rem;font-size:.9rem;color:#41540D;font-weight:600;margin-top:.75rem}
.parent-warning{color:#B88420;font-weight:600;font-size:.85rem;margin-top:.3rem}
.parent-plain-text{color:var(--stone);font-size:.9rem;line-height:1.6;margin:.8rem 0}

/* PROFILE PANEL */
.profile-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);z-index:99;display:none}
.profile-overlay.open{display:block}
.profile-panel{position:fixed;right:0;top:0;width:min(1100px,92vw);height:100vh;background:#fff;box-shadow:-4px 0 20px rgba(27,33,57,.18);z-index:100;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease}
.profile-panel.open{transform:translateX(0)}
.pp-header{background:#8452B5;color:#fff;padding:1.5rem;position:sticky;top:0;z-index:101}
.pp-top{display:flex;justify-content:space-between;align-items:flex-start}
.pp-name{font-size:1.3rem;font-weight:700}
.pp-meta{font-size:.9rem;opacity:.85;margin-top:.3rem}
.pp-close{font-size:1.5rem;cursor:pointer;padding:.3rem;background:none;border:none;color:inherit;line-height:1}
.pp-close:hover{opacity:.7}
.pp-close:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:.3rem}
.pp-actions{display:flex;gap:.8rem;margin-top:1rem}
.pp-actions button{flex:1;padding:.6rem 1rem;background:#fff;color:var(--primary);border-radius:.4rem;font-weight:600;font-size:.85rem}
.pp-actions button:hover{background:var(--blue-lt)}
.pp-actions button.download{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3)}
.pp-actions button.download:hover{background:rgba(255,255,255,.25)}
.pp-content{padding:1.5rem}
.pp-section{margin-bottom:2rem}
.pp-section h3{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--mist)}

/* Domain cards in profile */
.domain-detail{background:var(--off);border-radius:.5rem;padding:1.2rem;margin-bottom:1.2rem}
.dd-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}
.dd-title{font-weight:700;color:var(--ink);font-size:1rem}
.dd-score{font-size:1.4rem;font-weight:700}
.dd-desc{font-size:.85rem;color:var(--stone);margin-bottom:1rem}
.dd-severity{display:inline-block;font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:.25rem;margin-left:.5rem}
.skill-bar{margin-bottom:.7rem}
.skill-label{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.15rem;display:flex;justify-content:space-between}
.skill-progress{height:22px;background:#fff;border-radius:.3rem;overflow:hidden}
.skill-fill{height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:600;border-radius:.3rem;min-width:28px}
.dd-recs{margin-top:1rem;padding:1rem;background:#fff;border-radius:.4rem;border-left:4px solid var(--amber)}
.dd-recs-title{font-weight:700;color:var(--amber);font-size:.85rem;margin-bottom:.5rem}
.dd-recs-text{font-size:.85rem;color:var(--ink);line-height:1.6}
.dd-recs-item{margin-bottom:.4rem;padding-left:.8rem;position:relative}
.dd-recs-item:before{content:"\2022";position:absolute;left:0;color:var(--amber)} /* escaped: CSS is served without a charset header */

/* Wellbeing cards */
.wb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.wb-card{background:#fff;padding:1rem;border-radius:.5rem;border-left:4px solid var(--stone)}
.wb-card-label{font-size:.82rem;font-weight:700;color:var(--ink)}
.wb-card-status{font-size:.82rem;font-weight:600;margin-top:.3rem}
.wb-card-desc{font-size:.75rem;color:var(--stone);margin-top:.2rem}
.wb-overall{background:#fff;padding:1.2rem;border-radius:.5rem;text-align:center;margin-bottom:1rem}
.wb-overall-score{font-size:2rem;font-weight:700;color:var(--blue)}
.wb-overall-label{font-size:.9rem;color:var(--mid);font-weight:600}
.wb-overall-severity{font-size:.85rem;color:var(--stone);margin-top:.2rem}

/* AI Chat in profile */
.ai-chat{background:var(--blue-lt);border:2px solid var(--blue-md);border-radius:.5rem;padding:1.2rem}
.ai-suggestions{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.ai-suggestion{padding:.55rem .8rem;background:#fff;border:1px solid var(--blue-md);border-radius:.3rem;text-align:left;cursor:pointer;font-size:.82rem;color:var(--blue);font-weight:500}
.ai-suggestion:hover{background:var(--blue-lt)}
.ai-messages{max-height:250px;overflow-y:auto;margin-bottom:1rem}
.ai-msg{margin-bottom:.8rem;padding:.8rem;border-radius:.4rem;font-size:.88rem;line-height:1.5}
.ai-msg.user{background:#fff}
.ai-msg.bot{background:rgba(26,95,180,.08)}
.ai-msg-label{font-weight:700;color:var(--blue);margin-bottom:.2rem;font-size:.8rem}
.ai-input-row{display:flex;gap:.5rem}
.ai-input-row input{flex:1;padding:.6rem .8rem;border:1px solid var(--mist);border-radius:.4rem;font-size:.88rem}
.ai-input-row button{padding:.6rem 1rem;background:var(--primary);color:#fff;border-radius:.4rem;font-weight:600}

/* REPORT MODAL */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:200;display:none;justify-content:center;align-items:center}
.modal-overlay.open{display:flex}
.report-modal{background:var(--off);border-radius:22px;width:96%;max-width:1200px;max-height:95vh;overflow-y:auto;display:flex;flex-direction:column}
.rm-header{background:#8452B5;color:#fff;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:201;border-radius:22px 22px 0 0}
.rm-header h2{font-size:1.2rem;font-weight:700}
.rm-close{font-size:1.5rem;cursor:pointer;padding:.3rem}
.rm-content{padding:2rem;flex:1}
.report-page{page-break-after:always;margin-bottom:2rem}
/* ── REPORT PAGES ── */
.rb-page{background:#FAFAF5;border-radius:10px;margin-bottom:2.5rem;border:1px solid #ccc;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);width:1120px;min-height:790px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column}
.rb-header{background:#D8EDF9;padding:6px 24px;display:flex;align-items:center;justify-content:center;position:relative;font-size:13px;height:36px;flex-shrink:0}
.rb-header .rb-brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.rb-header .rb-sep{width:1px;height:14px;background:#999;margin:0 8px}
.rb-header .rb-motto{font-weight:600;font-size:12px;color:#555}
.rb-header .rb-page-num{position:absolute;left:14px;width:26px;height:26px;background:#E8C840;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#000;font-weight:700;font-size:11px}
.rb-header .rb-student-info{position:absolute;right:18px;display:flex;gap:16px;align-items:center;font-size:12px;font-weight:500}
.rb-tabs-wrap{padding:0 32px;margin-top:-1px;flex-shrink:0}
.rb-tabs{display:flex;gap:3px}
.rb-tab{flex:1;text-align:center;padding:10px 6px;font-size:11px;font-weight:500;background:#F6F2E9;border:1px solid #bbb;border-bottom:none;border-radius:12px 12px 0 0;color:#999;cursor:default;margin-top:8px;position:relative;z-index:1}
.rb-tab.active{background:#E5E4E9;font-weight:700;color:#000;font-size:18px;z-index:3;padding:12px 6px;margin-top:0;flex:2}
.rb-subtitle-band{background:#E5E4E9;border-bottom:1px solid #bbb;padding:6px 20px;display:flex;align-items:center;justify-content:center;min-height:36px;flex-shrink:0}
.rb-subtitle-pill{background:#F6F2E9;border-radius:18px;padding:6px 32px;font-style:italic;font-weight:700;font-size:14px;text-align:center}
.rb-split{display:flex;width:100%}
.rb-split-title{flex:1;text-align:center;font-weight:700;font-size:22px;padding:4px 0;color:#000}
.rb-panel{background:#FAFAF5;border:1px solid #bbb;border-top:none;padding:20px 28px;flex:1;display:flex;flex-direction:column}
.rb-3col{display:grid;grid-template-columns:24fr 44fr 32fr;gap:20px;flex:1}
.rb-2col-cat{display:grid;grid-template-columns:40fr 60fr;gap:24px;flex:1}
.rb-def-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rb-card{border-radius:14px;padding:14px 14px 14px 24px;position:relative;min-height:170px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.rb-card .rb-card-side{position:absolute;left:8px;top:14px;bottom:auto;width:16px;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:flex-start;font-weight:700;font-size:9px;letter-spacing:.4px;text-transform:capitalize;color:#111;background:none;font-style:italic}
.rb-card .rb-card-art{position:absolute;top:-10px;right:-10px;width:160px;height:160px;opacity:0.7}
.rb-card .rb-card-art svg{width:100%;height:100%}
.rb-card-bar{width:6px;height:18px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:7px;flex-shrink:0}
.rb-card-title{font-weight:700;font-size:15px;margin-bottom:5px;display:flex;align-items:center;font-family:'Jost',sans-serif;white-space:nowrap}
.rb-card-desc{font-size:11px;color:#333;line-height:1.5;font-style:italic}
.rb-subcard{position:relative;margin-bottom:0}
.rb-sc-shadow{position:absolute;top:4px;left:4px;right:-4px;bottom:-4px;border:5px solid #eee;border-radius:10px;z-index:0}
.rb-sc-main{position:relative;z-index:1;border-radius:10px;border-width:3px;border-style:solid;padding:12px;display:flex;flex-direction:column;gap:6px;min-height:140px}
.rb-sc-pill{align-self:center;border-radius:999px;padding:5px 18px;border-width:2px;border-style:solid;font-weight:700;font-size:13px;text-align:center;min-height:28px;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif}
.rb-sc-bullet{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.4;color:#1A1A1A}
.rb-sc-num{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:8px;flex-shrink:0;margin-top:2px}
.rb-sc-body{font-size:11px;text-align:center;color:#1A1A1A;line-height:1.4;padding:6px 8px;flex:1;display:flex;align-items:center;justify-content:center}
.rb-right{display:flex;flex-direction:column;gap:12px}
.rb-tile-hdr{font-weight:700;font-size:15px;margin-bottom:6px;font-style:italic}
.rb-top-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rb-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:12px;flex:1}
.rb-metric-col{display:flex;flex-direction:column;gap:8px;align-items:center}
.rb-how-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.rb-how-icon{width:36px;height:36px;border-radius:50%;background:#CFE5B0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.rb-how-title{font-weight:700;font-size:13px;margin-bottom:3px}
.rb-how-sub{font-size:11px;color:#444;line-height:1.5}
.rb-chip{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rb-chip-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.rb-chip-label{font-size:12px;font-weight:600;color:#555}
.rb-mini-title{font-weight:700;font-size:15px;margin-bottom:4px;color:#000}
.rb-mini-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.rb-gauge-desc{font-size:11px;color:#555;text-align:center;line-height:1.4;margin-top:4px;max-width:220px;margin-left:auto;margin-right:auto}
.rb-trend-desc{font-size:11px;color:#555;line-height:1.4;margin-top:6px}
@media print{.rb-page{box-shadow:none;border:none;page-break-after:always;width:297mm;height:210mm;margin:0}.rb-header,.rb-tab,.rb-tab.active,.rb-subtitle-band,.rb-card,.rb-card .rb-card-side,.rb-sc-main,.rb-sc-pill,.rb-chip-dot,.rb-how-icon,.rb-subtitle-pill{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
.rp-title{font-size:1.4rem;font-weight:700;color:var(--ink);margin-bottom:.5rem;border-bottom:3px solid var(--blue);padding-bottom:.6rem}
.rp-subtitle{font-size:.95rem;color:var(--mid);margin-bottom:1.5rem}
.rp-domain-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}
.rp-domain-box{background:var(--off);padding:1.5rem;border-radius:.5rem;text-align:center}
.rp-domain-name{font-weight:700;color:var(--ink);margin-bottom:.4rem}
.rp-domain-pct{font-size:2rem;font-weight:700;color:var(--blue);margin-bottom:.2rem}
.rp-domain-sev{font-size:.85rem;color:var(--mid)}
.rp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.rp-skill-box{background:var(--off);padding:1rem;border-radius:.4rem}
.rp-skill-name{font-weight:700;color:var(--ink);margin-bottom:.4rem}
.rp-skill-bar{height:20px;background:#fff;border-radius:.2rem;overflow:hidden;margin-bottom:.4rem}
.rp-skill-value{font-size:.82rem;color:var(--mid)}
.rp-advice{background:var(--amber-lt);border-left:4px solid var(--amber);padding:1rem;border-radius:.3rem;margin-bottom:.8rem}
.rp-advice-title{font-weight:700;color:var(--amber);margin-bottom:.2rem;font-size:.88rem}
.rp-advice-text{font-size:.88rem;color:var(--ink);line-height:1.6}
.print-btn{padding:.7rem 1.5rem;background:var(--primary);color:#fff;border-radius:.4rem;font-weight:600;margin-right:1rem}

/* EMAIL MODAL */
.email-modal{background:#fff;border-radius:.75rem;width:500px;max-height:80vh;overflow-y:auto}
.em-header{background:var(--primary);color:#fff;padding:1.2rem;border-radius:.75rem .75rem 0 0;display:flex;justify-content:space-between;align-items:center}
.em-header h3{font-weight:700}
.em-close{font-size:1.3rem;cursor:pointer}
.em-body{padding:1.5rem}
.em-field{margin-bottom:1rem}
.em-field label{display:block;font-weight:600;font-size:.85rem;color:var(--mid);margin-bottom:.3rem}
.em-field input,.em-field textarea{width:100%;padding:.6rem .8rem;border:1px solid var(--mist);border-radius:.4rem;font-size:.9rem}
.em-field textarea{height:120px;resize:vertical}
.em-actions{display:flex;gap:.8rem;justify-content:flex-end}
.em-actions button{padding:.6rem 1.2rem;border-radius:.4rem;font-weight:600}
.em-send{background:var(--primary);color:#fff}
.em-cancel{background:var(--pale);color:var(--ink);border:1px solid var(--mist)}

/* TOAST */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:.8rem 1.5rem;border-radius:.5rem;font-weight:600;z-index:300;display:none;box-shadow:0 4px 12px rgba(27,33,57,.2)}
.toast.show{display:block;animation:fadeInUp .3s ease}
/* Persistent working / result pill (bulk PDF zip). Sits above the toast so both can show. */
.progress-pill{position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:.8rem;max-width:min(92vw,600px);background:var(--ink,#1B2139);color:#fff;padding:.8rem 1rem .8rem 1.25rem;border-radius:.6rem;z-index:300;box-shadow:0 4px 12px rgba(27,33,57,.25)}
.progress-pill.show{display:flex;animation:fadeInUp .3s ease}
.progress-pill.is-error{background:#8B1E1E}
.progress-pill-icon{flex:none;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:progressSpin 1s linear infinite}
.progress-pill.is-done .progress-pill-icon{border:0;animation:none;width:auto;height:auto;font-size:1.1rem;line-height:1}
.progress-pill.is-done .progress-pill-icon::before{content:"\2713"}
.progress-pill.is-done.is-error .progress-pill-icon::before{content:"\26A0"}
.progress-pill-text{display:flex;flex-direction:column;gap:.15rem;line-height:1.3;min-width:0}
.progress-pill-text strong{font-weight:600;font-size:.95rem}
.progress-pill-text small{font-size:.8rem;opacity:.85;word-break:break-word}
.progress-pill-close{flex:none;display:none;margin-left:.25rem;background:none;border:0;color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;opacity:.8;padding:0 .2rem}
.progress-pill-close:hover{opacity:1}
.progress-pill.is-done .progress-pill-close{display:inline-block}
@keyframes progressSpin{to{transform:rotate(360deg)}}
/* Free-trial budget line at the top of the dashboard (GET /api/schools/me → enforce_test_seats) */
.trial-banner{margin:0 0 1rem;padding:.7rem 1rem;border-radius:.5rem;background:var(--pale);border:1px solid var(--mist);font-size:.85rem;color:var(--ink);line-height:1.4}
.trial-banner.exhausted{background:#FDECEC;border-color:#E9A8A8}
/* Support + Updates pages (static/js/support-updates.js) */
.page-root{max-width:880px;margin:0 auto;padding:0 0 3rem}
.page-hero{margin:0 0 1.25rem}
.page-eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:.35rem}
.page-hero h1{font-size:1.6rem;margin:0 0 .4rem}
.page-strap{color:var(--mid);margin:0;font-size:.95rem;line-height:1.5}
.page-card{padding:1.1rem 1.25rem;margin-bottom:1.5rem}
.page-card-title{margin:0 0 .8rem;font-size:1rem}
.page-card-title small{display:block;font-weight:400;color:var(--stone);font-size:.78rem;margin-top:.15rem}
.page-subhead{font-size:1rem;margin:1.5rem 0 .6rem}
.form-row{display:flex;gap:1rem;flex-wrap:wrap}
.form-field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 260px;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.8rem}
.form-field-narrow{flex:0 1 240px}
.form-field input,.form-field select,.form-field textarea{font:inherit;font-weight:400;padding:.55rem .7rem;border:1px solid var(--mist);border-radius:.35rem;background:#fff;color:var(--ink);width:100%}
.form-field textarea{resize:vertical;min-height:6rem}
.form-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.form-actions button.primary{padding:.55rem 1rem;background:var(--primary);color:#fff;border-radius:.35rem;font-weight:600;border:0;cursor:pointer}
.form-actions button.primary:disabled{opacity:.6;cursor:default}
.form-status{font-size:.82rem;color:var(--mid)}
.form-status.err{color:#B42318;font-weight:600}
.muted{color:var(--stone);font-size:.9rem}
.muted.err{color:#B42318}
.upd-list,.tkt-list{display:flex;flex-direction:column;gap:.9rem}
.upd-card,.tkt-card{background:#fff;border:1px solid var(--mist);border-left:4px solid var(--primary);border-radius:.5rem;padding:.9rem 1.1rem}
.upd-card.kind-new{border-left-color:#2A6EE5}.upd-card.kind-improvement{border-left-color:#3FA8A0}.upd-card.kind-fix{border-left-color:#B45309}.upd-card.kind-notice{border-left-color:var(--stone)}
.upd-card.draft{opacity:.75;border-style:dashed}
.upd-meta,.tkt-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.75rem;color:var(--stone);margin-bottom:.35rem}
.upd-kind,.tkt-status,.tkt-cat{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.68rem;padding:.15rem .5rem;border-radius:999px;background:var(--pale);color:var(--ink)}
.upd-draft,.tkt-warn{font-weight:600;color:#B45309}
.upd-del{margin-left:auto;background:none;border:1px solid var(--mist);border-radius:.3rem;padding:.15rem .5rem;font-size:.72rem;cursor:pointer;color:var(--mid)}
.upd-del:hover{color:#B42318;border-color:#B42318}
.upd-card h3,.tkt-card h3{margin:.1rem 0 .4rem;font-size:1.02rem}
.upd-body p,.tkt-body p,.tkt-response p{margin:0 0 .5rem;font-size:.9rem;line-height:1.55;color:var(--ink)}
.tkt-card.status-closed{opacity:.75}.tkt-card.status-closed .tkt-status{background:#E6F4EA}.tkt-card.status-in_progress .tkt-status{background:#FFF4D6}
.tkt-response{margin-top:.6rem;padding:.6rem .8rem;background:var(--pale);border-radius:.4rem}

/* Admin tab (static/js/admin.js) */
.admin-only[hidden]{display:none!important}
/* .adm-toolbar's display:flex (below) beat the hidden attribute, so the
   "Preview as a school" toolbar rendered for non-admins — a browser pass
   caught it 2026-09-03. Keep this next to the rule above: any admin class
   that sets its own display needs the same guard. */
.adm-toolbar[hidden],.adm-section[hidden],.adm-detail[hidden]{display:none!important}
.page-root-wide{max-width:1180px}
/* #veyraBanners (static/index.html) is the sticky rail; the banners inside
   it are plain blocks. .acting-banner was position:sticky and injected as
   #appContainer's first child, which is display:grid with fixed
   grid-template-areas — the banner landed in an implicit trailing row and
   rendered as a 300x164 box at the bottom of the sidebar column (browser
   pass 2 defect 2). It is now a sibling above #appContainer, in the rail. */
#veyraBanners{position:sticky;top:0;z-index:400}
.acting-banner{background:#B45309;color:#fff;padding:.5rem 1rem;display:flex;gap:1rem;align-items:center;justify-content:center;font-size:.85rem;position:static}
.acting-banner button{background:#fff;color:#B45309;border:0;border-radius:.3rem;padding:.25rem .7rem;font-weight:700;cursor:pointer}
.adm-pills{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1.2rem}
.adm-pill{background:var(--pale);border:1px solid var(--mist);border-radius:999px;padding:.35rem .9rem;font-size:.82rem;font-weight:600;color:var(--mid);cursor:pointer}
.adm-pill.active{background:var(--primary);border-color:var(--primary);color:#fff}
.adm-toolbar{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem}
.adm-toolbar .form-field{margin-bottom:0}
.adm-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--mist);border-radius:.5rem}
.adm-table{width:100%;border-collapse:collapse;font-size:.85rem}
.adm-table th,.adm-table td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--mist);vertical-align:top}
.adm-table th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);background:var(--pale)}
.adm-table tr:last-child td{border-bottom:0}
.adm-actions{white-space:nowrap}
.adm-actions button,.adm-inline-btn{background:#fff;border:1px solid var(--mist);border-radius:.3rem;padding:.25rem .6rem;font-size:.75rem;cursor:pointer;color:var(--mid);margin-right:.3rem}
.adm-actions button:hover,.adm-inline-btn:hover{color:var(--primary);border-color:var(--primary)}
.adm-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;background:var(--pale);color:var(--ink)}
.adm-badge.ok{background:#E6F4EA;color:#1E6B3A}.adm-badge.bad{background:#FDECEC;color:#B42318}.adm-badge.warn{background:#FFF4D6;color:#8A5A00}
.adm-detail{margin-top:1rem}
.adm-detail h4{margin:1rem 0 .5rem;font-size:.9rem}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.adm-check{display:flex;gap:.5rem;align-items:center;font-size:.85rem;margin-bottom:.8rem}
.adm-error{background:#FDECEC;color:#B42318;padding:.5rem .7rem;border-radius:.35rem;font-size:.78rem;white-space:pre-wrap}
.adm-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.adm-stat{background:#fff;border:1px solid var(--mist);border-radius:.5rem;padding:.7rem 1rem;min-width:130px}
.adm-stat b{display:block;font-size:1.4rem}.adm-stat span{font-size:.72rem;color:var(--stone);text-transform:uppercase;letter-spacing:.05em}
.notice-banner{padding:.6rem 1rem;text-align:center;font-size:.9rem;font-weight:600}
.notice-banner.info{background:#E8F0FE;color:#1B3A7A}.notice-banner.warning{background:#FFF4D6;color:#8A5A00}.notice-banner.critical{background:#FDECEC;color:#B42318}
.adm-list{list-style:none;padding:0;margin:.4rem 0;display:flex;flex-direction:column;gap:.3rem;font-size:.85rem}
.adm-tutor,.adm-move{font:inherit;padding:.3rem .5rem;border:1px solid var(--mist);border-radius:.3rem;margin-right:.3rem}

@keyframes fadeInUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* INTERVENTIONS */
.int-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.2rem;margin-bottom:2rem}
.int-card{background:var(--pale);border-radius:22px;padding:1.3rem;box-shadow:0 1px 3px rgba(27,33,57,.06);border:1px solid var(--mist);overflow:hidden}
.int-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
.int-card-top{background:#8452B5;color:#fff;padding:1rem 1.2rem;margin:-1.3rem -1.3rem .8rem -1.3rem;display:flex;justify-content:space-between;align-items:center}
.int-card-name{font-weight:700;color:#fff}
.int-card-meta{font-size:.82rem;color:rgba(255,255,255,.85)}
.int-status{display:inline-block;font-size:.72rem;font-weight:600;padding:.25rem .55rem;border-radius:.25rem;text-transform:uppercase}
.int-status.active{background:var(--green-lt);color:var(--green)}
.int-status.pending{background:var(--amber-lt);color:var(--amber)}
.int-status.notstarted{background:var(--mist);color:var(--mid)}
.int-progress{margin-bottom:.8rem}
.int-progress-label{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.2rem}
.int-progress-bar{height:8px;background:var(--mist);border-radius:.2rem;overflow:hidden}
.int-progress-fill{height:100%;border-radius:.2rem}
.int-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.8rem}
.int-score-box{background:#fff;padding:.6rem;border-radius:.5rem;text-align:center;border:1px solid var(--mist)}
.int-score-label{font-size:.7rem;color:var(--mid);text-transform:uppercase;font-weight:600}
.int-score-val{font-size:1rem;font-weight:700}
.int-score-change{font-size:.75rem;font-weight:600}
.int-strategies{margin-bottom:.8rem}
.int-strategies-detail{background:#fff;padding:1rem;border-radius:.5rem;margin-bottom:.8rem;border:1px solid var(--mist)}
.strategy-detail-item{font-size:.85rem;margin-bottom:.5rem;color:var(--ink);line-height:1.5}
.strategy-detail-item:last-child{margin-bottom:0}
.int-baseline-current{display:flex;align-items:center;gap:1rem;background:#fff;padding:1rem;border-radius:.5rem;margin-bottom:.8rem;border:1px solid var(--mist)}
.int-bc-item{text-align:center;flex:1}
.int-bc-label{font-size:.75rem;color:var(--mid);font-weight:600;text-transform:uppercase}
.int-bc-score{font-size:1.8rem;font-weight:700;color:var(--ink)}
.int-bc-arrow{font-size:1.3rem;color:var(--stone)}
.int-bc-change{font-size:1.1rem;font-weight:700}
.reassess-badge{display:inline-block;font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:.25rem;margin-bottom:.8rem}
.reassess-badge.overdue{background:var(--red-lt);color:var(--red)}
.reassess-badge.due-soon{background:var(--amber-lt);color:var(--amber)}
.strategy-tag{display:inline-block;font-size:.72rem;padding:.2rem .5rem;background:var(--blue-lt);color:var(--primary);border-radius:.25rem;margin-right:.3rem;margin-bottom:.3rem}
.int-actions{display:flex;gap:.5rem}
.int-actions button{flex:1;padding:.55rem .6rem;font-size:.82rem;font-weight:600;border-radius:.4rem;border:1px solid var(--mist);background:#fff;color:var(--primary)}
.int-actions button:hover{background:var(--blue-lt)}
.int-actions button.email-btn{color:var(--amber);border-color:var(--amber-lt)}
.int-actions button.email-btn:hover{background:var(--amber-lt)}

/* SECTION ROWS */
.dash-section{margin-bottom:2rem}
.dash-section-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.dash-section-title{font-size:1.15rem;font-weight:700;color:var(--ink)}
.dash-section-desc{font-size:.85rem;color:var(--stone);margin-top:.15rem}
.dash-section-toggle{display:flex;align-items:center;gap:.5rem}
.dash-section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}

/* WIDGET SYSTEM */
.widget-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.widget-toolbar h2{font-size:1.3rem;font-weight:700;color:var(--ink)}
.widget-config-btn{padding:.5rem 1rem;background:var(--pale);border:1px solid var(--mist);border-radius:.4rem;font-weight:600;color:var(--mid);display:flex;align-items:center;gap:.5rem}
.widget-config-btn:hover{background:var(--mist)}
.widget-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.widget{background:#fff;border-radius:.75rem;padding:1.5rem;box-shadow:0 1px 4px rgba(27,33,57,.08);position:relative;transition:box-shadow .2s}
.widget.dragging{opacity:.6;box-shadow:0 8px 24px rgba(27,33,57,.15)}
.widget-drag-handle{position:absolute;top:.8rem;right:.8rem;cursor:grab;color:var(--stone);font-size:1rem;padding:.3rem;border-radius:.3rem}
.widget-drag-handle:hover{background:var(--pale);color:var(--ink)}
.widget h3{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:1rem}
.widget-full{grid-column:1/-1}

/* WIDGET CONFIG MODAL */
.config-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:200;display:none;justify-content:center;align-items:center}
.config-overlay.open{display:flex}
.config-modal{background:#fff;border-radius:.75rem;width:500px;max-height:80vh;overflow-y:auto}
.config-header{background:var(--primary);color:#fff;padding:1.2rem;border-radius:.75rem .75rem 0 0;display:flex;justify-content:space-between;align-items:center}
.config-header h3{font-weight:700}
.config-close{font-size:1.3rem;cursor:pointer}
.config-body{padding:1.5rem}
.config-item{display:flex;align-items:center;justify-content:space-between;padding:.8rem;border-bottom:1px solid var(--mist)}
.config-item:last-child{border-bottom:none}
.config-item-label{font-weight:600;color:var(--ink);font-size:.9rem}
.config-item-desc{font-size:.8rem;color:var(--stone)}
.config-toggle{position:relative;width:44px;height:24px;background:var(--mist);border-radius:12px;cursor:pointer;transition:background .2s}
.config-toggle.active{background:var(--primary)}
.config-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}
.config-toggle.active::after{transform:translateX(20px)}

/* PREVALENCE CHART STYLES */
.prevalence-legend{display:flex;gap:1.5rem;margin-top:.8rem;justify-content:center}

/* ============================================================
   STUDENTS TAB (redesigned) — prefix "sx-"
   Goals: quieter, progressively disclosed, one-job-per-row
   ============================================================ */
#studentsTab{ --sx-border:var(--app-rule-cool); --sx-rule:var(--app-rule-soft); --sx-soft:#FBF3D9; --sx-text:var(--app-ink-2); --sx-muted:var(--app-mid); --sx-faint:var(--app-faint); }
#studentsTab .scope-bar,
#studentsTab .students-controls,
#studentsTab #filterChips { display:none !important; } /* hide any stale legacy markup */

/* Header */
.sx-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:.25rem 0 1.25rem; border-bottom:1px solid var(--sx-rule); margin-bottom:1.5rem; }
.sx-header-text{ min-width:0; }
.sx-title{ font-family:'Nunito',sans-serif; font-size:2rem; font-weight:700; letter-spacing:-.015em; color:var(--sx-text); line-height:1.1; margin:0 0 .25rem; }
.sx-subtitle{ font-family:'Playfair Display',serif; font-style:italic; font-size:1.05rem; color:var(--sx-muted); }
.sx-scope{ display:flex; gap:.6rem; flex-shrink:0; }
.sx-scope-field{ display:flex; flex-direction:column; gap:.25rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--sx-faint); }
.sx-scope-field span{ padding-left:.15rem; }
.sx-scope-field select{ background:#fff; border:1px solid var(--sx-border); border-radius:10px; padding:.55rem .85rem; font-family:'Jost',sans-serif; font-size:.88rem; font-weight:500; color:var(--sx-text); min-width:140px; cursor:pointer; transition:border-color .15s; }
.sx-scope-field select:hover{ border-color:var(--primary); }
.sx-scope-field select:focus{ outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary); }

/* Big search + filter button */
.sx-searchrow{ display:flex; gap:.75rem; margin-bottom:1.5rem; }
.sx-search{ flex:1; position:relative; display:flex; align-items:center; background:#fff; border:1.5px solid var(--sx-border); border-radius:14px; padding:0 1rem; transition:border-color .15s, box-shadow .15s; }
.sx-search:focus-within{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(42,110,229,.12); }
.sx-search > svg{ color:var(--sx-faint); flex-shrink:0; margin-right:.75rem; }
.sx-search input{ flex:1; border:none; outline:none; background:transparent; font-family:'Jost',sans-serif; font-size:1rem; padding:.95rem 0; color:var(--sx-text); }
.sx-search input::placeholder{ color:var(--sx-faint); }
.sx-search-clear{ background:transparent; border:none; color:var(--sx-faint); font-size:1.4rem; line-height:1; padding:.1rem .5rem; border-radius:50%; cursor:pointer; opacity:0; transition:opacity .15s, background .15s; }
.sx-search:has(input:not(:placeholder-shown)) .sx-search-clear{ opacity:1; }
.sx-search-clear:hover{ background:var(--sx-soft); color:var(--sx-text); }
.sx-filter-btn{ display:flex; align-items:center; gap:.55rem; padding:.85rem 1.25rem; background:#fff; border:1.5px solid var(--sx-border); border-radius:14px; font-family:'Jost',sans-serif; font-weight:600; font-size:.9rem; color:var(--sx-text); cursor:pointer; transition:all .15s; }
.sx-filter-btn:hover{ border-color:var(--primary); color:var(--primary); }
.sx-filter-btn.has-active{ background:var(--primary-lt); border-color:var(--primary); color:var(--primary); }
.sx-filter-count{ background:var(--primary); color:#fff; font-size:.7rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; min-width:20px; text-align:center; }

/* Primary segmented tabs */
.sx-segments{ display:flex; gap:.35rem; background:var(--sx-soft); padding:.4rem; border-radius:14px; margin-bottom:1.25rem; overflow-x:auto; }
.sx-segment{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.7rem .9rem; background:transparent; border:none; border-radius:10px; cursor:pointer; transition:all .15s; white-space:nowrap; min-width:fit-content; }
.sx-segment:hover{ background:rgba(255,255,255,.7); }
.sx-segment.active{ background:#fff; box-shadow:0 1px 3px rgba(20,30,50,.08); }
.sx-segment-label{ font-family:'Jost',sans-serif; font-size:.8rem; font-weight:600; color:var(--sx-muted); letter-spacing:-.005em; }
.sx-segment.active .sx-segment-label{ color:var(--sx-text); }
.sx-segment-count{ font-family:'Nunito',sans-serif; font-size:1.15rem; font-weight:700; letter-spacing:-.02em; color:var(--sx-text); line-height:1; }
.sx-count-alert{ color:var(--accent-yellow); }
.sx-segment:not(.active) .sx-segment-count{ opacity:.75; }

/* Active refinement chips row */
.sx-active-filters{ display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--primary-lt); border-radius:10px; margin-bottom:1rem; flex-wrap:wrap; }
.sx-active-label{ font-size:.72rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; }
.sx-active-chips{ display:flex; gap:.4rem; flex-wrap:wrap; flex:1; }
.sx-active-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .3rem .3rem .7rem; background:#fff; border:1px solid rgba(42,110,229,.25); border-radius:999px; font-size:.78rem; font-weight:500; color:var(--sx-text); }
.sx-active-chip button{ background:none; border:none; cursor:pointer; color:var(--sx-faint); font-size:1rem; line-height:1; padding:.1rem .35rem; border-radius:50%; transition:background .12s; }
.sx-active-chip button:hover{ background:var(--sx-soft); color:var(--sx-text); }
.sx-clear-all{ background:transparent; border:none; font-family:'Jost',sans-serif; font-size:.8rem; font-weight:600; color:var(--primary); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* Meta row */
.sx-meta{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--sx-rule); margin-bottom:1.25rem; }
.sx-meta-count{ font-family:'Jost',sans-serif; font-size:1.05rem; color:var(--sx-muted); }
.sx-meta-controls{ display:flex; gap:.5rem; align-items:center; }
.sx-view-toggle{ display:flex; background:var(--sx-soft); padding:.2rem; border-radius:10px; }
.sx-view-toggle button{ display:flex; align-items:center; gap:.35rem; padding:.4rem .75rem; background:transparent; border:none; border-radius:8px; font-family:'Jost',sans-serif; font-size:.82rem; font-weight:600; color:var(--sx-muted); cursor:pointer; transition:all .12s; }
.sx-view-toggle button.active{ background:#fff; color:var(--sx-text); box-shadow:0 1px 2px rgba(20,30,50,.08); }
.sx-sort{ display:flex; align-items:center; gap:.4rem; background:var(--sx-soft); border-radius:10px; padding:.35rem .5rem .35rem .8rem; }
.sx-sort span{ font-size:.7rem; font-weight:700; color:var(--sx-faint); text-transform:uppercase; letter-spacing:.08em; }
.sx-sort select{ background:transparent; border:none; font-family:'Jost',sans-serif; font-size:.85rem; font-weight:600; color:var(--sx-text); padding:.3rem .4rem; cursor:pointer; outline:none; }

/* Actions overflow menu */
.sx-actions-wrap{ position:relative; }
.sx-actions-btn{ display:flex; align-items:center; gap:.4rem; padding:.55rem 1rem; background:var(--sx-soft); border:none; border-radius:10px; font-family:'Jost',sans-serif; font-size:.85rem; font-weight:600; color:var(--sx-text); cursor:pointer; transition:background .12s; }
.sx-actions-btn:hover{ background:var(--sx-border); }
.sx-actions-menu{ position:absolute; top:calc(100% + .4rem); right:0; background:#fff; border:1px solid var(--sx-border); border-radius:12px; box-shadow:0 8px 32px rgba(20,30,50,.12); padding:.4rem; min-width:280px; z-index:50; display:none; }
.sx-actions-menu.open{ display:block; }
.sx-actions-menu button{ width:100%; text-align:left; display:flex; flex-direction:column; gap:.15rem; padding:.7rem .8rem; background:transparent; border:none; border-radius:8px; cursor:pointer; transition:background .12s; font-family:'Jost',sans-serif; }
.sx-actions-menu button:hover{ background:var(--sx-soft); }
.sx-actions-menu button strong{ font-size:.85rem; font-weight:600; color:var(--sx-text); }
.sx-actions-menu button span{ font-size:.75rem; color:var(--sx-muted); }

/* Empty state */
.sx-empty{ text-align:center; padding:4rem 2rem; color:var(--sx-muted); }
.sx-empty-illus{ color:var(--sx-faint); margin-bottom:1rem; }
.sx-empty h3{ font-family:'Nunito',sans-serif; font-weight:800; font-size:1.25rem; color:var(--sx-text); margin:0 0 .3rem; }
.sx-empty p{ font-family:'Playfair Display',serif; font-style:italic; font-size:1rem; margin:0 0 1.25rem; }
.sx-empty button{ padding:.65rem 1.5rem; background:var(--primary); color:#fff; border:none; border-radius:10px; font-family:'Jost',sans-serif; font-weight:600; font-size:.88rem; cursor:pointer; transition:background .12s; }
.sx-empty button:hover{ background:var(--thinking-dk); }

/* Filter drawer */
.sx-drawer-scrim{ position:fixed; inset:0; background:rgba(15,25,40,.35); z-index:9000; opacity:0; pointer-events:none; transition:opacity .2s; }
.sx-drawer-scrim.open{ opacity:1; pointer-events:auto; }
.sx-drawer{ position:fixed; top:0; right:0; height:100vh; width:min(420px, 92vw); background:#fff; box-shadow:-8px 0 40px rgba(20,30,50,.15); z-index:9001; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.sx-drawer.open{ transform:translateX(0); }
.sx-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:1.5rem 1.75rem 1rem; border-bottom:1px solid var(--sx-rule); }
.sx-drawer-head h2{ font-family:'Nunito',sans-serif; font-size:1.35rem; font-weight:700; color:var(--sx-text); margin:0; }
.sx-drawer-close{ background:var(--sx-soft); border:none; font-size:1.3rem; line-height:1; width:34px; height:34px; border-radius:50%; color:var(--sx-muted); cursor:pointer; transition:all .12s; }
.sx-drawer-close:hover{ background:var(--sx-border); color:var(--sx-text); }
.sx-drawer-body{ flex:1; overflow-y:auto; padding:1.25rem 1.75rem; }
.sx-drawer-section{ padding:.75rem 0 1.25rem; border-bottom:1px solid var(--sx-rule); }
.sx-drawer-section:last-child{ border-bottom:none; }
.sx-drawer-section h3{ font-family:'Jost',sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--sx-muted); margin:0 0 .35rem; }
.sx-drawer-hint{ font-family:'Jost',sans-serif; font-size:.88rem; color:var(--sx-faint); margin:0 0 .85rem; }
.sx-drawer-chips{ display:flex; gap:.4rem; flex-wrap:wrap; }
.sx-chip{ padding:.5rem .9rem; background:#fff; border:1.5px solid var(--sx-border); border-radius:999px; font-family:'Jost',sans-serif; font-size:.82rem; font-weight:500; color:var(--sx-text); cursor:pointer; transition:all .12s; }
.sx-chip:hover{ border-color:var(--primary); color:var(--primary); }
.sx-chip.active{ background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.sx-drawer-foot{ display:flex; gap:.6rem; padding:1rem 1.75rem 1.5rem; border-top:1px solid var(--sx-rule); background:#fff; }
.sx-drawer-reset{ flex:0 0 auto; padding:.75rem 1rem; background:transparent; border:1.5px solid var(--sx-border); border-radius:10px; font-family:'Jost',sans-serif; font-weight:600; font-size:.88rem; color:var(--sx-muted); cursor:pointer; transition:all .12s; }
.sx-drawer-reset:hover{ color:var(--sx-text); border-color:var(--sx-text); }
.sx-drawer-apply{ flex:1; padding:.75rem 1rem; background:var(--primary); color:#fff; border:none; border-radius:10px; font-family:'Jost',sans-serif; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .12s; }
.sx-drawer-apply:hover{ background:var(--thinking-dk); }

/* Responsive */
@media (max-width:720px){
  .sx-header{ flex-direction:column; align-items:stretch; }
  .sx-title{ font-size:1.6rem; }
  .sx-segments{ flex-wrap:nowrap; }
  .sx-meta{ flex-direction:column; align-items:stretch; gap:.75rem; }
  .sx-meta-controls{ flex-wrap:wrap; }
}

/* VEYRA */
.prevalence-legend-item{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--mid)}
.prevalence-dot{width:10px;height:10px;border-radius:50%}

/* VEYRA */
.veyra-btn{position:fixed;bottom:2rem;right:2rem;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 4px 12px rgba(0,66,114,.3);cursor:pointer;z-index:150;transition:all .2s}
.veyra-btn:hover{transform:scale(1.08);box-shadow:0 6px 16px rgba(0,66,114,.4)}
.veyra-panel{position:fixed;bottom:5rem;right:2rem;width:350px;background:#fff;border-radius:.75rem;box-shadow:0 22px 44px -26px rgba(27,33,57,.4);z-index:150;display:none;flex-direction:column;max-height:500px}
.veyra-panel.open{display:flex}
.veyra-panel-header{background:var(--primary);color:#fff;padding:1rem;border-radius:.75rem .75rem 0 0;font-weight:700}
.veyra-panel-content{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.veyra-prompt{font-size:.82rem;padding:.55rem .8rem;background:var(--off);border:1px solid var(--mist);border-radius:.3rem;cursor:pointer;color:var(--ink)}
.veyra-prompt:hover{background:var(--pale)}
#veyraPrompts{display:flex;flex-wrap:wrap;gap:.4rem}
.veyra-count{align-self:center;font-size:.72rem;color:var(--stone);min-width:3.2em;text-align:right}
.veyra-count.near{color:var(--amber,#b45309);font-weight:600}
.veyra-count:empty{display:none}
/* Our-side AI switch off for this school: no launcher, no panel, no Ask-Veyra buttons */
body.ai-chat-off .veyra-btn,body.ai-chat-off .veyra-panel,body.ai-chat-off [data-click="app.askVeyraAboutPupil"]{display:none!important}
.veyra-response{font-size:.82rem;color:var(--ink);line-height:1.5}
.veyra-input-area{padding:1rem;border-top:1px solid var(--mist);display:flex;gap:.5rem}
.veyra-input-area input{flex:1;padding:.55rem .8rem;border:1px solid var(--mist);border-radius:.3rem;font-size:.82rem}
.veyra-input-area button{padding:.55rem .8rem;background:var(--primary);color:#fff;border-radius:.3rem;font-weight:600;font-size:.82rem}

/* FILTER CHIPS */
.filter-chips{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.filter-chip{padding:.45rem 1rem;border:2px solid var(--mist);border-radius:2rem;background:#fff;cursor:pointer;font-weight:600;font-size:.82rem;color:var(--mid);transition:all .2s}
.filter-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-chip:hover{border-color:var(--primary)}

/* INTERVENTION CARDS - ENHANCED */
.reassess-badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.35rem .7rem;border-radius:.3rem;margin-bottom:.8rem}
.reassess-badge.overdue{background:var(--red-lt);color:var(--red)}
.reassess-badge.due-soon{background:var(--amber-lt);color:var(--amber)}
.int-baseline-current{display:flex;align-items:center;gap:1rem;padding:.8rem;background:var(--off);border-radius:.4rem;margin-bottom:1rem;font-size:.9rem}
.int-bc-item{flex:1;text-align:center}
.int-bc-label{font-size:.75rem;color:var(--mid);font-weight:600;margin-bottom:.3rem}
.int-bc-score{font-size:1.2rem;font-weight:700;color:var(--ink)}
.int-bc-arrow{color:var(--mist);font-weight:600}
.int-bc-change{font-size:1.3rem}
.int-strategies-detail{padding:.8rem;background:var(--pale);border-radius:.4rem;margin-bottom:1rem;font-size:.85rem}
.strategy-detail-item{margin-bottom:.5rem;line-height:1.4}
.strategy-detail-item:last-child{margin-bottom:0}

/* UTILITY */
.hidden{display:none}

/* PRINT */
@media print{
  .topbar,.scope-bar,.students-controls,.veyra-btn,.profile-panel,.profile-overlay{display:none!important}
  .report-modal{position:static;width:100%;max-height:none;border-radius:0}
  .rm-header{position:static;border-radius:0}
  .report-page{page-break-after:always}
  body{background:#fff}
}

/* ==== Effort & behaviour widget (right-hand column) ==== */
.eb-legend{display:flex;gap:1.5rem;flex-wrap:wrap;padding:.7rem .9rem;background:var(--pale,#F7EABF);border-radius:.6rem;margin-bottom:1rem;font-size:.78rem}
.eb-legend-col{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.eb-legend-title{font-weight:700;color:var(--deep,#1B2139);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;margin-right:.15rem}
.eb-legend span{display:inline-flex;align-items:center;gap:.35rem;color:var(--mid,#4B5268)}
.eb-legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:2px}

.eb-headline{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.1rem}
.eb-headline-card{background:var(--pale,#F7EABF);border:none;border-radius:.7rem;padding:.85rem 1rem;text-align:left;cursor:pointer;transition:background .15s,transform .15s}
.eb-headline-card:hover{background:#F7EABF;transform:translateY(-1px)}
.eb-headline-n{font-size:1.9rem;font-weight:800;color:var(--deep,#1B2139);line-height:1}
.eb-headline-l{font-size:.82rem;color:var(--deep,#1B2139);font-weight:600;margin-top:.25rem}
.eb-headline-sub{font-size:.72rem;color:var(--mid,#4B5268);margin-top:.15rem}

.eb-year-list{display:flex;flex-direction:column;gap:.45rem}
.eb-year-row{background:#fff;border:1px solid var(--mist,#EEE9F5);border-radius:.6rem;padding:.65rem .8rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;transition:border-color .15s,box-shadow .15s}
.eb-year-row:hover{border-color:var(--deep,#1B2139);box-shadow:0 2px 8px rgba(27,33,57,.08)}
.eb-year-head{display:flex;justify-content:space-between;align-items:baseline}
.eb-year-name{font-weight:700;color:var(--deep,#1B2139);font-size:.9rem}
.eb-year-n{font-size:.72rem;color:var(--stone,#8B92A8)}

.eb-track-row{display:grid;grid-template-columns:66px 1fr 40px;gap:.6rem;align-items:center}
.eb-track-lbl{font-size:.72rem;color:var(--mid,#4B5268);font-weight:600;text-transform:uppercase;letter-spacing:.
/* ─── Behaviour & achievements widget: count + label in the right column ──
   Was a bare percentage like "4%" — confusing without context. Now stacks
   a bold count (e.g. "3") above a short descriptor ("with 4+ incidents")
   so it reads as a sentence at a glance. Replaces the old single-line
   percentage display.  (June 2026 demo-review fix.)                       */
.eb-track-row {
  /* widen the right column from 40px → 92px to fit "with 4+ incidents" */
  grid-template-columns: 66px 1fr 92px;
}
.eb-track-val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
  white-space: nowrap;
}
.eb-track-count {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--deep, #1B2139);
}
.eb-track-val.is-hot .eb-track-count {
  /* chronic-threshold tint — fires when ≥10% of the year is in 4+ band */
  color: #A8453D;
}
.eb-track-sub {
  font-size: .62rem;
  color: var(--stone, #8B92A8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-top: .12rem;
}

/* ─── Refinement: single top-of-widget explainer + bare numbers ──────
   The prior version put a small "with 4+ incidents" descriptor under
   each number, which broke the layout when totals climbed into 2-3
   digits or the panel was narrow. Reverted to a bare number per row,
   with a single explainer paragraph above the year list. (June 2026
   demo follow-up.)                                                      */
.eb-track-row {
  /* restore the slimmer right column now that only a count lives there */
  grid-template-columns: 76px 1fr 44px;
}
.eb-track-val {
  display: block;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--deep, #1B2139);
  line-height: 1.1;
  white-space: nowrap;
}
.eb-track-val.is-hot { color: #A8453D; }

.eb-explainer {
  font-size: .78rem;
  color: var(--mid, #4B5268);
  line-height: 1.55;
  background: var(--pale, #F7EABF);
  padding: .65rem .85rem;
  border-radius: .5rem;
  margin: .25rem 0 .9rem;
}
.eb-explainer strong { color: var(--deep, #1B2139); }
.eb-key-dot {
  display: inline-block;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: .15rem;
}

/* ═════════════════════════════════════════════════════════════════════
   Behaviour & achievements widget — v3 two-card layout (June 2026).
   Replaces the v1 "Effort & behaviour" widget and the v2 single-block
   stacked bars + bare-number column.

   Visual model: two equal cards side-by-side, each with its own title,
   subtitle, headline KPI, and per-year list. Cards stack vertically
   on narrow screens (< 880px container). Each card carries a coloured
   left border tying it to its lens — red for behaviour, green for
   achievements.
   ═════════════════════════════════════════════════════════════════════ */
.eb-section-title {
  font: 700 1.05rem Jost, system-ui, sans-serif;
  color: var(--deep, #1B2139);
  margin: 0 0 .15rem;
}
.eb-section-sub {
  font-size: .82rem;
  color: var(--mid, #4B5268);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.eb-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 880px) {
  .eb-cards-grid { grid-template-columns: 1fr; }
}

.eb-card {
  background: #fff;
  border: 1px solid var(--mist, #EEE9F5);
  border-left: 3px solid var(--eb-accent, #8452B5);
  border-radius: .65rem;
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
}
.eb-card-head { margin-bottom: .85rem; }
.eb-card-title {
  font: 700 .95rem Jost, system-ui, sans-serif;
  color: var(--deep, #1B2139);
  margin: 0;
}
.eb-card-sub {
  font-size: .72rem;
  color: var(--stone, #8B92A8);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-top: .15rem;
}

.eb-card-headline {
  background: var(--pale, #F7EABF);
  border-radius: .5rem;
  padding: .75rem .9rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.eb-card-headline-n {
  font: 800 2rem Jost, system-ui, sans-serif;
  line-height: 1;
  color: var(--eb-accent, #8452B5);
}
.eb-card-headline-l {
  font-size: .85rem;
  color: var(--deep, #1B2139);
  font-weight: 600;
  margin-top: .25rem;
}
.eb-card-headline-sub {
  font-size: .72rem;
  color: var(--mid, #4B5268);
}

.eb-card-yearlist {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.eb-card-colhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 .15rem .35rem;
  margin-bottom: .15rem;
  border-bottom: 1px solid var(--mist, #EEE9F5);
}
.eb-card-colhead-l,
.eb-card-colhead-r {
  font-size: .67rem;
  color: var(--stone, #8B92A8);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.eb-card-year {
  background: transparent;
  border: none;
  padding: .45rem .15rem;
  text-align: left;
  cursor: pointer;
  border-radius: .4rem;
  transition: background .12s ease;
}
.eb-card-year:hover { background: var(--pale, #F7EABF); }
.eb-card-year-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .35rem;
}
.eb-card-year-name {
  font: 600 .82rem Jost, system-ui, sans-serif;
  color: var(--deep, #1B2139);
}
.eb-card-year-n {
  font-size: .68rem;
  color: var(--stone, #8B92A8);
}
.eb-card-year-body {
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
  gap: .7rem;
}
.eb-card-year-val {
  font: 700 .95rem Jost, system-ui, sans-serif;
  color: var(--deep, #1B2139);
  text-align: right;
  white-space: nowrap;
}
.eb-card-year-val.is-hot { color: #A8453D; }

/* Stacked-bar segments (reused — same as the old .eb-seg) */
.eb-track {
  display: flex;
  height: 7px;
  background: #EEE9F5;
  border-radius: 4px;
  overflow: hidden;
}
.eb-seg {
  display: inline-block;
  height: 100%;
}

/* v3.1 — Stack the two cards vertically because the parent widget
   container is half-width (it sits next to the attendance chart in
   dash-section-grid). Two-column side-by-side would squash each
   card to ~280px. Stacking gives both full readable width. */
.eb-cards-grid {
  grid-template-columns: 1fr !important;
  gap: .85rem;
}

/* ═════════════════════════════════════════════════════════════════════
   Initial-load skeleton state (June 2026).

   When the user signs in, the dashboard renders BEFORE the
   /api/students/ + /api/schools/me responses arrive — so for ~200ms
   tiles display stale defaults (0 / 50, "0 not yet assessed", etc.)
   before flashing to the real numbers. body[data-app-loading="true"]
   replaces the stale values with pulsing grey rectangles ("skeleton
   placeholders") until initApp() flips the flag to "false".

   The keyframe animation is intentionally subtle — too much pulse
   reads as "broken", too little reads as "frozen". 1.4s sweep with a
   60-100% lightness range hits the sweet spot.
   ═════════════════════════════════════════════════════════════════════ */
@keyframes app-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

body[data-app-loading="true"] .metric-card-number,
body[data-app-loading="true"] .metric-card-desc,
body[data-app-loading="true"] .sx-segment-count,
body[data-app-loading="true"] .eb-card-headline-n,
body[data-app-loading="true"] .eb-card-headline-l,
body[data-app-loading="true"] .eb-card-headline-sub,
body[data-app-loading="true"] .eb-card-year-val,
body[data-app-loading="true"] .ivx-card-name,
body[data-app-loading="true"] .ivx-card-meta,
body[data-app-loading="true"] .ivx-card-score-v {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    #EFE6F7 0%,
    #FBF3D9 50%,
    #EFE6F7 100%
  );
  background-size: 200% 100%;
  background-clip: padding-box;
  border-radius: 4px;
  animation: app-skeleton-shimmer 1.4s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

/* Chart canvases — fade out entirely during load so half-drawn empty
   axes don't show. They re-fade in when data-app-loading flips false. */
body[data-app-loading="true"] .widget canvas {
  opacity: 0;
}
body[data-app-loading="false"] .widget canvas {
  opacity: 1;
  transition: opacity .25s ease-out;
}

/* Tile bodies — soften their borders while loading so the page reads as
   "preparing" rather than "broken". */
body[data-app-loading="true"] .metric-card,
body[data-app-loading="true"] .eb-card,
body[data-app-loading="true"] .ivx-card {
  border-color: #E9DCAE;
}

/* Once load completes, real content fades in smoothly. */
body[data-app-loading="false"] .metric-card-number,
body[data-app-loading="false"] .metric-card-desc {
  transition: opacity .2s ease-out;
}

/* ─── v2: simpler approach — hide dashboard content + show overlay ──
   The per-tile skeleton rules above didn't catch every element
   showing stale data (segment counts, year breakdowns, chart
   captions, etc.). Cleaner solution: while data-app-loading="true",
   make the entire dashboard tab content invisible and float a
   single loading overlay over it. When data arrives, hide the
   overlay and fade the dashboard in. One state, one transition. */
body[data-app-loading="true"] .tab-pane[data-tab="dashboard"] > *,
body[data-app-loading="true"] #dashboardTab > * {
  visibility: hidden !important;
}

#appLoadingOverlay {
  position: fixed;
  inset: 0;
  background: var(--paper, #F7EABF);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}
body[data-app-loading="true"] #appContainer:not(.app-hidden) ~ #appLoadingOverlay,
body[data-app-loading="true"] #appLoadingOverlay {
  display: flex;
}
body[data-app-loading="true"] #appContainer.app-hidden ~ #appLoadingOverlay {
  display: none;
}

#appLoadingSpinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--mist, #EFE6F7);
  border-top-color: var(--deep, #1B2139);
  border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
}
#appLoadingMessage {
  font: 600 .85rem Jost, sans-serif;
  color: var(--mid, #4B5268);
  letter-spacing: .04em;
}
@keyframes app-spin {
  to { transform: rotate(360deg); }
}

/* Smooth reveal: when loading flips false, dashboard content fades in */
body[data-app-loading="false"] .tab-pane[data-tab="dashboard"] > *,
body[data-app-loading="false"] #dashboardTab > * {
  transition: opacity .25s ease-out;
}