/* Layout: one centered phone-first column. Client flow: areas as cards, then a photo scroll per spot, heart spots, rank two areas. Same tokens as Slam Pose Plans. */
:root{
  --bg:#ffffff; --fg:#151412; --muted:#6e6962; --stone:#f4f2ee; --stone2:#e9e5df; --line:#e2ddd6;
  --ink:#151412; --ink-fg:#ffffff; --good:#3f5a47; --bad:#8a4a3f; --plate:#efece6; --plate2:#dcd6cc;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Manrope", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --body:"Sorts Mill Goudy", Georgia, serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121110; --fg:#f2efea; --muted:#a39d94; --stone:#1b1a18; --stone2:#262421; --line:#2c2925;
  --ink:#f2efea; --ink-fg:#121110; --good:#8fb39a; --bad:#d08b7d; --plate:#1f1d1a; --plate2:#35312c; color-scheme:dark }
  .logo img{filter:invert(1)} }
:root[data-theme="dark"]{
  --bg:#121110; --fg:#f2efea; --muted:#a39d94; --stone:#1b1a18; --stone2:#262421; --line:#2c2925;
  --ink:#f2efea; --ink-fg:#121110; --good:#8fb39a; --bad:#d08b7d; --plate:#1f1d1a; --plate2:#35312c; color-scheme:dark }
:root[data-theme="dark"] .logo img{filter:invert(1)}
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.logo img{height:34px;width:auto;display:block}
.logo{display:block}
.wrap{max-width:560px;margin:0 auto;padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap.wide{max-width:920px}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h1{font-family:var(--serif);font-size:2.4rem;line-height:1.05;letter-spacing:-.01em}
h2{font-family:var(--serif);font-size:1.9rem;line-height:1.1}
h3{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
p{margin:0}
.mark{font-family:var(--sans);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem}
.mark small{display:block;font-weight:500;letter-spacing:.2em;font-size:.62rem;color:var(--muted);margin-top:2px}
.muted{color:var(--muted)}
.serif{font-family:var(--serif)}
.i{font-style:italic}
.sm-t{font-size:.85rem}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.btn{font-family:var(--sans);appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--ink-fg);font:inherit;font-weight:600;padding:14px 20px;border-radius:999px;cursor:pointer;min-height:48px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.sm{padding:9px 14px;min-height:38px;font-size:.9rem}
.btn.danger{color:var(--bad);border-color:var(--bad);background:transparent}
.btn:focus-visible,.acard:focus-visible,.spot:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.ph:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.btn[disabled]{opacity:.45;cursor:default}
input[type=text],textarea,select{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
textarea{min-height:90px;resize:vertical}
label.f{font-family:var(--sans);display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600}
.hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:18px}
.prog{height:2px;background:var(--stone2);border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--fg);width:0;transition:width .3s}
.count{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.card{border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.chip{font-family:var(--sans);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:.8rem;font-weight:600;white-space:nowrap}
.chip.first{border-color:var(--good);color:var(--good)}
.chip.backup{border-color:var(--muted);color:var(--muted)}
.chip.off{opacity:.55}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{font-family:var(--sans);border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:999px;padding:7px 12px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.tab.on{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.code{font-family:var(--sans);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;word-break:break-all;background:var(--stone);border:1px solid var(--line);border-radius:10px;padding:12px;user-select:all}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ink-fg);padding:10px 16px;border-radius:999px;font-size:.85rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.hint{font-family:var(--sans);font-size:.78rem;color:var(--muted);text-align:center}
/* plates and photos */
.plate{position:relative;max-width:100%;border-radius:14px;background:linear-gradient(160deg,var(--plate),var(--plate2));overflow:hidden;display:flex;align-items:flex-end;padding:14px}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate .cap{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:relative}
.plate.has .cap{display:none}
.plate .num{position:absolute;top:-10px;right:10px;font-family:var(--serif);font-style:italic;font-size:6rem;line-height:1;color:var(--fg);opacity:.08;font-variant-numeric:tabular-nums}
.plate.t1{background:linear-gradient(160deg,#ece7df,#cfc6b8)} .plate.t2{background:linear-gradient(160deg,#e4e6e1,#b9c0b4)} .plate.t3{background:linear-gradient(160deg,#ebe3dc,#c9b7ab)} .plate.t4{background:linear-gradient(160deg,#e9e9e7,#b6b6b3)} .plate.t5{background:linear-gradient(160deg,#e6e2d8,#c6b89f)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .plate[class*=" t"]{filter:brightness(.32) saturate(.8)} }
:root[data-theme="dark"] .plate[class*=" t"]{filter:brightness(.32) saturate(.8)}
/* area cards */
.acard{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;background:var(--bg);text-align:left;font:inherit;color:var(--fg);width:100%}
.acard .plate{aspect-ratio:1;border-radius:9px;padding:8px}
.acard .plate .cap{font-size:.55rem}
.acard .t{font-family:var(--serif);font-size:1.35rem;line-height:1.1}
.acard .s{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-top:2px}
.acard .rank{margin-top:6px}
.acard.ranked{border-color:var(--fg);background:var(--stone);box-shadow:0 0 0 1px var(--fg) inset}
.acard .rank .chip{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.card.picks{background:var(--stone);border-color:transparent;gap:8px}
.card.nudge{border-color:var(--good);gap:10px}
.pol{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.88rem}
.pol b{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:4px;font-weight:700;white-space:nowrap}
.pol span{min-width:0}
@media (max-width:420px){.pol{grid-template-columns:1fr;gap:2px 0}.pol span{margin-bottom:8px}}
/* photo scroll */
.scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));padding-bottom:6px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pw{appearance:none;border:0;background:none;padding:0;flex:0 0 auto;width:min(84%, 52vh);max-width:84%;scroll-snap-align:center;position:relative;font:inherit;color:var(--fg);cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left}
.pw .plate{aspect-ratio:4/5;width:100%;max-height:65vh;transition:box-shadow .2s}
.pw.want .plate{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--good)}
.pw .wantlbl{font-family:var(--sans);position:absolute;top:10px;left:10px;z-index:2;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:rgba(255,255,255,.88);color:#151412;border-radius:999px;padding:6px 10px;pointer-events:none}
.pw.want .wantlbl{background:var(--good);color:#fff}
.pw.want .wantlbl::before{content:"\2713  "}
.wantseal{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;opacity:0;background:rgba(63,90,71,.22);color:#fff;z-index:3}
.wantseal svg{width:30%;height:30%;overflow:visible}
.wantseal circle{fill:var(--good);stroke:none}
.wantseal path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.wantseal em{font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;background:var(--good);padding:8px 14px;border-radius:999px}
.pw.sealing .wantseal{animation:seal .9s ease-out both}
.pw.sealing .wantseal path{animation:draw .5s .12s ease-out forwards}
@keyframes seal{0%{opacity:0;transform:scale(.95)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.wishrow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.wishrow::-webkit-scrollbar{display:none}
.wi{font-family:var(--sans);flex:0 0 84px;display:flex;flex-direction:column;gap:4px;font-size:.7rem;color:var(--muted)}
.how{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.light{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.85rem}
.light div{background:var(--stone);border-radius:10px;padding:10px 12px}
.light b{font-family:var(--sans);display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spots{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.spots::-webkit-scrollbar{display:none}
.spot{font-family:var(--sans);flex:0 0 auto;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:999px;padding:8px 14px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.spot.on{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.spot .hv{color:var(--good)} .spot.on .hv{color:var(--ink-fg)}
.scroll > .plate{flex:0 0 auto;width:min(84%, 52vh);aspect-ratio:4/5;scroll-snap-align:center}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem}
.facts b{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:4px;font-weight:700;white-space:nowrap}
.facts span{min-width:0}
.ranks{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:sticky;bottom:0;padding-block:12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.rk{font-family:var(--sans);appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-weight:600;padding:14px 10px;border-radius:14px;min-height:64px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.rk small{font-family:var(--sans);font-weight:500;font-size:.72rem;color:var(--muted)}
.rk b{font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.1;margin-top:2px}
.rk .chk{color:var(--good);margin-right:2px}
.rk.held{opacity:.55;background:var(--stone)}
.rk.on{opacity:1}
.rk.first.on{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)} .rk.first.on small,.rk.first.on .chk{color:var(--ink-fg);opacity:.8}
.rk.backup.on{border-color:var(--fg);background:var(--stone);box-shadow:0 0 0 1px var(--fg) inset}
/* time of day */
.opt{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);cursor:pointer}
.opt:first-child{border-top:0}
.opt input{width:20px;height:20px;accent-color:var(--ink);flex:0 0 auto}
.opt .qt{font-family:var(--sans);font-weight:600;font-size:.95rem}
.opt .ends{font-family:var(--sans);font-size:.8rem;color:var(--muted)}
/* admin */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.ph{position:relative;border:1px solid var(--line);border-radius:12px;padding:6px;cursor:pointer;background:var(--bg);font:inherit;color:var(--fg);text-align:left;display:flex;flex-direction:column;gap:6px;width:100%}
.ph .plate{aspect-ratio:4/5;border-radius:8px;padding:8px}
.ph .plate .cap{font-size:.55rem}
.ph .m{font-family:var(--sans);font-size:.72rem;color:var(--muted);line-height:1.25}
.ph.arch .plate{opacity:.4}
.ph .flag{position:absolute;top:12px;left:12px;background:var(--bg);border:1px solid var(--line);border-radius:999px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;font-weight:700}
.ph.sel{border-color:var(--fg);box-shadow:0 0 0 2px var(--fg) inset}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.two{grid-template-columns:1fr}}
.tog{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.tog:first-child{border-top:0}
.tog input{width:20px;height:20px;accent-color:var(--ink);flex:0 0 auto}
.tog .qt{font-family:var(--sans);font-weight:600;font-size:.95rem}
.tog .ends{font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center;z-index:15;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.sheet .in{background:var(--bg);color:var(--fg);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:14px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.pill-set{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-family:var(--sans);border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:999px;padding:6px 11px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.pill.on{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.li:first-child{border-top:0}
.li .n{font-weight:600;flex:1;min-width:0}
.li .n small{font-family:var(--sans);display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.sub{padding-left:16px}
.enter{animation:enter .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:4px 10px;border:1px solid var(--line)}
.status.done{border-color:var(--good);color:var(--good)} .status.skipped{border-color:var(--muted);color:var(--muted)} .status.pending{border-color:var(--line);color:var(--muted)}
.big{font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--fg);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.pw .plate img{background:var(--plate)}
.uplist{display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:.85rem}
.bar{height:4px;background:var(--stone2);border-radius:2px;overflow:hidden}.bar i{display:block;height:100%;background:var(--fg);width:0;transition:width .2s}