/* styles.css — Diwali 2026 exhibition tracker.
 *
 * COLOUR POLICY. Themes are NOT colour-coded. Six categorical hues on one
 * screen fail the colourblind-separation and normal-vision floors outright
 * (checked with the palette validator), and the theme name is written on every
 * card anyway, so a rainbow would have been decoration posing as information.
 * Colour is spent only where it carries meaning — due-date status — and every
 * status chip pairs its colour with an icon and a word, so the board still
 * reads correctly in greyscale.
 *
 * Every ink below clears WCAG AA (>= 4.5:1) against the surface it sits on, in
 * both modes. If you change a colour, re-check it rather than eyeballing.
 *
 * Dark mode is declared under BOTH `prefers-color-scheme` and
 * `[data-theme="dark"]` so the OS setting and the in-app toggle each win where
 * they should; the `:not([data-theme="light"])` guard lets an explicit light
 * choice beat an OS set to dark.
 */

:root {
  color-scheme: light;

  --page:        #fdfcfa;
  --surface:     #ffffff;
  --surface-2:   #f4efe6;   /* chips, wells */
  --line:        #e6e1d6;
  --line-strong: #d4cec0;

  --ink:         #141312;
  --ink-2:       #57544e;
  --ink-muted:   #6b675f;

  --accent:      #b4530e;   /* marigold, 4.89:1 on page */
  --accent-soft: #fbeee0;
  --accent-line: #e8b483;

  --overdue:     #b3241f;
  --overdue-bg:  #fbeae8;
  --soon:        #8a5300;
  --soon-bg:     #fbf0dc;
  --good:        #1a6a1a;
  --good-bg:     #e9f4e9;

  --radius:   14px;
  --radius-s: 9px;
  --shadow:   0 1px 2px rgba(20, 19, 18, .06), 0 6px 20px rgba(20, 19, 18, .05);

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --page:        #191817;
    --surface:     #211f1d;
    --surface-2:   #2b2825;
    --line:        #35322e;
    --line-strong: #45413b;

    --ink:         #f7f5f0;
    --ink-2:       #b8b3a8;
    --ink-muted:   #928d84;

    --accent:      #e58a3c;
    --accent-soft: #3a2a1a;
    --accent-line: #6b4a26;

    --overdue:     #f08a86;
    --overdue-bg:  #3a1f1e;
    --soon:        #e0a23c;
    --soon-bg:     #382c15;
    --good:        #5fc45f;
    --good-bg:     #1d2f1d;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page:        #191817;
  --surface:     #211f1d;
  --surface-2:   #2b2825;
  --line:        #35322e;
  --line-strong: #45413b;

  --ink:         #f7f5f0;
  --ink-2:       #b8b3a8;
  --ink-muted:   #928d84;

  --accent:      #e58a3c;
  --accent-soft: #3a2a1a;
  --accent-line: #6b4a26;

  --overdue:     #f08a86;
  --overdue-bg:  #3a1f1e;
  --soon:        #e0a23c;
  --soon-bg:     #382c15;
  --good:        #5fc45f;
  --good-bg:     #1d2f1d;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- header -------------------------------------------------------------- */

.app-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem .25rem;
}

.head-top {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-start; justify-content: space-between;
}

.brand { display: flex; gap: .75rem; align-items: center; }
.brand-mark { font-size: 1.9rem; line-height: 1; }
.brand h1 { font-size: 1.25rem; letter-spacing: -.01em; }
.brand p { margin: .1rem 0 0; color: var(--ink-2); font-size: .85rem; }

.head-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.ghost-btn {
  font: inherit; font-size: .82rem;
  padding: .4rem .7rem;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  cursor: pointer; text-decoration: none;
}
.ghost-btn:hover { border-color: var(--line-strong); color: var(--ink); }

.conn { font-size: .75rem; padding: .25rem .5rem; border-radius: 99px; }
.conn-ok  { color: var(--good); background: var(--good-bg); }
.conn-bad { color: var(--overdue); background: var(--overdue-bg); }

/* ---- summary ------------------------------------------------------------- */

.summary {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  align-items: center;
  margin: 1.1rem 0 .9rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero { display: flex; gap: .7rem; align-items: center; }
.hero-number {
  font-size: 2.9rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hero-label { font-size: .82rem; color: var(--ink-2); }
.hero-label strong { color: var(--ink); }

.tiles { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.tile { display: flex; flex-direction: column; }
.tile-value {
  font-size: 1.35rem; font-weight: 650; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tile-label { font-size: .75rem; color: var(--ink-muted); }
.tile-alert .tile-value { color: var(--overdue); }
.tile-warn  .tile-value { color: var(--soon); }

/* Meter: a single-series magnitude bar. Rounded data end, recessive track. */
.meter {
  flex: 1 1 160px; min-width: 120px;
  height: 8px; border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.meter-lg { flex-basis: 100%; height: 10px; }
.meter-fill {
  height: 100%; border-radius: 99px;
  background: var(--accent);
  transition: width .3s ease;
}

/* ---- unlock banner ------------------------------------------------------- */

/* Only shown when the server requires a passcode and this device has none.
   Reading is never blocked, so this sits above the board rather than over it. */
.lock {
  margin: 1.1rem 0 0;
  padding: .8rem 1rem;
  background: var(--soon-bg);
  border: 1px solid var(--soon);
  border-radius: var(--radius);
}
.lock-form {
  display: flex; flex-wrap: wrap; gap: .7rem;
  align-items: flex-end;
}
.lock-text { flex: 1 1 340px; font-size: .85rem; color: var(--ink-2); }
.lock-text strong { color: var(--ink); }
.lock-form .field { flex: 0 1 220px; }
.lock-form input {
  font: inherit; font-size: .87rem;
  padding: .4rem .5rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 7px;
  width: 100%;
}

/* Read-only states, shown when the board is locked. These are deliberately
   plain: a disabled-looking edit control invites clicking and then fails, so
   locked rows render as text rather than as greyed-out buttons. */
.readonly-note {
  margin-bottom: 1.1rem;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-left: 3px solid var(--soon);
  border-radius: var(--radius-s);
  font-size: .85rem; color: var(--ink-2);
}
.readonly-note strong { color: var(--ink); }

.task-title-ro { cursor: default; }
.task-check input:disabled { cursor: not-allowed; opacity: .55; }
.desc-ro {
  margin: 0 0 .75rem;
  padding: .55rem .65rem;
  font-size: .85rem; color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--radius-s);
  white-space: pre-wrap;
}

.unlock-btn {
  background: var(--soon-bg);
  border-color: var(--soon);
  color: var(--soon);
  font-weight: 600;
}

/* ---- nav ----------------------------------------------------------------- */

.nav { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: -1px; }
.nav-link {
  padding: .5rem .85rem;
  font-size: .88rem; text-decoration: none; color: var(--ink-2);
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link.is-active {
  color: var(--ink); font-weight: 600;
  background: var(--surface);
  border-color: var(--line);
}
.nav-count {
  margin-left: .4rem; padding: 0 .35rem;
  font-size: .72rem; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-muted);
}

/* ---- main ---------------------------------------------------------------- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  border-top: 1px solid var(--line);
}

.empty {
  color: var(--ink-muted); font-size: .9rem;
  padding: 1.5rem 0; text-align: center;
}

/* ---- guidelines ---------------------------------------------------------- */

.guidelines {
  margin-bottom: 1.25rem;
  padding: .6rem .9rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-s);
  font-size: .85rem;
}
.guidelines summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.guidelines ul { margin: .6rem 0 .2rem; padding-left: 1.1rem; color: var(--ink-2); }
.guidelines li { margin: .3rem 0; }

/* ---- share ---------------------------------------------------------------
   The fallback panel, shown only when the clipboard refuses — outside a secure
   context, or when the browser denies permission. Telling someone "copying
   failed" with nothing to act on is worse than showing them the text. */
.share-panel {
  margin: 1.1rem 0 0;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.share-panel .hint { margin: 0 0 .5rem; font-size: .82rem; color: var(--ink-2); }
.share-panel textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  padding: .5rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  resize: vertical;
}
.share-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* Copy sits in the theme header and stays available on a locked board, so it
   is styled as a quiet action rather than an edit control. */
.theme-copy {
  flex: 0 0 auto;
  margin-left: .3rem;
  padding: .15rem .45rem;
  font: inherit; font-size: .72rem;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.theme-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---- theme cards --------------------------------------------------------- */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1rem;
  align-items: start;
}

.theme-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  scroll-margin-top: 1rem;
}
.theme-card.is-flash {
  animation: flash 1.6s ease;
}
@keyframes flash {
  0%, 100% { border-color: var(--line); }
  20%      { border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-card.is-flash { animation: none; border-color: var(--accent); }
  .meter-fill { transition: none; }
}

.theme-head { display: flex; gap: .7rem; align-items: flex-start; }
/* The slot number is how themes are told apart at a glance — an ordinal cue
   that works in greyscale, unlike six competing hues. */
.theme-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.theme-names { flex: 1 1 auto; min-width: 0; }
.theme-names h2 { font-size: 1rem; letter-spacing: -.01em; }
.theme-sub { margin: .1rem 0 0; font-size: .78rem; color: var(--ink-muted); }
.theme-count {
  font-size: .95rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.theme-count .of { color: var(--ink-muted); font-weight: 400; }

.theme-card .meter { margin: .7rem 0 .5rem; flex: none; width: 100%; }

.theme-flag {
  margin: 0 0 .5rem;
  font-size: .78rem; font-weight: 600;
  color: var(--overdue);
}
.theme-flag span {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-right: .25rem;
  border-radius: 99px;
  background: var(--overdue); color: var(--page);
  font-size: .68rem;
}

/* Drag handle. `touch-action: none` is load bearing: without it the browser
   claims a touch drag as a page scroll before pointermove ever fires, and
   dragging simply does nothing on a phone. */
.theme-grip {
  flex: 0 0 auto;
  width: 20px; height: 26px;
  display: grid; place-items: center;
  margin-right: -.2rem;
  font: inherit; font-size: .95rem; line-height: 1;
  color: var(--ink-muted);
  background: none; border: none; padding: 0;
  border-radius: 5px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.theme-grip:hover { color: var(--accent); background: var(--accent-soft); }
.theme-grip:active { cursor: grabbing; }

.theme-card.is-dragging {
  cursor: grabbing;
  opacity: .9;
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(20, 19, 18, .18);
  transform: scale(1.01);
}
/* While a drag is in progress nothing inside the cards should react to the
   pointer, or hovering a task title mid-drag would fight the gesture. */
.is-reordering .theme-card * { pointer-events: none; }
.is-reordering .theme-grip { pointer-events: auto; }
.is-reordering .theme-card { transition: none; }

/* Reorder arrows. Disabled at the ends rather than hidden, so the control does
   not jump around as a card moves through the list. */
.theme-moves { display: flex; flex-direction: column; gap: 2px; margin-left: .3rem; }
.theme-move {
  width: 22px; height: 15px;
  display: grid; place-items: center;
  font: inherit; font-size: .7rem; line-height: 1;
  color: var(--ink-muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.theme-move:hover:not(:disabled) {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}
.theme-move:disabled { opacity: .3; cursor: default; }

/* ---- description --------------------------------------------------------- */

.desc {
  display: block; width: 100%;
  margin: 0 0 .75rem;
  padding: .55rem .65rem;
  font: inherit; font-size: .85rem; text-align: left;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px dashed transparent;
  border-radius: var(--radius-s);
  cursor: text;
  white-space: pre-wrap;
}
.desc:hover { border-color: var(--line-strong); }
.desc-empty { color: var(--ink-muted); font-style: italic; background: none; border-color: var(--line); }

/* ---- tasks --------------------------------------------------------------- */

.task-list { list-style: none; margin: 0 0 .6rem; padding: 0; }

.task {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .1rem;
  border-top: 1px solid var(--line);
}
.task:first-child { border-top: none; }

.task-check { flex: 0 0 auto; padding-top: .1rem; cursor: pointer; }
.task-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.task-body { flex: 1 1 auto; min-width: 0; }

.task-title {
  display: block; width: 100%;
  padding: 0; margin: 0;
  font: inherit; font-size: .92rem; text-align: left; text-decoration: none;
  color: var(--ink);
  background: none; border: none; cursor: pointer;
  word-break: break-word;
}
button.task-title:hover, a.task-title:hover { color: var(--accent); }

.task-done .task-title { color: var(--ink-muted); text-decoration: line-through; }

.task-notes {
  margin: .25rem 0 0;
  font-size: .8rem; color: var(--ink-muted);
  white-space: pre-wrap;
}

.task-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }

/* Status chips always carry an icon AND a word — never colour alone. */
.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .45rem;
  font-size: .73rem; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.chip-icon { font-size: .7em; line-height: 1; }
.chip-overdue { background: var(--overdue-bg); color: var(--overdue); font-weight: 600; }
.chip-soon    { background: var(--soon-bg);    color: var(--soon);    font-weight: 600; }
.chip-done    { background: var(--good-bg);    color: var(--good); }
.chip-doing   { background: var(--accent-soft); color: var(--accent); }
.chip-theme   { background: none; border: 1px solid var(--line); color: var(--ink-muted); }

/* Quick delete. Always visible rather than hover-only: a hover-revealed
   control is unreachable on a phone, and half the karyakars will be on one.
   It stays recessive until hovered or focused so it does not compete with the
   task title. */
.task-x {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-left: .2rem;
  display: grid; place-items: center;
  font: inherit; font-size: 1.05rem; line-height: 1;
  color: var(--ink-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.task-x:hover, .task-x:focus-visible {
  color: var(--overdue);
  background: var(--overdue-bg);
  border-color: var(--overdue);
}

/* The toast becomes a row once it carries an Undo. */
.toast-action {
  font: inherit; font-size: .82rem; font-weight: 600;
  margin-left: .8rem;
  padding: .2rem .6rem;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 6px;
  cursor: pointer;
}
.toast-action:hover { background: rgba(255, 255, 255, .15); }

.add-trigger {
  font: inherit; font-size: .85rem;
  padding: .4rem .1rem;
  background: none; border: none; color: var(--accent);
  cursor: pointer;
}
.add-trigger:hover { text-decoration: underline; }

/* ---- editors ------------------------------------------------------------- */

.editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  width: 100%;
  padding: .7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.task-editing { padding: .5rem 0; }

.field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field span { font-size: .72rem; color: var(--ink-muted); }

.field input, .field select, .field textarea {
  font: inherit; font-size: .87rem;
  padding: .4rem .5rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  min-width: 0; width: 100%;
}
.field textarea { resize: vertical; }

.editor-actions { grid-column: 1 / -1; display: flex; gap: .45rem; flex-wrap: wrap; }

.btn {
  font: inherit; font-size: .84rem;
  padding: .42rem .8rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 7px;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-muted); }
.btn-primary {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
}
:root[data-theme="dark"] .btn-primary,
.btn-primary { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #1a1512; }
}
:root[data-theme="dark"] .btn-primary { color: #1a1512; }
.btn-danger { color: var(--overdue); border-color: var(--overdue); background: none; }
.btn-danger:hover { background: var(--overdue-bg); }

/* ---- all-tasks view ------------------------------------------------------ */

.filters {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-bottom: 1.1rem;
  padding: .7rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.filter { display: flex; flex-direction: column; gap: .15rem; }
.filter span { font-size: .72rem; color: var(--ink-muted); }
.filter select, .filter input {
  font: inherit; font-size: .85rem;
  padding: .32rem .45rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 7px;
}
.filter-search { flex: 1 1 200px; }
.filter-search input { width: 100%; }

.bucket { margin-bottom: 1.4rem; }
.bucket h2 {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}
.bucket-count {
  padding: 0 .4rem; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: .78rem; letter-spacing: 0;
}
.bucket-overdue h2 { color: var(--overdue); }
.bucket-today h2   { color: var(--soon); }
.bucket .task-list { background: var(--surface); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius-s) var(--radius-s); padding: 0 .8rem; }

/* ---- timeline ------------------------------------------------------------ */

.timeline { display: flex; flex-direction: column; gap: .4rem; }

.week {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.week-when { flex: 0 0 170px; display: flex; flex-direction: column; }
.week-when strong { font-size: .9rem; }
.week-when span { font-size: .74rem; color: var(--ink-muted); }
.week-tasks { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: .35rem; align-content: flex-start; }
.week-none { color: var(--ink-muted); }
.week-empty { background: none; border-style: dashed; }

.week-event { border-color: var(--accent); background: var(--accent-soft); }
.week-badge {
  margin-top: .25rem; align-self: flex-start;
  padding: .1rem .45rem; border-radius: 99px;
  background: var(--accent); color: #fff;
  font-size: .7rem; font-weight: 600;
}
.week-late { border-color: var(--overdue); background: var(--overdue-bg); }
.week-late .week-when strong { color: var(--overdue); }

.pill {
  display: inline-block;
  padding: .2rem .55rem;
  font-size: .8rem; text-decoration: none;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 99px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill-done { color: var(--ink-muted); text-decoration: line-through; }

/* ---- trash --------------------------------------------------------------- */

.trash-note { font-size: .85rem; color: var(--ink-2); margin-top: 0; }
.task-list-trash {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 0 .9rem;
}
.task-trashed { align-items: center; }
.task-trashed .task-title { color: var(--ink-muted); }

/* ---- footer & toast ------------------------------------------------------ */

.app-foot {
  max-width: 1180px; margin: 0 auto;
  padding: 0 1rem 2.5rem;
  font-size: .78rem; color: var(--ink-muted);
}

.toast {
  position: fixed; left: 50%; bottom: 1.2rem;
  transform: translate(-50%, 200%);
  max-width: min(30rem, calc(100vw - 2rem));
  display: flex; align-items: center;
  padding: .6rem 1rem;
  background: var(--ink); color: var(--page);
  border-radius: var(--radius-s);
  font-size: .85rem;
  box-shadow: var(--shadow);
  transition: transform .25s ease;
  z-index: 50;
}
.toast.show { transform: translate(-50%, 0); }
.toast-error { background: var(--overdue); color: #fff; }
.toast-warn  { background: var(--soon); color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 560px) {
  .theme-grid { grid-template-columns: 1fr; }
  .editor { grid-template-columns: 1fr; }
  .summary { gap: .9rem 1.5rem; }
  .hero-number { font-size: 2.4rem; }
  .week-when { flex-basis: 100%; }
}