/* WB23: profiles and small-screen layout (down to 320px). Loaded last.
   Layout/spacing only; colours come from the theme tokens. Text sizes: 20/24/36. */

/* ---------- Shared: grids use gap only (no sibling margins inside grids) ---------- */
.split>*+*,.grid>*+*,.split>.surface+.surface,.grid>.surface+.surface,.name-fields>.field+.field{margin-top:0}
.name-fields{gap:16px}
p.muted+.name-fields{margin-top:12px}
.list{grid-template-columns:minmax(0,1fr)}
/* Side-by-side fields must not inherit the stacked .field+.field offset. */
.calendar-time .field+.field,.timer .field+.field,.library-filters .field+.field{margin-top:0}
.calendar-time{align-items:flex-start}
.datetime-picker{grid-template-columns:minmax(0,1fr)}
.datetime-picker>*,.datetime-calendar{min-width:0;max-width:100%}
.name-fields+.field,.field+p.muted{margin-top:16px}

/* ---------- Teacher: desktop sidebar spacing ---------- */
#teacher-feedback{margin-top:24px}
.sidebar-logout{margin-top:12px}

/* ---------- Teacher: profile ---------- */
#profile-form>.btn,#password-form>.btn{margin-top:16px}
#profile-form>p.muted{margin-bottom:0}

/* ---------- Teacher: library ---------- */
.library-filters{align-items:flex-end}
.library-filters .field{flex:0 1 260px}
.library-info .type-icon{margin-bottom:8px}
.library-row .actions{gap:10px}

/* ---------- Teacher mobile (≤760px) ---------- */
@media(max-width:760px){
  /* Compact header: brand / 2x2 sections / feedback + logout in one row. */
  .sidebar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 16px}
  .sidebar .brand{grid-column:1/-1;padding:0 4px;font-size:24px}
  .sidebar .nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible}
  .sidebar .nav button{white-space:normal;overflow-wrap:anywhere;text-align:center;padding:8px 6px;min-height:48px;line-height:1.2;display:flex;align-items:center;justify-content:center}
  .sidebar .nav button[aria-current=page]{border-left:0}
  #teacher-feedback,.sidebar-logout{margin:0;min-height:44px;padding:6px 10px;line-height:1.2}
  #teacher-feedback{justify-self:stretch}
  .sidebar>.field{grid-column:1/-1;margin-top:0!important}

  .split{grid-template-columns:minmax(0,1fr)}
  .content{padding:18px 14px 48px}
  .page-head{margin-bottom:18px}
  .page-head>.actions{width:100%}
  .page-head>.actions>.btn{flex:1 1 auto}

  /* Library rows: info full width, actions wrap below, × stays top-right. */
  .library-row.surface{padding-right:18px}
  .library-info{flex:1 1 100%}
  .library-row .actions{margin-left:0;width:100%}
  .library-row .actions>.btn{flex:1 1 auto}
  .library-row .trash-cross{top:14px;right:14px}
  .library-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
  .library-filters .field{min-width:0}

  /* Releases: filters pair up, separator hidden. */
  .release-filters{gap:8px}
  .release-filters .btn{padding:8px 12px}
  .filter-separator{display:none}
  .draft-filter-group{display:contents}
  article.surface>.row>.btn{flex:1 1 auto}

  /* Wizard. */
  .type-options{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .type-options button{width:100%;justify-content:flex-start;text-align:left;overflow-wrap:anywhere}
  .timer-presets{gap:8px}
  .calendar-time{flex-wrap:wrap}
  .datetime-calendar{padding:12px}
  .recipient-option{min-width:0}

  /* Classes and tables. */
  #class-add{align-items:flex-end}
  #class-add>.field{flex:1 1 180px!important;min-width:0}
  #class-add>.btn{flex:1 1 auto}
  .list-item.row>.actions,.list-item>.actions{width:100%}
  .list-item .actions>.btn{flex:1 1 auto}
  .table-wrap{max-width:100%}
  .content .list-item{overflow-wrap:anywhere}
  .content .row>div{min-width:0}
}

@media(max-width:400px){
  .wizard-top .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wizard-top .actions>.btn{padding:8px 10px;white-space:normal;line-height:1.25}
  .calendar-days{gap:2px}
  .calendar-month strong{flex:1 1 auto;min-width:0;text-align:center}
  .calendar-month .btn{min-width:44px;padding:4px}
  .datetime-calendar{padding:10px}
  .calendar-day{padding:4px 0}
  .calendar-quick .btn{flex:1 1 auto}
  .summary{padding:12px}
  .pad,.wizard .step{padding:16px}
}

/* ---------- Student ---------- */
.student-hero>div{flex:1 1 300px;min-width:0}
.student-hero>.pet-card{flex:0 0 auto}
.level-progress{width:100%}
.level-dots{margin:16px 0 0}
.locked-level{align-items:center;flex-wrap:wrap;margin:12px 0}
.locked-level>span{color:var(--muted)}
.unlocked-level{margin:20px 0}
.cat-choice{min-width:0}
.cat-choice canvas{aspect-ratio:260/300;height:auto;display:block;margin-inline:auto}

@media(max-width:760px){
  .student-hero{padding:20px;gap:16px;margin:20px 0}
  .student-hero>div{flex:1 1 100%}
  .student-hero>.pet-card{margin-inline:auto}
  .cat-choice{gap:14px}
  .cat-choice canvas{width:96px;flex:none;margin:0}
}

@media(max-width:480px){
  .student-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
  .student-nav .btn{min-height:44px;padding:8px 10px}
  .student-nav #student-feedback{grid-column:1/-1}
  .student-hero{padding:16px;border-radius:22px}
  .student-hero>div>h2:first-child{font-size:24px}

  /* Pet card scales with the card width; overlays keep their corners. */
  .pet-card{width:100%;max-width:300px;min-height:0;aspect-ratio:300/265}
  .pet-card canvas{width:64%;height:auto;aspect-ratio:260/300;margin:0 0 0 2%}
  .pet-blob{inset:8% 2% 6% 2%}
  .cup-count{right:0;top:6%}
  .cup-count svg{width:52px;height:56px}
  .hand-note{right:0;bottom:6%;width:36%;font-size:20px}

  .level-dots{gap:4px}
  .student-card .release-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
  .student-card .release-filters .btn{flex:1 1 auto;padding:8px 12px;min-height:44px;overflow-wrap:normal;word-break:normal}
  .student-assignment .type-icon{align-self:flex-start}
  .locked-level{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;margin:10px 0}
}

@media(max-width:340px){
  .content{padding-inline:10px}
  .content .pad,.wizard .step{padding:14px}
  .content .list-item{padding:12px}
  .content .btn{padding:8px 12px;overflow-wrap:anywhere}
  .sidebar{padding:10px}
  .wizard-top .actions{grid-template-columns:minmax(0,1fr)}
  .level-dots li{width:34px;height:34px}
  .level-dots::before{left:17px;right:17px}
  .student-hero{padding:14px}
  .cat-choice{padding:12px}
  .cat-choice canvas{width:80px}
  .student-wrap{padding-inline:8px}
}