/* Taech platform demo — app UI on top of /taech-brand/tokens/taech.css.
   Console (dark, staff) + Daylight (light, parent/student) shells. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--taech-sans);-webkit-font-smoothing:antialiased;background:var(--taech-void)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none!important}
.mono{font-family:var(--taech-mono);font-feature-settings:"tnum"}
[dir="rtl"] .lat{direction:ltr;display:inline-block}

/* ---------- Persona picker ---------- */
.picker{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:40px 24px;background:linear-gradient(180deg,var(--taech-void),var(--taech-void-deep));color:var(--taech-text);text-align:center}
.picker::before{content:"";position:fixed;inset:0 0 auto 0;height:2px;background:var(--taech-grow);opacity:.9}
.picker .wm{font-weight:500;letter-spacing:-.02em;font-size:56px;line-height:1;margin-bottom:6px}
.picker .wm .ae,.picker .wm .dot{color:var(--taech-grow)}
.picker .eyebrow{font-family:var(--taech-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--taech-grow-tint);margin-bottom:26px}
.picker h1{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.picker p{color:var(--taech-text-2);font-size:15px;max-width:52ch;margin-bottom:30px;line-height:1.5}
.persona-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,220px));gap:14px;width:100%;max-width:720px}
.persona{background:var(--taech-panel-steel);border:1px solid var(--taech-hairline);border-radius:14px;padding:20px 18px;text-align:start;
  transition:border-color .2s var(--taech-ease),transform .12s var(--taech-ease)}
.persona:hover{border-color:var(--taech-grow);transform:translateY(-2px)}
.persona .r{font-family:var(--taech-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--taech-text-3);margin-bottom:10px}
.persona .n{font-size:16px;font-weight:700;color:var(--taech-text);margin-bottom:3px}
.persona .s{font-size:12.5px;color:var(--taech-text-2)}
.persona .surf{display:inline-block;margin-top:12px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px}
.surf.console{background:rgba(23,227,154,.1);color:var(--taech-grow-tint);border:1px solid rgba(23,227,154,.3)}
.surf.daylight{background:rgba(94,240,192,.08);color:var(--taech-grow-tint);border:1px solid rgba(94,240,192,.25)}
.picker .foot{margin-top:34px;font-size:12px;color:var(--taech-text-4)}
.picker .langbtn{position:fixed;top:16px;inset-inline-end:20px}

/* ---------- Shared shell ---------- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;height:52px;padding:0 18px;flex-shrink:0}
.topbar .brand{display:flex;align-items:center;gap:9px}
.topbar .tile{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:11.5px;letter-spacing:-.05em}
.topbar .wm{font-weight:500;letter-spacing:-.02em;font-size:15px}
.topbar .wm .ae,.topbar .wm .dot{color:inherit}
.topbar .tabs{display:flex;gap:4px;margin-inline-start:14px;overflow:auto}
.topbar .tab{font-size:12px;font-weight:600;padding:6px 11px;border-radius:7px;white-space:nowrap;border:1px solid transparent}
.topbar .right{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.chip{font-family:var(--taech-mono);font-size:10px;letter-spacing:.06em;padding:4px 9px;border-radius:6px;border:1px solid}
.langbtn{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid;background:transparent}
.avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.content{flex:1;padding:20px clamp(16px,3vw,34px) 40px;overflow:auto}
.pagehead{margin-bottom:18px}
.pagehead .eb{font-family:var(--taech-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.pagehead h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.pagehead .sub{font-size:13.5px;margin-top:4px}
.row{display:flex;flex-wrap:wrap;gap:14px}
.grid{display:grid;gap:14px}

/* ---------- Console (dark) ---------- */
.console{background:linear-gradient(180deg,var(--taech-void),var(--taech-void-deep));color:var(--taech-text)}
.console .topbar{background:var(--taech-panel);border-bottom:1px solid var(--taech-hairline)}
.console .tile{background:var(--taech-void);border:1px solid var(--taech-hairline);color:var(--taech-grow)}
.console .wm{color:var(--taech-text)} .console .wm .ae,.console .wm .dot{color:var(--taech-grow)}
.console .tab{color:var(--taech-text-3)}
.console .tab:hover{color:var(--taech-text-2)}
.console .tab.on{color:var(--taech-grow-tint);border-color:var(--taech-hairline);background:var(--taech-panel-steel)}
.console .chip{color:var(--taech-text-2);border-color:var(--taech-hairline)}
.console .langbtn{color:var(--taech-text-2);border-color:var(--taech-hairline)}
.console .avatar{background:var(--taech-panel-raised);color:var(--taech-grow-tint);border:1px solid var(--taech-hairline-soft)}
.console .pagehead .eb{color:var(--taech-grow-tint)}
.console .pagehead .sub{color:var(--taech-text-2)}
.console .card{background:var(--taech-panel-steel);border:1px solid var(--taech-hairline);border-radius:12px;padding:16px 18px}
.console .tile-kpi{background:var(--taech-panel-steel);border:1px solid var(--taech-hairline);border-radius:12px;padding:15px 17px;min-width:150px;flex:1}
.console .tile-kpi .k{font-family:var(--taech-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--taech-text-3)}
.console .tile-kpi .v{font-size:24px;font-weight:700;margin-top:7px;letter-spacing:-.01em}
.console .tile-kpi .d{font-size:12px;margin-top:3px;color:var(--taech-text-3)}
.console .muted{color:var(--taech-text-3)}
.console .idgrid{background:var(--taech-void);border:1px solid var(--taech-hairline);border-radius:8px;padding:13px 15px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 18px;margin-top:14px}
.console .idgrid .lbl{font-family:var(--taech-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taech-text-3)}
.console .idgrid .val{font-family:var(--taech-mono);font-size:12px;color:var(--taech-text);margin-top:4px}
.console table td,.console table th{border-color:var(--taech-hairline)}
.console .listrow:hover{background:var(--taech-panel-steel)}

/* ---------- Daylight (light) ---------- */
.daylight{background:var(--taech-paper);color:var(--taech-ink)}
.daylight .topbar{background:#fff;border-bottom:1px solid var(--taech-paper-line)}
.daylight .tile{background:var(--taech-grow-deep);color:#fff}
.daylight .wm{color:var(--taech-ink)} .daylight .wm .ae,.daylight .wm .dot{color:var(--taech-grow-deep)}
.daylight .tab{color:var(--taech-ink-3)}
.daylight .tab:hover{color:var(--taech-ink-2)}
.daylight .tab.on{color:var(--taech-grow-deep);border-color:var(--taech-paper-line);background:var(--taech-paper-raised)}
.daylight .chip{color:var(--taech-ink-2);border-color:var(--taech-paper-line)}
.daylight .langbtn{color:var(--taech-ink-2);border-color:var(--taech-paper-line)}
.daylight .avatar{background:var(--taech-paper-raised);color:var(--taech-grow-deep);border:1px solid var(--taech-paper-line)}
.daylight .pagehead .eb{color:var(--taech-grow-deep)}
.daylight .pagehead .sub{color:var(--taech-ink-2)}
.daylight .card{background:#fff;border:1px solid var(--taech-paper-line);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(14,24,40,.03)}
.daylight .tile-kpi{background:#fff;border:1px solid var(--taech-paper-line);border-radius:14px;padding:16px 18px;min-width:150px;flex:1}
.daylight .tile-kpi .k{font-family:var(--taech-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--taech-ink-3)}
.daylight .tile-kpi .v{font-size:24px;font-weight:700;margin-top:7px;color:var(--taech-ink)}
.daylight .tile-kpi .d{font-size:12px;margin-top:3px;color:var(--taech-ink-3)}
.daylight .muted{color:var(--taech-ink-3)}
.daylight .idgrid{background:var(--taech-paper-raised);border:1px solid var(--taech-paper-line);border-radius:10px;padding:14px 16px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 18px;margin-top:14px}
.daylight .idgrid .lbl{font-family:var(--taech-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taech-ink-3)}
.daylight .idgrid .val{font-family:var(--taech-mono);font-size:12px;color:var(--taech-ink);margin-top:4px}

/* ---------- Components ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--taech-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:6px;border:1px solid}
.pill .d{width:6px;height:6px;border-radius:50%}
.pill.present{color:var(--taech-present);border-color:rgba(56,178,107,.4);background:rgba(56,178,107,.1)}
.pill.present .d{background:var(--taech-present)}
.pill.absent{color:var(--taech-absence);border-color:rgba(229,72,77,.4);background:rgba(229,72,77,.1)}
.pill.absent .d{background:var(--taech-absence)}
.pill.late{color:var(--taech-late);border-color:rgba(229,162,59,.4);background:rgba(229,162,59,.1)}
.pill.late .d{background:var(--taech-late)}
.pill.paid{color:var(--taech-present);border-color:rgba(56,178,107,.4);background:rgba(56,178,107,.1)}
.pill.paid .d{background:var(--taech-present)}
.pill.due{color:var(--taech-late);border-color:rgba(229,162,59,.4);background:rgba(229,162,59,.12)}
.pill.due .d{background:var(--taech-late)}
.pill.released{color:var(--taech-present);border-color:rgba(56,178,107,.4);background:rgba(56,178,107,.1)}
.pill.released .d{background:var(--taech-present)}
.pill.review{color:var(--taech-assessment);border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.1)}
.pill.review .d{background:var(--taech-assessment)}

.btn{font-weight:700;font-size:13px;border:0;border-radius:9px;padding:11px 18px}
.console .btn{background:var(--taech-grow);color:var(--taech-void)}
.console .btn:hover{background:var(--taech-grow-tint)}
.daylight .btn{background:var(--taech-grow-deep);color:#fff}
.daylight .btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid}
.console .btn.ghost{color:var(--taech-text-2);border-color:var(--taech-hairline-soft)}
.daylight .btn.ghost{color:var(--taech-ink-2);border-color:var(--taech-paper-line)}
.btn:active{transform:scale(.98)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:start;font-family:var(--taech-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:0 12px 10px;font-weight:500}
.console th{color:var(--taech-text-3)} .daylight th{color:var(--taech-ink-3)}
td{padding:11px 12px;border-top:1px solid}
.console td{border-color:var(--taech-hairline)} .daylight td{border-color:var(--taech-paper-line)}
.num{text-align:end;font-family:var(--taech-mono)}
.listrow{cursor:pointer}
.hero-note{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:12px;margin-top:16px;font-size:13px;line-height:1.5}
.console .hero-note{background:rgba(23,227,154,.07);border:1px solid rgba(23,227,154,.28);color:var(--taech-text-2)}
.daylight .hero-note{background:rgba(14,158,108,.06);border:1px solid rgba(14,158,108,.22);color:var(--taech-ink-2)}
.hero-note b{color:var(--taech-grow-tint)} .daylight .hero-note b{color:var(--taech-grow-deep)}
.locked{text-align:center;padding:48px 20px;max-width:520px;margin:0 auto}
.locked .ico{font-size:34px;margin-bottom:14px}
.locked h3{font-size:19px;font-weight:700;margin-bottom:8px}
.childswitch{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.childswitch .c{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid}
.daylight .childswitch .c{border-color:var(--taech-paper-line);color:var(--taech-ink-2);background:#fff}
.daylight .childswitch .c.on{background:var(--taech-grow-deep);color:#fff;border-color:var(--taech-grow-deep)}
.bars{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:12px}
.bars .b{flex:1;border-radius:3px 3px 0 0;min-height:4px}
.avatar-lg{width:46px;height:46px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.console .avatar-lg{background:var(--taech-panel-raised);color:var(--taech-grow-tint)}
.daylight .avatar-lg{background:var(--taech-paper-raised);color:var(--taech-grow-deep)}
.section-t{font-family:var(--taech-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin:22px 0 10px}
.console .section-t{color:var(--taech-text-3)} .daylight .section-t{color:var(--taech-ink-3)}
@media(max-width:680px){.persona-grid{grid-template-columns:1fr}.topbar .tabs{max-width:52vw}}