/* 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;
  --news-policy: #8A5A12;       /* What's new: Privacy Policy slides */
  --news-policy-soft: #F5EBD9;
  --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;
}
/* Libre Franklin, served from Clew's own domain (not Google Fonts) so the first paint
   doesn't wait on a second site. One variable file covers every weight from 400 to 800.
   Licence: brand/fonts/OFL.txt. */
@font-face {
  font-family: "Libre Franklin"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/libre-franklin-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
* { 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 .brand { 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; }

.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; }

/* The list scrolls inside its own box so a long list doesn't stretch the page; the group
   headings stay pinned at the top of it while their tasks scroll past. */
#tasklist { max-height: min(70vh, 640px); overflow-y: auto; scrollbar-gutter: stable; }
#tasklist .task-group-head { position: sticky; top: 0; z-index: 1; background: var(--paper); }
.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; }
/* Long descriptions: three lines, then "More" opens the rest. */
.task-desc.clamped, .detail-desc.clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.desc-more { color: var(--accent); font-size: var(--fs-small); font-weight: 600; padding: 0; margin-top: var(--sp-1); }
.desc-more:hover { text-decoration: underline; }
.task-more-row { padding-top: 0; margin-top: calc(-1 * var(--sp-3)); }
.task-check-spacer { width: 17px; flex: none; }
.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, .acct-menu a { text-align: left; font-size: var(--fs-body); padding: var(--sp-2) var(--sp-3); border-radius: 4px; color: var(--ink); text-decoration: none; }
.acct-menu button:hover, .acct-menu a:hover { background: var(--accent-soft); }
.acct-menu button:last-child, .acct-menu [data-acct="forget"], .acct-menu .acct-danger { color: var(--flag); }
.acct-cloud { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--accent); border-bottom: 1px solid var(--line); }
.acct-cloud.err { 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);
}
/* Signed in, once per device: offer to keep the planner on every device (Clew account). */
.cloud-card {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 6px;
  background: var(--accent-soft); color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
}
.cloud-text { flex: 1 1 320px; }
.cloud-text p { margin: 0; font-size: var(--fs-body); color: var(--muted); }
.cloud-text .cloud-title { font-weight: 700; color: var(--ink); margin-bottom: var(--sp-1); }
.cloud-text .cloud-err { color: var(--flag); margin-top: var(--sp-2); }
.cloud-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cloud-gbtn { min-height: 40px; }
.demo-home {
  margin-left: auto; text-decoration: none; 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. */
/* 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); }
.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; }
/* The landing page's way into the app. */
.lp-login {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-4); border-radius: 99px;
  border: 1px solid var(--line-strong); font-size: var(--fs-body); font-weight: 600; color: var(--ink); text-decoration: none;
}
.lp-login:hover { border-color: var(--accent); color: var(--accent); }
.lp-signup {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-4); border-radius: 99px;
  border: 1px solid var(--accent); background: var(--accent); font-size: var(--fs-body); font-weight: 600; color: #fff; text-decoration: none;
}
.lp-signup:hover { background: #244a3f; border-color: #244a3f; }


.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 h1 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 var(--sp-2); }
.doc h2 { 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; text-decoration: none; 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; }
.landing-msg.ok { color: var(--accent); }

/* 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(--muted); 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; }
.lp-points p a { color: var(--accent); text-underline-offset: 3px; }

/* 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 .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-2); }
  .hero-due { text-align: left; }
}
/* 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-spacer { width: 24px; }
  .desc-more { min-height: 36px; }
  .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); }
}

/* ---------- Weekly progress (hero) ----------
   A thin bar that fills as the week's tasks get done. Finishing one gives the fill a
   small pulse; clearing the day or the week gives it a shine and a burst of confetti. */
.hero-progress { flex-basis: 100%; position: relative; margin-top: var(--sp-1); }
.hp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.hp-label { font-size: var(--fs-body); font-weight: 700; }
.hp-count { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.hero-progress.cleared .hp-count { color: var(--accent); }
.hp-track { height: 10px; border-radius: 99px; background: var(--list-bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.hp-fill {
  height: 100%; min-width: 0; border-radius: 99px; background: var(--accent);
  transition: width .6s var(--ease); position: relative;
}
.hero-progress.bump .hp-fill { animation: hp-bump .45s var(--ease); }
@keyframes hp-bump { 0% { filter: brightness(1); } 35% { filter: brightness(1.35); } 100% { filter: brightness(1); } }
.hero-progress.celebrate .hp-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  background-size: 200% 100%; animation: hp-shine 1s var(--ease) .15s both;
}
@keyframes hp-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.hero-progress.celebrate .hp-count { animation: check-pop .45s var(--ease) .1s; display: inline-block; }
.hp-confetti { position: absolute; right: 12%; bottom: 4px; width: 0; height: 0; pointer-events: none; }
.hp-confetti i {
  position: absolute; left: 0; top: 0; width: 7px; height: 4px; border-radius: 1px; background: var(--c);
  opacity: 0; animation: hp-pop 1.1s cubic-bezier(0.15, 0.7, 0.3, 1) both;
}
@keyframes hp-pop {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 26px)) rotate(var(--r)); }
}

/* ---------- Header: the settings gear ---------- */
.acct-btn.acct-icon { width: var(--btn-h); padding: 0; }
.acct-btn.acct-icon .ic { width: 17px; height: 17px; }

/* ---------- Settings panel ---------- */
.set-lock, .set-lock body { overflow: hidden; }
.set-scrim {
  position: fixed; inset: 0; z-index: 200; background: rgba(27, 26, 23, 0.32);
  animation: fade-in .2s var(--ease);
}
.set-panel {
  position: fixed; z-index: 201; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto;
  background: var(--paper-raised); border-radius: var(--r-l); box-shadow: var(--shadow-3);
  padding: var(--sp-5); animation: set-in .24s var(--ease);
}
.set-panel:focus { outline: none; }
@keyframes set-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
.set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.set-head h2 { margin: 0; font-size: var(--fs-title); font-weight: 800; letter-spacing: -0.02em; }
.set-sec { padding: var(--sp-4) 0; border-top: 1px solid var(--line); display: grid; gap: var(--sp-4); }
.set-sec:first-of-type { border-top: none; padding-top: var(--sp-2); }
.set-sec h3 { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.set-intro { margin: calc(-1 * var(--sp-2)) 0 0; font-size: var(--fs-body); color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.set-text { display: grid; gap: 2px; min-width: 0; }
.set-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.set-hint { font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.set-block { display: grid; gap: var(--sp-2); }
.set-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.set-note { margin: 0; font-size: var(--fs-small); color: var(--muted); background: var(--list-bg); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3); }
.set-msg { margin: 0; font-size: var(--fs-small); color: var(--accent); min-height: 1em; }
.set-msg:empty { display: none; }

/* This device: whether reminders arrive here. */
.set-device { margin: 0; font-size: var(--fs-body); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.set-device p { margin: 0; }
.set-device b { color: var(--ink); }
.set-device.on { border-color: var(--accent); background: var(--accent-soft); }
.set-device.on p { display: flex; align-items: center; gap: var(--sp-2); color: var(--accent); font-weight: 600; }
.set-device.on .btn-quiet:hover { background: var(--paper-raised); }
.set-device.warn { border-color: var(--flag-soft); background: var(--flag-soft); color: var(--flag); }
.set-quiet { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: calc(-1 * var(--sp-2)); }
.set-time { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--muted); }
.set-time select {
  font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line-strong); border-radius: var(--r-s); padding: var(--sp-1) var(--sp-2);
}
.set-device-msg { margin: 0; font-size: var(--fs-small); color: var(--flag); line-height: 1.45; }

/* On/off switch: a button with role="switch". */
.switch {
  position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px;
  background: var(--line-strong); transition: background-color .18s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px;
  background: #fff; box-shadow: 0 1px 2px rgba(27, 26, 23, 0.25); transition: transform .18s var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }

/* Reminder timings: toggle chips. */
.set-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.set-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--btn-h); padding: 0 var(--sp-3);
  border-radius: 99px; border: 1px solid var(--line-strong); background: var(--paper-raised);
  font-size: var(--fs-small); font-weight: 600; color: var(--muted);
  transition: background-color .12s, border-color .12s, color .12s;
}
.set-chip:hover { border-color: var(--accent); color: var(--ink); }
.set-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.set-chip .ic { width: 14px; height: 14px; }

/* Volume */
.set-volume { justify-content: flex-start; }
.set-volume input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }

@media (max-width: 560px) {
  .set-panel { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 88dvh; border-radius: var(--r-l) var(--r-l) 0 0; padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  @keyframes set-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (pointer: coarse) {
  .switch { width: 48px; height: 28px; }
  .switch::after { width: 22px; height: 22px; }
  .switch[aria-checked="true"]::after { transform: translateX(20px); }
  .set-chip { min-height: 40px; }
}

/* ---------- Layouts ----------
   Today stays on top in every layout. "standard" keeps the old single column: the board
   sits right under the task toolbar and List / Board switch between them. "side" (B3)
   puts the task list down the right and the calendar and board on the left, on screens
   wide enough for it; narrower screens stack Today, Calendar, Board, Tasks. */
#app-shell[data-layout="standard"] .board-head { display: none; }
#app-shell[data-layout="side"] .tasks-head .seg { display: none; }
#app-shell[data-layout="side"] {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-6);
  grid-template-areas: "banner" "news" "hero" "cal" "board" "tasks" "note";
}
#app-shell[data-layout="side"] > #banner { grid-area: banner; }
#app-shell[data-layout="side"] > #news { grid-area: news; }
#app-shell[data-layout="side"] > .hero { grid-area: hero; }
#app-shell[data-layout="side"] > .blk-cal { grid-area: cal; min-width: 0; }
#app-shell[data-layout="side"] > .blk-board { grid-area: board; min-width: 0; margin-top: var(--sp-7); }
#app-shell[data-layout="side"] > .blk-tasks { grid-area: tasks; min-width: 0; }
#app-shell[data-layout="side"] > .src-note { grid-area: note; }
@media (min-width: 1100px) {
  html[data-layout="side"] .wrap, html[data-layout="side"] .top-inner { max-width: 1360px; }
  /* The week has less room beside the list; let its days narrow rather than scroll. */
  #app-shell[data-layout="side"] .weekcal { min-width: 640px; }
  #app-shell[data-layout="side"] .wk-row { grid-template-columns: 64px repeat(7, minmax(80px, 1fr)); }
  #app-shell[data-layout="side"] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start;
    grid-template-rows: auto auto auto auto 1fr auto;   /* a long list's extra height goes under the board */
    grid-template-areas: "banner banner" "news news" "hero hero" "cal tasks" "board tasks" "note note";
  }
  /* The list runs from the top of the calendar to the bottom of the board, and scrolls
     inside that. height: 0 keeps its length out of the row sizing (the left column sets
     the height); min-height: 100% then fills the two rows it spans. */
  #app-shell[data-layout="side"] > .blk-tasks {
    margin-top: 0; align-self: stretch; height: 0; min-height: 100%;
    display: flex; flex-direction: column;
  }
  #app-shell[data-layout="side"] #tasklist { flex: 1 1 0; min-height: 240px; max-height: none; }
  #app-shell[data-layout="side"] > .blk-tasks .tasks-head .spacer { display: none; }
}

/* Settings: the layout choices, each with a small picture of where the blocks go. */
.set-layouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
.set-layout {
  display: grid; gap: var(--sp-1); text-align: left; padding: var(--sp-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-m); background: var(--paper-raised);
}
.set-layout:hover { border-color: var(--accent); }
.set-layout.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.lay-pic {
  display: grid; gap: 3px; height: 64px; padding: var(--sp-1); margin-bottom: var(--sp-1);
  border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line);
}
.lay-pic i { display: block; border-radius: 2px; background: var(--line-strong); }
.lay-pic .p-today { background: var(--muted); opacity: 0.45; }
.lay-pic .p-list, .lay-pic .p-board { background: var(--accent); opacity: 0.55; }
.lay-standard { grid-template-rows: 6px 1fr 14px; grid-template-areas: "t" "c" "l"; }
.lay-standard .p-board { display: none; }
.lay-side { grid-template-columns: 7fr 3fr; grid-template-rows: 6px 1fr 14px; grid-template-areas: "t t" "c l" "b l"; }
.lay-pic .p-today { grid-area: t; } .lay-pic .p-cal { grid-area: c; } .lay-pic .p-list { grid-area: l; } .lay-pic .p-board { grid-area: b; }

/* ---------- What's new pop-up (design 1, "Spotlight") ----------
   A picture on top; under it "Introducing", the change, dots and Next. Policy slides use
   the amber pair so they read as different from features.
   Motion: every slide sits on one strip. A spring in app.js (newsMotion) moves the strip
   and, from its live position each frame, the dots, the slides' fade and Back, so they
   can't fall out of step and can be grabbed mid-move. CSS here only does the opening
   and closing, press feedback and each picture's small accent once its slide is live. */
.nw-lock, .nw-lock body { overflow: hidden; }
/* Dim and soften the planner behind: the card is the one thing in focus. */
.nw-scrim {
  position: fixed; inset: 0; z-index: 300; background: rgba(27, 26, 23, 0.34);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  animation: nw-scrim-in .35s var(--ease) both;
}
@keyframes nw-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.nw {
  position: fixed; z-index: 301; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden;
  background: var(--paper-raised); border-radius: 20px; box-shadow: 0 24px 70px rgba(27, 26, 23, 0.28);
  animation: nw-in .5s var(--ease) both;
}
.nw:focus { outline: none; }
/* It arrives from just below and leaves the same way: same path in and out. */
@keyframes nw-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
.nw-closing .nw { animation: nw-out .2s var(--ease) both; }
.nw-closing .nw-scrim { animation: nw-fade-out .2s var(--ease) both; }
@keyframes nw-out { to { opacity: 0; transform: translate(-50%, calc(-50% + 24px)) scale(0.96); } }
@keyframes nw-fade-out { to { opacity: 0; } }
.nw-x {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--ink);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.nw-x:hover { background: #fff; }
.nw-x:active { transform: scale(0.9); transition-duration: 80ms; }

/* The strip */
.nw-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.nw-viewport.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.nw-viewport a { cursor: pointer; }
.nw-track { display: flex; will-change: transform; }
.nw-slide { flex: 0 0 100%; min-width: 0; opacity: 0.35; }
.nw-slide.active { opacity: 1; }
.nw-copy { position: relative; min-height: 190px; padding: var(--sp-5) var(--sp-6) 0; }
.nw-count { position: absolute; top: var(--sp-5); right: var(--sp-6); font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.nw-eyebrow { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--accent); }
.nw-eyebrow.policy { color: var(--news-policy); }
.nw-title { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-title); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.nw-body { margin: 0; font-size: var(--fs-body); color: var(--muted); line-height: 1.6; }
.nw-where { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--muted); }
.nw-where b { color: var(--ink); }
.nw-where a { color: var(--accent); font-weight: 700; }

/* The footer stays still while the strip moves above it. */
.nw-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--sp-4) var(--sp-6) var(--sp-5); }
.nw-back { justify-self: start; color: var(--muted); font-size: var(--fs-body); font-weight: 600; padding: var(--sp-2) var(--sp-1); opacity: 0; transition: color .2s var(--ease), transform 80ms ease-out; }
.nw-back:hover { color: var(--ink); }
.nw-back:active { transform: scale(0.94); }
.nw-back:disabled { pointer-events: none; }   /* keeps its place (faded by the strip), so the dots stay centred */
.nw-next {
  justify-self: end; background: var(--accent); color: #fff; font-size: var(--fs-body); font-weight: 700;
  border-radius: 999px; padding: var(--sp-2) var(--sp-5); transition: background .2s var(--ease), transform .2s var(--ease);
}
.nw-next:hover { background: #244a3f; }
.nw-next:active { transform: scale(0.95); transition-duration: 80ms; }   /* answers the press itself, not the release */
.nw-dots { display: flex; gap: var(--sp-2); }
.nw-dots i { display: block; width: 8px; height: 8px; border-radius: 99px; background: var(--line-strong); transition: background-color .25s var(--ease); }
.nw-dots i.on { background: var(--accent); }

/* Opening: the picture settles, then the words rise in, one line after another. */
.nw-opening .nw-slide.active .np-scene { animation: np-settle .6s var(--ease) .1s both; }
.nw-opening .nw-slide.active .nw-copy > * { animation: nw-rise .5s var(--ease) both; }
.nw-opening .nw-slide.active .nw-copy > :nth-child(1) { animation-delay: .16s; }
.nw-opening .nw-slide.active .nw-copy > :nth-child(2) { animation-delay: .2s; }
.nw-opening .nw-slide.active .nw-copy > :nth-child(3) { animation-delay: .24s; }
.nw-opening .nw-slide.active .nw-copy > :nth-child(n+4) { animation-delay: .28s; }
.nw-opening .nw-foot { animation: nw-rise .5s var(--ease) .32s both; }
@keyframes np-settle { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes nw-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The pictures. Everything in them is in place from the start, so a slide never arrives
   half-drawn; the small accents below play once it is the current slide. */
.nw-pic { position: relative; height: 270px; overflow: hidden; background: var(--accent-soft); }
.nw-pic.policy { background: var(--news-policy-soft); }
.np-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.np-scene i { display: block; }
.np-ui {
  height: 76%; aspect-ratio: 16 / 10; max-width: 86%; background: var(--paper); border-radius: 12px; box-shadow: 0 10px 30px rgba(46, 92, 78, 0.18);
  padding: var(--sp-3); display: grid; gap: var(--sp-2); grid-template-columns: 7fr 3fr; grid-template-rows: 10px 1fr 0.8fr;
  grid-template-areas: "t t" "c l" "b l";
}
.np-ui i { border-radius: 6px; }
.np-t { grid-area: t; background: var(--line-strong); }
.np-c, .np-b { background: #fff; border: 1px solid var(--line); }
.np-c { grid-area: c; } .np-b { grid-area: b; }
.np-l { grid-area: l; background: var(--accent); transform-origin: center; }
.active .np-l { animation: np-lift .7s var(--ease) .35s both, np-glow 3s ease-in-out 1.1s infinite; }
@keyframes np-lift { 0% { transform: none; } 45% { transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 18px rgba(46, 92, 78, 0.3); } 100% { transform: none; } }
@keyframes np-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

.np-stack { display: grid; justify-items: center; gap: var(--sp-3); width: 100%; }
.np-notif {
  width: 74%; display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-3); align-items: center; text-align: left;
  background: #fff; border-radius: 16px; padding: var(--sp-3) var(--sp-4); box-shadow: 0 14px 34px rgba(27, 26, 23, 0.16);
}
.np-notif small { display: block; font-size: var(--fs-small); color: var(--muted); }
.np-notif b { display: block; font-size: var(--fs-body); }
.np-app { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.np-app .ic { transform-origin: 50% 12%; }
.active .np-notif { animation: np-nudge .7s var(--ease) .3s both; }
.active .np-app .ic { animation: np-ring 1s var(--ease) .45s both; }
.np-quiet { font-size: var(--fs-small); font-weight: 600; color: var(--accent-soft); background: #1F3A31; border-radius: 99px; padding: var(--sp-1) var(--sp-3); }
@keyframes np-nudge { 0% { transform: none; } 35% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes np-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); } }

.np-col { width: 54%; background: var(--paper); border-radius: 12px; padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.np-colhead { display: flex; justify-content: space-between; font-size: var(--fs-caption); font-weight: 700; color: var(--muted); }
.np-card {
  display: flex; justify-content: space-between; gap: var(--sp-2); background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); font-weight: 600; max-height: 40px; overflow: hidden;
}
.np-card small { color: var(--faint); font-weight: 500; font-size: var(--fs-small); }
.active .np-gone { animation: np-clear 4.2s cubic-bezier(0.32, 0.72, 0, 1) .5s infinite; }
@keyframes np-clear {
  0%, 25% { opacity: 1; transform: none; max-height: 40px; }
  45% { opacity: 0; transform: translateX(30px); max-height: 40px; }
  60%, 80% { opacity: 0; transform: translateX(30px); max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: calc(-1 * var(--sp-2)); }
  100% { opacity: 1; transform: none; max-height: 40px; }
}

.np-doc {
  position: relative; width: 150px; aspect-ratio: 3 / 4; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(138, 90, 18, 0.18);
  padding: var(--sp-4); display: grid; align-content: start; gap: var(--sp-2);
}
.np-doc i { height: 6px; border-radius: 3px; background: var(--line); }
.np-doc .np-h { height: 8px; width: 60%; background: var(--ink); }
.np-doc .np-80 { width: 80%; } .np-doc .np-70 { width: 70%; } .np-doc .np-60 { width: 60%; }
.np-hl { display: grid; gap: var(--sp-1); background: var(--news-policy-soft); border-left: 3px solid var(--news-policy); border-radius: 4px; padding: var(--sp-1) var(--sp-2); transform-origin: left center; }
.np-hl i { background: #E2C68F; }
.np-seal {
  position: absolute; right: -14px; bottom: -14px; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(46, 92, 78, 0.35);
}
.active .np-hl { animation: np-mark .8s var(--ease) .35s both; }
.active .np-seal { animation: np-pulse .7s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
@keyframes np-mark { 0% { background: var(--news-policy-soft); } 40% { background: #F7DDA8; } 100% { background: var(--news-policy-soft); } }
@keyframes np-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* Reduced motion: no sliding, springs or bounces; slides simply cross-fade. */
@media (prefers-reduced-motion: reduce) {
  .nw, .nw-scrim, .nw *, .nw *::before, .nw *::after { animation: none !important; }
  .nw-slide { transition: opacity .2s ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .nw-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(27, 26, 23, 0.55); }
}
@media (max-width: 520px) {
  .nw-pic { height: 210px; }
  .nw-copy { padding: var(--sp-4) var(--sp-5) 0; min-height: 210px; }
  .nw-count { top: var(--sp-4); right: var(--sp-5); }
  .nw-foot { padding: var(--sp-3) var(--sp-5) var(--sp-4); }
  .np-notif { width: 88%; }
}