/* Life Laundry - the app's styles. Moved out of app/index.html in build 380
   (review Q5), so the browser keeps them between visits and the page itself
   is a third of the size. Loaded from the same place in the page. */
  :root{
    --cream:#F7F2E7; --paper:#FDFBF5; --coral:#DB8B6B; --coral-deep:#C56E4A;
    --sage:#869F84; --sage-deep:#6E8A6C; --ink:#4A4139; --ink-soft:#7C7063; --ink-line:rgba(74,65,57,.42);
    --gold:#C79A5A; --blue:#7C93A8; --line:rgba(134,159,132,.35);
    --fd:'Fraunces',Georgia,serif; --fb:'Life Laundry Serif',Georgia,serif; --fs:'Dancing Script',cursive;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:#EFE7D6;color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:var(--fd);font-weight:500;margin:0;line-height:1.15;}
  p{margin:0;}
  html,body{height:100%;}
  body{overflow:hidden;overscroll-behavior:none;}
  #app{max-width:460px;margin:0 auto;height:100vh;height:100dvh;background:var(--cream);position:relative;display:flex;flex-direction:column;}
  #scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;}
  .view{display:none;padding:20px 18px 10px;}
  .view.on{display:block;}
  #view-list{padding-bottom:calc(180px + env(safe-area-inset-bottom,0px));}

  .btn{font-family:var(--fb);font-weight:500;background:var(--coral);color:#fff;border:none;border-radius:12px;padding:12px 20px;cursor:pointer;font-size:1rem;transition:background .2s;}
  .btn:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed;}
  .btn:hover{background:var(--coral-deep);}
  .btn.block{width:100%;}
  .btn.sage{background:var(--sage-deep);}
  .btn.sage:hover{background:var(--sage);}
  .btn.small{padding:8px 14px;font-size:.9rem;}
  .btn.ghost{background:transparent;color:var(--sage-deep);border:1px solid var(--line);}
  .rbtns .btn.ghost.del{background:transparent;color:var(--sage-deep);border:1.5px solid var(--sage);border-radius:12px;padding:8px 14px;font-size:.9rem;width:auto;height:auto;display:inline-block;line-height:1.35;opacity:1;}
  .rbtns .btn.ghost.del:hover{background:rgba(134,159,132,.12);color:var(--coral-deep);border-color:var(--sage-deep);}

  /* tab bar */
  .tabbar{flex:0 0 auto;width:100%;min-height:66px;border-top:1px solid var(--line);display:flex;align-items:stretch;background:var(--paper);z-index:30;padding-bottom:env(safe-area-inset-bottom,0px);}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:.72rem;color:var(--ink-soft);cursor:pointer;border:none;background:none;font-family:var(--fb);padding:10px 2px;min-height:66px;-webkit-tap-highlight-color:transparent;}
  .tab svg{width:25px;height:25px;}
  .tab.active{color:var(--coral);}

  /* basket */
  .bhead{text-align:center;margin-bottom:16px;}
  .pagelogo{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 12px;}
  .bhead img{width:104px;height:104px;object-fit:contain;margin:0 auto 12px;display:block;}
  .bhead h2{font-size:1.5rem;color:var(--sage-deep);}
  .bhead h2 .s{color:var(--coral);}
  .sh h2 .s{color:var(--coral);}
  .yhead h2 .s{color:var(--coral);}
  .bhead p{color:var(--ink-soft);font-size:.9rem;margin-top:4px;}
  .adder{display:flex;gap:9px;margin-bottom:8px;}
  .adder input{flex:1;font-family:var(--fb);font-size:1rem;background:var(--paper);border:1px solid var(--ink-line);border-radius:11px;padding:13px 14px;color:var(--ink);}
  /* Build 430 (Kerry chose option D): the hint "What's rattling around your head?" was cut off on phones under
     about 410px wide. Only the hint shrinks, as much as the phone needs (about 13.6px at 390px, 12px at 360px;
     16px from about 430px). What people type stays 16px, so iPhones don't zoom in. */
  .adder input::placeholder{font-size:min(1rem, calc((100vw - 159px) * 0.059));}
  .adder input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(134,159,132,.2);}
  .adder .btn{border-radius:11px;border:1px solid var(--ink-line);}   /* build 368 inked these; 370 softened them (--ink-line: the tags' brown, faded) */
  .meter{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--sage-deep);font-family:var(--fd);font-size:.95rem;margin-bottom:6px;}
  #view-list .meter{margin-bottom:8px;}   /* build 396: was 10px */
  #view-list .legendbar{margin-bottom:12px;}
  #view-list .views2{margin-bottom:18px;}
  .meter svg{width:20px;height:20px;}
  /* Build 369: the basket picture redrawn in the tags' ink (cream, dark outline,
     green weave), a little bigger; on Your Load the number is coral. */
  .meter svg.meter-ink{width:28px;height:25px;}
  #view-list .meter{font-size:1.02rem;}
  .mcount{font-weight:500;color:var(--coral-deep);font-size:1.15em;}
  .meter-icon{width:46px;height:auto;flex:0 0 auto;transition:opacity .3s,filter .3s;}
  .meter-icon.muted{opacity:.4;filter:saturate(.35);}
  .wbar{height:8px;border-radius:99px;background:var(--paper);border:1px solid var(--ink-line);overflow:hidden;margin-bottom:16px;}
  .wbar i{display:block;height:100%;width:0%;background:var(--sage);transition:width .4s,background .4s;}
  .wbar i.heavy{background:var(--coral);}
  .ecard.ishidden{opacity:.72;border-style:dashed;}
  .hidetag{display:inline-block;background:rgba(134,159,132,.16);color:var(--sage-deep);font-size:.72rem;border-radius:99px;padding:3px 10px;margin-bottom:8px;}
  .ttrow{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
  .idot{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:block;}
  .ttrow input{flex:1;}
  /* "keep these safe?" prompt */
  /* build 402 (review #16): the install strip (Kerry: option B - slim, the app icon, Install and x) */
  .instcard{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--ink-line);border-radius:14px;padding:10px 6px 10px 12px;margin:0 0 18px;}
  .instcard img{width:40px;height:40px;border-radius:10px;flex:none;}
  .instx{flex:1;min-width:0;line-height:1.25;}
  .instx b{display:block;font-family:var(--fd);font-weight:500;color:var(--sage-deep);font-size:1rem;}
  .instx span{font-size:.85rem;color:var(--ink-soft);}
  .instcard .btn{flex:none;padding:9px 14px;}
  .instno{flex:none;background:none;border:none;color:var(--ink-soft);font-size:1.3rem;line-height:1;width:44px;height:44px;padding:0;cursor:pointer;border-radius:10px;}
  .instno:hover{color:var(--ink);}
  .savecard{background:linear-gradient(120deg,#FBEEE6,#F3EAD9);border:1px solid var(--coral);border-radius:16px;padding:18px;text-align:center;margin-bottom:18px;}
  .savecard b{display:block;font-family:var(--fd);font-weight:500;font-size:1.1rem;color:var(--sage-deep);margin-bottom:6px;}
  .savecard b .s{color:var(--coral);}
  .savecard p{color:var(--ink);font-size:.9rem;line-height:1.45;margin:0 auto 13px;max-width:32ch;}
  .saverow{display:flex;gap:9px;justify-content:center;}
  /* Build 258: these were two ghost buttons stretched across the row, which
     gave two occasional actions the same visual weight as the list itself -
     and put "Clear load", the only irreversible thing on the page, in a
     tap-sized target competing for attention.

     They are now quiet text actions. Still in the same place, still always
     visible, still the first and last thing on their row so they are easy to
     find - just not shouting. Save keeps the sage of an action you might want;
     Clear drops to muted, because nothing should invite you towards it. The
     confirmation dialog is what protects it, not the styling.

     Kept: 40px minimum height. Quiet is a visual weight, not a smaller target. */
  /* Build 259: the actions sat in their own band of whitespace - 16px below the
     title and 6px above the meter - so they read as a floating strip rather
     than part of the header. Pulled up tight under the title and given a
     hairline beneath, which groups title + actions as one block and lets the
     meter start the content. */
  /* Build 260: Save and Clear now sit on the title's line, one either side, so
     the header is one row instead of two. The title stays centred - it is
     centred on every other view, and a left-aligned title under a centred logo
     read as a misalignment rather than a decision.

     The two flex:1 1 0 sides are what keep the title optically centred: they
     take equal width regardless of how long each label is, so "Save as a list"
     on the left cannot push "Your Load" off-centre.

     "Clear" rather than "Clear load": this position - top right, opposite a
     save action - is where a done or confirm button lives in most apps, and
     the shorter, quieter label stops it reading as the pair's primary action.
     It is still the only irreversible thing on the page, so it keeps its
     confirmation dialog.

     Build 396 (Kerry: mock-up A): both actions in brand colours at 1rem, the
     size of the home page's coral links - "Save list" in sage, "Clear" in
     coral. At 1rem "Save as a list" no longer fits beside the title on a
     narrow phone, so it is "Save list". The logo here is 84px and the gaps
     are tighter, so the list starts about 40px higher. */
  .titlerow{display:flex;align-items:center;gap:8px;margin:0 0 8px;}   /* build 396: was 12px */
  @media (max-width:340px){   /* build 396: on the narrowest phones a slightly smaller title keeps clear of "Save list" */
    #view-list .titlerow .sh h2{font-size:1.32rem;}
    #view-list .titlerow .sh .helpbtn{margin-left:6px;}
  }
  .titlerow .sh, #view-list .titlerow .sh{flex:0 0 auto;margin:0;}   /* build 396: #view-list .sh's 14px gap was lifting the title off the row's centre line */
  .titlerow .lact{flex:1 1 0;min-width:0;max-width:none;min-height:40px;
                  background:none;border:none;padding:6px 0;
                  font-size:1rem;font-weight:400;line-height:1.2;color:var(--sage-deep);white-space:nowrap;}
  .titlerow #saveAsListBtn{text-align:left;}
  .titlerow #clearBasketBtn{text-align:right;color:var(--coral-deep);}
  .titlerow #saveAsListBtn:hover{color:var(--sage);}
  .titlerow #clearBasketBtn:hover{color:var(--coral);}
  #clearBasketBtn{border-color:rgba(219,139,107,.5);color:var(--coral-deep);}
  .saverow .btn{flex:1 1 0;min-height:44px;max-width:160px;}
  .savecard .btn.ghost{background:rgba(253,251,245,.75);border-color:var(--sage);color:var(--sage-deep);}
  .savecard .btn.ghost:hover{background:#fff;}
  /* Build 347: the "What's new" card at the top of the home screen. Calm sage,
     not coral (actions) or blue (AI summaries), so it reads as neither. */
  .wncard{position:relative;background:var(--paper);border:1.5px solid var(--sage);border-radius:16px;padding:14px 16px 12px;margin:0 0 16px;text-align:left;}
  .wncard .wnkick{font-family:var(--fs);font-size:1.2rem;color:var(--sage-deep);margin:0;line-height:1.2;padding-right:34px;}
  .wncard h3{font-size:1.12rem;color:var(--ink);margin:2px 0 6px;padding-right:28px;}
  .wncard p.wnbody{font-size:.93rem;line-height:1.5;margin:0 0 12px;color:var(--ink);}
  .wncard .wnrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  .wncard .wnrow .btn{min-height:44px;}
  .wncard .wnok{display:inline-block;margin:0;min-height:44px;padding:0 4px;}
  .wncard .wnx{position:absolute;top:4px;right:4px;width:44px;height:44px;background:none;border:none;color:var(--ink-soft);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:10px;}
  .wncard .wnx:hover{color:var(--ink);}
  .wnprev .wncard{margin:8px 0 0;}
  .wnprev .wncard button{pointer-events:none;}
  #wnEd select{width:100%;font-family:var(--fb);font-size:.95rem;background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink);min-height:44px;}
  .wncount{float:right;font-family:var(--fb);font-weight:400;color:var(--ink-soft);font-size:.8rem;}
  .wncount.over{color:var(--coral-deep);}
  .wnmsg{font-size:.88rem;margin:10px 2px 0;color:var(--sage-deep);}
  .wnmsg.err{color:var(--coral-deep);}
  .quietlink{display:block;margin:10px auto 0;background:none;border:none;color:var(--sage-deep);font-family:var(--fb);font-size:.9rem;cursor:pointer;text-decoration:underline;}
  .quietlink:hover{color:var(--coral-deep);}
  /* in-app confirm (native confirm() is blocked in sandboxed/embedded contexts) */
  #askbox{display:none;position:fixed;inset:0;z-index:120;background:rgba(60,52,44,.42);align-items:center;justify-content:center;padding:24px;}
  #askbox.on{display:flex;}
  [data-dlg]:focus{outline:none;}   /* build 331: dialogs take focus themselves so the title is read; no ring on the whole screen */
  /* Build 361: headings are focused by the app only so a screen reader announces where you've landed (Explore's lists, a Challenge, the Basket).
     They aren't controls, so no ring - iPhone Safari drew a blue box round "Life Loads" on opening it (Kerry, 2 Oct). Buttons and fields keep theirs. */
  h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus{outline:none;}
  #asktextbox{display:none;position:fixed;inset:0;z-index:120;background:rgba(60,52,44,.42);align-items:center;justify-content:center;padding:24px;}
  #asktextbox.on{display:flex;}
  .ask-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 20px 18px;max-width:340px;width:100%;box-shadow:0 14px 40px rgba(0,0,0,.22);}
  /* white-space:pre-line is load-bearing, not decoration: the ask()/askText()
     dialogs pass \n\n in their messages and set them with textContent, so
     without this every confirm collapses to a single run-on line (fixed once
     already, build ~208). Kept in this single rule after a duplicate
     declaration of the same selector was removed in build 234. */
  .ask-card p{margin:0 0 18px;color:var(--ink);font-size:.95rem;line-height:1.5;white-space:pre-line;}
  .ask-btns{display:flex;gap:9px;justify-content:flex-end;}
  .ask-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--fb);font-size:.95rem;background:var(--paper);color:var(--ink);margin:2px 0 16px;box-sizing:border-box;}
  .ask-btns .btn{min-width:84px;}
  /* account overlay */
  #acct{display:none;position:fixed;inset:0;z-index:85;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;}
  #details{display:none;position:fixed;inset:0;z-index:85;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;}
  #privacy{display:none;position:fixed;inset:0;z-index:85;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;}
  /* Build 359: the account sheet sits above the welcome screens (80) and below the sheets it opens (85). */
  #youSheet{display:none;position:fixed;inset:0;z-index:82;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;}
  #savedListsOverlay{display:none;position:fixed;inset:0;z-index:85;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;}
  #purchasesOverlay{display:none;position:fixed;inset:0;z-index:85;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;}   /* build 355 */
  /* Build 348: Challenges (list and one Challenge, in one overlay) */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  #challengesOverlay{display:none;position:fixed;inset:0;z-index:85;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;}
  .ch-shell{max-width:460px;margin:0 auto;min-height:100%;padding:calc(58px + env(safe-area-inset-top,0px)) 20px calc(30px + env(safe-area-inset-bottom,0px));box-sizing:border-box;position:relative;}
  .ch-shell h2{font-family:var(--fd);font-weight:500;font-size:1.55rem;color:var(--sage-deep);margin:0 0 8px;}
  .ch-shell h2 .s{color:var(--coral);}
  .ch-back{background:none;border:none;color:var(--sage-deep);font-family:var(--fb);font-size:1rem;font-weight:600;cursor:pointer;padding:10px 0;min-height:44px;margin:-10px 0 4px;}   /* build 398: was .95rem, regular - as thick as "‹ Explore" (397), keeping the Challenge's own colour (Kerry) */
  .ch-sub{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin:0 0 16px;}
  .ch-prog{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;margin:4px 0 5px;}
  .ch-prog b{font-family:var(--fd);font-weight:500;font-size:1.05rem;color:var(--sage-deep);}
  .ch-bar{height:9px;background:rgba(134,159,132,.2);border-radius:99px;overflow:hidden;margin-bottom:14px;}
  .ch-bar i{display:block;height:100%;background:var(--sage);width:0;transition:width .3s;}
  .ch-save{font-size:.85rem;color:var(--ink-soft);margin:0 0 16px;line-height:1.45;}
  .ch-sec{background:var(--paper);border:1px solid var(--line);border-radius:13px;margin-bottom:9px;}
  .ch-sec>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;min-height:44px;box-sizing:border-box;}
  .ch-sec>summary::-webkit-details-marker{display:none;}
  .ch-sec>summary .t{font-family:var(--fd);font-weight:500;font-size:.98rem;}
  .ch-sec>summary .t small{display:block;font-family:var(--fb);font-weight:400;font-size:.8rem;color:var(--ink-soft);}
  .ch-sec>summary .c{font-size:.82rem;color:var(--ink-soft);white-space:nowrap;}
  .ch-sec>summary .c.done{color:var(--sage-deep);}
  .ch-sec[open]>summary{border-bottom:1px solid var(--line);}
  .ch-body{padding:6px 14px 12px;}
  .ch-body ul{margin:6px 0;padding-left:20px;font-size:.92rem;line-height:1.55;}
  .ch-job{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:.95rem;line-height:1.45;cursor:pointer;min-height:44px;box-sizing:border-box;}
  .ch-job input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--sage-deep);}
  .ch-job.done span{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:rgba(124,112,99,.5);}
  .ch-locked{font-size:.9rem;color:var(--ink-soft);margin:6px 0;}
  .ch-finish{background:var(--sage-deep);color:#fff;border-radius:13px;padding:14px 16px;margin:14px 0 0;font-size:.95rem;line-height:1.5;}
  .ch-finish b{display:block;font-family:var(--fd);font-weight:500;font-size:1.1rem;margin-bottom:3px;}
  .ch-edday{border:1px dashed var(--line);border-radius:11px;padding:10px 12px;margin:12px 0;}
  .ch-edday-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--fd);}
  #p-chal .phead{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .ch-sticky{position:sticky;top:0;z-index:2;background:var(--cream);padding:10px 0 2px;margin:0 0 4px;}
  .ch-note{font-size:.82rem !important;color:var(--ink-soft);font-style:italic;margin:0 0 10px !important;}
  .ch-tip{font-size:.88rem;line-height:1.5;color:var(--ink);background:rgba(134,159,132,.12);border-radius:9px;padding:8px 10px;margin:6px 0 4px;}
  .ch-job small{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:2px;}
  .ch-job.done small{text-decoration:none;}
  .ch-hand{margin:10px 0 8px;font-size:.92rem;}
  .ch-finish .ch-ask{background:#fff;color:var(--sage-deep);}
  .ch-clear{margin:18px auto 0;min-height:44px;}
  .ch-tag{display:inline-block;font-size:.72rem;color:var(--ink-soft);border:1px solid rgba(124,112,99,.4);border-radius:99px;padding:2px 9px;margin-left:6px;vertical-align:2px;}
  /* Build 351: colour and picture per Challenge; the days as pegs (design A) */
  .ch-side{flex:none;width:92px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--chm,var(--sage));}
  .ch-side.art svg,.ch-ban.art svg{display:block;width:100%;height:100%;}
  .ch-side.ico svg{width:40px;height:40px;}
  .ch-ban{height:150px;border-radius:16px;overflow:hidden;margin:0 0 14px;background:var(--chm,var(--sage));color:#fff;display:flex;align-items:center;justify-content:center;}
  .ch-ban.ico{height:96px;}
  .ch-ban.ico svg{width:52px;height:52px;}
  #challengesBody[style] h2{color:var(--chd,var(--sage-deep));}
  #challengesBody[style] .ch-bar{background:rgba(124,112,99,.15);}
  #challengesBody[style] .ch-bar i{background:var(--chd,var(--sage));}
  #challengesBody[style] .ch-prog b,#challengesBody[style] .ch-back{color:var(--chd,var(--sage-deep));}
  #challengesBody[style] .ch-finish{background:var(--chd,var(--sage-deep));}
  #challengesBody[style] .ch-finish .ch-ask{color:var(--chd,var(--sage-deep));}
  .ch-pegs{display:flex;flex-wrap:wrap;gap:20px 5px;margin:16px 0 12px;padding:12px 4px 0;scroll-margin-top:86px;}
  .ch-peg{position:relative;flex:1 1 0;min-width:28px;max-width:46px;height:40px;border-radius:6px;border:1.5px dashed var(--ink-soft);background:var(--paper);color:var(--ink);
          font-family:var(--fd);font-size:1rem;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
  .ch-peg::before{content:"";position:absolute;top:-11px;left:-5px;right:-5px;border-top:1px solid rgba(124,112,99,.55);}
  .ch-peg::after{content:"";position:absolute;top:-16px;left:50%;margin-left:-3px;width:6px;height:13px;border-radius:2px;background:var(--gold);}
  .ch-peg svg{width:19px;height:19px;}
  .ch-peg .tk{display:none;}
  .ch-peg.done{background:var(--chd,var(--sage-deep));border:1.5px solid var(--chd,var(--sage-deep));color:#fff;}
  .ch-peg.done .n{display:none;}
  .ch-peg.done .tk{display:block;}
  .ch-peg.locked{border-style:dotted;color:var(--ink-soft);}
  .ch-peg[aria-current]{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--ink);}
  .ch-daycard{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:14px 16px 10px;}
  .ch-kick{font-family:var(--fs);font-size:1.35rem;line-height:1.1;color:var(--chd,var(--sage-deep));margin:0;}
  .ch-dtitle{font-size:1.3rem;margin:3px 0 2px;}
  .ch-dtitle:focus{outline:none;}
  .ch-dmeta{font-size:.85rem;color:var(--ink-soft);margin:0 0 10px;}
  .ch-tipbox{border-left:3px solid var(--cha,var(--coral));background:var(--cream);padding:7px 11px;margin:0 0 8px;}
  .ch-tipbox .ch-tip{background:none;padding:0;margin:0;}
  .ch-tipby{display:block;font-family:var(--fs);font-size:1.1rem;line-height:1.2;color:var(--ink);}
  .ch-daycard .ch-job{border-top:1px solid rgba(134,159,132,.22);}
  .ch-daycard .ch-job input{accent-color:var(--chd,var(--sage-deep));}
  .ch-dfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px;font-size:.88rem;color:var(--ink-soft);min-height:44px;}
  .ch-dfoot .done{color:var(--chd,var(--sage-deep));}
  .ch-dfoot .ch-next{background:var(--chd,var(--sage-deep));white-space:nowrap;}
  .ch-edlook{display:flex;gap:10px;align-items:stretch;margin:8px 0 4px;}
  .ch-edlook .ch-side{width:70px;height:88px;border-radius:10px;overflow:hidden;}
  .ch-edlook .ch-ban{flex:1;height:88px;margin:0;border-radius:10px;}
  @media (prefers-reduced-motion: no-preference){
    .ch-peg.pop{animation:chpop .36s ease-out;}
    @keyframes chpop{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}}
    .ch-daycard.in{animation:chin .22s ease-out;}
    @keyframes chin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  }
  .linklike{background:none;border:none;color:var(--coral-deep);text-decoration:underline;font-size:.85rem;cursor:pointer;padding:10px 0 0;display:block;margin:0 auto;}
  .acct-ro{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.03);border:1px solid var(--line);color:var(--ink);font-size:1rem;word-break:break-all;}
  .acct-shell{max-width:460px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;
    padding:calc(58px + env(safe-area-inset-top,0px)) 26px calc(30px + env(safe-area-inset-bottom,0px));box-sizing:border-box;position:relative;}
  .demoflag{position:fixed;top:0;left:0;right:0;background:var(--sage-deep);color:#fff;font-family:var(--fb);font-size:.74rem;
    text-align:center;padding:calc(7px + env(safe-area-inset-top,0px)) 14px 7px;z-index:2;line-height:1.35;}
  .acct-close{position:absolute;top:calc(56px + env(safe-area-inset-top,0px));right:20px;background:none;border:none;font-size:1.7rem;color:var(--ink-soft);cursor:pointer;line-height:1;}
  .acct-stage{text-align:center;}
  .acct-logo{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 12px;}
  .acct-stage h2{font-family:var(--fd);font-weight:500;font-size:1.6rem;color:var(--sage-deep);margin:0 0 10px;}
  .acct-stage h2 .s{color:var(--coral);}
  .acct-sub{color:var(--ink-soft);font-size:.95rem;line-height:1.5;max-width:34ch;margin:0 auto 20px;}
  .acct-lab{display:block;text-align:left;font-family:var(--fd);font-size:.85rem;color:var(--ink-soft);margin:10px 2px 5px;}
  .acct-lab .opt{color:var(--line-deep,#B8AE9C);font-family:var(--fb);font-size:.78rem;}
  #acct input[type=text],#acct input[type=email]{width:100%;font-family:var(--fb);font-size:16px;background:var(--paper);
    border:1px solid var(--line);border-radius:11px;padding:13px;color:var(--ink);box-sizing:border-box;}
  #acct input[type=text]:focus,#acct input[type=email]:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(134,159,132,.2);}
  .acct-err{color:var(--coral-deep);font-size:.84rem;min-height:1.1em;margin:7px 2px 2px;text-align:left;}
  .acct-check{display:flex;align-items:flex-start;gap:10px;text-align:left;font-size:.86rem;color:var(--ink);margin:14px 2px 0;line-height:1.45;}
  .acct-check input{margin-top:3px;flex-shrink:0;width:18px;height:18px;}
  .acct-check em{color:var(--ink-soft);font-style:normal;font-size:.8rem;}
  .acct-priv{text-align:left;color:var(--ink-soft);font-size:.78rem;line-height:1.5;margin:12px 2px 18px;}
  /* Deletion-request state. Deliberately calm, not alarming — matches this
     app's restraint around destructive actions (7.25). Nothing has actually
     been deleted at this point, so a red warning block would misrepresent it. */
  .delnote{text-align:left;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 2px 18px;background:rgba(253,251,245,.6);}
  .delnote p{color:var(--ink-soft);font-size:.78rem;line-height:1.5;margin:0 0 8px;}
  .delnote p b{color:var(--ink);}
  .acct-post{font-size:3rem;margin-bottom:8px;}
  /* build 404: the "You're in" step a new account sees after the code */
  #acctWelcome .acct-post{color:var(--sage-deep);}
  #acctWelErr{margin-bottom:14px;}
  .otp{text-align:center;font-family:var(--fb);font-size:1.5rem;letter-spacing:.4em;padding-left:.4em;}
  .opt{color:var(--ink-soft);font-weight:400;font-size:.85em;}
  .thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .thumb{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--paper);}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .thumb button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(74,65,57,.72);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;padding:0;}
  .thumb .busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:.7rem;}
  .enq-photos{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 2px;}
  /* Build 298: assignment and notes. */
  .assignrow .asg{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);
                  border-radius:99px;padding:8px 14px;font-family:var(--fb);font-size:.86rem;
                  cursor:pointer;min-height:40px;}
  .assignrow .asg.on{background:var(--sage);border-color:var(--sage);color:#fff;}
  .asgtag{margin-left:8px;font-size:.72rem;color:var(--sage-deep);background:#E4EFE4;
          border-radius:99px;padding:2px 8px;vertical-align:2px;}
  .enqnotes{margin-top:18px;}
  .enqnotes textarea{width:100%;font-family:var(--fb);font-size:.95rem;color:var(--ink);
                     background:var(--paper);border:1px solid var(--line);border-radius:12px;
                     padding:11px 12px;resize:vertical;min-height:62px;}
  .enqnotes .btn{margin-top:8px;}
  .notelist{list-style:none;margin:16px 0 0;padding:0;}
  .notelist li{border-top:1px solid var(--line);padding:11px 2px;}
  .notelist p{margin:0 0 4px;font-size:.93rem;white-space:pre-wrap;}
  .notelist .nmeta{font-size:.76rem;color:var(--ink-soft);}
  .enq-photos button.photo-open{display:block;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:zoom-in;background:none;}
  .enq-photos img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Build 248: understated on purpose. Deleting photos is a considered
     housekeeping action, not something to invite with a red button sitting
     under every enquiry. The confirmation carries the weight. */
  .photo-del{background:none;border:none;padding:6px 0;margin:2px 0 6px;font-family:var(--fb);font-size:.82rem;color:var(--ink-soft);text-decoration:underline;cursor:pointer;min-height:34px;}
  .photo-del:hover{color:var(--coral-deep);}
  /* In-app photo lightbox. Opens the full image as an overlay INSIDE the page.
     A new tab can't be used here: mobile browsers block navigating a tab to a
     data: URL (how the photos are stored), so a target=_blank link goes blank.
     The overlay sidesteps that entirely. Added build 147. */
  #lightbox{display:none;position:fixed;inset:0;z-index:130;background:rgba(46,42,38,.88);align-items:center;justify-content:center;padding:20px;}
  #lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
  #lightbox .lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;width:40px;height:40px;border-radius:99px;border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .signout{color:var(--coral-deep);}
  /* ---------- ideas: thought bubbles ---------- */
  .ideas{display:none;margin-bottom:14px;}
  /* Build 365: the heading and "Different ideas" sit on one line above the
     clouds (like "Just added" and "See all"), so the button can't be pushed off
     the bottom of the screen by what's above it. */
  .ideas-head{gap:12px;margin:0 2px 2px;}
  .ideas-head h3{min-width:0;}
  .ideas-head .ja-all{flex:none;white-space:nowrap;}
  /* position:relative is load-bearing, not decoration. popIdea() appends the
     spark elements to .pile and positions them with coordinates measured
     RELATIVE TO .pile. Without a positioned ancestor the sparks resolve
     against the document instead, so they fire near the top-left of the page
     - created, animated and removed exactly as intended, just nowhere near
     the bubble and usually off-screen. The effect looks deleted when it is
     actually only misplaced. Do not remove this as an unused rule. */
  .pile{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:0 2px;
        line-height:0;padding:0 2px 2px;}
  .idea{position:relative;display:block;margin:0;padding:0;border:none;background:none;
        cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent;}
  .pile > .idea:nth-child(even){margin-top:3px;}   /* stagger so rows don't march (build 365: less, to save height) */
  .idea svg{display:block;overflow:visible;}
  .idea .cap{position:absolute;left:0;right:0;font-family:var(--fb);font-size:.88rem;color:var(--ink);
             line-height:1.2;text-align:center;pointer-events:none;}
  .idea.pop{animation:ideapop .26s cubic-bezier(.34,1.56,.64,1) forwards;pointer-events:none;}
  @keyframes ideapop{0%{transform:scale(1);opacity:1;}38%{transform:scale(1.22);opacity:1;}100%{transform:scale(.2);opacity:0;}}
  .idea.arrive{animation:ideaarrive .26s cubic-bezier(.22,.68,.3,1) both;}
  @keyframes ideaarrive{0%{opacity:0;transform:scale(.82);}100%{opacity:1;transform:none;}}
  .spark{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;animation:ideaspark .34s ease-out forwards;}
  @keyframes ideaspark{0%{transform:translate(0,0) scale(1);opacity:.9;}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0;}}
  @media (prefers-reduced-motion: reduce){
    .idea.pop{animation:ideafade .2s linear forwards;}
    @keyframes ideafade{to{opacity:0;}}
    .idea.arrive{animation:ideaappear .2s linear both;}
    @keyframes ideaappear{from{opacity:0;}to{opacity:1;}}
    .spark{display:none;}
  }
  .nudge{display:none;background:linear-gradient(120deg,#FBEEE6,#F3EAD9);border:1px solid var(--coral);border-radius:16px;padding:18px;text-align:center;margin-bottom:18px;}
  .nudge b{color:var(--coral-deep);font-family:var(--fd);font-size:1.1rem;display:block;margin-bottom:6px;}
  .nudge p{color:var(--ink);font-size:.9rem;margin-bottom:14px;}
  .nudge .dismiss{display:block;margin:10px auto 0;background:none;border:none;color:var(--ink-soft);font-size:.82rem;text-decoration:underline;cursor:pointer;}
  .views2{display:flex;gap:8px;justify-content:center;margin:0 0 16px;}
  .v2{border:1px solid var(--ink-line);background:var(--paper);color:var(--ink-soft);border-radius:11px;padding:7px 16px;cursor:pointer;font-family:var(--fb);font-size:.86rem;}
  .v2.active{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep);}
  .cat{margin-bottom:14px;}
  .cathead{display:flex;align-items:center;gap:8px;margin-bottom:7px;width:100%;background:none;border:none;padding:6px 2px;margin-left:0;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:40px;}
  .cathead .catchev{margin-left:auto;color:var(--ink-soft);font-size:1.1rem;line-height:1;transform:rotate(-90deg);transition:transform .18s;}
  .cat.collapsed .cathead .catchev{transform:rotate(0deg);}
  .cat.collapsed .catitems{display:none;}
  .dot{width:10px;height:10px;border-radius:50%;}
  .cathead h4{font-size:.95rem;color:var(--ink);}
  .cathead .n{color:var(--ink-soft);font-size:.8rem;}
  .item{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:8px;}
  .check{width:22px;height:22px;border-radius:50%;border:2px solid var(--sage);flex:0 0 auto;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .check.done{background:var(--sage);border-color:var(--sage);}
  /* Build 330 (D2): the tick and tap-to-edit text are real buttons now (keyboard
     and screen-reader reachable); these resets keep them looking as before. */
  button.check{padding:0;background:none;appearance:none;-webkit-appearance:none;font:inherit;}
  button.check.done{background:var(--sage);}
  .item button.txt{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;appearance:none;-webkit-appearance:none;min-width:0;overflow-wrap:anywhere;}
  .check:focus-visible,.item .txt:focus-visible,.yrow:focus-visible,.enqrow:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}
  .check.done::after{content:"\2713";color:#fff;font-size:12px;line-height:1;}
  .item .txt{flex:1;cursor:text;text-decoration:underline dotted rgba(124,112,99,.45);text-underline-offset:4px;text-decoration-thickness:1px;}
/* Build 243: tapping the text of an item opens it for editing, but nothing
   said so - the title="Tap to edit" attribute does nothing on a touch screen.
   A dotted underline marks the text as editable without adding a fourth
   control to an already busy row. A pencil icon was the alternative, and was
   rejected: the row already carries tick, star and delete, and a third small
   target beside delete makes a mis-tap more likely where it costs most.
   Note the underline only decorates the glyphs, not the full width of the
   span, which is why this is text-decoration and not border-bottom - .txt is
   flex:1 and a border would run to the end of the row. Done items keep their
   line-through and lose the dots: the line-through wins the cascade, which is
   correct, since a ticked-off item is not what anyone is reaching to edit. */
  .item.editing{flex-direction:column;align-items:stretch;}
  .editrow{display:flex;flex-direction:column;gap:8px;width:100%;}
  .editrow .f_edittext,.editrow .f_editcat{width:100%;font-family:var(--fb);font-size:16px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px;color:var(--ink);}
  .editrow .f_edittext:focus,.editrow .f_editcat:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(134,159,132,.2);}
  .editrow .f_editcat{-webkit-appearance:none;appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23869F84' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
  .editcat-l{font-family:var(--fd);font-size:.8rem;color:var(--ink-soft);margin:2px 0 -4px;}
  .editbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:2px;}
  .item.done .txt{text-decoration:line-through;color:var(--ink-soft);}
  /* Build 366 (Kerry's pick, option C): Your Load in the Basket's washing-line
     look. Each category is one paper tag hanging from a peg - dark outline,
     its colour along the top (--c, set on each .cat) - with its things listed
     inside, divided by dotted lines. The headings match "Just added": display
     font in sage, the count in coral; the dot goes, the strip carries the
     colour. Only Your Load: the Wardrobe shares .cat/.cathead and keeps its look. */
  #basketList{padding-top:6px;}
  #basketList .cat{position:relative;background:#FDFBF5;border:1.5px solid #4A4139;border-radius:8px;padding:14px 12px 6px;margin:0 0 26px;box-shadow:0 3px 7px rgba(60,52,44,.08);}
  #basketList .cat::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-radius:6px 6px 0 0;background:var(--c,#7C7063);}
  #basketList .cat::after{content:"";position:absolute;top:-14px;left:50%;margin-left:-5px;width:10px;height:24px;border-radius:3px;background:#C79A5A;border:1.5px solid #4A4139;box-sizing:border-box;}
  #basketList .cathead{padding:4px 2px;min-height:40px;margin-bottom:2px;}
  #basketList .cathead .dot{display:none;}
  #basketList .cathead h4{font-family:var(--fd);font-weight:500;font-size:1.06rem;color:var(--sage-deep);}
  #basketList .cathead .n{font-size:.85rem;color:var(--coral-deep);}
  #basketList .item{background:none;border:none;border-top:1px dashed #D9D0C1;border-radius:0;margin:0;padding:11px 2px;}
  .star{background:none;border:none;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--line);width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;}
  .star.on{color:var(--gold);}
  .item .del{background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:1.15rem;line-height:1;opacity:.55;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;}
  #view-list .pagelogo{width:84px;height:84px;margin-bottom:6px;}   /* build 396: was 104px - more of the list on screen */
  .inlink{background:none;border:none;color:var(--sage-deep);font-family:var(--fb);font-size:inherit;line-height:inherit;cursor:pointer;padding:0;text-decoration:underline;-webkit-tap-highlight-color:transparent;}
  .inlink:hover{color:var(--coral-deep);}
  .firstadd{text-align:center;margin:14px 0 0;color:var(--ink-soft);font-size:.9rem;}
  /* build 364: Just added, on the washing line */
  .jadded{margin:-4px 0 16px;}
  .ja-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 4px;}
  .ja-head h3{font-family:var(--fd);font-weight:500;font-size:1.05rem;color:var(--sage-deep);margin:0;}
  .ja-all{background:none;border:none;padding:10px 0 10px 12px;font-family:var(--fb);font-size:1rem;color:var(--coral-deep);cursor:pointer;}   /* build 394: was .88rem - looked small beside the headings (Kerry: option B) */
  .ja-line{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 2px 6px;min-height:84px;}
  .ja-rope{position:absolute;left:0;top:0;width:100%;height:26px;overflow:visible;}
  .ja-rope path{stroke:#4A4139;stroke-width:2;vector-effect:non-scaling-stroke;}
  .ja-tag{position:relative;justify-self:center;width:100%;max-width:96px;min-height:58px;box-sizing:border-box;margin:0;padding:12px 6px 7px;cursor:pointer;
    background:#FDFBF5;border:1.5px solid #4A4139;border-radius:5px;font-family:var(--fb);font-size:.76rem;line-height:1.22;color:var(--ink);text-align:center;
    box-shadow:0 3px 6px rgba(60,52,44,.08);transform-origin:50% -10px;-webkit-appearance:none;appearance:none;}
  .ja-tag::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px 3px 0 0;background:var(--c);}
  .ja-tag:nth-child(2){transform:rotate(-3deg);}
  .ja-tag:nth-child(3){transform:rotate(1.5deg);margin-top:8px;}
  .ja-tag:nth-child(4){transform:rotate(-1.5deg);}
  .ja-peg{position:absolute;top:-11px;left:50%;margin-left:-4px;width:8px;height:19px;border-radius:3px;background:#C79A5A;border:1.5px solid #4A4139;box-sizing:border-box;}
  .ja-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
  .ja-tag:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}
  .ja-tag.drop{animation:jadrop .55s cubic-bezier(.3,1.4,.5,1) both;}
  @keyframes jadrop{from{opacity:0;transform:translateY(-26px) rotate(-10deg);}to{opacity:1;transform:rotate(-3deg);}}
  @media (prefers-reduced-motion: reduce){ .ja-tag.drop{animation:none;} }
  .firstadd button{background:none;border:none;color:var(--coral-deep);font-family:var(--fb);font-size:.9rem;cursor:pointer;text-decoration:underline;padding:0;}
  .tab{font-size:.72rem;line-height:1.2;text-align:center;}
  #view-list,#view-wardrobe{position:relative;}
  .helpbtn{position:absolute;top:18px;right:16px;width:30px;height:30px;border-radius:50%;border:1px solid var(--ink-line);background:var(--paper);color:var(--ink-soft);font-family:var(--fd);font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2;}
  .helpbtn:hover{color:var(--coral-deep);border-color:var(--sage);}
  /* Build 254: Your Load's explainer was a card - heading, three icon rows and
     a "Got it" button, about six stacked elements deep. It is read once and is
     furniture after that, so it is now a single legend line.

     The fourth item is new: tapping an item's words to edit was added in build
     243 and advertised only by a dotted underline. It is the least obvious
     action on the page, so the legend shows the same dotted underline instead
     of describing it.

     Dropped in the process: "it stays until you clear it". That nuance - that
     ticking off is not deleting - is explained on the Wardrobe screen, which is
     where anything ticked off actually goes. */
  .legendbar{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;   /* build 433: centred (Kerry chose A) */
             background:var(--paper);border:1px solid var(--ink-line);border-radius:11px;
             padding:9px 38px 9px 38px;margin:0 0 14px;position:relative;
             font-size:.78rem;color:var(--ink-soft);}
  .legendbar .lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
  .legendbar .hint-circle{width:12px;height:12px;border-width:1.5px;}
  .legendbar .hint-star,.legendbar .hint-x{font-size:.95rem;}
  .lg-close{position:absolute;top:0;right:0;width:38px;height:100%;background:none;border:none;
            color:var(--ink-soft);font-size:1.05rem;line-height:1;cursor:pointer;padding:0;}
  /* Build 255: the Wardrobe explainer slimmed down the same way, but it stays a
     SENTENCE rather than a row of glyphs. Only one of its three original rows
     was an action - the other two explained what the screen is, and an icon
     legend cannot say "everything you tick off lands here".

     That line is also doing a second job. Build 254 dropped "it stays until you
     clear it" from Your Load, which was the one non-obvious thing about ticking
     off: it is not deleting. This sentence says the same thing in the place
     where someone would actually go looking for the answer. */
  .wardlegend{line-height:1.5;}
  .wardlegend .wl{flex:1;}
  .wardlegend .wl b{color:var(--ink);font-weight:600;}
  .hint-circle{width:15px;height:15px;border-radius:50%;border:2px solid var(--sage);display:block;}
  .hint-star{color:var(--gold);font-size:1.05rem;line-height:1;}
  .hint-x{color:var(--ink-soft);font-size:1.1rem;line-height:1;}
  .enq-pill{position:fixed;left:50%;bottom:var(--pillgap,calc(84px + env(safe-area-inset-bottom,0px)));transform:translateX(-50%) translateY(0);z-index:60;background:var(--coral);color:#fff;border:none;border-radius:99px;padding:12px 24px;font-family:var(--fb);font-weight:500;font-size:.95rem;box-shadow:0 6px 18px rgba(46,42,38,.22);cursor:pointer;opacity:1;transition:opacity .25s,transform .25s;}
  .enq-pill:hover{background:var(--coral-deep);}
  /* Hidden once the enquiry form itself is on screen — otherwise the pill
     hovers over the very form it scrolls to. */
  .enq-pill.hide{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none;}
  .ward-link{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--pillgap,calc(84px + env(safe-area-inset-bottom,0px)));z-index:60;margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;}
  .ward-link button{background:#E4EFE4;border:1px solid var(--sage);color:var(--sage-deep);font-family:var(--fb);font-size:.9rem;cursor:pointer;padding:10px 18px;border-radius:99px;box-shadow:0 6px 18px rgba(46,42,38,.16);}
  .ward-link button:hover{color:var(--coral-deep);}
  .ward-first{text-align:center;color:var(--ink-soft);font-size:.82rem;margin:0;background:var(--paper);border:1px solid var(--line);padding:7px 14px;border-radius:99px;box-shadow:0 4px 14px rgba(46,42,38,.12);max-width:min(84vw,300px);}
  @keyframes wardpulse{0%{box-shadow:0 0 0 0 rgba(134,159,132,.4);}70%{box-shadow:0 0 0 12px rgba(134,159,132,0);}100%{box-shadow:0 0 0 0 rgba(134,159,132,0);}}
  .ward-link button.pulse{animation:wardpulse 1.2s ease-out 2;border-radius:6px;}
  .backlink{background:none;border:none;color:var(--coral-deep);font-family:var(--fb);font-size:1rem;font-weight:600;cursor:pointer;padding:0;margin:0 0 10px;}   /* build 398: "← Your Load" - was .92rem sage, regular; now the coral of "‹ Explore" (397) */
  .backlink:hover{color:var(--coral);}
  .witem{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:8px;}
  .witem .wtick{width:22px;height:22px;border-radius:50%;background:var(--sage);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
  .witem .wtick::after{content:"\2713";color:#fff;font-size:12px;line-height:1;}
  .witem .wtxt{flex:1;color:var(--ink-soft);}
  .witem .wdate{color:var(--ink-soft);font-size:.74rem;white-space:nowrap;opacity:.8;}
  .witem .wback{background:none;border:none;color:var(--sage-deep);font-size:1.15rem;line-height:1;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;}
  .witem .wback:hover{color:var(--coral-deep);}
  /* Build 367 (Kerry's pick, option D): the Wardrobe by week - This week, Last
     week, then by month - each group a paper tag hung on a coat hanger (Your
     Load's tags hang on pegs; the hanger says "put away"). Each thing keeps a
     dot in its category's colour. Headings like "Just added", the count in coral. */
  #wardList{padding-top:2px;}
  .wgroup{position:relative;background:#FDFBF5;border:1.5px solid #4A4139;border-radius:8px;padding:14px 12px 6px;margin:36px 0 0;box-shadow:0 3px 7px rgba(60,52,44,.08);}
  .wgroup:last-child{margin-bottom:18px;}
  .wgroup::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-radius:6px 6px 0 0;background:var(--sage);}
  .wd-hang{position:absolute;left:-1px;right:-1px;top:-36px;height:36px;pointer-events:none;}
  .wd-hook{position:absolute;left:50%;margin-left:-15px;top:0;width:30px;height:20px;}
  .wd-shoulders{position:absolute;left:0;top:18px;width:100%;height:18px;}
  .wghead{display:flex;align-items:baseline;gap:8px;padding:4px 2px 8px;}
  .wghead h4{font-family:var(--fd);font-weight:500;font-size:1.06rem;color:var(--sage-deep);margin:0;}
  .wghead .n{font-size:.85rem;color:var(--coral-deep);}
  .wgroup .witem{background:none;border:none;border-top:1px dashed #D9D0C1;border-radius:0;margin:0;padding:11px 2px;}
  .witem .wdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-right:-3px;}
  .undo{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-14px);background:var(--sage-deep);color:#fff;padding:8px 8px 8px 18px;border-radius:99px;font-size:.88rem;line-height:1;white-space:nowrap;max-width:calc(100vw - 28px);box-shadow:0 8px 22px rgba(46,42,38,.22);opacity:0;transition:opacity .28s,transform .28s,visibility 0s linear .28s;visibility:hidden;pointer-events:none;z-index:85;display:flex;align-items:center;gap:10px;}
  .undo.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;visibility:visible;transition:opacity .28s,transform .28s,visibility 0s;}   /* build 420 (deep review H9): hidden for real when not showing - out of the keyboard order and away from screen readers */
  .upd{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(14px);background:var(--paper);border:1px solid var(--sage);color:var(--ink);padding:10px 10px 10px 16px;border-radius:99px;font-family:var(--fb);font-size:.86rem;line-height:1;white-space:nowrap;max-width:calc(100vw - 24px);box-shadow:0 8px 22px rgba(46,42,38,.18);opacity:0;transition:opacity .28s,transform .28s,visibility 0s linear .28s;visibility:hidden;pointer-events:none;z-index:86;display:flex;align-items:center;gap:9px;}
  .upd.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;visibility:visible;transition:opacity .28s,transform .28s,visibility 0s;}   /* build 420 (deep review H9): hidden for real when not showing - out of the keyboard order and away from screen readers */
  /* Build 375 (review Q3): the "something didn't load" note */
  .errnote{position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));max-width:420px;margin:0 auto;background:var(--paper);border:1px solid var(--ink-line);border-radius:14px;color:var(--ink);font-family:var(--fb);font-size:.9rem;line-height:1.35;padding:10px 8px 10px 14px;box-shadow:0 8px 22px rgba(46,42,38,.18);z-index:90;display:flex;align-items:center;gap:8px;}
  .errnote span{flex:1 1 auto;}
  .errnote button{flex:0 0 auto;font-family:var(--fb);font-size:.85rem;border-radius:99px;cursor:pointer;min-height:34px;}
  .errnote .go{background:var(--sage-deep,#5A755A);color:#fff;border:none;padding:8px 14px;}
  .errnote .x{background:none;border:none;color:var(--ink-soft);font-size:1.2rem;width:34px;padding:0;}
  .upd button{flex:0 0 auto;background:var(--sage);border:none;color:#fff;font-family:var(--fb);font-size:.85rem;line-height:1;border-radius:99px;padding:8px 15px;cursor:pointer;min-height:34px;}
  .upd .later{background:none;color:var(--ink-soft);padding:8px 4px;text-decoration:underline;}
  .undo button{flex:0 0 auto;background:rgba(255,255,255,.22);border:none;color:#fff;font-family:var(--fb);font-size:.86rem;line-height:1;border-radius:99px;padding:7px 14px;cursor:pointer;}
  .undo button:hover{background:rgba(255,255,255,.32);}
  .tipcard{display:none;align-items:flex-start;gap:11px;background:rgba(219,139,107,.09);border:1px solid rgba(219,139,107,.4);border-radius:14px;padding:14px 14px 14px 15px;margin:0 0 16px;}
  .tip-body{flex:1;}
  .tipcard p{color:var(--ink);font-size:.87rem;line-height:1.5;margin:0;}
  .tip-label{display:block;font-family:var(--fb);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;color:var(--coral-deep);margin-bottom:5px;}
  .tip-ic{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--coral);margin-top:.45em;display:block;}
  .tip-reason{font-size:.78rem;color:var(--ink-soft);margin:3px 0 0;font-style:italic;}
  .tip-x{flex:0 0 auto;background:none;border:none;color:var(--ink-soft);font-size:1.15rem;line-height:1;cursor:pointer;opacity:.6;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;}
  .tip-x:hover{opacity:1;color:var(--coral-deep);}
  .tiphelp{background:rgba(134,159,132,.1);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 16px;font-size:.86rem;color:var(--ink);}
  .tiphelp b{font-family:var(--fd);font-weight:500;}
  .tiphelp ol{margin:9px 0 0;padding-left:20px;}
  .tiphelp li{margin-bottom:7px;line-height:1.5;color:var(--ink-soft);}
  .tiphelp li b{color:var(--ink);}
  .tiphelp-eg{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.82rem;line-height:1.5;}
  .kbd{font-family:monospace;font-size:.82em;background:var(--cream);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--coral-deep);}
  .tester input{width:100%;}
  .testout{margin-top:10px;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:.86rem;line-height:1.6;color:var(--ink);}
  .testout em{color:var(--ink-soft);}
  .tipwarn{margin-top:7px;font-size:.8rem;color:var(--coral-deep);background:rgba(219,139,107,.1);border:1px solid rgba(219,139,107,.4);border-radius:9px;padding:8px 10px;line-height:1.4;}
  .tiprow.has-conflict .f_tipkw{border-color:var(--coral);box-shadow:0 0 0 3px rgba(219,139,107,.16);}
  .tiprow-lbl{display:block;font-family:var(--fd);font-size:.82rem;margin:10px 0 5px;}
  .tiprow-lbl:first-of-type{margin-top:2px;}
  .tiprow-tag{display:inline-block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 10px;}
  .tiprow-tag.general{background:rgba(134,159,132,.18);color:var(--sage-deep);}
  .tiprow-tag.specific{background:rgba(219,139,107,.16);color:var(--coral-deep);}
  /* Manage-the-app nav: grouped cards with icon, group description and
     chevron rows (build 235), replacing the flat wrapped chip rows this used
     to be. Visual restyle only — every row keeps its original data-p and the
     .mchip class, so the existing click-binding and active-state JS in
     showPanel() needed no changes at all. */
  #manageNav{margin-bottom:20px;padding-bottom:4px;}
  .mcard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;}
  .mcard-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px;}
  .mcard-icon{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center;}
  .mcard-icon svg{width:23px;height:23px;}
  .mcard-head h4{font-family:var(--fd);font-size:1.12rem;font-weight:600;color:var(--ink);margin:2px 0 3px;}
  .mcard-head p{font-size:.83rem;color:var(--ink-soft);margin:0;line-height:1.4;}
  .mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--line);cursor:pointer;}
  .mrow-text b{display:block;font-family:var(--fb);font-size:.96rem;color:var(--ink);font-weight:600;margin-bottom:2px;}
  .mrow-text span{display:block;font-size:.79rem;color:var(--ink-soft);}
  .mrow .arr{color:var(--ink-soft);font-size:1.3rem;flex:0 0 auto;line-height:1;}
  /* "You are here" feedback, replacing .chip.active's solid pill — the
     screenshot's own rows don't show a selected state, so this stays subtle:
     a light tint and a coloured title rather than a filled background. */
  .mrow.active{background:rgba(134,159,132,.09);margin:0 -18px;padding:13px 18px;border-radius:9px;}
  .mrow.active .mrow-text b{color:var(--sage-deep);}
  /* Back bar for manage detail pages (build 236). Each panel is now its own
     page rather than appearing beneath the nav, so there has to be a way back
     that isn't the browser button (this is a PWA — in standalone mode there
     may be no visible browser chrome at all). */
  /* Insights detail pages reuse the manage back-bar styling (build 237) —
     same interaction, so it should look identical rather than nearly so. */
  #manageBack,#insBack,#enqBack{margin-bottom:14px;}
  #manageBack button,#insBack button,#enqBack button{background:none;border:none;padding:6px 0;font-family:var(--fb);font-size:.92rem;color:var(--sage-deep);cursor:pointer;display:flex;align-items:center;gap:6px;}
  #manageBack button:hover,#insBack button:hover,#enqBack button:hover{color:var(--coral-deep);}
  .tiphelp-toggle{background:none;border:none;font-family:var(--fd);font-size:.92rem;color:var(--ink);cursor:pointer;padding:0;display:flex;align-items:center;gap:7px;width:100%;}
  .tiphelp-toggle .chev{color:var(--sage-deep);}
  .tiphelp-body{margin-top:9px;}
  .tiphelp-body > b{display:none;}
  .stepper{display:flex;align-items:center;gap:14px;margin:4px 0 4px;}
  .stepper .btn{width:36px;height:36px;padding:0;font-size:1.2rem;border-radius:10px;}
  .nval{font-family:var(--fd);font-size:1.5rem;color:var(--coral-deep);min-width:28px;text-align:center;}
  .nunit{color:var(--ink-soft);font-size:.9rem;}
  .catname{display:flex;align-items:center;gap:9px;flex:1;}
  .catname .cat-dot{width:12px;height:12px;flex:0 0 auto;}
  .catname .f_catlabel{font-family:var(--fd);font-size:1rem;padding:7px 10px;}
  .catmove{display:flex;gap:4px;flex:0 0 auto;}
  .swatches{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 4px;}
  .sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(0,0,0,.07) inset;cursor:pointer;padding:0;position:relative;}
  .sw.on{border-color:var(--ink);}
  .sw.on::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem;text-shadow:0 1px 2px rgba(0,0,0,.35);}
  .ownlab{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ink-soft);margin-top:6px;}
  .ownlab input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;}
  .tiprow{border-top:1px solid rgba(134,159,132,.16);padding-top:11px;margin-top:11px;position:relative;}
  .tipgroup .tiprow:first-of-type{border-top:none;padding-top:0;margin-top:0;}
  .tiprow .f_tiptext{width:100%;min-height:54px;}
  .tiprow .f_tipkw{width:100%;margin-top:7px;font-size:.85rem;}
  .tiprow-del{position:absolute;top:6px;right:2px;background:none;border:none;color:var(--ink-soft);font-size:1.05rem;cursor:pointer;opacity:.55;}
  .tiprow-del:hover{opacity:1;color:var(--coral-deep);}
  .empty{text-align:center;padding:44px 18px;color:var(--ink-soft);}
  .empty .big{font-family:var(--fd);font-weight:500;font-size:1.5rem;color:var(--sage-deep);margin-bottom:6px;}

  /* section headers */
  .sh{text-align:center;margin-bottom:16px;}
  #view-list .sh{margin-bottom:14px;}
  .sh .tag{font-family:var(--fb);letter-spacing:.13em;text-transform:uppercase;font-size:.72rem;color:var(--sage-deep);}
  .sh h2{font-size:1.5rem;margin-top:6px;color:var(--sage-deep);}
  .sh p{color:var(--ink-soft);font-size:.9rem;margin-top:8px;}

  /* packages */
  .pkg{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:18px;margin-bottom:12px;}
  .pkg.feat{border-color:var(--coral);}
  .pkg .bdg{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sage-deep);background:rgba(134,159,132,.15);border-radius:99px;padding:4px 10px;display:inline-block;margin-bottom:8px;}
  .pkg.feat .bdg{color:var(--coral-deep);background:rgba(219,139,107,.15);}
  .pkg h4{font-size:1.15rem;margin-bottom:5px;}
  .pkg p{color:var(--ink-soft);font-size:.88rem;}
  .pmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 9px;}
  .pmeta-h{font-family:var(--fd);font-size:.9rem;color:var(--sage-deep);}
  .pmeta-p{font-family:var(--fd);font-size:1rem;color:var(--coral-deep);}
  /* Build 353: Life Load cards with a picture (shares the Challenges' .ch-side) */
  .ll-card{display:flex;padding:0;overflow:hidden;}
  .ll-cbody{flex:1;min-width:0;padding:16px 16px 16px 15px;}
  .ll-card .pmeta-h{color:var(--chd,var(--sage-deep));}
  .ll-card .ll-load:not([disabled]),.sl-card .sl-load:not([disabled]){background:var(--chd,var(--coral));}
  .sl-card .sl-ren{color:var(--chd,var(--sage-deep));border-color:var(--chd,var(--sage-deep));}
  .ll-look{display:flex;gap:12px;align-items:flex-start;margin:14px 0 2px;}
  .ll-look .ch-side{width:64px;height:84px;border-radius:10px;overflow:hidden;}
  .ll-lookf{flex:1;min-width:0;}
  .ll-lookf label{margin-top:0;}
  .ll-lookf select{width:100%;margin-bottom:8px;}
  /* Build 355: paid content */
  .ch-tag.ok{color:var(--sage-deep);border-color:rgba(110,138,108,.5);}
  .ll-card .ll-tag{margin:0 0 6px;display:inline-block;}
  .ll-peekh{margin:8px 0 2px !important;font-size:.85rem !important;}
  .ll-card .ll-unlock{background:var(--chd,var(--coral));}
  .ll-card .ll-load.ghost:not([disabled]){background:transparent;color:var(--chd,var(--sage-deep));border:1px solid var(--chd,var(--sage-deep));}
  .pu-list li{text-align:left;}
  .ll-peek{margin:0;padding-left:20px;font-size:.92rem;line-height:1.5;color:var(--ink);text-align:left;}
  .ll-paid{border-top:1px dashed var(--line);margin-top:12px;padding-top:10px;}
  .ll-paid input.ll-price{max-width:120px;}
  #unlock{display:none;position:fixed;inset:0;z-index:119;background:rgba(60,52,44,.42);align-items:center;justify-content:center;padding:20px;}
  #unlock.on{display:flex;}
  .unlock-card{position:relative;max-width:400px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;text-align:left;padding-top:22px;}
  .unlock-card h3{font-size:1.25rem;margin:0 36px 6px 0;color:var(--ink);}
  .unlock-x{top:8px;right:8px;}
  .unlock-what{font-size:.95rem;color:var(--ink-soft);margin:0 0 12px;}
  .unlock-opt{position:relative;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px;background:var(--paper);}
  .unlock-opt.best{border:1.5px solid var(--sage-deep);}
  .unlock-opt b{display:block;font-family:var(--fd);font-weight:500;font-size:1.02rem;}
  .unlock-opt span{display:block;font-size:.88rem;color:var(--ink-soft);margin:2px 0 10px;line-height:1.45;}
  .unlock-badge{position:absolute;top:-10px;right:12px;display:inline-block !important;background:var(--sage-deep);color:#fff !important;font-size:.75rem !important;border-radius:99px;padding:2px 10px;margin:0 !important;}
  .unlock-signin{font-size:.95rem;margin:0 0 10px;}
  .unlock-small{margin:10px 0 0 !important;}
  .unlock-msg{font-size:.9rem;color:var(--coral-deep);margin:8px 0 0;min-height:1.2em;}
  .pu-pass{border:1.5px solid var(--sage-deep);border-radius:14px;padding:12px 14px;margin:0 0 14px;background:var(--paper);}
  .pu-pass.ended{border-color:var(--line);}
  .pu-pass b{display:block;font-family:var(--fd);font-weight:500;}
  .pu-pass span{display:block;font-size:.9rem;color:var(--ink-soft);margin:2px 0 8px;}
  .pu-list{list-style:none;margin:0 0 14px;padding:0;}
  .pu-list li{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--line);}
  .pu-t{font-size:.98rem;}
  .pu-m{font-size:.85rem;color:var(--ink-soft);}
  .pu-tag{font-size:.75rem;color:var(--coral-deep);border:1px solid rgba(197,110,74,.4);border-radius:99px;padding:1px 8px;margin-left:6px;}
  .pay-status{font-size:.92rem;margin:0 0 10px;color:var(--coral-deep);}
  .pay-status.ok{color:var(--sage-deep);}
  .pdot{color:var(--line);}
  .pinc{list-style:none;margin:11px 0 0;padding:0;}
  .pinc li{position:relative;padding-left:16px;color:var(--ink-soft);font-size:.85rem;line-height:1.45;margin-bottom:5px;}
  .pinc li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--sage);}
  .pkg.mem{border-color:var(--line);}
  .mlead{font-family:var(--fd);color:var(--ink);font-size:.88rem;margin:2px 0 0;}
  .mgain,.mbest{color:var(--ink-soft);font-size:.85rem;margin-top:10px;line-height:1.5;}
  .mgain b,.mbest b{color:var(--sage-deep);font-family:var(--fd);font-weight:500;}
  .pquote{display:inline-block;margin-top:12px;font-size:.78rem;color:var(--sage-deep);background:rgba(134,159,132,.13);border-radius:99px;padding:4px 11px;}
  .svc{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:15px 16px;margin-bottom:10px;}
  .svc h4{font-size:1.05rem;margin-bottom:4px;}
  .svc p{color:var(--ink-soft);font-size:.85rem;}
  .tcard{background:var(--paper);border:1.5px solid var(--sage);border-radius:14px;padding:18px;margin-bottom:10px;text-align:center;color:var(--coral-deep);}
  .tcard p{font-size:.92rem;font-style:italic;line-height:1.5;}
  .tcard .tw{display:block;margin-top:10px;font-style:normal;font-family:var(--fd);color:var(--sage-deep);font-size:.86rem;}
  .homeq{text-align:center;font-family:var(--fs);color:var(--coral);font-size:1.15rem;line-height:1.35;margin:0 auto 16px;max-width:30ch;}
  .homeq span{display:block;font-family:var(--fb);color:var(--ink-soft);font-size:.72rem;font-style:normal;margin-top:2px;}
  .nudgeq{font-style:italic;color:var(--coral-deep);font-size:.84rem;margin:0 0 14px;}
  .switch{display:flex;align-items:center;gap:9px;font-family:var(--fb);font-size:.9rem;color:var(--ink);margin:9px 0 0;cursor:pointer;line-height:1.3;}
  .switch input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--sage);border-radius:6px;background:var(--paper);cursor:pointer;position:relative;flex:0 0 auto;margin:0;transition:background .15s,border-color .15s;}
  .switch input[type=checkbox]:checked{background:var(--sage);border-color:var(--sage);}
  .switch input[type=checkbox]:checked::after{content:"✓";color:#fff;font-size:13px;position:absolute;top:-2px;left:3px;}
  .switch input[type=checkbox]:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}

  /* form */
  .field{margin-bottom:16px;}
  .field label{display:block;font-family:var(--fd);font-size:.92rem;margin-bottom:6px;}
  .field label .opt{color:var(--ink-soft);font-family:var(--fb);font-size:.8rem;}
  .field input,.field select,.field textarea{width:100%;font-family:var(--fb);font-size:1rem;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px;color:var(--ink);}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(134,159,132,.2);}
  .field textarea{min-height:90px;resize:vertical;}
  .field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--coral);box-shadow:0 0 0 3px rgba(219,139,107,.18);}
  .fhint{color:var(--ink-soft);font-size:.82rem;margin-top:6px;}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .msg{display:none;background:#FBEEE6;border:1px solid var(--coral);color:var(--coral-deep);border-radius:11px;padding:12px;font-size:.88rem;text-align:center;margin-bottom:12px;}
  .thanks{display:none;background:rgba(134,159,132,.14);border:1px solid var(--sage);border-radius:14px;padding:24px;text-align:center;color:var(--sage-deep);}
  .thanks h3{font-size:1.3rem;margin-bottom:8px;}

  /* you */
  .yhead{text-align:center;margin:0 0 20px;}
  .yhead h2{font-size:1.3rem;color:var(--sage-deep);}
  .yhead p{color:var(--ink-soft);font-size:.85rem;margin-top:2px;}
  .yrow{display:flex;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:9px;cursor:pointer;}
  /* Build 330 (D2): read by screen readers, not shown. */
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  button.yrow{width:100%;font:inherit;color:inherit;text-align:left;appearance:none;-webkit-appearance:none;}   /* build 330 (D2) */
  .yrow .soon{font-size:.66rem;color:var(--sage-deep);background:rgba(134,159,132,.15);border-radius:99px;padding:3px 10px;}
  .yrow .arr{color:var(--ink-soft);}
  /* Build 263: a plain row with the app's existing checkbox styling, sitting
     with the other You rows rather than inside the account sheet. */
  .statsrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:0 0 14px;text-align:left;cursor:pointer;}
  .statsrow span{display:flex;flex-direction:column;gap:2px;}
  .statsrow em{font-style:normal;font-size:.72rem;color:var(--ink-soft);}
  .statsrow input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--sage);border-radius:6px;background:var(--paper);cursor:pointer;flex:0 0 auto;margin:0;transition:background .15s,border-color .15s;}
  .statsrow input[type=checkbox]:checked{background:var(--sage);border-color:var(--sage);}
  .statsrow input[type=checkbox]:checked::after{content:"\2713";display:block;color:#fff;font-size:.8rem;line-height:16px;text-align:center;}

  /* admin overlay */
  #intro{display:none;position:fixed;inset:0;z-index:80;background:var(--cream);}
  #intro .intro-shell{max-width:460px;margin:0 auto;height:100%;display:flex;flex-direction:column;padding:calc(28px + env(safe-area-inset-top,0px)) 26px calc(26px + env(safe-area-inset-bottom,0px));position:relative;box-sizing:border-box;}
  .intro-skip{position:absolute;top:calc(24px + env(safe-area-inset-top,0px));right:22px;background:none;border:none;color:var(--ink-soft);font-family:var(--fb);font-size:.9rem;cursor:pointer;z-index:2;}
  .intro-logo{width:124px;height:124px;object-fit:contain;display:block;margin:-6px auto 10px;flex-shrink:0;}
  .intro-slides{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;}
  .intro-slide{display:none;}
  .intro-slide.on{display:block;animation:introfade .4s ease;}
  @keyframes introfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  .intro-photo{width:100%;aspect-ratio:4/3;border-radius:20px;background:rgba(134,159,132,.14);border:1.5px dashed var(--sage);display:flex;align-items:center;justify-content:center;margin-bottom:26px;}
  .intro-photo span{color:var(--sage-deep);font-size:.85rem;font-family:var(--fb);}
  .intro-photo.has-img{background-size:cover;background-position:center;border:none;}
  .intro-slide h2{font-family:var(--fd);font-weight:500;font-size:1.7rem;color:var(--sage-deep);margin:0 0 12px;}
  .intro-slide h2 .s{color:var(--coral);}
  .intro-slide p{color:var(--ink-soft);font-size:1rem;line-height:1.55;max-width:34ch;margin:0 auto;}
  .intro-dots{display:flex;gap:8px;justify-content:center;margin:0 0 18px;}
  .intro-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,width .2s;}
  .intro-dots i.on{background:var(--sage);width:22px;border-radius:99px;}
  .intro-next{width:100%;}
  #admin{display:none;position:fixed;inset:0;z-index:60;overflow-y:auto;background:#EFE7D6;overscroll-behavior:contain;}
  /* Full-screen surface: MUST match the safe-area handling used by #app,
     #intro .intro-shell, .acct-* and #lightbox. 100vh alone is wrong on iOS
     (it excludes the dynamic browser chrome), and a sticky header with no
     top inset slides under the status bar / notch. If you touch these two
     rules, keep the dvh fallback and the env(safe-area-inset-top). */
  #admin .shell{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--cream);position:relative;}
  .ahead{background:var(--sage-deep);color:#fff;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5;}
  .ahead .name{font-family:var(--fd);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem;min-width:0;}
  .aheadbtns{display:flex;gap:8px;flex:0 0 auto;}
  .ahead button{background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:99px;padding:8px 14px;cursor:pointer;font-family:var(--fb);font-size:.85rem;white-space:nowrap;}
  .abody{max-width:460px;margin:0 auto;padding:20px 18px 60px;}
  .gate{max-width:360px;margin:60px auto;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 26px;}
  .gate h2{font-size:1.4rem;margin-bottom:8px;}
  .gate p{color:var(--ink-soft);font-size:.9rem;margin-bottom:18px;}
  .gate input{width:100%;text-align:center;font-family:var(--fb);font-size:16px;border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:14px;background:var(--cream);}
  .gate .hint{font-size:.8rem;color:var(--ink-soft);margin-top:14px;}
  .gate .code{user-select:all;-webkit-user-select:all;background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-family:monospace;color:var(--coral-deep);}
  .gate .err{color:var(--coral-deep);font-size:.85rem;min-height:1.1em;margin-bottom:8px;}
  .atabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;border-bottom:1px solid var(--line);margin-bottom:20px;}
  .atab{border:none;background:none;color:var(--ink-soft);padding:9px 12px;cursor:pointer;font-family:var(--fb);font-size:.92rem;border-bottom:2px solid transparent;margin-bottom:-1px;}
  .atab.active{color:var(--coral-deep);border-bottom-color:var(--coral);}
  .phead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding:0 2px;}
  .phead h3{font-size:1.25rem;}
  .ecard{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:12px;}
  .ecard label{display:block;font-family:var(--fd);font-size:.85rem;margin:10px 0 5px;}
  .ecard label:first-child{margin-top:0;}
  .ecard input,.ecard textarea{width:100%;font-family:var(--fb);font-size:.95rem;background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink);}
  .ecard textarea{min-height:110px;resize:vertical;overflow:hidden;line-height:1.5;}
  /* collapsible item cards */
  .cardtog{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:none;padding:2px 0 0;font-family:var(--fd);font-size:1rem;color:var(--ink);cursor:pointer;text-align:left;}
  .cardtog i{font-style:normal;color:var(--sage-deep);transition:transform .18s;flex-shrink:0;}
  .ecard:not(.collapsed) .cardtog i{transform:rotate(90deg);}
  .ecard.collapsed > *:not(.cardtog){display:none;}
  .cardtog .cname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  h3 .dirtytag{margin-left:8px;vertical-align:middle;font-weight:400;background:rgba(219,139,107,.16);color:var(--coral-deep);font-family:var(--fb);font-size:.68rem;border-radius:99px;padding:2px 8px;}   /* build 406: Tips and Ideas */
  .cardtog .dirtytag{background:rgba(219,139,107,.16);color:var(--coral-deep);font-family:var(--fb);font-size:.68rem;border-radius:99px;padding:2px 8px;flex-shrink:0;}
  /* bigger, thumb-friendly reorder buttons */
  .btn.ghost.small.mv-up,.btn.ghost.small.mv-down{min-width:42px;min-height:42px;font-size:1.05rem;line-height:1;}
  .catmove{display:flex;gap:6px;flex-shrink:0;}
  /* unsaved marker */
  .ecard.dirty{border-color:var(--coral);}
  /* enquiry search */
  #enqSearch{width:100%;font-family:var(--fb);font-size:16px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--ink);margin:0 0 10px;box-sizing:border-box;}
  #enqSearch:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(134,159,132,.2);}
  /* preview mode */
  .aheadbtns{display:flex;gap:8px;align-items:center;}
  #previewBack{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:70;background:var(--sage-deep);color:#fff;border:none;border-radius:99px;padding:11px 20px;font-family:var(--fb);font-size:.92rem;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;}
  .rbtns{display:flex;gap:9px;align-items:center;margin-top:12px;}
  .saved{color:var(--sage-deep);font-size:.82rem;opacity:0;transition:opacity .3s;}
  .enq{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:12px;}
  .enq-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
  .enq .who{font-family:var(--fd);font-size:1.1rem;}
  .enq .svc{color:var(--coral-deep);font-size:.85rem;}
  .enq .when{color:var(--ink-soft);font-size:.78rem;}
  .enq .detail{margin:10px 0;font-size:.92rem;}
  .enq .meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--ink-soft);font-size:.84rem;margin-bottom:8px;}
  .enq .meta b{color:var(--ink);font-family:var(--fd);font-weight:500;}
  .btn.danger{background:var(--coral-deep);color:#fff;border:1px solid var(--coral-deep);}
.btn.danger:hover{filter:brightness(.95);}
.btn.danger:disabled{opacity:.45;cursor:default;}
.dsarcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:14px;background:rgba(253,251,245,.6);}
.dsarsum{font-size:1.05rem;margin-bottom:4px;}
.dsarlist{list-style:none;padding:0;margin:8px 0 0;}
.dsarlist li{padding:5px 0;border-bottom:1px solid var(--line);font-size:.95rem;}
.dsarbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.dsarconfirm{margin-top:14px;padding:14px;border:1.5px solid var(--coral-deep);border-radius:12px;background:rgba(197,110,74,.06);}
.dsarconfirm input{margin:8px 0;}
/* Inline bars for the enquiry trend reports (build 223). A spike is a visual
   thing — a column of numbers hides the shape this report exists to show.
   Width is set per row from the max, so the tallest bar is full width and the
   comparison is relative, which is what matters for spotting a spike. */
.tbar{display:flex;align-items:center;gap:10px;padding:5px 0;}
.tbar .tlab{flex:0 0 74px;color:var(--ink-soft);font-size:.78rem;}
.tbar .ttrack{flex:1 1 auto;height:14px;background:rgba(134,159,132,.12);border-radius:99px;overflow:hidden;}
.tbar .tfill{height:100%;background:var(--sage);border-radius:99px;}
.tbar .tnum{flex:0 0 26px;text-align:right;color:var(--ink-soft);font-size:.78rem;}
.tbar.peak .tfill{background:var(--coral);}
.ownerbadge{font-size:.72rem;font-weight:700;padding:3px 11px;border-radius:99px;background:#E4EFE4;color:var(--sage-deep);white-space:nowrap;}
/* Build 404 (deep review H2, H4): "not published" and "editing paused" - calm, like the erase confirmation */
.pubstate{border:1.5px solid var(--coral-deep);border-radius:12px;background:rgba(197,110,74,.06);padding:12px 14px;margin-bottom:14px;text-align:left;}
.pubstate p{margin:0 0 10px;color:var(--ink);font-size:.9rem;line-height:1.45;}
.ownernote{background:#E4EFE4;color:var(--sage-deep);font-weight:600;font-size:.92rem;border-radius:12px;padding:10px 14px;margin-bottom:12px;}
/* Build 241: the owner landing page used to carry a full-width green banner
   saying "Signed in as the business owner". Redundant once you are inside the
   owner area - the header already says Life Laundry - Owner. Removed, but the
   guide link it contained was worth keeping, so it survives as a chip. Note
   that .ownernote itself is still in use by the DSAR erasure confirmation,
   which is why it was not repurposed. */
.ownerguide{text-align:center;margin-bottom:12px;}
.ownerguide a{display:inline-block;background:#E4EFE4;color:var(--sage-deep);font-family:var(--fb);font-size:.88rem;font-weight:600;border-radius:99px;padding:9px 15px;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.ownerguide a:hover{background:var(--sage-deep);color:#fff;}
.pill{font-size:.72rem;padding:3px 11px;border-radius:99px;}
  .pill.New{background:#FBEEE6;color:var(--coral-deep);}
  .pill.Quoted{background:#EAF0E9;color:var(--sage-deep);}
  .pill.Confirmed{background:#E4EEF6;color:#4E7AA0;}
  .pill.Done{background:#ECEAE4;color:#8A7F70;}
  .filters{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
/* Enquiries list + detail (build 238). Compact one-line rows replace the
   fully-expanded cards: with every enquiry expanded, the fourteenth looked
   exactly as urgent as one sitting unanswered for four days. */
.enqrow{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:11px 0;border-top:0.5px solid var(--line);cursor:pointer;}
.enqrow:first-of-type{border-top:none;}
.enqrow .er-l{min-width:0;}
.enqrow .er-name{font-size:.98rem;color:var(--ink);}
.enqrow .er-sub{font-size:.78rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.enqrow .er-r{text-align:right;flex:0 0 auto;}
.enqrow .er-when{font-size:.76rem;color:var(--ink-soft);margin-top:3px;}
/* Age is coral only in the needs-a-reply group. Elsewhere it would be noise —
   a Quoted enquiry that is "old" is waiting on the customer, not on them. */
.enqrow .er-age{font-size:.72rem;color:var(--coral-deep);}
.enqgroup{font-family:var(--fb);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;color:var(--ink-soft);margin:18px 0 2px;}
.enqgroup.urgent{color:var(--coral-deep);margin-top:6px;}
.enqact{display:flex;gap:8px;margin:14px 0;}
.enqact a{flex:1;text-align:center;font-family:var(--fb);font-size:.88rem;padding:10px;border-radius:11px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:var(--paper);}
.enqact a:hover{border-color:var(--sage);}
.enqfacts{border-top:1px solid var(--line);padding-top:12px;font-size:.84rem;}
.enqfacts div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;}
.enqfacts .k{color:var(--ink-soft);}
.enqfacts .v{color:var(--ink);text-align:right;word-break:break-word;}
.enqmove{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;}
.enqmove .mv{display:flex;gap:6px;flex-wrap:wrap;}
.enqmove button{font-family:var(--fb);font-size:.86rem;padding:7px 14px;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer;}
.enqmove button.on{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep);}
  .chip{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);border-radius:99px;padding:8px 16px;cursor:pointer;font-family:var(--fb);font-size:.85rem;}
  .chip.active{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep);}

  input,select,textarea{font-size:16px;}
  /* Build 299: coral, not sage. The toast appears at the top of the screen, and
     in the owner area the header behind it is sage-deep - so a sage toast was
     green on green and effectively invisible exactly where it is used most
     (saving a status change, adding a note, assigning an enquiry). */
  .toast{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-14px);background:var(--coral-deep);color:#fff;padding:12px 22px;border-radius:99px;font-size:.95rem;box-shadow:0 8px 22px rgba(46,42,38,.22);opacity:0;transition:opacity .28s,transform .28s;pointer-events:none;z-index:80;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .stamp{text-align:center;color:var(--ink-soft);font-size:.75rem;padding:14px 0 6px;}
  /* ---------- Build 359: the account button and sheet, and Explore ---------- */
  #acctBtn{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:40;width:44px;height:44px;border-radius:50%;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--ink-line);color:var(--ink);box-shadow:0 2px 8px rgba(60,52,44,.08);}
  #acctBtn svg{width:22px;height:22px;}
  #acctBtnInit,#youAvInit{font-family:var(--fd);font-weight:500;line-height:1;}
  #acctBtnInit{font-size:1.2rem;}
  #acctBtn.in{background:var(--sage-deep);border-color:var(--ink-line);color:#fff;}   /* build 368 inked, 370 softened: the same outline when signed in */
  #acctBtn.in svg,#acctBtn:not(.in) #acctBtnInit,.you-av.in svg,.you-av:not(.in) #youAvInit{display:none;}
  #acctBtn:focus-visible,.you-x:focus-visible{outline:3px solid var(--coral);outline-offset:2px;}
  .sh .helpbtn{position:static;display:inline-flex;vertical-align:middle;margin:0 0 0 8px;}
  .sh h2.withhelp{display:inline-block;vertical-align:middle;}
  .you-shell{justify-content:flex-start;}
  .you-x{top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--paper);border:1.5px solid rgba(134,159,132,.55);font-size:1.6rem;color:var(--ink);padding:0 0 2px;}
  #youSheet .yhead{margin-top:6px;}
  #youSheet .yhead h2{font-size:1.75rem;}
  #youSheet .yhead p{font-size:.95rem;min-height:1.2em;}
  .you-av{width:76px;height:76px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
    background:var(--paper);border:1.5px solid rgba(134,159,132,.55);color:var(--ink);}
  .you-av svg{width:34px;height:34px;}
  .you-av.in{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff;}
  #youAvInit{font-size:2.1rem;}
  .you-keep{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;margin:0 0 12px;text-align:left;}
  .you-keep b{display:block;font-family:var(--fd);font-weight:500;font-size:1.15rem;color:var(--ink);}
  .you-keep p{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:6px 0 12px;}
  #youSheet .yrow{min-height:56px;box-sizing:border-box;border-radius:16px;}
  .sl-link{text-align:center;margin:14px 0 4px;}
  .sl-link .inlink{font-size:.95rem;padding:10px 6px;min-height:44px;}
  .exhead{padding:4px 56px 0 2px;}
  .exhead h2{font-family:var(--fd);font-weight:500;font-size:2rem;line-height:1.15;color:var(--sage-deep);margin:0;}
  .exhead p{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin:8px 0 0;}
  .ex-sec{margin-top:26px;}
  .ex-sec>h3{font-family:var(--fd);font-weight:500;font-size:1.4rem;color:var(--ink);margin:0;}
  .ex-sub{color:var(--ink-soft);font-size:.92rem;line-height:1.45;margin:3px 0 14px;}
  .ex-group,.ex-sec>h3.ex-group{font-family:var(--fd);font-weight:500;font-size:1.02rem;color:var(--sage-deep);margin:16px 2px 10px;}
  .ex-ch{display:flex;align-items:stretch;gap:14px;width:100%;box-sizing:border-box;text-align:left;margin:0 0 12px;padding:12px;cursor:pointer;
    background:var(--paper);border:1px solid var(--line);border-radius:18px;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;}
  .ex-ch .ch-side{width:84px;min-height:112px;border-radius:12px;overflow:hidden;}
  .ex-cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 0;}
  .ex-t{display:block;font-family:var(--fd);font-weight:500;font-size:1.12rem;line-height:1.2;color:var(--ink);}
  .ex-s{display:block;color:var(--ink-soft);font-size:.88rem;line-height:1.4;}
  .ex-m{display:block;color:var(--chd,var(--sage-deep));font-size:.8rem;line-height:1.35;}
  .ex-note{color:var(--ink-soft);font-style:italic;}
  .ex-foot{display:flex;margin-top:auto;padding-top:6px;}
  .ex-st{display:flex;align-items:center;gap:10px;width:100%;}
  .ex-bar{flex:1;height:6px;border-radius:3px;background:#E3E3D4;overflow:hidden;}
  .ex-bar i{display:block;height:100%;background:var(--chd,var(--sage-deep));}
  .ex-prog{font-size:.84rem;color:var(--chd,var(--sage-deep));white-space:nowrap;}
  .ex-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;font-size:.82rem;line-height:1.3;background:rgba(134,159,132,.18);color:#4F6B4D;}
  .ex-chip.lock{background:rgba(199,154,90,.2);color:#6E5124;}
  .ex-chip svg{width:13px;height:13px;flex:none;}
  /* build 360: the Explore landing (option A) */
  .ex-home{margin-top:18px;}
  .ex-carry{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0 0 14px;padding:10px 12px;cursor:pointer;
    background:var(--paper);border:1px solid var(--line);border-radius:16px;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none;}
  .ex-carry .ch-side{width:52px;height:52px;min-height:0;border-radius:10px;overflow:hidden;flex:none;}
  .ex-carryb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .ex-kick{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--chd,var(--sage-deep));}
  .ex-carry .ex-st{max-width:220px;margin-top:3px;}
  .ex-more{display:block;margin:-6px 0 14px;padding:10px 14px;min-height:44px;background:none;border:none;text-align:left;font-family:var(--fb);font-size:1rem;font-weight:600;color:var(--coral-deep);cursor:pointer;}   /* build 397: was .9rem sage, regular - too thin and small (Kerry: option B, bolder); now like "See all" */
  .ex-more:hover,.ex-back:hover{color:var(--coral);}
  .ex-carry.stale .ex-kick{color:var(--ink-soft);}
  .ex-ago{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:2px;}
  .ex-arr{margin-left:auto;padding-left:8px;font-size:1.5rem;line-height:1;color:var(--ink-soft);flex:none;}
  .ex-big{display:block;width:100%;box-sizing:border-box;margin:0 0 14px;padding:0;overflow:hidden;cursor:pointer;
    background:var(--paper);border:1px solid var(--line);border-radius:20px;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none;}
  .ex-bigban{display:block;height:110px;background:var(--chm);}
  .ex-bigban svg{display:block;width:100%;height:100%;}
  .ex-bigb{display:flex;align-items:center;padding:12px 16px 14px;}
  .ex-bigt{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .ex-big .ex-t{font-size:1.35rem;}
  .ex-count{align-self:flex-start;margin-top:7px;font-size:.8rem;color:var(--chd);background:rgba(134,159,132,.16);border-radius:10px;padding:2px 9px;}
  .ex-passline{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;margin:0;padding:12px 14px;cursor:pointer;
    border:1px dashed rgba(199,154,90,.75);border-radius:14px;background:rgba(199,154,90,.08);font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none;}
  .ex-passline b{display:block;font-family:var(--fd);font-weight:500;font-size:1rem;color:var(--ink);}
  .ex-passline span span,.ex-passline.ok span{display:block;font-size:.85rem;color:var(--ink-soft);line-height:1.4;}
  .ex-passline.ok{cursor:default;display:block;}
  .ex-back{background:none;border:none;color:var(--coral-deep);font-family:var(--fb);font-size:1rem;font-weight:600;cursor:pointer;padding:10px 0;min-height:44px;margin:0 0 2px;}
  .ex-list>h2{font-family:var(--fd);font-weight:500;font-size:2rem;line-height:1.15;color:var(--sage-deep);margin:0;padding-right:56px;}
  .ex-list{margin-top:0;}
  .ex-list>.ex-sub{margin:8px 0 18px;font-size:.95rem;}
  .ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .ex-ll{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0;}
  .ex-ll.open{grid-column:1/-1;}
  .ex-lltile{display:flex;flex-direction:column;width:100%;padding:0;margin:0;border:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;}
  .ex-lltile .ch-side{width:100%;height:118px;}
  .ex-ll.open .ex-lltile .ch-side{height:150px;}
  .ex-llt{display:flex;flex-direction:column;gap:6px;padding:11px 13px 13px;}
  .ex-meta{display:flex;align-items:center;}
  .ex-n{font-size:.86rem;color:var(--chd,var(--ink-soft));}
  .ex-lldet{padding:0 14px 16px;}
  .ex-lldet .ex-desc{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:0 0 8px;}
  .ex-lldet .ll-tag{margin:0 0 8px;}
  .ex-lldet .ll-load:not([disabled]),.ex-lldet .ll-unlock{background:var(--chd,var(--coral));}
  .ex-lldet .ll-load.ghost:not([disabled]){background:transparent;color:var(--chd,var(--sage-deep));border:1px solid var(--chd,var(--sage-deep));}
  .ex-empty{margin-top:40px;text-align:center;color:var(--ink-soft);}
  .ex-empty b{display:block;font-family:var(--fd);font-weight:500;font-size:1.3rem;color:var(--sage-deep);margin-bottom:6px;}

  /* Build 383 (F1): photos that didn't send, on the thank-you screen */
  .photonote{background:var(--paper);border:1px solid var(--ink-line);border-radius:12px;padding:12px 14px;margin:14px 0;text-align:left;}
  .photonote p{margin:0 0 10px;}
  /* Build 393 (review #6): the right-to-cancel acknowledgement in the unlock sheet */
  .unlock-ack{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:.9rem;line-height:1.45;color:var(--ink);cursor:pointer;}
  .unlock-ack input{width:20px;height:20px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--sage-deep);}
  #unlock [data-buy]:disabled{opacity:.5;cursor:not-allowed;}