/* Quiet planner: paper, ink, one accent reserved for "today" and primary actions,
   one flag color reserved for overdue/required. Real A/B/C/D day-rotation letters
   (the school's own vocabulary) carry the calendar's sequence — nothing invented. */
:root {
  /* Type scale: every text size on the page is one of these. */
  --fs-caption: 0.6875rem;  /* 11px: calendar grid labels, tags */
  --fs-small: 0.75rem;      /* 12px: meta, notes, buttons */
  --fs-body: 0.875rem;      /* 14px: body text, inputs, titles in lists */
  --fs-lead: 1rem;          /* 16px: section and card titles */
  --fs-title: 1.25rem;      /* 20px: day numbers, counts */
  --fs-display: 3.25rem;    /* hero date */
  /* Spacing scale: every gap, padding and margin is one of these. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 72px;
  --btn-h: 32px;
  --paper: #F7F6F2;
  --paper-raised: #FCFBF8;
  --ink: #1B1A17;
  --muted: #6B675E;
  --faint: #B8B4AB;
  --line: #E3E0D8;
  --line-strong: #CFCBC0;
  --accent: #2E5C4E;
  --accent-soft: #E7EDE9;
  --flag: #AC4A30;
  --flag-soft: #F4E4DE;
  --today-wash: #EFECE3;
  --cls-chem: #5C7B5F;
  --cls-calc: #4A6B96;
  --cls-eng:  #96702F;
  --cls-ent:  #A87A2E;
  --cls-sem:  #3D7975;
  --cls-econ: #79688F;
  --cls-chi:  #9C5661;
  --cls-other:#87847C;
  --evt-vb: #B4791E;
  --evt-school: #5E6B78;
  --evt-personal: #2E5C4E;
}
* { box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
}
.wrap { max-width: 980px; margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-9); }

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Header ---------- */
header.top h1 { font-size: var(--fs-lead); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
header.top .sub { color: var(--muted); font-size: var(--fs-small); text-align: right; line-height: 1.45; }

/* ---------- Today hero ---------- */
.hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5);
  flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line-strong);
}
.hero-date { display: flex; align-items: baseline; gap: var(--sp-4); }
.hero-date .num { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.hero-date .info { display: flex; flex-direction: column; gap: 2px; }
.hero-date .dow { font-size: var(--fs-lead); font-weight: 600; }
.hero-date .tag { font-size: var(--fs-body); color: var(--muted); }
.hero-due { text-align: right; }
.hero-due .count { font-size: var(--fs-title); font-weight: 700; }
.hero-due .count.zero { color: var(--muted); font-weight: 500; }
.hero-due .count.has { color: var(--accent); }
.hero-due .lbl { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.reminder-toggle {
  font-size: var(--fs-small); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 99px;
  padding: var(--sp-1) var(--sp-3); flex: none;
}
.reminder-toggle:hover { border-color: var(--accent); color: var(--ink); }
.reminder-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.legend { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-1) 0 var(--sp-5); }
.legend-item {
  display: inline-flex; align-items: center; font-size: var(--fs-small); color: var(--muted);
  padding: 3px var(--sp-2); border-radius: 99px; border: 1px solid transparent;
}
.legend-item .dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; margin-right: var(--sp-1); vertical-align: 1px; }
.legend-item:hover { color: var(--ink); background: var(--accent-soft); }
.legend-item.active { color: var(--ink); font-weight: 700; background: var(--accent-soft); border-color: var(--line-strong); }

h2.section { font-size: var(--fs-lead); font-weight: 700; margin: 0; letter-spacing: -0.005em; }

/* ---------- Calendar chrome ---------- */
.cal-bar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.cal-bar .spacer { flex: 1; }
.cal-title { font-weight: 700; font-size: var(--fs-body); min-width: 150px; }
.nav-btn { font-size: var(--fs-lead); color: var(--muted); line-height: 1; padding: 2px 3px; }
.nav-btn:hover:not(:disabled) { color: var(--ink); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.seg { display: inline-flex; gap: var(--sp-4); }
.seg button { font-size: var(--fs-body); font-weight: 500; color: var(--muted); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.seg button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

/* ---------- Week: Google-Calendar-style time grid ----------
   One shared column template keeps the header, the all-day band and the scrolling
   time grid in exact vertical alignment. --hour-h is set inline by the renderer so
   the hour rules and the absolutely-placed blocks share one scale. */
.cal-scroll { overflow-x: auto; }
.weekcal { min-width: 900px; border-top: 1px solid var(--line-strong); }
.wk-row { display: grid; grid-template-columns: 54px repeat(7, minmax(112px, 1fr)); }

.wk-head .wday-head { padding: var(--sp-2) var(--sp-2) var(--sp-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wk-head .wday-head:last-child { border-right: none; }
.wk-head .wk-corner { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wday-head.today { background: var(--today-wash); }
.wday-head .dow { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.wday-head .num { font-size: var(--fs-title); font-weight: 700; line-height: 1.2; }
.wday-head.today .num { color: var(--accent); }
.wday-head .dtag { font-size: var(--fs-caption); color: var(--muted); }

.wk-allday { border-bottom: 1px solid var(--line-strong); }
.wk-allday-lbl {
  font-size: var(--fs-caption); color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em;
  text-align: right; padding: var(--sp-1) var(--sp-2) 0 0; border-right: 1px solid var(--line);
}
.wk-allday-col {
  border-right: 1px solid var(--line); padding: var(--sp-1) var(--sp-1) var(--sp-1);
  display: flex; flex-direction: column; gap: 3px; min-height: 24px;
}
.wk-allday-col:last-child { border-right: none; }
.wk-allday-col.today { background: var(--today-wash); }

.wk-scroll { max-height: 62vh; overflow-y: auto; }
.wk-gutter { border-right: 1px solid var(--line); }
.wk-hour { height: var(--hour-h); position: relative; }
.wk-hour span {
  position: absolute; top: -7px; right: 6px; font-size: var(--fs-caption); color: var(--faint); white-space: nowrap;
}
.wday {
  position: relative; border-right: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hour-h));
}
.wday:last-child { border-right: none; }
.wday.today { background-color: var(--today-wash); }

/* The "now" line, the one bit of red Google earns. */
.wk-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--flag); z-index: 3; }
.wk-now::before {
  content: ""; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px;
  border-radius: 99px; background: var(--flag);
}

/* A placed block: absolutely positioned, tinted on its left edge by category. */
.ev-block {
  position: absolute; overflow: hidden; z-index: 2;
  padding: 2px var(--sp-1); border-radius: 3px;
  background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line);
  border-left: 3px solid var(--line-strong);
}
.ev-block.vb { border-left-color: var(--evt-vb); }
.ev-block.school { border-left-color: var(--evt-school); }
.ev-block.personal { border-left-color: var(--evt-personal); }
.ev-block .l { display: block; }
.ev-block.task-block { border-left-width: 3px; border-left-color: var(--faint); }

.ev { font-size: var(--fs-small); line-height: 1.35; }
.ev .t { font-weight: 600; font-size: var(--fs-caption); color: var(--muted); display: block; }
.ev .n { display: block; }
.ev .l { color: var(--muted); font-size: var(--fs-caption); }
.ev.vb .t { color: var(--evt-vb); }
.ev.school .t { color: var(--evt-school); }
.ev.personal .t { color: var(--evt-personal); }
.ev.quiet { color: var(--muted); }
.ev.quiet .n { font-weight: 400; }
.ev.req .n { color: var(--flag); font-weight: 600; }
.ev.allday .n { font-style: italic; color: var(--muted); }
.ev.off { color: var(--faint); font-style: italic; }
/* Your own events are buttons (click to edit); seeded ones are plain divs. The reset
   strips button chrome, so restore block/left flow and add a hover affordance that
   reads past the tight text box without shifting layout. */
.ev-own { display: block; width: 100%; text-align: left; border-radius: 3px; }
.ev-own:hover { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Inside a placed block the hover must keep the block's own 1px outline. */
.ev-block.ev-own:hover { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
/* Blocks are short and narrow, so tighten the type to fit more before clipping. */
.ev-block .t { font-size: var(--fs-caption); line-height: 1.25; }
.ev-block .n { font-size: var(--fs-caption); line-height: 1.25; }
.ev-block .l { font-size: var(--fs-caption); line-height: 1.2; }
.ev .rep { color: var(--muted); font-size: var(--fs-caption); }
.form-title { font-size: var(--fs-body); font-weight: 700; }
.form-title .form-note { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
/* A deadline block: title first and given the room, since where it sits already says
   when it is. Dashed edge distinguishes a due-moment from a block of booked time. */
.task-ev {
  font-size: var(--fs-small); display: block; width: 100%; text-align: left;
  border-left-style: dashed !important;
}
.task-ev .dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; margin-right: var(--sp-1); vertical-align: 1px; }
.task-ev .n { display: block; font-size: var(--fs-caption); line-height: 1.25; font-weight: 600; }
.task-ev .t { display: block; font-size: var(--fs-caption); line-height: 1.2; color: var(--muted); font-weight: 500; }
.task-ev.done-ev .n { text-decoration: line-through; color: var(--faint); font-weight: 500; }
.ev-block.task-ev:hover { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }

/* ---------- Detail popup ----------
   Anchored next to the clicked block. #detail-host sits outside the calendar's scroll
   panes and has no positioned ancestor, so these are page coordinates set by the
   renderer and the popup is never clipped by the grid's overflow. */
.detail-pop {
  position: absolute; z-index: 50; width: 300px; max-width: calc(100vw - 16px);
  animation: detail-in 0.12s ease-out;
}
@keyframes detail-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .detail-pop { animation: none; } }
.detail-card {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 6px;
  background: var(--paper-raised); padding: var(--sp-3) var(--sp-4) var(--sp-3);
  box-shadow: 0 6px 22px rgba(27, 26, 23, 0.16), 0 1px 3px rgba(27, 26, 23, 0.08);
}
.detail-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.detail-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.detail-title { font-size: var(--fs-lead); font-weight: 700; flex: 1; overflow-wrap: anywhere; }
.detail-close { color: var(--faint); font-size: var(--fs-small); padding: 2px var(--sp-1); flex: none; }
.detail-close:hover { color: var(--flag); }
.detail-rows { margin-top: var(--sp-3); display: grid; gap: var(--sp-1); }
.detail-row { display: flex; gap: var(--sp-3); font-size: var(--fs-body); align-items: baseline; }
.detail-row .dk { color: var(--muted); font-size: var(--fs-small); min-width: 68px; flex: none; text-transform: uppercase; letter-spacing: 0.04em; }
.detail-row .dv { overflow-wrap: anywhere; }
.detail-row .dv.over { color: var(--flag); font-weight: 600; }
.detail-row .dv.soon { color: var(--accent); font-weight: 600; }
.detail-desc { font-size: var(--fs-body); color: var(--muted); margin: var(--sp-3) 0 0; overflow-wrap: anywhere; }
.detail-actions { display: flex; gap: var(--sp-4); align-items: center; margin-top: var(--sp-3); }
.detail-note { font-size: var(--fs-small); color: var(--faint); font-style: italic; }

/* ---------- Month grid ---------- */
.monthgrid {
  display: grid; grid-template-columns: repeat(7, minmax(116px, 1fr));
  border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line);
  min-width: 850px;
}
.mhead { padding: var(--sp-2) var(--sp-2); font-size: var(--fs-caption); font-weight: 600; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); }
.mday {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 96px;
  padding: 28px var(--sp-2) var(--sp-2); text-align: left; display: block; width: 100%; color: var(--ink); /* 28 = date top 8 + 16 tall + 4 gap */
  position: relative;
}
.mday.out { color: var(--faint); }
.mday.today { background: var(--today-wash); }
/* Pinned by absolute position rather than document flow. A grid row stretches every cell
   to match its tallest neighbor, so a near-empty cell and a busy cell end up the same
   height — and .mday is a <button>, whose content some engines vertically center within
   that height regardless of display:block. Absolute positioning removes that risk outright:
   every date sits at the same top/left offset in every cell, independent of its height,
   its content below, or how any particular browser renders a <button>'s box. */
.mday-head { position: absolute; top: 8px; left: 8px; right: 8px; min-height: 16px; line-height: 16px; }
.mday .num { font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.mday.today .num { color: var(--accent); }
.mday.clickable { cursor: pointer; }
.mday.clickable:hover { background: var(--accent-soft); }
.mini { display: flex; align-items: baseline; gap: var(--sp-1); font-size: var(--fs-caption); margin-top: var(--sp-1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini .dot { width: 5px; height: 5px; border-radius: 99px; flex: none; }
.mini .tm { font-size: var(--fs-caption); color: var(--muted); flex: none; }
.mini.done-chip { text-decoration: line-through; color: var(--faint); }
.mini .txt { overflow: hidden; text-overflow: ellipsis; }
.more { font-size: var(--fs-caption); color: var(--faint); margin-top: 3px; }

.cal-note { color: var(--faint); font-size: var(--fs-small); margin: var(--sp-3) 2px 0; }

.cal-actions { display: flex; justify-content: flex-end; margin: -var(--sp-2) 0 var(--sp-3); }
.event-form { border: 1px solid var(--line-strong); border-radius: 6px; padding: var(--sp-4) var(--sp-4) var(--sp-4); margin-bottom: var(--sp-4); background: var(--paper-raised); }
.event-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.event-form label.checkline { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); font-weight: 500; text-transform: none; color: var(--ink); font-size: var(--fs-body); }
.event-form label.checkline input { width: auto; }

/* ---------- Tasks ---------- */
.tasks { margin-top: var(--sp-7); }
.tasks-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.tasks-head .spacer { flex: 1; }
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.filters select {
  font: inherit; font-size: var(--fs-small); color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line-strong); border-radius: 4px; padding: var(--sp-1) var(--sp-2);
}
.btn-add { color: var(--accent); font-size: var(--fs-body); font-weight: 600; border-bottom: 1px solid transparent; }
.btn-add:hover { border-bottom-color: var(--accent); }

.task-group-head {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin: var(--sp-5) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.task-group-head:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.task-group-head .task-group-count { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 2px; }

.task { border-bottom: 1px solid var(--line); }
.task-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 2px; }
.task-check {
  appearance: none; width: 17px; height: 17px; margin: 2px 0 0; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 4px; cursor: pointer;
  display: grid; place-content: center; background: var(--paper-raised);
}
.task-check:checked { background: var(--accent); border-color: var(--accent); }
.task-check:checked::after {
  content: ""; width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.task-main { flex: 1; min-width: 0; text-align: left; padding: 0; }
.task-title { font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
.task.done .task-title { color: var(--faint); text-decoration: line-through; font-weight: 500; }
.task-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); align-items: baseline; font-size: var(--fs-small); color: var(--muted); }
.task-meta .cls-dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; margin-right: var(--sp-1); }
.task-meta .type-tag { font-style: italic; }
.task-meta .due.over { color: var(--flag); font-weight: 600; }
.task-meta .due.soon { color: var(--accent); font-weight: 600; }
.task-meta .doing { font-style: italic; }
.task-meta .est-tag { color: var(--muted); }
.task-desc { color: var(--muted); font-size: var(--fs-body); margin-top: var(--sp-1); overflow-wrap: anywhere; }
.btn-edit, .btn-del { color: var(--faint); font-size: var(--fs-small); padding: 3px var(--sp-1); flex: none; }
.btn-edit:hover { color: var(--accent); }
.btn-del:hover { color: var(--flag); }
.btn-del.confirm { color: var(--flag); font-weight: 700; }

.task-edit { padding: var(--sp-1) 2px var(--sp-4); display: grid; gap: var(--sp-3); }
.task-edit label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); display: grid; gap: var(--sp-1); }
.task-edit input, .task-edit textarea, .task-edit select {
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 4px; padding: var(--sp-2) var(--sp-2);
  width: 100%; font-weight: 400;
}
.task-edit textarea { resize: vertical; min-height: 54px; }
.edit-actions { display: flex; gap: var(--sp-4); align-items: center; margin-top: 2px; }
.btn-save { color: var(--accent); font-size: var(--fs-body); font-weight: 700; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.btn-quiet { color: var(--muted); font-size: var(--fs-body); }
.btn-danger { color: var(--flag); font-size: var(--fs-body); margin-left: auto; }
/* A utility that must always win: component rules like .landing or .event-form .row2
   set their own display, and would otherwise silently un-hide what JS just hid. */
.hidden { display: none !important; }

.empty { color: var(--faint); font-size: var(--fs-body); font-style: italic; padding: var(--sp-3) 2px; }
.src-note { color: var(--faint); font-size: var(--fs-small); margin-top: var(--sp-4); }

/* ---------- Kanban board ---------- */
.board-scroll { overflow: hidden; touch-action: pan-y; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: var(--sp-4); }
.kcol { border-top: 2px solid var(--line-strong); padding-top: var(--sp-3); min-width: 0; touch-action: pan-y; }
.kcol-head { font-weight: 700; font-size: var(--fs-body); margin-bottom: var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-2); }
.kcol-head .kcount { color: var(--muted); font-weight: 500; font-size: var(--fs-small); }
.kcol-body {
  display: flex; flex-direction: column; gap: var(--sp-3); max-height: 66vh; overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y;
  padding: 1px var(--sp-2) var(--sp-1) 1px; margin: -1px -var(--sp-2) -var(--sp-1) -1px;
}
@media (max-width: 780px) {
  .kanban { grid-template-columns: 1fr; gap: var(--sp-5); }
  .kcol-body { max-height: 50vh; }
}
.kcard { border: 1px solid var(--line); border-radius: 6px; padding: var(--sp-3) var(--sp-3) var(--sp-3); background: var(--paper-raised); }
.kcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.kcard-title { text-align: left; font-size: var(--fs-body); font-weight: 600; padding: 0; line-height: 1.35; overflow-wrap: anywhere; }
.kcard .task-meta { margin-top: var(--sp-2); font-size: var(--fs-small); }
.kcard .task-edit { margin-top: var(--sp-3); }
.kcard-move { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.kmove {
  font-size: var(--fs-caption); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 99px;
  padding: 3px var(--sp-3);
}
.kmove:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.kmove.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; cursor: default; }
.kmove:disabled { cursor: default; }
.kcard[draggable="true"] { cursor: grab; }
.kcard.dragging { opacity: 0.4; }
.kcol-body.drag-over { background: var(--accent-soft); border-radius: 6px; outline: 1px dashed var(--accent); outline-offset: -1px; }
.kcol-body.drag-over .empty { color: var(--accent); font-style: normal; }


/* ---------- Account (header) ---------- */
.account { display: flex; align-items: center; gap: var(--sp-3); position: relative; flex-wrap: wrap; justify-content: flex-end; }
.btn-google {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 99px;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); font-size: var(--fs-body); font-weight: 500;
}
.btn-google:hover { background: #f7f8f8; }
.g-mark { width: 16px; height: 16px; flex: none; }
.acct-pic { width: 30px; height: 30px; border-radius: 99px; flex: none; object-fit: cover; }
.acct-initial {
  display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: var(--fs-body);
}
.acct-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.acct-email { font-size: var(--fs-small); font-weight: 600; overflow-wrap: anywhere; }
.acct-status { font-size: var(--fs-small); color: var(--muted); }
.acct-status.err { color: var(--flag); }
.acct-btn {
  font-size: var(--fs-small); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 99px;
  padding: var(--sp-1) var(--sp-3);
}
.acct-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.acct-btn:disabled { opacity: 0.5; cursor: default; }
.acct-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 6px 22px rgba(27, 26, 23, 0.14); padding: var(--sp-1); display: grid; min-width: 250px;
}
.acct-menu button { text-align: left; font-size: var(--fs-body); padding: var(--sp-2) var(--sp-3); border-radius: 4px; }
.acct-menu button:hover { background: var(--accent-soft); }
.acct-menu button:last-child { color: var(--flag); }
.acct-msg { flex-basis: 100%; text-align: right; font-size: var(--fs-small); color: var(--flag); }

.demo-banner {
  margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: 6px; font-size: var(--fs-body);
  background: var(--accent-soft); color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--sp-1); row-gap: var(--sp-2);
}
.demo-home {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-small); font-weight: 600; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 99px; padding: 2px var(--sp-3) 2px var(--sp-2);
}
.demo-home:hover { background: var(--accent); color: #fff; }
.demo-home svg { width: 14px; height: 14px; }
.demo-link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Google calendars panel ---------- */
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-body); }
.sync-row select { width: auto; min-width: 200px; }
.sync-name { overflow-wrap: anywhere; }
.sync-check { justify-content: flex-start; gap: var(--sp-2); font-weight: 500; color: var(--ink); }
.sync-check input { width: auto; }
.sync-sub { margin-top: var(--sp-2); }
.detail-link { font-size: var(--fs-small); color: var(--accent); font-weight: 600; }


/* ---------- Categories (in the Google calendars panel) ---------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cat-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 99px; padding: 3px var(--sp-2) 3px var(--sp-3);
}
.cat-chip .dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.cat-chip:not(:has(.cat-del)) { padding-right: var(--sp-3); }
.cat-del { color: var(--faint); font-size: var(--fs-body); line-height: 1; padding: 0 var(--sp-1); border-radius: 99px; }
.cat-del:hover { color: var(--flag); background: var(--flag-soft); }
.cat-add { display: flex; gap: var(--sp-3); align-items: center; }
.cat-add input { flex: 1; }
.cat-add .btn-save { white-space: nowrap; }
.cat-msg { font-size: var(--fs-small); color: var(--flag); margin: 0; }
/* Two actions share this row (Google calendars / Add event); the gap was lost when the
   old import button's CSS was removed. */
.cal-actions { gap: var(--sp-4); }
/* Checkbox rows: ".task-edit label" stacks label contents as a grid; these sit inline. */
.task-edit label.sync-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); }

/* =====================================================================
   Controls — one system.
   Every button is a 32px pill (primary, secondary, quiet or danger) or a
   28px round icon button, with icons at 16px and the same 8px gap between
   neighbours everywhere. Placed last so it overrides the older one-offs.
   ===================================================================== */
.ic { width: 16px; height: 16px; flex: none; display: block; }
[data-icon] { display: inline-flex; }
.rep { display: inline-flex; vertical-align: -1px; color: var(--muted); }
.rep .ic, .done-ic { width: 11px; height: 11px; }
.done-ic { display: inline-block; vertical-align: -1px; margin-right: 2px; }

.btn-add, .btn-save, .btn-quiet, .btn-danger, .acct-btn, .reminder-toggle, .legend-edit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--btn-h); padding: 0 var(--sp-3); border-radius: 99px;
  font-size: var(--fs-small); font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink);
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn-add:hover, .acct-btn:hover:not(:disabled), .reminder-toggle:hover, .legend-edit:hover {
  border-color: var(--accent); color: var(--accent); background: var(--paper-raised);
}
.btn-add { color: var(--accent); border-bottom-width: 1px; }
.btn-save, .acct-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-save:hover, .acct-btn.primary:hover:not(:disabled) { background: #244a3f; border-color: #244a3f; color: #fff; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--accent-soft); color: var(--ink); }
.btn-danger { color: var(--flag); border-color: var(--flag-soft); background: transparent; margin-left: auto; }
.btn-danger:hover { background: var(--flag-soft); border-color: var(--flag); }
.acct-btn:disabled { opacity: 0.55; cursor: default; }
.acct-btn[data-acct="menu"] { width: var(--btn-h); padding: 0; }
.reminder-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.legend-edit { height: 26px; padding: 0 var(--sp-2); border-style: dashed; color: var(--muted); margin-left: var(--sp-1); }
.legend-edit .ic { width: 14px; height: 14px; }

/* Round icon buttons */
.nav-btn, .btn-del, .detail-close, .cat-del {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border-radius: 99px; color: var(--muted); flex: none;
}
.nav-btn:hover:not(:disabled), .detail-close:hover { background: var(--accent-soft); color: var(--ink); }
.btn-del:hover, .cat-del:hover { background: var(--flag-soft); color: var(--flag); }
.nav-btn .ic { width: 18px; height: 18px; }
.btn-del.confirm {
  width: auto; padding: 0 var(--sp-3); font-size: var(--fs-small); font-weight: 700;
  color: var(--flag); background: var(--flag-soft);
}
.cat-del { width: 20px; height: 20px; }
.cat-del .ic { width: 12px; height: 12px; }
.btn-edit {
  height: 28px; padding: 0 var(--sp-3); border-radius: 99px; flex: none;
  font-size: var(--fs-small); font-weight: 600; color: var(--muted);
}
.btn-edit:hover { background: var(--accent-soft); color: var(--accent); }
.kmove { height: 26px; padding: 0 var(--sp-3); font-size: var(--fs-small); }

/* Rows of controls: consistent gaps, nothing crowded */
.cal-bar { gap: var(--sp-3); }
.cal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.edit-actions, .detail-actions { gap: var(--sp-2); margin-top: var(--sp-3); }
.account { gap: var(--sp-3); }
.task-row { align-items: center; }
.task-row .task-main { align-self: flex-start; }

/* Tasks header: title, view switch and Add task on one line; filters on their own. */
.tasks-head { row-gap: var(--sp-3); column-gap: var(--sp-4); }
.tasks-head .filters { order: 10; flex-basis: 100%; gap: var(--sp-2); }
.filters select {
  height: var(--btn-h); padding: 0 var(--sp-3); border-radius: 6px; font-size: var(--fs-small);
}


/* Time gutter wide enough for "12:00 PM" at caption size; "All day" on one line. */
.wk-row { grid-template-columns: 64px repeat(7, minmax(112px, 1fr)); }
.wk-allday-lbl { white-space: nowrap; letter-spacing: 0; padding: var(--sp-1) var(--sp-2) 0 0; }
/* Events are buttons (click for details); buttons centre text by default. */
.ev, .ev-block, .task-ev { text-align: left; }
/* Card forms (add/edit event, Google calendars): ".task-edit" padding was overriding
   the card's own, leaving content pressed against the border. */
.task-edit.event-form { padding: var(--sp-4) var(--sp-5); gap: var(--sp-3); }

/* ---------- Due tomorrow (hero) ---------- */
.hero-tomorrow {
  flex-basis: 100%; margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px;
}
.tm-head { display: flex; align-items: center; gap: var(--sp-3); }
.tm-label { font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tm-work { font-size: var(--fs-small); color: var(--muted); }
.tm-head .reminder-toggle { margin-left: auto; }
.tm-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.tm-item { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-body); }
.tm-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; align-self: center; }
.tm-title { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tm-when { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.tm-more { font-size: var(--fs-small); color: var(--muted); padding-left: var(--sp-4); }
.tm-empty { margin: var(--sp-2) 0 0; font-size: var(--fs-body); color: var(--muted); }

/* ---------- Classes panel ---------- */
.class-rows { display: grid; gap: var(--sp-2); }
.class-row { display: flex; align-items: center; gap: var(--sp-3); }
.class-row input { flex: 1; }
.class-dot { width: 10px; height: 10px; border-radius: 99px; flex: none; }
.class-count { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; min-width: 56px; text-align: right; }
.course-custom { margin-top: var(--sp-2); }

/* ---------- Header extras, How it works, footer ---------- */
.top-right { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; justify-content: flex-end; }
.feedback-link { font-size: var(--fs-small); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.feedback-link:hover { color: var(--accent); }


.site-foot {
  margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--muted);
}
.foot-links { display: flex; gap: var(--sp-4); }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }
.foot-copy { margin: 0; }

/* ---------- Standalone pages: Terms, Privacy, Contact ---------- */
.home-link { text-decoration: none; }
.doc { max-width: 680px; margin: var(--sp-7) 0 0; }
.doc h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 var(--sp-2); }
.doc h3 { font-size: var(--fs-lead); font-weight: 700; margin: var(--sp-6) 0 var(--sp-2); }
.doc p, .doc li { font-size: var(--fs-body); line-height: 1.65; }
.doc ul { padding-left: var(--sp-5); }
.doc a { color: var(--accent); }
.doc .doc-date { color: var(--muted); font-size: var(--fs-small); margin: 0 0 var(--sp-5); }

.contact-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.contact-form label { display: grid; gap: var(--sp-1); font-size: var(--fs-small); font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: var(--sp-2) var(--sp-3);
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-send {
  justify-self: start; background: var(--accent); color: #fff; font-weight: 700; font-size: var(--fs-body);
  border-radius: 99px; padding: var(--sp-2) var(--sp-5);
}
.contact-send:disabled { opacity: 0.6; cursor: default; }
.contact-status { font-size: var(--fs-body); margin: 0; }
.contact-status.ok { color: var(--accent); }
.contact-status.err { color: var(--flag); }

/* =====================================================================
   Redesign: shape, depth and motion.
   Radii and shadows come in steps, so how round and how raised something
   is says how big and how "lifted" it is: small for controls, medium for
   cards, large for windows and panels.
   ===================================================================== */
:root {
  --r-s: 6px; --r-m: 10px; --r-l: 18px;
  --shadow-1: 0 1px 2px rgba(27, 26, 23, 0.06), 0 1px 1px rgba(27, 26, 23, 0.04);
  --shadow-2: 0 2px 4px rgba(27, 26, 23, 0.05), 0 12px 28px rgba(27, 26, 23, 0.10);
  --shadow-3: 0 4px 10px rgba(27, 26, 23, 0.05), 0 30px 70px rgba(27, 26, 23, 0.16);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --list-bg: #EEECE5;
}

/* ---------- Frosted sticky header ----------
   A full-width bar of its own (outside .wrap), above everything that can float over the
   page — detail popups, menus — so its buttons can always be reached. */
.wrap { padding-top: 0; }
header.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 246, 242, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(207, 203, 192, 0.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top { background: var(--paper); }
}
.top-inner {
  max-width: 980px; margin: 0 auto; padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
html, body { overflow-x: clip; }
.home-link { text-decoration: none; }

/* ---------- Landing (Notion-style: split hero, sparse sections) ---------- */
.landing { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--sp-7);
  align-items: center; padding: var(--sp-8) 0 var(--sp-7);
}
.lp-title {
  font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.035em;
  font-weight: 800; margin: 0 0 var(--sp-5);
}
.lp-title-line { display: block; }
@media (min-width: 861px) { .lp-title-line { white-space: nowrap; } }
.lp-hl { color: var(--accent); }
.landing-lede { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); margin: 0 0 var(--sp-6); max-width: 36ch; }
.lp-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
/* The privacy promise, right under the buttons where people decide. */
.lp-assure { font-size: var(--fs-small); font-weight: 600; color: var(--accent); margin: var(--sp-4) 0 0; }
.landing-cta, .landing-demo {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--sp-5);
  border-radius: var(--r-s); font-size: var(--fs-body); font-weight: 600; transition: background-color .15s, border-color .15s;
}
.landing-cta { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.landing-cta:hover { background: #244a3f; border-color: #244a3f; }
.landing-demo { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line-strong); }
.landing-demo:hover { border-color: var(--ink); }
.landing-msg { font-size: var(--fs-body); color: var(--flag); margin: var(--sp-3) 0 0; max-width: 44ch; }

/* The sample day: the one rich object on the page. */
.lp-day {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-3); padding: var(--sp-5); animation: lp-rise 0.9s var(--ease) 0.1s both;
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(32px) scale(0.98); } to { opacity: 1; transform: none; } }
.lp-day-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }
.lp-day-dow { font-size: var(--fs-title); font-weight: 800; letter-spacing: -0.02em; margin-right: var(--sp-2); }
.lp-day-date { font-size: var(--fs-body); color: var(--muted); }
.lp-day-count { font-size: var(--fs-small); font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px var(--sp-2); border-radius: 99px; }
.lp-day-tasks { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-1); }
.lp-day-tasks label { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-s); cursor: pointer; }
.lp-day-tasks label:hover { background: var(--list-bg); }
.lp-day-tasks b { display: block; font-size: var(--fs-body); font-weight: 600; }
.lp-day-tasks small { font-size: var(--fs-small); color: var(--muted); }
.lp-check {
  appearance: none; width: 17px; height: 17px; margin: 2px 0 0; flex: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--paper-raised);
  display: grid; place-content: center; transition: background-color .15s, border-color .15s;
}
.lp-check:checked { background: var(--accent); border-color: var(--accent); animation: check-pop .3s var(--ease); }
.lp-check:checked::after { content: ""; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0.5px, -1px); }
.lp-day-tasks label:has(.lp-check:checked) b { color: var(--faint); text-decoration: line-through; font-weight: 500; }
/* Half-hour rows from 8:00; blocks placed by --s (start row) and --l (length). */
.lp-day-grid { display: grid; grid-template-columns: 44px 1fr; border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.lp-hours { display: grid; grid-template-rows: repeat(10, 40px); }
.lp-hours span { font-size: var(--fs-caption); color: var(--faint); transform: translateY(-7px); }
.lp-day-col {
  position: relative; display: grid; grid-template-rows: repeat(20, 20px); gap: 0;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 40px);
}
.lp-ev {
  grid-row: var(--s) / span var(--l); grid-column: 1; margin: 1px 0 1px var(--sp-1); overflow: hidden;
  padding: 0 var(--sp-2); border-radius: var(--r-s); display: flex; gap: var(--sp-2); align-items: center;
  background: var(--paper); border-left: 3px solid var(--line-strong); font-size: var(--fs-small);
}
.lp-ev b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ev small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ev.school { border-left-color: var(--evt-school); }
.lp-ev.personal { border-left-color: var(--evt-personal); background: var(--accent-soft); }
.lp-ev.vb { border-left-color: var(--evt-vb); background: #FBF3E6; }
.lp-ev.task { border-left-style: dashed; border-left-color: var(--faint); background: transparent; }
/* Blocks are buttons: tap for details, as in the app. */
.lp-ev { text-align: left; color: var(--ink); cursor: pointer; transition: box-shadow .15s; }
.lp-ev:hover, .lp-ev[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--accent); }
.lp-ev.done b { color: var(--faint); text-decoration: line-through; font-weight: 500; }
.lp-now { grid-row: var(--s); grid-column: 1; align-self: start; height: 0; border-top: 2px solid var(--flag); position: relative; z-index: 1; }
.lp-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--flag); }

/* Works-with strip: plain names, the way Notion lists customers. */
.lp-strip {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; justify-content: center;
  padding: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.lp-strip-label { font-size: var(--fs-small); color: var(--muted); }
.lp-works { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: center; }
.lp-works li { font-size: var(--fs-body); font-weight: 700; color: var(--muted); letter-spacing: -0.01em; }
.lp-works li:last-child { font-weight: 500; }

/* Section headings. */
.lp-h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; margin: 0 0 var(--sp-5); }
.lp-feat, .lp-private, .lp-how { padding: var(--sp-8) 0 0; }
/* How it works: three numbered steps, laid out like the privacy points. */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.lp-step-n {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 99px; margin-bottom: var(--sp-3);
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-body); font-weight: 800;
}
.lp-steps h3 { font-size: var(--fs-lead); font-weight: 700; margin: 0 0 var(--sp-1); }
.lp-steps p { font-size: var(--fs-body); color: var(--muted); margin: 0; }

/* Features: three tabs beside one large card that changes with them. */
.lp-feat-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--sp-5); align-items: start; }
.lp-feat-tabs { display: grid; gap: var(--sp-2); position: relative; }
.lp-feat-tabs button {
  position: relative; overflow: hidden; text-align: left; display: grid; gap: 2px;
  padding: var(--sp-4); border-radius: var(--r-m); color: var(--muted);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lp-feat-tabs button b { font-size: var(--fs-lead); font-weight: 700; color: var(--muted); transition: color .2s var(--ease); }
.lp-feat-tabs button span { font-size: var(--fs-body); }
.lp-feat-tabs button:hover { background: var(--list-bg); }
.lp-feat-tabs button[aria-selected="true"] { background: var(--list-bg); color: var(--ink); }
/* With the sliding highlight in place, it (not the button) carries the selected background. */
.lp-feat-tabs.glide button { z-index: 1; }
.lp-feat-tabs.glide button[aria-selected="true"] { background: transparent; }
.lp-feat-tabs.glide button[aria-selected="true"]:hover { background: transparent; }
.lp-feat-glide {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r-m); background: var(--list-bg); pointer-events: none;
  width: var(--gw, 0); height: var(--gh, 0); transform: translate(var(--gx, 0), var(--gy, 0));
  transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease);
}
.lp-feat-glide.instant { transition: none; }
.lp-feat-tabs button[aria-selected="true"] b { color: var(--ink); }
/* How long until the next one: fills as the timer runs (only when auto-advancing). */
.lp-feat-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .1s linear; opacity: 0; }
.lp-feat-grid.auto [aria-selected="true"] .lp-feat-bar { opacity: 1; }
.lp-feat-card {
  background: var(--list-bg); border-radius: var(--r-l); padding: var(--sp-5); min-height: 360px;
  display: grid; align-items: center;
}
/* All three pictures share one spot, so the card never changes height, and switching is a
   crossfade: the old one fades and sinks slightly while the new one rises into place.
   [hidden] is kept for assistive tech; visibility (not display) does the hiding here. */
.lp-feat-card { grid-template-areas: "panel"; }
.lp-feat-card .lp-panel, .lp-feat-card .lp-panel[hidden] {
  display: block; grid-area: panel; align-self: center;
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear 0s;
}
.lp-feat-card .lp-panel[hidden] {
  visibility: hidden; opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
/* Inside the new picture, its parts arrive in quick succession. */
@keyframes lp-part-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lp-feat-card .lp-panel:not([hidden]) :is(.mw-day, .mb-col, .big-due li, .bd-later) { animation: lp-part-in .5s var(--ease) both; }
.lp-feat-card .lp-panel:not([hidden]) :is(.mw-day, .mb-col, .big-due > ul > li):nth-child(1) { animation-delay: .08s; }
.lp-feat-card .lp-panel:not([hidden]) :is(.mw-day, .mb-col, .big-due > ul > li):nth-child(2) { animation-delay: .14s; }
.lp-feat-card .lp-panel:not([hidden]) :is(.mw-day, .mb-col, .big-due > ul > li):nth-child(3) { animation-delay: .20s; }
.lp-feat-card .lp-panel:not([hidden]) :is(.mw-day, .mb-col):nth-child(4) { animation-delay: .26s; }
.lp-feat-card .lp-panel:not([hidden]) :is(.mw-day, .mb-col):nth-child(5) { animation-delay: .32s; }
.lp-feat-card .lp-panel:not([hidden]) .bd-later { animation-delay: .28s; }
.lp-feat-card .lp-panel:not([hidden]) .bd-later li { animation: none; }
.lp-feat-card .mock-week, .lp-feat-card .mock-board, .big-due { background: var(--paper-raised); box-shadow: var(--shadow-2); }
.lp-feat-card .mock-board { border-radius: var(--r-m); padding: var(--sp-3); }

/* Week mock: half-hour rows from 7:00, blocks placed by --s (start row) and --l (length). */
.mock-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.mw-day { border-right: 1px solid var(--line); min-width: 0; }
.mw-day:last-child { border-right: none; }
.mw-day.today { background: var(--today-wash); }
.mw-head { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.mw-head b { font-size: var(--fs-body); }
.mw-day.today .mw-head b { color: var(--accent); }
.mw-head span { font-size: var(--fs-caption); color: var(--muted); }
.mw-body {
  display: grid; grid-template-rows: repeat(24, 16px); padding: var(--sp-2) var(--sp-1);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 32px); background-position: 0 var(--sp-2);
}
.mw-ev {
  grid-row: var(--s) / span var(--l); grid-column: 1; margin: 1px 0; padding: 3px var(--sp-2); border-radius: 4px; overflow: hidden;
  font-size: var(--fs-caption); line-height: 1.25; font-weight: 600;
  background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line); border-left: 3px solid var(--line-strong);
}
.mw-ev i { display: block; font-style: normal; font-weight: 500; color: var(--muted); }
.mw-ev.school { border-left-color: var(--evt-school); }
.mw-ev.vb { border-left-color: var(--evt-vb); background: #FBF3E6; }
.mw-ev.task { border-left-style: dashed; border-left-color: var(--faint); }


/* Tomorrow: the app's "Due tomorrow" card, with the rest of the week underneath. */
.big-due { border-radius: var(--r-m); padding: var(--sp-5); }
.bd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.bd-head b { font-size: var(--fs-lead); }
.bd-remind { font-size: var(--fs-small); font-weight: 600; border: 1px solid var(--line-strong); border-radius: 99px; padding: var(--sp-1) var(--sp-3); }
.big-due ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.big-due li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); }
.big-due li b { flex: 1; font-weight: 600; }
.big-due li small { font-size: var(--fs-small); color: var(--muted); margin-left: auto; }
.bd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cls); flex: none; }
.bd-later { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.bd-later > b { display: block; font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-2); }
.bd-later li { color: var(--muted); }

/* Board mock: Trello-style lists. */
.mock-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.mb-col { background: var(--list-bg); border-radius: var(--r-m); padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.mb-head { font-weight: 700; font-size: var(--fs-body); padding: 0 var(--sp-1) var(--sp-1); }
.mb-head span { color: var(--muted); font-weight: 500; margin-left: var(--sp-1); }
.mb-card {
  background: var(--paper-raised); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3) var(--sp-3);
  box-shadow: var(--shadow-1); font-size: var(--fs-body); font-weight: 600; display: grid; gap: var(--sp-1); justify-items: start;
}
.mb-card.done { opacity: 0.6; }
.mb-label {
  font-size: var(--fs-caption); font-weight: 700; color: #fff; background: var(--cls); text-decoration: none;
  padding: 1px var(--sp-2); border-radius: 4px;
}
.mb-due { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); background: var(--paper); padding: 1px var(--sp-2); border-radius: 4px; }
.mb-due.over { color: #fff; background: var(--flag); }


/* Private by design: three short points. */
.lp-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.lp-points li { border-top: 2px solid var(--accent); padding-top: var(--sp-3); }
.lp-points h3 { font-size: var(--fs-lead); font-weight: 700; margin: 0 0 var(--sp-1); }
.lp-points p { font-size: var(--fs-body); color: var(--muted); margin: 0; }

/* FAQ: Notion-style toggles. */
.lp-faq { padding: var(--sp-8) 0 0; }
.lp-faq details { border-bottom: 1px solid var(--line); max-width: 720px; }
.lp-faq details:first-of-type { border-top: 1px solid var(--line); }
.lp-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-1); font-size: var(--fs-lead); font-weight: 600; border-radius: var(--r-s);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::before {
  content: ""; width: 0; height: 0; flex: none; border-left: 6px solid var(--muted);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .2s var(--ease);
}
.lp-faq details[open] summary::before { transform: rotate(90deg); }
.lp-faq summary:hover { background: var(--list-bg); }
.lp-faq details p { margin: 0; padding: 0 var(--sp-1) var(--sp-4) var(--sp-5); color: var(--muted); font-size: var(--fs-body); line-height: 1.65; max-width: 62ch; }
.lp-faq details[open] p { animation: fade-in .25s var(--ease); }

/* Closing call to action. */
.lp-final { text-align: center; background: var(--accent-soft); border-radius: var(--r-l); padding: var(--sp-8) var(--sp-5); margin-top: var(--sp-8); }
.lp-final-title { font-size: clamp(1.5rem, 3vw, 2.125rem); letter-spacing: -0.025em; line-height: 1.12; font-weight: 800; margin: 0 auto var(--sp-5); }
.lp-final .lp-ctas { justify-content: center; }

/* Sections fade in once on scroll (only armed by JS, and never with reduced motion). */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-6); }
  .lp-points, .lp-steps { grid-template-columns: 1fr; }
  .lp-feat-grid { grid-template-columns: 1fr; }
  .lp-feat-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-feat-tabs button { padding: var(--sp-3); }
  .lp-feat-tabs button span { display: none; }
  .lp-feat-card { min-height: 0; padding: var(--sp-3); }
}
@media (max-width: 760px) {
  .lp-ctas > * { flex: 1 1 100%; }
  .lp-day { padding: var(--sp-4); }
  .lp-strip { gap: var(--sp-3); }
}

/* ---------- App: calm surfaces ---------- */
.demo-banner { border-radius: var(--r-m); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); }
.hero-tomorrow { border-radius: var(--r-m); box-shadow: var(--shadow-1); }
.tm-label, .task-group-head, .detail-row .dk, .wk-allday-lbl { text-transform: none; letter-spacing: 0; }
.tm-label { font-size: var(--fs-body); color: var(--ink); }
.task-group-head { font-size: var(--fs-small); color: var(--ink); }
.cal-scroll { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper-raised); }
.weekcal, .monthgrid { border-top: none; border-left: none; }
.monthgrid .mday:nth-child(7n) { border-right: none; }
.mhead:nth-child(7) { border-right: none; }
.ev-block { border-radius: 5px; }
.task { border-bottom-color: var(--line); border-radius: var(--r-s); transition: background-color .15s; }
.task:hover { background: rgba(238, 236, 229, 0.6); }
.task-row { padding: var(--sp-3) var(--sp-2); }
.task-meta .type-tag { font-style: normal; background: var(--list-bg); padding: 0 var(--sp-2); border-radius: 4px; }
.event-form, .task-edit.event-form { border-radius: var(--r-m); box-shadow: var(--shadow-2); border-color: var(--line); }
.detail-card { border-radius: var(--r-m); }
.acct-menu { border-radius: var(--r-m); box-shadow: var(--shadow-2); }
.filters select { border-color: var(--line); background: var(--paper-raised); }
.filters select:hover { border-color: var(--line-strong); }

/* ---------- App: Trello-style board ---------- */
.kanban { gap: var(--sp-3); align-items: start; }
.kcol { border-top: none; background: var(--list-bg); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-2) var(--sp-2); }
.kcol-head { padding: 0 var(--sp-2); margin-bottom: var(--sp-2); }
.kcol-body { gap: var(--sp-2); padding: 2px var(--sp-1) var(--sp-1); margin: 0; min-height: 48px; border-radius: var(--r-s); }
.kcard {
  border: none; border-radius: var(--r-s); box-shadow: var(--shadow-1); position: relative; overflow: hidden; flex-shrink: 0;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.kcard[style*="--cls"] { padding-top: var(--sp-4); }
.kcard[style*="--cls"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cls); }
.kcard[draggable="true"]:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kcard.dragging { opacity: 0.5; transform: rotate(2deg); }
.kcard.done .kcard-title { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.kcard .task-meta .due { padding: 1px var(--sp-2); border-radius: 4px; background: var(--paper); font-weight: 600; }
.kcard .task-meta .due.over { background: var(--flag); color: #fff; }
.kcard .task-meta .due.soon { background: var(--accent-soft); }
.kcol-body.drag-over { background: rgba(46, 92, 78, 0.10); outline: 2px dashed var(--accent); outline-offset: -2px; }
.kcol-body .empty { text-align: center; padding: var(--sp-3) 0; }

/* ---------- App: motion that answers an action ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes check-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
#event-form-host > *, #sync-host > *, #class-host > *, .task-edit, .acct-menu { animation: panel-in .22s var(--ease); }
#calendar.view-enter { animation: fade-in .25s var(--ease); }
.task-check:checked { animation: check-pop .3s var(--ease); }
.task-check { transition: background-color .15s, border-color .15s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Brand ---------- */
header.top h1.brand { line-height: 0; }
.brand img { display: block; height: 36px; width: auto; }
.brand .home-link { display: block; }
@media (max-width: 760px) { .brand img { height: 30px; } }

/* ---------- Landing section nav ---------- */
.lp-nav { display: flex; gap: var(--sp-1); }
.lp-nav a {
  font-size: var(--fs-body); font-weight: 500; color: var(--muted); text-decoration: none;
  height: var(--btn-h); display: inline-flex; align-items: center; padding: 0 var(--sp-3); border-radius: 99px;
  transition: background-color .15s, color .15s;
}
.lp-nav a:hover { color: var(--ink); background: var(--list-bg); }
.lp-nav a[aria-current="true"] { color: var(--ink); background: var(--list-bg); font-weight: 600; }
/* Jumping to a section lands it below the sticky header, not under it. */
.lp-section { scroll-margin-top: var(--sp-4); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 760px) {
  .lp-nav { order: 3; flex-basis: 100%; justify-content: space-between; margin: 0 calc(-1 * var(--sp-3)); }
  .lp-nav a { padding: 0 var(--sp-2); font-size: var(--fs-small); }
  .top-inner { padding: var(--sp-2) var(--sp-4); row-gap: var(--sp-1); }
}
/* Anything scrolled into view (keyboard focus, jump links) stops below the sticky header. */
html { scroll-padding-top: 76px; }
@media (max-width: 760px) { html { scroll-padding-top: 112px; } }

/* ---------- Phone refinements ---------- */
.demo-banner p { margin: 0; flex: 1 1 280px; }
.demo-link { display: inline; }
@media (max-width: 760px) {
  .brand img { height: 28px; }
  .top-inner .btn-google { height: var(--btn-h); padding: 0 var(--sp-3) 0 var(--sp-2); font-size: var(--fs-small); }
  .top-right { gap: var(--sp-3); }
  .hero-due { text-align: left; }
}
@media (max-width: 480px) { .feedback-link { display: none; } }
/* Feature pictures on phones: three days of the week; a tighter board. */
@media (max-width: 760px) {
  .mock-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mock-week .mw-day:nth-child(n+4) { display: none; }
  .mock-week .mw-day:nth-child(3) { border-right: none; }
  .mock-board { gap: var(--sp-1); padding: var(--sp-2); }
  .mb-col { padding: var(--sp-2) var(--sp-1); }
  .mb-card { font-size: var(--fs-small); padding: var(--sp-1) var(--sp-2) var(--sp-2); }
  .mb-head { font-size: var(--fs-small); }
}

/* ---------- Touch screens: fingers, not cursors ----------
   (--fs-lead is 16px, the size below which iOS zooms.)
   iOS Safari zooms the whole page when a field under 16px is focused, and leaves it zoomed.
   The !important is deliberate: several component rules (.filters select, .task-edit input…)
   set smaller sizes with higher specificity, and none of them should win on a phone. */
@media (max-width: 760px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: var(--fs-lead) !important; }
}
/* Tap targets ~44px (Apple's guideline). Round icon buttons simply grow; buttons whose look
   depends on their exact box (tabs with an underline, the checkbox) get an invisible,
   larger hit area instead, so the design is unchanged. */
@media (pointer: coarse) {
  .nav-btn, .btn-del, .detail-close { width: 44px; height: 44px; }
  .btn-del.confirm { width: auto; height: 44px; }
  .btn-edit { height: 44px; }
  .kmove { min-height: 36px; padding: var(--sp-1) var(--sp-3); }
  .legend-item { padding: var(--sp-2); }
  .event-form label.checkline { min-height: 44px; }
  .event-form label.checkline input { width: 22px; height: 22px; }
  .seg button, .foot-links a, .home-link, .demo-link { position: relative; }
  .seg button::after, .foot-links a::after, .home-link::after, .demo-link::after {
    content: ""; position: absolute; inset: -10px -6px;
  }
  .task-check { width: 24px; height: 24px; margin-top: 0; border-radius: 6px; }
  .task-check:checked::after { width: 11px; height: 6px; border-left-width: 2.5px; border-bottom-width: 2.5px; }
  .task-row { gap: var(--sp-2); }
}
/* Month view on a phone: all seven days fit on screen. Each item shrinks to its colored dot;
   tapping the day opens that week with the full details. */
@media (max-width: 760px) {
  .monthgrid { min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mhead { padding: var(--sp-2) 0; text-align: center; }
  .mday { min-height: 58px; padding: 28px 2px var(--sp-1); text-align: center; }
  .mday-head { left: 0; right: 0; text-align: center; }
  .mday .mini { display: inline-flex; margin: 0 1px; }
  .mday .mini .tm, .mday .mini .txt { display: none; }
  .mday .mini .dot { width: 7px; height: 7px; }
  .mday .more { display: none; }
}
/* Two-up form rows must be allowed to shrink: date/time fields have a wide built-in minimum
   (wider still at the 16px phone size), which otherwise pushes the form past a 320px screen. */
.event-form .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.event-form input, .event-form select, .event-form textarea { min-width: 0; max-width: 100%; }
/* Narrow phones (iPhone SE and smaller): one field per line, so dates and times show in full. */
@media (max-width: 400px) {
  .event-form .row2 { grid-template-columns: minmax(0, 1fr); }
}