/* ===========================================================================
   THEME LAB — a selection tool, not site furniture.
   Deliberately neutral (its own dark palette) so it never blends into the
   theme it is previewing. To remove it from the site: delete the two
   theme-lab lines from each page's <head>/<body>. Nothing else references it.

   Movable panel: drag it by its bar, throw it at a screen edge to dock it as a
   rail/bar, grab any edge to resize. Geometry (position, size, snap) is set
   inline by theme-lab.js — this file only styles the frame and, via the
   data-w / data-h size classes the script sets, sheds the inessential and
   shrinks the rest as the panel gets small. Selection reads as a tab underline,
   never a filled capsule (which looks like an on/off switch).
   =========================================================================== */
.tl{
  position:fixed;z-index:9000;
  display:flex;flex-direction:column;overflow:hidden;
  background:#12151b;color:#e8ecf2;border:1px solid #2b313b;border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.04) inset;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:12px;line-height:1.3;min-width:0;
}
.tl *{box-sizing:border-box;}
.tl[data-mode="left"]{border-radius:0 12px 12px 0;}
.tl[data-mode="right"]{border-radius:12px 0 0 12px;}
.tl[data-mode="top"]{border-radius:0 0 12px 12px;}
.tl[data-mode="bottom"]{border-radius:12px 12px 0 0;}
.tl.dragging,.tl.resizing{user-select:none;}
.tl.dragging{box-shadow:0 22px 60px rgba(0,0,0,.5);}

/* --- bar (drag handle) --------------------------------------------------- */
.tl-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 10px;border-bottom:1px solid #232833;cursor:move;touch-action:none;}
.tl-grip{width:9px;height:15px;flex:0 0 auto;border-radius:2px;
  background:radial-gradient(#55606e 1.1px, transparent 1.5px);background-size:4px 4px;
  opacity:.7;margin-right:1px;}
.tl-name{font-weight:700;letter-spacing:.02em;font-size:10px;text-transform:uppercase;color:#7f8aa0;}
.tl-now{font-weight:600;color:#e8ecf2;font-size:12px;}
.tl-now b{color:#8fb6e8;font-weight:600;}
.tl-spacer{flex:1 1 auto;}

/* --- body (scrolls) ------------------------------------------------------ */
.tl-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 10px 9px;display:flex;flex-direction:column;gap:7px;}
.tl-row{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;}
.tl-lbl{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#6d778b;
  margin:0 0 4px;font-weight:700;}

/* chips — flat tabs, not capsules ---------------------------------------- */
.tl-chip{
  position:relative;appearance:none;font:inherit;font-weight:600;font-size:11.5px;
  background:#1a1f28;color:#c2ccda;border:1px solid #2c333f;border-radius:6px;
  padding:5px 9px;min-height:30px;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.tl-chip:hover{background:#20262f;color:#eef2f8;}
/* selected: quiet tint + a tab underline, deliberately NOT a solid fill */
.tl-chip[aria-pressed="true"]{background:#1b2330;color:#eef2f8;border-color:#3f4a5c;
  box-shadow:inset 0 -2px 0 #6f93d6;}
.tl-chip .tl-tone{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#8994a8;}
.tl-chip[aria-pressed="true"] .tl-tone{color:#aebfda;}
.tl-sws{display:inline-flex;align-items:center;flex:0 0 auto;}
.tl-chip .tl-sw,.tl-chip .tl-sw-2{width:13px;height:13px;border-radius:3px;
  border:1px solid rgba(255,255,255,.25);flex:0 0 auto;}
.tl-chip .tl-sw-2{margin-left:-4px;}

.tl-star-mark{position:absolute;top:-6px;right:-5px;background:#e8b53a;color:#241a03;
  font-size:9px;font-weight:800;line-height:1;border-radius:20px;padding:2px 4px;
  border:1px solid #12151b;display:none;}
.tl-chip[data-starred="1"] .tl-star-mark{display:block;}
.tl-chip[data-starred-here="1"]{border-color:#e8b53a;box-shadow:inset 0 -2px 0 #e8b53a;}

/* actions — flat buttons, selected shown with a tint, not a fill ---------- */
.tl-btn{appearance:none;font:inherit;font-weight:600;font-size:11px;cursor:pointer;
  background:#1a1f28;color:#c2ccda;border:1px solid #2c333f;border-radius:6px;
  padding:5px 9px;min-height:30px;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,border-color .15s,color .15s;}
.tl-btn:hover{background:#20262f;color:#fff;}
.tl-btn[aria-pressed="true"]{background:#1b2330;border-color:#4f5d73;color:#eef2f8;
  box-shadow:inset 0 -2px 0 #6f93d6;}
.tl-btn[disabled]{opacity:.4;cursor:not-allowed;}

/* the star: a gold hold-to-remove control — its fill bar is an affordance,
   not a toggle, so it keeps its filled look */
.tl-starbtn{position:relative;overflow:hidden;border-color:#3a4050;}
.tl-starbtn.is-on{background:#2e2712;border-color:#e8b53a;color:#ffd978;box-shadow:none;}
.tl-starbtn .tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(232,181,58,.32);
  pointer-events:none;}
.tl-starbtn.holding .tl-fill{width:100%;transition:width .75s linear;}
.tl-starbtn.armed{border-color:#ff9b9b;color:#ffc9c9;background:#3a1b1b;box-shadow:none;}

.tl-hint{font-size:10px;color:#78829a;margin:0;line-height:1.4;}
.tl-hint b{color:#e8b53a;font-weight:600;}

/* --- resize handles: one per grabbable edge (JS shows the valid ones) ---- */
.tl-rz{position:absolute;z-index:6;display:none;touch-action:none;}
.tl-rz.e-n{top:0;left:8px;right:8px;height:7px;cursor:ns-resize;}
.tl-rz.e-s{bottom:0;left:8px;right:8px;height:7px;cursor:ns-resize;}
.tl-rz.e-w{left:0;top:8px;bottom:8px;width:7px;cursor:ew-resize;}
.tl-rz.e-e{right:0;top:8px;bottom:8px;width:7px;cursor:ew-resize;}

/* --- snap preview while dragging near an edge ---------------------------- */
.tl-snap{position:fixed;z-index:8999;pointer-events:none;
  background:rgba(111,147,214,.14);border:1.5px dashed rgba(143,182,232,.72);border-radius:10px;}

/* collapsed pill ---------------------------------------------------------- */
.tl-pill{position:fixed;right:14px;bottom:14px;z-index:9000;appearance:none;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;
  background:#12151b;color:#e8ecf2;border:1px solid #2b313b;border-radius:999px;
  padding:8px 13px;min-height:38px;box-shadow:0 8px 24px rgba(0,0,0,.4);display:none;
  align-items:center;gap:7px;}
.tl-pill.show{display:inline-flex;}

/* short row mode: five or fewer finalists, one tight row ------------------ */
.tl-short .tl-chip{flex:1 1 0;min-width:120px;justify-content:center;padding:6px 9px;
  min-height:38px;font-size:11.5px;flex-direction:column;gap:1px;text-align:center;}
.tl-short .tl-chip .tl-tone{font-size:9px;}

/* --- adaptive: shed the inessential, shrink the rest --------------------
   Set by a ResizeObserver in theme-lab.js. As the panel gets small the hint
   goes first, then the section labels; narrow drops the bar description and the
   tone weight, then stacks the chips. The chips, the star and the actions —
   the things you actually pick with — always stay. -------------------------- */
.tl[data-h="sm"] .tl-hint,
.tl[data-h="xs"] .tl-hint{display:none;}
.tl[data-h="xs"] .tl-lbl{display:none;}
.tl[data-h="xs"] .tl-body{gap:5px;padding:6px 9px 7px;}
.tl[data-w="sm"] .tl-now,
.tl[data-w="xs"] .tl-now{display:none;}
.tl[data-w="sm"] .tl-chip .tl-tone,
.tl[data-w="xs"] .tl-chip .tl-tone{display:none;}
.tl[data-w="xs"] .tl-name{display:none;}
.tl[data-w="xs"] .tl-chip{padding:5px 7px;font-size:11px;min-height:28px;}
.tl[data-w="xs"] .tl-row{flex-direction:column;align-items:stretch;}
.tl[data-w="xs"] .tl-short .tl-chip{flex-direction:row;justify-content:flex-start;min-height:30px;}

@media (max-width:720px){
  .tl-chip,.tl-btn{min-height:36px;}
}
@media (prefers-reduced-motion:reduce){
  .tl-starbtn.holding .tl-fill{transition:none;}
}