/* Conflate: black and white only, laid out like the dark finance-dashboard reference.
   Loaded after styles.css by index.html; <html class="dark"> switches to Dark (Settings → Appearance).

   Layout   a full-height sidebar with section labels, a breadcrumb header, and content sitting straight on
            the page (no big glass window) in flat panels with a hairline border and a faint grain
   Color    neutrals only. Calendar kinds differ by fill instead of hue: classes a white-to-grey fill (black-to-grey
            in Light; just a grey border in To do), athletics mid grey, meetings dark with a border, Canvas due dates quiet, and anything you
            added yourself outlined with a dashed line (like the reference's "add another currency" card)
   Type     Satoshi for headings, Inter for UI text, Geist Mono for numbers */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display: "Satoshi", "Inter", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --dots: var(--mono);
  --side: 232px;

  /* Light: white panels on a pale grey page */
  --bg: #f1f1f1;
  --haze: rgba(255, 255, 255, 0.9);
  --panel: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  --side-bg: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  --text: #0a0a0a;
  --text-2: rgba(10, 10, 10, 0.68);
  --text-3: rgba(10, 10, 10, 0.42);
  --line: rgba(10, 10, 10, 0.06);
  --border: rgba(10, 10, 10, 0.08);
  --top-hi: rgba(255, 255, 255, 1);
  --pill: rgba(10, 10, 10, 0.025);
  --tint: #ffffff;
  --raised: #ffffff;
  --raised-hover: #f4f4f4;
  --sunk: rgba(10, 10, 10, 0.05);
  --shadow: rgba(10, 10, 10, 0.05);
  --grain: 0.035;
  --solid: #0a0a0a;
  --on-solid: #ffffff;
  --chip: linear-gradient(180deg, #2a2a2a, #0a0a0a);    /* small icon tiles: always dark with a white icon */
  --chip-edge: rgba(255, 255, 255, 0.1);
  --pink: #0a0a0a; --green: #0a0a0a; --lime: #0a0a0a;

  /* calendar kinds: fill, text, border (and its style), and a solid tone for checkmarks */
  --class-bg: linear-gradient(180deg, #2a2a2a, #8a8a8a); --class-fg: #ffffff; --class-bd: transparent;
  --ath-bg: linear-gradient(180deg, #7a7a7a, #5e5e5e);   --ath-fg: #ffffff;   --ath-bd: transparent;
  --meet-bg: #ffffff;                                    --meet-fg: #0a0a0a;  --meet-bd: rgba(10, 10, 10, 0.16);
  --due-bg: #ebebeb;                                     --due-fg: #0a0a0a;   --due-bd: rgba(10, 10, 10, 0.06);
  --mine-bg: rgba(255, 255, 255, 0.6);                   --mine-fg: #0a0a0a;  --mine-bd: rgba(10, 10, 10, 0.45);
  --allday-bg: #e4e4e4;                                  --allday-fg: rgba(10, 10, 10, 0.7);
}

html.dark {
  color-scheme: dark;
  /* Dark: near-black panels on black, with a soft white haze at the top of the page */
  --bg: #030303;
  --haze: rgba(255, 255, 255, 0.07);
  --panel: linear-gradient(180deg, #151515 0%, #0b0b0b 100%);
  --side-bg: linear-gradient(180deg, #121212 0%, #080808 100%);
  --text: #f5f5f5;
  --text-2: rgba(245, 245, 245, 0.7);
  --text-3: rgba(245, 245, 245, 0.42);
  --line: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.07);
  --top-hi: rgba(255, 255, 255, 0.07);
  --pill: rgba(255, 255, 255, 0.035);
  --tint: #171717;
  --raised: #1d1d1d;
  --raised-hover: #242424;
  --sunk: rgba(255, 255, 255, 0.06);
  --shadow: rgba(0, 0, 0, 0.5);
  --grain: 0.06;
  --solid: #f5f5f5;
  --on-solid: #0a0a0a;
  --chip: linear-gradient(180deg, #2b2b2b, #161616);
  --chip-edge: rgba(255, 255, 255, 0.09);
  --pink: #f5f5f5; --green: #f5f5f5; --lime: #f5f5f5;

  --class-bg: linear-gradient(180deg, #dcdcdc, #7c7c7c); --class-fg: #0a0a0a; --class-bd: transparent;
  --ath-bg: linear-gradient(180deg, #4a4a4a, #343434);   --ath-fg: #ffffff;   --ath-bd: rgba(255, 255, 255, 0.06);
  --meet-bg: linear-gradient(180deg, #232323, #191919);  --meet-fg: #f5f5f5;  --meet-bd: rgba(255, 255, 255, 0.14);
  --due-bg: #141414;                                     --due-fg: #f5f5f5;   --due-bd: rgba(255, 255, 255, 0.1);
  --mine-bg: rgba(255, 255, 255, 0.03);                  --mine-fg: #f5f5f5;  --mine-bd: rgba(255, 255, 255, 0.45);
  --allday-bg: #1c1c1c;                                  --allday-fg: rgba(245, 245, 245, 0.7);
}

/* ---------- Type ---------- */
body { font-family: var(--font); }
.page-head h1, .up-head h2, .set-card h3, .conn-title h3, .modal h2, .folder .f-name, .wordmark { font-family: var(--display); }
.page-head h1 { font-weight: 700; letter-spacing: -0.035em; font-size: 38px; }
.page-head p { font-size: 14px; }
.up-head h2, .set-card h3, .conn-title h3, .modal h2 { font-weight: 700; letter-spacing: -0.015em; }
.up-head h2 { font-size: 16px; }
/* section titles are small grey labels, like "Balance Spendings" in the reference */
.section-title { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-3); margin: 28px 4px 10px; }
.dots, .pct, .t-due .when, .act-time, .mail-time, .cal-dayhead .num, .cal-hours .lab, .code-row .code {
  font-family: var(--mono); font-feature-settings: "zero" 1; letter-spacing: -0.02em;
}
.dots { font-weight: 500; }

/* ---------- Page: flat black (or pale grey) with a soft haze from the top ---------- */
body { background: radial-gradient(ellipse 70% 45% at 55% -8%, var(--haze), transparent 70%) fixed, var(--bg); }
.scene { display: none; }

/* ---------- Panels: flat, hairline border, a faint highlight along the top edge ---------- */
.chrome, .window { -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass { background: var(--panel); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--border), 0 10px 30px var(--shadow); }
.chrome::after, .window::after, .glass::after { background: linear-gradient(180deg, var(--top-hi), transparent 30%); }
.glass:hover { background: var(--panel); }

/* ---------- Main area: no big window, content sits on the page ---------- */
main.window { background: none; box-shadow: none; border-radius: 0; }
main.window::after { display: none; }

/* ---------- Header: breadcrumb on the left, connections and you on the right ---------- */
.topbar { background: none; box-shadow: none; border-radius: 0; height: 56px; padding: 0; }
.topbar::after { display: none; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.crumb-root, .crumb-sep { color: var(--text-3); }
.crumb-here { color: var(--text); font-weight: 500; }
.top-right { display: flex; align-items: center; gap: 14px; }
.top-right .me { gap: 0; }
.me-name { display: none; }  /* just the avatar, like the reference */
.me-avatar {
  width: 38px; height: 38px; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-edge), 0 4px 12px var(--shadow);
}
.pill { background: var(--tint); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
button.pill:hover { background: var(--raised-hover); }
.brand.brand-m { display: none; }

/* connection dots in black and white: connected glows, not connected is an empty ring, expiring is half-filled */
.dot.live { background: var(--text); box-shadow: 0 0 6px 1px var(--text-3); }
.dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.dot.warn { background: linear-gradient(90deg, var(--text) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--text); }
.conn-status.tone-live::before { background: var(--text); box-shadow: none; }
.conn-status.tone-off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.conn-status.tone-warn::before { background: linear-gradient(90deg, var(--text) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--text); }

/* ---------- Brand mark ---------- */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark { width: 28px; height: 28px; flex: none; }
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
/* logo.svg is the light C; in Light it's turned dark so it shows on white */
html:not(.dark) .brand-mark, html:not(.dark) .start-mark { filter: invert(1); }

/* ---------- Desktop: full-height sidebar with labels ---------- */
@media (min-width: 761px) {
  .sidebar {
    top: 0; left: 0; bottom: 0; width: var(--side); padding: 22px 14px; gap: 2px; border-radius: 0; overflow-y: auto; overflow-x: hidden;
    background: var(--side-bg); box-shadow: inset -1px 0 0 var(--border);
  }
  .sidebar::after { display: none; }
  .sidebar .brand { display: flex; flex-direction: row; width: auto; height: auto; padding: 0 8px; margin-bottom: 18px; border-radius: 0; color: var(--text); }
  .sidebar .brand:hover { background: none; }
  .sidebar .brand .wordmark { display: block; }
  .sidebar a[data-tab] {
    width: auto; height: 40px; border-radius: 12px; padding: 0 12px; display: flex; align-items: center; gap: 12px;
    color: var(--text-2); font-size: 14px; font-weight: 500;
  }
  .sidebar a[data-tab] span { display: block; }
  .sidebar a[data-tab]::after { display: none; }
  .sidebar a[data-tab]:hover { background: var(--sunk); color: var(--text); }
  /* the selected row: a lifted panel, like "Home" in the reference */
  .sidebar a[data-tab].active { color: var(--text); background: var(--raised); box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 var(--top-hi), 0 4px 14px var(--shadow); }
  .sidebar svg { width: 19px; height: 19px; }
  /* you, at the bottom of the sidebar: avatar, name and sign-in email; opens Settings */
  .side-me {  /* set off by a line across the top of it, the full width of the sidebar */
    display: flex; align-items: center; gap: 10px; width: calc(100% + 28px); margin: auto -14px -22px; padding: 16px 22px 20px;
    border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none;
    font: inherit; text-align: left; color: var(--text); cursor: pointer;
  }
  .side-me:hover .side-me-text b { text-decoration: underline; text-underline-offset: 3px; }
  .side-me-avatar {
    flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
    color: #fff; background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-edge);
  }
  .side-me-text { min-width: 0; display: grid; gap: 1px; }
  .side-me-text b, .side-me-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me-text b { font-size: 13px; font-weight: 500; }
  .side-me-text small { font-size: 11.5px; color: var(--text-3); }

  .topbar { position: absolute; top: 14px; left: calc(var(--side) + 32px); right: 32px; }
  main { margin: 80px 32px 28px calc(var(--side) + 32px); padding: 10px 0 40px; min-height: 0; }
}

/* ---------- Phone: the bottom bar from styles.css, in the new colors ---------- */
@media (max-width: 760px) {
  .sidebar { background: var(--raised); box-shadow: inset 0 0 0 1px var(--border), 0 10px 30px var(--shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .sidebar .brand, .side-me { display: none; }
  .sidebar a.active { color: var(--on-solid); background: var(--solid); box-shadow: none; }
  .brand.brand-m { display: flex; margin-right: 4px; }
  .crumb-root, .crumb-sep { display: none; }
  .topbar { height: 50px; }
  .top-right { gap: 8px; }
  .me-avatar { width: 32px; height: 32px; font-size: 12px; }
  main { margin: 70px 10px 100px; padding: 12px 6px 28px; }
  .page-head h1 { font-size: 30px; }
  .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grade-card.blob { padding: 14px 14px 12px; }
  .grade-card .score { margin-top: 14px; }
  .grade-card .pct { font-size: 28px; }
}

/* ---------- Controls ---------- */
.segmented { background: var(--sunk); box-shadow: none; }
.segmented button.on { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--border), 0 2px 8px var(--shadow); }
.btn { background: var(--tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn:hover { background: var(--raised-hover); }
/* the one bright action: solid white in Dark, solid black in Light (the reference's orange "Add Funds") */
.btn.dark, .btn.danger { color: var(--on-solid); background: var(--solid); box-shadow: 0 6px 18px var(--shadow); }
.btn.dark:hover, .btn.danger:hover { filter: none; opacity: 0.88; }
.chip-lime { background: var(--solid); color: var(--on-solid); }

/* ---------- Icon tiles (class folders, Settings, Athletics, pop-ups): one dark tile, white icon ---------- */
.blob, .avatar, .mail-avatar.blob-dot {
  color: #fff; background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-edge), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.folder-blob, .conn-icon { border-radius: 14px; }

/* ---------- Grade cards: textured panels with a big mono number, like the ETH / EURO / YEN cards ---------- */
.grade-card.blob {
  isolation: isolate; text-align: left; padding: 18px 18px 14px; color: var(--text);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--border), 0 10px 30px var(--shadow); border-radius: 18px;
}
.grade-card.blob::before {  /* the fine grain on the reference's cards, strongest in the top-right corner */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(120% 100% at 100% 0%, #000 20%, transparent 75%);
}
html.dark .grade-card.blob::before { opacity: 0.22; filter: invert(1); }
.grade-card .code { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; opacity: 1; }
.grade-card .name { color: var(--text-3); opacity: 1; font-size: 12.5px; }
.grade-card .score { justify-content: flex-start; margin-top: 22px; }
.grade-card .pct { font-size: 34px; text-shadow: none; }
.grade-card .pct small { font-family: var(--mono); font-size: 15px; color: var(--text-3); opacity: 1; }
.grade-card .letter { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); font-family: var(--mono); }
.grade-card .note-line { color: var(--text-3); font-size: 12px; margin-top: 6px; opacity: 1; }
.grade-card.no-grade { color: var(--text); }
.grade-card.no-grade .pct { color: var(--text-3); }
.grade-card .ticks { opacity: 1; }
.grade-card .ticks i, .grade-card.no-grade .ticks i { background: var(--text-3); opacity: 0.6; }
.grade-card.hue-green .note-line::before { content: "↗ "; color: var(--text); }  /* on track */
.grade-card.hue-red .note-line::before { content: "↘ "; color: var(--text); }    /* at risk */

/* ---------- Rows: tasks, mail, files, modules ---------- */
.task, .mail, .file, .module-row { background: var(--pill); box-shadow: inset 0 0 0 1px var(--line); }
.task:hover, .mail:hover, .file:hover, .module-row:hover { background: var(--sunk); }
.task.moving { background: var(--raised); box-shadow: 0 14px 30px var(--shadow); }
.task::after { background: var(--text-2); }
.check { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.task.done .check { background: var(--solid); }
.task.done .check svg { stroke: var(--on-solid); }
.tag { background: var(--raised); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
.tag::before { background: var(--text-2); }
.stars .off { fill: var(--sunk); }
html.dark .stars .off { fill: rgba(255, 255, 255, 0.12); }
.star-tip, .act-tip { background: var(--raised); box-shadow: inset 0 0 0 1px var(--border), 0 10px 28px var(--shadow); }
.tip-bar { background: var(--sunk); }
.tip-bar i { background: linear-gradient(90deg, var(--text-3), var(--text)); }
.mail-avatar { background: var(--raised); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
.mail-list, .todo-activities.scrolls, .todo-list.scrolls { scrollbar-color: var(--text-3) transparent; }
.t-due.urgent .when::before, .mail.unread .mail-time::before { background: var(--text); box-shadow: 0 0 6px var(--text-3); }
.todo-group span { background: var(--sunk); color: var(--text-2); }
.todo-del:hover, .ps-copy:hover { background: var(--sunk); }
.todo-new input, .set-input, .modal-input, .cal-command { background: var(--raised); box-shadow: inset 0 0 0 1px var(--border); }
.set-input:focus-within, .modal-input:focus, .cal-command:focus-within, .todo-new input:focus { box-shadow: inset 0 0 0 1.5px var(--text-2); }
.conn-status { background: var(--sunk); }
.conn-card.spotlight { box-shadow: inset 0 0 0 1.5px var(--text), 0 18px 50px var(--shadow); }
.conn-error, .cal-feedback.bad { color: var(--text); font-weight: 600; }
.module-row:focus-visible, .file.with-del:focus-visible { outline-color: var(--text-2); }
body.dragging-upload .ufolder-row { box-shadow: inset 0 0 0 1px dashed var(--text-3); }
.ufolder-row.drop-over { background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--text); }
.row-del { color: var(--text-2); }
.row-del:hover { background: var(--sunk); }
.row-del:focus-visible { outline-color: var(--text-2); }
.cal-cmd-icon { fill: var(--text); }
.cal-feedback button { color: var(--text); text-decoration: underline; }
.sk { background: linear-gradient(100deg, var(--pill) 30%, var(--sunk) 50%, var(--pill) 70%); background-size: 300% 100%; box-shadow: inset 0 0 0 1px var(--line); }
.toast { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--border), 0 10px 30px var(--shadow); }
.modal-backdrop { background: rgba(241, 241, 241, 0.6); }
html.dark .modal-backdrop { background: rgba(0, 0, 0, 0.6); }
.modal { background: var(--raised); box-shadow: inset 0 0 0 1px var(--border), 0 30px 80px var(--shadow); }
.code-row .code { background: var(--sunk); box-shadow: none; }
.ficon { background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-edge); }
.ficon.kind-pdf { background: linear-gradient(160deg, #f5f5f5, #d4d4d4); color: #0a0a0a; }
.ficon.kind-xls { background: linear-gradient(160deg, #8a8a8a, #5e5e5e); }
.ficon.kind-doc { background: linear-gradient(160deg, #3a3a3a, #1a1a1a); }
.ficon.kind-ppt { background: linear-gradient(160deg, #bdbdbd, #949494); color: #0a0a0a; }
html.dark .ficon.kind-doc { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* ---------- Calendar ---------- */
.cal-due { background: var(--pill); box-shadow: inset 0 0 0 1px var(--line); }
.cal-col { background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 52px); }
.cal-dayhead.today .num { background: var(--solid); color: var(--on-solid); box-shadow: 0 4px 14px var(--shadow); }
.cal-col.today { background-color: var(--pill); }
.now-line, .now-line::before { background: var(--text); }
.now-line { box-shadow: 0 0 8px var(--text-3); }

/* every calendar item takes its look from the kind variables below */
.event, .due-chip, .todo-activity, .todo-item.assignment, .todo-item.task, .cal-legend .lg-event, .cal-legend .lg-due {
  --k-bg: var(--meet-bg); --k-fg: var(--meet-fg); --k-bd: var(--meet-bd); --k-bs: solid;
  background: var(--k-bg); color: var(--k-fg); border: 1px var(--k-bs) var(--k-bd); text-shadow: none; box-shadow: none;
}
.event:hover, .due-chip:hover, .todo-activity:hover, .todo-item.assignment:hover, .todo-item.task:hover { box-shadow: 0 10px 24px var(--shadow); }
.event.kind-class, .todo-activity.kind-class, .cal-legend .lg-event.kind-class { --k-bg: var(--class-bg); --k-fg: var(--class-fg); --k-bd: var(--class-bd); }
.event.kind-athletics, .todo-activity.kind-athletics, .cal-legend .lg-event.kind-athletics { --k-bg: var(--ath-bg); --k-fg: var(--ath-fg); --k-bd: var(--ath-bd); }
.event.due, .due-chip, .todo-item.assignment, .cal-legend .lg-due { --k-bg: var(--due-bg); --k-fg: var(--due-fg); --k-bd: var(--due-bd); }
.event.src-mine, .todo-activity.src-mine, .cal-legend .lg-event.src-mine, .todo-item.task { --k-bg: var(--mine-bg); --k-fg: var(--mine-fg); --k-bd: var(--mine-bd); --k-bs: dashed; }
/* work sessions the homework planner added: a solid grey border, where tasks you typed yourself are dashed */
.todo-item.task.planned { --k-bg: var(--meet-bg); --k-fg: var(--meet-fg); --k-bd: var(--meet-bd); --k-bs: solid; }
/* in To do on Home, classes have no fill, just the same light grey border as meetings */
.todo-activity.kind-class { --k-bg: transparent; --k-fg: var(--text); --k-bd: var(--meet-bd); }
.due-chip.allday { --k-bg: var(--allday-bg); --k-fg: var(--allday-fg); --k-bd: transparent; }
.cal-legend .lg-event, .cal-legend .lg-due { width: 11px; height: 11px; }

/* text and controls inside those items follow the item's own text color */
.event span, .todo-activity .act-time, .todo-item .t-sub { color: var(--k-fg); opacity: 0.68; }
.event b, .todo-text, .todo-item.done .todo-text { color: var(--k-fg); }
.kind-tag.activity, .kind-tag.task { background: transparent; color: var(--k-fg); box-shadow: inset 0 0 0 1px currentColor; opacity: 0.7; }
.todo-item::after { background: var(--k-fg); box-shadow: none; }
.todo-item .check { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k-fg); opacity: 0.85; }
.todo-item .check:hover { background: var(--sunk); }
.todo-item.done .check { background: var(--k-fg); opacity: 1; }
.todo-item.done .check svg { stroke: var(--bg); }
.todo-item .grip, .todo-item .todo-del { color: var(--k-fg); }
.todo-item .todo-del:hover { background: var(--sunk); color: var(--k-fg); }
#todo .todo-item.dragging { box-shadow: 0 16px 36px var(--shadow); }

/* ---------- Athletics: placeholder until the tab is built ---------- */
.under-construction {
  display: grid; place-items: center; min-height: 55vh;
  font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--text-3);
}

/* ---------- Settings → Appearance: Light / Dark ---------- */
.theme-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.theme-choice {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--pill); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 14px; font-weight: 500; color: var(--text);
  transition: box-shadow 0.15s, background 0.15s;
}
.theme-choice:hover { background: var(--sunk); }
.theme-choice[aria-pressed="true"] { background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--text), 0 6px 16px var(--shadow); }
.theme-swatch { display: flex; width: 54px; height: 24px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.3); }
.theme-swatch i { flex: 1; }

/* ---------- Empty states: what each page shows before anything is connected ---------- */
.empty-note { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 14px; color: var(--text-3); font-size: 14px; }
.empty-note p { margin: 0; line-height: 1.45; max-width: 52ch; }
.grades-empty, .hint-bar { padding: 6px; margin-bottom: 18px; }
.page-head + .grades-empty { margin-bottom: 0; }
.start-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; }
.start-mark { width: 52px; height: 52px; flex: none; }
.start-text { flex: 1 1 260px; }
.start-text h2 { margin: 0 0 4px; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.start-text p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.start-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.link-btn {
  border: 0; padding: 0; background: none; font: inherit; color: var(--text-2); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); }

/* ---------- Welcome: the setup guide's slides, with a drawing of each screen ---------- */
.modal.welcome { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 14px 14px 16px; border-radius: 26px; }
.wl-stage {
  position: relative; display: grid; place-items: center; height: 210px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, var(--raised) 0%, transparent 70%), var(--sunk); box-shadow: inset 0 0 0 1px var(--line);
}
.wl-body { padding: 18px 10px 0; min-height: 196px; }
.wl-step { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.modal.welcome h2 { margin: 0 0 8px; font-size: 23px; }
.modal.welcome p { color: var(--text-2); font-size: 14.5px; }
.modal.welcome .steps { gap: 7px; margin: 0 0 6px; font-size: 14px; }
.modal.welcome .steps li::marker { color: var(--text-3); font-family: var(--mono); font-size: 12px; }
.modal.welcome .small-note { margin-top: 10px; }
.wl-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--text-2); }
.wl-points li { display: flex; align-items: center; gap: 10px; }
.wl-points svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; fill: none; stroke: var(--on-solid); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: var(--solid); }
.wl-points b { color: var(--text); font-weight: 600; }
.wl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 10px 0; }
.wl-dots { display: flex; gap: 6px; }
.wl-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: var(--text-3); opacity: 0.45; cursor: pointer; transition: width 0.25s, opacity 0.25s; }
.wl-dots button.on { width: 22px; opacity: 1; background: var(--text); }
.wl-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wl-nav .link-btn { margin-right: 6px; font-size: 13px; }

/* the drawings: small windows in the app's own colors */
.wl-window {
  position: relative; width: min(400px, 90%); border-radius: 12px; overflow: visible; font-size: 11px; color: var(--text);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--border), 0 16px 40px var(--shadow);
}
.wl-chrome { display: flex; align-items: center; gap: 5px; padding: 8px 10px; box-shadow: inset 0 -1px 0 var(--line); }
.wl-chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); opacity: 0.4; }
.wl-url { margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: var(--sunk); color: var(--text-2); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-page { display: grid; grid-template-columns: 92px 1fr; min-height: 128px; }
.wl-side { display: grid; align-content: start; gap: 3px; padding: 10px 8px; box-shadow: inset -1px 0 0 var(--line); }
.wl-side b { padding: 4px 7px; border-radius: 6px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-side b.on { color: var(--text); background: var(--sunk); }
.wl-main { display: grid; align-content: start; gap: 8px; padding: 12px 12px 14px; min-width: 0; }
.wl-h { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.wl-line { height: 6px; border-radius: 99px; background: var(--sunk); }
.wl-line.short { width: 60%; margin-top: -3px; }
.wl-btn {
  position: relative; justify-self: start; padding: 5px 10px; border-radius: 8px; font-weight: 600; white-space: nowrap;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--border);
}
.wl-btn.solid { color: var(--on-solid); background: var(--solid); box-shadow: none; }
.wl-field { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 9px; border-radius: 8px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.wl-field span:first-child { color: var(--text-3); font-weight: 600; }
.wl-field code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-copy { position: relative; padding: 3px 8px; border-radius: 6px; background: var(--sunk); font-weight: 600; }
.wl-selects { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-select { padding: 5px 8px; border-radius: 8px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-2); white-space: nowrap; }
.wl-select::after { content: " ▾"; color: var(--text-3); }
/* the thing to click: a ring that breathes, and a pointer resting on it */
.wl-stage .hot { box-shadow: 0 0 0 1.5px var(--text), 0 0 0 5px var(--sunk); animation: wl-pulse 2.2s ease-in-out infinite; }
@keyframes wl-pulse { 50% { box-shadow: 0 0 0 1.5px var(--text), 0 0 0 9px transparent; } }
.wl-cursor { position: absolute; right: -10px; bottom: -14px; width: 18px; height: 18px; fill: var(--solid); stroke: var(--on-solid); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 3px 5px var(--shadow)); animation: wl-tap 2.2s ease-in-out infinite; }
@keyframes wl-tap { 45%, 55% { transform: translate(-2px, -2px) scale(0.9); } }

/* slide 1: Canvas and Outlook flowing into a little dashboard */
.wl-overview { display: flex; align-items: center; gap: 4px; width: min(470px, 94%); }
.wl-sources { display: grid; gap: 14px; flex: none; }
.wl-source { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; font-size: 11px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border), 0 8px 20px var(--shadow); }
.wl-source b { display: block; font-size: 12px; }
.wl-source small { color: var(--text-3); font-size: 10px; }
.wl-tile { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; color: #fff; font-weight: 700; font-size: 12px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-edge); }
.wl-flow { width: 34px; height: 80px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 3 4; animation: wl-flow 1.2s linear infinite; }
@keyframes wl-flow { to { stroke-dashoffset: -14; } }
.wl-dash { flex: 1; width: auto; min-width: 0; }
.wl-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 10px 4px; }
.wl-grades span { height: 38px; padding: 6px 7px; border-radius: 8px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--border); }
.wl-grades em { font-style: normal; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.wl-todo { display: grid; gap: 5px; padding: 6px 10px 12px; }
.wl-row { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; background: var(--pill); box-shadow: inset 0 0 0 1px var(--line); }
.wl-row i { width: 9px; height: 9px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.3px var(--text-3); }
.wl-row b { height: 5px; border-radius: 99px; background: var(--text-3); opacity: 0.5; }
.wl-row.done i { background: var(--text-2); box-shadow: none; }
.wl-row.done b { opacity: 0.25; }
.wl-tag { margin-left: auto; padding: 1px 6px; border-radius: 99px; font-size: 9px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }

/* slide 4: Conflate's own Settings cards */
.wl-conns { display: grid; gap: 12px; width: min(380px, 88%); }
.wl-conn { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; font-size: 11px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border), 0 10px 26px var(--shadow); }
.wl-conn-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.wl-conn-text b { font-size: 12.5px; }
.wl-conn-text code { padding: 4px 7px; border-radius: 6px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--mono); font-size: 10px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-status { display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: var(--sunk); color: var(--text-2); font-weight: 500; white-space: nowrap; }
.wl-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); }

@media (max-width: 520px) {
  .modal.welcome { padding: 10px 10px 14px; border-radius: 22px; }
  .wl-stage { height: 176px; }
  .wl-body { min-height: 0; padding: 14px 6px 0; }
  .wl-page { grid-template-columns: 74px 1fr; min-height: 112px; }
  .wl-sources { gap: 10px; }
  .wl-source small { display: none; }
  .wl-foot { padding: 12px 6px 0; }
  .start-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .wl-stage .hot, .wl-cursor, .wl-flow { animation: none; } }
/* Home when Canvas has stopped answering: the same card, with a warning tile instead of the logo */
.start-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; font-family: var(--display); font-size: 24px; font-weight: 700; }

/* ---------- To do: work the planner couldn't fit before its deadline ---------- */
.plan-short { margin: 8px 4px 2px; padding: 8px 12px; border-radius: 12px; background: var(--sunk); font-size: 13px; color: var(--text-2); }
.plan-short p { margin: 2px 0; line-height: 1.4; }
.plan-short b { color: var(--text); font-weight: 600; }

/* Pop-ups scroll inside themselves when the screen is short (a phone held sideways), so their buttons stay reachable */
.modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal:focus { outline: none; }

/* Settings → Account: change password, delete account (app.js bindAccount) */
.acct-lead { margin: 6px 0 16px; }
#password-form [hidden], #delete-form [hidden] { display: none !important; }  /* .set-field and .btn set their own display */