/* Colors, radii, and the wash come from the iPhone app's Theme.swift. */
:root {
  color-scheme: light dark;
  --accent: #0178d7;
  --warn: #ca9c4f;
  --warn-ink: #573d0f;
  --bg: #ebf1f8;
  --wash: #6289b5;
  --ink: #111820;
  --ink-2: rgba(40, 52, 66, .72);
  --ink-3: rgba(40, 52, 66, .5);
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-shadow: 0 8px 28px rgba(35, 60, 95, .12), 0 1px 2px rgba(35, 60, 95, .06);
  --line: rgba(60, 80, 105, .2);
  --sheet: rgba(238, 243, 249, .92);
  --radius: 28px;
  --radius-sm: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6bafFA;
    --warn-ink: #f2d99e;
    --bg: #070e16;
    --wash: #325880;
    --ink: #f1f5fa;
    --ink-2: rgba(226, 235, 245, .7);
    --ink-3: rgba(226, 235, 245, .46);
    --glass: rgba(255, 255, 255, .075);
    --glass-strong: rgba(255, 255, 255, .13);
    --glass-edge: rgba(255, 255, 255, .13);
    --glass-shadow: 0 8px 28px rgba(0, 0, 0, .4);
    --line: rgba(200, 220, 240, .17);
    --sheet: rgba(16, 24, 34, .94);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wash {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(420px 420px at 12% 6%, color-mix(in srgb, var(--wash) 45%, transparent), transparent),
    radial-gradient(360px 360px at 92% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
    radial-gradient(460px 460px at 70% 100%, color-mix(in srgb, var(--wash) 40%, transparent), transparent);
}
main {
  max-width: 640px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 112px) max(16px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 24px;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
svg.icon.solid { fill: currentColor; stroke-width: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loading { padding: 80px 0; text-align: center; color: var(--ink-2); }

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}
.card { padding: 14px; border-radius: var(--radius); }
.card.primary { padding: 18px; background: color-mix(in srgb, var(--accent) 6%, var(--glass)); }
.navbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.navbar h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.kicker { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.icon-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; color: var(--accent);
}
.icon-btn:disabled { opacity: .4; cursor: default; }
.fine { font-size: 12px; color: var(--ink-3); padding: 0 4px; }
.caption { font-size: 12px; color: var(--ink-2); padding: 0 4px; }
.band-label { font-size: 15px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack-lg { display: flex; flex-direction: column; gap: 14px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 38px 18px; text-align: center; }
.empty .big { font-size: 44px; color: var(--accent); line-height: 1; }
.empty h2 { font-size: 22px; font-weight: 600; }
.empty p { font-size: 15px; color: var(--ink-2); }
.prominent {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
}
@media (prefers-color-scheme: dark) { .prominent { color: #06121f; } }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 20px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 36px;
  border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.chip.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--glass)); }
.chip.following { color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--glass)); }
.day-chip {
  flex: none; min-width: 150px; padding: 12px 16px; border-radius: 22px; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
}
.day-chip strong { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.day-chip strong svg { font-size: 11px; }
.day-chip span { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.day-chip.active { background: color-mix(in srgb, var(--accent) 18%, var(--glass)); }
.day-chip.active strong { color: var(--accent); }

.week-title { font-size: 22px; font-weight: 700; }
.summary { display: flex; align-items: baseline; gap: 8px; }
.summary b { font-size: 34px; font-weight: 700; line-height: 1; }
.summary > span { color: var(--ink-2); }
.summary .days {
  margin-left: auto; color: var(--accent); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.note { font-size: 13px; color: var(--ink-2); }
.warning {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; font-size: 13px; color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent);
  border-radius: var(--radius-sm);
}
.warning svg { margin-top: 2px; }
.short-term { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }

.grid-wrap { padding: 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 35%, transparent); }
.grid { position: relative; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.grid-day, .grid-hour, .grid-rule, .grid-sep, .block-wrap, .grid-empty { position: absolute; }
.grid-day { top: 0; height: 26px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.grid-hour { left: 0; width: 38px; font-size: 10px; line-height: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.grid-rule { left: 40px; right: 0; height: 1px; background: var(--line); transform: scaleY(.5); }
.grid-sep { top: 26px; bottom: 0; width: 1px; background: var(--line); transform: scaleX(.5); }
.grid-empty { left: 40px; right: 0; top: 26px; bottom: 0; display: grid; place-items: center; padding: 0 24px; text-align: center; font-size: 13px; color: var(--ink-3); pointer-events: none; }
.block {
  --c: var(--accent);
  position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 3px 4px 3px 6px;
  border-radius: 9px; border: 1px solid color-mix(in srgb, var(--c) 65%, transparent);
  background: color-mix(in srgb, var(--c) 22%, transparent); cursor: pointer;
}
.block::before { content: ""; position: absolute; left: 1px; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--c); }
.block b { font-size: 10.5px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 430px) { .block b { font-size: 9.5px; } }
@media (max-width: 340px) { .block b { font-size: 8.5px; letter-spacing: -.03em; } }
.block small { font-size: 9.5px; color: var(--ink-2); }
.block small svg { font-size: 8px; }
.block.light { background: color-mix(in srgb, var(--c) 10%, transparent); border-style: dashed; }
.block.clash { border: 2px solid var(--warn); }
.lock-badge {
  position: absolute; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff;
  animation: pop .4s cubic-bezier(.3, 1.6, .5, 1);
}
.lock-badge i { display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-style: normal; font-size: 11px; }
.block-wrap .lock-badge { left: -4px; bottom: -4px; width: 22px; height: 22px; z-index: 2; }
.block-wrap .lock-badge i { width: 16px; height: 16px; font-size: 9px; }
.row-wrap .lock-badge { left: 4px; bottom: 4px; width: 30px; height: 30px; z-index: 2; }
.row-wrap .lock-badge i { width: 19px; height: 19px; }
@keyframes pop { from { transform: scale(.2) rotate(-40deg); opacity: 0; } }

[data-hold] { transition: transform .18s ease, opacity .18s ease; }
[data-hold].pressing { transform: scale(.975); }
[data-hold].pressing-deep { transform: scale(.94); }
.grid[data-hold].pressing, .grid[data-hold].pressing-deep { transform: none; }

.row-wrap { position: relative; }
.class-row {
  display: flex; gap: 12px; padding: 14px 14px 32px; border-radius: 22px; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.class-row .bar { flex: none; width: 4px; border-radius: 2px; }
.class-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.class-row h3 { font-size: 17px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.class-row h3 svg { font-size: 12px; color: var(--warn); }
.class-row p { font-size: 15px; }
.class-row .when { font-size: 13px; color: var(--ink-2); }
.class-row .crn { font-size: 12px; color: var(--ink-2); }
.class-row .format { color: var(--ink-2); font-size: 14px; }
.exams { font-size: 12px; font-weight: 600; color: var(--accent); display: flex; flex-direction: column; gap: 2px; }
.exams span { font-size: 11px; font-weight: 400; color: var(--ink-2); }

.search { position: sticky; top: calc(env(safe-area-inset-top) + 8px); z-index: 3; border-radius: 999px; }
.search input {
  width: 100%; border: 0; outline: 0; background: none; padding: 11px 16px 11px 38px; font-size: 16px; border-radius: 999px;
}
.search svg { position: absolute; left: 14px; top: 13px; color: var(--ink-2); }
.subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.subject {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
}
.subject strong { font-size: 17px; font-weight: 600; }
.subject span { font-size: 15px; min-height: 2.7em; }
.subject small { font-size: 12px; color: var(--ink-2); }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-size: 16px; padding: 6px 4px 0; }
.class-card { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border-radius: var(--radius); }
.class-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.class-card h3 { font-size: 17px; font-weight: 600; }
.class-card p { font-size: 15px; }
.class-card small { font-size: 12px; color: var(--ink-2); }
.add {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 999px; font-size: 15px; font-weight: 600;
  border: 0; background: var(--accent); color: #fff;
}
@media (prefers-color-scheme: dark) { .add { color: #06121f; } }
.add.added { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--glass-edge); }
.more { align-self: center; padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.none { text-align: center; padding: 60px 16px; color: var(--ink-2); }

.tabbar {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); transform: translateX(-50%); z-index: 5;
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
}
.tabbar a {
  position: relative; width: 104px; padding: 7px 8px 5px; border-radius: 999px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tab-icon { font-size: 21px; line-height: 1; }
.badge {
  position: absolute; top: 3px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: #e5484d; color: #fff; font-size: 11px; line-height: 17px; text-align: center;
}
.badge[hidden] { display: none; }

dialog#sheet {
  position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 640px; max-height: min(88dvh, 860px); height: 88dvh;
  padding: 0; border: 0; border-radius: 28px 28px 0 0; color: inherit; background: var(--sheet); overflow: hidden;
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
}
dialog#sheet[open] { display: flex; flex-direction: column; animation: rise .32s cubic-bezier(.2, .9, .3, 1); }
dialog#sheet::backdrop { background: rgba(5, 12, 22, .35); animation: fade .25s ease; }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.sheet-head { position: relative; flex: none; padding: 18px 64px 12px 20px; }
.sheet-head h2 { font-size: 20px; font-weight: 700; }
.sheet-head p { font-size: 13px; color: var(--ink-2); }
.sheet-head .icon-btn { position: absolute; right: 12px; top: 10px; background: var(--accent); color: #fff; border: 0; }
@media (prefers-color-scheme: dark) { .sheet-head .icon-btn { color: #06121f; } }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px calc(env(safe-area-inset-bottom) + 24px); display: flex; flex-direction: column; gap: 10px; }
.sheet-body > * { flex: none; }
.sheet-label { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 4px 0; }
.sheet-body .chips { margin: 0 -16px; }
.section-list { border-radius: var(--radius-sm); overflow: hidden; background: var(--glass); border: 1px solid var(--glass-edge); }
.section-row { border-bottom: 1px solid var(--line); }
.section-row:last-child { border-bottom: 0; }
.section-row.dim { opacity: .5; }
.section-main {
  display: flex; gap: 10px; padding: 12px; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.section-main .glyph { flex: none; width: 22px; color: var(--accent); text-align: center; font-size: 17px; }
.section-main .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.section-main .id { font: 600 15px ui-monospace, "SF Mono", Menlo, Consolas, monospace; display: flex; gap: 6px; align-items: center; }
.section-main .id svg { color: var(--accent); font-size: 12px; }
.section-main .when { font-size: 13px; }
.section-main .who { font-size: 12px; color: var(--ink-2); }
.section-main .lock-mark { color: var(--accent); }
.overlap { font-size: 12px; font-weight: 600; color: var(--warn-ink); display: flex; gap: 4px; align-items: center; }
.section-more { padding: 0 12px 12px 44px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); }
.section-more .actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.section-more a, .section-more button { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; background: none; border: 0; padding: 4px 0; display: inline-flex; gap: 4px; align-items: center; }
.remove { padding: 12px; border-radius: var(--radius-sm); font-size: 16px; color: #d13438; display: flex; gap: 6px; align-items: center; justify-content: center; }
@media (prefers-color-scheme: dark) { .remove { color: #ff6b6b; } }

.print-head { display: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media print {
  :root { color-scheme: light; --ink: #000; --ink-2: #333; --ink-3: #555; --glass: #fff; --glass-edge: #ddd; --line: #ccc; --accent: #0178d7; --bg: #fff; --warn-ink: #573d0f; }
  body { background: #fff; }
  .wash, .tabbar, .chips, .navbar, .lock-note, .lock-badge, dialog#sheet { display: none !important; }
  .print-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; font-size: 12px; }
  .print-head strong { font-size: 20px; }
  main { max-width: none; padding: 0; gap: 12px; }
  .glass { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .class-row { padding-bottom: 10px; }
  .class-row, .grid-wrap { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}