/* ============================================================
   Caregiver Window — product app styles (proof-of-fit)
   Lighter visual direction per the 2026-08-13 run brief §6:
   Cream carries the canvas, Midnight grounds the type,
   Muted blue supports interaction. The lit Window mark stays.
   ============================================================ */
:root{
  --cream:#F4EDDD;            /* primary canvas */
  --midnight:#060F1F;         /* ink */
  --muted-blue:#3F5977;       /* choices / interaction */
  --moonlight:#6C8AAB;
  --quiet:#5B6B7E;            /* secondary text on cream */
  --card:#FFFDF6;             /* statement card surface */
  --card-raised:#FFFFFF;
  --hairline:rgba(6,15,31,.16);
  --hairline-soft:rgba(6,15,31,.08);
  --lantern-bright:#F2D29A;
  --lantern-gold:#E8B366;
  --lantern-deep:#CE8A3A;
  --lantern-ink:#8A5A1E;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden}
body{
  background:var(--cream);
  color:var(--midnight);
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Screen 1 ---------- */
.wrap{
  max-width:520px;margin:0 auto;
  padding:40px 22px calc(56px + env(safe-area-inset-bottom));
}
.mark-sm{display:block;margin:0 auto 30px;width:30px;height:42px;opacity:.92}
.start-h1{
  font-weight:400;font-size:28px;line-height:1.28;letter-spacing:-0.01em;
  margin:0 0 30px;text-align:center;text-wrap:balance;
  color:var(--midnight);
}
.statements{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.statement{
  display:flex;align-items:center;min-height:64px;
  padding:18px 20px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:8px;
  color:var(--midnight);
  font-weight:400;font-size:19px;line-height:1.42;
  text-decoration:none;
  transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease;
}
a.statement:hover{background:var(--card-raised);border-color:var(--muted-blue);box-shadow:0 1px 6px rgba(6,15,31,.06)}
a.statement:active{background:var(--card-raised)}
a.statement:focus-visible{outline:2px solid var(--muted-blue);outline-offset:3px}
.pick{
  display:block;width:100%;margin:26px auto 0;
  background:none;border:0;
  padding:16px 12px;min-height:52px;
  color:var(--muted-blue);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:400;font-size:15px;letter-spacing:.02em;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:color 180ms ease;
}
.pick:hover{color:var(--midnight)}
.pick:focus-visible{outline:2px solid var(--muted-blue);outline-offset:3px;border-radius:6px}

/* ---------- Window page ---------- */
.window-wrap{
  max-width:520px;margin:0 auto;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 22px calc(40px + env(safe-area-inset-bottom));
  text-align:center;
}
.window-h1{
  font-weight:400;font-size:32px;line-height:1.2;letter-spacing:-0.01em;
  margin:0 0 10px;color:var(--midnight);
}
.window-meta{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:400;font-size:14px;letter-spacing:.03em;
  color:var(--quiet);margin:0 0 44px;
}
.window-btn{
  display:block;width:100%;max-width:280px;margin:0 auto;align-self:center;
  background:none;border:0;padding:18px 12px 22px;
  cursor:pointer;border-radius:12px;
  font-family:inherit;color:inherit;
}
.window-btn:focus-visible{outline:2px solid var(--muted-blue);outline-offset:4px}
.mark-lg{
  display:block;margin:0 auto;width:132px;height:184.8px;
  opacity:.94;
  filter:drop-shadow(0 2px 14px rgba(196,122,59,.22));
  transition:opacity 420ms ease, filter 420ms ease;
}
.is-playing .mark-lg{
  opacity:1;
  animation:breathe 4.2s ease-in-out infinite;
}
.is-done .mark-lg,.is-paused .mark-lg{opacity:.96}
@keyframes breathe{
  0%,100%{filter:drop-shadow(0 2px 18px rgba(196,122,59,.24))}
  50%    {filter:drop-shadow(0 4px 34px rgba(196,122,59,.42))}
}
.control{
  display:block;margin:22px auto 0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:500;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--midnight);
  transition:color 180ms ease;
}
.window-btn:hover .control{color:var(--lantern-ink)}
.progress{
  width:100%;max-width:280px;margin:30px auto 0;align-self:center;
  opacity:0;transition:opacity 420ms ease;pointer-events:none;
}
.is-playing .progress,.is-paused .progress,.is-done .progress{opacity:1;pointer-events:auto}
/* The progress line is the seek control: quiet, but a generous touch target. */
.track-hit{padding:16px 0;margin:-16px 0;cursor:pointer;touch-action:none}
.track{height:3px;width:100%;background:var(--hairline);border-radius:3px;position:relative}
.fill{height:100%;width:0%;background:var(--lantern-deep);transition:width 240ms linear;border-radius:3px;position:relative}
.is-seeking .fill{transition:none}
.fill::after{
  content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--lantern-deep);
  opacity:0;transition:opacity 240ms ease;
}
.is-playing .fill::after,.is-paused .fill::after,.is-done .fill::after{opacity:1}
.is-seeking .fill::after{width:15px;height:15px;right:-8px}
.times{
  display:flex;justify-content:space-between;margin-top:10px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;color:var(--quiet);letter-spacing:.02em;
}
.tail{height:104px;flex:0 0 auto}

/* ---------- Admin ---------- */
.admin{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  color:var(--midnight);
  max-width:640px;margin:0 auto;
  padding:28px 18px 80px;
}
.admin h1{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:26px;margin:0}
.admin-sub{color:var(--quiet);font-size:13px;margin:6px 0 26px}
.admin h2{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:21px;margin:34px 0 4px}
.admin .hint{color:var(--quiet);font-size:13px;margin:0 0 14px;line-height:1.5}
.admin-card{
  background:var(--card-raised);
  border:1px solid var(--hairline-soft);
  border-radius:10px;
  padding:16px;margin-bottom:12px;
  box-shadow:0 1px 4px rgba(6,15,31,.04);
}
.admin-card.inactive-card{opacity:.72;background:var(--card)}
.admin label{display:block;font-size:12px;letter-spacing:.04em;color:var(--quiet);margin:12px 0 4px;text-transform:uppercase}
.admin input[type=text],.admin select{
  width:100%;padding:11px 12px;font-size:16px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  border:1px solid var(--hairline);border-radius:8px;
  background:#fff;color:var(--midnight);
}
.admin input[type=text]:focus,.admin select:focus{outline:2px solid var(--muted-blue);outline-offset:1px}
.admin .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin .grow{flex:1 1 180px}
.btn{
  display:inline-block;padding:11px 18px;font-size:14px;font-weight:500;letter-spacing:.02em;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--muted-blue);color:#fff;border:0;border-radius:8px;cursor:pointer;
}
.btn:hover{background:#33485f}
.btn.secondary{background:transparent;color:var(--muted-blue);border:1px solid var(--muted-blue)}
.btn.secondary:hover{background:rgba(63,89,119,.08)}
.btn-sm{padding:7px 10px;font-size:13px;border-radius:6px}
.sysid{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--quiet);
  background:var(--cream);border-radius:5px;padding:3px 7px;white-space:nowrap;
}
.locknote{font-size:11px;color:var(--quiet)}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--midnight);margin-top:12px}
.toggle input{width:18px;height:18px;accent-color:var(--muted-blue)}
.saved{
  background:#e8f0e4;border:1px solid #b9cfae;color:#2c4a22;
  border-radius:8px;padding:12px 14px;font-size:14px;margin:0 0 18px;
}
.version-chip{
  display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;color:var(--quiet);border:1px solid var(--hairline);border-radius:999px;
  padding:4px 10px;margin-left:8px;vertical-align:middle;
}
.audio-now{font-size:13px;color:var(--quiet);margin-top:6px;word-break:break-all}
.order-btns{display:flex;gap:6px}
.order-btns button{
  width:34px;height:34px;border:1px solid var(--hairline);background:#fff;border-radius:7px;
  cursor:pointer;font-size:15px;color:var(--muted-blue);
}
.order-btns button:hover{border-color:var(--muted-blue)}
.versions{font-size:12px;color:var(--quiet);line-height:1.9;margin-top:8px}
.versions code{font-family:'IBM Plex Mono',ui-monospace,monospace}
.login-box{max-width:340px;margin:16vh auto 0}
.admin input[type=password]{
  width:100%;padding:11px 12px;font-size:16px;border:1px solid var(--hairline);border-radius:8px;background:#fff;
}
.err{color:#8a2b1e;font-size:14px;margin:10px 0 0}
hr.sep{border:0;border-top:1px solid var(--hairline-soft);margin:30px 0}