/* The Teachvara dashboard: the hub's card and motion language (rise, colour spread, sheen, lift and glow,
   ease-out). Everything is scoped under .tvd and uses d- class names, so it can sit inside the landing page.
   Layout follows the width of the dashboard itself (container queries), not the browser window. */
.tvd{
  --bg:#F5F6F3;--surface:#FFFFFF;--surface-2:#F9FAF7;--surface-3:#EEF1EB;
  --ink:#18221D;--ink-2:#414C46;--muted:#69746D;--line:#E1E6DE;--line-2:#EDF0EA;
  --heading:var(--navy);--link:var(--primary);
  --radius:14px;--pad:22px;--gap:16px;
  --shadow:0 1px 2px rgba(20,30,24,.05),0 10px 30px -18px rgba(20,30,24,.28);
  --vara:linear-gradient(90deg,var(--c1) 0 25%,var(--c2) 25% 50%,var(--c3) 50% 75%,var(--c4) 75% 100%);
  --ease:cubic-bezier(.16,.84,.3,1);--gs1:13%;--gs2:7%;
  transition:--c1 1.2s var(--ease),--c2 1.2s var(--ease),--c3 1.2s var(--ease),--c4 1.2s var(--ease),--navy 1.2s var(--ease),--primary 1.2s var(--ease);
  container-type:inline-size;
  background:var(--bg);color:var(--ink);font-family:"Public Sans","Segoe UI",system-ui,sans-serif;font-size:15px;line-height:1.5;text-align:left;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word
}
:root[data-theme="dark"] .tvd{--bg:#0F1512;--surface:#161F1A;--surface-2:#1A241F;--surface-3:#212D26;--ink:#E9EEE8;--ink-2:#C2CCC4;--muted:#93A098;--line:#2A3830;--line-2:#222E27;--heading:color-mix(in srgb,var(--c1) 30%,#F2F4EE);--link:color-mix(in srgb,var(--primary) 45%,#fff);--gs1:20%;--gs2:10%;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -16px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tvd{--bg:#0F1512;--surface:#161F1A;--surface-2:#1A241F;--surface-3:#212D26;--ink:#E9EEE8;--ink-2:#C2CCC4;--muted:#93A098;--line:#2A3830;--line-2:#222E27;--heading:color-mix(in srgb,var(--c1) 30%,#F2F4EE);--link:color-mix(in srgb,var(--primary) 45%,#fff);--gs1:20%;--gs2:10%;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -16px rgba(0,0,0,.6)}}
.tvd *{box-sizing:border-box}
.tvd h1,.tvd h2,.tvd h3{color:var(--heading);margin:0;line-height:1.2;text-wrap:balance}
.tvd p{margin:0}
.tvd a{color:var(--link);text-decoration:none}
.tvd svg.i{width:19px;height:19px;flex:0 0 auto}

@keyframes d-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes d-grow{from{transform:scaleX(0)}}
@keyframes d-floaty{50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes d-sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes d-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 60%,transparent)}100%{box-shadow:0 0 0 7px transparent}}

/* shell */
.d-shell{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100%}
.d-side{background:var(--surface);border-right:1px solid var(--line);padding:22px 14px 16px;display:flex;flex-direction:column;gap:4px}
.tvd.full .d-side{position:sticky;top:0;height:100vh;overflow:auto}
.d-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 0}
.d-brand .lg{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center}
.d-brand .lg svg,.d-brand .lg img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.d-brand .wm{font-family:"Cinzel",serif;font-weight:700;font-size:1.2rem;letter-spacing:.12em;color:var(--heading);line-height:1.1}
.d-brand .own{font-weight:800;font-size:1.06rem;color:var(--heading);letter-spacing:-.01em;line-height:1.2}
.d-brand .org{font-size:.72rem;color:var(--muted);font-weight:600;line-height:1.3;margin-top:3px}
.d-strip{height:4px;border-radius:4px;background:var(--vara);margin:18px 8px;transform-origin:left;animation:d-grow 1.1s var(--ease) .3s backwards}
.d-label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 12px}
.d-nav{display:flex;flex-direction:column;gap:2px}
.d-nav a{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:.94rem;
  transition:background .5s var(--ease),color .5s var(--ease),transform .6s var(--ease);animation:d-rise .8s var(--ease) backwards;animation-delay:calc(var(--i) * 45ms + .2s)}
.d-nav a svg{color:var(--k);transition:transform .6s var(--ease)}
.d-nav a:hover{background:var(--surface-3);transform:translateX(3px)}.d-nav a:hover svg{transform:scale(1.14) rotate(-6deg)}
.d-nav a.on{color:var(--heading);font-weight:700;background:color-mix(in srgb,var(--k) 13%,transparent)}
.d-nav a.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--k)}
.d-by{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 8px 2px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;transition:transform .6s var(--ease)}
.d-by:hover{transform:translateY(-1px)}
.d-by svg{width:30px;height:30px;flex:0 0 auto}
.d-by b{font-family:"Cinzel",serif;letter-spacing:.12em;color:var(--heading);font-weight:700}
.d-main{min-width:0;display:flex;flex-direction:column}
.d-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 28px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,transparent)}
.tvd.full .d-top{position:sticky;top:0;z-index:4;backdrop-filter:blur(8px)}
.d-crumb{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.d-crumb b{color:var(--heading)}
.d-mbrand{display:none;align-items:center;gap:8px;font-weight:800;color:var(--heading);font-size:.92rem}
.d-mbrand .lg{width:30px;height:30px}.d-mbrand .lg svg,.d-mbrand .lg img{width:100%;height:100%;object-fit:contain;border-radius:7px}
.d-tools{display:flex;gap:8px;flex-wrap:wrap}
.d-page{padding:24px 28px 40px;display:flex;flex-direction:column;gap:var(--gap);max-width:1240px;width:100%}
.d-page > *{animation:d-rise .9s var(--ease) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.d-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.d-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 15px;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;color:var(--ink);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .4s var(--ease);white-space:nowrap}
.d-btn:hover{transform:translateY(-2px)}
.d-btn.p{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 10px -2px color-mix(in srgb,var(--primary) 38%,transparent)}
.d-btn.p:hover{box-shadow:0 12px 26px -8px color-mix(in srgb,var(--primary) 55%,transparent)}
.d-btn.sm{padding:6px 11px;font-size:.82rem}
.d-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.d-muted{color:var(--muted)}.d-tiny{font-size:.76rem}
.d-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--dc,var(--c1)) 14%,transparent);color:color-mix(in srgb,var(--dc,var(--c1)) 70%,var(--ink))}

/* hero */
.d-hero{position:relative;overflow:hidden;isolation:isolate;padding:34px var(--pad) 26px}
.d-mesh{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.d-mesh i{position:absolute;border-radius:50%;filter:blur(34px);opacity:.3}
.d-mesh i:nth-child(1){width:260px;height:260px;right:6%;top:-90px;background:var(--c1)}
.d-mesh i:nth-child(2){width:200px;height:200px;right:24%;top:40px;background:var(--c2);opacity:.16}
.d-mesh i:nth-child(3){width:220px;height:220px;right:-50px;bottom:-110px;background:var(--c3);opacity:.22}
.d-mesh i:nth-child(4){width:180px;height:180px;left:38%;bottom:-120px;background:var(--c4);opacity:.14}
.d-hmark{position:absolute;right:40px;top:12px;width:170px;height:170px;animation:d-floaty 7s ease-in-out 1.4s infinite}
.d-hmark svg,.d-hmark img{width:100%;height:100%;object-fit:contain}
.d-mono{width:100%;height:100%;border-radius:36px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:3.6rem;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--navy),color-mix(in srgb,var(--c1) 80%,var(--navy)));box-shadow:0 30px 50px -26px var(--navy);transform:rotate(-4deg) scale(.82)}
.d-hero h1{font-size:1.9rem;max-width:calc(100% - 210px)}
.d-hero .d-eyebrow{max-width:calc(100% - 210px)}
.d-hero .tag{color:var(--ink-2);margin-top:6px;font-size:1.02rem;max-width:calc(100% - 210px)}
.d-acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.d-values{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.d-value{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;padding:11px 13px;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--vc);cursor:default;
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);animation:d-rise .9s var(--ease) backwards;animation-delay:calc(var(--i) * 80ms + .25s)}
.d-value small{display:block;font-weight:600;letter-spacing:0;text-transform:none;font-size:.78rem;opacity:.94;margin-top:2px}
.d-value::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-130%);background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%)}
.d-value:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 18px 30px -16px color-mix(in srgb,var(--vc) 55%,transparent)}
.d-value:hover::after{animation:d-sheen 1.1s var(--ease) forwards}
.d-v1{--vc:var(--c1)}.d-v2{--vc:var(--c2)}.d-v3{--vc:var(--c3);color:#2B2000}.d-v4{--vc:var(--c4)}

/* today */
.d-today{position:relative;overflow:hidden;padding:0}
.d-today::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c4)}
.d-thead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px var(--pad) 8px;flex-wrap:wrap}
.d-tdate{display:block;font-size:1.06rem;color:var(--heading)}
.d-live{width:7px;height:7px;border-radius:50%;background:var(--c2);display:inline-block;animation:d-pulse 1.6s var(--ease) infinite}
.d-row{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px var(--pad);border-top:1px solid var(--line-2);cursor:pointer;
  transition:background .5s var(--ease),padding-left .6s var(--ease);animation:d-rise .8s var(--ease) backwards;animation-delay:calc(var(--i) * 60ms + .3s)}
.d-row::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:5px;border-radius:0 3px 3px 0;background:var(--dc);transform-origin:left;transition:transform .6s var(--ease)}
.d-row:hover{background:var(--surface-2);padding-left:calc(var(--pad) + 6px)}
.d-row:hover::before{transform:scaleX(1.4)}
.d-time{font-weight:800;color:color-mix(in srgb,var(--dc) 72%,var(--ink));line-height:1.2;font-variant-numeric:tabular-nums}
.d-time small{display:block;font-weight:600;color:var(--muted);font-size:.74rem}
.d-tm b{display:block;font-size:.95rem}
.d-meta{font-size:.8rem;color:var(--muted)}
.d-tr{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.d-prog{display:block;width:92px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;transition:transform .6s var(--ease)}
.d-prog i{display:block;height:100%;background:var(--dc);transform-origin:left;animation:d-grow 1.2s var(--ease) .6s backwards}
.d-row:hover .d-prog{transform:scaleY(1.6)}
.d-week{display:flex;gap:6px;padding:12px var(--pad) 16px;flex-wrap:wrap;border-top:1px solid var(--line-2)}
.d-week a{flex:1 1 0;min-width:64px;text-align:center;padding:8px 4px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:.76rem;font-weight:700;
  transition:transform .5s var(--ease),border-color .4s var(--ease),background .6s var(--ease);animation:d-rise .7s var(--ease) backwards;animation-delay:calc(var(--i) * 40ms + .5s)}
.d-week a b{display:block;font-size:1.05rem;color:var(--heading)}
.d-week a:hover{transform:translateY(-3px);border-color:var(--primary)}
.d-week a.has{border-color:color-mix(in srgb,var(--c4) 50%,var(--line));background:color-mix(in srgb,var(--c4) 8%,var(--surface))}

/* stat tiles with the colour spread */
.d-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--gap)}
.d-kpi{--gc:var(--accent);position:relative;overflow:hidden;isolation:isolate;padding:16px 18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;
  transition:transform .8s var(--ease),box-shadow .8s var(--ease),border-color .4s var(--ease);animation:d-rise .9s var(--ease) backwards;animation-delay:calc(var(--i) * 60ms)}
.d-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}
.d-kpi::after,.d-dept .d-glow{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  --spread:radial-gradient(circle closest-side,color-mix(in srgb,var(--gc) var(--gs1),transparent),color-mix(in srgb,var(--gc) var(--gs2),transparent) 60%,transparent);
  background:var(--spread),var(--spread);background-repeat:no-repeat;transition:background-size 1.2s var(--ease),background-position 1.2s var(--ease)}
.d-kpi::after{background-size:170px 170px,0 0;background-position:right -85px top -85px,left 0 bottom 0}
.d-kpi:hover::after{background-size:340px 340px,340px 340px;background-position:right -170px top -170px,left -170px bottom -170px}
.d-kpi:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 20px 34px -18px color-mix(in srgb,var(--accent) 42%,transparent),var(--shadow)}
.d-kpi .l{font-size:.8rem;font-weight:700;color:var(--muted)}
.d-kpi .n{font-size:2rem;font-weight:800;color:var(--heading);letter-spacing:-.03em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.d-kpi .f{display:inline-block;margin-top:8px;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:700;background:color-mix(in srgb,var(--accent) 12%,transparent);color:color-mix(in srgb,var(--accent) 70%,var(--ink))}

/* department cards */
.d-sec{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.d-sec h2{font-size:1.3rem}
.d-depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap)}
.d-dept{--gc:var(--dc);position:relative;overflow:hidden;isolation:isolate;padding:18px;display:flex;flex-direction:column;gap:12px;cursor:pointer;
  transition:transform .8s var(--ease),box-shadow .8s var(--ease),border-color .4s var(--ease);animation:d-rise .9s var(--ease) backwards;animation-delay:calc(var(--i) * 70ms + .1s)}
.d-dept .d-glow{background-size:200px 200px,0 0;background-position:right -100px top -100px,left 0 bottom 0}
.d-dept:hover .d-glow{background-size:720px 720px,720px 720px;background-position:right -360px top -360px,left -360px bottom -360px}
.d-dept:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--dc) 35%,var(--line));box-shadow:0 20px 34px -18px color-mix(in srgb,var(--dc) 42%,transparent),var(--shadow)}
.d-dicon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--dc);color:#fff;box-shadow:0 8px 18px -8px var(--dc);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.d-dicon svg{width:24px;height:24px}
.d-dept:hover .d-dicon{transform:rotate(-7deg) scale(1.08);box-shadow:0 14px 24px -10px var(--dc)}
.d-dept h3{font-size:1.04rem;line-height:1.3}
.d-dn{background:linear-gradient(var(--dc),var(--dc)) 0 100%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .8s var(--ease)}
.d-dept:hover .d-dn{background-size:100% 2px}
.d-stats{display:flex;gap:18px;flex-wrap:wrap}
.d-stats > div{transition:transform .8s var(--ease)}
.d-stats > div:nth-child(2){transition-delay:.05s}.d-stats > div:nth-child(3){transition-delay:.1s}
.d-stats b{display:block;font-size:1.35rem;color:var(--heading);line-height:1.1;transition:color .6s var(--ease)}
.d-stats span{font-size:.72rem;color:var(--muted);font-weight:700}
.d-dept:hover .d-stats > div{transform:translateY(-3px)}
.d-dept:hover .d-stats > div:first-child b{color:var(--dc)}
.d-load{height:3px;border-radius:2px;background:color-mix(in srgb,var(--dc) 14%,transparent);overflow:hidden}
.d-load i{display:block;height:100%;border-radius:2px;background:var(--dc);transform:scaleX(.12);transform-origin:left;transition:transform 1.1s var(--ease)}
.d-dept:hover .d-load i{transform:scaleX(var(--fill,.5))}
.d-foot{display:grid;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2);font-size:.82rem;color:var(--muted)}
.d-foot > span{grid-area:1/1;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.d-foot > .go{transform:translateY(60%);opacity:0;font-weight:700;color:color-mix(in srgb,var(--dc) 80%,var(--ink))}
.d-dept:hover .d-foot > span:first-child{transform:translateY(-60%);opacity:0}
.d-dept:hover .d-foot > .go{transform:none;opacity:1}
.d-byline-m{display:none;justify-content:center;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);padding-top:8px}
.d-byline-m svg{width:24px;height:24px}
.d-byline-m b{font-family:"Cinzel",serif;letter-spacing:.12em;color:var(--heading)}

/* the dashboard follows its own width */
@container (max-width:980px){.d-shell{grid-template-columns:1fr}.d-side{display:none}.d-mbrand{display:flex}.d-crumb{display:none}.d-byline-m{display:flex}}
@container (max-width:720px){.d-values{grid-template-columns:repeat(2,1fr)}.d-hmark{display:none}.d-hero h1,.d-hero .tag,.d-hero .d-eyebrow{max-width:none}
  .d-page{padding:16px 16px 30px}.d-top{padding:12px 16px}.d-row{grid-template-columns:64px minmax(0,1fr)}.d-tr{display:none}.d-tools .d-btn:not(.p){display:none}}
@media (prefers-reduced-motion:reduce){.tvd *{animation:none!important;transition:none!important}}

/* scaled-down frame */
.dframe{position:relative;overflow:hidden}
.dframe-in{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.tvd.framed{overflow:hidden}
.tvd.framed .d-shell{height:100%}
.tvd.framed .d-side{height:100%;overflow:hidden}
.tvd.framed .d-main{height:100%;overflow:hidden}
.tvd.framed .d-page{will-change:transform}