:root {
  --green: #275d38;          /* UVU green */
  --green-2: #3f7f52;
  --bg: #f6f7f5;
  --panel: #ffffff;
  --fg: #1b1f1c;
  --muted: #5a625c;          /* secondary text: >= 4.5:1 on white and on the semester tints */
  --brand: #275d38;          /* solid green under white text (header, on-buttons) */
  --warn: #9a5b00;           /* amber text (admission, no audit) */
  --bad: #b3261e;            /* red text (full, errors) */
  --line: #d7dcd8;
  --edge: #9aa59d;
  --edge-hot: #275d38;
  --edge-pre: #2563eb;  /* hover: lines to a class's prerequisites */
  --edge-post: #d97706; /* hover: lines to the classes that need it */
  --matric: #a21caf;    /* the matriculation line (fuchsia: not UVU green, not a semester colour) */
  --done-bg: #275d38;
  --done-fg: #ffffff;
  --ready-bg: #ffffff;
  --ready-line: #275d38;
  --locked-bg: #eef0ee;
  --locked-fg: #5a625c;
  --box-faded: #434a45;       /* a box's text while it can't be taken yet: faded but >= 4.5:1 on every fill */
  --box-done: #275d38;        /* a taken box: white text >= 7:1 */
  --tab-h: 52px;
  --head-h: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green: #4f9a62; --green-2: #6db27f;
    --bg: #101311; --panel: #171b18; --fg: #e6ebe7; --muted: #a3aba4; --line: #2b322d;
    --brand: #2e7341; --warn: #e6a23c; --bad: #f28b82;
    --edge: #4c5850; --edge-hot: #6db27f; --edge-pre: #60a5fa; --edge-post: #fbbf24; --matric: #e879f9;
    --done-bg: #2e7341; --done-fg: #ffffff; --ready-bg: #171b18; --ready-line: #5ea872;
    --locked-bg: #1d221e; --locked-fg: #9aa29b; --box-faded: #c9d0ca; --box-done: #275d38;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --green: #4f9a62; --green-2: #6db27f;
  --bg: #101311; --panel: #171b18; --fg: #e6ebe7; --muted: #a3aba4; --line: #2b322d;
  --brand: #2e7341; --warn: #e6a23c; --bad: #f28b82;
  --edge: #4c5850; --edge-hot: #6db27f; --edge-pre: #60a5fa; --edge-post: #fbbf24; --matric: #e879f9;
  --done-bg: #2e7341; --done-fg: #ffffff; --ready-bg: #171b18; --ready-line: #5ea872;
  --locked-bg: #1d221e; --locked-fg: #9aa29b; --box-faded: #c9d0ca; --box-done: #275d38;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
  height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }

/* header */
.top {
  height: var(--head-h); flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 16px; background: var(--brand); color: #fff;
  padding-top: env(safe-area-inset-top); height: calc(var(--head-h) + env(safe-area-inset-top));
}
.icon { background: none; border: 0; color: #fff; font-size: 20px; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; }
.icon:active { background: rgba(255,255,255,.15); }

/* main: phone = one panel at a time */
main { flex: 1; min-height: 0; display: flex; }
.panel { flex: 1; min-width: 0; min-height: 0; display: none; flex-direction: column; background: var(--panel); }
main[data-tab="flow"] .flow, main[data-tab="plan"] .plan { display: flex; }

/* semester colours: one hue per planned semester (fill / border), same in the plan's headings */
:root {
  --s0f: #fde0c2; --s0b: #e07b1a;  --s1f: #d6e4fa; --s1b: #3a72d0;  --s2f: #e5dbf8; --s2b: #8152d0;
  --s3f: #cdeeed; --s3b: #1e958f;  --s4f: #fad6e6; --s4b: #d1437c;  --s5f: #f6eab0; --s5b: #b8930a;
  --s6f: #f8d3cf; --s6b: #cc3d33;  --s7f: #d3ecf8; --s7b: #2289bf;  --s8f: #ead9c8; --s8b: #93653a;
  --s9f: #dde1e8; --s9b: #64748b;
  --grade-l: 30%; --grade-t: 30%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s0f: #4a3018; --s0b: #f0994a;  --s1f: #1f3050; --s1b: #6a9cf0;  --s2f: #33264d; --s2b: #a786ec;
    --s3f: #173f3d; --s3b: #3cc0b8;  --s4f: #4a2034; --s4b: #ef75a6;  --s5f: #423a14; --s5b: #dcbc3a;
    --s6f: #4a1f1c; --s6b: #ef6d62;  --s7f: #173a4c; --s7b: #4fb3e6;  --s8f: #3e2e20; --s8b: #c0905e;
    --s9f: #2a3039; --s9b: #94a3b8;
    --grade-l: 30%; --grade-t: 68%;
  }
}
:root[data-theme="dark"] {
  --s0f: #4a3018; --s0b: #f0994a;  --s1f: #1f3050; --s1b: #6a9cf0;  --s2f: #33264d; --s2b: #a786ec;
  --s3f: #173f3d; --s3b: #3cc0b8;  --s4f: #4a2034; --s4b: #ef75a6;  --s5f: #423a14; --s5b: #dcbc3a;
  --s6f: #4a1f1c; --s6b: #ef6d62;  --s7f: #173a4c; --s7b: #4fb3e6;  --s8f: #3e2e20; --s8b: #c0905e;
  --s9f: #2a3039; --s9b: #94a3b8;
  --grade-l: 30%; --grade-t: 68%;
}
/* Semester colors off (no s0..s9 class): planned boxes get one neutral look */
.box { --sf: var(--panel); --sb: var(--muted); }
.s0 { --sf: var(--s0f); --sb: var(--s0b); } .s1 { --sf: var(--s1f); --sb: var(--s1b); }
.s2 { --sf: var(--s2f); --sb: var(--s2b); } .s3 { --sf: var(--s3f); --sb: var(--s3b); }
.s4 { --sf: var(--s4f); --sb: var(--s4b); } .s5 { --sf: var(--s5f); --sb: var(--s5b); }
.s6 { --sf: var(--s6f); --sb: var(--s6b); } .s7 { --sf: var(--s7f); --sb: var(--s7b); }
.s8 { --sf: var(--s8f); --sb: var(--s8b); } .s9 { --sf: var(--s9f); --sb: var(--s9b); }

/* flowchart */
.legend { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; font-size: 12px; color: var(--muted); height: 34px; }
.lg-items { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.lg-items::-webkit-scrollbar { display: none; }
.legend .sw { flex: none; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; border: 1.5px solid var(--line); }
.legend .sw:first-child { margin-left: 0; }
.sw.done { background: var(--done-bg); border-color: var(--done-bg); }
.sw[class*=" s"] { background: var(--sf); border-color: var(--sb); }
.lg-grades { flex: none; display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.lg-grades input[role="switch"] { width: 32px; height: 20px; border-radius: 10px; }
.lg-grades input[role="switch"]::after { width: 14px; height: 14px; }
.lg-grades input[role="switch"]:checked::after { transform: translateX(12px); }
.chart { position: relative; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.edges { position: absolute; left: 0; top: 0; pointer-events: none; }
.edges path { fill: none; stroke: var(--edge); stroke-width: 1.2; }
.edges path.or { stroke-dasharray: 3 3; }
.edges marker path { fill: var(--edge); stroke: none; }
.edges path.hot { stroke: var(--edge-hot); stroke-width: 2; }
/* hover a box: its lines on top in two colours, the others dimmed */
.edges.hov > path, .edges.hov > g.lines { opacity: .35; }
.edges .hl path { stroke-width: 2; }
.edges .hl path.pre { stroke: var(--edge-pre); }
.edges .hl path.post { stroke: var(--edge-post); }
.edges #ah-pre path { fill: var(--edge-pre); }
.edges #ah-post path { fill: var(--edge-post); }
/* the tiny when / grade label: exactly the box's width, right above (or below) it */
.hint { position: absolute; z-index: 4; height: 15px; padding: 0 3px; border-radius: 4px; background: var(--fg); color: var(--panel); font-size: 11px; line-height: 15px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.hint[hidden] { display: none; }
.boxes { position: absolute; left: 0; top: 0; }
.box {
  position: absolute; display: flex; flex-direction: column; justify-content: center;
  padding: 0 2px; border-radius: 6px; border: 1.5px solid var(--line);
  background: var(--locked-bg); color: var(--fg); text-align: center; align-items: center; cursor: pointer;
  overflow: visible; transition: background-color .15s, border-color .15s, color .15s;
  touch-action: manipulation;
}
.box b { max-width: 100%; font-size: 13px; line-height: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box b small { font-size: 12px; font-weight: 600; margin-left: 3px; }
.box i { max-width: 100%; font-style: normal; font-size: 12px; line-height: 14px; font-weight: 500; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
/* narrow boxes (92 px): code + "+Lab" / "+1120" still fit on one line */
.box { container-type: inline-size; }
@container (max-width: 104px) { .box b:has(small), .box b.oc { font-size: 12px; letter-spacing: -.03em; } .box b small { font-size: 10px; margin-left: 1px; } }
/* the full class name for screen readers (the box shows the short one) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.box.ph b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; line-height: 1.15; }
/* planned: the colour of its semester; can't be taken yet: the same colour, faded */
.box.planned { background: var(--sf); border-color: var(--sb); color: var(--fg); }
.box.locked { color: var(--box-faded); }
.box.locked.planned { background: color-mix(in srgb, var(--sf) 45%, var(--panel)); border-color: color-mix(in srgb, var(--sb) 45%, var(--panel)); }
.box.done { background: var(--box-done); border-color: var(--box-done); color: var(--done-fg); }
/* a graded box: darker than the grade chips (22%, not 30%) so its white text stays >= 7:1 on yellow */
.box.done.graded { background: hsl(var(--gh) 58% 22%); border-color: hsl(var(--gh) 58% 22%); }
.box .gr { position: absolute; top: -10px; right: 4px; padding: 0 4px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 13px; background: var(--panel); color: var(--green); border: 1px solid currentColor; }
.box .gr:empty { display: none; }
.box.graded .gr { color: hsl(var(--gh) 60% var(--grade-t)); }
.box.flex { border-style: dashed; }
.box.done.flex { border-style: solid; }
.box:active { transform: scale(.97); }
.box.shake { animation: shake .32s; }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.note { position: absolute; z-index: 3; padding: 3px 8px; border-radius: 6px; background: var(--fg); color: var(--panel); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.note.on { opacity: 1; }
.sec { position: absolute; padding-top: 4px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }

/* plan */
.sum { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 8px 16px 6px; }
.sum b { font-size: 16px; color: var(--green); }
.sum span { color: var(--muted); font-size: 12px; }
.sum { flex-wrap: wrap; row-gap: 3px; }
.sum p { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.sum a { color: var(--green); font-weight: 600; }
.sum .adm { color: var(--warn); font-weight: 600; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-height: 28px; padding: 4px 10px; border: 1px solid var(--green); border-radius: 14px; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; }
.chip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip span::after { content: " ▾"; font-size: 10px; }
.chip em { flex: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--warn); }
.sum .ok { padding: 8px 18px; }
.sems { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 2px 16px 12px; align-content: start; overscroll-behavior: contain; }
.sem h3 { margin: 0 0 2px; font-size: 12px; display: flex; justify-content: space-between; border-bottom: 1.5px solid var(--green); padding-bottom: 2px; }
.sem[class*=" s"] h3 { border-bottom: 3px solid var(--sb); }
.sem[class*=" s"] h3::before { content: ""; flex: none; width: 10px; height: 10px; margin: 2px 6px 0 0; border-radius: 3px; background: var(--sf); border: 1.5px solid var(--sb); }
.sem h3 span { margin-left: auto; }
/* a semester heading opens the Schedule on that term: a link-like button */
.sem-go { padding: 0; border: 0; background: none; font: inherit; color: var(--green); cursor: pointer; text-align: left; }
.sem-go:hover { text-decoration: underline; }
.sc-lbl { margin-left: 0; }
.sem h3 span { color: var(--muted); font-weight: 600; }
.sem ul { list-style: none; margin: 0; padding: 0; }
.sem li { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; line-height: 17px; }
.sem { min-width: 0; }
.sem li span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sem li.ph span:first-child { color: var(--muted); font-style: italic; }
.sem li span:last-child { color: var(--muted); flex: none; }
.sem li { cursor: pointer; border-radius: 4px; }
.sem li:active { background: var(--bg); }
/* admission programs: the Apply step between the prerequisite semesters and the program */
.apply { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: .03em; }
.apply::before, .apply::after { content: ""; flex: 1; border-top: 1.5px dashed currentColor; opacity: .6; }
/* advisor booking link (Apply row, class sheet): the app's link green, normal case */
a.adv { color: var(--green); font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.warn { grid-column: 1 / -1; color: var(--bad); font-size: 12px; }

/* settings */
dialog { border: 0; border-radius: 12px; padding: 16px; background: var(--panel); color: var(--fg); width: min(320px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }
dialog select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
dialog .row { display: flex; justify-content: space-between; margin-top: 4px; }
dialog .ok, .pg .ok { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 8px 18px; font-weight: 600; cursor: pointer; }
dialog .ghost, .pg .ghost { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--muted); cursor: pointer; }
dialog .wide, .pg .wide { width: 100%; }

/* import audit */
dialog.imp { width: min(380px, calc(100vw - 32px)); }
.imp-head { position: relative; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.tip { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 12px; font-weight: 700; padding: 0; cursor: pointer; }
.tiptext { position: absolute; left: 0; top: 26px; z-index: 2; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--panel); font-size: 12px; white-space: nowrap; }
.imp-body { height: 300px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.imp-body[hidden] { display: none; }
.imp textarea { flex: 1; min-height: 0; resize: none; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.imp .file { position: relative; text-align: center; font-weight: 600; justify-content: center; }
.imp .file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.imp-sum { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.imp-sum b { color: var(--green); }
.imp-sum span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.imp-list { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0; overscroll-behavior: contain; }
.imp-list label { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-weight: 400; padding: 3px 0; }
.imp-list span { font-weight: 600; white-space: nowrap; }
.imp-list i { font-style: normal; color: var(--muted); font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-list em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.imp-list li.off, .imp-list li.off span { color: var(--muted); }
.imp-list input { accent-color: var(--green); margin: 0; }
.imp button:disabled { opacity: .5; cursor: default; }

.imp-prog { flex: none; max-height: 84px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.imp-prog[hidden] { display: none; }
.imp-prog span { overflow: hidden; text-overflow: ellipsis; }

/* minor (or certificate) boxes in the flowchart: a small tag on the top-left edge */
.box .tag { position: absolute; top: -10px; left: 5px; padding: 0 3px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 12px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.sec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* program picker: chosen programs, catalog year, search, Majors / Minors / Certificates, the list */
dialog.pick { width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 32px)); margin-top: max(16px, env(safe-area-inset-top)); }
dialog.pick form { height: 100%; gap: 10px; }
.chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chosen li { display: flex; align-items: center; gap: 8px; min-height: 28px; font-weight: 600; }
.chosen em { flex: none; width: 48px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.chosen span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chosen .x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.chosen .x:active { background: var(--bg); }
#pickYearRow[hidden] { display: none; }
.pick input[type="search"] { font: inherit; font-size: 16px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: 100%; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.seg button { flex: 1; background: none; border: 0; padding: 6px 4px; font-weight: 600; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--brand); color: #fff; }
.pick-list { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0 -4px; padding: 0; overscroll-behavior: contain; }
.pick-list button { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 7px 4px; font-size: 13px; cursor: pointer; }
.pick-list button:active { background: var(--bg); }
.pick-list button.on { color: var(--green); font-weight: 700; }
.pick-list button.on::after { content: "✓"; margin-left: auto; padding-left: 8px; }
.pick-list .none { padding: 8px 4px; color: var(--muted); }
.pick .row { margin-top: 0; }

/* account (Profile) */
.acct .tiptext { white-space: normal; width: 220px; }
.acct-in { display: flex; flex-direction: column; gap: 10px; }
.acct-in[hidden] { display: none; }
.acct .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct .who b { font-size: 14px; }
.acct .who b:empty { display: none; }
.acct .who span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .sync { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.acct .sync[data-s="saved"] svg { color: var(--green); }
.acct .sync[data-s="offline"] svg { color: #c98a00; }
.acct .danger { background: none; border: 1px solid var(--bad); color: var(--bad); border-radius: 8px; padding: 8px 12px; font-weight: 600; cursor: pointer; }
.acct .danger[data-armed="1"] { background: #b3261e; color: #fff; }
.acct-msg { margin: 0; color: var(--bad); font-size: 12px; }
.acct-msg:empty { display: none; }
.acct .row .ok { margin-left: auto; }
.acct button:disabled { opacity: .5; cursor: default; }

input[role="switch"] { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
input[role="switch"]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
input[role="switch"]:checked { background: var(--green); }
input[role="switch"]:checked::after { transform: translateX(16px); }

/* settings: schedule preferences */
.set-sec { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; border-top: 1px solid var(--line); padding-top: 10px; }
.set-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }
.seg.days button { flex: none; width: 34px; padding: 5px 0; }
.hours { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.ver { margin: -4px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* schedule: term, which schedule, copy CRNs · week grid · the classes */
main[data-tab="sched"] .sched { display: flex; }
.sc-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 16px; }
/* the term bar: Past | Current | Future (left, middle, right); a phone scrolls the strip, never the page */
.sc-terms { flex: none; display: flex; align-items: center; gap: 14px; padding: 6px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.sc-terms::-webkit-scrollbar { display: none; }
.sc-tg { flex: none; display: flex; align-items: center; gap: 6px; }
.sc-tg[hidden] { display: none; }
.sc-tl { font-size: 12px; font-weight: 600; color: var(--muted); }
.sc-tg button { flex: none; padding: 5px 10px; }
.sc-nav { display: flex; align-items: center; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.sc-nav button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--green); font-size: 20px; line-height: 1; cursor: pointer; }
.sc-nav button:active { background: var(--bg); }
.sc-nav button:disabled { color: var(--line); cursor: default; }
#scRank { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.sc-copy { flex: none; width: 86px; padding: 6px 0; border: 1px solid var(--green); border-radius: 8px; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; }
.sc-copy:active { background: var(--brand); color: #fff; }
.sc-copy:disabled { opacity: .4; cursor: default; }
.sc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sc-week { flex: none; height: 48%; display: flex; flex-direction: column; padding: 0 10px 8px 2px; }
.wk-head { flex: none; display: grid; grid-template-columns: 24px repeat(var(--n), 1fr); padding-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.wk-body { flex: 1; min-height: 0; display: flex; }
.wk-times { flex: none; width: 24px; position: relative; font-size: 12px; color: var(--muted); }
.wk-times span { position: absolute; right: 4px; line-height: 1; transform: translateY(-4px); }
.wk-times span:first-child { transform: none; }
.wk-cols {
  flex: 1; position: relative; border: 1px solid var(--line); border-width: 1px 1px 1px 0;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / var(--n)) 100%;
}
.wk-hl { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
/* a block: short title (or code, per Labels), the full time range in bright numbers, the code under it (Both) */
.wk-b { position: absolute; width: calc(100% / var(--n) - 3px); margin-left: 1.5px; padding: 2px 4px; overflow: hidden; border-radius: 4px; background: var(--sf); border-left: 3px solid var(--sb); color: var(--fg); display: flex; flex-direction: column; }
.wk-b .wt { order: 1; flex: none; font-size: 14px; line-height: 16px; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.wk-b .wtm { order: 2; flex: none; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wk-b .wc { order: 3; font-size: 12px; line-height: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scWeek:not([data-lbl="both"]) .wk-b .wc { display: none; }
#scWeek[data-lbl="code"] .wk-b .wt { display: none; }
#scWeek[data-lbl="code"] .wk-b .wc { display: block; order: 1; font-size: 14px; line-height: 16px; font-weight: 700; }
.wk-b.short { padding-top: 1px; padding-bottom: 0; }
.wk-b.short .wt { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; flex: none; }
.wk-b.short .wc { display: none; }
#scWeek[data-lbl="code"] .wk-b.short .wc { display: block; }
.wk-b.tiny .wt, .wk-b.tiny .wc, #scWeek[data-lbl="code"] .wk-b.tiny .wc { display: none; }
.wk-b.tiny { justify-content: center; padding-top: 0; }
/* phone: five ~70 px day columns */
@media (max-width: 899px) {
  .wk-b { padding: 1px 3px; }
  .wk-b .wt, #scWeek[data-lbl="code"] .wk-b .wc { font-size: 13px; line-height: 15px; }
  .wk-b .wtm { font-size: 12px; line-height: 14px; letter-spacing: -.03em; }
  .wk-b .wc { font-size: 11px; line-height: 13px; }
  .wk-b.snug .wtm { font-size: 11px; letter-spacing: -.04em; } /* a time too long for the column */
}
.sc-list { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0 8px 8px; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.sc-list .none { padding: 10px 8px; color: var(--muted); }
.sc-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 14px; color: var(--fg); cursor: pointer; }
.sc-row:active { background: var(--bg); }
.sc-row.lt { cursor: default; }
.sc-row.lt:active { background: none; }
.sc-row .sw { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 3px; background: var(--sf); border: 1.5px solid var(--sb); }
/* a class block: the title big, the code small beside it, then one readable line per fact */
.sc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sc-name b { font-size: 17px; line-height: 22px; font-weight: 700; overflow-wrap: anywhere; }
.sc-name small { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sc-ln { font-size: 14px; line-height: 19px; color: var(--fg); overflow-wrap: anywhere; }
.sc-ln.when { font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-ln .rt { margin-left: 4px; vertical-align: 1px; }
.seat.full { color: var(--bad); }
.crn { font-variant-numeric: tabular-nums; }
.crn.pin { color: var(--green); font-weight: 700; }
.sc-row .why { color: var(--muted); font-style: italic; }
.sc-ln .gb { display: inline-block; min-width: 28px; margin-left: 4px; padding: 0 4px; text-align: center; font-style: normal; }
.rt { flex: none; display: inline-block; min-width: 26px; padding: 1px 0; border-radius: 4px; background: hsl(var(--rh) 58% var(--grade-l)); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; }
.rt.unrated { background: none; color: var(--muted); font-weight: 400; }
.sc-add { width: 100%; padding: 9px 8px; border: 0; background: none; color: var(--green); font-weight: 600; text-align: left; cursor: pointer; }
/* a class's sections (tap one to keep it) + add a class */
dialog.secs { width: min(460px, calc(100vw - 32px)); }
/* my schedule (js/mineui.js): Add my schedule in the bar, Pick your section rows, the paste dialog, add by hand */
.sc-mine { display: none; flex: none; margin-left: auto; padding: 6px 10px; border: 1px solid var(--green); border-radius: 8px; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; }
.sc-mine:active { background: var(--brand); color: #fff; }
.sched.mine .sc-mine { display: block; }
.sched.mine .sc-nav { display: none; }
.sc-adds { display: flex; }
.sc-adds .sc-add { width: auto; }
.sc-adds .sc-add + .sc-add { margin-left: auto; }
.sc-row .pick-sec { color: var(--green); font-weight: 600; font-style: normal; }
/* a term with no section times: no week grid, its classes as a list across the whole section */
.sched.list-term .sc-week { display: none !important; }
.sched.list-term .sc-list { border-top: 0; }
#myTipText { white-space: normal; width: 240px; }
.my-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.my-list li.miss span { color: var(--muted); }
.my-list .ghost { flex: none; padding: 3px 10px; font-size: 12px; }
.my-list .none { color: var(--muted); }
dialog.hand input { font: inherit; font-size: 16px; width: 150px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.hand-msg { margin: -4px 0 0; min-height: 16px; font-size: 12px; color: var(--bad); }
#handRemove[hidden] { visibility: hidden; display: block; }
.sec-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-head b { font-size: 15px; }
.sec-head span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-list li { display: flex; align-items: center; gap: 6px; }
.sec-list li button { flex: 1; min-width: 0; gap: 8px; }
.sec-list .sn { flex: none; width: 30px; font-weight: 600; }
.sec-list .when { flex: none; width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-list .when i { margin-left: 4px; padding: 0 3px; border: 1px solid var(--line); border-radius: 4px; font-style: normal; font-size: 11px; color: var(--muted); }
.sec-list .who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.sec-list .seat { flex: none; font-size: 12px; color: var(--muted); }
/* a section that clashes: greyed by colour (not faded), still readable */
.sec-list li.clash button, .sec-list li.clash button span { color: var(--muted); }
.sec-list li.clash .rt { background: var(--muted); color: var(--panel); }
.sec-list button.cur { background: color-mix(in srgb, var(--green) 12%, transparent); }
.sec-list .rt { margin-right: 4px; }
#addList button { gap: 10px; }
#addList b { flex: none; width: 82px; }
#addList span { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Gen Ed box with a class list: the class taken under its name, a small list button on the bottom edge */
.box .pk { font-weight: 600; white-space: nowrap; display: block; text-overflow: ellipsis; }
.box .pk:empty { display: none; }
.box .gl { position: absolute; bottom: -7px; right: 5px; display: grid; place-items: center; width: 22px; height: 14px; border-radius: 4px; background: var(--panel); color: var(--green); border: 1px solid var(--line); line-height: 0; }
.box .gl::after { content: ""; position: absolute; inset: -16px -12px; } /* 46 x 46 tap target */
.box .gl:active { background: var(--brand); color: #fff; border-color: var(--green); }
/* its sheet: area, search, the classes (code · title · credits) */
.ge-list button { gap: 10px; }
.ge-list b { flex: none; min-width: 92px; white-space: nowrap; }
.ge-list span { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ge-list em { flex: none; font-style: normal; font-size: 12px; color: var(--muted); }
.ge-list button::after { content: ""; flex: none; width: 12px; margin-left: 0; padding-left: 0; }
.ge-list button.on::after { content: "✓"; padding-left: 0; margin-left: 0; }
.ge-list button.on span { color: var(--green); }
.ge-list .ge-h { padding: 8px 4px 2px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ge .sec-head span { white-space: normal; }

/* laptop: the Flowchart keeps the plan beside it (right); every other section is a screen of its own */
@media (min-width: 900px) {
  main { gap: 1px; background: var(--line); }
  main[data-tab="flow"] .flow, main[data-tab="flow"] .plan { display: flex; }
  main[data-tab="flow"] .plan { flex: none; width: 400px; }
  main[data-tab="plan"] .plan { flex: 1; }
  main[data-tab="plan"] .plan > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
  main[data-tab="plan"] .plan > .plan-seg { width: auto; max-width: 728px; margin: 8px auto 0; align-self: stretch; }
  .legend { padding: 8px 16px; }
  .sum { padding: 10px 16px 8px; }
  .plan { order: 1; }
  .sc-bar { padding: 0 16px; height: 44px; }
  .sc-body { flex-direction: row; }
  .sc-week { flex: 1; min-width: 0; height: auto; padding: 0 12px 12px 4px; }
  /* the class list gets a third of the width (Tim, 2026-10-23: "Give it more like a third") */
  .sc-list { flex: none; width: 33.4%; border-top: 0; border-left: 1px solid var(--line); padding: 0 12px 12px; }
  .sc-terms { display: grid; grid-template-columns: 1fr auto 1fr; padding: 8px 16px 2px; }
  .tg-past { justify-self: start; } .tg-current { grid-column: 2; justify-self: center; } .tg-future { grid-column: 3; justify-self: end; }
  .sched.list-term .sc-list { width: auto; flex: 1; border-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 24px; align-content: start; }
  .sched.list-term .sc-list > li.none { grid-column: 1 / -1; }
}

/* keyboard users keep a focus ring; a tap or click doesn't leave one */
:focus:not(:focus-visible) { outline: none; }

/* flowchart: hold a box for its class sheet (no iOS callout / text selection); zoom; "pick N" groups */
.box { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chart { touch-action: pan-x pan-y; }
.edges, .boxes { transform-origin: 0 0; }
.lg-fit { flex: none; display: grid; place-items: center; width: 30px; height: 28px; margin-right: -2px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.lg-fit[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.lg-fit[hidden] { display: none; }
.pickgrp { position: absolute; border: 1.5px dashed var(--edge); border-radius: 9px; pointer-events: none; }
.pickgrp em { position: absolute; top: -9px; left: 8px; padding: 0 4px; background: var(--panel); font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; color: var(--muted); }
.box .ptag { position: absolute; top: -10px; left: 5px; padding: 0 3px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 12px; background: var(--panel); color: var(--muted); border: 1px dashed var(--edge); }
.box.extra .ptag { left: auto; right: 5px; }
.box.in-grp .ptag, .box.done .ptag { display: none; }
/* requirement groups under the chart (js/groups.js): titled frame, progress on the right, light green when met */
.gframe { position: absolute; display: flex; align-items: flex-start; gap: 6px; padding: 4px 9px 0; border: 1.5px solid var(--line); border-radius: 9px; transition: background-color .15s, border-color .15s; }
.gframe.listed { cursor: pointer; }
.gframe > b { min-width: 0; font-size: 12px; line-height: 15px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gframe .gp { flex: none; font-size: 12px; line-height: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.gframe.met { background: color-mix(in srgb, var(--done-bg) 14%, var(--panel)); border-color: var(--done-bg); }
.gframe.met .gp { color: var(--green); }
.gmore, .ginc { position: absolute; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--line); border-radius: 6px; background: none; font-size: 12px; font-weight: 700; }
.gmore { color: var(--green); cursor: pointer; }
.ginc { color: var(--muted); font-weight: 600; pointer-events: none; }
.gframe[hidden], .gmore[hidden], .ginc[hidden] { display: none; }
.box.gchip .ptag { display: none; }
.box.gwide b { -webkit-line-clamp: 3; }
.lg-items .sw-or { flex: none; margin-left: 8px; }
.lg-items .sw-or path { stroke: var(--edge); stroke-width: 1.6; stroke-dasharray: 3 3; }

/* first visit: no program yet */
.empty-pick { display: none; }
main.empty .empty-pick { display: block; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 20px; font-weight: 600; cursor: pointer; }
.flow { position: relative; }
main.empty .legend .lg-grades { visibility: hidden; }

/* class sheet: code + title, facts, Taken, Report a mistake · Catalog · Done */
dialog.cls { width: min(380px, calc(100vw - 32px)); }
.cls-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 12.5px; max-height: 50dvh; overflow: auto; }
.cls-facts dt { color: var(--muted); font-weight: 600; }
.cls-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#clsTakenRow[hidden] { display: none; }
.cls .row { align-items: center; gap: 8px; }
.cls a.ghost { text-decoration: none; font-size: 12px; padding: 8px 10px; }
.cls-r { display: flex; align-items: center; gap: 12px; }
.cls-cat { color: var(--green); font-weight: 600; text-decoration: none; }
dialog.tracks { height: fit-content; max-height: min(520px, calc(100dvh - 32px)); }
dialog.tracks form { height: auto; }
.tracks .pick-list { flex: none; }

/* toast: "Taken classes cleared · Undo" at the bottom */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); z-index: 20; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--fg); color: var(--panel); font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.25); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { border: 0; background: none; color: inherit; text-decoration: underline; font-weight: 700; padding: 6px 8px; cursor: pointer; }
.toast button[hidden] { display: none; }
#clearDone[data-armed="1"] { color: var(--bad); border-color: var(--bad); }
.toast span { white-space: nowrap; }

/* in progress (Current): the Taken green as a light tint with a green border, so it reads as "not finished" */
.box.done.ip { background: color-mix(in srgb, var(--done-bg) 16%, var(--panel)); border-color: var(--done-bg); color: var(--fg); }
.box.done.ip .gr { color: var(--green); }
.sw.ip { background: color-mix(in srgb, var(--done-bg) 16%, var(--panel)); border-color: var(--done-bg); }

/* Plan | Classes (top of the plan panel) */
.plan-seg { margin: 8px 16px 0; }
.plan[data-sub="classes"] .sum, .plan[data-sub="classes"] .sems { display: none; }
.cl-view { display: none; }
.plan[data-sub="classes"] .cl-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cl-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px 6px; }
.cl-gpa { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.cl-gpa b { font-size: 16px; color: var(--green); }
.cl-gpa span { color: var(--muted); font-size: 12px; }
.cl-add { flex: none; }
.cl-list { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0 16px 12px; overscroll-behavior: contain; }
.cl-list .none { padding: 8px 0; color: var(--muted); }
.cl-h { display: flex; justify-content: space-between; padding: 10px 0 3px; border-bottom: 1.5px solid var(--green); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cl-h span { font-weight: 600; }
.cl-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 12px; cursor: pointer; }
.cl-row:active { background: var(--bg); }
.cl-row b { flex: none; width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row span { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row i { flex: none; padding: 0 4px; border: 1px dashed var(--edge); border-radius: 4px; font-style: normal; font-size: 12px; color: var(--muted); }
.cl-row .cr { flex: none; width: 22px; text-align: right; font-style: normal; color: var(--muted); }
.cl-row .gb, .cl-row .when { flex: none; width: 38px; text-align: center; font-style: normal; font-size: 12px; }
.cl-row .when { color: var(--muted); }
.gb { padding: 1px 0; border-radius: 4px; font-weight: 700; background: hsl(var(--gh) 58% var(--grade-l)); color: #fff; }
.gb.mark { background: none; color: var(--green); border: 1px solid var(--line); }
.gb:empty { background: none; }

/* class sheet: a grade per class (lecture, lab) */
.cls-grades { display: flex; flex-direction: column; gap: 8px; }
.cls-grades:empty { display: none; }
.cls-grades small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.cls-grades label { justify-content: flex-start; }
.cls-grades select { margin-left: auto; }
/* a grade from the imported audit: text with a lock, no picker */
.cls-glock { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.glock { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--fg); }
.glock b { font-size: 16px; }
.glock svg { color: var(--muted); }
.glock small { color: var(--muted); font-size: 12px; font-weight: 600; margin: 0; }
#edGrade[hidden], #edLock[hidden] { display: none; }
#edSeg button:disabled { opacity: .5; cursor: default; }

/* Add class / edit a class */
dialog.cl-edit[data-step="form"] { height: fit-content; }
dialog.cl-edit[data-step="form"] form { height: auto; }
.ed-find { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ed-find[hidden], .ed-form[hidden] { display: none; }
.ed-form { display: flex; flex-direction: column; gap: 12px; }
#edGradeRow[hidden], #edRemove[hidden] { display: none; }
#edList button { gap: 10px; }
#edList b { flex: none; width: 82px; }
#edList span { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "No audit loaded — Upload or Sign in" (flowchart under the legend; Classes above the list) */
.noaud { flex: none; margin: 0; padding: 0 16px 4px; font-size: 12px; color: var(--warn); font-weight: 600; }
.noaud[hidden], .noaud span[hidden] { display: none; }
.noaud button { padding: 0; border: 0; background: none; color: var(--green); font-weight: 700; text-decoration: underline; cursor: pointer; }
/* "UVU's official flowchart (2026-27) ↗" (flowchart, under the legend; majors whose department publishes one) */
.uvuchart { flex: none; margin: 0; padding: 0 16px 4px; font-size: 12px; }
.uvuchart[hidden] { display: none; }
.uvuchart a { color: var(--green); font-weight: 700; }

/* Matriculation: a dotted line between the classes that don't need it (left) and the ones that do (right);
   its label (top of the line) opens the matriculation sheet */
.edges path.matric { stroke: var(--matric); stroke-width: 1.8; stroke-dasharray: 0 5; stroke-linecap: round; transition: stroke-width .12s; }
.edges.hov > path.matric { opacity: 1; }
/* hover (laptop) or tap (phone) on the line: it gets thicker, its two sides get faint tints
   (before = green, needs matriculation = the line's own colour) */
.edges .mreg path { stroke: none; opacity: 0; transition: opacity .12s; }
.edges .mreg .mb { fill: color-mix(in srgb, var(--green) 9%, transparent); }
.edges .mreg .ma { fill: color-mix(in srgb, var(--matric) 9%, transparent); }
.edges.mhov .mreg path { opacity: 1; }
.edges.mhov path.matric { stroke-width: 3; stroke-dasharray: 0 6; }
.mhit { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.mhit[hidden] { display: none; }
.mhit path { fill: none; stroke: transparent; stroke-width: 26; stroke-linejoin: round; pointer-events: stroke; cursor: pointer; }
.matric-lbl { position: absolute; z-index: 2; transform: translate(-50%, -50%); height: 22px; padding: 0 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--green); font: inherit; font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; cursor: pointer; }
.matric-lbl::before { content: ''; position: absolute; inset: -11px -4px; } /* 44px tall touch target */
.matric-lbl[hidden] { display: none; }
.mts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mt { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; white-space: nowrap; }
.mt.ok { border-color: var(--green); color: var(--green); font-weight: 600; }
dialog.mat .cls-facts { max-height: 60dvh; }
/* (a chip named "ok" inside a dialog also matched the dialog's green Done button style: green text on green) */
dialog .mt.ok { background: none; border: 1px solid var(--green); padding: 1px 6px; border-radius: 6px; cursor: default; }
dialog .mt.ok::after { content: none; }
.mt.ip { border-color: var(--warn); color: var(--warn); font-weight: 600; }
.mt.low, .mt.missing { border-color: var(--bad); color: var(--bad); font-weight: 600; }

/* "Fill my application" (Matriculation sheet -> #appDlg): answers to copy, readiness, steps (js/application.js) */
dialog .mat-apply { align-self: flex-start; border-color: var(--green); color: var(--green); font-weight: 600; }
dialog.app .cls-facts { max-height: none; overflow: visible; }
.app-typ { margin: 0; color: var(--warn); font-size: 13px; font-weight: 600; }
.app-bad { color: var(--bad); font-weight: 700; }
.app-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.app-h b { font-size: 15px; }
.cpv, dialog .cpall { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--fg); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
dialog .cpall { color: var(--green); border-color: var(--green); }
.cpv i, .cpall i { flex: none; width: 14px; font-style: normal; color: var(--muted); text-align: center; }
.cpv.copied i, .cpall.copied i { color: var(--green); font-size: 0; }
.cpv.copied i::before, .cpall.copied i::before { content: "✓"; font-size: 14px; }
.app-cols { margin: 0; color: var(--muted); font-size: 12px; }
.app-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-rows li { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: baseline; }
.app-rows li > span { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.app-rows b { font-size: 14px; }
.app-rows .cw, .app-fields .cw { color: var(--muted); font-size: 13px; }
.app-note { margin: 0; color: var(--muted); font-size: 12px; }
.app-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; }
.app-steps a.src { font-size: inherit; }
@media print {
  body > *:not(#appDlg) { display: none !important; }
  #appDlg { position: static !important; display: block !important; max-height: none !important; width: auto !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; transform: none !important; }
  #appDlg::backdrop { display: none; }
  #appDlg form { overflow: visible !important; }
  #appDlg .grab, #appDlg .row, #appDlg .cpall { display: none !important; }
  .cpv { border: 0; padding: 0; min-height: 0; }
  .cpv i { display: none; }
}

/* source links (js/sources.js): small grey line, green "↗" links, new tab. Tim 2026-10-22: link everything we get information from */
.src { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.src-d { white-space: nowrap; }
.src a, a.src { color: var(--green); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sum p.src { color: var(--muted); }
dialog p.src { flex: none; }
.cls-facts a.src { font-weight: 700; }
.sc-list li.src { padding: 6px 8px; }

/* Home (js/app.js renderHome): no top bar, a plain list. Tim, 2026-10-23: "the home page shouldn't have any top
   bar and all the info should be in a list, like an ordinary cite". The name, then label / value rows (major,
   minors, catalog, GPA, graduation), then the rows into each section. A lone gear (top right): site settings. */
.top:has(+ main[data-tab="home"]), body[data-tab="home"] .top { display: none; }
main[data-tab="home"] .home { display: flex; }
.home { position: relative; overflow: hidden; background: var(--bg); }
.home .gear { position: absolute; z-index: 1; top: calc(8px + env(safe-area-inset-top)); right: 8px; display: grid; place-items: center; color: var(--muted); }
.home .gear:active { background: var(--line); }
/* the profile circle, left of the gear: a person (signed out) or the name's first letter (signed in) */
.pf-circle { position: absolute; z-index: 1; top: calc(10px + env(safe-area-inset-top)); right: 54px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--green); border-radius: 50%; background: var(--panel); color: var(--green); cursor: pointer; }
.pf-circle b { display: none; font-size: 16px; font-weight: 800; line-height: 1; }
.pf-circle.in { background: var(--brand); border-color: var(--brand); color: #fff; }
.pf-circle.in:has(b:not(:empty)) svg { display: none; }
.pf-circle.in b:not(:empty) { display: block; }
.pf-circle.warn { box-shadow: 0 0 0 2px var(--warn); }
.pf-circle:active { transform: scale(.94); }
.hm { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
/* what the site is, for anyone landing here (Tim, 2026-10-23: "people don't even know it's for UVU only") */
.hm-brand { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hm-brand b { padding: 4px 92px 0; color: var(--green); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.hm-brand span { max-width: 340px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.35; }
.hm-name { margin: 0; padding: 4px 8px 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the facts: centered, a small label over a bigger value; programs one per line, the rest side by side,
   separated by thin rules (no boxes) */
.hm-list { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.hm-list:empty { display: none; }
.hm-list > div:not(.hm-first) { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; text-align: center; }
.hm-list > div.hm-prog { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
.hm-list > div:not(.hm-prog):not(.hm-first) + div:not(.hm-prog) { border-left: 1px solid var(--line); }
.hm-list dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.hm-list dd { margin: 0; max-width: 100%; min-width: 0; font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hm-prog dd { display: flex; justify-content: center; }
.hm-prog button { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--fg); text-align: center; cursor: pointer; }
.hm-prog b { max-width: 100%; font-size: 20px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-prog b::after { content: " ▾"; font-size: 12px; }
.hm-prog small { max-width: 100%; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-prog button:active { opacity: .6; }
.hm-first { flex-basis: 100%; padding: 18px 14px; text-align: center; }
.hm-pick { padding: 14px 26px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.hm-pick:active { transform: scale(.97); }
.hm-or { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.hm-or button { padding: 0; border: 0; background: none; color: var(--green); font-weight: 700; text-decoration: underline; cursor: pointer; }
/* the sections: large boxes, big centered name, a small fact under it */
.hm-go { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.hm-go button { min-width: 0; min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; border: 0; border-radius: 16px; background: var(--panel); color: var(--fg); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px var(--line); cursor: pointer; transition: transform .12s; }
.hm-go button:active { transform: scale(.97); background: var(--bg); }
.hm-go svg { flex: none; color: var(--green); }
.hm-go b { font-size: 22px; font-weight: 800; }
.hm-go span { max-width: 100%; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-go span:empty { display: none; }
.home.none .hm-go { display: none; }
@media (min-width: 900px) {
  .hm { justify-content: center; max-width: 640px; gap: 24px; padding-top: 40px; padding-bottom: 40px; }
  .hm-name { font-size: 44px; padding-top: 0; }
  .hm-brand b { font-size: 20px; }
  .hm-brand span { max-width: none; font-size: 15px; }
  .hm-list dd, .hm-prog b { font-size: 24px; }
  .hm-go button { min-height: 168px; }
  .hm-go b { font-size: 26px; }
  .hm-go button:hover { background: var(--bg); }
  .pf-circle:hover { background: color-mix(in srgb, var(--green) 10%, var(--panel)); }
  .pf-circle.in:hover { background: var(--green-2); }
}
/* the profile circle's menu: a small sheet under the circle (top right) */
dialog.pf-menu { position: fixed; inset: calc(52px + env(safe-area-inset-top)) 8px auto auto; margin: 0; width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 68px); overflow: auto; padding: 14px; }
dialog.pf-menu::backdrop { background: rgba(0,0,0,.18); }
.pf-menu .acct { display: flex; flex-direction: column; gap: 10px; }
.pf-menu .acct-out { display: flex; flex-direction: column; gap: 8px; }
.pf-menu .acct-out[hidden] { display: none; }
.pf-menu .acct-out button { padding: 11px 14px; font-size: 15px; font-weight: 700; }
.pf-menu .ghost { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--fg); font-weight: 600; cursor: pointer; }
.pf-menu .acct-out .ghost { border-color: var(--green); color: var(--green); }
.pf-menu .ok { background: var(--brand); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
.pf-menu .wide { width: 100%; }
.pf-menu button:disabled { opacity: .5; cursor: default; }
.pf-note { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.pf-menu .pg-row { padding: 0; min-height: 44px; border-radius: 0; background: none; font-size: 14px; }
.pf-menu .pg-row + .pg-row { border-top: 1px solid var(--line); }
.pf-menu .pg-row input { max-width: 190px; }
.pf-menu .acct-in > .who { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
/* a section's header: back arrow (top left) and its name */
.top { gap: 4px; padding-left: 4px; padding-right: 16px; }
.back { flex: none; display: grid; place-items: center; }
.ttl { margin: 0; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* account menu rows (the profile circle's menu) */
.pg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 50px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--panel); color: var(--fg); font-size: 13px; font-weight: 600; }
.pg-row input { flex: 1; min-width: 0; max-width: 280px; font: inherit; font-size: 16px; font-weight: 600; text-align: right; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
.pg-btn { cursor: pointer; text-align: left; }
.pg-btn:active { background: var(--bg); }
.pg-btn b { min-width: 0; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-btn b::after { content: " ▾"; font-size: 11px; }
/* entering a screen: a short slide-in */
@keyframes enter { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main.enter .panel { animation: enter .18s ease-out; }
@media (prefers-reduced-motion: reduce) { main.enter .panel { animation: none !important; } }

/* the flowchart's own controls, right above it: Explore (+ clear while exploring), box labels */
.xbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 16px 6px; }
.x-btn { flex: none; align-items: center; }
.x-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.xbar .hyp-x { flex: none; width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.xbar .hyp-x[hidden] { display: none; }
.xbar .hyp-x:active { background: var(--bg); }
.lbl-seg { margin-left: auto; }
.lbl-seg button { flex: none; padding: 5px 10px; }
main.empty .xbar { visibility: hidden; }
/* Code (MATH 2210) / Title (Calc 3) / Both: only what a box shows changes (requirement boxes keep theirs);
   Title keeps a lecture + lab box's "+Lab" under the name */
.boxes[data-lbl="code"] .box:not(.ph) > i:not(.pk) { display: none; }
.boxes[data-lbl="title"] .box:not(.ph):not(:has(> i:empty)) > b:not(:has(small)) { display: none; }
.boxes[data-lbl="title"] .box:not(.ph):not(:has(> i:empty)) > b:has(small) { order: 2; font-size: 0; line-height: 14px; }
.boxes[data-lbl="title"] .box:not(.ph) > b small { margin: 0; font-size: 12px; }
.boxes[data-lbl="title"] .box:not(.ph) > i { font-weight: 600; }

/* the schedule's filters, next to it: a laptop always shows them; a phone opens them with Filters */
.sc-ftog { flex: none; display: grid; place-items: center; width: 32px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.sched.filt-open .sc-ftog { border-color: var(--green); color: var(--green); }
.sc-filt { flex: none; display: none; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 2px 16px 8px; font-size: 12px; color: var(--muted); }
.sched.filt-open .sc-filt { display: flex; }
.sc-filt select { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.sc-filt .lg-grades { color: var(--fg); }
@media (min-width: 900px) {
  .sc-ftog { display: none; }
  .sc-filt { display: flex; padding: 0 16px 8px; }
  /* one row under the term bar: the filters (left) + which schedule / Copy CRNs (right) */
  main[data-tab="sched"] .sched { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); }
  .sched > .sc-terms, .sched > .sc-body { grid-column: 1 / -1; }
  .sched > .sc-filt { grid-column: 1; grid-row: 2; align-self: center; padding: 6px 16px; }
  .sched > .sc-bar { grid-column: 2; grid-row: 2; height: auto; padding: 6px 16px 6px 0; }
  .sched > .sc-body { grid-row: 3; }
}
/* phone: the week grid gets more height so a 50-minute class keeps its title and time */
@media (max-width: 899px) { .sc-week { height: 57%; } }
/* a term shown as a list has no schedule controls */
.sched.list-term .sc-bar, .sched.list-term .sc-filt { display: none !important; }

/* laptop, on the Flowchart: a class's details in the right-side section, over the plan (not a modal) */
@media (min-width: 900px) {
  dialog.cls.side { position: fixed; inset: calc(var(--head-h) + env(safe-area-inset-top)) 0 0 auto; z-index: 10; width: 400px; max-width: none; height: auto; max-height: none; margin: 0; border-radius: 0; overflow: auto; box-shadow: -1px 0 0 var(--line), -8px 0 24px rgba(0,0,0,.08); }
  dialog.cls.side .cls-facts { max-height: none; }
  dialog.cls.side.peek { z-index: 11; } /* a hover preview sits over a clicked panel */
}

/* phone, Flowchart: Chart | Plan in the header (the plan lives in this section; a laptop shows it beside the chart) */
.fp-seg { display: none; margin-left: auto; border-color: rgba(255,255,255,.55); }
.fp-seg button { flex: none; min-width: 58px; padding: 6px 10px; font-size: 13px; color: #fff; }
.fp-seg button + button { border-left-color: rgba(255,255,255,.55); }
.fp-seg button.on { background: #fff; color: var(--green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-seg button.on { color: #1d4a2c; } }
:root[data-theme="dark"] .fp-seg button.on { color: #1d4a2c; }
@media (max-width: 899px) { body[data-tab="flow"] .fp-seg, body[data-tab="plan"] .fp-seg { display: flex; } }

/* a clicked class stays picked out (its lines stay lit) while its details are open */
.box.sel { outline: 2.5px solid var(--edge-pre); outline-offset: 2px; z-index: 1; }

/* class details: big code + short name, the full title under it, short rows, chips to other classes */
dialog.cls { width: min(400px, calc(100vw - 24px)); }
.cls-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cls-head p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cls-head b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.cls-head p span { font-size: 18px; font-weight: 700; color: var(--green); }
.cls-head p span:empty { display: none; }
.cls-head > span { color: var(--muted); font-size: 14px; }
.cls-head > span:empty { display: none; }
.cls-facts { grid-template-columns: 76px 1fr; gap: 10px 12px; font-size: 15px; line-height: 1.4; align-items: baseline; }
.cls-facts dt { font-size: 13px; }
.cls-facts dd .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cls-facts .ck { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--fg); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; }
button.ck { cursor: pointer; border-color: var(--green); color: var(--green); }
button.ck:active { background: var(--brand); color: #fff; }
.cls-facts .ck.is-done { background: color-mix(in srgb, var(--done-bg) 14%, var(--panel)); border-color: var(--done-bg); }
.cls-facts .cw { color: var(--muted); font-size: 13px; }
.cls-facts .gate { font-weight: 700; color: var(--warn); }
.cls-facts .st-done { color: var(--green); font-weight: 700; }
.cls-facts .st-plan { font-weight: 700; }
.cls-facts .sub { display: block; color: var(--muted); font-size: 13px; }
.cls-facts .secs .rt { margin-left: 3px; }
.cls-raw { font-size: 13px; color: var(--muted); }
.cls-raw summary { cursor: pointer; font-weight: 600; color: var(--green); padding: 4px 0; }
.cls-raw dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; }
.cls-raw dt { font-weight: 600; }
.cls-raw dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
#clsSrc { font-size: 12px; }
@media (min-width: 900px) { dialog.cls.side form { gap: 14px; } }

/* hover glossary (js/glossary.js): a dotted underline; the card says what it means and where that's from */
.gt { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); cursor: help; border-radius: 3px; }
.gt:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.gt[aria-expanded="true"] { background: color-mix(in srgb, var(--green) 14%, transparent); }
.gloss { position: fixed; z-index: 50; max-width: calc(100vw - 16px); padding: 9px 12px; border-radius: 10px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.22); font-size: 14px; line-height: 1.35; text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: normal; }
.gloss[hidden] { display: none; }
.gloss b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--green); }
.gloss p { margin: 0; }
.gloss .gl-src { margin-top: 5px; font-size: 12px; }
.gloss a { color: var(--green); font-weight: 600; text-decoration: none; }

/* ---------- iPhone pass (2026-10-23; Tim: "All of the organization and everything has been specifically for the
   laptop use ... I figure the 1 finger drage around and the 2 finger to zoom in/out should probably be applied") */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* safe areas: the notch's sides (landscape) and the home bar under every section */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.panel:not(.home) { padding-bottom: env(safe-area-inset-bottom); }
/* room under the chart so the picked box can scroll up above the class details sheet (js keepAboveSheet) */
.chart-pad { position: absolute; left: 0; width: 1px; height: 0; pointer-events: none; }
.grab { display: none; }
/* phone: class details (and Matriculation) = a bottom sheet; on the Flowchart it's not a modal, so the chart above
   stays in sight and a tap on another box switches to it. Its handle: drag down = close, up (or tap) = taller */
@media (max-width: 899px) {
  dialog.cls[open] { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 58dvh; padding: 0 16px; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px 16px 0 0; box-shadow: 0 -1px 0 var(--line), 0 -8px 28px rgba(0,0,0,.2); z-index: 10; animation: sheet-up .2s ease-out; transition: transform .18s ease-out; }
  dialog.cls.tall[open] { max-height: calc(100dvh - 52px - env(safe-area-inset-top)); }
  dialog.cls[open] > .grab { display: block; position: relative; flex: none; height: 28px; margin: 0 -16px; touch-action: none; cursor: grab; }
  .grab::before { content: ""; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; border-radius: 3px; background: var(--edge); transform: translateX(-50%); }
  dialog.cls[open] > form { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  dialog.cls .cls-facts, dialog.mat .cls-facts { max-height: none; overflow: visible; }
  /* Done always in reach */
  dialog.cls form > .row { position: sticky; bottom: 0; z-index: 1; margin-top: 0; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--panel); }
  @keyframes sheet-up { from { transform: translateY(48px); opacity: .5; } to { transform: none; opacity: 1; } }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { dialog.cls[open] { animation: none; transition: none; } }

/* a finger needs about 40 px: small controls keep their look and get a bigger invisible touch area; list rows
   get a real 40 px; form fields use 16 px text so iOS doesn't zoom in when one is tapped */
@media (pointer: coarse) {
  .flow { overflow: hidden; }
  .seg { overflow: visible; }
  .seg button:first-child { border-radius: 7px 0 0 7px; }
  .seg button:last-child { border-radius: 0 7px 7px 0; }
  .seg button, .chip, .lg-fit, .xbar .hyp-x, .lg-grades, .sc-copy, .sc-mine, .sc-ftog, .tip, .hm-or button,
  dialog .ok, dialog .ghost, .pf-menu .ghost, .pf-menu .ok, .cls-cat, .toast button, .chosen .x, dialog label.sw-row,
  #clsTakenRow, .sem-go, .sc-add { position: relative; }
  .seg button::after, .chip::after, .lg-fit::after, .xbar .hyp-x::after, .lg-grades::after, .sc-copy::after, .sc-mine::after,
  .sc-ftog::after, .pf-circle::after, .tip::after, .hm-or button::after, dialog .ok::after, dialog .ghost:not(.file)::after,
  .pf-menu .ghost::after, .pf-menu .ok::after, .cls-cat::after, .toast button::after, .chosen .x::after,
  dialog label.sw-row::after, .sc-add::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%);
  }
  /* a plan semester's heading (opens Schedule): its touch area grows up into the heading's own height */
  .sem h3 { min-height: 40px; align-items: flex-end; }
  .sem-go::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 40px; }
  .xbar { position: relative; z-index: 2; }
  label > input[role="switch"] { z-index: 1; } /* the switch itself stays on top of its label's touch area */
  .sem li { min-height: 40px; align-items: center; }
  .pick-list button, .cl-row, .imp-list label, .sc-add { min-height: 40px; }
  .cls-facts button.ck { min-height: 40px; display: inline-flex; align-items: center; }
  .cls-raw summary { padding: 10px 0; }
  .sc-terms { padding-top: 3px; padding-bottom: 0; }
  .sc-tg button { min-height: 40px; }
  .sc-nav button { width: 40px; height: 40px; }
  .sc-filt .seg button { min-height: 40px; }
  .seg.days button { width: 40px; }
  select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { font-size: 16px !important; }
  dialog select, .sc-filt select, .pick input[type="search"], .imp .file { min-height: 40px; }
}
@media (pointer: coarse) { .legend .lg-fit::after, .legend .lg-grades::after { transform: translate(-50%, calc(-50% + 3px)); } }
@media (pointer: coarse) { .cpv { min-height: 40px; } }