/* APU Schedule Builder — core UI.
 *
 * A planning workspace: dense with information, so the design leans on a small
 * type scale, hairline rules and a single accent colour rather than heavy
 * borders and bold weights. Colour is reserved for meaning — accent for the
 * active plan, green for locked classes, amber for previews, red for problems.
 */

/* Two themes, one voice. Dusk (dark) is warm charcoal with an apricot accent;
 * Paper (light) is a warm off-white catalogue with deep green. Both share the
 * type scale and the serif headings, so switching does not feel like a
 * different product — only the light changes. */

:root{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  font-size:16px;
  line-height:1.5;
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;

  /* Titles that name a thing; data stays sans. */
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif JP","Yu Mincho",serif;

  /* Type scale */
  --fs-micro:11px;
  --fs-meta:12px;
  --fs-body:13px;
  --fs-title:14px;
  --fs-head:16px;
  --fs-brand:20px;

  /* Dusk */
  --bg:#17161a;
  --surface:#1e1d22;
  --surface-2:#25242a;
  --surface-3:#2e2c34;
  --surface-hover:#35333c;
  --ink:#f2efe9;
  --ink-2:#c4bfb6;
  --muted:#948e86;
  --faint:#6d675f;
  --line:#2e2c34;
  --line-strong:#403d47;
  --line-focus:#e8975a;
  --grid:#2a2930;
  --grid-strong:#3a3841;
  --grid-header:#221f26;

  --accent:#e8975a;
  --accent-strong:#f3ac74;
  --accent-soft:#3a2a1e;
  --accent-soft-2:#4a3626;
  --on-accent:#1a1207;

  --green:#7fbf7a;--green-soft:#22301f;
  --red:#e8796f;--red-soft:#361f1d;
  --amber:#dcc06a;--amber-soft:#332c19;
  --purple:#b09ae0;--purple-soft:#2a2438;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.3);
}

html[data-theme="light"]{
  color-scheme:light;

  /* Paper */
  --bg:#f6f4ef;
  --surface:#fffefb;
  --surface-2:#f2efe8;
  --surface-3:#eae6dc;
  --surface-hover:#e8e3d8;
  --ink:#1c1a16;
  --ink-2:#46423a;
  --muted:#7c7669;
  --faint:#a49d8e;
  --line:#e3ded2;
  --line-strong:#cdc6b5;
  --line-focus:#17695a;
  --grid:#e6e1d5;
  --grid-strong:#cdc6b5;
  --grid-header:#f2efe8;

  --accent:#17695a;
  --accent-strong:#0f5245;
  --accent-soft:#e6efea;
  --accent-soft-2:#d6e6df;
  --on-accent:#fffefb;

  --green:#3f6b32;--green-soft:#e9f0e4;
  --red:#9d3327;--red-soft:#f8e9e6;
  --amber:#8a5a1a;--amber-soft:#f6eddc;
  --purple:#5a4a86;--purple-soft:#eeeaf4;

  --radius-sm:5px;
  --radius:8px;
  --radius-lg:10px;
  --shadow:0 12px 34px rgba(60,50,30,.16);
  --shadow-sm:0 1px 3px rgba(60,50,30,.07);
}

/* ── base ─────────────────────────────────────────────────────────────── */

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-width:320px;background:var(--bg);color:var(--ink);font-size:var(--fs-body)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.hidden{display:none!important}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--line-focus);outline-offset:2px;border-radius:var(--radius-sm)
}
.app{height:100vh;display:flex;flex-direction:column;background:var(--bg)}

/* ── top bar ──────────────────────────────────────────────────────────── */

.topbar{
  height:60px;flex:0 0 auto;padding:0 20px;gap:16px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:11px}
.logo{
  width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em
}
.brand h1{margin:0;font-size:var(--fs-brand);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.brand small{display:block;color:var(--muted);font-size:var(--fs-micro);margin-top:2px;font-weight:400}
.top-actions{display:flex;align-items:center;gap:8px}
.top-chip,.top-button{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius);
  padding:7px 11px;font-size:var(--fs-meta);font-weight:500;color:var(--ink-2);white-space:nowrap
}
.top-chip.good{background:var(--green-soft);border-color:transparent;color:var(--green)}
.top-button:hover{background:var(--surface-hover);border-color:var(--line-strong)}
.theme-button{display:flex;align-items:center;gap:7px}
.theme-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-2)}

.primary-button{
  background:var(--accent);color:var(--on-accent);border-radius:var(--radius);
  padding:9px 14px;font-size:var(--fs-body);font-weight:600;white-space:nowrap
}
.primary-button:hover{background:var(--accent-strong)}
.primary-button:disabled{opacity:.4;cursor:not-allowed}
.secondary-button{
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  border-radius:var(--radius);padding:8px 12px;font-size:var(--fs-meta);
  font-weight:500;white-space:nowrap
}
.secondary-button:hover{background:var(--surface-hover);border-color:var(--line-strong);color:var(--ink)}

/* ── workspace shell ──────────────────────────────────────────────────── */

.workspace{
  min-height:0;flex:1;display:grid;grid-template-columns:400px minmax(700px,1fr);
  gap:1px;background:var(--line)
}
.sidebar{background:var(--surface);display:flex;flex-direction:column;min-height:0;min-width:0}
.sidebar-tabs{
  height:48px;flex:0 0 auto;display:flex;gap:4px;padding:8px 12px;
  background:var(--surface);border-bottom:1px solid var(--line)
}
.sidebar-tab{
  flex:1;border-radius:var(--radius-sm);color:var(--muted);
  font-size:var(--fs-body);font-weight:500
}
.sidebar-tab:hover{color:var(--ink);background:var(--surface-2)}
.sidebar-tab.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.sidebar-body{min-height:0;display:flex;flex-direction:column;background:var(--surface)}

/* ── search and filters ───────────────────────────────────────────────── */

.search-wrap{padding:12px;flex:0 0 auto;border-bottom:1px solid var(--line);background:var(--surface)}
.search{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 11px;background:var(--surface-2);color:var(--ink);font-size:var(--fs-body);outline:none
}
.search::placeholder{color:var(--faint)}
.search:focus{border-color:var(--line-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--line-focus) 18%,transparent)}
.slot-filter{
  margin-top:8px;padding:8px 10px;border-radius:var(--radius);
  background:var(--accent-soft);color:var(--accent-strong);font-size:var(--fs-meta);
  display:flex;align-items:center;justify-content:space-between;gap:8px
}
.slot-filter button{color:var(--accent-strong);font-weight:600;font-size:var(--fs-meta)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.filters select{
  min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 9px;background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-meta)
}
.filter-line{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.filter-line,.filter-line label,.check-line{color:var(--muted);font-size:var(--fs-meta)}
.filter-line label,.check-line{display:flex;align-items:center;gap:7px}
.filter-line input,.check-line input{accent-color:var(--accent)}
.list-summary{
  padding:9px 12px;flex:0 0 auto;color:var(--muted);font-size:var(--fs-meta);
  background:var(--surface);border-bottom:1px solid var(--line)
}

/* ── course list ──────────────────────────────────────────────────────── */

.course-list,.my-list{overflow:auto;min-height:0;padding:12px;background:var(--bg)}
.subject-group{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  overflow:hidden;margin-bottom:10px
}
.subject-group:hover{border-color:var(--line-strong)}
.subject-head{padding:12px 13px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.subject-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.subject-title{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.subject-credits{
  flex:0 0 auto;background:var(--surface-3);color:var(--ink-2);border-radius:999px;
  padding:3px 8px;font-size:var(--fs-micro);font-weight:500;white-space:nowrap
}
.subject-meta{font-size:var(--fs-micro);color:var(--muted);margin-top:5px;display:flex;gap:6px;flex-wrap:wrap}
.subject-meta .class-count{color:var(--accent-strong);font-weight:500}
.class-list{padding:10px;display:grid;gap:8px;background:var(--surface)}

.class-card{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 12px;background:var(--surface-2);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;
  transition:border-color .12s,background .12s
}
.class-card::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;
  border-radius:0 2px 2px 0;background:transparent
}
.class-card:hover{border-color:var(--line-strong);background:var(--surface-hover)}
.class-card:hover::before{background:var(--line-strong)}
.class-card.disabled{opacity:.5}
.class-card.selected{border-color:var(--accent);background:var(--accent-soft)}
.class-card.selected::before{background:var(--accent)}
.class-card.locked{border-color:var(--green);background:var(--green-soft)}
.class-card.locked::before{background:var(--green)}
.class-card.is-linked{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}

.class-card-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.class-name{font-size:var(--fs-body);font-weight:600}
.class-code{
  display:inline-flex;align-items:center;background:var(--surface-3);color:var(--ink-2);
  border-radius:var(--radius-sm);padding:2px 7px;font-size:var(--fs-micro);
  font-weight:500;font-variant-numeric:tabular-nums
}
.class-lock{color:var(--green);font-size:var(--fs-micro);font-weight:500}
.class-teacher{font-size:var(--fs-meta);color:var(--muted);margin-top:5px}
.class-meetings{
  margin-top:8px;border-radius:var(--radius-sm);padding:7px 9px;
  background:var(--bg);color:var(--ink-2);font-size:var(--fs-meta);font-weight:500
}
.meeting-label{color:var(--muted);font-weight:400;margin-right:6px}
.class-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.tag{
  font-size:var(--fs-micro);border-radius:999px;padding:2px 8px;
  background:var(--surface-3);color:var(--muted);font-weight:500
}
.tag.q{background:var(--purple-soft);color:var(--purple)}
.tag.lang{background:var(--accent-soft);color:var(--accent-strong)}
.tag.warn{background:var(--amber-soft);color:var(--amber)}

.class-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:78px}
.class-action{
  min-width:78px;border-radius:var(--radius-sm);padding:7px 10px;
  background:var(--accent);color:var(--on-accent);
  font-size:var(--fs-meta);font-weight:600;white-space:nowrap
}
.class-action:hover{background:var(--accent-strong)}
.class-action.remove{background:var(--red-soft);color:var(--red)}
.class-action:disabled{background:var(--surface-3);color:var(--faint);cursor:not-allowed}
.syllabus-action{
  min-width:78px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:7px 10px;background:transparent;color:var(--ink-2);
  font-size:var(--fs-meta);font-weight:500;white-space:nowrap
}
.syllabus-action:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--surface-hover)}
.reason{font-size:var(--fs-micro);color:var(--red);margin-top:6px}
.empty{
  padding:40px 18px;text-align:center;color:var(--muted);font-size:var(--fs-body);
  border:1px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface)
}
.empty-inline{font-size:var(--fs-meta);color:var(--faint)}

/* ── my courses ───────────────────────────────────────────────────────── */

.my-section-title{
  padding:12px 2px 8px;color:var(--muted);font-size:var(--fs-micro);
  font-weight:600;text-transform:uppercase;letter-spacing:.07em
}
.my-card{
  margin-bottom:8px;border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;background:var(--surface-2)
}
.my-card.locked{background:var(--green-soft);border-color:var(--green)}
.my-card strong{font-size:var(--fs-body);font-weight:600}
.my-card span{display:block;font-size:var(--fs-meta);color:var(--muted);margin-top:4px}
.my-card button{
  background:var(--red-soft);color:var(--red);border-radius:var(--radius-sm);
  font-size:var(--fs-meta);font-weight:500;padding:5px 9px;align-self:start
}
.my-card.is-linked{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}

/* ── schedule pane ────────────────────────────────────────────────────── */

.main{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.main-head{
  min-height:68px;padding:12px 16px;flex:0 0 auto;gap:14px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);border-bottom:1px solid var(--line)
}
.plan-title{display:flex;align-items:center;gap:12px}
.plan-title h2{margin:0;font-size:var(--fs-head);font-weight:600;letter-spacing:-.01em}
.plan-metrics{display:flex;gap:6px;align-items:center}
.metric{padding:6px 11px;border-radius:var(--radius);background:var(--surface-2);min-width:70px;white-space:nowrap}
.metric strong{display:block;font-size:var(--fs-title);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.metric span{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:1px;white-space:nowrap}
.quarter-switch{display:flex;border-radius:var(--radius);background:var(--surface-2);padding:3px}
.quarter-switch button{
  border-radius:var(--radius-sm);padding:6px 13px;
  font-size:var(--fs-meta);font-weight:500;color:var(--muted)
}
.quarter-switch button.active{background:var(--accent);color:var(--on-accent);font-weight:600}
.main-actions{display:flex;gap:8px}

/* ── calendar ─────────────────────────────────────────────────────────── */

.calendar-area{min-height:0;flex:1;padding:16px;overflow:auto;background:var(--bg)}
.calendar-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;min-height:100%
}
.calendar-help{
  min-height:40px;padding:9px 14px;gap:12px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--muted);font-size:var(--fs-meta);
  background:var(--surface-2);border-bottom:1px solid var(--line)
}
.calendar-help strong{color:var(--ink-2);font-weight:500}

.calendar{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--surface)}
.calendar th{
  height:38px;background:var(--grid-header);border:1px solid var(--grid);border-top:0;
  color:var(--ink-2);font-size:var(--fs-meta);font-weight:600
}
.calendar th:first-child{width:58px;border-left:0}
.calendar th:last-child{border-right:0}
.calendar td{
  height:108px;border:1px solid var(--grid);vertical-align:top;position:relative;
  padding:6px;background:var(--surface)
}
.calendar tbody tr:last-child td{border-bottom:0}
.calendar td:first-child{border-left:0}
.calendar td:last-child{border-right:0}
.calendar tbody tr:nth-child(even) .slot:not(.blocked){background:var(--surface-2)}
.period{
  background:var(--grid-header)!important;text-align:center;color:var(--muted);
  font-size:var(--fs-meta);font-weight:600;padding-top:12px!important
}
.period::after{content:"";display:block;width:16px;height:1px;background:var(--grid-strong);margin:8px auto 0}

.slot{transition:background .12s,box-shadow .12s}
.slot.empty-slot:hover{background:var(--accent-soft)!important;box-shadow:inset 0 0 0 1px var(--accent)}
.slot.blocked{
  background:repeating-linear-gradient(135deg,var(--surface-3) 0,var(--surface-3) 7px,var(--surface) 7px,var(--surface) 14px)!important
}
/* The localized labels come from the markup, so the CSS stays language-neutral. */
.slot.blocked::after{
  content:attr(data-blocked-label);position:absolute;inset:0;display:grid;place-items:center;
  color:var(--muted);font-size:var(--fs-micro);font-weight:500
}
.slot.blocked:hover::after{content:attr(data-unblock-label);color:var(--ink-2)}
.slot.slot-active{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)!important}
.slot-hint{
  opacity:0;background:transparent;color:var(--accent-strong);font-size:var(--fs-micro);
  font-weight:500;position:absolute;inset:0;width:100%;height:100%
}
.empty-slot:hover .slot-hint{opacity:1}

.meeting-card{
  position:relative;border-radius:var(--radius-sm);background:var(--accent-soft);
  padding:8px 9px 8px 11px;margin-bottom:5px;min-height:70px;cursor:pointer;overflow:hidden
}
.meeting-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.meeting-card:hover{background:var(--accent-soft-2)}
.meeting-card.locked{background:var(--green-soft)}
.meeting-card.locked::before{background:var(--green)}
.meeting-card.preview{background:var(--amber-soft);outline:1px dashed var(--amber);outline-offset:-2px}
.meeting-card.preview::before{background:var(--amber)}
.meeting-card.active,.meeting-card.is-linked{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.meeting-card strong{display:block;font-size:var(--fs-micro);line-height:1.35;font-weight:600;color:var(--ink)}
.meeting-card span{
  display:inline-block;font-size:var(--fs-micro);color:var(--muted);margin-top:5px;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:1px 6px;font-weight:500
}

.slot-popover{
  position:absolute;z-index:20;left:6px;right:6px;top:6px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px
}
.slot-popover strong{display:block;font-size:var(--fs-meta);font-weight:600;margin:1px 3px 7px}
.slot-popover button{
  width:100%;border-radius:var(--radius-sm);padding:8px;text-align:left;
  font-size:var(--fs-meta);font-weight:500;color:var(--ink-2);
  background:var(--surface-2);margin-top:4px
}
.slot-popover button:hover{background:var(--surface-hover);color:var(--ink)}
.slot-popover button:first-of-type{background:var(--accent-soft);color:var(--accent-strong)}

/* ── drawers ──────────────────────────────────────────────────────────── */

.drawer{
  position:fixed;top:0;right:-430px;width:410px;height:100vh;background:var(--surface);
  border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:60;
  transition:right .2s ease;display:flex;flex-direction:column
}
.drawer.open{right:0}
.drawer-head{
  height:60px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);border-bottom:1px solid var(--line)
}
.drawer-head strong{font-size:var(--fs-head);font-weight:600}
.icon-button{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-sm);
  width:30px;height:30px;color:var(--ink-2);font-size:var(--fs-body)
}
.icon-button:hover{background:var(--surface-hover);color:var(--ink)}
.drawer-body{padding:18px;overflow:auto}
.drawer-section{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.drawer-section:last-child{border:0;margin-bottom:0;padding-bottom:0}
.drawer-section h3{font-size:var(--fs-body);font-weight:600;margin:0 0 11px}
.drawer-field{margin-bottom:11px}
.drawer-field label{display:block;font-size:var(--fs-meta);font-weight:500;color:var(--muted);margin-bottom:5px}
.drawer-field input,.drawer-field select{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 11px;background:var(--surface-2);color:var(--ink);font-size:var(--fs-body)
}
.drawer-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.status-box{
  padding:9px 11px;border-radius:var(--radius);background:var(--surface-2);
  color:var(--muted);font-size:var(--fs-meta);white-space:pre-wrap
}
.status-box.ok{background:var(--green-soft);color:var(--green)}
.status-box.err{background:var(--red-soft);color:var(--red)}
.fixed-add{display:flex;gap:8px}
.fixed-add input{min-width:0;flex:1}
.fixed-list{margin-top:8px;display:grid;gap:6px}
.fixed-chip{
  padding:8px 10px;background:var(--green-soft);border-radius:var(--radius-sm);
  font-size:var(--fs-meta);display:flex;justify-content:space-between;gap:8px;align-items:center
}
.fixed-chip button{color:var(--red);font-weight:600;font-size:var(--fs-body)}
.danger-note{
  background:var(--amber-soft);color:var(--amber);border-radius:var(--radius);
  padding:9px 11px;font-size:var(--fs-meta)
}
.drawer-help{margin-top:9px;font-size:var(--fs-meta);color:var(--muted)}

.detail-title{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.detail-sub{font-size:var(--fs-meta);color:var(--muted);margin-top:5px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.detail-item{background:var(--surface-2);border-radius:var(--radius);padding:10px 11px}
.detail-item span{display:block;color:var(--muted);font-size:var(--fs-micro)}
.detail-item strong{display:block;font-size:var(--fs-body);font-weight:600;margin-top:3px}
.detail-meetings{margin-top:16px}
.detail-meeting{
  padding:9px 11px;background:var(--surface-2);border-radius:var(--radius);
  margin-top:6px;font-size:var(--fs-meta)
}
.drawer-actions{display:flex;gap:8px;margin-top:16px}
.drawer-actions button{
  flex:1;border-radius:var(--radius);padding:10px;font-size:var(--fs-body);
  font-weight:600;background:var(--surface-2);color:var(--ink-2)
}
.drawer-actions button:hover{background:var(--surface-hover)}
.drawer-actions .add{background:var(--accent);color:var(--on-accent)}
.drawer-actions .add:hover{background:var(--accent-strong)}
.drawer-actions .remove{background:var(--red-soft);color:var(--red)}

/* ── suggestions and toast ────────────────────────────────────────────── */

.suggestions{
  position:fixed;left:420px;right:18px;bottom:18px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);z-index:35;padding:13px 14px
}
.suggest-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.suggest-head strong{font-size:var(--fs-body);font-weight:600}
.suggest-head span{font-size:var(--fs-meta);color:var(--muted)}
.suggest-list{display:flex;gap:8px;margin-top:10px}
.suggestion{
  flex:1;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px
}
.suggestion strong{font-size:var(--fs-body);font-weight:600}
.suggestion span{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:2px}
.suggestion button{
  background:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm);
  padding:7px 11px;font-size:var(--fs-meta);font-weight:600;white-space:nowrap
}
.suggestion button:hover{background:var(--accent-strong)}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:var(--radius);
  font-size:var(--fs-body);font-weight:500;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:100;box-shadow:var(--shadow)
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.error{background:var(--red);color:#fff}

@media(max-width:1240px){
  .workspace{grid-template-columns:360px minmax(700px,1fr)}
  .metric:nth-child(n+4){display:none}
  .suggestions{left:380px}
}

/* ── themes ───────────────────────────────────────────────────────────── */

.brand h1,.plan-title h2,.subject-title,.detail-title,.drawer-head strong{
  font-family:var(--font-display);font-weight:600;letter-spacing:0
}
.detail-title{font-size:19px}

/* Paper leans on hairlines and outlines: it should read like print. */
html[data-theme="light"] .topbar{border-bottom-color:var(--line-strong)}
html[data-theme="light"] .subject-group{border-color:var(--line-strong)}
html[data-theme="light"] .class-card{background:var(--surface)}
html[data-theme="light"] .class-meetings{background:var(--surface-2)}
html[data-theme="light"] .calendar-card{border-color:var(--line-strong)}
html[data-theme="light"] .calendar th{background:var(--surface-2)}
html[data-theme="light"] .tag{background:transparent;border:1px solid var(--line-strong)}
html[data-theme="light"] .tag.q{border-color:color-mix(in srgb,var(--purple) 40%,var(--line-strong))}
html[data-theme="light"] .tag.lang{border-color:color-mix(in srgb,var(--accent) 40%,var(--line-strong))}
html[data-theme="light"] .tag.warn{border-color:color-mix(in srgb,var(--amber) 45%,var(--line-strong))}
html[data-theme="light"] .quick-filters button{background:transparent;border:1px solid var(--line-strong)}
html[data-theme="light"] .quick-filters button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
html[data-theme="light"] .quick-filters .filter-more{background:var(--surface-3)}

/* Dusk drops most borders and softens the corners instead. */
html:not([data-theme="light"]) .class-card{border-color:transparent;background:var(--surface-3)}
html:not([data-theme="light"]) .class-card:hover{background:var(--surface-hover)}
html:not([data-theme="light"]) .class-meetings{background:rgba(0,0,0,.22)}
html:not([data-theme="light"]) .toast{background:var(--surface-3);color:var(--ink)}

/* Dusk's accent is warm, so review data drops its amber fill and keeps only
 * the gold star — otherwise A+ badges read as another apricot control. */
html:not([data-theme="light"]) .aplus-badge{background:var(--surface-2)}
html:not([data-theme="light"]) .aplus-badge:hover{background:var(--surface-hover)}

/* ── help drawer ──────────────────────────────────────────────────────── */

.help-text{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--ink-2)}
.help-list{margin:10px 0 0;padding-left:20px;display:grid;gap:7px}
.help-list li{font-size:var(--fs-meta);line-height:1.55;color:var(--ink-2)}
.help-list li::marker{color:var(--muted)}
.help-list.warn li::marker{color:var(--amber)}

/* ── profile summary ──────────────────────────────────────────────────── */

.profile-summary{display:grid;gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden}
.profile-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 11px;background:var(--surface-2)
}
.profile-row span{font-size:var(--fs-meta);color:var(--muted)}
.profile-row strong{font-size:var(--fs-body);font-weight:600;text-align:right}
.setup-callout{
  background:var(--accent-soft);border-radius:var(--radius);padding:14px;
  border-bottom:0;margin-bottom:18px
}
.setup-callout h3{margin-top:0;color:var(--accent-strong)}
.setup-callout .drawer-actions{margin-top:12px}

/* ── phones ───────────────────────────────────────────────────────────────
 * The list and the grid cannot share a phone screen, so one is shown at a
 * time and a segmented bar switches between them. Everything else keeps the
 * desktop behaviour, including the drawers, which become full-width sheets. */

.mobile-views{display:none}

@media(max-width:880px){
  .app{height:100dvh}

  .topbar{height:auto;min-height:56px;padding:9px 12px;gap:8px;flex-wrap:wrap}
  .brand small{display:none}
  .brand h1{font-size:17px}
  .logo{width:30px;height:30px}
  #dataBadge{display:none}
  .top-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .top-chip,.top-button{padding:8px 10px}

  .mobile-views{
    display:flex;align-items:center;gap:6px;padding:8px 12px;flex:0 0 auto;
    background:var(--surface);border-bottom:1px solid var(--line)
  }
  .mobile-views button{
    flex:1;padding:10px;border-radius:var(--radius-sm);
    background:var(--surface-2);color:var(--muted);
    font-size:var(--fs-body);font-weight:500
  }
  .mobile-views button.active{background:var(--accent);color:var(--on-accent);font-weight:600}
  .mobile-credits{
    flex:0 0 auto;padding-left:6px;color:var(--ink-2);
    font-size:var(--fs-meta);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap
  }

  .workspace{grid-template-columns:1fr;gap:0}
  body[data-mobile-view="schedule"] .sidebar{display:none}
  body[data-mobile-view="courses"] .main{display:none}

  /* Full-width sheets instead of side panels. */
  .drawer{width:100%;right:-100%;box-shadow:none}
  .drawer-body{padding:16px 14px}
  .drawer-row{grid-template-columns:1fr}

  /* Actions move under the class name so the title keeps the full width. */
  .class-card{grid-template-columns:1fr;gap:10px}
  .class-actions{flex-direction:row;min-width:0}
  .class-action,.syllabus-action{flex:1;min-width:0;padding:10px}
  .sidebar-tab{padding:10px}
  .quick-filters button{padding:7px 11px;font-size:var(--fs-meta)}

  /* The header is trimmed so the week itself gets the screen. */
  .main-head{min-height:0;padding:8px 12px;gap:8px;flex-wrap:wrap}
  .plan-title h2{display:none}
  .plan-title{flex:1 1 auto;min-width:0}
  .quarter-switch{flex:0 0 auto}
  .plan-metrics{width:100%;min-width:0;gap:4px;overflow-x:auto}
  .metric{flex:0 0 auto;padding:4px 9px;min-width:0}
  .metric strong{font-size:var(--fs-body)}
  .main-actions{width:100%;gap:6px}
  .main-actions button{flex:1}

  /* All five days fit the width, and the rows share whatever height is left,
     so a normal week needs no scrolling in either direction. */
  .calendar-area{padding:8px;display:flex;min-height:0}
  .calendar-card{flex:1;min-height:0;overflow:auto}
  .calendar-help{min-height:0;padding:6px 10px;gap:8px;font-size:var(--fs-micro)}
  .calendar{min-width:0}
  .calendar td{height:calc((100dvh - 405px)/6);min-height:46px}
  .calendar th{height:28px;font-size:var(--fs-micro)}
  .calendar th:first-child{width:30px}
  .calendar td{padding:3px}
  .period{font-size:var(--fs-micro);padding-top:6px!important}
  .period::after{display:none}

  .meeting-card{min-height:0;margin-bottom:3px;padding:4px 5px 4px 7px;border-radius:5px}
  .meeting-card::before{width:2px}
  .meeting-card strong{
    font-size:10px;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
  }
  .meeting-card span{display:none}
  .slot.blocked::after,.slot-hint{font-size:10px}

  .suggestions{left:12px;right:12px;bottom:12px;padding:12px}
  .suggest-list{flex-direction:column}
  .toast{left:12px;right:12px;transform:translateY(20px);text-align:center}
  .toast.show{transform:translateY(0)}
}

@media(max-width:420px){
  .brand h1{font-size:16px}
  .mobile-credits{display:none}
  .filters{grid-template-columns:1fr}
}