/* Zirva – breathing-room pass (loaded last).
   Goals: more whitespace, clearer hierarchy, calmer lists. */

/* page frame */
.content{padding:24px 24px 140px}
.chips{margin:24px -24px 0;padding:0 24px}
.chip{height:40px;padding:0 16px}
.tgroups{margin:24px -24px 0;padding:0 24px;gap:14px}
@media (min-width:900px){
  .shell.app{grid-template-columns:264px minmax(0,1fr)}
  .side{padding:32px 20px}
  .side .wordmark{padding:0 14px 32px}
  .nav{min-height:48px;padding:0 14px}
  .side .side-h{margin:32px 14px 8px}
  .gl{min-height:42px;padding:0 14px}
  .content{padding:56px 64px 72px;max-width:1240px;width:100%;margin:0 auto}
  .chips{margin:24px 0 0;padding:0}
  .tgroups{margin:32px 0 0;padding:0;gap:16px}
}

/* titles */
.hd h1,.pg-h h1,.t-hd h1,.gp-head h1{font:600 30px/36px var(--font-family-ui);letter-spacing:-.015em}
.hd p,.pg-h p,.t-hd p,.gp-head p{font:var(--type-body-md);color:var(--color-text-secondary);margin-top:6px}
.back{margin-bottom:18px}
.sec-h{margin:44px 0 12px}
.sec-h h2,.blk-h{font:600 20px/26px var(--font-family-ui);letter-spacing:-.01em}
.sec-h a{font:var(--type-label-md);color:var(--color-text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--color-border-strong)}
.blk-h{margin:44px 0 12px}

/* lists */
.lr{grid-template-columns:44px minmax(0,1fr) auto;gap:16px;padding:16px 0;min-height:76px}
.ti{width:44px;height:44px;border-radius:13px}
.ti i{font-size:21px}
.lr b{font:600 16px/22px var(--font-family-ui)}
.lr .m{margin-top:4px;gap:4px 12px;line-height:20px}
.card{padding:20px;border-radius:18px}
.card.list{padding:4px 20px}

/* student dashboard */
.lesson{margin-top:28px;padding:20px 22px 22px;border-radius:20px}
.lesson b{font:600 21px/28px var(--font-family-ui);margin-top:4px}
.lesson .tm{font-size:34px}
.lesson .pills{margin-top:18px;gap:10px}
.lesson .pills span{height:32px;padding:0 12px}
.stats{gap:12px;margin-top:16px}
.stat{padding:16px;border-radius:16px}
.stat b{font-size:26px;line-height:30px}
.stat span{display:block;font:var(--type-body-sm);margin-top:4px}
.sched{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px 0}
.ann{gap:12px}
.ann p{line-height:24px}
@media (min-width:900px){
  .dash{grid-template-columns:minmax(0,1fr) 380px;column-gap:72px}
  .d-side{padding-top:28px}
  .d-side .sec-h:first-child{margin-top:0}
  .lesson{max-width:none}
}

/* homework */
.hw-title{font:600 30px/36px var(--font-family-ui)}
.hw-meta{margin-top:12px;gap:6px 18px}
.hw-due{margin-top:18px}
.instr{margin-top:28px;line-height:26px}
.instr ol{margin-top:12px}
.instr li{margin-bottom:6px}
.att{margin-top:24px;gap:12px}
.work{padding:24px}
.work h3{font:600 20px/26px var(--font-family-ui);margin-bottom:16px}
.photos{gap:12px;margin-top:16px}
.work .btn{margin-top:20px}
@media (min-width:900px){.two{grid-template-columns:minmax(0,1fr) 400px;gap:64px}}
@media (max-width:899px){.work{margin-top:32px}}

/* grades */
.gcards{gap:20px;margin-top:28px}
.gsum .avg{font-size:32px}
.gsum{margin-bottom:8px}
.gbar{margin-top:6px}

/* group */
.gp-ic{width:60px;height:60px}
.tabs2{margin-top:28px;gap:28px}
.post{margin-top:16px}

/* notifications */
.nt{grid-template-columns:44px minmax(0,1fr) 10px;gap:16px;padding:18px 0}
.nt .ni{width:44px;height:44px}
.nt p{line-height:23px}

/* teacher */
.tg{padding:20px;min-height:140px;border-radius:18px}
.tg-ic{width:40px;height:40px;margin-bottom:12px}
.sub{grid-template-columns:40px minmax(0,1fr) auto;gap:14px;padding:16px 0}
.sub .av,.who .av{width:40px;height:40px}
.tq th{padding:0 16px 12px 0}
.tq td{padding:16px 16px 16px 0}
.gb-bar{margin-top:32px}
.gb td{padding:8px 6px}
.cell{height:44px}
.st{padding:18px 0}

/* builder / AI / review / students */
.qb{gap:24px;margin-top:28px}
@media (min-width:900px){.qb{grid-template-columns:250px minmax(0,1fr)}}
@media (min-width:1300px){.qb{grid-template-columns:250px minmax(0,1fr) 320px}}
.ql .qi{padding:12px 14px;margin-bottom:4px}
.ed{gap:22px;padding:24px}
.opt{min-height:56px}
.field{gap:10px}
.formsum{gap:18px;padding:24px}
.kv{padding:12px 0}
.qcard{margin-top:16px;gap:10px;padding:20px}
.gen-prog{padding:20px}
.grade-panel{gap:22px;padding:24px}
.page{padding:32px 28px;gap:16px}
.rowst{padding:16px 0}
.add-foot{margin-top:22px}

/* full-screen flows */
.full-in{padding:16px 24px 0}
.full-foot{padding:16px 24px 32px}
.q-big{font-size:28px;line-height:36px;margin-top:12px}
.qtype{margin-top:32px}
.answers{gap:12px;padding:20px 0}
.ans{min-height:62px}
.fb-in{padding:20px 24px 32px;gap:10px}
.rz-head{margin-top:28px}
.qa{padding:16px 0}
.lg-body{margin-top:12px}
.inkcode{margin-top:32px}

/* brand */
.brand{display:inline-flex;align-items:center;gap:10px;font:600 21px/1 var(--font-family-display);letter-spacing:-.02em;color:var(--color-text)}
.brand .mark{width:30px;height:20px;flex:none}
.side .brand{padding:0 14px 32px}

/* phone login is full-bleed, not a card */
@media (max-width:899px){.login .card{background:transparent;box-shadow:none;padding:0;border-radius:0}}

/* ---------- polish round: dark mode + scroll edges ---------- */
/* rows that scroll sideways fade out at the edge so they read as "more" */
.chips,.tabs2,.tgroups{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
@media (min-width:900px){.chips,.tabs2,.tgroups{-webkit-mask-image:none;mask-image:none}}
/* dark: highlighter marks become solid blocks with ink text */
[data-theme=dark] .swipe{background:var(--color-accent);color:var(--color-on-accent);border-radius:4px;padding:0 6px;margin:0 -2px}
/* dark: icons on light group tiles use ink */
[data-theme=dark] .tg-ic,[data-theme=dark] .gp-ic{color:#111419}
/* dark: lesson card is paper, so pills darken instead of lighten */
[data-theme=dark] .lesson .pills span{background:rgba(17,20,25,.08)}
[data-theme=dark] .lesson{box-shadow:inset 0 -4px 0 rgba(17,20,25,.14)}
/* dark: caret on the paper code bar */
[data-theme=dark] .inkcode span.cur::before{background:var(--color-on-primary)}
[data-theme=dark] .inkcode{box-shadow:inset 0 -3px 0 rgba(17,20,25,.14)}
/* dark: primary small buttons keep their key edge readable */
[data-theme=dark] .wbar{background:rgba(17,20,25,.12)}
/* consistent stat tiles */
.stat span{line-height:18px}

/* iPad landscape gets its own rhythm */
.seg button{white-space:nowrap}
@media (min-width:900px) and (max-width:1199px){
  .content{padding:44px 40px 56px}
  .two{grid-template-columns:minmax(0,1fr) 340px;gap:40px}
  .dash{grid-template-columns:minmax(0,1fr) 320px;column-gap:40px}
}

/* ---------- deep pass: student home ---------- */
.statline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;background:var(--color-surface);border-radius:16px;box-shadow:inset 0 0 0 1px var(--color-border)}
.statline>div{padding:14px 14px 15px}
.statline>div+div{border-left:1px solid var(--color-border)}
.statline b{display:flex;align-items:center;gap:6px;font:600 24px/28px var(--font-family-ui);font-variant-numeric:tabular-nums}
.statline b i{font-size:18px}
.statline span{display:block;margin-top:2px;font:400 13px/18px var(--font-family-ui);color:var(--color-text-secondary)}
.statline .bad b{color:var(--color-danger)}
/* statuses inside lists read as text, not badges */
.lr .tag{box-shadow:none;padding:0;min-height:0;background:none}

/* ---------- deep pass: teacher dashboard ---------- */
.qa4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px}
.qa4 a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px;border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-strong),inset 0 -3px 0 var(--color-border);font:600 14px/18px var(--font-family-ui);color:var(--color-text);cursor:pointer}
.qa4 .qi{width:40px;height:40px;border-radius:12px;background:var(--color-surface-sunken);display:grid;place-items:center}
.qa4 .qi.hl{background:var(--color-accent);color:var(--color-on-accent)}
.qa4 .qi i{font-size:21px}
@media (max-width:899px){.qa4 a{padding:12px 10px;gap:10px;font-size:12.5px;line-height:16px}.qa4 .qi{width:36px;height:36px}}
@media (min-width:900px){.qa4{max-width:760px}.qa4 a{flex-direction:row;align-items:center;font-size:15px}}
.wkr{padding:16px 0;border-bottom:1px solid var(--color-border)}
.wkr:last-child{border-bottom:0}
.wkr-t{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.wkr-t b{font:600 15px/20px var(--font-family-ui)}
.wkr-t span{font:var(--type-label-sm);color:var(--color-text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
.wkr-p{display:flex;align-items:center;gap:12px;margin-top:10px;font:var(--type-caption);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}
.wkr-p .tr{flex:1;height:6px;border-radius:3px;background:var(--color-border);overflow:hidden}
.wkr-p .tr i{display:block;height:100%;border-radius:3px;background:var(--color-text)}
.d-main .tgroups{grid-auto-columns:200px}
@media (min-width:900px){.d-main .tgroups{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- deep pass: gradebook ---------- */
.gb-sum{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:18px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.gb-sum b{font:600 18px/1 var(--font-family-ui);color:var(--color-text);margin-right:4px;font-variant-numeric:tabular-nums}
.gb-sum b.bad{color:var(--color-danger)}
.lg5{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font:var(--type-caption)}
.lg5 i{width:14px;height:14px;border-radius:4px;margin-left:6px}
@media (min-width:900px){.lg5{margin-left:auto}}
/* teacher dashboard: list rows instead of the table inside the two-column layout */
.dash table.tq{display:none!important}
.dash .subs{display:block!important}
@media (min-width:900px){.qa4{max-width:none}}