/* Step 6 (6 Nov redesign): Tools (core/more.html) as a toolbox, and Settings > Your tools (core/tools.html) in the
   same tile look. The shelves are the van's (docs/redesign/first-run/index.html, section 7). A difference between
   the looks is a --tb-* token; the dark block and the auto-on-a-dark-phone block stay identical. The tile paints
   (yellow, forest, the gradient) are the same in both looks, as in the prototype. */
:root,[data-theme=light]{
  --tb-k0:#d7f5e8; --tb-k0-edge:inset 0 0 0 1.5px #b9e6d2; --tb-k2:#ffffff; --tb-k2-edge:inset 0 0 0 1.5px #d3dad5;
  --tb-plank:linear-gradient(#c3ccc6,#a7b1ab); --tb-plank-sh:0 6px 10px #17211d22; --tb-chip:#ffffff; --tb-chip-edge:#d3dad5;
}
[data-theme=dark]{
  --tb-k0:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --tb-k0-edge:inset 0 0 0 0 transparent; --tb-k2:#f4f5f2; --tb-k2-edge:inset 0 0 0 0 transparent;
  --tb-plank:linear-gradient(#3a434b,#20272e); --tb-plank-sh:0 6px 10px #0006; --tb-chip:#141a20; --tb-chip-edge:#ffffff14;
}
@media (prefers-color-scheme:dark){
[data-theme=auto]{
  --tb-k0:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --tb-k0-edge:inset 0 0 0 0 transparent; --tb-k2:#f4f5f2; --tb-k2-edge:inset 0 0 0 0 transparent;
  --tb-plank:linear-gradient(#3a434b,#20272e); --tb-plank-sh:0 6px 10px #0006; --tb-chip:#141a20; --tb-chip-edge:#ffffff14;
}
}
#app main.tb{padding-top:var(--jz-s2)}
#app main.tb .tb-top{position:relative;padding:var(--jz-s2) var(--jz-s1) 0}
#app main.tb .tb-title{margin:0;font:800 40px/1 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink);text-transform:none}
#app main.tb .tb-trades{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
#app main.tb .tb-trade{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;background:var(--tb-chip);box-shadow:0 0 0 1.5px var(--tb-chip-edge);font:700 15px/1 var(--jz-sans);color:var(--jz-ink)}
#app main.tb .tb-change{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;margin-left:auto;font:700 16px var(--jz-sans);color:var(--jz-forest);text-decoration:underline;text-underline-offset:4px}
#app main.tb .tb-bar{margin:6px 0 0;font:500 15px/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app main.tb .tb-shelves{display:block;margin:0;padding:0;background:none;box-shadow:none}
#app main.tb .tb-shelf{margin-top:26px}
#app main.tb .tb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--jz-s1) 10px}
#app main.tb .tb-head h2{margin:0;font:800 22px/1.1 var(--jz-display);letter-spacing:-.01em;color:var(--jz-ink);text-transform:none}
#app main.tb .tb-count{font:700 15px var(--jz-sans);color:var(--jz-ink-2)}
#app main.tb .tb-todo{padding:3px 11px;border-radius:999px;background:#ffb547;color:#06100c;font:700 15px var(--jz-sans)}
#app main.tb .tb-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 0 16px}
#app main.tb .tb-grid:after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:10px;border-radius:4px;background:var(--tb-plank);box-shadow:var(--tb-plank-sh)}
/* a tile: a case on the shelf */
#app .tt{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:112px;padding:12px;border-radius:20px;text-align:left;text-decoration:none;color:#06100c;box-shadow:inset 0 -5px 0 #0000001a;transition:transform var(--jz-dur-press,120ms) ease}
#app .tt:active{transform:scale(.97)}
#app .tt:focus-visible{outline:3px solid var(--jz-forest);outline-offset:3px}
#app .tt .tt-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#app .tt .tt-ic svg .d{stroke:currentColor}
#app .tt b{display:block;font:800 21px/1.02 var(--jz-display);letter-spacing:-.01em;color:inherit;overflow-wrap:anywhere}
#app .tt small{display:block;margin-top:4px;font:600 14px/1.2 var(--jz-sans);color:inherit;opacity:.86}
#app .tt .tt-flag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:#06100c;color:#c6ff5e;font:700 14px/1.2 var(--jz-sans);font-style:normal}
#app .tt .tt-flag.is-late{color:#ffb547}
#app .tt.tt-jobs,#app .tt.tt-day{background:var(--tb-k0);box-shadow:var(--tb-k0-edge),inset 0 -5px 0 #0000000f}
#app .tt.tt-trade{background:#ffd23f}
#app .tt.tt-every,#app .tt.tt-clients,#app .tt.tt-books{background:var(--tb-k2);box-shadow:var(--tb-k2-edge),inset 0 -5px 0 #0000000f}
#app .tt.tt-site{background:#306d55;color:#f4f5f2}
[data-side=beauty] #app .tt.tt-day{background:linear-gradient(120deg,#ffc2ad,#f6b9e6)}
#app .tt.tt-add{background:transparent;border:2px dashed var(--jz-edge);color:var(--jz-ink);box-shadow:none}
#app .tt.tt-add .tt-ic svg{stroke:var(--jz-forest)}
#app main.tb .tb-foot{margin:22px var(--jz-s1) 0;font:600 16px/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app main.tb .tb-settings{margin-top:var(--jz-s6)}
@media (prefers-reduced-motion:reduce){#app .tt{transition:none}}

/* ---- Settings > Your tools (core/tools.html): the same tiles, each with its switch ---- */
#app main.tools .yt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 var(--jz-s4);padding:0;background:none;box-shadow:none;border-radius:0}
#app main.tools .yt-grid>.tt{cursor:pointer;min-height:132px}
#app main.tools .yt-grid>.tt .tt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#app main.tools .yt-grid>.tt input.switch{flex:none;margin:0}
#app main.tools .yt-grid>.tt:has(input:not(:checked)){background:var(--jz-surface);color:var(--jz-ink-2);box-shadow:0 0 0 1.5px var(--jz-edge)}
#app main.tools .yt-grid>.tt:has(input:not(:checked)) b{color:var(--jz-ink)}
#app main.tools .yt-grid>.tt:has(input:focus-visible){outline:3px solid var(--jz-forest);outline-offset:3px}
#app main.tools .yt-grid .onbar{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:#06100c;color:#c6ff5e;font:700 13px/1.2 var(--jz-sans)}
#app main.tools .yt-shelf{margin:var(--jz-s6) var(--jz-s1) 10px;font:800 22px/1.1 var(--jz-display);letter-spacing:-.01em;color:var(--jz-ink);text-transform:none}
#app .tt.tt-jeevz{background:var(--jz-surface);color:var(--jz-ink);box-shadow:0 0 0 1.5px var(--jz-edge)}
#app main.tb .tb-change{position:absolute;right:0;top:4px;margin:0}
#app main.tb .tb-title{padding-right:96px}
/* a switch on a painted tile: a dark track on the light paints, a lime one on forest, so "on" reads in both looks */
#app main.tools .yt-grid>.tt input.switch:checked{background:#06100c}
#app main.tools .yt-grid>.tt.tt-site input.switch:checked{background:#c6ff5e}
#app main.tools .yt-grid>.tt.tt-site input.switch:checked::after{background:#06100c}