:root{
  --white:#FFFFFF;--off:#F5F7FA;--pale:#E8ECF1;--mist:#D1D8E0;--stone:#8E99A4;
  --mid:#5A6570;--ink:#1A2332;--deep:#0D1520;
  /* === 3-COLOUR SYSTEM: Thinking (primary/positive) · Focus (warning) · Memory (critical) === */
  --primary:#2A6EE5;--primary-lt:#E3EDFA;--primary-md:#7EAAF0;
  --accent-yellow:#FF8C01;--accent-yellow-lt:#FFF3E0;
  --accent-green:#2A6EE5;--accent-green-lt:#E3EDFA;
  --accent-red:#E72997;--accent-red-lt:#FCE4F1;
  --blue:#2A6EE5;--blue-lt:#E3EDFA;--blue-md:#7EAAF0;
  --green:#2A6EE5;--green-lt:#E3EDFA;
  --red:#E72997;--red-lt:#FCE4F1;
  --amber:#FF8C01;--amber-lt:#FFF3E0;
  --purple:#E72997;--purple-lt:#FCE4F1;
  --teal:#2A6EE5;--teal-lt:#E3EDFA;
  --focus:#FF8C01;--focus-lt:#FFF3E0;--focus-md:#FFB74D;--focus-dk:#E67A00;
  --thinking:#2A6EE5;--thinking-lt:#E3EDFA;--thinking-md:#7EAAF0;--thinking-dk:#1B5AC4;
  --memory:#E72997;--memory-lt:#FCE4F1;--memory-md:#F48DC4;--memory-dk:#C4157A;
  --veyra-navy:#2A6EE5;--veyra-gold:#FF8C01;
}

*{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:linear-gradient(135deg,#004272 0%,#002847 100%);color:#fff;padding:4rem;display:flex;flex-direction:column;justify-content:center}
.auth-left h1{font-family:'Playfair Display',serif;font-size:3rem;font-weight:700;margin-bottom:1rem}
.auth-left p{font-family:'EB Garamond',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:"✓ ";margin-right:.5rem}
.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:#1B5AC4}
.demo-accounts{margin-top:2rem}
.demo-btn{display:block;padding:.6rem 1rem;background:var(--pale);border:1px solid var(--mist);border-radius:.5rem;text-align:left;margin-bottom:.5rem;font-size:.9rem;width:100%}
.demo-btn:hover{background:var(--mist)}
.demo-role{display:block;font-size:.8rem;color:var(--mid)}
.demo-scope{display:block;font-size:.8rem;color:var(--stone);font-weight:600}

/* 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)}

/* Hide demo-only chrome when running against a real backend */
html[data-mock="false"] .auth-mock-only{display:none}

/* 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:#1B5AC4}

/* 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,#004272);display:flex;align-items:center;gap:.7rem}
.metrics-row-label::after{content:"";flex:1;height:1px;background:var(--mist,#E3E8EC)}
.metrics-row-label-progress{grid-column:span 2}
.metrics-row-label-challenges{grid-column:span 3}
.metric-card{background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);cursor:pointer;transition:all .2s;position:relative;border:1px solid var(--mist)}
.metric-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.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:1rem;padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,.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:1rem;padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,.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:linear-gradient(135deg,#FFF4DF 0%,#FBE6BE 100%);border:1px solid #E0B765;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:'EB Garamond',serif;font-size:2.6rem;font-weight:600;color:#7A4E00;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:#5A3A00;line-height:1.3}
.refer-cta-sub{font-size:.78rem;color:#866020;margin-top:.2rem;line-height:1.4}
.refer-cta-action{font-family:'Jost',sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--deep,#004272);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:#00304F}
.refer-cta-done{background:#F1F6F1;border-color:#C5DCC4;box-shadow:none;cursor:default}
.refer-cta-done:hover{transform:none;box-shadow:none}
.refer-cta-tick{font-size:1.4rem;color:var(--green,#2F6E64);background:#fff;border:1px solid #C5DCC4;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,#004272)}
.refer-cta-done .refer-cta-sub{color:var(--mid,#5A6570)}

/* 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:#1B5AC4}

/* 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:1rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:box-shadow .2s;border:1px solid var(--mist)}
.student-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.sc-header{background:linear-gradient(135deg,#2A6EE5 0%,#003359 100%);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:#1B5AC4}

/* LIST VIEW */
.student-table{width:100%;border-collapse:collapse;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.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:1rem;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 12px rgba(0,0,0,.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,#F5F7FA);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:#1B5AC4}
.parent-request-status{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#E8F5E9;border-radius:.5rem;font-size:.9rem;color:#2E7D32;font-weight:600;margin-top:.75rem}
.parent-warning{color:#F57C00;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(0,0,0,.15);z-index:100;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease}
.profile-panel.open{transform:translateX(0)}
.pp-header{background:linear-gradient(135deg,#2A6EE5 0%,#003359 100%);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}
.pp-close:hover{opacity:.7}
.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:"•";position:absolute;left:0;color:var(--amber)}

/* 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:1rem;width:96%;max-width:1200px;max-height:95vh;overflow-y:auto;display:flex;flex-direction:column}
.rm-header{background:linear-gradient(135deg,#2A6EE5 0%,#003359 100%);color:#fff;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:201;border-radius:1rem 1rem 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(0,0,0,.2)}
.toast.show{display:block;animation:fadeInUp .3s ease}
@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:1rem;padding:1.3rem;box-shadow:0 1px 3px rgba(0,0,0,.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:linear-gradient(135deg,#2A6EE5 0%,#003359 100%);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(0,0,0,.08);position:relative;transition:box-shadow .2s}
.widget.dragging{opacity:.6;box-shadow:0 8px 24px rgba(0,0,0,.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:#F5F2EA; --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:'Playfair Display',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:'EB Garamond',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:'Playfair Display',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:'EB Garamond',serif; font-style:italic; 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:'Playfair Display',serif; font-size:1.25rem; color:var(--sx-text); margin:0 0 .3rem; }
.sx-empty p{ font-family:'EB Garamond',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:'Playfair Display',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:'EB Garamond',serif; font-style:italic; 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 4px 16px rgba(0,0,0,.2);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)}
.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,#F4F1EA);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,#004272);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,#4b5a66)}
.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,#F4F1EA);border:none;border-radius:.7rem;padding:.85rem 1rem;text-align:left;cursor:pointer;transition:background .15s,transform .15s}
.eb-headline-card:hover{background:#EBE6DA;transform:translateY(-1px)}
.eb-headline-n{font-size:1.9rem;font-weight:800;color:var(--deep,#004272);line-height:1}
.eb-headline-l{font-size:.82rem;color:var(--deep,#004272);font-weight:600;margin-top:.25rem}
.eb-headline-sub{font-size:.72rem;color:var(--mid,#4b5a66);margin-top:.15rem}

.eb-year-list{display:flex;flex-direction:column;gap:.45rem}
.eb-year-row{background:#fff;border:1px solid var(--mist,#E3E8EC);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,#004272);box-shadow:0 2px 8px rgba(0,66,114,.08)}
.eb-year-head{display:flex;justify-content:space-between;align-items:baseline}
.eb-year-name{font-weight:700;color:var(--deep,#004272);font-size:.9rem}
.eb-year-n{font-size:.72rem;color:var(--stone,#858A94)}

.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,#4b5a66);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, #004272);
}
.eb-track-val.is-hot .eb-track-count {
  /* chronic-threshold tint — fires when ≥10% of the year is in 4+ band */
  color: #C4123F;
}
.eb-track-sub {
  font-size: .62rem;
  color: var(--stone, #858A94);
  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, #004272);
  line-height: 1.1;
  white-space: nowrap;
}
.eb-track-val.is-hot { color: #C4123F; }

.eb-explainer {
  font-size: .78rem;
  color: var(--mid, #4b5a66);
  line-height: 1.55;
  background: var(--pale, #F4F1EA);
  padding: .65rem .85rem;
  border-radius: .5rem;
  margin: .25rem 0 .9rem;
}
.eb-explainer strong { color: var(--deep, #004272); }
.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, #004272);
  margin: 0 0 .15rem;
}
.eb-section-sub {
  font-size: .82rem;
  color: var(--mid, #4b5a66);
  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, #E3E8EC);
  border-left: 3px solid var(--eb-accent, #004272);
  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, #004272);
  margin: 0;
}
.eb-card-sub {
  font-size: .72rem;
  color: var(--stone, #858A94);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-top: .15rem;
}

.eb-card-headline {
  background: var(--pale, #F4F1EA);
  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, #004272);
}
.eb-card-headline-l {
  font-size: .85rem;
  color: var(--deep, #004272);
  font-weight: 600;
  margin-top: .25rem;
}
.eb-card-headline-sub {
  font-size: .72rem;
  color: var(--mid, #4b5a66);
}

.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, #E3E8EC);
}
.eb-card-colhead-l,
.eb-card-colhead-r {
  font-size: .67rem;
  color: var(--stone, #858A94);
  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, #F4F1EA); }
.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, #004272);
}
.eb-card-year-n {
  font-size: .68rem;
  color: var(--stone, #858A94);
}
.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, #004272);
  text-align: right;
  white-space: nowrap;
}
.eb-card-year-val.is-hot { color: #C4123F; }

/* Stacked-bar segments (reused — same as the old .eb-seg) */
.eb-track {
  display: flex;
  height: 7px;
  background: #F1F2F4;
  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,
    #E1E6EE 0%,
    #F0F3F7 50%,
    #E1E6EE 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: #EBEEF3;
}

/* 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, #F4F1EA);
  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, #E1E6EE);
  border-top-color: var(--deep, #004272);
  border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
}
#appLoadingMessage {
  font: 600 .85rem Jost, sans-serif;
  color: var(--mid, #4b5a66);
  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;
}