/* Come Alive · app.css
   The styles are the wireframe's (come-alive-wireframe.html, Version 56), with the phone frame removed:
   the screen fills the real phone, the phone's own status bar sits over the picture, and the images are files. */
:root{
  --app-bg:#fbfaf7; --app-surf:#f3f1ec; --app-surf2:#e9e6df; --app-ink:#1a1a1a; --app-mute:#4f4a43; --app-line:#e2ddd3;
  --app-acc:#1a1a1a; --app-acc-ink:#ffffff; --app-gold:#8a3a2b; --app-danger:#8a3a2b;
  --stone:#c8bfae; --stone-deep:#b8ae9b; --cream:#f3e9cf; --blue:#b7bcc4; --rust:#8a3a2b; --sand:#e8dcc4; --olive:#8f9a7a; --slate:#5c6470;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --text:Lora,Georgia,serif; --ui:Lato,"Helvetica Neue",Arial,sans-serif;
  --img-silk:url(../img/silk.jpg); --img-arches:url(../img/arches.jpg);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  color-scheme:light only;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--app-bg);color:var(--app-ink);font-family:var(--ui);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input{font:inherit}
button{touch-action:manipulation}

/* The screen: fills the phone; the status bar is the phone's own, over the picture */
.screen{position:fixed;inset:0;height:100%;height:100dvh;background:linear-gradient(rgba(251,250,247,.46),rgba(251,250,247,.46)),var(--img-silk) center / cover no-repeat fixed,var(--app-bg);color:var(--app-ink);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;font-family:var(--ui);-webkit-overflow-scrolling:touch}
@supports (-webkit-touch-callout:none){ .screen{background-attachment:scroll} }
.screen.bg-silk{background:var(--img-silk) center / cover no-repeat,var(--app-bg)}
.screen.bg-silk .top button,.screen.bg-silk .top .eyebrow,.screen.bg-silk .body > .eyebrow:first-child{color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.screen.full-top .body.splash{padding-top:calc(var(--sat) + 60px)}

.body{padding:calc(var(--sat) + 10px) 22px calc(var(--sab) + 24px);flex:1;display:flex;flex-direction:column;gap:14px}
.top + .body{padding-top:8px}
.body.center{justify-content:center;text-align:center}
.eyebrow{font-family:var(--ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--app-mute)}
.t1{font-family:var(--serif);font-size:40px;line-height:1.05;font-weight:500;letter-spacing:.01em;text-wrap:balance}
.t2{font-family:var(--serif);font-size:30px;line-height:1.12;font-weight:500;text-wrap:balance}
.t3{font-family:var(--serif);font-size:22px;line-height:1.2;font-weight:600}
.p{font-family:var(--text);color:var(--app-ink);font-size:15px;line-height:1.6;margin:0}
.p.mute{color:var(--app-mute)}
.p.small{font-size:13px;font-family:var(--ui);line-height:1.5}
.btn{display:block;width:100%;border:1.5px solid var(--app-ink);border-radius:999px;padding:14px 16px;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:rgba(251,250,247,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--app-ink);cursor:pointer;text-align:center}
.btn.ghost,.btn.quiet{border:1px solid rgba(26,26,26,.5);color:var(--app-mute);font-weight:600;background:rgba(251,250,247,.08)}
.btn.paper{background:rgba(251,250,247,.16)}
.btn[disabled]{opacity:.45}
.card{background:rgba(250,248,244,.82);border:1px solid rgba(0,0,0,.07);border-radius:14px;padding:14px 16px}
.cover{width:46px;height:62px;border-radius:3px;flex:none;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15);background:var(--img-arches) center / cover no-repeat}
.splash{position:relative;background:var(--img-arches) center / cover no-repeat;color:#fff;overflow:hidden;min-height:100%}
.splash:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,22,14,.5),rgba(30,22,14,0) 120px),linear-gradient(to top,rgba(30,22,14,.74),rgba(30,22,14,.3) 48%,rgba(30,22,14,.08))}
.splash .t1{text-shadow:0 1px 3px rgba(0,0,0,.25)}
.splash > *{position:relative}
.splash .t1,.splash .p{color:#fff}
.splash .p.mute{color:rgba(255,255,255,.85)}
.splash .btn{background:rgba(255,255,255,.10);border-color:#fff;color:#fff}
.card.tap{cursor:pointer}
.card.tap:active{border-color:var(--app-acc)}
.opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.78);border:1px solid var(--app-line);color:var(--app-ink);border-radius:14px;padding:14px 16px;font-family:var(--text);font-size:15px;line-height:1.45;cursor:pointer}
.opt:active{border-color:var(--app-acc)}
.opt.on{border-color:var(--app-ink);background:var(--app-surf2)}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.spacer{flex:1}
.dots{display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;border-radius:50%;background:var(--app-line)}
.dot.on{background:var(--app-ink)}
.dot.today{outline:2px solid var(--app-ink);outline-offset:2px}
.nav{display:flex;border-top:1px solid rgba(0,0,0,.07);background:rgba(251,250,247,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 12px calc(var(--sab) + 12px);justify-content:space-around;position:sticky;bottom:0;z-index:3}
.nav button{background:none;border:0;color:var(--app-mute);font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:72px}
.nav button.on{color:var(--app-ink)}
.nav svg{width:22px;height:22px}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 6px) 22px 0}
.top button{background:none;border:0;color:var(--app-mute);font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:6px}
.top button.gear{font-size:16px;letter-spacing:0}
.ring{width:210px;height:210px;border-radius:50%;margin:6px auto;display:grid;place-items:center;background:conic-gradient(var(--app-ink) 0 var(--pct,0%),var(--app-line) var(--pct,0%) 100%)}
.ring>div{width:184px;height:184px;border-radius:50%;background:#fbfaf7;display:grid;place-items:center;text-align:center}
.time{font-family:var(--serif);font-size:48px;line-height:1;font-variant-numeric:tabular-nums;font-weight:500}
.tag{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--app-surf2);color:var(--app-mute);font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.tag.gold{background:rgba(138,58,43,.10);color:var(--app-gold)}
.chip{padding:10px 14px;border-radius:999px;border:1px solid var(--app-line);background:rgba(255,255,255,.78);color:var(--app-ink);font-family:var(--ui);font-size:13px;cursor:pointer}
.chip.on{border:1.5px solid var(--app-ink);background:rgba(251,250,247,.55);color:var(--app-ink);font-weight:700}
.chip.play{width:40px;height:40px;padding:0;display:inline-grid;place-items:center;flex:none}
.hr{height:1px;background:var(--app-line);margin:4px 0}
.lens{border-left:2px solid var(--app-gold);padding-left:12px}
.lens .p{color:var(--app-ink)}
.sec{font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--app-mute);margin-top:6px}
.tabs{display:flex;gap:6px;background:rgba(0,0,0,.06);border-radius:999px;padding:4px}
.tabs button{flex:1;border:0;border-radius:999px;padding:9px;font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--app-mute);cursor:pointer}
.tabs button.on{background:#fff;color:var(--app-ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
input[type=text],input[type=time],.field{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--app-line);background:rgba(255,255,255,.82);color:var(--app-ink);font-family:var(--text);font-size:16px;-webkit-appearance:none;appearance:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-family:var(--ui)}
.check input{margin-top:4px;width:18px;height:18px}
ul.tight{margin:0;padding-left:18px;color:var(--app-mute);font-size:13px;line-height:1.5;font-family:var(--ui)}
ul.tight li{margin-bottom:6px}
.logo{display:block;width:66px;height:61px;margin:0 auto 12px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.linkbtn{background:none;border:0;color:var(--app-mute);font:inherit;cursor:pointer;text-decoration:underline;padding:6px}

/* Real-phone additions, not in the wireframe */
.time-input{position:relative;display:block}
.time-input input{position:absolute;inset:0;opacity:0;width:100%;height:100%;font-size:40px}
.toggle{width:46px;height:28px;border-radius:999px;border:1.5px solid var(--app-ink);background:transparent;position:relative;flex:none;cursor:pointer;padding:0}
.toggle:after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--app-ink);opacity:.35;transition:left .15s,opacity .15s}
.toggle.on:after{left:21px;opacity:1}
.progress{height:2px;background:var(--app-line);border-radius:2px;overflow:hidden;margin-top:10px}
.progress>div{height:100%;background:var(--app-ink);width:0}
.player.dim:after{content:"";position:fixed;inset:0;background:#000;opacity:.86;z-index:9}
.note{font-family:var(--ui);font-size:12px;color:var(--app-gold)}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.row.wrap{flex-wrap:wrap}
.days{display:flex;justify-content:space-between}
.days .chip{padding:8px 0;width:38px;text-align:center}
.fade{animation:fade .35s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}