/* ==========================================================
   PLAYA PACK — light, compact, colourful.
   Rules: white ground, colour-coded sections, wrapping filters
   (never sideways scrolling), centred dialogs, no big empty hero.
   ========================================================== */
/* ---------- theme tokens ----------
   Dark is the default. Light is available for daylight, which is
   the condition this app is actually used in.
   ----------------------------------- */
:root{
  --page:#0A0A0C;
  --bg:#141417;
  --surface:#1C1C21;
  --surface2:#24242B;
  --edge:#2C2C34;
  --edge2:#232329;

  --ink:#F2F2F4;
  --ink2:#A8A8B3;
  --ink3:#8A8A96;

  --buy:#F9A8D4;   --buy-t:#291320;   --buy-b:#B86E96;
  --pack:#A5C0FF;  --pack-t:#131A2E;  --pack-b:#7387C4;
  --load:#7DE8B8;  --load-t:#0B2318;  --load-b:#4EA97F;
  --pink:#F0ABFC;  --pink-t:#26102A;
  --teal:#7DD8F0;  --teal-t:#0A2129;
  --amber:#FDE1A0; --amber-t:#2A2210;
  --none:#3A3A44;  --none-t:#24242B;

  --on-accent:#0A0A0C;
  --brand:#C4B5FD;
  --grad:linear-gradient(120deg,#C4B5FD 0%,#F9A8D4 50%,#FDE1A0 100%);
  --r:.9rem;
  --card-r:1.15rem;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-l:0 2px 8px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.4);
  --nav:3.9rem;
  --gut:1rem;
  color-scheme:dark;
}

[data-theme="light"]{
  --page:#F5F6FA;
  --bg:#FFFFFF;
  --surface:#F5F6FA;
  --surface2:#EDEFF5;
  --edge:#E6E9F0;
  --edge2:#F0F2F7;

  --ink:#151823;
  --ink2:#5A6175;
  --ink3:#666E80;

  --buy:#BE185D;   --buy-t:#FCE8F1;   --buy-b:#E393B9;
  --pack:#4F46E5;  --pack-t:#ECEBFD;  --pack-b:#9B96EE;
  --load:#0F766E;  --load-t:#E1F4F1;  --load-b:#6FBDB4;
  --pink:#A21CAF;  --pink-t:#F9E8FB;
  --teal:#0E7490;  --teal-t:#E4F3F8;
  --amber:#92400E; --amber-t:#FDF3E7;
  --none:#C3C8D4;  --none-t:#EDEFF5;

  --on-accent:#FFFFFF;
  --brand:#6D28D9;
  --grad:linear-gradient(120deg,#6366F1 0%,#EC4899 55%,#F59E0B 100%);
  --shadow:0 1px 2px rgba(21,24,35,.05), 0 1px 3px rgba(21,24,35,.04);
  --shadow-l:0 2px 6px rgba(21,24,35,.06), 0 8px 20px rgba(21,24,35,.05);
  color-scheme:light;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
    "Helvetica Neue",system-ui,sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:contain;
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--pack)}
:focus-visible{outline:2px solid var(--pack);outline-offset:2px;border-radius:4px}
.wrap{max-width:40rem;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--brand);color:var(--on-accent);padding:.6rem .9rem;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* type */
h1{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0}
h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0}
h2.sec{font-size:.95rem;font-weight:700;margin:0 0 .6rem}
h3,.blk{font-size:1rem;font-weight:700;margin:0 0 .35rem;letter-spacing:-.01em}
.eyebrow{font-size:.72rem;font-weight:600;color:var(--ink3);margin:0;letter-spacing:0;text-transform:none}
.muted{color:var(--ink2);font-size:.875rem;line-height:1.55}
.sub{color:var(--ink2);font-size:.9rem;line-height:1.55;margin:.4rem 0 0}
.center{text-align:center}

/* header — compact, one line */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--page) 92%, transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge);padding-top:env(safe-area-inset-top)}
header .bar{height:3px;background:linear-gradient(90deg,var(--buy) 0 33%,var(--pack) 33% 66%,var(--load) 66% 100%)}
.hd{display:flex;align-items:center;gap:.6rem;padding:.6rem 0}
.mark{width:1.5rem;height:1.5rem;flex-shrink:0}
.hd .who{flex:1;min-width:0}
.hd .who .eyebrow{display:block;font-size:.7rem;line-height:1.2}
.hd .who strong{font-size:.95rem;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#save{font-size:.7rem;color:var(--ink3);white-space:nowrap}
.lab{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink2);font-weight:600;margin-bottom:.3rem}
.bar{height:4px;background:var(--surface2);border-radius:99px;overflow:hidden}
.bar span,.bar i{display:block;height:100%;border-radius:99px;transition:width .3s ease}

/* bottom nav */
nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:color-mix(in srgb, var(--page) 95%, transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--edge);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 12px rgba(0,0,0,.25)}
nav ul{display:flex;max-width:40rem;margin:0 auto;padding:0;list-style:none}
nav li{flex:1;min-width:0;display:flex;list-style:none}
nav li::marker{content:none}
nav button{flex:1;min-width:0;padding:.5rem .1rem .55rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  color:var(--ink3);font-size:.68rem;font-weight:600}
nav button svg{width:1.3rem;height:1.3rem;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav button[aria-current=page]{color:var(--brand)}
main{padding:1rem 0 2rem}
#vtitle{outline:none}



/* blocks */
.panel{background:var(--bg);border:1px solid var(--edge);border-radius:var(--r);padding:.95rem;margin-bottom:.85rem}
.card{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.card>*+*{border-top:1px solid var(--edge2)}
.step{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.75rem;
  color:var(--ink3);font-weight:600;margin:0 0 .7rem}
.dots{display:flex;gap:.25rem}
.dots span{width:.35rem;height:.35rem;border-radius:50%;background:var(--edge);display:block}
.dots span.on{background:var(--ink3)}
.dots span.now{background:var(--brand);width:1rem;border-radius:99px}
.phase{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem}
.phase i{width:3px;align-self:stretch;background:var(--brand);border-radius:2px;flex-shrink:0}
.phase .n{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.phase .d{font-size:.85rem;color:var(--ink2);line-height:1.5;margin-top:.1rem}
.hint{font-size:.85rem;color:var(--ink2);line-height:1.5}
.tickbox{width:1.4rem;height:1.4rem;border-radius:.4rem;border:1.5px solid var(--edge);flex-shrink:0;
  display:grid;place-items:center;font-size:.75rem;color:var(--on-accent);font-weight:700}

/* controls — filters WRAP, never scroll sideways */
.search{width:100%;padding:.6rem .75rem;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--edge);font-size:.95rem;margin-bottom:.6rem}
.search::placeholder{color:var(--ink3)}
.search:focus{outline:none;border-color:var(--pack);background:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;padding-bottom:.7rem;overflow:visible}
.chip{white-space:nowrap;border-radius:99px;font-weight:600;
  color:var(--ink2);border:1px solid var(--edge);background:var(--bg)}
.chip:hover{border-color:var(--ink3)}
.chip b{font-weight:800;margin-left:.2rem}
.chip[aria-pressed=true]{background:var(--grad);color:var(--on-accent);border-color:transparent}
.chip.done[aria-pressed=true]{background:var(--load);border-color:var(--load)}
.seg{display:flex;gap:.25rem;background:var(--surface2);border:none;border-radius:var(--r);padding:.2rem;margin-bottom:.8rem}
.seg button{flex:1;padding:.5rem .3rem;border-radius:.45rem;font-size:.85rem;font-weight:600;color:var(--ink2)}
.seg button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}

.filterbar{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;margin-bottom:.75rem;
  border:1px solid var(--edge);border-radius:var(--r);background:var(--surface);font-size:.85rem}
.filterbar span{color:var(--ink2);font-weight:500}
.filterbar b{font-size:1rem;font-weight:800}
.filterbar button{margin-left:auto;color:var(--pack);font-size:.8rem;font-weight:600}

/* groups */
.grp{border:1px solid var(--edge);border-radius:var(--r);background:var(--bg);margin-bottom:.55rem;overflow:hidden}
.grp summary{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;cursor:pointer;list-style:none}
.grp summary::-webkit-details-marker{display:none}
.grp summary:hover{background:var(--surface)}
.gn{font-size:.925rem;font-weight:700;letter-spacing:-.01em;flex:1}
.gc{font-size:.75rem;color:var(--ink3);white-space:nowrap;font-weight:500}
.chev{width:1rem;height:1rem;stroke:var(--ink3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.grp[open] .chev{transform:rotate(180deg)}
.grp .inner>*+*{border-top:1px solid var(--edge2)}
.donewrap{margin-top:1.25rem}
.donewrap .grp{background:var(--surface)}
.donewrap .gn{color:var(--ink2)}
.donewrap .item .name{color:var(--ink3);text-decoration:line-through}

/* items */
.item{padding:.75rem .85rem}
.item .top{display:flex;gap:.5rem;align-items:flex-start}
.title-btn{flex:1;text-align:left;min-width:0;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.name{font-size:.925rem;font-weight:600;line-height:1.4}
.prio{font-size:.68rem;font-weight:700;padding:.05rem .3rem;border-radius:.25rem;border:none}
.prio.Must{color:var(--buy);background:var(--buy-t)}
.prio.Nice{color:var(--ink2);background:var(--surface2)}
.prio.Optional{color:var(--ink3);background:var(--surface2)}
.iconbtn{color:var(--ink3);font-size:1.15rem;line-height:1;padding:0 .2rem}
.iconbtn:hover{color:var(--ink)}
.qty{display:flex;align-items:center;border:1px solid var(--edge);border-radius:.45rem;overflow:hidden;flex-shrink:0;background:var(--bg)}
.qty button{width:1.85rem;height:1.9rem;font-size:1rem;color:var(--ink2)}
.qty button:hover{background:var(--surface2);color:var(--ink)}
.qty input{width:2.1rem;height:1.9rem;text-align:center;background:none;border:none;font-size:.85rem;font-weight:700;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stages{display:flex;gap:.35rem;margin-top:.5rem;align-items:center}
.seg button svg{width:18px;height:18px;vertical-align:middle}
.filterbar svg{width:16px;height:16px;vertical-align:middle}
.top .iconbtn{opacity:.45}
.top .iconbtn:hover{opacity:1}
.stage{flex:1;padding:.45rem .2rem .35rem;border-radius:.45rem;font-weight:600;
  color:var(--ink2);border:1px solid var(--edge);background:var(--bg);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}
.stage:hover{background:var(--surface)}
.stage svg{width:18px;height:18px}
.stage .st-l{font-size:.62rem;letter-spacing:.02em}
.stage .st-t{position:absolute;top:.15rem;right:.3rem;font-size:.7rem;line-height:1}
.stage[aria-pressed=true]{color:var(--on-accent);border-color:transparent}
.stage.buy[aria-pressed=true]{background:var(--buy)}
.stage.pack[aria-pressed=true]{background:var(--pack)}
.stage.load[aria-pressed=true]{background:var(--load)}
.stage.ownt{flex:.8}
.stage.ownt[aria-pressed=true]{background:var(--teal)}
.detail{display:flex;align-items:center;gap:.45rem;margin-top:.4rem}
.tick{width:3px;align-self:stretch;border-radius:2px;flex-shrink:0}
.detail input{flex:1;padding:.45rem .55rem;border-radius:.45rem;font-size:.85rem;background:var(--surface);border:1px solid var(--edge)}
.detail input:focus{outline:none;border-color:var(--pack);background:var(--bg)}
.why{margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--edge2);font-size:.85rem;color:var(--ink2);line-height:1.55}
.why .whereline{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;font-weight:600;color:var(--ink)}
.why .whereline svg{width:14px;height:14px;flex-shrink:0}
.title-btn .chev.info{width:16px;height:16px;flex-shrink:0;margin-left:auto;opacity:.55;transition:transform .15s}
.title-btn[aria-expanded=true] .chev.info{transform:rotate(180deg)}

.btn-danger{color:#F87171;border:1px solid var(--edge)}
[data-theme="light"] .btn-danger{color:#B91C1C}

/* duties: actions with one circle, visually apart from gear cards */
.duty{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;flex-wrap:wrap}
.duty .duty-t{flex-shrink:0;display:grid;place-items:center}
.duty .duty-c{width:1.8rem;height:1.8rem;border-radius:50%;border:1.5px solid var(--edge);
  display:grid;place-items:center;font-size:.95rem;font-weight:700;background:var(--bg);color:var(--on-accent)}
.duty.done .duty-c{background:var(--load);border-color:transparent}
.duty.done .name{color:var(--ink3);text-decoration:line-through;text-decoration-thickness:1px}
.duty .title-btn{flex:1;min-width:0}
.duty .why{flex-basis:100%;margin-top:.2rem}

/* walkthrough */
.tour{position:fixed;inset:0;z-index:70;pointer-events:none}
.tour-card{pointer-events:auto;position:absolute;left:1rem;right:1rem;max-width:26rem;margin:0 auto;
  background:var(--bg);border:1px solid var(--edge);border-radius:var(--card-r);padding:1rem 1rem .9rem;box-shadow:var(--shadow-l)}
.tour-card h3{margin:.1rem 0 .3rem}
.tour-card p.muted{margin:0 0 .8rem}
.tour-hi{position:relative;z-index:69;border-radius:.6rem;
  box-shadow:0 0 0 3px var(--brand),0 0 0 9999px rgba(0,0,0,.55)!important}
.done .name{color:var(--ink3)}

/* browse */
.browse{display:flex;width:100%;text-align:left;gap:.65rem;padding:.75rem .85rem;align-items:flex-start}
.browse:hover{background:var(--surface)}
.box{width:1.2rem;height:1.2rem;border-radius:.35rem;flex-shrink:0;margin-top:.1rem;
  border:1.5px solid var(--edge);display:grid;place-items:center;color:var(--on-accent);font-size:.72rem;font-weight:800}
.browse[aria-pressed=true] .box{background:var(--load);border-color:var(--load)}
.note{display:block;font-size:.82rem;color:var(--ink2);line-height:1.5;margin-top:.2rem}

/* forms + buttons */
.field{margin-bottom:.75rem}
.field label{display:block;margin-bottom:.25rem}
.field input,.field select,.field textarea{width:100%;padding:.6rem .7rem;border-radius:var(--r);
  background:var(--bg);border:1px solid var(--edge);font-size:.95rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--pack)}
.field textarea{min-height:3.75rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  border-radius:var(--r);font-weight:700;border:1px solid transparent}
.btn-p{background:var(--grad);color:var(--on-accent)}
.btn-p:hover{filter:brightness(1.08)}
.btn-c{background:var(--pack);color:var(--on-accent)}
.btn-g{border-color:var(--edge);color:var(--ink);background:var(--bg)}
.btn-g:hover{background:var(--surface)}
.btn-full{width:100%}
.linkbtn{color:var(--ink2);font-size:.875rem;font-weight:600;padding:.65rem .4rem}
.row2{display:flex;gap:.45rem;flex-wrap:wrap}
.empty{text-align:center;padding:1.75rem 1rem;border:1px dashed var(--edge);border-radius:var(--r);background:var(--surface)}
.empty p{color:var(--ink2);font-size:.9rem;line-height:1.55;max-width:24rem;margin:0 auto .9rem}

/* profile */
.plate{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin-bottom:.85rem;background:var(--bg)}
.plate .strip{height:3px;padding:0;margin:0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,var(--buy),var(--pack),var(--load))}
.plate .body{padding:.95rem}
.pn{font-size:1.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:.1rem 0 .25rem}
.addr{font-size:.85rem;color:var(--pack);font-weight:600}
.plate .sub{font-size:.85rem;margin-top:.35rem}

/* people */
.person{display:flex;gap:.7rem;padding:.75rem .85rem;align-items:center;width:100%;text-align:left}
.person:hover{background:var(--surface)}
.av{width:2.2rem;height:2.2rem;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-weight:800;font-size:.8rem;color:var(--on-accent)}
.person .nm{font-size:.925rem;font-weight:700}
.person .dt{font-size:.8rem;color:var(--ink2);margin-top:.05rem;line-height:1.4;display:block}
.tag{display:inline-block;font-size:.68rem;font-weight:700;color:var(--pack);background:var(--pack-t);
  border-radius:.25rem;padding:.05rem .3rem;margin-top:.25rem;border:none}

/* templates */
.tpl{padding:.85rem;width:100%;text-align:left;display:block}
.tpl:hover{background:var(--surface)}
.tpl .nm{font-size:.95rem;font-weight:700;display:block}
.tpl .by{font-size:.78rem;color:var(--pack);font-weight:600;display:block;margin-top:.05rem}
.tpl .ds{font-size:.83rem;color:var(--ink2);display:block;margin-top:.25rem;line-height:1.5}
.tpl .ct{font-size:.78rem;color:var(--ink3);display:block;margin-top:.35rem;font-weight:500}
code.share{display:block;word-break:break-all;font-size:.72rem;font-family:ui-monospace,Menlo,monospace;
  background:var(--surface2);border:1px solid var(--edge);border-radius:.45rem;padding:.6rem;
  color:var(--ink2);max-height:6rem;overflow-y:auto;margin-bottom:.6rem}

/* principles */
.prin{display:flex;gap:.7rem;padding:.7rem .85rem;align-items:flex-start}
.prin b{font-size:.8rem;font-weight:800;color:var(--brand);min-width:1.3rem;padding-top:.1rem}
.prin .t{font-size:.925rem;font-weight:700}
.prin .d{font-size:.85rem;color:var(--ink2);margin-top:.05rem;line-height:1.5}

/* dialog — centred, never a bottom sheet */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:var(--gut)}
.modal .sheet{background:var(--bg);border:1px solid var(--edge);border-radius:.85rem;width:100%;
  max-width:26rem;max-height:82vh;overflow-y:auto;padding:1.1rem;box-shadow:var(--shadow-l)}
.modal .sheet>.blk{margin-bottom:.8rem}
.grip{display:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav) + .9rem + env(safe-area-inset-bottom));
  background:var(--surface2);color:var(--ink);border:1px solid var(--edge);padding:.55rem 1rem;border-radius:99px;font-size:.85rem;font-weight:600;z-index:60}

/* onboarding — compact, scrolls normally, skippable */
#ob,.ob{position:fixed;inset:0;z-index:70;background:var(--bg);overflow-y:auto}
.ob[hidden]{display:none}
#ob .in{max-width:28rem;margin:0 auto;min-height:0;display:block;
  padding:calc(env(safe-area-inset-top) + 1.25rem) var(--gut) calc(env(safe-area-inset-bottom) + 1.5rem)}
#ob h2{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:.35rem 0 0;outline:none}
#ob .sub{font-size:.9rem}
.opts{display:flex;flex-direction:column;gap:.4rem;margin-top:.9rem}
.opts.row{flex-direction:row;flex-wrap:wrap}
.opts.row .opt{flex:1 1 7.5rem}
.opt{display:flex;gap:.55rem;align-items:flex-start;text-align:left;padding:.7rem .8rem;
  border:1px solid var(--edge);border-radius:var(--r);background:var(--bg);width:100%}
.opt:hover{background:var(--surface)}
.opt[aria-pressed=true]{border-color:var(--brand);background:var(--buy-t)}
.mk{width:1.05rem;height:1.05rem;border-radius:50%;border:1.5px solid var(--edge);flex-shrink:0;
  display:grid;place-items:center;font-size:.68rem;font-weight:800;color:var(--on-accent);margin-top:.1rem}
.opt[aria-pressed=true] .mk{background:var(--brand);border-color:var(--brand)}
.opt.multi .mk{border-radius:.3rem}
.ot{font-size:.925rem;font-weight:600;display:block;line-height:1.35}
.od{font-size:.82rem;color:var(--ink2);display:block;margin-top:.1rem;line-height:1.45}
#ob .foot{display:flex;gap:.45rem;align-items:center;margin-top:1.25rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================
   DASHBOARD LAYER — cards on a tinted page, bento grid,
   KPI tiles, donut + legend, horizontal bars, status pills.
   ========================================================== */

/* page heading */

/* card shell */
.card{background:var(--bg);border:1px solid var(--edge);border-radius:var(--card-r);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:.7rem}
.card.pad{padding:.95rem}
.card>*+*{border-top:none}
.card-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem}

.card-t{font-size:.9rem;font-weight:700;margin:0;flex:1;letter-spacing:-.01em}
.lnk{font-size:.78rem;font-weight:700;color:var(--pack)}

/* status pills */
.pill{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;
  padding:.13rem .45rem;border-radius:99px;white-space:nowrap;line-height:1.35}
.pill.buy{background:var(--buy-t);color:var(--buy)}
.pill.pack{background:var(--pack-t);color:var(--pack)}
.pill.load{background:var(--load-t);color:var(--load)}
.pill.blue{background:var(--pack-t);color:var(--pack)}
.pill.orange{background:var(--buy-t);color:var(--buy)}

/* priority symbols */
.sym{display:inline-block;margin-right:.3rem;font-size:.68rem;line-height:1;vertical-align:.05em}
.sym.Must{color:var(--buy)}.sym.Nice{color:var(--pack)}.sym.Optional{color:var(--ink3)}



/* horizontal bars */

.tr{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.6rem .95rem;
  border-top:1px solid var(--edge2)}
.tr:hover{background:var(--surface)}
.tr-m{flex:1;min-width:0}
.tr-n{font-size:.875rem;font-weight:600;display:block;line-height:1.35}
.tickbox{width:1.35rem;height:1.35rem;border-radius:.4rem;border:1.5px solid var(--edge);flex-shrink:0;
  display:grid;place-items:center;font-size:.7rem;color:transparent;transition:.2s}
.tr:hover .tickbox.buy{border-color:var(--buy);color:var(--buy)}
.tr:hover .tickbox.pack{border-color:var(--pack);color:var(--pack)}
.tr:hover .tickbox.load{border-color:var(--load);color:var(--load)}
.xq{color:var(--ink3);font-weight:600}

/* first-burn card */

/* kanban — always real columns, side by side, never stacked */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;align-items:start}
.col{border:1px solid var(--edge);border-radius:.7rem;background:var(--bg);
  overflow:hidden;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.col-h{display:flex;align-items:center;gap:.25rem;padding:.45rem .4rem;border-bottom:1px solid var(--edge2);
  background:var(--bg);position:sticky;top:0;z-index:1}
.col-d{width:.42rem;height:.42rem;border-radius:50%;flex-shrink:0}
.col.buy .col-d{background:var(--buy)}.col.pack .col-d{background:var(--pack)}
.col.load .col-d{background:var(--load)}.col.done .col-d{background:var(--none)}
.col-n{font-size:.72rem;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-c{font-size:.66rem;font-weight:800;color:var(--ink2);background:var(--surface2);
  border-radius:99px;padding:0 .3rem;flex-shrink:0;font-variant-numeric:tabular-nums}
.col.done .col-n{color:var(--ink2)}
.col-b{padding:.3rem;display:grid;gap:.3rem;background:var(--surface);flex:1;align-content:start}
.col-e{font-size:.8rem;color:var(--ink3);text-align:center;padding:.5rem 0;margin:0}

/* card: whole card is the tap target */
.kc{border:1px solid var(--edge);border-left:2.5px solid var(--edge);border-radius:.45rem;
  padding:.4rem .4rem .3rem;background:var(--bg);display:grid;gap:.25rem;text-align:left;
  box-shadow:var(--shadow);min-width:0;transition:box-shadow .18s,transform .18s}
.kc:hover{box-shadow:var(--shadow-l);transform:translateY(-1px)}
.kc.Must{border-left-color:var(--buy)}.kc.Nice{border-left-color:var(--pack-b)}.kc.Optional{border-left-color:var(--none)}
.kc-done{opacity:.72}
.kc-n{font-size:.72rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.kc-q{display:inline-block;font-size:.62rem;font-weight:800;color:var(--ink2);
  background:var(--surface2);border-radius:.2rem;padding:0 .22rem;margin-top:.15rem}
.pips{display:flex;gap:.1rem}
.pip{width:.5rem;height:.2rem;border-radius:99px;background:var(--surface2);display:block}
.pip.on.buy{background:var(--buy)}.pip.on.pack{background:var(--pack)}.pip.on.load{background:var(--load)}
.kc-w{font-size:.58rem;font-weight:800;color:var(--pack);background:var(--pack-t);
  border-radius:99px;padding:0 .22rem;margin-left:auto;flex-shrink:0}
.board-hint{font-size:.72rem;color:var(--ink3);text-align:center;margin:.6rem 0 0}

/* roomier once there is width */
@media(min-width:26rem){
  .board{gap:.45rem}
  .col-h{padding:.55rem .55rem}
  .col-n{font-size:.78rem}
  .col-b{padding:.4rem;gap:.4rem}
  .kc{padding:.5rem .5rem .4rem;gap:.3rem}
  .kc-n{font-size:.78rem;-webkit-line-clamp:4}
    .pip{width:.7rem}
}
@media(min-width:40rem){
  }

/* matrix list reuses the card, one per row and roomier */
.col-b.flat{padding:0;background:none;gap:.45rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.col-b.flat .kc-n{-webkit-line-clamp:3;font-size:.8rem}
.col-b.flat 
/* matrix */
.mx{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.6rem}
.mxc{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.75rem;
  border-radius:var(--card-r);border:1px solid var(--edge);text-align:left;background:var(--bg);box-shadow:var(--shadow)}
.mxc-n{font-size:.78rem;font-weight:700}
.mxc-v{font-size:1.5rem;font-weight:800;letter-spacing:-.035em;line-height:1.15}
.mxc-d{font-size:.66rem;color:var(--ink3);line-height:1.3}
.mxc.qa{background:var(--buy-t);border-color:var(--buy-b)}.mxc.qa .mxc-v{color:var(--buy)}
.mxc.qb{background:var(--pack-t);border-color:var(--pack-b)}.mxc.qb .mxc-v{color:var(--pack)}
.mxc.qc{background:var(--load-t);border-color:var(--load-b)}.mxc.qc .mxc-v{color:var(--load)}
.mxc.qd{background:var(--surface);border-color:var(--edge)}.mxc.qd .mxc-v{color:var(--ink2)}
.mxc[aria-pressed=true]{box-shadow:0 0 0 2px var(--brand)}
.mx-key{font-size:.72rem;color:var(--ink3);margin:0 0 1rem}
.cnt-pill{font-size:.72rem;font-weight:700;color:var(--ink2);background:var(--surface2);border-radius:99px;padding:.05rem .45rem}

/* surfaces that used to be plain now sit as cards */
.grp{border:1px solid var(--edge);border-radius:var(--card-r);background:var(--bg);
  margin-bottom:.55rem;overflow:hidden;box-shadow:var(--shadow)}
.panel{background:var(--bg);border:1px solid var(--edge);border-radius:var(--card-r);
  padding:.95rem;margin-bottom:.7rem;box-shadow:var(--shadow)}
.plate{border:1px solid var(--edge);border-radius:var(--card-r);box-shadow:var(--shadow)}
.search{background:var(--bg)}
.empty{background:var(--bg);border:1px dashed var(--edge);border-radius:var(--card-r)}
header{background:color-mix(in srgb, var(--page) 92%, transparent)}
h2.sec{margin:1.15rem 0 .55rem;display:flex;align-items:center;gap:.4rem;font-size:.95rem}
h2.sec:first-child{margin-top:0}

/* very narrow phones: tighten so four columns still fit without scrolling */
@media(max-width:22.5rem){
  :root{--gut:.5rem}
  .board{gap:.25rem}
  .col-h{padding:.4rem .3rem;gap:.2rem}
  .col-n{font-size:.68rem}
  .col-c{font-size:.62rem;padding:0 .24rem}
  .col-b{padding:.2rem;gap:.25rem}
  .kc{padding:.3rem .3rem .25rem}
  .kc-n{font-size:.7rem}
  }

/* account + sync */
.acct code{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;background:var(--surface2);
  border-radius:.25rem;padding:.05rem .25rem}
.acct{border-left:3px solid var(--load)}

/* ==========================================================
   MOBILE FIRST
   Assumptions: one thumb, bright sun, dust on the screen,
   possibly gloves. Bigger targets, bigger type, more contrast.
   ========================================================== */

/* every interactive thing clears the 44px comfortable minimum */
button,.chip,.opt,.kc,.tr,.browse,.person,.tpl,.tile,.ct,.ft,.mxc{
  touch-action:manipulation}
.stage{min-height:2.75rem;font-size:.9rem}
.chip{min-height:2.25rem;padding:.5rem .85rem;font-size:.875rem}
.seg button{min-height:2.5rem;font-size:.9rem}
.qty button{width:2.75rem;height:2.75rem;font-size:1.25rem}
.qty input{width:2.75rem;height:2.75rem;font-size:1rem}
.iconbtn{min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center;font-size:1.5rem}
.btn{min-height:2.9rem;font-size:1rem;padding:.75rem 1.15rem}
.linkbtn{min-height:2.9rem;display:inline-flex;align-items:center}
nav button{min-height:3.4rem}
.tickbox{width:1.75rem;height:1.75rem}
.box{width:1.5rem;height:1.5rem;margin-top:.05rem}
summary{min-height:2.9rem}

/* inputs at 16px or iOS zooms the page on focus */
input,select,textarea,.search,.field input,.field select,.field textarea,.detail input{font-size:16px}

/* readable in daylight */
.name,.kc-n,.tr-n{font-size:1rem;line-height:1.4}
.note,.muted,.hint{font-size:.9rem}
.item{padding:1rem .9rem}
.tr{padding:.85rem .9rem}
.browse{padding:1rem .9rem;gap:.85rem}

/* respect the notch and the home indicator */
main{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.wrap{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}

/* stop iOS rubber-banding the whole page behind the fixed nav */
html,body{overscroll-behavior:none}

/* native-feeling press states, since there is no hover on a phone */
@media (hover:none){
  .kc:hover,.tr:hover,.browse:hover,.person:hover,.tpl:hover,.chip:hover,
  .grp summary:hover,.tile:hover{background:inherit;box-shadow:var(--shadow)}
  .kc:active{transform:scale(.98);box-shadow:var(--shadow)}
  .tr:active,.browse:active,.person:active,.tpl:active,  .btn:active,.stage:active,.chip:active{filter:brightness(.94)}
  .ct:active,.ft:active,.mxc:active{background:var(--surface2)}
}

/* the board: one comfortable column on a phone, all four side by side
   once the screen can actually hold them */
.board-switch{display:flex;gap:.3rem;margin-bottom:.75rem;
  background:var(--surface2);border-radius:.7rem;padding:.25rem}
.board-switch button{flex:1;min-height:2.6rem;border-radius:.5rem;font-size:.85rem;font-weight:700;
  color:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;line-height:1.1}
.board-switch button .n{font-size:1rem;font-weight:800}
.board-switch button[aria-pressed=true]{background:var(--bg);box-shadow:var(--shadow)}
.board-switch button[aria-pressed=true].buy{color:var(--buy)}
.board-switch button[aria-pressed=true].pack{color:var(--pack)}
.board-switch button[aria-pressed=true].load{color:var(--load)}
.board-switch button[aria-pressed=true].done{color:var(--ink)}

.board{display:grid;grid-template-columns:1fr;gap:.5rem;align-items:start}
.col{display:none}
.col.show{display:flex}
.col-h{display:none}
.col-b{padding:0;background:none;gap:.5rem}
/* minimal card: one line of text and a progress rail */
.kc{padding:.7rem .75rem;gap:.4rem;border-left-width:4px;border-radius:.6rem;
  display:grid;min-height:3rem;align-content:center}
.kc-r{display:flex;align-items:center;gap:.4rem;min-width:0}
.kc-n{font-size:.95rem;font-weight:500;line-height:1.3;flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kc-q{font-size:.75rem;font-weight:800;color:var(--ink2);background:var(--surface2);
  border-radius:99px;padding:.05rem .4rem;flex-shrink:0}
.kc-q::before{content:"\00d7"}
.kc-w{font-size:.68rem;font-weight:800;color:var(--pack);background:var(--pack-t);
  border-radius:99px;padding:.1rem .35rem;flex-shrink:0;letter-spacing:.02em}
.pips{display:flex;gap:.2rem;margin:0}
.pip{width:100%;height:.2rem;border-radius:99px;flex:1}

@media(min-width:45rem){
  .board-switch{display:none}
  .board{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
  .col{display:flex!important;border:1px solid var(--edge);border-radius:.8rem;
    background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
  .col-h{display:flex}
  .col-b{padding:.45rem;background:var(--surface);gap:.45rem}
  .kc{padding:.5rem .55rem;border-radius:.5rem;min-height:2.6rem}
  .kc-n{font-size:.8rem;-webkit-line-clamp:3}
  .kc-r{flex-wrap:wrap;gap:.3rem}
}

/* ==========================================================
   SPLIT · PRINT · MODES
   ========================================================== */

/* people picker in the split sheet */
.who-pick{display:grid;gap:.35rem}
.wp{display:flex;align-items:center;gap:.65rem;padding:.7rem .75rem;border:1px solid var(--edge);
  border-radius:var(--r);background:var(--bg);cursor:pointer;min-height:2.9rem}
.wp input,.wp-c{width:1.2rem;height:1.2rem;accent-color:var(--brand);flex-shrink:0;margin:0}
.wp-n{font-size:.95rem;font-weight:500}

/* who-has-what bars */
.splitbars{display:grid;gap:.45rem}
.sb{display:grid;grid-template-columns:1.7rem 5.5rem 1fr 1.6rem;align-items:center;gap:.5rem;
  text-align:left;min-height:2.5rem}
.sb-a{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  font-size:.68rem;font-weight:800;color:var(--on-accent)}
.sb-n{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-t{height:.55rem;background:var(--surface2);border-radius:99px;overflow:hidden}
.sb-t i{display:block;height:100%;border-radius:99px;background:var(--pack-b);transition:width .4s ease}
.sb-v{font-size:.8rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* mode + playa screens */

/* playa mode runs warmer and larger, for sun and dust */

/* ==========================================================
   PRINTING THE APP ITSELF — if someone hits Cmd-P on the page
   rather than using the printable checklist, give them
   something sane instead of a screenshot of the interface.
   ========================================================== */
@media print{
  /* paper is always light, whatever theme the screen is using */
  :root,[data-theme="dark"],[data-theme="light"]{
    --page:#fff;--bg:#fff;--surface:#fff;--surface2:#f2f2f2;
    --edge:#ccc;--edge2:#e2e2e2;
    --ink:#000;--ink2:#333;--ink3:#555;--none:#bbb;
    --buy:#000;--pack:#000;--load:#000;
    --buy-t:#fff;--pack-t:#fff;--load-t:#fff;--on-accent:#fff;
    --shadow:none;--shadow-l:none;
  }
  @page{margin:14mm}
  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  header,nav,.board-switch,.chips,.seg,.filterbar,.search,.ftiles,.strip,.themes,
  .bento,.tile,.catgrid,.iconbtn,.btn,.linkbtn,.toast,.modal,#ob,
  .stage,.qty,.board-hint,.skip,.acct,.tile-a,
  .sec-h .lnk,.br-q{display:none!important}
  main{padding:0!important}
  .wrap{max-width:none;padding:0!important}
  .card,.grp,.panel{border:none!important;box-shadow:none!important;background:#fff!important;
    margin:0 0 6pt!important;border-radius:0!important}
  .grp .inner{display:block!important}
  .item{padding:3pt 0!important;border-bottom:1px solid #ddd;break-inside:avoid}
  .name{font-size:11pt!important}
  .gn{font-size:12pt;font-weight:700;border-bottom:1px solid #999;padding-bottom:2pt;
    break-after:avoid;page-break-after:avoid}
  .why,.note{color:#555!important;font-size:9pt!important}
  details{display:block!important}
  details>summary{list-style:none}
  .item::before{content:"\\2610";margin-right:6pt;font-size:12pt;vertical-align:-1pt}
  a[href]::after{content:""}
}

/* ==========================================================
   BENTO TILES — modular containers, big values, few words.
   Structure borrowed from GridX; palette stays light.
   ========================================================== */
.ic{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.bento{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:1rem}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.9rem;border-radius:1rem;border:1px solid var(--edge);background:var(--bg);
  box-shadow:var(--shadow);text-align:left;min-height:6.5rem;overflow:hidden;
  transition:transform .15s,box-shadow .15s}
.tile.sp2{grid-column:1/-1}
.tile:active{transform:scale(.985)}
.tile-i{width:2.3rem;height:2.3rem;border-radius:.7rem;display:grid;place-items:center;margin-bottom:.35rem}
.tile-i .ic{width:1.3rem;height:1.3rem}
.tile-e{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.tile-v{font-size:1.65rem;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-top:.05rem}
.tile-l{font-size:.8rem;color:var(--ink2);line-height:1.35}
.tile-s{width:100%;margin-top:auto;padding-top:.5rem}
.tile-a{position:absolute;top:.7rem;right:.7rem;width:1.7rem;height:1.7rem;border-radius:50%;
  border:1px solid var(--edge);display:grid;place-items:center;color:var(--ink3)}
.tile-a .ic{width:.85rem;height:.85rem;stroke-width:2}
.tile:active .tile-a{background:var(--brand);border-color:var(--brand);color:var(--on-accent)}

.tile.t-buy{background:var(--buy-t);border-color:var(--buy-b)}
.tile.t-buy .tile-i{background:var(--buy);color:var(--on-accent)}
.tile.t-buy .tile-v{color:var(--buy)}
.tile.t-pack{background:var(--pack-t);border-color:var(--pack-b)}
.tile.t-pack .tile-i{background:var(--pack);color:var(--on-accent)}
.tile.t-pack .tile-v{color:var(--pack)}
.tile.t-load{background:var(--load-t);border-color:var(--load-b)}
.tile.t-load .tile-i{background:var(--load);color:var(--on-accent)}
.tile.t-load .tile-v{color:var(--load)}
.tile.t-grey{background:var(--bg)}
.tile.t-grey .tile-i{background:var(--surface2);color:var(--ink2)}

.mini{display:block;height:.3rem;background:rgba(21,24,35,.09);border-radius:99px;overflow:hidden}
.mini i{display:block;height:100%;border-radius:99px}
.mini i.buy{background:var(--buy)}.mini i.pack{background:var(--pack)}.mini i.load{background:var(--load)}

.ring{width:100%;height:100%;display:block}
.ring circle{transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}

/* hero tile */
.hero-t{background:linear-gradient(135deg,var(--buy-t) 0%,var(--pack-t) 55%,var(--load-t) 100%);
  border-color:var(--edge);min-height:8rem}
.hero-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.75rem;margin-top:.2rem}
.hero-n{font-size:3.1rem;font-weight:800;letter-spacing:-.045em;line-height:1;display:block}
.hero-l{font-size:.8rem;color:var(--ink2);display:block;margin-top:.1rem}
.hero-r{position:relative;width:4.2rem;height:4.2rem;flex-shrink:0}
.hero-r .ring-in{position:absolute;inset:0;display:grid;place-items:center}
.hero-r .ring-in b{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.hero-r .ring-in b i{font-size:.62rem;font-style:normal}

/* static status strip */
.strip{display:flex;align-items:center;gap:.5rem;padding:.8rem .95rem;margin-bottom:.7rem;width:100%;
  background:var(--grad);color:var(--on-accent);border:none;border-radius:var(--card-r);font-size:.85rem;font-weight:600;
  overflow:hidden;white-space:nowrap;box-shadow:var(--shadow)}
.strip-b{display:flex;align-items:center;gap:.35rem;font-weight:800}
.strip .ic{width:.95rem;height:.95rem}
.strip-d{opacity:.5}
.strip-go{margin-left:auto;font-size:1.1rem;font-weight:800}

/* section headers with icons */
.sec-h{display:flex;align-items:center;gap:.45rem;margin:1.15rem 0 .55rem}
.sec-h .ic{width:1.05rem;height:1.05rem;color:var(--ink3)}
.sec-h .sec{margin:0;flex:1;font-size:.95rem;font-weight:700}
.sec-h .lnk{display:flex;align-items:center;gap:.15rem}
.sec-h .lnk .ic{width:.85rem;height:.85rem;color:inherit}

/* category tiles */
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.4rem}
.ct{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:.15rem .55rem;padding:.7rem;border-radius:.8rem;border:1px solid var(--edge);
  background:var(--bg);box-shadow:var(--shadow);text-align:left;align-items:center}
.ct-i{grid-row:1/3;width:2.1rem;height:2.1rem;border-radius:.6rem;background:var(--surface2);
  display:grid;place-items:center;color:var(--ink2)}
.ct-n{font-size:.8rem;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ct-b{height:.28rem;background:var(--surface2);border-radius:99px;overflow:hidden;align-self:center}
.ct-b i{display:block;height:100%;border-radius:99px}
.ct-b i.buy{background:var(--buy)}.ct-b i.pack{background:var(--pack)}.ct-b i.load{background:var(--load)}
.ct-v{position:absolute;top:.55rem;right:.6rem;font-size:.75rem;font-weight:800;color:var(--ink3)}

/* filter tiles */
.ftiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin-bottom:.6rem}
.ft{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.55rem .2rem;
  border-radius:.7rem;border:1px solid var(--edge);background:var(--bg);min-height:4.1rem;justify-content:center}
.ft .ic{width:1.1rem;height:1.1rem;color:var(--ink3)}
.ft-v{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.ft-l{font-size:.65rem;color:var(--ink3);font-weight:600}
.ft[aria-pressed=true]{border-width:1.5px}
.ft.buy[aria-pressed=true]{background:var(--buy-t);border-color:var(--buy)}
.ft.buy[aria-pressed=true] .ic,.ft.buy[aria-pressed=true] .ft-v{color:var(--buy)}
.ft.pack[aria-pressed=true]{background:var(--pack-t);border-color:var(--pack)}
.ft.pack[aria-pressed=true] .ic,.ft.pack[aria-pressed=true] .ft-v{color:var(--pack)}
.ft.load[aria-pressed=true],.ft.done[aria-pressed=true]{background:var(--load-t);border-color:var(--load)}
.ft.load[aria-pressed=true] .ic,.ft.load[aria-pressed=true] .ft-v,
.ft.done[aria-pressed=true] .ic,.ft.done[aria-pressed=true] .ft-v{color:var(--load)}
.ft.all[aria-pressed=true]{background:var(--grad);border-color:transparent}
.ft.all[aria-pressed=true] .ic,.ft.all[aria-pressed=true] .ft-v,.ft.all[aria-pressed=true] .ft-l{color:var(--on-accent)}

/* icons inside chips, group headers, rows */
.chip{display:inline-flex;align-items:center;gap:.3rem}
.chip .ic{width:.9rem;height:.9rem}
.g-i{width:1.7rem;height:1.7rem;border-radius:.45rem;background:var(--surface2);
  display:grid;place-items:center;color:var(--ink2);flex-shrink:0}
.g-i .ic{width:.95rem;height:.95rem}
.br-i{width:1.6rem;height:1.6rem;border-radius:.4rem;background:var(--surface2);
  display:grid;place-items:center;color:var(--ink3);flex-shrink:0;margin-top:.05rem}
.br-i .ic{width:.9rem;height:.9rem}
.tr-i{width:2rem;height:2rem;border-radius:.55rem;display:grid;place-items:center;flex-shrink:0}
.tr-i .ic{width:1.05rem;height:1.05rem}
.tr-i.buy{background:var(--buy-t);color:var(--buy)}
.tr-i.pack{background:var(--pack-t);color:var(--pack)}
.tr-i.load{background:var(--load-t);color:var(--load)}
.card-h .ic{width:1.05rem;height:1.05rem;color:var(--ink3)}

@media(min-width:34rem){
  .bento{grid-template-columns:repeat(4,1fr)}
  .tile.sp2{grid-column:span 2}
  .catgrid{grid-template-columns:repeat(4,1fr)}
}

/* browse rows: name first, the why behind an info tap */
.br-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.br-t{display:flex;align-items:center;gap:.35rem;min-width:0}
.br-t .name{flex:1;min-width:0}
.br-q{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  color:var(--ink3);flex-shrink:0;border:1px solid transparent}
.br-q.on{background:var(--pack-t);color:var(--pack);border-color:var(--pack-b)}
.br-q .ic{width:1rem;height:1rem}
.browse .prio{display:none}
.kc-i{width:1.4rem;height:1.4rem;border-radius:.35rem;background:var(--surface2);
  display:grid;place-items:center;color:var(--ink3);flex-shrink:0}
.kc-i .ic{width:.85rem;height:.85rem}

/* theme picker */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.th{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.75rem .3rem;
  border:1px solid var(--edge);border-radius:.7rem;background:var(--bg);min-height:4rem;justify-content:center}
.th .ic{width:1.2rem;height:1.2rem;color:var(--ink3)}
.th-n{font-size:.75rem;font-weight:600;color:var(--ink2)}
.th[aria-pressed=true]{border-color:var(--brand);background:var(--buy-t)}
.th[aria-pressed=true] .ic,.th[aria-pressed=true] .th-n{color:var(--brand)}

/* dark mode needs a touch more separation than light does */
[data-theme="dark"] .card,[data-theme="dark"] .tile,[data-theme="dark"] .ct,
[data-theme="dark"] .grp,[data-theme="dark"] .col,[data-theme="dark"] .kc,
[data-theme="dark"] .ft,[data-theme="dark"] .mxc{border-color:var(--edge)}
[data-theme="dark"] .tile.t-grey,[data-theme="dark"] .th{background:var(--surface)}
[data-theme="dark"] .box,[data-theme="dark"] .tickbox{border-color:var(--none)}
[data-theme="dark"] .search,[data-theme="dark"] .field input,
[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:var(--surface)}
[data-theme="dark"] .col-b{background:var(--surface)}
[data-theme="dark"] .ring circle:first-child{stroke:var(--surface2)}

/* buy plan */
.plan-cap{font-size:.85rem;color:var(--ink2);margin:0 0 .5rem;line-height:1.5}
.plan-sub{font-size:.75rem;color:var(--ink3);margin:-.2rem 0 .5rem}
.pl{display:flex;align-items:flex-start;gap:.55rem;padding:.75rem .8rem;border-top:1px solid var(--edge2)}
.pl:first-child{border-top:none}
.pl-m{flex-shrink:0;padding-top:.1rem}
.pl-m .tickbox{color:transparent}
.pl-m:hover .tickbox,.pl-m:focus-visible .tickbox{border-color:var(--buy);color:var(--buy)}
.pl-i{width:1.9rem;height:1.9rem;border-radius:.5rem;background:var(--surface2);
  display:grid;place-items:center;color:var(--ink2);flex-shrink:0}
.pl-i .ic{width:1rem;height:1rem}
.pl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.pl-n{font-size:.95rem;font-weight:600;line-height:1.35}
.pl-w{display:flex;gap:.3rem;flex-wrap:wrap}
.pill.grey{background:var(--none-t);color:var(--ink2);border:1px solid var(--edge)}

/* the "more categories" fold */
.more{border:1px dashed var(--edge);border-radius:var(--card-r);margin-top:.8rem;overflow:hidden}
.more>summary{display:flex;align-items:center;gap:.55rem;padding:.8rem .85rem;cursor:pointer;list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary .ic{width:1.1rem;height:1.1rem;color:var(--ink3)}
.more-n{font-size:.9rem;font-weight:700;flex:1}
.more[open]>summary{border-bottom:1px dashed var(--edge)}
.more .grp{border-left:none;border-right:none;border-radius:0;margin:0;box-shadow:none}
.more[open] .chev{transform:rotate(180deg)}

/* sign in */
.orline{display:flex;align-items:center;gap:.6rem;margin:.7rem 0;color:var(--ink3);font-size:.75rem}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--edge)}
.btn .ic{width:1.05rem;height:1.05rem}

/* grace: a just-ticked row breathes instead of vanishing */
@keyframes settle{0%{box-shadow:0 0 0 2px var(--load)}100%{box-shadow:0 0 0 0 transparent}}
.item.grace,.kc.grace{animation:settle 1.2s ease-out 1}

/* know before you go: the warning boxes */
.warnbox{border:1px solid var(--edge);border-left:4px solid var(--buy);border-radius:var(--card-r);
  padding:.85rem .95rem;margin:0 0 1rem;background:var(--surface)}
.warnbox.hardstop{border-left-color:#F87171;box-shadow:0 0 0 1px rgba(248,113,113,.25)}
.warn-t{margin:0 0 .35rem;font-weight:800;font-size:.95rem}
.warnbox.hardstop .warn-t{color:#F87171}
.warn-d{margin:0;color:var(--ink2);font-size:.87rem;line-height:1.5}

/* shop near me: a quiet link row inside an open item */
.shopnear{display:flex;align-items:center;gap:.45rem;margin:.55rem .8rem .75rem;padding:.45rem .7rem;
  border:1px dashed var(--edge);border-radius:var(--r);background:none;color:var(--ink2);
  font-size:.82rem;font-weight:600;cursor:pointer}
.shopnear .ic{width:1rem;height:1rem;color:var(--buy)}
.shopnear:hover{border-color:var(--buy);color:var(--ink)}

/* your people */
.dep{border-top:1px solid var(--edge);padding:.55rem 0}
.dep:first-of-type{border-top:none}
.dep-r{display:flex;align-items:center;gap:.6rem}
.dep-r .title-btn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.dep-m{font-size:.78rem;color:var(--ink3)}
.dep-k{font-size:.78rem;padding:.45rem .6rem;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.dep-k .ic{width:.95rem;height:.95rem}

/* the city, schematically */
.brcwrap{margin-bottom:1rem}
.brcmap{display:block;width:100%;height:auto}
.brc-ring{fill:none;stroke:var(--edge);stroke-width:.8}
.brc-spoke{stroke:var(--edge);stroke-width:.6;opacity:.7}
.brc-man{fill:var(--ink3)}
.brc-lbl{fill:var(--ink3);font-size:5px;text-anchor:middle}
.brc-nm{fill:var(--ink);font-size:5.5px;font-weight:700;text-anchor:middle;paint-order:stroke;
  stroke:var(--bg);stroke-width:1.6}
.brc-dot{stroke:var(--bg);stroke-width:1}
.brc-dot.me{stroke:var(--ink);stroke-width:1.2}

/* lock screen maker */
.ls-prev{display:block;width:60%;max-width:190px;height:auto;margin:.2rem auto .9rem;
  border-radius:14px;border:1px solid var(--edge);background:#101018}
.field input[type=color]{padding:.2rem;height:2.6rem;cursor:pointer}
.field input[type=file]{border:1px dashed var(--edge)}