/* reqweaver: one accent color, system fonts, light and dark from the
   viewer's setting, usable down to a 360px screen. */

:root {
  --bg: #fbfbfa;
  --surface: #ffffff;
  --raised: #f4f4f6;
  --text: #16171a;
  --muted: #63676e;
  --line: #e3e3e7;
  --accent: #3b53c4;
  --accent-text: #ffffff;
  --accent-soft: #eef1fd;
  --warn-line: #d8a13a;
  --warn-soft: #fdf6e6;
  --radius: 8px;
  --gap: 20px;
  /* why a course is in a plan: one tone per kind of reason */
  --tone-requirement: var(--accent);
  --tone-prerequisite: #2f8a72;
  --tone-banked: #7d55c7;
  --tone-goal: #b45680;
  --tone-interest: #77862c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131417;
    --surface: #1a1c21;
    --raised: #22252b;
    --text: #e9eaee;
    --muted: #9ba1aa;
    --line: #2b2f36;
    --accent: #93a6ff;
    --accent-text: #14161b;
    --accent-soft: #22273a;
    --warn-line: #c9973c;
    --warn-soft: #2a2519;
    --tone-prerequisite: #6ecfae;
    --tone-banked: #b79bf0;
    --tone-goal: #eda2c0;
    --tone-interest: #c2d16d;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h2 { font-size: 1.05rem; margin: 0 0 6px; }
h3 { font-size: 0.9rem; margin: 18px 0 6px; }
p { margin: 6px 0; }
a { color: var(--accent); }

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }

/* --- top bar ----------------------------------------------------------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gap);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { display: flex; flex-direction: column; }
.wordmark { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.tagline { color: var(--muted); font-size: 0.82rem; }

/* --- choosing a school -------------------------------------------------- */

.school-picker { position: relative; min-width: 220px; }
.school-search { width: 100%; }
.school-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.school-picker .school-list:not(:empty) {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.school-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  padding: 6px 8px;
}
.school-row:hover { background: var(--accent-soft); border-color: var(--accent); }
.school-name { font-weight: 550; }
.school-detail { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.layout.single { grid-template-columns: 1fr; max-width: 720px; }
.chooser .search { width: 100%; margin-top: 8px; }
.chooser .school-list { margin-top: 10px; }

.topbar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.run-status { min-width: 0; }

/* --- layout ------------------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}

@media (min-width: 1000px) {
  .layout { grid-template-columns: minmax(340px, 400px) 1fr; }
  .col-profile { position: sticky; top: var(--gap); max-height: calc(100vh - 2 * var(--gap)); overflow-y: auto; }
}

.footer {
  padding: 24px var(--gap) 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

/* --- cards and sections ------------------------------------------------ */

.card, .section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.section-body { margin-top: 10px; }
.card.empty, .card.running { text-align: left; }
.card.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.card.warn ul { margin: 6px 0 0; padding-left: 20px; }
.card.warn li { margin: 4px 0; }
.card.note { border-style: dashed; }
.card.error { border-color: var(--warn-line); }
.card.hints { border-left: 3px solid var(--accent); }
.card.hints ul { margin: 6px 0 0; padding-left: 18px; }
.card.hints li { margin: 4px 0; }
.hint-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0 6px;
}

/* --- controls ---------------------------------------------------------- */

button { font: inherit; cursor: pointer; }

.primary {
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-weight: 550;
}
.primary:disabled { opacity: 0.6; cursor: progress; }

.ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: var(--radius);
  padding: 6px 10px;
  text-decoration: underline;
}
.ghost:hover { color: var(--text); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }

.choice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 12px;
  color: var(--text);
}
.choice.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.select, .input, .yaml {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px;
  max-width: 100%;
}
.yaml { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; margin-top: 8px; }
.input { width: 8rem; }
.goal { width: 100%; }
.range { width: 100%; accent-color: var(--accent); }

.field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.field label { color: var(--muted); font-size: 0.82rem; }

.checks { display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; gap: 8px; align-items: center; }
.check input { accent-color: var(--accent); }

.adder { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.adder summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }

/* --- chips ------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  overflow: hidden;
  max-width: 100%;
}

/* Two lines: the course title, then id / level / credits and the
   markers. The title wraps to two lines before it may ellipsize. */
.chip-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  background: none;
  border: 0;
  color: var(--text);
  padding: 5px 8px;
  text-align: left;
  min-width: 0;
}
.chip-main:hover { background: var(--accent-soft); }
.chip-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--muted); }
.chip-name {
  font-size: 0.82rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 26ch; /* only where no container narrows the chip first */
}
.chip-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.chip-credits {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip-x {
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--muted);
  padding: 0 8px;
}
.chip-x:hover { color: var(--text); background: var(--accent-soft); }

/* why a course is in the plan: a dot always, the word where there is
   room for it */

.why { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.why-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.why-label {
  display: none;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.why-requirement .why-dot { background: var(--tone-requirement); }
.why-prerequisite .why-dot { background: var(--tone-prerequisite); }
.why-banked .why-dot { background: var(--tone-banked); }
.why-goal .why-dot { background: var(--tone-goal); }
.why-interest .why-dot { background: var(--tone-interest); }
.why-swappable .why-dot { background: none; border: 1px dashed var(--muted); }

/* filler: nothing in the plan needs it, so it looks replaceable */
.chip.why-swappable { border-style: dashed; background: none; }

.why-list { margin: 4px 0; padding-left: 18px; }
.why-list li { margin: 3px 0; }

@media (min-width: 1280px) {
  .why-label { display: inline; }
}

/* inside a term cell the dot and its tooltip carry the reason; the
   word would push every chip to a third line and stretch the grid */
.grid-cell .why-label, .grid-cell .issue-label { display: none; }

/* a placement that breaks a rule: marked on the chip, detail in the
   marker's tooltip, nothing blocked */

.issue-mark { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.issue-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn-line);
  flex: 0 0 auto;
}
.issue-label {
  display: none;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warn-line);
  white-space: nowrap;
}
.chip.has-issue { border-color: var(--warn-line); background: var(--warn-soft); }

/* A dual-enrollment course, taken at the partner college: the accent
   edge tells it apart from school courses wherever the chip appears. */
.chip.college { border-left: 3px solid var(--accent); }

@media (min-width: 1280px) {
  .issue-label { display: inline; }
}

.badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--muted);
  white-space: nowrap;
}
.badge.level-ap, .badge.level-ib, .badge.level-college { border-color: var(--accent); color: var(--accent); }

.tag {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 0.82rem;
}
.tag.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* --- picker ------------------------------------------------------------ */

.picker { margin-top: 8px; }
.search {
  font: inherit;
  width: 100%;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.picker-rows {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 8px 0 4px;
}
.picker-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.picker-row:last-child { border-bottom: 0; }
.picker-add {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 3px 10px;
  font-size: 0.8rem;
}
.picker-add.chosen { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.picker-label {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  padding: 2px 0;
}
/* rows stay compact but never cut a title: the name takes the row's
   spare width and wraps as far as it needs */
.picker-label .chip-name {
  max-width: none;
  flex: 1 1 auto;
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* --- catalog panel ------------------------------------------------------ */

.paneswitch { margin-bottom: 10px; }
.pane.hidden { display: none; }

.browse .search { margin-top: 4px; }
.browse-body { margin-top: 8px; }
.browse .group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.browse .group summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}
.browse .group summary::-webkit-details-marker { display: none; }
.browse .group summary::marker { content: ""; }
.browse .group[open] summary, .browse .group summary:hover { background: var(--raised); }
.browse .group-name { font-weight: 550; text-transform: capitalize; }
.browse .group .picker-rows { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
.picker-row.draggable { cursor: grab; }
.pill.placed { border-color: var(--accent); color: var(--accent); font-size: 0.72rem; padding: 1px 8px; white-space: nowrap; }

/* --- results ----------------------------------------------------------- */

.summary { display: flex; flex-wrap: wrap; gap: 20px; }
.summary-line { display: flex; flex-direction: column; }

.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tab {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 6px 14px;
}
.tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.stats { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 8px; }
.stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.stat-label { font-size: 0.8rem; color: var(--muted); }
.stat-note { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.steer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin: 0 0 10px;
}

.diff {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

.bar-indeterminate {
  height: 4px;
  border-radius: 2px;
  background: var(--accent-soft);
  overflow: hidden;
  position: relative;
  margin: 10px 0;
}
.bar-indeterminate::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--accent);
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .bar-indeterminate::after { animation: none; width: 100%; opacity: 0.4; }
}

/* --- term grid --------------------------------------------------------- */

.plan-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.plan-head h2 { margin: 0; }

.grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.grid-head { display: none; }
.grid-row { display: flex; flex-direction: column; gap: 8px; }
.grid-grade { font-weight: 600; margin-top: 8px; }
.grid-cell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface);
}
.grid-cell.empty { opacity: 0.6; }
.grid-cell.drop-over { border-color: var(--accent); background: var(--accent-soft); }
.cell-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.cell-total { font-size: 0.75rem; color: var(--muted); margin-top: 6px; }

/* the rule check's verdict over the grid */
.check-line { font-size: 0.85rem; padding: 4px 0 4px 10px; border-left: 3px solid var(--line); }
.check-line.ok { border-left-color: var(--tone-prerequisite); color: var(--muted); }
.check-line.issues { border-left-color: var(--warn-line); }

/* a capacity issue belongs to the term, so it sits in the cell head */
.cell-issues { font-size: 0.75rem; color: var(--warn-line); margin-bottom: 6px; }

/* an optional term (summer) the profile has not opted into yet */
.grid-cell.optout { border-style: dotted; }

/* terms the "you are here" marker puts behind the student */
.grid-cell.past { background: var(--raised); border-style: dashed; }
.grid-cell.past.now { border-style: solid; border-color: var(--accent); }
.grid-cell.past .chip { opacity: 0.8; }
.cell-phase {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.grid-cell.past.now .cell-phase { color: var(--accent); }

.dropzone {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}
body.dragging .dropzone { border-color: var(--accent); color: var(--accent); }
.dropzone.drop-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* an A/B pair: one course across two terms, drawn as one unit */
.chip.half { border-color: var(--accent); }

@media (min-width: 700px) {
  /* cells grew taller for the two-line chips, so the gutters and the
     grade column tighten to keep the whole grid on a laptop screen */
  .grid-head { display: grid; grid-template-columns: 70px repeat(var(--terms), minmax(0, 1fr)); gap: 6px; }
  .grid-term { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .grid-row { display: grid; grid-template-columns: 70px repeat(var(--terms), minmax(0, 1fr)); gap: 6px; align-items: start; }
  .grid-grade { margin-top: 0; align-self: center; }
  .cell-label { display: none; }
  /* the cell is the width limit here; the title uses all of it */
  .grid-cell .chip-name { max-width: none; }
  .grid-cell .chips { flex-direction: column; align-items: stretch; gap: 4px; }
  .chip.half-a { position: relative; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .chip.half-b { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  /* the connector runs across the cell padding (8px each side), both
     1px cell borders, and the 6px column gap */
  .chip.half-a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    width: 24px;
    border-top: 1px solid var(--accent);
  }
}

/* --- requirement checklist --------------------------------------------- */

.checklist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.req { border-bottom: 1px solid var(--line); }
.req:last-child { border-bottom: 0; }
.req-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(60px, 8rem) auto;
  gap: 10px;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.88rem;
  list-style: none;
}
.req-row::-webkit-details-marker { display: none; }
.req-row::marker { content: ""; }
.req[open] .req-row, .req-row:hover { background: var(--raised); }
.req-label { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-count { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { display: block; height: 4px; background: var(--raised); border-radius: 2px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); }
.req.short .bar-fill { background: var(--warn-line); }
.req-detail { padding: 2px 10px 10px; }
.req-detail .chips { margin-bottom: 6px; }

@media (max-width: 520px) {
  .req-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar { grid-column: 1 / -1; grid-row: 2; }
}

/* --- save and share ----------------------------------------------------- */

.save-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.save-name { width: min(100%, 18rem); }
.save-row {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 8px;
}
.save-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.save-name-text { font-weight: 550; }
.save-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  margin: 4px 0;
}

/* the read-only page behind a shared link */
.shared { padding: var(--gap); }
.shared .card { max-width: 1100px; }

/* --- course dialog ----------------------------------------------------- */

.sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(680px, 94vw);
  max-height: 86vh;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
.sheet-close-row { display: flex; justify-content: flex-end; padding: 8px 8px 0; }
.sheet-body { padding: 0 20px 24px; overflow-y: auto; max-height: calc(86vh - 48px); }
.sheet-head { margin-bottom: 10px; }
.sheet-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--muted); }
.sheet-head h2 { font-size: 1.2rem; margin: 2px 0 8px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.description { color: var(--text); }
.meta { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.meta-row { display: flex; gap: 10px; font-size: 0.85rem; }
.meta-label { flex: 0 0 8rem; color: var(--muted); }
.meta-value { flex: 1 1 auto; min-width: 0; }

.course-link {
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  color: var(--accent);
  padding: 0;
  font-size: 0.85rem;
  text-align: left;
}
.link-list { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.req-node { display: flex; flex-direction: column; gap: 6px; }
.req-group { border-left: 2px solid var(--line); padding-left: 10px; }
.req-op { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.req-items { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.provenance { font-size: 0.78rem; color: var(--muted); margin-top: 18px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }