/* =========================================================================
   MOBILE — ROUTINES

   Deliberately NOT the app's dark navy shell — the routine screens are a
   distinct light "glass/chrome" look (white cards, deep-navy ink, a soft
   sky-blue glow) built to match the reference mockups, scoped entirely under
   .rt-page so it never leaks into the rest of Utilities.

   Runs in immersive mode: mobile-app.js hides the topbar and tab bar and
   drops .screens' padding (see "immersive mode" in app.css), so this file
   owns the full viewport, edge to edge, including its own bottom chrome.

   ARTWORK
   The bezel/sky corner, the bottom chrome bar and the afternoon water
   droplet are photographic renders, not shapes CSS can draw. They live in
   mobile/www/assets/routines/ and are sliced out of the source mockups:
     bezel-morning.png / bezel-afternoon.png / bezel-evening.png
     footer-chrome.png
     hero-droplet.png
   mobile-routines.js probes for them on first render and adds .rt-has-art
   when they resolve. Everything below therefore ships twice: a CSS-drawn
   stand-in that works with no assets at all, and the .rt-has-art override
   that swaps in the real renders. Delete neither — the stand-in is what
   keeps the screen usable on a build where the assets were not copied.
   ========================================================================= */

.rt-page{
  --rt-navy:#12266e;
  --rt-navy-deep:#0a1440;
  --rt-blue:#1a3ea8;
  --rt-ink:#0f1a3d;
  --rt-body:#2c3547;
  --rt-meta:#6d7789;
  --rt-sky-tint:#6fd0f2;
  --rt-track:#d9dde4;
  --rt-hairline:#e6eaf0;
  /* Height of the CSS stand-in glow as a share of viewport width — only used
     before the artwork resolves. The real bezel sizes itself by aspect-ratio. */
  --rt-sky-ratio:52%;
  --rt-footer-h:64px;
  /* Flat field colour of the bezel render's left-hand side, sampled from the
     PNG. The page has to continue in exactly this tone underneath the artwork
     or a seam shows where the image ends. Overridden per period below. */
  --rt-canvas:#f1f3f7;

  /* Fixed to the viewport rather than growing with content: .rt-body is the
     only scrolling region, so the topbar and .rt-footer's E emblem — the
     sole way to switch/exit the immersive screen — are always reachable
     without scrolling. (A position:fixed footer doesn't work here: an
     ancestor .screen.is-active carries a CSS transform for tab-slide
     animation, and a transform creates a new containing block for fixed
     descendants, so "fixed" would anchor to that growing section instead of
     the real viewport.) */
  position:relative;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  overflow:hidden;
  padding:0;
  background:linear-gradient(180deg,#e9edf2 0%,#f4f6f9 38%,#fbfcfd 100%);
  color:var(--rt-ink);
  font-family:var(--font);
}

.rt-page-morning{   --rt-canvas:#f1f3f7; }
.rt-page-afternoon{ --rt-canvas:#edf0f3; }
.rt-page-evening{   --rt-canvas:#efeff3; }

.rt-has-art{
  background:linear-gradient(180deg,
    var(--rt-canvas) 0%, var(--rt-canvas) 45%, #fbfcfd 100%);
}

/* ---------------- bezel / sky artwork ----------------
   Sits behind the top of the page and scrolls with it. The CSS stand-in is a
   soft blue corner glow; .rt-has-art replaces it with the real render. */
.rt-sky{
  position:absolute; top:0; left:0; right:0; z-index:0;
  height:var(--rt-sky-ratio);
  pointer-events:none;
  overflow:hidden;
}
.rt-sky::before{
  content:''; position:absolute; top:-60px; right:-70px;
  width:270px; height:230px;
  border-radius:50% 50% 45% 55%/55% 45% 55% 45%;
  background:linear-gradient(135deg,#bfe4fb,#eaf6ff 60%,transparent 100%);
}
.rt-page-evening .rt-sky::before{ background:linear-gradient(135deg,#cdc4ee,#f3e8f6 60%,transparent 100%); }
.rt-page-afternoon .rt-sky::before{ background:linear-gradient(135deg,#a9dcfb,#e6f5ff 60%,transparent 100%); }

.rt-has-art .rt-sky{
  height:auto; aspect-ratio:1774/887;   /* the render's own dimensions */
  background-repeat:no-repeat; background-position:top center; background-size:100% auto;
}
.rt-has-art .rt-sky::before{ content:none; }
.rt-has-art.rt-page-morning   .rt-sky{ background-image:url('../assets/routines/bezel-morning.png'); }
.rt-has-art.rt-page-afternoon .rt-sky{ background-image:url('../assets/routines/bezel-afternoon.png'); }
.rt-has-art.rt-page-evening   .rt-sky{ background-image:url('../assets/routines/bezel-evening.png'); }

/* ---------------- content column ---------------- */
.rt-body{
  position:relative; z-index:1;
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 24px;
}

/* ---------------- top bar: clock + snooze/dismiss ---------------- */
.rt-topbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding-bottom:28px;
}
.rt-clock{
  font-size:30px; font-weight:700; letter-spacing:-.6px;
  color:var(--rt-ink); font-variant-numeric:tabular-nums;
}
.rt-topbar-actions{ flex:none; display:flex; gap:10px; }
.rt-topbar-btn{
  flex:none; width:44px; height:44px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72); border:1px solid var(--rt-hairline);
  color:var(--rt-navy); cursor:pointer;
  box-shadow:0 4px 14px rgba(20,34,94,.08);
}
.rt-topbar-btn svg{ width:20px; height:20px; }

/* ---------------- greeting / title ---------------- */
.rt-greet{
  font-size:15px; font-weight:800; letter-spacing:1.3px;
  color:var(--rt-blue);
}
.rt-tagline{ margin-top:7px; font-size:15px; font-weight:400; color:var(--rt-body); }
.rt-bigtitle{
  margin:16px 0 16px;
  font-size:34px; font-weight:900; line-height:1.02; letter-spacing:-.6px;
  color:var(--rt-ink);
}

/* ---------------- progress card (segmented bar) ---------------- */
.rt-progress{
  text-align:center; margin-bottom:12px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--rt-hairline); border-radius:20px;
  padding:16px 14px;
  box-shadow:0 6px 20px rgba(20,34,94,.06);
}
.rt-progress-label{
  margin-bottom:12px;
  font-size:15px; font-weight:800; letter-spacing:1.2px; color:var(--rt-blue);
}
.rt-seg-track{ display:flex; gap:5px; }
.rt-seg{ flex:1; height:9px; border-radius:5px; background:var(--rt-track); }
.rt-seg.is-done{
  background:linear-gradient(90deg,#0f2a94,#2f5be0);
  box-shadow:0 0 8px rgba(47,91,224,.55);
}

/* ---------------- hero card (afternoon water) ---------------- */
.rt-hero{
  display:flex; align-items:center; gap:14px; margin-bottom:12px;
  background:linear-gradient(135deg,#bfe0f7,#8fc7ef);
  border:1px solid #b7d9f2; border-radius:20px;
  padding:18px; overflow:hidden;
  box-shadow:0 8px 24px rgba(70,160,220,.22);
}
.rt-hero-art{
  flex:none; width:132px; height:132px;
  display:flex; align-items:center; justify-content:center;
  color:#2f8fc7;
}
.rt-hero-art svg{ width:76px; height:76px; }
/* The render came back as a complete card — droplet, ripple and the blue
   gradient behind it — rather than a cut-out spot illustration. So it becomes
   the card's background and the text is padded clear of the droplet, instead
   of the droplet being a flex child. Sizing by the render's own aspect ratio
   means 100% 100% never distorts it. */
.rt-has-art .rt-hero{
  aspect-ratio:1774/887;
  gap:0; padding:0 20px 0 42%;
  border-color:#a9cfe9;
  background:url('../assets/routines/hero-droplet.png') center/100% 100% no-repeat;
}
.rt-has-art .rt-hero-art{ display:none; }
.rt-hero-body{ min-width:0; }
.rt-hero-title{ font-size:24px; font-weight:900; letter-spacing:-.2px; color:var(--rt-navy); }
.rt-hero-sub{ margin-top:4px; font-size:14px; color:#20456f; }
.rt-hero-amount{
  margin-top:10px; font-size:34px; font-weight:800; line-height:1; color:var(--rt-navy);
}
.rt-hero-amount span{ margin-left:4px; font-size:15px; font-weight:600; color:#3a6285; }

/* ---------------- item cards ---------------- */
.rt-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.rt-card{
  background:rgba(255,255,255,.82);
  border:1px solid var(--rt-hairline); border-radius:20px;
  padding:6px 14px;
  box-shadow:0 4px 14px rgba(20,34,94,.05);
}
.rt-row{ display:flex; align-items:center; gap:14px; min-height:56px; }
.rt-row-title{
  flex:1; min-width:0;
  font-size:17px; font-weight:700; color:var(--rt-ink); letter-spacing:-.1px;
}
.rt-row-meta{ flex:none; font-size:14px; font-weight:500; color:var(--rt-meta); }

.rt-check{
  flex:none; width:34px; height:34px; padding:0; margin:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:2px solid #c9d0da; color:#fff; cursor:pointer;
}
.rt-check[aria-checked="true"]{
  background:var(--rt-navy); border-color:var(--rt-navy);
}
.rt-check svg{ width:17px; height:17px; }
.rt-check-sm{ width:26px; height:26px; border-width:1.5px; }
.rt-check-sm svg{ width:13px; height:13px; }

.rt-trail{
  flex:none; width:34px; height:34px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.rt-trail-chevron{
  background:transparent; border:1px solid #dfe4ec; color:#9aa5b8; cursor:pointer;
}
.rt-trail-chevron svg{ width:16px; height:16px; transition:transform .15s ease; }
.rt-trail-chevron.is-open svg{ transform:rotate(180deg); }
.rt-trail-check{
  background:radial-gradient(circle,#eaf7ff,#d3ecfb); color:#1f7fd0; border:0;
  box-shadow:0 0 14px rgba(111,208,242,.75);
}
.rt-trail-check svg{ width:16px; height:16px; }

/* Sub-items sit inside the parent card, inset on both edges. */
.rt-subitems{
  display:flex; flex-direction:column; gap:6px;
  margin:0 6px 10px 34px;
}
.rt-subitem{
  display:flex; align-items:center; gap:12px; min-height:44px;
  background:rgba(240,243,247,.85);
  border-radius:13px; padding:0 12px;
}
.rt-subitem .rt-row-title{ font-size:15px; font-weight:500; color:var(--rt-body); }

/* ---------------- CTA with chrome rim ---------------- */
.rt-cta-rim{
  padding:3px; border-radius:999px;
  background:linear-gradient(160deg,#ffffff 0%,#c8ced8 22%,#8f98a7 50%,#dfe4ea 78%,#ffffff 100%);
  box-shadow:0 14px 30px rgba(12,20,66,.28), 0 0 26px rgba(111,208,242,.35);
}
.rt-cta{
  width:100%; min-height:58px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 18px;
  background:linear-gradient(180deg,#1a3ea8,#0b1c68);
  color:#fff; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--font); font-weight:700; letter-spacing:1.6px; font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -8px 18px rgba(111,208,242,.4);
}
.rt-cta:active{ transform:scale(.985); }
.rt-cta svg{ width:19px; height:19px; flex-shrink:0; }
.rt-cta span{ line-height:1.25; text-align:center; }

/* ---------------- pinned chrome footer ---------------- */
.rt-footer{
  position:relative; z-index:5; flex:0 0 auto;
  height:calc(var(--rt-footer-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:linear-gradient(180deg,#f7f9fb,#d8dee6);
  border-top:1px solid rgba(255,255,255,.9);
  box-shadow:0 -6px 20px rgba(20,34,94,.1);
}
/* footer-chrome.png is cropped to this box's ratio (1983/338 ≈ 375/64), so
   100% 100% fills it without distorting the bar. */
.rt-has-art .rt-footer{
  background:url('../assets/routines/footer-chrome.png') center top/100% calc(100% - env(safe-area-inset-bottom)) no-repeat,
             #eff2f5;
  border-top:0; box-shadow:none;
}
/* The emblem is the only control on the screen — press and hold for the
   options sheet. Sized past the 48px tap minimum by its padding. */
.rt-emblem{
  flex:none; width:46px; height:46px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 28%,#2c47b8,var(--rt-navy-deep));
  color:#fff; border:0; cursor:pointer;
  font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1;
  box-shadow:0 0 14px rgba(111,208,242,.55), inset 0 0 0 2px rgba(255,255,255,.18);
}
.rt-emblem:active{ transform:scale(.94); }
.rt-footer-line{
  flex:1; max-width:96px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--rt-sky-tint),transparent);
  box-shadow:0 0 8px rgba(111,208,242,.6);
}
.rt-has-art .rt-footer-line{ visibility:hidden; }

/* ---------------- options sheet ----------------
   Utility panels, not artwork — these stay on the app's dark theme and reuse
   app.css's .btn/.segmented/.card/.kv components. */
.rt-scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(4,6,14,.6); backdrop-filter:blur(2px);
}
.rt-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px calc(env(safe-area-inset-bottom) + 18px);
  background:var(--panel);
  border-top:1px solid var(--line-bright);
  border-radius:20px 20px 0 0;
  box-shadow:0 -18px 44px rgba(0,0,0,.55);
  color:var(--text);
  animation:rt-sheet-up .18s ease-out;
}
@keyframes rt-sheet-up{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
.rt-sheet .segmented{ margin-bottom:12px; }
.rt-sheet .btn-block{ margin-bottom:8px; }
.rt-sheet .btn svg{ width:16px; height:16px; margin-right:8px; }
.rt-template-card.is-active{ border-color:rgba(var(--accent-rgb),.4); }

/* ---------------- Routine Schedule utility ----------------
   A plain settings screen on the app's dark theme, not part of the routine
   artwork — it's reached from the Utilities menu (and from the options
   sheet), never rendered inside .rt-page. */
.rt-sched-card{ padding:4px 14px; }
.rt-sched-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px;
  border-bottom:1px solid var(--line-soft);
}
.rt-sched-row:last-child{ border-bottom:0; }
.rt-sched-label{
  font-size:15px; font-weight:600; color:var(--text);
}
.rt-sched-input{
  flex:none; min-height:40px; padding:0 10px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font-mono); font-size:15px;
  /* The native time-picker UI colours itself from color-scheme, not
     currentColor — without this it paints black-on-black in the WebView. */
  color-scheme:dark;
}
.rt-sched-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3); }
.rt-sched-card + .btn-block{ margin-top:14px; }