/* Skin Rotation: cloud-white air with one narrow band of diffracted colour. */

:root{
  --cloud:#FFFFFF; --mist:#F3F5F8; --haze:#E3E7EE; --haze-2:#D0D6E0;
  --ink:#344054; --ink-2:#475467; --ink-3:#5F6B7F;
  /* the world's action surfaces: a sheen hairline, and a pale fringe fill for the main action */
  --fringe:linear-gradient(100deg,#7FD9C4,#F59ABA 50%,#9D86F5);
  --fill-primary:linear-gradient(110deg,#DDF5EE,#FFE3EE 55%,#E9E3FF);
  /* the fringe */
  --f-mint:#CDEFE6; --f-rose:#FFD6E6; --f-violet:#D9D1FF;
  --f-mint-v:#7FD9C4; --f-rose-v:#F59ABA; --f-violet-v:#9D86F5;
  /* product colours: ink (text-safe) and -v vivid (dots, bars) */
  --slate:#475467;  --slate-v:#98A2B3;
  --sky:#1F5FBF;    --sky-v:#6FA3EE;
  --aqua:#0B7A74;   --aqua-v:#34C6B8;
  --green:#1F7A3F;  --green-v:#4CC479;
  --amber:#8A5A00;  --amber-v:#E7B53C;
  --peach:#B2461A;  --peach-v:#FF9A62;
  --rose:#C42A61;   --rose-v:#FF6F9C;
  --violet:#5B41D6; --violet-v:#9B85FF;
  --danger:#B42318;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 10px 28px -12px rgba(16,24,40,.14);
  --band-o:.9;
  --face:"Figtree",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --tabbar:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cloud:#12151C; --mist:#1B202A; --haze:#2A3140; --haze-2:#3A4254;
    --ink:#EEF1F6; --ink-2:#B6BECC; --ink-3:#98A2B4;
    --fill-primary:linear-gradient(110deg,#1D3B38,#3A2537 55%,#2B2650);
    --slate:#C3CAD6; --sky:#9CC2FF; --aqua:#62E0D3; --green:#7FE0A2;
    --amber:#F2CD6B; --peach:#FFB48C; --rose:#FF93B5; --violet:#B8A8FF;
    --danger:#FF8A80;
    --shadow:0 1px 0 rgba(255,255,255,.03),0 12px 30px -14px rgba(0,0,0,.6);
    --band-o:.55;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --cloud:#12151C; --mist:#1B202A; --haze:#2A3140; --haze-2:#3A4254;
  --ink:#EEF1F6; --ink-2:#B6BECC; --ink-3:#98A2B4;
  --fill-primary:linear-gradient(110deg,#1D3B38,#3A2537 55%,#2B2650);
  --slate:#C3CAD6; --sky:#9CC2FF; --aqua:#62E0D3; --green:#7FE0A2;
  --amber:#F2CD6B; --peach:#FFB48C; --rose:#FF93B5; --violet:#B8A8FF;
  --danger:#FF8A80;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 12px 30px -14px rgba(0,0,0,.6);
  --band-o:.55;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--cloud);overflow-x:clip}
body{
  margin:0;background:var(--cloud);color:var(--ink);
  font-family:var(--face);font-size:16px;line-height:1.5;font-weight:400;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
  caret-color:var(--violet);overflow-x:clip;
}
::selection{background:var(--f-violet);color:#1B2130}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;letter-spacing:-.01em;text-wrap:balance}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--violet-v);outline-offset:3px;border-radius:10px}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
svg{display:block}

/* ---------- views & chrome ---------- */
.views{
  max-width:560px;margin:0 auto;
  padding-top:max(14px, calc(env(safe-area-inset-top) + 6px));
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
  padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 28px);
}
.view{display:flex;flex-direction:column;gap:24px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.top h1{font-size:30px;font-weight:300;letter-spacing:-.025em;white-space:nowrap}
#v-today .top h1{font-size:16px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.top-r{display:flex;align-items:center;gap:6px}
.daypill{font-size:13px;font-weight:500;color:var(--ink-2);background:var(--mist);border-radius:999px;padding:6px 12px;white-space:nowrap}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.iconbtn svg{width:22px;height:22px}
.iconbtn:active{background:var(--mist)}
.statusline{font-size:13px;color:var(--ink-3)}
.view > .statusline{margin-top:-18px}
.statusline.off{color:var(--danger)}
.range{font-size:14px;color:var(--ink-3)}
.hint{font-size:13px;color:var(--ink-3)}
.block{display:flex;flex-direction:column;gap:12px}
.block h3,.view section > h3,h2.sub{font-size:17px;font-weight:500;letter-spacing:-.01em}
.view > section{display:flex;flex-direction:column;gap:12px}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background:color-mix(in srgb, var(--cloud) 82%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border-top:1px solid var(--haze);
}
.tabbar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--f-mint-v),var(--f-rose-v),var(--f-violet-v),transparent);opacity:.55}
.tabbar button{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3);font-size:11px;font-weight:500;letter-spacing:.01em}
.tabbar svg{width:24px;height:24px}
@media (min-width:700px){
  .tabbar{left:50%;right:auto;width:520px;bottom:16px;transform:translateX(-50%);padding:4px 8px;border-top:0;border-radius:22px;box-shadow:var(--shadow)}
  .tabbar::before{left:24px;right:24px}
}
.tabbar button[aria-current="page"]{color:var(--ink)}
.tabbar button[aria-current="page"] svg{stroke-width:2}

/* ---------- pills, chips, rows ---------- */
.pill{
  position:relative;min-height:52px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:600;color:var(--ink);background:var(--cloud);
  transition:transform .12s ease,background .2s ease;
}
/* the sheen hairline: a thin gradient ring drawn by a masked pseudo-element */
.pill::before,.chip[aria-pressed="true"]::before,.row[aria-pressed="true"] .tick::before,.dayx .seg button[aria-checked="true"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--fringe);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.pill:active{transform:scale(.98)}
.pill.primary{background:var(--fill-primary)}
.pill.quiet{background:transparent;color:var(--ink-2)}
.pill.quiet::before{background:var(--haze-2)}
.pill.danger{color:var(--danger)}
.pill.light{background:rgba(255,255,255,.16);color:#fff}
.pill.light::before{background:rgba(255,255,255,.35)}
.camera .pill.primary{background:linear-gradient(110deg,#DDF5EE,#FFE3EE 55%,#E9E3FF);color:#1B2130}
.pill:disabled{opacity:.55;cursor:default}
.btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 16px;border-radius:999px;font-size:15px;box-shadow:inset 0 0 0 1px var(--haze-2);color:var(--ink-2);transition:background .2s,color .2s}
.chip{position:relative}
.chip[aria-pressed="true"]{background:var(--mist);color:var(--ink);font-weight:600;box-shadow:none}

.dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}

.row{
  width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;text-align:left;
  min-height:68px;padding:12px 14px 12px 18px;border-radius:var(--r-md);background:var(--mist);
}
.row b{display:block;font-size:17px;font-weight:500}
.row small{display:block;font-size:14px;color:var(--ink-2);line-height:1.35;margin-top:2px}
.tick{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--haze-2);color:transparent;transition:background .2s,border-color .2s,color .2s}
.tick svg{width:18px;height:18px}
.tick{position:relative}
.row[aria-pressed="true"] .tick{border-color:transparent;background:var(--cloud);color:var(--ink)}
.row[aria-pressed="true"] .tick::before{inset:-2px;padding:2px}
.row[aria-pressed="true"] b{color:var(--ink-2)}

/* ---------- Today: tonight's product ---------- */
.night{position:relative;isolation:isolate;padding:clamp(24px,11svh,110px) 0 6px}
.band{
  position:absolute;z-index:-1;left:-40px;right:-40px;top:calc(clamp(24px,11svh,110px) + 16px);height:42px;
  background:linear-gradient(100deg,transparent 4%,var(--b1) 26%,var(--b2) 50%,var(--b3) 74%,transparent 96%);
  filter:blur(10px);opacity:var(--band-o);transform:rotate(-7deg);pointer-events:none;
}
.night{--b1:#CDEFE6;--b2:#FFD0E2;--b3:#D9D1FF;--nh:var(--ink)}
.night[data-c="slate"]{--b1:#E3E7EE;--b2:#D9D1FF;--b3:#CDEFE6;--nh:var(--slate)}
.night[data-c="sky"]{--b1:#CFE6FF;--b2:#D9D1FF;--b3:#CDEFE6;--nh:var(--sky)}
.night[data-c="aqua"]{--b1:#BFF3E8;--b2:#BFE4FF;--b3:#D9D1FF;--nh:var(--aqua)}
.night[data-c="green"]{--b1:#CFF5DA;--b2:#CDEFE6;--b3:#FFF0B8;--nh:var(--green)}
.night[data-c="amber"]{--b1:#FFF0B8;--b2:#FFD6A8;--b3:#FFD0E2;--nh:var(--amber)}
.night[data-c="peach"]{--b1:#FFE0CC;--b2:#FFD0E2;--b3:#FFF0B8;--nh:var(--peach)}
.night[data-c="rose"]{--b1:#FFE2C6;--b2:#FFB8CF;--b3:#E4D4FF;--nh:var(--rose)}
.night[data-c="violet"]{--b1:#CDEFE6;--b2:#D2C6FF;--b3:#FFD0E2;--nh:var(--violet)}
.night-name{font-size:clamp(36px,10.6vw,54px);font-weight:300;line-height:1.02;letter-spacing:-.03em;color:var(--nh)}
.night-sub{margin-top:10px;font-size:16px;color:var(--ink-2);max-width:32ch}

/* ---------- Today: the session due now ---------- */
.now{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--cloud);
  box-shadow:inset 0 0 0 1px var(--haze),var(--shadow);
  padding:20px 18px 18px;display:flex;flex-direction:column;gap:16px;min-height:320px;
}
.now::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--f-mint-v),var(--f-rose-v),var(--f-violet-v))}
.now-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.now-h h3{font-size:22px;font-weight:500}
.now-tag{font-size:13px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.now-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--f-mint-v),var(--f-rose-v),var(--f-violet-v))}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;align-items:center;gap:12px;font-size:18px;line-height:1.3}
.steps li span{overflow-wrap:anywhere}
.steps li em{font-style:normal;color:var(--ink-3);font-size:15px}
.now .pill{width:100%;min-height:58px;font-size:17px;margin-top:auto}
.now.done .pill{background:var(--mist)}
.now.done .pill::before{opacity:.3}
.now.done .pill svg{width:20px;height:20px}
.now.done .steps li{color:var(--ink-2)}
.now.pre{opacity:.6}
.now.done::before{opacity:.3;transition:opacity .6s ease}
.now.done .now-tag::before{background:var(--haze-2)}

/* signature: a sheen of the band sweeps across the card when it's marked done */
.now.sweep::after{
  content:"";position:absolute;inset:-20% 0;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(127,217,196,.3) 42%,rgba(245,154,186,.3) 52%,rgba(157,134,245,.3) 62%,transparent 78%);
  transform:translateX(-110%);animation:sweep 1.3s cubic-bezier(.45,0,.25,1) forwards;
}
@keyframes sweep{to{transform:translateX(110%)}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .night[data-c="slate"]{--b1:#5C6B85;--b2:#6E62B8;--b3:#3F8F87}
  :root:not([data-theme="light"]) .night[data-c="sky"]{--b1:#4F7FC4;--b2:#6E62B8;--b3:#3F8F87}
  :root:not([data-theme="light"]) .night[data-c="aqua"]{--b1:#3F9C92;--b2:#4F7FC4;--b3:#6E62B8}
  :root:not([data-theme="light"]) .night[data-c="green"]{--b1:#4C9A6B;--b2:#3F8F87;--b3:#B39A52}
  :root:not([data-theme="light"]) .night[data-c="amber"]{--b1:#B39A52;--b2:#C27A4E;--b3:#B35C82}
  :root:not([data-theme="light"]) .night[data-c="peach"]{--b1:#C27A4E;--b2:#B35C82;--b3:#B39A52}
  :root:not([data-theme="light"]) .night[data-c="rose"]{--b1:#C27A4E;--b2:#B35C82;--b3:#6E62B8}
  :root:not([data-theme="light"]) .night[data-c="violet"]{--b1:#3F8F87;--b2:#6E62B8;--b3:#B35C82}
}
:root[data-theme="dark"] .night[data-c="slate"]{--b1:#5C6B85;--b2:#6E62B8;--b3:#3F8F87}
:root[data-theme="dark"] .night[data-c="sky"]{--b1:#4F7FC4;--b2:#6E62B8;--b3:#3F8F87}
:root[data-theme="dark"] .night[data-c="aqua"]{--b1:#3F9C92;--b2:#4F7FC4;--b3:#6E62B8}
:root[data-theme="dark"] .night[data-c="green"]{--b1:#4C9A6B;--b2:#3F8F87;--b3:#B39A52}
:root[data-theme="dark"] .night[data-c="amber"]{--b1:#B39A52;--b2:#C27A4E;--b3:#B35C82}
:root[data-theme="dark"] .night[data-c="peach"]{--b1:#C27A4E;--b2:#B35C82;--b3:#B39A52}
:root[data-theme="dark"] .night[data-c="rose"]{--b1:#C27A4E;--b2:#B35C82;--b3:#6E62B8}
:root[data-theme="dark"] .night[data-c="violet"]{--b1:#3F8F87;--b2:#6E62B8;--b3:#B35C82}

.others{display:flex;flex-direction:column;gap:10px}

.view > .nudge{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:16px 16px 16px 18px;border-radius:var(--r-md);background:linear-gradient(120deg,var(--f-mint),var(--f-rose) 55%,var(--f-violet))}
.nudge h3{font-size:16px;font-weight:600;color:#1B2130}
.nudge p{font-size:14px;color:#3D4658;margin-top:2px}
.nudge .pill{min-height:44px;background:#fff;color:#1B2130;flex:none}

/* ---------- Calendar ---------- */
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--ink-2);margin-top:-10px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wd{font-size:12px;font-weight:500;color:var(--ink-3);text-align:center;padding-bottom:2px}
.cell{
  position:relative;height:58px;width:100%;min-width:0;border-radius:var(--r-sm);background:var(--mist);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.cell .d{font-size:16px;font-weight:500;line-height:1}
.cell .bar{position:absolute;left:10px;right:10px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--c)}
.cell .dots{display:flex;gap:3px}
.cell .dots i{width:5px;height:5px;border-radius:50%;background:var(--haze-2)}
.cell .dots i.on{background:var(--ink)}
.cell .cam{position:absolute;right:5px;top:6px;width:5px;height:5px;border-radius:50%;box-shadow:0 0 0 1.3px var(--ink-3)}
.cell.pre{opacity:.35}
.cell.future{background:transparent;box-shadow:inset 0 0 0 1px var(--haze)}
.cell.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cell.picked{background:var(--cloud);box-shadow:inset 0 0 0 2px var(--violet-v),var(--shadow)}
.cell.full .d{font-weight:600}

.dayedit{display:flex;flex-direction:column;gap:14px;padding-top:6px;border-top:1px solid var(--haze)}
.dayedit-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:14px}
.dayedit-h h2{font-size:22px;font-weight:500}
.dayedit .rows{display:flex;flex-direction:column;gap:8px}
.dayedit .thumbrow{display:flex;align-items:center;gap:12px}
.dayedit .thumbrow img{width:54px;height:72px;object-fit:cover;border-radius:10px}

/* ---------- Photos ---------- */
.shoot{display:grid!important;grid-template-columns:64px 1fr;gap:14px 16px!important;align-items:center;padding:18px;border-radius:var(--r-lg);background:var(--mist)}
.shoot-face{width:64px;height:80px}
.shoot h2{font-size:19px;font-weight:500}
.shoot p{font-size:14px;color:var(--ink-2);margin-top:2px}
.shoot .pill{grid-column:1/-1}

.cmp{position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--mist);--x:50%}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .cmp-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp .cmp-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
.cmp .cmp-line::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.cmp .lab{position:absolute;bottom:10px;font-size:13px;font-weight:600;color:#fff;background:rgba(15,18,26,.55);padding:4px 10px;border-radius:999px;pointer-events:none}
.cmp .lab.a{right:10px}.cmp .lab.b{left:10px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumb{display:flex;flex-direction:column;gap:5px;text-align:left}
.thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-sm);background:var(--mist)}
.thumb span{font-size:13px;color:var(--ink-2)}
.empty{font-size:15px;color:var(--ink-3)}
.export{display:flex;flex-direction:column;gap:8px;padding-top:8px}
.export .pill{align-self:flex-start;text-decoration:none}
.export .pill svg{width:20px;height:20px}

/* ---------- Insights ---------- */
.strip{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.strip .col{display:flex;flex-direction:column;align-items:center;gap:5px}
.strip .col i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.3px var(--haze-2)}
.strip .col i.on{background:var(--ink);box-shadow:none}
.strip .col i.on.n{background:var(--c)}
.strip .col b{font-size:11px;font-weight:500;color:var(--ink-3);margin-top:2px}
.strip .col.today b{color:var(--ink)}
.strip .col.pre{opacity:.3}
.facts{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--haze)}
.facts div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--haze)}
.facts dt{font-size:16px;color:var(--ink-2)}
.facts dd{margin:0;font-size:24px;font-weight:300;letter-spacing:-.02em}
.uses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.uses li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--haze)}
.uses .n{font-size:15px;line-height:1.3}
.uses .n small{display:block;font-size:13px;color:var(--ink-3)}
.uses b{font-size:20px;font-weight:300}

/* ---------- Settings ---------- */
.back{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:17px;color:var(--ink-2);margin-left:-8px}
.back svg{width:24px;height:24px}
.set-h{font-size:30px;font-weight:300;letter-spacing:-.025em;margin-top:-10px}
.setgroup{display:flex!important;flex-direction:column;gap:12px!important;padding-top:20px;border-top:1px solid var(--haze)}
.setgroup p{font-size:15px;color:var(--ink-2)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--mist)}
.seg button{min-height:44px;border-radius:11px;font-size:16px;font-weight:500;color:var(--ink-2)}
.seg button[aria-checked="true"]{background:var(--cloud);color:var(--ink);box-shadow:var(--shadow)}

/* ---------- sign-in ---------- */
.gate{position:fixed;inset:0;z-index:60;background:var(--cloud);display:grid;place-items:center;
  padding:24px max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));overflow:hidden}
.gate::before{content:"";position:absolute;left:-30%;right:-30%;top:18%;height:140px;
  background:linear-gradient(100deg,transparent 8%,#CDEFE6 32%,#FFD0E2 52%,#D9D1FF 72%,transparent 92%);filter:blur(30px);opacity:var(--band-o);transform:rotate(-8deg)}
.gate form{position:relative;width:min(340px,100%);display:flex;flex-direction:column;gap:14px;text-align:center}
.gate-mark{width:52px;height:52px;margin:0 auto 6px;color:var(--ink)}
.gate h1{font-size:34px;font-weight:300;letter-spacing:-.03em}
.gate p{font-size:15px;color:var(--ink-2)}
.gate input{font-size:17px;background:var(--cloud);border:0;box-shadow:inset 0 0 0 1px var(--haze-2);border-radius:14px;padding:15px 16px;text-align:center}
.gate input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--violet-v)}
.gate .err{color:var(--danger);min-height:22px}

/* ---------- camera ---------- */
.camera{position:fixed;inset:0;z-index:50;background:#0B0D12;color:#fff;display:grid;place-items:center}
.cam-frame{position:relative;width:min(100vw, calc((100dvh - 220px) * .75));aspect-ratio:3/4;overflow:hidden;border-radius:18px;background:#000}
.cam-frame video,.cam-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-frame video{transform:scaleX(-1)}
.cam-ghost,.cam-ghost img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;pointer-events:none}
.cam-ghost img{opacity:1}
.cam-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cam-guide *{fill:none;stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke}
.cam-guide .g-face{stroke-width:2}
.cam-guide .g-mark{opacity:.8}
.cam-guide .g-eye{stroke-dasharray:4 6;opacity:.85}
.cam-guide .g-mid{stroke-dasharray:2 8;opacity:.45}
.cam-top{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;
  padding:max(10px, env(safe-area-inset-top)) 12px 10px}
.cam-top p{text-align:center;font-size:15px;color:rgba(255,255,255,.88)}
.iconbtn.light{color:#fff;background:rgba(255,255,255,.12)}
.iconbtn.light[aria-pressed="false"]{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cam-bot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:12px;
  padding:14px 20px calc(18px + env(safe-area-inset-bottom))}
.cam-bot.two .pill{flex:1;max-width:180px}
.shutter{width:76px;height:76px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #0B0D12,0 0 0 7px rgba(255,255,255,.9)}
.shutter:active{transform:scale(.94)}

/* ---------- photo viewer ---------- */
.viewer{position:fixed;inset:0;z-index:40;background:var(--cloud);overflow:auto;display:flex;flex-direction:column;gap:16px;
  padding:max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left))}
.vw-img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg);background:var(--mist)}
.vw-meta h2{font-size:24px;font-weight:500}
.vw-meta p{font-size:15px;color:var(--ink-2);margin-top:4px}
.viewer .danger{align-self:flex-start;margin-top:28px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 18px);z-index:70;
  max-width:calc(100vw - 40px);padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--cloud);font-size:15px;font-weight:500;box-shadow:var(--shadow)}

/* ---------- Routine ---------- */
.rot-h{display:flex;flex-direction:column;gap:4px}
.rot-h h2{font-size:30px;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.rot-h h2 span{color:var(--ink-3)}
.rot-h p{font-size:15px;color:var(--ink-2)}
.plan{display:flex;flex-direction:column;border-top:1px solid var(--haze)}
.plan div{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--haze)}
.plan b{font-size:14px;font-weight:600;color:var(--ink-2)}
.plan span{font-size:15px;line-height:1.4}
.plan .nt{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--c-ink)}
.plan .nt i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.plan .today b::after{content:" · today";font-weight:500;color:var(--ink-3)}
.dayx{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-md);background:var(--mist)}
.dayx p{font-size:15px;color:var(--ink-2)}
.dayx .seg{background:var(--cloud)}
.dayx .seg button{position:relative}
.dayx .seg button[aria-checked="true"]{background:var(--cloud);color:var(--ink);font-weight:600;box-shadow:none}
.seg.n4,.seg.n5,.seg.n6,.seg.n7{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}
.seg.n1{grid-template-columns:1fr}.seg.n2{grid-template-columns:repeat(2,1fr)}

.hist{display:flex;flex-direction:column;gap:8px}
.hist button{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;text-align:left;padding:14px 16px;border-radius:var(--r-md);background:var(--mist)}
.hist b{font-size:17px;font-weight:500}
.hist b span{font-weight:400;color:var(--ink-2)}
.hist small{grid-column:1;font-size:14px;color:var(--ink-2);line-height:1.4}
.hist em{grid-row:1/3;grid-column:2;font-style:normal;font-size:22px;font-weight:300;text-align:right;line-height:1.1}
.hist em small{display:block;font-size:12px;color:var(--ink-3)}
.hist .live{font-size:12px;font-weight:600;color:var(--ink);background:var(--cloud);padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:2px;box-shadow:inset 0 0 0 1px var(--haze-2)}

.prods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.prods li button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;padding:12px 0;border-bottom:1px solid var(--haze)}
.prods .n{font-size:15px;line-height:1.3}
.prods .n small{display:block;font-size:13px;color:var(--ink-3)}
.prods svg{width:18px;height:18px;color:var(--ink-3)}

.periods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--haze)}
.periods li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--haze);font-size:15px}
.periods li span:last-child{color:var(--ink-2);white-space:nowrap}
.periods li.total{font-weight:600;border-bottom:0}
.use{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-md);background:var(--mist)}
.use p{font-size:15px;color:var(--ink-2)}

#routCur,#rdBody,#edBody,#pfBody{display:flex;flex-direction:column;gap:20px}
#rdBody section{display:flex;flex-direction:column;gap:12px}
.cell .vtag{position:absolute;left:5px;top:5px;font-size:10px;font-weight:600;line-height:1;color:var(--ink)}

/* ---------- editor ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lab{font-size:14px;font-weight:600;color:var(--ink-2)}
.field .help{font-size:13px;color:var(--ink-3)}
.inp,.sel{width:100%;min-height:48px;padding:0 14px;border:0;border-radius:12px;background:var(--mist);font-size:16px;color:var(--ink);box-shadow:inset 0 0 0 1px transparent}
.inp:focus,.sel:focus{outline:none;box-shadow:inset 0 0 0 2px var(--violet-v)}
.sel{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:20px}
.stepper{display:inline-grid;grid-template-columns:48px 64px 48px;align-items:center;border-radius:12px;background:var(--mist);width:max-content}
.stepper button{height:48px;display:grid;place-items:center;color:var(--ink)}
.stepper button svg{width:20px;height:20px}
.stepper button:disabled{color:var(--haze-2)}
.stepper output{text-align:center;font-size:17px;font-weight:600}
.sess-ed{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--haze)}
.sess-ed h3{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:500}
.sess-ed h3 i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.sess-ed h3 small{font-size:14px;font-weight:400;color:var(--ink-3)}
.step-ed{display:grid;grid-template-columns:1fr 40px 40px 40px;gap:6px;align-items:start}
.step-ed .note{grid-column:1/-1}
.step-ed .ib[aria-pressed="true"]{color:var(--violet)}
.step-ed > *,.sel,.inp{min-width:0}

.step-ed .ib{width:40px;height:48px;display:grid;place-items:center;border-radius:12px;color:var(--ink-3)}
.step-ed .ib svg{width:20px;height:20px}
.step-ed .ib:disabled{opacity:.3}
.step-ed + .step-ed{margin-top:4px}
.add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--violet);padding:0 4px}
.add svg{width:18px;height:18px}
.note-add{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:14px;font-weight:500;color:var(--ink-3);padding:0 2px}
.note-add svg{width:15px;height:15px}
.rest{font-size:14px;color:var(--ink-3)}

.choice{display:flex;flex-direction:column;gap:10px;padding:18px 16px;border-radius:var(--r-lg);background:var(--cloud);box-shadow:inset 0 0 0 1px var(--haze),var(--shadow);position:relative;overflow:hidden}
.choice::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--f-mint-v),var(--f-rose-v),var(--f-violet-v))}
.choice h2{font-size:18px;font-weight:500}
.opt{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:12px;border-radius:14px;background:var(--mist);cursor:pointer}
.opt > input[type="radio"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:1px 0 0;border-radius:50%;border:2px solid var(--haze-2);background:var(--cloud)}
.opt > input[type="radio"]:checked{border-color:var(--violet-v);background:radial-gradient(circle,var(--violet) 0 4px,var(--cloud) 5px)}
.opt > span{min-width:0;display:block}
.opt .inp{display:block;width:100%;appearance:auto;-webkit-appearance:auto}
.opt b{display:block;font-size:16px;font-weight:600}
.opt small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.opt .inp{margin-top:8px;background:var(--cloud)}
.err{color:var(--danger);font-size:14px}

.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches button{width:40px;height:40px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.swatches button[aria-checked="true"]{box-shadow:0 0 0 3px var(--cloud),0 0 0 5px var(--ink)}

/* =========================================================
   Motion. One authored moment (marking a session done: the band's
   sheen sweeps the card and the tick draws itself), plus quiet
   continuity between screens and small acknowledgements.
   ========================================================= */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.5,0,.75,0)}

/* the band's colours glide when the night changes (new day, new rotation) */
@property --b1{syntax:"<color>";inherits:true;initial-value:#CDEFE6}
@property --b2{syntax:"<color>";inherits:true;initial-value:#FFD0E2}
@property --b3{syntax:"<color>";inherits:true;initial-value:#D9D1FF}
.night{transition:--b1 .9s var(--ease-out),--b2 .9s var(--ease-out),--b3 .9s var(--ease-out)}
.night-name{transition:color .6s var(--ease-out)}

/* first open: the cloud edge forms behind tonight's product */
.boot .night .band{animation:bandIn 1.2s var(--ease-out) both}
.boot .night-name{animation:fadeUp .7s var(--ease-out) .1s both}
.boot .night-sub{animation:fadeUp .7s var(--ease-out) .18s both}
@keyframes bandIn{from{opacity:0;transform:rotate(-7deg) translateX(-22%) scaleX(.6)}}

/* ticks: the circle fills and the check draws itself */
.tick svg,.now .pill svg{stroke-dasharray:22}
.row.just .tick{animation:tickPop .34s var(--ease-out)}
.row.just[aria-pressed="true"] .tick svg{animation:draw .36s var(--ease-out) .08s both}
.now.just.done .pill svg{animation:draw .4s var(--ease-out) .15s both}
.now.just.done .steps li{animation:settle .5s var(--ease-out) both}
@keyframes tickPop{from{transform:scale(.72)}}
@keyframes draw{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
@keyframes settle{from{color:var(--ink)}}

/* presses */
.row,.hist button,.prods li button,.thumb,.cell,.chip,.seg button,.swatches button,.stepper button,.opt{transition:transform .14s var(--ease-out),background .2s,color .2s,box-shadow .2s}
.row:active,.hist button:active,.thumb:active,.opt:active{transform:scale(.985)}
.cell:active,.chip:active,.seg button:active,.swatches button:active,.stepper button:active{transform:scale(.94)}
.prods li button:active{background:var(--mist)}
.tabbar button svg{transition:transform .14s var(--ease-out)}
.tabbar button:active svg{transform:scale(.88)}
.chip.just[aria-pressed="true"]{animation:chipIn .3s var(--ease-out)}
@keyframes chipIn{from{transform:scale(.9)}}

/* tab bar: the iridescent fringe gathers above the active tab */
.tab-ind{position:absolute;left:0;top:-1px;height:3px;pointer-events:none;view-transition-name:tabind}
.tab-ind::after{content:"";position:absolute;left:50%;top:0;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--f-mint-v),var(--f-rose-v),var(--f-violet-v))}
.no-vt .tab-ind{transition:transform .38s var(--ease-out),opacity .2s}
.tabbar{view-transition-name:tabbar}

/* moving between screens (View Transitions where the phone supports them) */
::view-transition-group(tabind){animation-duration:.38s;animation-timing-function:var(--ease-out)}
::view-transition-group(tabbar){animation-duration:.2s}
html[data-nav="tab"]::view-transition-old(root){animation:fadeOut .14s ease both}
html[data-nav="tab"]::view-transition-new(root){animation:fadeUp .3s var(--ease-out) both}
html[data-nav="push"]::view-transition-old(root){animation:outLeft .24s var(--ease-in) both}
html[data-nav="push"]::view-transition-new(root){animation:inRight .36s var(--ease-out) both}
html[data-nav="pop"]::view-transition-old(root){animation:outRight .22s var(--ease-in) both}
html[data-nav="pop"]::view-transition-new(root){animation:inLeft .34s var(--ease-out) both}
html[data-nav="photo"]::view-transition-group(photo){animation-duration:.42s;animation-timing-function:var(--ease-out)}
html[data-nav="photo"]::view-transition-old(root){animation:fadeOut .2s ease both}
html[data-nav="photo"]::view-transition-new(root){animation:fadeIn .3s ease both}
/* fallback when View Transitions are not available */
.view.enter[data-dir="tab"]{animation:fadeUp .28s var(--ease-out)}
.view.enter[data-dir="push"]{animation:inRight .34s var(--ease-out)}
.view.enter[data-dir="pop"]{animation:inLeft .32s var(--ease-out)}
@keyframes inRight{from{opacity:0;transform:translateX(32px)}}
@keyframes inLeft{from{opacity:0;transform:translateX(-32px)}}
@keyframes outLeft{to{opacity:0;transform:translateX(-24px)}}
@keyframes outRight{to{opacity:0;transform:translateX(24px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}

/* calendar: the picked day lifts, its details swap in */
.cell.picked.just{animation:selIn .34s var(--ease-out)}
.dayedit.swap{animation:fadeUp .28s var(--ease-out)}
@keyframes selIn{from{transform:scale(.88)}}

/* insights: the 14 days fill in left to right, once per visit */
.strip.enter .col{animation:fadeUp .32s var(--ease-out) both;animation-delay:calc(var(--k) * 18ms)}

/* editor: new steps and nights arrive, reordered steps swap places */
.step-ed.just,.sess-ed.just{animation:fadeUp .3s var(--ease-out)}
.step-ed.mv-up{animation:mvUp .32s var(--ease-out)}
.step-ed.mv-down{animation:mvDown .32s var(--ease-out)}
@keyframes mvUp{from{transform:translateY(calc(100% + 6px))}}
@keyframes mvDown{from{transform:translateY(calc(-100% - 6px))}}

/* toast */
.toast.show{animation:toastIn .34s var(--ease-out)}
.toast.out{animation:toastOut .18s var(--ease-in) forwards}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,8px)}}

/* camera: the frame settles in; the shutter flashes */
.camera:not([hidden]){animation:fadeIn .22s ease}
.camera:not([hidden]) .cam-frame{animation:camIn .42s var(--ease-out)}
.cam-frame.flash::after{content:"";position:absolute;inset:0;background:#fff;pointer-events:none;animation:flash .42s ease-out forwards}
.cam-bot{animation:fadeIn .2s ease}
@keyframes camIn{from{opacity:0;transform:scale(.95)}}
@keyframes flash{from{opacity:.9}to{opacity:0}}

/* photo viewer (fallback entrance when it cannot grow from the thumbnail) */
.viewer:not([hidden]){animation:fadeUp .3s var(--ease-out)}
.vt-on .viewer{animation:none!important}

/* sign-in */
.gate:not([hidden]) form{animation:fadeUp .6s var(--ease-out)}
.gate form.shake{animation:shake .36s ease}
@keyframes shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}

/* Reduce Motion: no travel, no sweep. Fades and colour changes stay so
   every action is still acknowledged. */
@media (prefers-reduced-motion: reduce){
  .now.sweep::after{display:none}
  @keyframes bandIn{from{opacity:0}}
  @keyframes fadeUp{from{opacity:0}}
  @keyframes inRight{from{opacity:0}}
  @keyframes inLeft{from{opacity:0}}
  @keyframes tickPop{from{opacity:.4}}
  @keyframes chipIn{from{opacity:.6}}
  @keyframes selIn{from{opacity:.6}}
  @keyframes mvUp{from{opacity:.4}}
  @keyframes mvDown{from{opacity:.4}}
  @keyframes camIn{from{opacity:0}}
  @keyframes shake{from{opacity:1}}
  @keyframes toastIn{from{opacity:0}}
  .strip.enter .col{animation-delay:0s}
  .row:active,.hist button:active,.thumb:active,.opt:active,.cell:active,.chip:active,.seg button:active,.swatches button:active,.stepper button:active,.tabbar button:active svg{transform:none}
  .no-vt .tab-ind{transition:opacity .2s}
}