/* The Grid (home). One full-screen black room. Every holder is a dressed bulb on its own cord; bulbs shrink as the crowd
   grows so thousands fit, and the room zooms (wheel, pinch, double tap) and pans (drag). Quiet text on the edges only:
   header (brand, nav, demo pill, + / - / Auto, search) on top, count, Preview sizes, camera buttons and footer below. */
html,body{height:100%}
body{overflow:hidden;font-size:var(--fs-help);line-height:var(--lh-ui)}
#room{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#room:focus-visible{outline:2px solid var(--warm);outline-offset:-4px;border-radius:0}

/* chrome floats over the canvas; only links, buttons, the search field and the readable text catch the pointer, so bulbs
   underneath stay hoverable. (The canvas takes every touch for its own pinch zoom; over the text a pinch zooms the
   page, so small print can still be enlarged.) Once the room is crowded (body.dense, set by grid.js), a soft black
   scrim keeps the header readable. */
.overlay,.dock{position:fixed;z-index:2;left:0;right:0}
.overlay *,.dock *,.overlay,.dock{pointer-events:none}
.overlay a,.overlay button,.overlay input,.overlay .search-box,.overlay .search-msg,.overlay .results,.overlay .results *,.overlay .pill,
.dock a,.dock button,.dock .count,.dock .demo-line,.dock .note.show{pointer-events:auto}
.overlay .search-box{cursor:text}
/* the search pick list draws over the dock, its buttons and the card while it is open */
.overlay.picking{z-index:4}
/* while a phone keyboard is up the room keeps its full height under it; the dock steps aside so it doesn't land on the bulbs */
.kb .dock{visibility:hidden}
.overlay{top:0;padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(22px,env(safe-area-inset-left,0px));transition:background-color .6s}
.overlay::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(to bottom,rgba(0,0,0,.94),rgba(0,0,0,0));opacity:0;transition:opacity .6s}
.dense .overlay,.zoomed .overlay{background-color:rgba(0,0,0,.94)}
.dense .overlay::after,.zoomed .overlay::after{opacity:1}
.dock{bottom:0;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px))}
/* zoomed in, bulbs reach under the dock: a scrim fades in behind the count, sizes and footer (grid.js also leaves out
   the names that would land under the header, the dock, the camera buttons, the note, the card or the pick list) */
.dock::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;top:-24px;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.94) 24px);opacity:0;transition:opacity .6s}
.zoomed .dock::before{opacity:1}

.ctrl{display:flex;gap:8px}
.ctrl button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--soft);font:400 20px/1 var(--font);cursor:pointer;transition:color .2s,border-color .2s}
.ctrl button:hover{color:var(--ink);border-color:var(--faint)}
.ctrl #auto{width:auto;padding:0 13px;border-radius:16px;font-size:var(--fs-btn);font-weight:500}
.ctrl #auto[aria-pressed="true"]{color:var(--warm);border-color:var(--warm-line)}

.dock-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 12px}
.count{margin:0}
.count b{display:block;font:300 clamp(36px,6vw,56px)/1 var(--font-display);font-variant-numeric:tabular-nums}
.count span{display:block;margin-top:6px;font-size:var(--fs-label);font-weight:600;color:var(--faint)}
.scale{display:flex;align-items:center;gap:4px}
.scale .name{margin-right:8px;font-size:var(--fs-label);font-weight:600;color:var(--faint)}
.scale button{height:30px;min-width:30px;padding:0 10px;border:1px solid transparent;border-radius:15px;background:transparent;color:var(--faint);font:500 var(--fs-btn)/1 var(--font);font-variant-numeric:tabular-nums;cursor:pointer}
.scale button:hover{color:var(--ink)}
.scale button[aria-pressed="true"]{background:var(--warm);color:var(--black);font-weight:600}

.dock-foot{margin-top:12px;padding-block:9px 0;border-top-color:rgba(243,234,217,.07);line-height:1.45;gap:6px 20px}
.dock-foot .cta{padding:6px 14px}

/* activity note and wallet tip carry their own dark backdrop, so they stay readable on top of glowing bulbs (the note's
   edge is feathered, so it reads as a soft shadow over the bulbs rather than a box) */
.note{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:5px 14px;border-radius:14px;background:rgba(0,0,0,.9);box-shadow:0 0 14px 6px rgba(0,0,0,.85);font-size:var(--fs-help);line-height:20px;color:var(--soft);text-align:center;text-wrap:balance;opacity:0;transition:opacity .6s}
.note.show{opacity:1}
.tip{position:fixed;z-index:3;margin:0;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.6);pointer-events:none;transform:translateX(-50%);text-align:center;font-size:var(--fs-help);line-height:var(--lh-ui);color:var(--ink);white-space:nowrap}
.tip b{display:block;font-weight:600}
.tip span{display:block;font-size:var(--fs-label);color:var(--soft);font-variant-numeric:tabular-nums}
/* your own bulb's card links to your profile; only then does the card take the pointer */
.tip.linked{pointer-events:auto}
.tip a{display:block;margin:7px -12px -7px;padding:9px 12px 10px;border-top:1px solid var(--line);font-size:var(--fs-btn);font-weight:600;color:var(--warm);text-decoration:none}
.tip a:hover{color:var(--ink)}
.you{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--warm);color:var(--black);font-style:normal;font-size:var(--fs-tag);font-weight:600;line-height:1.4;letter-spacing:var(--track-caps);text-transform:uppercase;vertical-align:1px}

/* camera buttons: above the Preview row on the right. "Dress your bulb" until the wardrobe has saved one,
   then "Find my bulb"; Fit appears once zoomed in. */
.cam{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(100% + 8px);display:flex;align-items:center;gap:6px}
.cam-btn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.86);color:var(--soft);font:500 var(--fs-btn)/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .2s,border-color .2s}
.cam-btn:hover{color:var(--ink);border-color:var(--faint)}
.cam-btn.mine{color:var(--warm);border-color:var(--warm-line)}
.cam-btn.mine:hover{border-color:var(--warm)}
/* narrow screens: the activity note sits above the camera buttons */
@media (max-width:760px){.note{bottom:calc(100% + 52px)}}

@media (max-width:600px){
  .overlay{padding-left:max(16px,env(safe-area-inset-left,0px))}
  .dock{padding-left:max(16px,env(safe-area-inset-left,0px))}
  .ctrl button{width:38px;height:38px}
  .ctrl #auto{border-radius:19px}
  .scale button{height:36px;min-width:36px;border-radius:18px}
  .cam-btn{height:36px;border-radius:18px}
}
@media (max-width:560px){.scale .name{display:none}.scale button{padding:0 8px}}
/* phones (430px and below, every common iPhone and Android width): the full pill plus + / - / Auto needs about 420px, so
   the pill drops "$BULB " and the row keeps Auto inside the 16px gutter, lined up with the search button above it */
@media (max-width:430px){.pill .long{display:none}}
/* small phones (down to 320px): slightly tighter controls keep the header and the Preview row on one line each, so the
   bulbs keep their room. If a font still runs wide, the rows wrap instead of running off the edge. */
@media (max-width:380px){
  .head-tail{flex-wrap:wrap;row-gap:8px;gap:8px}
  .head-tail .pill{gap:6px;padding:5px 9px}
  .ctrl{margin-left:auto;gap:6px}
  .ctrl button{width:34px;height:34px}
  .ctrl #auto{padding:0 10px;border-radius:17px}
  .dock-row{column-gap:10px}
  .scale{gap:2px}
  .scale button{min-width:32px;height:34px;padding:0 5px}
}
/* 320-346px (a foldable's cover screen is 344px): the pill's decorative dot steps aside, and at 340px and below the pill
   also steps down to 12px, so the pill and + / - / Auto still share one row */
@media (max-width:346px){.head-tail .pill .dot{display:none}}
@media (max-width:340px){
  .head-tail .pill{padding:5px 7px;font-size:var(--fs-tag)}
  .ctrl{gap:5px}
  .ctrl #auto{padding:0 9px}
}
/* phones on their side (short and wide): one compact dock row (count, camera buttons, sizes) and only the demo line
   below it, so the bulbs keep a usable room between the header and the dock */
@media (orientation:landscape) and (max-height:500px){
  .dock{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:10px}
  .dock-row{display:contents}
  .count{order:0;margin-right:auto}
  .count b{font-size:30px}
  .count span{margin-top:4px}
  .cam{position:static;order:1}
  .cam-btn{height:32px;padding:0 12px}
  .scale{order:2}
  .scale .name{display:none}
  .scale button{height:32px;min-width:32px;padding:0 7px}
  .dock-foot{order:3;flex-basis:100%;margin-top:6px;padding-top:5px}
  .dock-foot .demo-line{max-width:none}   /* one line across the whole row where it fits, so the bulbs keep their room */
  .dock-foot .foot-tail{display:none}
  .note{bottom:calc(100% + 8px)}
}
/* the smallest phones on their side (568x320): the demo line keeps to one line and the header's touch targets step down to
   34px, so the bulbs keep about 140px of room. The line opens with "This is a preview."; the pill and the "Demo holders"
   label say demo too, and screen readers still get the whole line. */
@media (orientation:landscape) and (max-height:340px){
  .overlay{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .search{top:calc(10px + env(safe-area-inset-top,0px))}
  .nav a{padding-block:8px}
  .ctrl button,.search-open{width:34px;height:34px}
  .ctrl #auto{border-radius:17px}
  .dock-foot{min-width:0}
  .dock-foot .demo-line{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media (prefers-reduced-motion:reduce){.note{transition:none}}