/* ============================================================
   PEBBLE — Schologists Dashboard Re-skin
   Visual identity extended from the student cognitive report:
   - Cream paper background (#FAFAF5), navy ink (#004272)
   - Playfair Display + EB Garamond for display, Jost for UI
   - Report-style tab bar with rounded tops and subtitle pill band
   - Pastel domain-tinted cards with gold/red/green accent bars
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:#FAFAF5;
  --paper-2:#F2EDE1;
  --band:#D8EDF9;
  --band-2:#E5E4E9;
  --cream:#F6F2E9;
  --cream-2:#EFE8D6;
  --ink:#0E1A2B;
  --navy:#2A6EE5;
  --navy-dk:#1B5AC4;
  --gold:#FF8C01;
  --gold-soft:#FF8C01;
  --red:#E72997;
  --green:#2A6EE5;
  --rule:#D9D0BC;
  --rule-soft:#E9E2CE;

  /* Domain families (from the Pebble report) */
  --focus:#FF8C01;      --focus-tint:#FFF1DC;
  --think:#2A6EE5;      --think-tint:#E3EDFA;
  --memory:#E72997;     --memory-tint:#FCE4F1;

  /* System states */
  --ok:#8DC1B5;         --ok-tint:#E8F4F1;
  --warn:#E8C840;       --warn-tint:#FBF3CC;
  --risk:#E9194B;       --risk-tint:#FDECF0;

  --shadow-paper: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(20,30,50,.06);
  --radius-card: 18px;
  --radius-soft: 12px;

  /* density (patched by Tweaks) */
  --dens-pad: 2rem;
  --dens-gap: 1.4rem;
}

/* ============================================================
   UNIFIED APP SKIN (added v2)
   - One palette across Dashboard / Students / Interventions
   - Accessible base type sizes
   - Consistent section headings & scope bars
   ============================================================ */
:root{
  /* Shared app tokens. Page-local namespaces below remap onto these. */
  --app-paper:        #FAFAF5;
  --app-paper-2:      #F4EEE1;
  --app-card:         #FFFFFF;
  --app-rule:         #D9D0BC;
  --app-rule-soft:    #E9E2CE;
  --app-rule-cool:    #E8ECF1;
  --app-ink:          #0E1A2B;
  --app-ink-2:        #1A2332;
  --app-mid:          #5A6270;
  --app-soft:         #8B8578;
  --app-faint:        #8E99A4;
  --app-accent:       #2A6EE5;
  --app-accent-dk:    #1B5AC4;
  --app-warm:         #FF8C01;
  --app-pink:         #E72997;
  --app-green:        #4D856F;
  --app-amber:        #CD9A2C;
  --app-red:          #A23A2E;

  /* Type scale (accessible floors) */
  --t-xs:    .80rem;   /* small labels — was .7rem */
  --t-sm:    .90rem;
  --t-base:  1.00rem;  /* body */
  --t-md:    1.05rem;
  --t-lg:    1.20rem;
  --t-xl:    1.45rem;
  --t-2xl:   1.85rem;
  --t-3xl:   2.10rem;

  /* Min control / hit-target */
  --min-tap: 40px;
}

/* Body bumped from default to 16.5px for readability */
html { font-size: 16.5px; }
body { line-height: 1.5; }

/* Remap the Students page tokens onto the shared palette */
#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);
}

/* Remap the Interventions page tokens onto the shared palette */
.ivx-root{
  --ivx-paper:     var(--app-paper);
  --ivx-cream:     var(--app-paper-2);
  --ivx-rule:      var(--app-rule);
  --ivx-rule-soft: var(--app-rule-soft);
  --ivx-navy:      var(--app-ink-2);
  --ivx-navy-2:    var(--app-accent);
  --ivx-ink:       var(--app-ink);
  --ivx-mid:       var(--app-mid);
  --ivx-soft:      var(--app-soft);
  --ivx-green:     var(--app-green);
  --ivx-amber:     var(--app-amber);
  --ivx-red:       var(--app-red);
  --ivx-blue:      var(--app-accent);
  --ivx-brown:     #A86B4C;
}

/* ---- Page header — same look across all three tabs ---- */
.tab-pane > .scope-bar,
.tab-pane > .sx-header,
.ivx-root > .ivx-pulse:first-child {
  font-family: 'Jost', system-ui, sans-serif;
}

/* Dashboard scope-bar: bring up to parity with Students header */
.tab-pane[data-tab="dashboard"] .scope-bar{
  background:#fff;
  border:1px solid var(--app-rule-cool);
  border-radius:14px;
  padding:.85rem 1.1rem;
  box-shadow:0 1px 0 rgba(20,30,50,.03), 0 4px 14px rgba(20,30,50,.04);
  margin-bottom:1.4rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
}
.tab-pane[data-tab="dashboard"] .scope-bar > *{ flex: 0 0 auto; }
.tab-pane[data-tab="dashboard"] .scope-bar .generate-report-btn{ margin-left:auto; }
.tab-pane[data-tab="dashboard"] .scope-control select{ max-width: 100%; }
.tab-pane[data-tab="dashboard"] .scope-control label{
  font-size: var(--t-xs);
  color: var(--app-faint);
}
.tab-pane[data-tab="dashboard"] .scope-control select{
  background:#fff;
  border:1px solid var(--app-rule-cool);
  border-radius:10px;
  padding:.55rem .85rem;
  font-family:'Jost',sans-serif;
  font-size: var(--t-sm);
  font-weight:500;
  color: var(--app-ink-2);
  min-height: var(--min-tap);
  min-width: 140px;
}
.tab-pane[data-tab="dashboard"] .scope-control select:hover{ border-color: var(--app-accent); }
.tab-pane[data-tab="dashboard"] .scope-control select:focus{ outline:2px solid var(--app-accent); outline-offset:1px; border-color: var(--app-accent); }

/* Students scope selects: harmonise hit area + size */
#studentsTab .sx-scope-field select{
  font-size: var(--t-sm);
  min-height: var(--min-tap);
}
#studentsTab .sx-title{ font-size: var(--t-3xl); }
#studentsTab .sx-subtitle{ font-size: var(--t-md); }

/* Section headings — one type treatment everywhere */
.tab-pane[data-tab="dashboard"] .section-title,
.tab-pane[data-tab="dashboard"] h2.section-title,
.ivx-sec h3,
.sx-card-title,
.sx-section-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--app-ink-2);
  letter-spacing: -.005em;
  line-height: 1.2;
}

/* Metric card — bump label legibility */
.metric-card .metric-card-body{ padding: 1rem 1.1rem 1.1rem 1.25rem; }
.metric-card-label,
.metric-card .metric-card-label{
  font-size: var(--t-xs) !important;
  letter-spacing: .08em;
  color: var(--app-mid);
  min-height: 2.4em;     /* reserve space for up to 2 lines */
  line-height: 1.2;
  display: block;
}
.metric-card-value{ font-size: clamp(1.6rem, 2.2vw, 2rem); }
.metric-card-desc{ font-size: var(--t-sm); color: var(--app-mid); }

/* Interventions: section meta & legend up from .72/.78 */
.ivx-sec-meta{ font-size: var(--t-sm) !important; }
.ivx-legend{ font-size: var(--t-xs) !important; }
.ivx-pf-label{ font-size: var(--t-xs) !important; }
.ivx-pf-value{ font-size: var(--t-xl) !important; }
.ivx-pf-sub{ font-size: var(--t-xs) !important; }
.ivx-prog-tab{ min-height: 38px; font-size: var(--t-sm) !important; }

/* Tab bar buttons: keep visual but ensure hit target */
.tabs-nav .tab-btn,
.tabs-container .tab-btn{ min-height: var(--min-tap); font-size: var(--t-sm); }

/* Inputs / buttons — accessible defaults */
button, select, input, textarea { font: inherit; }
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.tab-btn:focus-visible{
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Section spacing rhythm */
.tab-pane{ padding-bottom: 2rem; }

/* Remove that legacy vertical "Metric" italic side-label — visual noise */
.metric-card::before{ content:none !important; }
.metric-card::after{ width: 4px; }

/* AI panel — unify across pages (Interventions has one, dashboard sometimes too) */
.ivx-ai{ background: linear-gradient(135deg, var(--app-paper-2) 0%, var(--app-paper) 100%); }

/* End unified app skin */


html[data-density="cozy"]{ --dens-pad: 1.4rem; --dens-gap: 1rem; }
html[data-density="compact"]{ --dens-pad: 1rem; --dens-gap: .7rem; }

/* ---------- Base surface ---------- */
body{
  background:
    radial-gradient(1200px 600px at 90% -200px, #EEF6FD 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 120%, #FBF3CC 0%, transparent 55%),
    var(--paper);
  color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;
  font-feature-settings:"ss01","cv11";
}

.app{ background:transparent; }
.tabs-container{ background:transparent; }

/* ---------- Top bar ---------- */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--rule-soft);
  padding:.9rem 1.6rem;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.topbar-left{
  font-family:'Playfair Display',serif;
  font-size:1.35rem;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-.01em;
  gap:1.2rem;
}
/* hide the old inline nav; we render a new tab bar below the topbar */
.topbar .topbar-nav{ display:none !important; }

.school-chip{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  padding:.5rem .9rem;
  border-radius:999px;
  color:var(--ink);
  font-weight:500;
  font-size:.85rem;
}
.school-chip::before{
  content:"●";
  color:var(--gold-soft);
  margin-right:.5rem;
  font-size:.7rem;
  vertical-align:middle;
}

.avatar-section > div:not(.avatar){ line-height:1.2; }
.avatar{
  background:var(--navy);
  font-family:'Playfair Display',serif;
  font-weight:700;
}
.role-badge{
  font-family:'Jost',sans-serif;
  font-size:.68rem;
  letter-spacing:.08em;
  padding:.2rem .5rem;
  border-radius:4px;
}
.role-badge.admin{ background:#FBC258; color:#004272; }

/* ---------- Pebble tab bar (report-style) ---------- */
.pebble-tabbar{
  background:#004272;
  padding:0 2rem;
  border-bottom:1px solid #003258;
  position:relative;
}
.pebble-tabbar .pebble-brand-motto{ color:rgba(255,255,255,.75); }
.pebble-tabbar .pebble-brand-motto strong{ color:#fff; }
.pebble-tabbar-inner{
  max-width:1600px;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  gap:6px;
  min-height:54px;
  padding-top:10px;
}
.pebble-page-num{
  width:30px;height:30px;border-radius:8px;
  background:var(--gold);
  color:#000;
  font-weight:700;
  font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
  margin:0 14px 10px 0;
  font-family:'Jost',sans-serif;
}
.pebble-brand-motto{
  position:absolute;
  right:2rem; top:10px;
  font-size:.78rem;
  color:#4a5568;
  font-style:italic;
  font-family:'EB Garamond',serif;
  font-weight:500;
}
.pebble-brand-motto strong{
  font-weight:700;
  color:var(--navy);
  font-style:normal;
  margin-right:.6rem;
  font-family:'Jost',sans-serif;
}
.pebble-tab{
  flex:1;
  max-width:220px;
  text-align:center;
  padding:11px 8px 12px;
  font-size:.82rem;
  font-weight:500;
  background:#0B517F;
  border:1px solid #003258;
  border-bottom:none;
  border-radius:14px 14px 0 0;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  margin-top:10px;
  position:relative;
  transition:all .18s ease;
  font-family:'Jost',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.pebble-tab:hover{ color:#fff; background:#14628F; }
.pebble-tab.active{
  background:var(--band-2);
  color:#0c1629;
  font-weight:700;
  font-size:1rem;
  padding:14px 8px 14px;
  margin-top:0;
  flex:1.4;
  max-width:300px;
  z-index:2;
  border-color:#bbb;
}
.pebble-tab.active::after{
  /* Notch into the subtitle band below */
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:2px;background:var(--band-2);
}
.pebble-tab .tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px;
  background:var(--risk); color:#fff;
  font-size:.68rem; font-weight:700;
}

/* Subtitle band — sits just below the tabs like the report */
.pebble-subband{
  background:var(--band-2);
  border-bottom:1px solid var(--rule-soft);
  padding:10px 2rem;
  display:flex;align-items:center;justify-content:center;
  min-height:46px;
}
.pebble-subband-pill{
  background:var(--cream);
  border-radius:22px;
  padding:8px 28px;
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  border:1px solid var(--rule-soft);
}

/* Tab panes */
.tab-pane{ padding:2rem 2rem 4rem; }
.tab-pane.active{ opacity:1; }

/* ---------- Scope bar ---------- */
.scope-bar{
  background:#fff;
  border:1px solid var(--rule-soft);
  padding:.7rem 1rem;
  border-radius:14px;
  margin-bottom:1.6rem;
  box-shadow:var(--shadow-paper);
}
.scope-control label{
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
}
.scope-control select{
  padding:.45rem .7rem;
  border:1px solid var(--rule-soft);
  border-radius:8px;
  background:var(--cream);
  font-weight:500;
  color:var(--ink);
}
.scope-control select:focus{ outline:2px solid var(--navy); outline-offset:1px; }
.generate-report-btn{
  padding:.6rem 1.2rem;
  background:var(--navy);
  color:#fff;
  border-radius:10px;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:.5rem;
}
.generate-report-btn:hover{ background:var(--navy-dk); }
.generate-report-btn::before{
  content:"✦"; color:var(--gold-soft); font-size:.9rem;
}

/* ---------- Metric cards (KPI row) ---------- */
.metrics-row{ gap:1rem; }
.metric-card{
  background:var(--paper);
  border:1px solid var(--rule-soft);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-paper);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.metric-card::before{
  /* Vertical italic side-label like the report cards */
  content:"Metric";
  position:absolute;
  left:8px; top:14px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'EB Garamond',serif;
  font-style:italic;
  font-weight:700;
  font-size:9px;
  letter-spacing:.4px;
  color:var(--ink);
  opacity:.55;
}
.metric-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(20,30,50,.1), 0 1px 0 rgba(0,0,0,.04);
}
.metric-card-bar{ height:0; }     /* replaced by left accent strip */
.metric-card::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px; background:var(--navy); border-radius:4px 0 0 4px;
}
.metric-card.c-blue::after, .metric-card[class*="blue"]::after{ background:var(--think); }
.metric-card.c-red::after,  .metric-card[class*="red"]::after{  background:var(--risk); }
.metric-card.c-amber::after,.metric-card[class*="amber"]::after{background:var(--focus); }
.metric-card.c-teal::after, .metric-card[class*="teal"]::after{ background:var(--ok); }
.metric-card.c-purple::after,.metric-card[class*="purple"]::after{background:var(--memory); }

.metric-card-body{ padding:1.1rem 1.2rem 1.1rem 1.6rem; }
.metric-card-label{
  font-family:'Jost',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  color:#6b7280;
}
.metric-card-number{
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:.25rem 0;
}
.metric-card-desc{
  font-family:'EB Garamond',serif;
  font-size:1rem;
  color:#475569;
  font-style:italic;
}
.metric-card-arrow{ color:var(--rule); }
.metric-card:hover .metric-card-arrow{ color:var(--navy); }
.metric-card-hint{ color:var(--navy); font-style:italic; font-family:'EB Garamond',serif; font-size:.88rem; }

/* ---------- Generic section / charts cards ---------- */
.charts-section,.section-card,.widget,.rp-page{
  background:var(--paper);
  border:1px solid var(--rule-soft);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-paper);
  padding:1.6rem;
}
.charts-section h3,.section-card h3,.widget h3,
.dash-section-title{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.chart-desc,.dash-section-desc{
  font-family:'EB Garamond',serif;
  font-size:1rem;
  font-style:italic;
  color:#4b5563;
}

.insight-box{
  background:var(--cream);
  border-left:4px solid var(--gold);
  border-radius:10px;
  padding:1rem 1.2rem;
  font-family:'EB Garamond',serif;
  font-size:1.05rem;
  color:var(--ink);
}
.insight-box::before{
  content:"Veyra says ";
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:700;
  color:var(--navy);
  margin-right:.3rem;
}

/* Domain pills on charts */
.domain-pill{
  background:#fff;
  border:1.5px solid var(--rule-soft);
  border-radius:999px;
  color:#475569;
  padding:.5rem 1.1rem;
  font-size:.82rem;
  font-weight:600;
  font-family:'Jost',sans-serif;
}
.domain-pill:hover{ border-color:var(--navy); color:var(--navy); }
.domain-pill.active{
  background:var(--navy); color:#fff; border-color:var(--navy);
  box-shadow:0 2px 10px rgba(0,66,114,.25);
}
/* per-domain active colors */
.domain-pill.active[data-domain="focus"]   { background:var(--focus);  border-color:var(--focus);  }
.domain-pill.active[data-domain="thinking"]{ background:var(--think);  border-color:var(--think);  }
.domain-pill.active[data-domain="memory"]  { background:var(--memory); border-color:var(--memory); }

/* ---------- Stat boxes (little 3-across) ---------- */
.stat-box{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:12px;
  padding:1rem;
}
.stat-label{
  font-size:.72rem; letter-spacing:.08em; color:#6b7280; font-weight:700;
}
.stat-value{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  color:var(--ink);
  font-weight:700;
  line-height:1.1;
}
.stat-unit{ color:#6b7280; font-style:italic; font-family:'EB Garamond',serif; }

/* Engagement metric rows */
.eng-metric{
  background:#fff;
  border:1px solid var(--rule-soft);
  border-radius:10px;
}
.eng-metric-label{ font-weight:600; color:#475569; }
.eng-metric-value{ font-family:'Playfair Display',serif; font-size:1.4rem; }

/* ---------- Student cards ---------- */
.student-grid{ gap:1.2rem; }
.student-card{
  background:var(--paper);
  border:1px solid var(--rule-soft);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-paper);
  overflow:hidden;
  transition:transform .18s, box-shadow .18s;
}
.student-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 26px rgba(20,30,50,.12);
}
.sc-header{
  background:
    linear-gradient(135deg, var(--navy) 0%, #002847 100%);
  position:relative;
  padding:1.1rem 1.2rem 1.1rem 1.2rem;
  color:#fff;
}
.sc-header::before{
  /* Gold half-circle pebble motif */
  content:"";
  position:absolute;
  right:-12px; top:-12px;
  width:70px; height:70px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft) 0%, #D19A2E 80%);
  opacity:.2;
}
.sc-name{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:-.01em;
}
.sc-meta{ font-family:'EB Garamond',serif; font-style:italic; opacity:.85; }
.sc-badge{
  background:rgba(255,255,255,.2);
  font-family:'Jost',sans-serif;
  font-size:.68rem;
  letter-spacing:.08em;
}
.sc-body{ background:var(--paper); }
.sc-domains{ gap:.6rem; }
.sc-domain{
  background:#fff;
  border:1px solid var(--rule-soft);
  border-radius:10px;
  padding:.7rem .5rem;
  position:relative;
  overflow:hidden;
}
.sc-domain::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--navy);
}
.sc-domain:nth-child(1)::before{ background:var(--focus); }
.sc-domain:nth-child(2)::before{ background:var(--think); }
.sc-domain:nth-child(3)::before{ background:var(--memory); }
.sc-domain-pct{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.sc-domain-label{
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:#6b7280;
}
.sc-domain-sev{ font-style:italic; font-family:'EB Garamond',serif; color:#6b7280; }

.sc-engagement{
  background:var(--cream);
  border:1px dashed var(--rule);
  border-radius:10px;
}
.sc-eng-label{ font-size:.65rem; letter-spacing:.08em; color:#6b7280; font-weight:700; }
.sc-eng-value{ font-family:'Playfair Display',serif; font-size:1.15rem; }

.flag-chip{
  font-family:'Jost',sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  padding:.25rem .6rem;
  border-radius:999px;
}

.sc-actions button{
  background:#fff;
  border:1px solid var(--rule-soft);
  color:var(--navy);
  border-radius:10px;
  font-weight:600;
  transition:all .15s;
}
.sc-actions button:hover{ background:var(--cream); border-color:var(--navy); }
.sc-actions button.primary{
  background:var(--navy); color:#fff; border-color:var(--navy);
}
.sc-actions button.primary:hover{ background:var(--navy-dk); }

/* ---------- Student list view ---------- */
.student-table{
  background:var(--paper);
  border:1px solid var(--rule-soft);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-paper);
}
.student-table thead{ background:var(--cream); }
.student-table th{
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#475569;
  padding:.8rem 1rem;
}
.student-table td{ border-bottom:1px solid var(--rule-soft); }
.student-table tbody tr:hover{ background:var(--cream); }

.list-col-tab{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  color:#475569;
  border-radius:10px 10px 0 0;
  padding:.5rem 1rem;
  font-weight:600;
  font-size:.82rem;
  font-family:'Jost',sans-serif;
}
.list-col-tab.active{
  background:var(--navy); color:#fff; border-color:var(--navy);
}

/* ---------- Filter chips ---------- */
.filter-chip{
  background:#fff;
  border:1.5px solid var(--rule-soft);
  color:#475569;
  border-radius:999px;
  font-size:.8rem;
  padding:.45rem 1rem;
  font-family:'Jost',sans-serif;
  font-weight:600;
}
.filter-chip:hover{ border-color:var(--navy); color:var(--navy); }
.filter-chip.active{
  background:var(--navy); color:#fff; border-color:var(--navy);
  box-shadow:0 2px 8px rgba(0,66,114,.2);
}

.students-controls .search-box{
  background:#fff;
  border:1px solid var(--rule-soft);
  border-radius:10px;
  padding:.55rem .9rem;
}
.students-controls .search-box:focus{ outline:2px solid var(--navy); outline-offset:1px; }
.students-controls .sort-select{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:10px;
}
.view-toggle button{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  color:#475569;
  border-radius:10px;
  font-family:'Jost',sans-serif;
}
.view-toggle button.active{
  background:var(--navy); color:#fff; border-color:var(--navy);
}
.count-display{ font-style:italic; font-family:'EB Garamond',serif; color:#6b7280; }

/* ---------- Intervention cards ---------- */
.int-card{
  background:var(--paper);
  border:1px solid var(--rule-soft);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-paper);
  overflow:hidden;
  padding:0;
  position:relative;
}
.int-card > *:not(.int-card-top){ padding-left:1.3rem; padding-right:1.3rem; }
.int-card > :last-child{ padding-bottom:1.3rem; }
.int-card-top{
  background:linear-gradient(135deg, var(--navy), var(--navy-dk));
  position:relative;
  margin:0 0 1rem;
  padding:1rem 1.3rem;
}
.int-card-top::before{
  content:"";
  position:absolute; right:-20px; top:-20px;
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft), #D19A2E);
  opacity:.18;
}
.int-card-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.1rem; }
.int-card-meta{ font-family:'EB Garamond',serif; font-style:italic; }

.int-status{
  font-family:'Jost',sans-serif;
  font-size:.66rem;
  letter-spacing:.08em;
  border-radius:4px;
  padding:.25rem .6rem;
}
.int-status.active{ background:var(--ok-tint); color:#1f6c5b; }
.int-status.pending{ background:var(--warn-tint); color:#8c6b00; }
.int-status.notstarted{ background:#E9ECEF; color:#5a6570; }

.int-score-box{
  background:#fff; border:1px solid var(--rule-soft);
}
.int-score-val{ font-family:'Playfair Display',serif; font-size:1.2rem; }
.int-score-label{ font-size:.65rem; letter-spacing:.08em; }

.int-baseline-current, .int-strategies-detail{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:12px;
}
.int-bc-score{ font-family:'Playfair Display',serif; font-size:1.9rem; color:var(--navy); }
.int-bc-label{ font-size:.68rem; letter-spacing:.08em; }
.int-actions button{
  background:#fff; border:1px solid var(--rule-soft);
  color:var(--navy); border-radius:10px; font-weight:600;
}
.int-actions button:hover{ background:var(--cream); border-color:var(--navy); }
.int-actions button.primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.strategy-tag{
  background:var(--cream);
  color:var(--navy);
  border:1px solid var(--rule-soft);
  border-radius:999px;
  padding:.3rem .7rem;
  font-family:'Jost',sans-serif;
  font-weight:600;
}

.slot-tracker{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:12px;
}
.slot-bar{ background:var(--rule-soft); border-radius:999px; height:10px; }
.slot-fill{ border-radius:999px; background:linear-gradient(90deg, var(--navy), #2A6EE5); }

.int-tab{
  font-family:'Jost',sans-serif !important;
  font-weight:600 !important;
  font-size:.82rem !important;
  border-radius:999px !important;
  padding:.55rem 1.1rem !important;
  transition:all .2s !important;
}

/* ---------- Profile panel ---------- */
.profile-panel{
  background:var(--paper);
  box-shadow:-8px 0 32px rgba(14,26,43,.25);
}
.pp-header{
  background:linear-gradient(135deg, var(--navy), var(--navy-dk));
  position:relative;
  overflow:hidden;
}
.pp-header::before{
  content:"";
  position:absolute; top:-30px; right:-30px;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft), #D19A2E);
  opacity:.22;
}
.pp-name{ font-family:'Playfair Display',serif; font-size:1.4rem; letter-spacing:-.01em; }
.pp-meta{ font-family:'EB Garamond',serif; font-style:italic; }
.pp-section h3{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  border-bottom:2px solid var(--gold-soft);
  padding-bottom:.5rem;
}

.domain-detail{
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:14px;
  position:relative;
  overflow:hidden;
}
.domain-detail::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--navy);
}
.domain-detail[data-domain="focus"]::before{ background:var(--focus); }
.domain-detail[data-domain="thinking"]::before{ background:var(--think); }
.domain-detail[data-domain="memory"]::before{ background:var(--memory); }
.dd-title{ font-family:'Playfair Display',serif; }
.dd-score{ font-family:'Playfair Display',serif; font-size:1.6rem; }
.dd-desc{ font-family:'EB Garamond',serif; font-style:italic; }
.skill-progress{ border-radius:6px; background:rgba(255,255,255,.6); }
.dd-recs{
  background:#fff;
  border-left:4px solid var(--gold);
  border-radius:10px;
}
.dd-recs-title{ font-family:'Playfair Display',serif; font-style:italic; color:#8c6b00; }

.wb-card{
  background:#fff;
  border:1px solid var(--rule-soft);
  border-left-width:4px;
  border-radius:10px;
}
.wb-overall{
  background:#fff;
  border:1px solid var(--rule-soft);
  border-radius:12px;
}
.wb-overall-score{ font-family:'Playfair Display',serif; font-size:2.4rem; }
.wb-overall-label{ font-family:'EB Garamond',serif; font-style:italic; font-size:1rem; }

.ai-chat{
  background:var(--cream);
  border:1px solid var(--rule-soft);
}
.ai-suggestion{
  background:#fff; border:1px solid var(--rule-soft);
  color:var(--navy); border-radius:8px;
}

/* ---------- Veyra FAB ---------- */
.veyra-btn{
  background:linear-gradient(135deg, var(--navy), var(--navy-dk));
  box-shadow:0 6px 16px rgba(0,66,114,.3), 0 0 0 3px var(--gold-soft);
  font-family:'Playfair Display',serif;
  font-weight:700;
}
.veyra-btn::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1.5px dashed var(--gold-soft);
  opacity:.55;
  animation:veyraRing 8s linear infinite;
}
@keyframes veyraRing{ to{ transform:rotate(360deg) } }
.veyra-panel-header{ background:var(--navy); font-family:'Playfair Display',serif; font-size:1.05rem; }

/* ---------- Report modal ---------- */
.rm-header{
  background:linear-gradient(135deg, var(--navy), var(--navy-dk));
  font-family:'Playfair Display',serif;
}

/* ---------- Misc fixes ---------- */
a{ color:var(--navy); }
a:hover{ color:var(--navy-dk); }

/* Scrollbar refinement on webkit */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:999px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Sidebar variation (Tweak: nav=sidebar) ---------- */
html[data-nav="sidebar"] .pebble-tabbar,
html[data-nav="sidebar"] .pebble-subband{ display:none !important; }
html[data-nav="sidebar"] .app{ flex-direction:row; }
html[data-nav="sidebar"] .topbar{
  position:fixed;
  left:0; top:0; bottom:0;
  width:230px;
  flex-direction:column;
  align-items:stretch;
  padding:1.4rem 1rem;
  border-right:1px solid var(--rule-soft);
  border-bottom:none;
  z-index:10;
}
html[data-nav="sidebar"] .topbar-left{
  flex-direction:column;
  align-items:flex-start;
  gap:1.5rem;
  font-size:1.2rem;
}
html[data-nav="sidebar"] .topbar-right{
  margin-top:auto;
  flex-direction:column;
  align-items:stretch;
  gap:1rem;
}
html[data-nav="sidebar"] .school-chip{ text-align:center; }
html[data-nav="sidebar"] .avatar-section{ flex-direction:row; gap:.8rem; }
html[data-nav="sidebar"] .tabs-container{ margin-left:230px; padding-top:1rem; }

.pebble-sidenav{ display:none; flex-direction:column; gap:.3rem; width:100%; }
html[data-nav="sidebar"] .pebble-sidenav{ display:flex; }
.pebble-sidenav button{
  background:transparent;
  border:1px solid transparent;
  border-radius:12px;
  padding:.7rem .9rem;
  text-align:left;
  color:#475569;
  font-weight:600;
  font-family:'Jost',sans-serif;
  display:flex; align-items:center; gap:.7rem;
  font-size:.92rem;
  cursor:pointer;
  width:100%;
}
.pebble-sidenav button:hover{ background:var(--cream); color:var(--navy); }
.pebble-sidenav button.active{
  background:var(--navy); color:#fff;
  box-shadow:0 2px 8px rgba(0,66,114,.25);
}
.pebble-sidenav .dot{
  display:inline-block; width:10px; height:10px; border-radius:3px; flex-shrink:0;
}

/* ---------- Variant B: "Pebble Pro" — denser, darker header ---------- */
html[data-variant="pro"] body{
  background:#EEF2F7;
}
html[data-variant="pro"] .pebble-tabbar{ background:#0E1A2B; }
html[data-variant="pro"] .pebble-brand-motto{ color:#94a3b8; }
html[data-variant="pro"] .pebble-brand-motto strong{ color:#fff; }
html[data-variant="pro"] .pebble-tab{
  background:#1e293b; color:#94a3b8; border-color:#334155;
}
html[data-variant="pro"] .pebble-tab:hover{ background:#27324a; color:#fff; }
html[data-variant="pro"] .pebble-tab.active{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
html[data-variant="pro"] .pebble-subband{
  background:var(--paper); border-bottom-color:var(--rule-soft);
}
html[data-variant="pro"] .pebble-page-num{
  background:var(--gold-soft); color:var(--ink);
}

/* ---------- Tweaks panel ---------- */
.tweaks-panel{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  width:280px;
  background:var(--paper);
  border:1px solid var(--rule-soft);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(14,26,43,.18);
  font-family:'Jost',sans-serif;
  z-index:500;
  overflow:hidden;
  display:none;
}
.tweaks-panel.open{ display:block; animation:fadeInUp .25s ease both; }
.tweaks-header{
  background:linear-gradient(135deg, var(--navy), var(--navy-dk));
  color:#fff;
  padding:.8rem 1rem;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.tweaks-header span{ opacity:.8; font-size:.75rem; font-family:'EB Garamond',serif; font-style:italic; font-weight:500; }
.tweaks-body{ padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.9rem; }
.tweak-row label{
  display:block;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  font-weight:700;
  margin-bottom:.35rem;
}
.tweak-seg{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  background:var(--cream);
  border:1px solid var(--rule-soft);
  border-radius:10px;
  padding:3px;
  gap:3px;
}
.tweak-seg button{
  background:transparent;
  border:none;
  padding:.4rem .6rem;
  border-radius:8px;
  font-size:.78rem;
  font-weight:600;
  color:#475569;
  cursor:pointer;
}
.tweak-seg button.active{ background:var(--navy); color:#fff; }
.tweak-swatches{ display:flex; gap:.4rem; }
.tweak-swatches button{
  width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer;
}
.tweak-swatches button.active{ border-color:var(--ink); transform:scale(1.08); }

/* ---------- Accent-color theme via Tweaks ---------- */
html[data-accent="gold"] .pebble-page-num{ background:var(--gold); }
html[data-accent="focus"]{ --navy:#C44A00; --navy-dk:#8E3500; }
html[data-accent="memory"]{ --navy:#B11E77; --navy-dk:#7B145A; }
html[data-accent="think"]{ --navy:#1B5AC4; --navy-dk:#14428F; }
html[data-accent="forest"]{ --navy:#1f6c5b; --navy-dk:#144638; }