/* =========================================================================
   EMPIRIUM OS — MOBILE: TO-DO LIST (immersive)

   Deliberately thin. The to-do screen reuses mobile-routines.css wholesale —
   .rt-page, .rt-body, .rt-card, .rt-check, .rt-cta, .rt-footer and the rest —
   so it reads as the fourth member of the same family rather than a lookalike.
   Load order matters: this file must come AFTER mobile-routines.css, since
   everything here overrides or extends those rules under .rt-page-todo.

   Only three things are genuinely new:
     1. its own palette (green rather than the periods' blue/lilac),
     2. the crossed-off treatment for completed items — routines never needed
        one, because a ticked habit is a badge, whereas a ticked to-do wants
        to visibly leave the queue while staying on the list,
     3. the two-line row (title + context chips), since a to-do carries a
        project/step count a static routine item never does.
   ========================================================================= */

.rt-page-todo{
  --rt-canvas:#f0f4f1;
  /* The green re-skin. These are the same custom properties mobile-routines.css
     defines on .rt-page, so every component it styles — the greeting, progress
     bar, CTA, emblem glow — re-tints from these four lines alone. */
  --rt-navy:#0f5137;
  --rt-navy-deep:#07301f;
  --rt-blue:#12734d;
  --rt-sky-tint:#6fe0b0;
  background:linear-gradient(180deg,#e9f1ec 0%,#f4f8f5 38%,#fbfdfc 100%);
}

/* There is no bezel render for this screen (the three PNGs are period art),
   so it always uses the CSS stand-in glow — recoloured to match. */
.rt-page-todo .rt-sky::before{
  background:linear-gradient(135deg,#bdeed7,#eafaf2 60%,transparent 100%);
}

/* The CTA and emblem hard-code the routine blues in mobile-routines.css
   rather than reading the variables, so they are restated here. */
.rt-page-todo .rt-cta{
  background:linear-gradient(180deg,#12734d,#07301f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -8px 18px rgba(111,242,187,.35);
}
.rt-page-todo .rt-emblem{
  background:radial-gradient(circle at 35% 28%,#1c8f60,var(--rt-navy-deep));
  box-shadow:0 0 14px rgba(111,224,176,.55), inset 0 0 0 2px rgba(255,255,255,.18);
}
.rt-page-todo .rt-cta-rim{
  box-shadow:0 14px 30px rgba(8,44,30,.26), 0 0 26px rgba(111,224,176,.32);
}
.rt-page-todo .rt-seg.is-done{
  background:linear-gradient(90deg,#0f5137,#25a373);
  box-shadow:0 0 8px rgba(37,163,115,.55);
}
/* Bulk mode (more than ~14 to-dos): two proportional halves instead of one
   segment per item — see MAX_SEGS in mobile-todo-list.js. */
.rt-page-todo .td-seg-bulk{ gap:0; border-radius:5px; overflow:hidden; }
.rt-page-todo .td-seg-bulk .rt-seg{ border-radius:0; }

/* ---------------- two-line row ---------------- */
.rt-page-todo .td-row-main{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:5px;
  padding:9px 0;
}
.rt-page-todo .td-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.rt-page-todo .td-chip{
  padding:2px 8px; border-radius:999px;
  background:rgba(15,81,55,.08); color:#2c5a46;
  font-size:9.5px; font-weight:600; letter-spacing:.2px;
}

/* ---------------- crossed off ----------------
   Done rows stay in place and keep their tick tappable (a mis-tick has to be
   undoable), so they are dimmed rather than removed. */
.rt-page-todo .rt-card.is-done{
  background:rgba(255,255,255,.5);
  box-shadow:none;
}
.rt-page-todo .rt-card.is-done .rt-row-title{
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(44,53,71,.5);
  color:var(--rt-meta);
  font-weight:600;
}
.rt-page-todo .rt-card.is-done .td-chip{ opacity:.6; }
.rt-page-todo .rt-subitem.is-done .rt-row-title{
  text-decoration:line-through;
  text-decoration-color:rgba(44,53,71,.45);
  color:var(--rt-meta);
}
.rt-page-todo .rt-check[aria-checked="true"]{
  background:var(--rt-navy); border-color:var(--rt-navy);
}
.rt-page-todo .rt-trail-check{
  background:radial-gradient(circle,#eafaf2,#cdf0e0); color:#12734d;
  box-shadow:0 0 14px rgba(111,224,176,.7);
}

/* ---------------- empty / all-clear panel ----------------
   Rendered inside the artwork rather than as the app's dark empty card, so
   an empty day still looks like this screen. */
.rt-page-todo .td-empty{
  margin-bottom:18px; padding:22px 18px; text-align:center;
  background:rgba(255,255,255,.7);
  border:1px dashed rgba(15,81,55,.22); border-radius:20px;
}
.rt-page-todo .td-empty-title{
  font-size:13px; font-weight:800; letter-spacing:1.2px; color:var(--rt-blue);
}
.rt-page-todo .td-empty p{
  margin:9px 0 0; font-size:12px; line-height:1.45; color:var(--rt-body);
}

/* ---------------- type scale ----------------
   Every text size on this screen runs 2px below the routine screens'. A
   routine is five or six short verbs read at a glance; a to-do list is
   longer, wordier and there are more of them, so the same scale wastes
   vertical space and wraps titles that would otherwise fit on one line.

   These all override mobile-routines.css rather than living in it — the
   routine periods keep their original, larger scale untouched. The .td-chip
   and .td-empty sizes above are already set 2px down at source. */
.rt-page-todo .rt-clock{ font-size:28px; }
.rt-page-todo .rt-greet{ font-size:13px; }
.rt-page-todo .rt-tagline{ font-size:13px; }
.rt-page-todo .rt-bigtitle{ font-size:32px; }
.rt-page-todo .rt-progress-label{ font-size:13px; }
.rt-page-todo .rt-row-title{ font-size:15px; }
.rt-page-todo .rt-row-meta{ font-size:12px; }
.rt-page-todo .rt-subitem .rt-row-title{ font-size:13px; }
.rt-page-todo .rt-cta{ font-size:13px; }
.rt-page-todo .rt-emblem{ font-size:19px; }