/* COTA teacher/staff skin: navy + gold + crimson, mirrors the family pages. Scope: .tskin (staff shell only). */
body:has(.tskin),html:has(.tskin){background:#0b1b3a}
.tskin{
  --color-navy:#fff;--color-navy-deep:#e6c75c;--color-gold:#D4AF37;
  --color-ink:#f1f4fa;--color-ink-soft:#c3cde0;--color-line:rgba(201,162,39,.4);
  --color-paper:rgba(255,255,255,.05);--color-ivory:rgba(255,255,255,.09);--color-gold-soft:rgba(212,175,55,.22);
  --color-burgundy:#ffb9b9;--color-crimson:#ffb9b9;--color-royal:#ecd78f;
  color:#fff;font-family:Inter,"Segoe UI",sans-serif;
}
/* light surfaces (editors, grade tables) keep the original light palette */
.tskin .bg-\[\#f8fafc\],.tskin .tl{
  --color-navy:#1d4ed8;--color-navy-deep:#1e40af;--color-gold:#64748b;--color-ink:#0f172a;--color-ink-soft:#64748b;--color-line:#e2e8f0;
  --color-paper:#fff;--color-ivory:#f8fafc;--color-gold-soft:#dbeafe;--color-burgundy:#dc2626;--color-crimson:#dc2626;--color-royal:#2563eb;
  color:#0f172a;border-top:2px solid #D4AF37;
}
.tskin .bg-\[\#f8fafc\] .bg-white,.tskin .tl .bg-white{background-color:#fff}
.tskin .bg-\[\#f8fafc\] .bg-navy,.tskin .tl .bg-navy{background-color:#1d4ed8;color:#fff}
.tskin .bg-\[\#f8fafc\] .bg-navy:hover,.tskin .tl .bg-navy:hover{background-color:#1e40af}
/* buttons */
.tskin .bg-navy{background-color:#D4AF37;color:#10264a;font-weight:600}
.tskin .bg-navy:hover{background-color:#e6c75c}
.tskin .bg-white:not(select):not(textarea):not(input){background-color:rgba(255,255,255,.05)}
.tskin .bg-white.hover\:bg-ivory:hover{background-color:rgba(255,255,255,.1)}
.tskin button,.tskin a,.tskin summary{-webkit-tap-highlight-color:transparent}
.tskin a.text-navy,.tskin button.text-navy{color:#ecd78f}
/* form controls stay light-on-dark-text so they are easy to read and type in */
.tskin input:not([type=checkbox]):not([type=radio]):not([type=range]),.tskin select,.tskin textarea{
  --color-ink:#0f172a;--color-ink-soft:#64748b;--color-line:#cbd5e1;background-color:#fff;color:#0f172a;
}
.tskin input::placeholder,.tskin textarea::placeholder{color:#64748b;opacity:1}
.tskin .bg-\[\#f8fafc\] input,.tskin .bg-\[\#f8fafc\] select,.tskin .bg-\[\#f8fafc\] textarea{--color-line:#e2e8f0}
.tskin table{--color-line:rgba(255,255,255,.16)}
.tskin .bg-\[\#f8fafc\] table,.tskin .tl table{--color-line:#e2e8f0}
/* headings: Oswald uppercase with a gold rule, like the family pages */
.tskin main h1:not(.bg-\[\#f8fafc\] *):not(.tl *),.tskin main h2.font-serif:not(.bg-\[\#f8fafc\] *):not(.tl *),.tskin main h3.font-serif:not(.bg-\[\#f8fafc\] *):not(.tl *){
  font-family:Oswald,Inter,"Segoe UI",sans-serif;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#fff;
}
.tskin main h1:not(.bg-\[\#f8fafc\] *):not(.tl *){font-size:clamp(1.9rem,5.5vw,2.6rem);line-height:1.05}
.tskin main h2.font-serif:not(.bg-\[\#f8fafc\] *):not(.tl *){font-size:1.5rem;line-height:1.1}
.tskin main h1.font-serif:not(.bg-\[\#f8fafc\] *):not(.tl *)::after,.tskin main h1.tsk-h1::after{content:"";display:block;width:9rem;height:1px;background:#D4AF37;margin-top:.7rem}
.tskin .bg-\[\#f8fafc\] h1,.tskin .bg-\[\#f8fafc\] h2,.tskin .bg-\[\#f8fafc\] h3,.tskin .tl h1,.tskin .tl h2,.tskin .tl h3{
  font-family:inherit;text-transform:none;letter-spacing:normal;color:var(--color-navy)
}
/* header */
.tsk-head{background:rgba(7,18,40,.55);border-bottom:0}
.tsk-head-in{max-width:72rem;margin:0 auto;padding:.75rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}
@media(min-width:640px){.tsk-head-in{padding:.75rem 2rem}}
.tsk-trim{height:2px;background:linear-gradient(90deg,#A6192E,#D4AF37 55%,transparent)}
.tsk-brand{display:flex;align-items:center;gap:.75rem;min-width:0;text-decoration:none;color:#fff}
.tsk-shield{height:44px;width:auto;flex:none}
.tsk-kick{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#D4AF37}
.tsk-title{display:block;font-family:Oswald,Inter,sans-serif;font-size:1.35rem;line-height:1.1;letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.tsk-nav-row{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;font-size:.95rem}
.tsk-nav{display:inline-flex;align-items:center;min-height:40px;padding:0 .8rem;border-radius:8px;color:rgba(255,255,255,.82);text-decoration:none;border-bottom:2px solid transparent}
.tsk-nav:hover{background:rgba(255,255,255,.1);color:#fff}
.tsk-nav-on{color:#fff;border-bottom-color:#D4AF37;background:rgba(255,255,255,.07);border-radius:8px 8px 0 0}
.tsk-user{margin-left:auto;display:flex;align-items:center;gap:.75rem;font-size:.9rem}
.tsk-user small{display:block;font-size:.75rem;color:rgba(255,255,255,.72)}
.tsk-out{min-height:40px;padding:0 .8rem;border-radius:8px;border:1px solid rgba(212,175,55,.5);background:transparent;color:#fff;cursor:pointer}
.tsk-out:hover{background:rgba(255,255,255,.1)}
.tsk-more{position:relative}
.tsk-more>summary{list-style:none;cursor:pointer}
.tsk-more>summary::-webkit-details-marker{display:none}
.tsk-menu{position:absolute;z-index:30;top:100%;left:0;min-width:12rem;margin-top:.25rem;padding:.4rem;background:#10264a;border:1px solid rgba(201,162,39,.55);border-top:2px solid #D4AF37;border-radius:8px;display:flex;flex-direction:column;box-shadow:0 12px 28px rgba(0,0,0,.4)}
.tsk-menu a{padding:.55rem .7rem;border-radius:6px;color:#fff;text-decoration:none;font-size:.95rem}
.tsk-menu a:hover{background:rgba(255,255,255,.1)}
.tsk-foot{padding:2rem 1.5rem;text-align:center;font-size:.75rem;color:rgba(255,255,255,.65)}
.tskin :focus-visible{outline:2px solid #D4AF37;outline-offset:2px}
/* teacher home banner and big actions */
.tsk-banner{display:flex;align-items:center;gap:1.1rem;margin-top:.25rem}
.tsk-banner-shield{height:5.5rem;width:auto;flex:none;filter:drop-shadow(0 0 18px rgba(212,175,55,.3))}
@media(min-width:640px){.tsk-banner{gap:1.75rem}.tsk-banner-shield{height:8rem}}
.tsk-kick2{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#D4AF37;margin-bottom:.35rem}
.tsk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.9rem;margin-top:1.75rem}
.tsk-tile{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.1rem 1.2rem;background:rgba(255,255,255,.05);border:1px solid rgba(201,162,39,.4);border-top:2px solid #D4AF37;color:#fff;text-decoration:none;min-height:7.5rem}
.tsk-tile:hover{background:rgba(255,255,255,.1)}
.tsk-tile-t{font-family:Oswald,Inter,sans-serif;font-weight:600;font-size:1.35rem;line-height:1.05;letter-spacing:.03em;text-transform:uppercase}
.tsk-tile-s{font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.35}
.tsk-tile-n{margin-top:auto;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#D4AF37}
.tsk-h2{margin-top:2.5rem;font-family:Oswald,Inter,sans-serif;font-weight:600;font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid rgba(212,175,55,.45);padding-bottom:.5rem}
/* home class cards */
.tskin [data-testid=home-class]{background:rgba(255,255,255,.05);border-color:rgba(201,162,39,.4);border-top:2px solid #D4AF37;border-radius:0}
.tskin [data-testid=home-class] a.bg-navy{border-radius:8px}
.tskin details>summary{padding:.5rem 0}
.tskin details>summary.text-navy{color:#ecd78f}
.tsk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.25rem;margin-top:1.25rem}
/* print: never skin */
@media print{.tskin{background:#fff !important;color:#000 !important}}
.tskin .text-\[\#15803d\]{color:#7ee2a8}
.tskin .bg-\[\#f8fafc\] .text-\[\#15803d\],.tskin .tl .text-\[\#15803d\]{color:#15803d}
.tskin button:disabled.bg-navy{background-color:#5d5230;color:#e9e2c4;opacity:1}