/* My Homework (student/homework.html). Mobile first: everything below is
   for a 320px phone; the one media query only adds room on wider screens.
   Colours come from app-shared.css's page-family tokens, which tokens.css
   remaps for light mode, so both themes follow without extra rules. */

.hw-main [hidden]{display:none!important;}

.topnav .hw-topbar-title{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--gold);flex:1;min-width:0;
}
.topnav .hw-topbar-link{font-size:.82rem;color:var(--muted);padding:.4rem .6rem;border-radius:var(--r);}
.topnav .hw-topbar-link:hover,.topnav .hw-topbar-link:focus-visible{color:var(--white);background:var(--navy3);}

.hw-main{max-width:40rem;margin:0 auto;padding:1.25rem 1rem 3rem;}

.hw-h1{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.2;margin-bottom:.35rem;}
.hw-lede{color:var(--muted);font-size:.9rem;margin-bottom:1rem;}
.hw-summary{font-size:.92rem;margin-bottom:1rem;}
.hw-summary strong{color:var(--gold);}

/* Notices: offline / last saved copy / could not refresh. */
.hw-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  font-size:.85rem;padding:.7rem .9rem;margin-bottom:1rem;
  border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:var(--r);background:var(--navy2);
}
.hw-note-error{border-left-color:var(--red);}
.hw-note p{flex:1 1 12rem;}

.hw-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.55rem 1.1rem;border-radius:var(--r);font-size:.88rem;font-weight:600;
  background:var(--gold);color:var(--navy);border:1px solid var(--gold);
  transition:transform .25s var(--spring-out),background .2s;
}
.hw-btn:hover{background:var(--gold2);}
.hw-btn:active{transform:scale(.96);}
.hw-btn-quiet{background:transparent;color:var(--white);border-color:var(--border);}
.hw-btn-quiet:hover{background:var(--navy3);}
[data-theme="light"] .hw-btn{background:var(--ia-gold);border-color:var(--ia-gold-dark);color:var(--ia-text);}
[data-theme="light"] .hw-btn-quiet{background:transparent;border-color:var(--ia-border-strong);color:var(--ia-text);}

/* Loading: three quiet placeholder cards, no spinner storm. */
.hw-skeleton{list-style:none;}
.hw-skeleton li{
  height:4.75rem;margin-bottom:.6rem;border-radius:var(--r);
  background:var(--navy2);border:1px solid var(--border);
  animation:hw-pulse 1.4s ease-in-out infinite;
}
@keyframes hw-pulse{50%{opacity:.55;}}
@media (prefers-reduced-motion:reduce){.hw-skeleton li{animation:none;}}

/* Empty / signed out / no data. */
.hw-panel{
  text-align:center;padding:2rem 1.25rem;border-radius:var(--r);
  background:var(--navy2);border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--card-3d-top,rgba(255,255,255,.05)),inset 0 -2px 0 var(--card-3d-bottom,rgba(0,0,0,.2));
}
.hw-panel h2{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.4rem;}
.hw-panel p{color:var(--muted);font-size:.9rem;margin-bottom:1rem;}

/* The list. */
.hw-group{margin-bottom:1.5rem;}
.hw-group-h{
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem;
}
.hw-list{list-style:none;}
.hw-list li{margin-bottom:.6rem;}
.hw-card{
  display:grid;grid-template-columns:1fr auto;gap:.25rem .75rem;align-items:start;
  padding:.85rem 1rem;min-height:44px;border-radius:var(--r);
  background:var(--navy2);border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--card-3d-top,rgba(255,255,255,.05)),inset 0 -2px 0 var(--card-3d-bottom,rgba(0,0,0,.2));
  transition:transform .3s var(--spring-out),border-color .2s;
}
.hw-card:hover{border-color:var(--gold);}
.hw-card:active{transform:scale(.98);}
.hw-card-missing{border-left:3px solid var(--red);}
.hw-card-title{font-weight:700;font-size:.98rem;line-height:1.35;overflow-wrap:anywhere;}
.hw-card-meta{grid-column:1 / -1;font-size:.8rem;color:var(--muted);}
.hw-card-due{grid-column:1 / -1;font-size:.82rem;}
.hw-card-missing .hw-card-due{color:var(--red);font-weight:600;}
[data-theme="light"] .hw-card-missing .hw-card-due{color:var(--ia-red);}
.hw-pill{white-space:nowrap;align-self:start;}

.hw-more{font-size:.82rem;color:var(--muted);margin-top:.25rem;}
.hw-updated{font-size:.78rem;color:var(--muted);margin-top:1.5rem;text-align:center;}

@media (min-width:640px){
  .hw-main{padding:2rem 1.5rem 4rem;}
  .hw-h1{font-size:2rem;}
}