/* =================================================================
   ASCEND - one stylesheet for the whole app
   (replaces style.css, pages.css, pages2.css and pages3.css)

    1. Colours and sizes (light theme)
    2. Dark theme: only the colours change
    3. Base
    4. App shell: side rail on computers, bottom bar on phones
    5. Page headings
    6. Cards and grids
    7. Buttons
    8. Forms
    9. Chips, bars and small labels
   10. Tabs
   11. Today: next step, number boxes, plan
   12. Lists (assessments, semesters, courses)
   13. Calculator
   14. Messages (flash and toast)
   15. Login, sign-up and other single-box pages
   16. Me page (account and data)
   17. Phones and tablets
   18. Reduced motion
   19. The graduation cap on the login page
   20. Small helpers
   21. Study: focus timer and study time
   22. Timetable
   23. Show or hide a password
   24. Online status of study partners
   25. Study Room
   26. Pair streaks
   27. Attendance
   28. Help, feedback and the founder page
   29. The Grades switch, the Today target card, and the landing page on phones
   ================================================================= */


/* ===== 1. Colours and sizes (light theme) ===== */
:root {
  --bg: #F6F2EA;          /* warm paper background */
  --surface: #FFFFFF;     /* cards */
  --surface-2: #EFE9DC;   /* tracks, tab bar, soft boxes */
  --ink: #1A1F2E;         /* main text */
  --ink-2: #3B4256;       /* labels */
  --muted: #5B6172;       /* quiet text */
  --line: #E6DFD1;        /* borders */
  --head: #14254F;        /* headings and big numbers */

  --primary: #14254F;     /* navy: main buttons and links */
  --primary-soft: #E8EBF4;
  --on-primary: #FFFFFF;

  --navy: #14254F;        /* side menu and the "next step" card */
  --navy-2: #1F3266;
  --rail-text: #D5DDF0;
  --gold: #E2B04A;        /* the one accent colour */
  --gold-soft: #FFF4DC;
  --gold-line: #EBD39B;
  --gold-ink: #6B4A00;    /* gold-coloured text that is still easy to read */

  --good: #12704F;  --good-soft: #DDF3EA;
  --warn: #8A4D00;  --warn-soft: #FFF1D6;
  --bad:  #9F2119;  --bad-soft:  #FDE7E4;

  --shadow: 0 1px 2px rgba(20, 37, 79, 0.05), 0 8px 24px rgba(20, 37, 79, 0.06);
  --radius: 20px;
  --radius-sm: 14px;
  --font: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
}


/* ===== 2. Dark theme: only the colours change ===== */
[data-theme="dark"] {
  --bg: #0E1324;
  --surface: #161D33;
  --surface-2: #222B48;
  --ink: #E9EDF7;
  --ink-2: #C5CCE0;
  --muted: #9AA3BD;
  --line: #2A3457;
  --head: #F2E3BE;

  --primary: #E2B04A;
  --primary-soft: #2E2410;
  --on-primary: #2B1D00;

  --navy: #0B1430;
  --navy-2: #1F2B52;
  --rail-text: #C5CDE3;
  --gold: #E2B04A;
  --gold-soft: #2E2410;
  --gold-line: #5A4718;
  --gold-ink: #F1CF83;

  --good: #5FD3A5;  --good-soft: #10352A;
  --warn: #F2B45A;  --warn-soft: #33280F;
  --bad:  #FF8D84;  --bad-soft:  #43171A;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}


/* ===== 3. Base ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  padding-top: env(safe-area-inset-top, 0px);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--head); }
h2 { font-size: 1.15rem; margin-bottom: 12px; }
h3 { font-size: 1rem; margin-bottom: 8px; }

a { color: var(--primary); }
p { margin: 0 0 10px; }

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


/* ===== 4. App shell ===== */
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  background: var(--navy);
  color: var(--rail-text);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-decoration: none;
}

.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--gold);
}

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-link svg { width: 22px; height: 22px; flex: none; }
.nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.nav-link[aria-current="page"] { background: rgba(255, 255, 255, 0.14); color: #ffffff; }

.rail-foot { display: grid; gap: 8px; }
.rail-name { margin: 0 12px 4px; color: #ffffff; font-weight: 600; font-size: 0.9rem; }
.rail-foot form { margin: 0; }

.rail-btn {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--rail-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.rail-btn:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

.main {
  margin-left: 236px;
  padding: 32px;
  max-width: 1040px;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--primary); }


/* ===== 5. Page headings ===== */
.page-head { margin-bottom: 20px; }
.page-head + .tabs { margin-top: 0; }
.page-head h1 { font-size: 1.9rem; margin-bottom: 4px; }

.eyebrow {
  margin: 0 0 6px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.lead { margin: 0; max-width: 620px; color: var(--muted); }
.hint { margin: 0 0 12px; color: var(--muted); font-size: 0.92rem; }
.hint a { font-weight: 600; }


/* ===== 6. Cards and grids ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.grid-3, .grid-2 { display: grid; gap: 16px; margin-bottom: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 > .card, .grid-2 > .card { margin-bottom: 0; }

.soft-card { background: var(--surface-2); box-shadow: none; }

.big {
  margin: 4px 0;
  color: var(--head);
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.05;
}
.big-text { font-size: 1.35rem; }

.sub { margin: 0; color: var(--muted); font-size: 0.9rem; }

.empty-state {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.soon-list { margin: 0; padding-left: 20px; line-height: 1.8; color: var(--ink-2); }


/* ===== 7. Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s, background 0.15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: wait; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-gold { background: var(--gold); color: #2b1d00; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--primary); filter: none; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--primary); filter: none; }
.btn-on-dark { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.4); }
.btn-small { min-height: 38px; padding: 6px 14px; font-size: 0.85rem; }
.btn-danger { color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); }
.btn-danger-solid { background: var(--bad); color: #ffffff; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.actions + .hint { margin-top: 12px; }

.link-like {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}


/* ===== 8. Forms ===== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.field {
  display: grid;
  gap: 6px;
  align-content: start;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
}
.field-full { grid-column: 1 / -1; }
.field-hint { font-weight: 400; color: var(--muted); }

.optional {
  margin-left: 8px;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--primary); }
input[type="range"] { padding: 0; min-height: 34px; border: 0; accent-color: var(--primary); }

.form-section h2 { margin-bottom: 12px; }
.form-error { margin: 0 0 16px; }

/* Result boxes under the calculators */
.result {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.7;
}
.result:empty { display: none; }


/* ===== 9. Chips, bars and small labels ===== */
.chip {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip-good { background: var(--good-soft); color: var(--good); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-bad  { background: var(--bad-soft);  color: var(--bad); }
.chip-quiet { background: var(--surface-2); color: var(--muted); }

.bar {
  height: 10px;
  margin: 10px 0 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.bar-good .bar-fill { background: var(--good); }
.bar-bad .bar-fill { background: var(--bad); }
@keyframes grow { from { width: 0; } }

/* Target (grey) against actual (blue) */
.compare { position: relative; height: 12px; margin: 10px 0 6px; border-radius: 999px; background: var(--surface-2); }
.compare-target { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--line); }
.compare-actual {
  position: absolute; left: 0; top: 3px; height: 6px; border-radius: 999px; background: var(--primary);
  animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.diff-up { color: var(--good); font-weight: 700; }
.diff-down { color: var(--bad); font-weight: 700; }


/* ===== 10. Tabs ===== */
.tabs {
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 18px 0 16px;
  padding: 4px;
  overflow-x: auto;
  background: var(--surface-2);
  border-radius: 999px;
}
.tab {
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--head); box-shadow: var(--shadow); }

/* Without JavaScript every panel shows. With it, only the chosen one. */
.js .panel { display: none; }
.js .panel.on { display: block; animation: rise 0.3s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }


/* ===== 11. Today ===== */
.today-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.greeting { margin: 0; color: var(--muted); font-size: 0.95rem; }
.today-title { font-size: 2rem; line-height: 1.12; margin: 4px 0 20px; max-width: 640px; }

.chip-gold { background: var(--gold-soft); color: var(--gold-ink); }

/* The navy "Your next step" card */
.next-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(20, 37, 79, 0.22);
}
[data-theme="dark"] .next-card { background: var(--navy-2); }
.next-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.next-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #E2C57E; }
.next-when { font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.next-title { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: #FFFFFF; }
.next-reason { margin: 0; color: #C9D3EE; line-height: 1.5; max-width: 560px; }
.next-card .actions { margin-top: 6px; }

/* Three small number boxes: CGPA, Target, You need */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.trio-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.trio-box span { display: block; font-size: 0.8rem; color: var(--muted); }
.trio-box strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--head); }
.trio-box.gold { background: var(--gold-soft); border-color: var(--gold-line); }
.trio-box.gold span, .trio-box.gold strong { color: var(--gold-ink); }
.status-line { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; }

/* Tonight's plan: a list of tick boxes */
.plan { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.plan li + li { border-top: 1px solid var(--surface-2); }
.plan label { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.plan input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; accent-color: var(--head); }
.plan .done { color: var(--muted); text-decoration: line-through; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.section-head h2 { margin: 0; }
.section-head .hint { margin: 0; font-weight: 600; }

/* Computers: next step on the left, the CGPA ring on the right */
.today-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.today-grid > .card, .today-grid > .next-card { margin-bottom: 0; }
.next-then { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #C9D3EE; font-size: 0.9rem; }
.next-then strong { color: #FFFFFF; }

/* The ring: CGPA as a share of the target */
.target-card { display: flex; align-items: center; gap: 20px; }
.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { stroke: var(--surface-2); }
.ring-fill {
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 326.7;                                    /* the circle's length */
  stroke-dashoffset: calc(326.7px * (1 - var(--pct, 0)));     /* how much stays empty */
  animation: ring-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ring-in { from { stroke-dashoffset: 326.7px; } }
.ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-num { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--head); }
.ring-of { margin-top: 2px; font-size: 0.75rem; color: var(--muted); }

.target-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.target-stats li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 10px; }
.target-stats span { color: var(--muted); font-size: 0.88rem; }
.target-stats strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--head); }
.target-stats li.gold { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 10px; }
.target-stats li.gold span, .target-stats li.gold strong { color: var(--gold-ink); }

/* Small line of semester GPAs */
.spark { display: block; width: 100%; height: 48px; margin-top: 6px; }
.spark polyline { fill: none; stroke: var(--head); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spark circle { fill: var(--gold); }


/* ===== 12. Lists ===== */
.list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }

.item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.item-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.item-main strong { display: block; }
.item-meta { color: var(--muted); font-size: 0.88rem; }

.scoreline { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 6px; font-size: 0.9rem; color: var(--muted); }
.scoreline strong { color: var(--ink); }
.reflection { margin: 8px 0 0; font-size: 0.9rem; color: var(--ink-2); }

.item-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.item-actions form { margin: 0; }

details.inline-form { width: auto; }
details.inline-form[open] { width: 100%; }   /* the form gets the full width once opened */
details.inline-form summary {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
details.inline-form summary::-webkit-details-marker { display: none; }
details.inline-form summary:hover { border-color: var(--primary); }
details.inline-form[open] summary { margin-bottom: 12px; background: var(--primary-soft); color: var(--primary); }
details.inline-form form { padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }

.trend-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; color: var(--ink-2); }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 12px; }


/* ===== 13. Calculator ===== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  padding: 8px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
td { padding: 4px 6px; }

#courses { table-layout: fixed; min-width: 360px; }
#courses th:nth-child(1), #courses td:nth-child(1) { width: 36px; }
#courses th:nth-child(3), #courses td:nth-child(3) { width: 84px; }
#courses th:nth-child(4), #courses td:nth-child(4) { width: 84px; }
#courses th:nth-child(5), #courses td:nth-child(5) { width: 56px; }
.row-num { color: var(--muted); font-weight: 700; }

.btn-remove {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
}
.btn-remove:hover { color: var(--bad); border-color: var(--bad); }

/* The live numbers under the course table */
.live {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
}
.live-label { display: block; font-size: 0.8rem; color: var(--muted); }
.live-value { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--head); }
.live-value-text { font-size: 1.15rem; }

.edit-note:empty { display: none; }
.edit-note {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.85rem;
  font-weight: 700;
}

.save-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 18px; }
.save-row .field { flex: 1 1 240px; }

/* Saved semesters */
.sem-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.sem-info strong { display: block; }
.sem-info span { color: var(--muted); font-size: 0.88rem; }
.sem-actions { display: flex; gap: 8px; }

/* Target: what each class needs */
.class-needs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.class-needs li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.class-needs small { color: var(--muted); font-weight: 400; }

/* Saved tab: one group per level */
.level-group + .level-group { margin-top: 26px; }
.level-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.level-head h3 { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--head); }
.level-head span { color: var(--muted); font-size: 0.88rem; }
.level-group .list { margin-top: 10px; }

/* The answer under Calculate GPA, and in the CGPA tab, with every step shown */
.answer { margin-top: 16px; }
.answer .live { margin-top: 0; }
.answer-title { margin: 18px 0 6px; font-size: 0.95rem; color: var(--ink-2); }
.breakdown { min-width: 420px; }
.breakdown th, .breakdown td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.breakdown td:first-child { font-weight: 600; }
.breakdown .num { text-align: right; }
.breakdown tfoot td { border-bottom: 0; font-weight: 700; color: var(--head); }
.formula {
  margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  background: var(--gold-soft); color: var(--gold-ink); font-weight: 600;
}

/* CGPA tab: tick the semesters to add up */
.pick-list { display: grid; gap: 12px; margin: 14px 0 6px; }
.pick-group { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.pick-group label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.pick-group label + label { border-top: 1px solid var(--line); }
.pick-level { background: var(--surface-2); }
.pick-row strong { font-weight: 500; }
.pick-group label span { margin-left: auto; color: var(--muted); font-size: 0.88rem; text-align: right; }
.pick-group input[type="checkbox"], .pick-extra input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: var(--head);
}
.pick-extra { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font-weight: 600; cursor: pointer; }
.pick-extra[hidden] { display: none; }
.manual-cgpa { margin-top: 20px; }


/* ===== 14. Messages ===== */
.flashes { margin-bottom: 16px; }
.flash {
  margin: 0 0 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--good-soft);
  color: var(--ink);
  font-weight: 600;
  border-left: 4px solid var(--good);
}
.flash-error { background: var(--bad-soft); border-left-color: var(--bad); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 40;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ===== 15. Single-box pages (login, sign-up, codes, errors, privacy) ===== */
.auth-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 16px;
  background: var(--bg);
}
.auth-box { width: 100%; max-width: 440px; }
.auth-box .brand { padding: 0; margin-bottom: 20px; color: var(--ink); }
.auth-box h1 { font-size: 1.7rem; margin-bottom: 10px; }
.auth-box .card { padding: 24px; }
.auth-box .field { margin-bottom: 14px; }
.auth-box .card .btn { width: 100%; }
.auth-box .result { margin: 0 0 14px; background: var(--bad-soft); }
.auth-lead { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }

.auth-switch { margin-top: 16px; text-align: center; color: var(--muted); }
.auth-switch a, .form-link a, .form-note a, .auth-foot a { font-weight: 600; }
.form-link { margin: 12px 0 0; text-align: center; font-size: 0.9rem; }
.form-note { margin: 12px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.auth-foot { margin-top: 24px; text-align: center; font-size: 0.85rem; color: var(--muted); }

.code-input { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; }

.resend-form {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin: 16px 0 0; color: var(--muted); font-size: 0.9rem;
}

.auth-box.error-page { text-align: center; }
.error-code { margin: 0; font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--gold); }

.auth-box.legal { max-width: 720px; }
.legal-section { margin-bottom: 24px; line-height: 1.65; }
.legal-section ul { margin: 0; padding-left: 20px; }
.legal-section li { margin-bottom: 6px; }

/* Landing page: the first page a visitor sees (see section 29 for phones) */
.landing { background: var(--bg); color: var(--ink); }
.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* 1. The promise, on navy, with a picture of the app */
.lp-hero { background: var(--navy); color: #ffffff; padding: 40px 0 56px; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.landing .brand { padding: 0; margin-bottom: 36px; }
.lp-eyebrow { margin: 0 0 12px; color: var(--gold); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-hero h1 { font-size: 2.9rem; line-height: 1.08; margin-bottom: 16px; color: #ffffff; }  /* white on navy */
.lp-hero .lead { color: #dbe3fb; font-size: 1.12rem; max-width: 560px; }
.lp-hero .actions { margin-top: 26px; }
.lp-small { margin: 14px 0 0; font-size: 0.88rem; color: #c9d4f3; }
.lp-small a { color: inherit; }

/* The phone: a small Today screen drawn with HTML */
.lp-phone {
  justify-self: center;
  width: 300px;
  padding: 12px;
  border-radius: 38px;
  background: #0A1128;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.lp-screen {
  display: grid;
  gap: 10px;
  padding: 18px 14px;
  border-radius: 28px;
  background: #F6F2EA;          /* always the light theme, like a screenshot */
  color: #1A1F2E;
  font-size: 0.72rem;
  line-height: 1.4;
}
.lp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-hello { color: #5B6172; }
.lp-chip { padding: 3px 8px; border-radius: 999px; background: #FFF4DC; color: #6B4A00; font-weight: 700; font-size: 0.66rem; }
.lp-title { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: #14254F; }
.lp-next { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: #14254F; color: #ffffff; }
.lp-next-label { color: #E2B04A; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-next strong { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; }
.lp-next-why { color: #c9d4f3; }
.lp-next-btn { justify-self: start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: #E2B04A; color: #2b1d00; font-weight: 700; }
.lp-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #ffffff; border: 1px solid #E6DFD1; }
.lp-card-title { font-family: var(--serif); font-weight: 600; color: #14254F; }
.lp-cgpa { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.lp-ring {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(#E2B04A calc(var(--pct) * 360deg), #EFE9DC 0);
}
.lp-ring b {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  font-family: var(--serif);
  font-size: 0.9rem;
  color: #14254F;
}
.lp-stats { display: grid; gap: 2px; }
.lp-stats span { display: flex; justify-content: space-between; color: #5B6172; }
.lp-stats b { color: #14254F; }
.lp-need { padding: 1px 6px; border-radius: 6px; background: #FFF4DC; }
.lp-class { display: flex; gap: 8px; align-items: center; color: #3B4256; }
.lp-class b { min-width: 52px; color: #14254F; }
.lp-class i { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: #EFE9DC; font-style: normal; font-size: 0.62rem; }
.lp-class i.lp-next-chip { background: #E8EBF4; color: #14254F; font-weight: 700; }

/* 2 to 5. The sections below the promise */
.lp-section { padding: 56px 0; }
.lp-section h2 { font-size: 1.9rem; margin-bottom: 10px; }
.lp-lead { margin: 0 0 26px; color: var(--muted); font-size: 1.05rem; max-width: 640px; }
.lp-soft { background: var(--surface-2); }
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-feature {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.lp-feature strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--head); }
.lp-feature span { color: var(--ink-2); font-size: 0.95rem; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; }
.lp-steps li { position: relative; padding: 18px 18px 18px 64px; border-radius: var(--radius-sm); background: var(--surface); }
.lp-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: #2b1d00;
  font-weight: 700;
}
.lp-steps strong { display: block; color: var(--head); }
.lp-steps span { color: var(--muted); font-size: 0.93rem; }
.lp-trust > * { max-width: 760px; }
.lp-trust-list { margin: 16px 0 0; padding-left: 20px; line-height: 1.7; color: var(--ink-2); }
.lp-trust-list li { margin-bottom: 8px; }
.lp-trust .lp-small { color: var(--muted); }
.lp-final { background: var(--navy); color: #ffffff; text-align: center; }
.lp-final h2 { color: #ffffff; }
.lp-final .actions { justify-content: center; margin-top: 18px; }
.lp-foot {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 22px 16px 30px;
  color: var(--muted);
  font-size: 0.9rem;
}
.lp-foot a { color: var(--ink-2); }


/* ===== 16. Me page ===== */
.data-list { margin: 8px 0 0; display: grid; gap: 10px; }
.data-list div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.data-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.data-list dt { color: var(--muted); font-size: 0.9rem; }
.data-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.danger-zone { border-color: var(--bad); }
.danger-zone h2 { color: var(--bad); }

.phone-only { display: none; }


/* ===== 17. Phones and tablets ===== */
@media (max-width: 900px) {
  /* The rail becomes a bar at the bottom with five buttons */
  .rail {
    inset: auto 0 0 0;
    width: auto;
    flex-direction: row;
    gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  }
  .rail .brand, .rail-foot { display: none; }
  .nav { flex-direction: row; justify-content: space-around; gap: 2px; }
  .nav-link { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 8px 2px; font-size: 0.7rem; }

  .main { margin-left: 0; padding: 18px 16px 110px; }

  .today-title { font-size: 1.6rem; }
  .today-grid { grid-template-columns: 1fr; }
  .ring { width: 108px; height: 108px; }
  .ring-num { font-size: 1.6rem; }

  .grid-3, .grid-2, .form-grid { grid-template-columns: 1fr; }
  .trio-box { padding: 10px; }
  .trio-box strong { font-size: 1.3rem; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .phone-only { display: block; }
}

@media (max-width: 600px) {
  .data-list div { grid-template-columns: 1fr; gap: 2px; }
  .card { padding: 18px; }

  /* Five tabs must fit across a phone screen */
  .tabs { gap: 0; }
  .tab { padding: 8px 9px; font-size: 0.84rem; }

  /* The course table fits the phone without sideways scrolling */
  #courses { min-width: 0; }
  #courses th:nth-child(1), #courses td:nth-child(1) { width: 26px; }
  #courses th:nth-child(3), #courses td:nth-child(3) { width: 58px; }
  #courses th:nth-child(4), #courses td:nth-child(4) { width: 66px; }
  #courses th:nth-child(5), #courses td:nth-child(5) { width: 48px; }
  td { padding: 3px; }
  th { padding: 6px 3px; }
  #courses input, #courses select { padding: 8px; }
  .btn-remove { width: 42px; }
  .live { gap: 8px 24px; }
  .breakdown { min-width: 0; font-size: 0.85rem; }
  .breakdown th, .breakdown td { padding: 8px 5px; }
}


/* ===== 18. Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ===== 19. The graduation cap over "back." on the login page ===== */
.auth-box h1.has-art { padding-top: 40px; }
.art-word { position: relative; display: inline-block; }
/* The cap sits on the start of the word; the scrolls lean just after the full stop.
   Each is placed from its own side, so it still fits if the font is wider or narrower. */
.art-cap { position: absolute; left: -2px; top: -36px; width: 64px; height: 50px; overflow: visible; }
.art-scrolls { position: absolute; right: -58px; top: -12px; width: 52px; height: 44px; overflow: visible; }
.cap-top { fill: var(--head); }
.cap-base { fill: #24386E; }
[data-theme="dark"] .cap-base { fill: #CBB98F; }


/* ===== 20. Small helpers ===== */
/* Text for screen readers only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.auth-box.error-page .brand { justify-content: center; }
.whatif-slider { margin: 16px 0; }
/* Anything with the hidden attribute stays hidden, even buttons */
[hidden] { display: none !important; }


/* ===== 21. Study: focus timer and study time ===== */
/* The running timer: a navy card like "Your next step" */
.focus-live {
  margin-bottom: 16px;
  padding: 28px 22px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #FFFFFF;
  text-align: center;
  box-shadow: 0 12px 28px rgba(20, 37, 79, 0.22);
}
[data-theme="dark"] .focus-live { background: var(--navy-2); }
.focus-label { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #E2C57E; }
.focus-time { margin: 12px 0 4px; font-family: var(--serif); font-size: 5rem; font-weight: 600; line-height: 1; }
.focus-live .bar { max-width: 460px; margin: 18px auto 12px; background: rgba(255, 255, 255, 0.14); }
.focus-live .bar-fill { background: var(--gold); animation: none; transition: width 1s linear; }
.focus-note { min-height: 1.5em; color: #C9D3EE; }
.focus-live .actions { justify-content: center; }

/* The streak chip on Today is a link to Study */
a.chip { text-decoration: none; }

/* Minutes per day for the last 7 days */
.week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 150px; margin: 8px 0 10px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.week-day strong { min-height: 1.2em; font-size: 0.75rem; color: var(--ink-2); }
.week-day span { font-size: 0.75rem; color: var(--muted); }
.week-day.is-today span { color: var(--head); font-weight: 700; }
.week-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.week-col {
  width: 100%;
  max-width: 34px;
  min-height: 4px;
  border-radius: 8px 8px 4px 4px;
  background: var(--primary);
  transform-origin: bottom;
  animation: rise-up 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.week-day.is-today .week-col { background: var(--gold); }
.week-col.empty { background: var(--surface-2); }
@keyframes rise-up { from { transform: scaleY(0); } }

.week-col.future { background: transparent; border: 1px dashed var(--line); }

/* The Pomodoro round, the alarm button and the save message */
.focus-round { margin: 6px 0 0; color: #C9D3EE; font-size: 0.85rem; font-weight: 600; }
.btn-alarm { min-width: 200px; min-height: 56px; font-size: 1.05rem; animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(226, 176, 74, 0.3); } }
.focus-saved { min-height: 1.2em; margin: 12px 0 0; color: #C9D3EE; font-size: 0.88rem; }

/* The check-in after a session */
.checkin { max-width: 420px; margin: 8px auto 0; }
.checkin-q { margin: 14px 0 8px; font-weight: 700; }
.choice-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.choice {
  min-width: 52px;
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.choice[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #2B1D00; }
.checkin-scale { display: flex; justify-content: space-between; max-width: 300px; margin: 6px auto 0; color: #C9D3EE; font-size: 0.78rem; }

/* "Suggested now" */
.suggest-card { border-color: var(--gold-line); background: var(--gold-soft); box-shadow: none; }
.suggest-card .eyebrow { color: var(--gold-ink); }

/* Tick boxes with their words beside them */
.check-row { display: flex; align-items: center; gap: 10px; min-height: 46px; font-weight: 500; color: var(--ink); cursor: pointer; }
.check-row input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: var(--head); }
.check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
select:disabled { opacity: 0.55; }

/* Weekly goal and focus score */
.goal-form { margin-top: 12px; }
.out-of { font-size: 1rem; color: var(--muted); }
details.explain { margin-top: 8px; }
details.explain summary { cursor: pointer; font-size: 0.88rem; font-weight: 700; color: var(--primary); }
.score-lines { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; font-size: 0.88rem; }
.score-lines li { display: flex; justify-content: space-between; gap: 12px; }
.score-lines strong { white-space: nowrap; color: var(--head); }

/* Study calendar: 13 columns (weeks) of 7 squares (days) */
.cal { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 18px); gap: 4px; margin: 12px 0 10px; }
.cal-day { display: block; aspect-ratio: 1; min-width: 10px; border-radius: 4px; background: var(--primary); }
.cal-0 { background: var(--surface-2); }
.cal-1 { opacity: 0.3; }
.cal-2 { opacity: 0.55; }
.cal-3 { opacity: 0.8; }
.cal-future { visibility: hidden; }
.cal-legend { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--muted); }
.cal-legend .cal-day { width: 14px; }
.cal-legend span:first-child { margin-right: 4px; }
.cal-legend span:last-child { margin-left: 4px; }

/* Personal bests */
.best-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.best { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.best span { display: block; font-size: 0.8rem; color: var(--muted); }
.best strong { display: block; margin-top: 2px; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--head); }
.best small { color: var(--muted); }

/* Achievements: earned ones in gold, the rest faded */
.badge-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.badge {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.badge svg { width: 30px; height: 30px; }
.badge strong { color: var(--ink-2); }
.badge span { font-size: 0.85rem; }
.badge small { font-weight: 700; }
.badge.earned { border-style: solid; border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold-ink); }
.badge.earned strong { color: var(--head); }

/* Partner code */
.partner-code { margin: 6px 0 12px; font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: 0.12em; color: var(--head); }

@media (max-width: 900px) {
  .best-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .focus-time { font-size: 3.8rem; }
  .week-bars { gap: 4px; }
  .cal { gap: 3px; }
}


/* ===== 22. Timetable ===== */
/* Your week: one table you type into, a group of rows per day */
.tt { width: 100%; border-collapse: collapse; }
.tt thead th { padding: 8px 6px; border-bottom: 2px solid var(--line); }
.tt-head th { padding: 18px 6px 6px; border-bottom: 1px solid var(--line); color: var(--head); font-size: 0.78rem; }
.tt-day:first-of-type .tt-head th { padding-top: 8px; }
.tt-head .chip { margin-left: 6px; letter-spacing: 0; text-transform: none; }
.tt-day.is-today .tt-head th { border-bottom-color: var(--gold); }
.tt td { padding: 5px 4px; vertical-align: middle; }
.tt input { min-height: 42px; }
.tt-course { width: 32%; }
.tt-time { width: 17%; }
.tt-venue { width: 30%; }
.tt-x { width: 50px; text-align: right; }
.tt-remove { width: 42px; min-height: 42px; padding: 0; border-radius: var(--radius-sm); font-size: 1rem; }
.tt-remove:hover { color: var(--bad); border-color: var(--bad); }
.tt-add td { padding: 2px 6px 10px; }
.tt-add .link-like { font-size: 0.88rem; text-decoration: none; }
.tt-add .link-like:hover { text-decoration: underline; }
.tt-status { margin: 0; }

/* Today's classes: the Today tab and the Today page */
.day-table { width: 100%; border-collapse: collapse; }
.day-table th { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.day-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.day-table tbody tr:last-child td { border-bottom: 0; }
.day-table strong { color: var(--head); white-space: nowrap; }
.day-time { width: 1%; white-space: nowrap; font-weight: 700; color: var(--ink-2); }
.day-state { width: 1%; text-align: right; white-space: nowrap; }
.cell-sub { display: block; color: var(--muted); font-size: 0.85rem; }
.state-now td { background: var(--gold-soft); }
.state-now td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.state-done td, .state-done strong { color: var(--muted); }
.free-row td { padding: 8px 10px; background: var(--surface-2); color: var(--muted); font-size: 0.86rem; }
.free-row.is-now td { background: var(--gold-soft); color: var(--gold-ink); font-weight: 600; }
.next-classes { margin-top: 12px; }

/* The reading plan */
.plan-item.is-done strong { color: var(--muted); text-decoration: line-through; }
.plan-line { margin: 12px 0 0; font-weight: 700; }
.list + .hint { margin-top: 14px; }

@media (max-width: 700px) {
  /* On a phone, each class becomes a small block: course, then times, then venue */
  .tt thead { display: none; }
  .tt, .tt tbody, .tt tr, .tt th, .tt td { display: block; width: auto; }
  .tt-head th { padding: 16px 0 6px; }
  .tt .tt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .tt .tt-row td { padding: 0; min-width: 0; }
  .tt input { min-width: 0; }
  .tt .tt-course { grid-column: 1 / 3; }
  .tt .tt-x { grid-column: 3; grid-row: 1; }
  .tt .tt-venue { grid-column: 1 / 3; }
  .tt-time::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
  .tt-add td { padding: 8px 0 4px; }
  .day-table td { padding: 10px 6px; }
  .day-time { font-size: 0.86rem; }
}


/* ===== 23. Show or hide a password ===== */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 50px; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
}
.pw-eye:hover { background: var(--surface-2); color: var(--ink); }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye[aria-pressed="true"] { color: var(--primary); }
/* Edge adds its own eye to password boxes: hide it, so there is only one */
input::-ms-reveal, input::-ms-clear { display: none; }


/* ===== 24. Online status (Step 14.4) ===== */
.presence {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 2px 0 1px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}
.presence-count { display: inline-flex; align-items: center; gap: 7px; }
.presence-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.presence-online, .presence-focus, .presence-count { color: var(--good); }
.presence-break { color: var(--warn); }
.presence-away .presence-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
/* A slow glow on the dot while a partner is focusing (switched off for reduced motion, section 18) */
.presence-focus .presence-dot { animation: focus-glow 2.4s ease-in-out infinite; }
@keyframes focus-glow { 50% { box-shadow: 0 0 0 4px var(--good-soft); } }

/* Two tick boxes, one under the other, with Save below */
.check-stack { flex-direction: column; align-items: flex-start; gap: 0; }
.check-stack .btn { margin-top: 8px; }
.check-stack + .hint { margin-top: 12px; }


/* ===== 25. Study Room (Step 14.6) ===== */
.room-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.room-top h1 { font-size: 1.6rem; }
.room-top .chip { margin-left: auto; }
.room-back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--head);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}
.room-note { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--ink); font-size: 0.92rem; }
.room-note code { font-size: 0.85em; }
.room-alert { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.room-small { text-align: center; }
.btn-wide { flex: 1 1 100%; }
.room-hero h2 { margin-bottom: 6px; }
.room-hero .eyebrow { margin: 0; }
.room-after { margin: 0 0 16px; }
.room-leave { margin: 8px 0 0; text-align: center; }

/* The ASCEND AI label */
.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Avatars: initials on one of 6 colours */
.av {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
}
.av-0 { background: #FCE6C3; color: #6B4A00; }
.av-1 { background: #DCEFE6; color: #12704F; }
.av-2 { background: #D3DDF3; color: #14254F; }
.av-3 { background: #F7DCDC; color: #8A2A22; }
.av-4 { background: #E5DDF3; color: #4A2E7A; }
.av-5 { background: #D9ECF5; color: #0F4C68; }
.av.away { opacity: 0.45; }

/* Who's coming (set-up page) */
.people-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.person-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.person-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.person-pick .av { width: 30px; height: 30px; font-size: 0.68rem; }
.person-text { display: grid; line-height: 1.2; }
.person-text strong { font-size: 0.88rem; color: var(--head); }
.person-text small { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.person-pick:has(input:checked) { border: 2px solid var(--primary); background: var(--primary-soft); padding: 4px 11px 4px 4px; }
.person-pick:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The number of questions: - [40] + */
.qmix { display: grid; gap: 12px; }
.qrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qrow label { display: grid; }
.qrow strong { font-size: 0.95rem; color: var(--head); }
.qrow small { font-size: 0.78rem; color: var(--muted); }
.stepper { display: flex; align-items: center; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.stepper .step { width: 42px; height: 42px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.stepper .step:hover { background: var(--surface-2); }
.stepper input {
  width: 56px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--head);
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.estimate { margin: 12px 0 0; font-size: 0.85rem; color: var(--muted); }
.notes-box { margin-top: 14px; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); }
.notes-box summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; font-weight: 700; color: var(--ink-2); list-style: none; }
.notes-box summary::-webkit-details-marker { display: none; }
.notes-box summary .optional { margin-left: 0; }
.notes-box summary b { margin-left: auto; color: var(--primary); }
.notes-box[open] summary { margin-bottom: 10px; }
.notes-box .field { margin-bottom: 12px; }
.notes-box textarea { min-height: 120px; resize: vertical; }

/* Lobby */
.room-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-2); }
.room-code b { font-family: var(--serif); font-size: 1.8rem; letter-spacing: 0.14em; color: var(--head); }
.who { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.who li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.who li div { display: grid; line-height: 1.3; }
.who strong { color: var(--head); }
.who span:not(.av) { font-size: 0.82rem; color: var(--muted); }

/* Focus together: a navy card like the focus timer */
.room-live {
  position: relative;
  margin-bottom: 16px;
  padding: 26px 18px 20px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #FFFFFF;
  text-align: center;
  box-shadow: 0 12px 28px rgba(20, 37, 79, 0.22);
}
[data-theme="dark"] .room-live { background: var(--navy-2); }
.room-time { margin: 10px 0 12px; font-family: var(--serif); font-size: 4rem; font-weight: 600; line-height: 1; }
.room-live .bar { max-width: 460px; margin: 0 auto 16px; background: rgba(255, 255, 255, 0.15); }
.room-live .bar-fill { background: var(--gold); animation: none; transition: width 1s linear; }
.crowd { display: flex; justify-content: center; flex-wrap: wrap; }
.crowd .av { width: 38px; height: 38px; margin-left: -6px; border: 2px solid var(--navy); font-size: 0.7rem; }
[data-theme="dark"] .crowd .av { border-color: var(--navy-2); }
.crowd .av:first-child { margin-left: 0; }
.crowd-line { margin: 8px 0 0; color: #C9D3EE; font-size: 0.85rem; }
.cheers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.cheer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.cheer:hover { background: rgba(255, 255, 255, 0.08); }
.cheer svg { width: 16px; height: 16px; }
.room-bubble {
  position: absolute;
  top: -12px;
  right: 14px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px 999px 999px 4px;
  background: var(--gold);
  color: #2B1D00;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  animation: rise 0.3s ease;
}
.room-link { margin-top: 12px; padding: 6px; border: 0; background: none; color: #E2C57E; font: inherit; font-size: 0.85rem; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ASCEND AI preparing */
.readyline { margin: 4px 0 0; font-weight: 700; color: var(--head); }
.subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.subs span { padding: 3px 10px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 0.78rem; font-weight: 700; }

/* Ask the room */
.ask-form { display: flex; gap: 8px; }
.ask-form input { flex: 1; min-width: 0; }
.ask-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ask-list li { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ask-list p { margin: 0 0 2px; }
.ask-list strong { color: var(--head); }
.ask-list small { color: var(--muted); }
.ask-list span { display: block; color: var(--ink); overflow-wrap: anywhere; }
.ask-list .link-like { margin-top: 4px; font-size: 0.8rem; }

/* The quiz */
.room-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.room-sections span { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.room-sections .done { background: var(--good-soft); color: var(--good); }
.room-sections .now { background: var(--navy); color: #FFFFFF; }
[data-theme="dark"] .room-sections .now { background: var(--primary); color: var(--on-primary); }
.qhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.qhead .eyebrow { margin-bottom: 2px; }
.qring { position: relative; flex: none; width: 58px; height: 58px; }
.qring svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.qring circle { fill: none; stroke-width: 3.2; }
.qring-track { stroke: var(--surface-2); }
.qring-left { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100.5; transition: stroke-dashoffset 0.25s linear; }
.qring-left.low { stroke: var(--bad); }
.qring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; color: var(--head); }
.qtext { margin: 12px 0 4px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--head); overflow-wrap: anywhere; }
.gapline u { display: inline-block; min-width: 90px; border-bottom: 2px solid var(--primary); text-decoration: none; }
.opts { display: grid; gap: 8px; margin-top: 14px; }
.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.opt i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); font-style: normal; font-weight: 800; }
.opt[aria-pressed="true"] { border: 2px solid var(--primary); background: var(--primary-soft); padding: 11px; }
.opt[aria-pressed="true"] i { background: var(--primary); color: var(--on-primary); }
.opt.right { border: 2px solid var(--good); background: var(--good-soft); padding: 11px; }
.opt.right i { background: var(--good); color: #FFFFFF; }
.opt.wrong { border: 2px solid var(--bad); background: var(--bad-soft); padding: 11px; }
.opt.wrong i { background: var(--bad); color: #FFFFFF; }
.quiz-card .field { margin-top: 14px; }
.quiz-card textarea { min-height: 150px; resize: vertical; }
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.feedback.good { background: var(--good-soft); }
.feedback.bad { background: var(--bad-soft); }
.feedback p { margin: 0; }
.feedback-head { font-weight: 800; color: var(--head); }
.feedback.good .feedback-head { color: var(--good); }
.feedback.bad .feedback-head { color: var(--bad); }
.feedback-answer { margin-top: 4px !important; font-weight: 700; color: var(--ink); }
.feedback-why { margin-top: 6px !important; color: var(--ink-2); font-size: 0.92rem; }
.feedback-small { margin-top: 10px !important; color: var(--muted); font-size: 0.8rem; }
.answered { min-height: 1.2em; margin: 12px 0 0; color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }

/* Theory marks */
.mark { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mark b { font-family: var(--serif); font-size: 2rem; color: var(--head); }
.mark b small { font-size: 1rem; color: var(--muted); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.88rem; }
.points li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.points .y { color: var(--good); font-weight: 800; }
.points .h { color: var(--warn); font-weight: 800; }
.points .n { color: var(--bad); font-weight: 800; }
.points small { color: var(--muted); }
.model { margin-top: 10px; }
.model summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.model p { margin: 8px 0 0; color: var(--ink-2); font-size: 0.92rem; }

/* Results */
.board { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.board li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.board li.me { border: 2px solid var(--primary); background: var(--primary-soft); padding: 8px 11px; }
.board .av { width: 32px; height: 32px; font-size: 0.66rem; }
.board strong { color: var(--head); }
.board .sc { margin-left: auto; font-weight: 800; color: var(--head); text-align: right; }
.board .sc small { font-weight: 600; color: var(--muted); }
.rk { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 0.78rem; font-weight: 800; }
.rk-1 { background: #F3C24F; color: #4A3300; }
.rk-2 { background: #D7DCE6; color: #2C3550; }
.rk-3 { background: #E7B58A; color: #4D2A0C; }
.hard { display: grid; gap: 10px; font-size: 0.9rem; }
.hard div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.hard b { color: var(--head); }
.hard .bar { grid-column: 1 / -1; margin: 0; }
.hard .bar-fill { background: var(--bad); }
.review-group { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.review-group summary { cursor: pointer; font-weight: 800; color: var(--head); }
.review-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.review-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.review-q { margin: 0; font-weight: 700; color: var(--head); overflow-wrap: anywhere; }
.review-q u { display: inline-block; min-width: 60px; border-bottom: 2px solid var(--primary); text-decoration: none; }
.review-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font-size: 0.75rem; }
.review-sub { margin: 2px 0 8px; color: var(--muted); font-size: 0.8rem; }
.review-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; }
.review-opts li { padding: 5px 10px; border-radius: 10px; }
.review-opts .right, .review-ans.right { background: var(--good-soft); color: var(--good); font-weight: 700; }
.review-opts .wrong, .review-ans.wrong { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.review-ans { display: inline-block; margin: 0 6px 4px 0; padding: 4px 10px; border-radius: 10px; font-size: 0.9rem; }
.review-none { margin: 6px 0 0; color: var(--bad); font-size: 0.85rem; font-weight: 700; }
.review-theory { margin: 0 0 8px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-why { margin: 8px 0 0; color: var(--ink-2); font-size: 0.88rem; }
.review-item form { margin-top: 6px; }
.review-item .link-like { font-size: 0.82rem; }

/* An invitation at the top of every page */
.invites { display: grid; gap: 8px; margin-bottom: 16px; }
.invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #FFFFFF;
}
[data-theme="dark"] .invite { background: var(--navy-2); }
.invite p { margin: 0; }
.invite strong { color: #E2C57E; }

@media (max-width: 600px) {
  .room-top h1 { font-size: 1.35rem; }
  .room-top .chip { margin-left: 0; }
  .room-time { font-size: 3.2rem; }
  .room-code b { font-size: 1.4rem; }
  .qtext { font-size: 1.12rem; }
}


/* ===== 26. Pair streaks (Step 14.5) ===== */
/* The flame: grey with no streak, then yellow, orange, deep orange, red, and blue at 30 days */
.flame { flex: none; width: 28px; height: 28px; }
.flame-small { width: 15px; height: 15px; }
.flame-out { fill: var(--flame); }
.flame-in { fill: var(--flame-in); }
.flame-0 { --flame: var(--line); --flame-in: var(--surface-2); }
.flame-1 { --flame: #F2B92E; --flame-in: #FFE9A6; }   /* Spark */
.flame-2 { --flame: #F08A24; --flame-in: #FFD27A; }   /* Flame */
.flame-3 { --flame: #E4531B; --flame-in: #FFB25E; }   /* Blaze */
.flame-4 { --flame: #C92A2A; --flame-in: #FF9A5C; }   /* Inferno */
.flame-5 { --flame: #2F6FDF; --flame-in: #B5DAFF; }   /* Blue flame */
.flame-wait { opacity: 0.4; }                            /* pale until you have both studied today */
/* A gentle flicker while it is lit (switched off for reduced motion, section 18) */
.flame:not(.flame-wait):not(.flame-0) { transform-origin: 50% 90%; animation: flicker 2.8s ease-in-out infinite; }
@keyframes flicker { 50% { transform: scale(1.05, 0.96); } }

.pair {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.pair.is-lit { background: var(--gold-soft); }
.pair-text { min-width: 0; font-size: 0.86rem; color: var(--ink-2); }
.pair-text strong { color: var(--head); }
.pair-text span { display: block; }
.pair-chip { display: inline-flex; align-items: center; gap: 5px; }


/* ===== 27. Attendance (Step 15.4) ===== */
/* Attended / Missed / Cancelled: the chosen one is coloured. (Not ".mark": the
   Study Room already uses that name for theory marks.) */
.mark-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att-btn {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.att-btn:hover { border-color: var(--primary); color: var(--primary); }
.att-btn[aria-pressed="true"]::before { content: "✓ "; }
.att-btn-attended[aria-pressed="true"] { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.att-btn-missed[aria-pressed="true"] { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.att-btn-cancelled[aria-pressed="true"] { border-color: var(--muted); background: var(--surface-2); color: var(--ink-2); }
@media (max-width: 700px) {
  /* Smaller on a phone, so the three fit on one line */
  .mark-form { gap: 5px; }
  .att-btn { padding: 4px 9px; font-size: 0.8rem; }
}

/* On the Today tab, the buttons sit in their own row under the class. On a computer
   they line up under the course: the time column has a fixed width for that. */
.day-table tr.has-mark td { padding-bottom: 2px; border-bottom: 0; }
.day-table .mark-row td { padding-top: 0; }
.mark-row .mark-form { margin-top: 0; }
@media (min-width: 701px) {
  .with-marks .day-time { width: 8rem; }
  .with-marks .mark-cell { padding-left: calc(8rem + 10px); }
}

/* A course's percentage stays on the right, next to its name */
.att-item .item-top { flex-wrap: nowrap; align-items: flex-start; }
.att-item .item-main { min-width: 0; }

/* The mark on the Today page */
.mark-chip-attended { background: var(--good-soft); color: var(--good); }
.mark-chip-missed { background: var(--bad-soft); color: var(--bad); }
.mark-chip-cancelled { background: var(--surface-2); color: var(--muted); }

.att-warn { margin-bottom: 14px; font-weight: 600; }
.att-older { margin-top: 14px; }
.att-older summary { cursor: pointer; font-size: 0.88rem; font-weight: 700; color: var(--primary); }
.att-older[open] summary { margin-bottom: 8px; }


/* ===== 28. Help, feedback and the founder page (Step 18) ===== */
/* Help: one question per line; tap it to open the answer */
.help-card h2 { margin-bottom: 6px; }
details.faq { border-top: 1px solid var(--line); }
details.faq:first-of-type { border-top: 0; }
details.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; flex: none; font-size: 1.3rem; font-weight: 600; color: var(--muted); }
details.faq[open] summary::after { content: "−"; }
details.faq summary:hover { color: var(--primary); }
details.faq > :not(summary) { color: var(--ink-2); }
details.faq ol, details.faq ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.65; }
details.faq li { margin-bottom: 4px; }
.help-example {
  padding: 10px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: var(--gold-soft);
  color: var(--gold-ink);
}
.help-table { width: auto; min-width: 260px; margin: 0 0 14px; }
.help-table th, .help-table td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--line); text-align: left; }

/* Feedback: what it is about, as pills */
.kind-pick { margin: 0 0 16px; padding: 0; border: 0; }
.kind-pick legend { margin-bottom: 8px; padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.kind-option { display: inline-flex; margin: 0 6px 8px 0; cursor: pointer; }
.kind-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind-option span {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-2);
}
.kind-option:hover span { border-color: var(--primary); }
.kind-option input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.kind-option input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.feedback-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Founder: four headline numbers */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-grid > .card { margin-bottom: 0; }
.stat span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.stat strong { display: block; margin: 4px 0 2px; font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--head); }
.stat small { display: block; font-size: 0.8rem; color: var(--muted); }
.stat strong .out-of { display: inline; font-size: 1rem; }      /* "12 / 14" on one line */

/* Founder: a bar per day. One colour, thin bars, rounded tops, a 2px gap between bars. */
.day-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; height: 140px; margin: 6px 0 10px; }
.day-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.day-num { min-height: 1.1em; font-size: 0.68rem; font-weight: 700; color: var(--ink-2); }
.day-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.day-fill {
  width: 70%;
  max-width: 18px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--primary);
  transform-origin: bottom;
  animation: rise-up 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.day-fill.is-zero { background: var(--line); }
.day-label { font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.day-col.is-today .day-label { color: var(--head); font-weight: 700; }

/* Founder: what students used */
.use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.use { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.use span { display: block; font-size: 0.82rem; color: var(--muted); }
.use strong { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--head); }
.use small { display: block; font-size: 0.78rem; color: var(--muted); }

/* Founder: small tables */
.f-table { width: 100%; margin: 4px 0 12px; }
.f-table th, .f-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.f-table tbody tr:last-child td { border-bottom: 0; }
.f-table .num { text-align: right; white-space: nowrap; }
.ai-limit-line { margin-top: 4px; }
.f-sub { margin-top: 14px; font-size: 0.95rem; color: var(--ink-2); }

/* Founder: the feedback inbox */
.inbox-item.is-new { border-color: var(--gold-line); box-shadow: inset 3px 0 0 var(--gold); }
.inbox-item.is-done { opacity: 0.75; }
.inbox-actions { margin-top: 10px; gap: 6px; }
.inbox-actions form { margin: 0; }

@media (max-width: 900px) {
  .stat-grid, .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .stat strong { font-size: 1.6rem; }
  .day-label { font-size: 0.6rem; }
}


/* ===== 29. The Grades switch, the Today target card, and the landing page on phones ===== */

/* Grades holds two pages, Calculate and Goals: this switch sits at the top of both */
.switch {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
}
.switch-link {
  padding: 7px 18px;
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.switch-link:hover { color: var(--head); }
.switch-link[aria-current="page"] { background: var(--surface); color: var(--head); box-shadow: var(--shadow); }

/* Today: the target card also shows graduation progress, and a way to a new target */
.target-card { flex-wrap: wrap; }
.target-note, .grad-line { flex: 1 1 100%; }
.target-note { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.target-note a { font-weight: 700; }
.grad-line .bar { margin: 0 0 6px; }
.grad-line .sub { margin: 0; }

/* Delete is a quiet text button on the right, so it is not mistaken for the main action */
.item-actions > form:last-child { margin-left: auto; }
.item-actions > form .btn-danger { border-color: transparent; background: none; padding-inline: 8px; font-weight: 500; }
.item-actions > form .btn-danger:hover { border-color: var(--bad); }

@media (max-width: 900px) {
  /* The landing page in one column, with the phone picture under the words */
  .lp-hero { padding: 28px 0 44px; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero h1 { font-size: 2.1rem; }
  .lp-features, .lp-steps { grid-template-columns: 1fr; }
  .lp-section { padding: 40px 0; }
  .lp-section h2 { font-size: 1.55rem; }
}

@media (max-width: 600px) {
  /* Today: the greeting on its own line, with the chips in a row under it */
  .today-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .today-top .row { flex-wrap: wrap; gap: 6px; }

  .lp-wrap { padding: 0 16px; }
  .lp-phone { width: 100%; max-width: 300px; }
}