/* ============================================================
   labels.css — /labels/, every plate sold on its own (2026-09-25)

   Loaded on that page only, after clean.css, so it borrows the
   finish's tokens (glass, hairline, ink, tile) and adds nothing to
   the palette. Colour comes from the plate artwork alone.
   ============================================================ */

/* ---------------- the head: copy left, how-it-works right ---------------- */
.lb-head{padding-bottom:clamp(32px,4vw,56px)}
.lb-how{grid-column:2;grid-row:1 / span 4;align-self:center;list-style:none;margin:0;padding:8px 24px;
  counter-reset:lb;border:1px solid var(--glass-edge);border-radius:var(--r-card);
  background:var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--glass-shadow)}
.lb-how li{counter-increment:lb;display:grid;grid-template-columns:28px 1fr;column-gap:12px;
  padding:16px 0;border-top:1px solid var(--hairline)}
.lb-how li:first-child{border-top:0}
.lb-how li::before{content:counter(lb);grid-row:1 / span 2;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--action-fg);
  background:var(--action-bg)}
.lb-how b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.lb-how span{font-size:14.5px;color:var(--pencil);line-height:1.5}
@media (max-width:900px){.lb-how{grid-column:1;grid-row:auto;margin-top:28px}}

/* ---------------- toolbar ---------------- */
/* not sticky (Jake, 2026-09-26: he did not want it following him down the page) */
.lb-bar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;
  padding:14px 16px;margin:0 -8px 8px;border-radius:14px;border:1px solid var(--glass-edge);
  background:color-mix(in srgb,var(--canvas) 95%,transparent);
  -webkit-backdrop-filter:var(--blur,blur(14px));backdrop-filter:var(--blur,blur(14px));
  box-shadow:var(--glass-shadow)}
.lb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lb-field label,.lb-qlab,.lb-bulk-go label{font-size:13px;color:var(--label);font-weight:500}
.lb-search{flex:1 1 260px}
.lb-field input,.lb-field select,.lb-bulk-go input{font:inherit;font-size:15px;color:var(--ink);
  background:var(--canvas);border:1px solid var(--divider);border-radius:10px;height:42px;padding:0 12px;
  min-width:0}
.lb-field select{padding-right:32px}
.lb-field input:focus,.lb-field select:focus,.lb-bulk-go input:focus,.lb-qty:focus{outline:2px solid var(--ink);
  outline-offset:1px}
.lb-chips{display:flex;flex-wrap:wrap;gap:6px}
.lb-chip{font:inherit;font-size:14px;font-weight:500;color:var(--pencil);background:transparent;
  border:1px solid var(--divider);border-radius:999px;height:36px;padding:0 14px;cursor:pointer}
.lb-chip:hover{color:var(--ink);border-color:var(--ink)}
.lb-chip[aria-pressed="true"]{color:var(--action-fg);background:var(--action-bg);border-color:var(--action-bg)}

.lb-bulk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  padding:14px 0 6px}
.lb-shown{margin:0;font-size:15px;color:var(--pencil)}
.lb-shown b{color:var(--ink)}
.lb-bulk-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lb-bulk-go input{width:84px;height:40px}
.lb-bulk-go .btn{min-height:40px}
.lb-none{padding:32px 0;font-size:16px}

/* ---------------- groups ---------------- */
.lb-group{margin-top:clamp(36px,5vw,56px)}
.lb-group[hidden]{display:none}
.lb-ghd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.lb .lb-ghd h2{margin:0;font-size:clamp(1.4rem,2.4vw,28px) !important;font-weight:600;letter-spacing:-.025em;
  line-height:1.2;max-width:none}
.lb-gn{font-size:14px;color:var(--label);white-space:nowrap}
.lb-gn b{color:var(--ink);font-weight:600}
.lb-group > .note{margin:12px 0 18px;max-width:72ch}

/* ---------------- cards ---------------- */
.lb-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.lb-card{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:14px;
  background:var(--glass-hi);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.lb-card[hidden]{display:none}
.lb-card.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.lb-card:target{box-shadow:0 0 0 3px var(--amber)}
.lb-art{height:150px;display:grid;place-items:center;padding:18px;background:var(--tile);
  border-bottom:1px solid var(--hairline)}
.lb-art img{display:block;max-width:100%;max-height:114px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
.lb-info{flex:1;padding:14px 16px 4px;display:flex;flex-direction:column;gap:4px}
.lb-name{margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.lb-meta,.lb-rule,.lb-where{margin:0;font-size:13.5px;line-height:1.45;color:var(--pencil)}
.lb-rule{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--label)}
.lb-where{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lb-tags{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.lb-tags span{font-size:12px;font-weight:500;line-height:1;padding:5px 8px;border-radius:6px;
  border:1px solid var(--divider);color:var(--pencil)}
.lb-tags span[hidden]{display:none}
.lb-tags .lb-need{border-style:dashed}
.lb-buy{display:flex;align-items:center;gap:10px;padding:12px 16px 16px}
.lb-qlab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lb-step{display:flex;align-items:stretch;border:1px solid var(--divider);border-radius:10px;overflow:hidden;
  background:var(--canvas)}
.lb-step button{font:inherit;font-size:18px;width:40px;height:40px;border:0;background:transparent;
  color:var(--ink);cursor:pointer}
.lb-step button:hover:not(:disabled){background:var(--glass-line)}
.lb-step button:disabled{color:var(--faint);cursor:default}
.lb-qty{font:inherit;font-size:15px;font-weight:600;width:58px;height:40px;border:0;
  border-left:1px solid var(--divider);border-right:1px solid var(--divider);text-align:center;
  background:transparent;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.lb-qty::-webkit-inner-spin-button,.lb-qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.lb-add{margin-left:auto;font:inherit;font-size:14.5px;font-weight:500;height:40px;padding:0 18px;
  border-radius:10px;border:1px solid var(--action-bg);background:var(--action-bg);color:var(--action-fg);
  cursor:pointer}
.lb-card.on .lb-add{background:transparent;color:var(--ink);border-color:var(--divider)}
html:not(.js) .lb-buy{display:none}

.lb-foot{margin-top:clamp(40px,5vw,64px)}

/* ---------------- the basket ---------------- */
.lb-cart{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 16px 16px;pointer-events:none}
.lb-cart[hidden]{display:none}
.lb-cart-in{max-width:var(--wrap);margin:0 auto;pointer-events:auto;border-radius:16px;
  border:1px solid var(--glass-edge);background:color-mix(in srgb,var(--canvas) 88%,transparent);
  -webkit-backdrop-filter:var(--blur,blur(16px));backdrop-filter:var(--blur,blur(16px));
  box-shadow:0 18px 48px -16px rgba(0,0,0,.35),var(--glass-shadow);overflow:hidden}
.lb-cart-bar{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px}
.lb-cart-sum{margin:0;flex:1;min-width:0;font-size:15px;color:var(--pencil);line-height:1.35}
.lb-cart-sum b{color:var(--ink);font-weight:600;font-size:17px}
.lb-cart-brk{display:block;font-size:13px;color:var(--label)}
.lb-cart-rev{font:inherit;font-size:14.5px;font-weight:500;height:44px;padding:0 16px;border-radius:10px;
  border:1px solid var(--divider);background:transparent;color:var(--ink);cursor:pointer}
.lb-cart-rev[aria-expanded="true"]{border-color:var(--ink)}
.lb-cart-go{min-height:44px;white-space:nowrap}
.lb-cart-list{max-height:min(52vh,460px);overflow:auto;border-bottom:1px solid var(--hairline);padding:6px 0}
.lb-cart-list[hidden]{display:none}
.lb-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:8px 20px}
.lb-row + .lb-row{border-top:1px solid var(--hairline)}
.lb-row img{width:64px;height:40px;object-fit:contain;background:var(--tile);border-radius:6px;padding:3px}
.lb-row .n{font-size:14.5px;font-weight:500;line-height:1.3}
.lb-row .m{font-size:12.5px;color:var(--label)}
.lb-row .r{display:flex;align-items:center;gap:8px}
.lb-row input{font:inherit;font-size:14.5px;font-weight:600;width:64px;height:36px;text-align:center;
  border:1px solid var(--divider);border-radius:8px;background:var(--canvas);color:var(--ink)}
.lb-row button{font:inherit;font-size:13.5px;color:var(--pencil);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;padding:6px}
.lb-row button:hover{color:var(--ink)}
.lb-row .n button{font-size:inherit;font-weight:inherit;color:var(--ink);text-decoration:none;padding:0;
  text-align:left;line-height:inherit}
.lb-row .n button:hover{text-decoration:underline}
.lb-cart-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px 6px;
  font-size:13px;color:var(--label)}
.lb-cart-tools button{font:inherit;font-size:13.5px;color:var(--pencil);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;padding:4px 0}
/* whatever is scrolled or tabbed into view clears the sticky header and
   toolbar above it and the basket below it */
html.lb-page{scroll-padding-top:84px}
html.lb-page.lb-has-cart{scroll-padding-bottom:120px}
@media (max-width:700px){html.lb-page{scroll-padding-top:84px}}
/* room under the last card so the basket never sits on it */
body.lb-has-cart .foot{padding-bottom:120px}
body.lb-has-cart main{padding-bottom:40px}

@media (max-width:700px){
  .lb-bar{position:static;margin:0 0 8px}
  .lb-chips{overflow-x:auto;flex-wrap:nowrap;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .lb-chip{flex:0 0 auto}
  .lb-field{flex:1 1 100%}
  .lb-bulk-go{width:100%}
  .lb-bulk-go label{flex:1 1 100%}
  .lb-cart{padding:0 8px 8px}
  .lb-cart-bar{padding:10px 10px 10px 14px;gap:8px}
  .lb-cart-rev{padding:0 12px}
  .lb-cart-brk{display:none}
  .lb-row{grid-template-columns:48px 1fr;padding:8px 14px}
  .lb-row img{width:48px;height:32px}
  .lb-row .r{grid-column:2}
}
@media print{.lb-bar,.lb-bulk,.lb-buy,.lb-cart{display:none !important}}

/* ============================================================
   The shop (2026-09-25, second pass): a card opens the label's own
   view; the cart holds one line per set-up plate.
   ============================================================ */
.lb-card{cursor:pointer}
.lb-card:hover{border-color:var(--divider)}
.lb-card.on:hover{border-color:var(--ink)}
.lb-open{color:inherit;text-decoration:none}
.lb-open::after{content:"";position:absolute;inset:0}
.lb-card{position:relative}
.lb-open:focus-visible{outline:none}
.lb-card:has(.lb-open:focus-visible){box-shadow:0 0 0 2px var(--ink)}
.lb-buy{justify-content:space-between;position:relative;z-index:1}
.lb-incart{font-size:13.5px;font-weight:600;color:var(--ink)}
.lb-incart[hidden]{display:none}
.lb-add{margin-left:auto}
.lb-card.on .lb-add{background:transparent;color:var(--ink);border-color:var(--divider)}

/* ---------------- the label's view ---------------- */
html.lb-dlg-open{overflow:hidden}
.lb-dlg{padding:0;border:0;background:transparent;max-width:min(1080px,calc(100vw - 32px));width:100%;
  max-height:calc(100dvh - 32px);color:var(--ink)}
.lb-dlg::backdrop{background:rgba(8,10,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lb-dlg-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);margin:0;
  background:var(--canvas);border:1px solid var(--glass-edge);border-radius:18px;overflow:hidden;
  max-height:calc(100dvh - 32px);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.lb-dlg-art{background:var(--tile);display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(20px,4vw,48px);border-right:1px solid var(--hairline);min-height:0}
.lb-dlg-stage{width:100%;max-height:52vh;display:grid;place-items:center;margin:0 auto}
.lb-dlg-stage svg,.lb-dlg-stage img{display:block;width:100%;height:100%;max-height:52vh;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.22))}
.lb-dlg-cap{margin:0;text-align:center;font-size:13px;line-height:1.5;color:#6e6c68}
.lb-dlg-side{position:relative;overflow:auto;padding:28px 28px 0;display:flex;flex-direction:column;gap:6px;
  max-height:calc(100dvh - 34px)}
.lb-dlg-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;border:1px solid var(--divider);
  background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.lb-dlg-x:hover{border-color:var(--ink)}
.lb-dlg-kick{margin:0;font-size:13px;color:var(--label);padding-right:44px}
.lb-dlg-side h2{margin:2px 0 0;font-size:clamp(1.35rem,2.4vw,26px);font-weight:600;letter-spacing:-.025em;
  line-height:1.2;padding-right:44px}
.lb-dlg-rule{margin:0;font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--label)}
.lb-dlg-where{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--pencil)}
.lb-dlg-set{border:0;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--hairline);min-width:0}
.lb-dlg-set legend{float:left;width:100%;padding:0;margin:0 0 10px;font-size:15px;font-weight:600}
.lb-dlg-set legend + *{clear:both}
.lb-dlg-hint{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--label)}
.lb-dlg-set .lb-dlg-hint:last-child{margin:10px 0 0}
.lb-dlg-note{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--panel);font-size:14px;
  line-height:1.5;color:var(--pencil)}
.lb-opts{display:grid;gap:8px}
.lb-opt{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border:1px solid var(--divider);
  border-radius:12px;cursor:pointer}
.lb-opt:hover{border-color:var(--pencil)}
.lb-opt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.lb-opt input{margin:3px 0 0;accent-color:var(--ink)}
.lb-opt b{display:block;font-size:14.5px;font-weight:600}
.lb-opt small{display:block;font-size:13px;color:var(--label);line-height:1.45}
.lb-check{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:14.5px;cursor:pointer}
.lb-check input{accent-color:var(--ink);width:16px;height:16px}
.lb-dlg-field{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:12px;padding:5px 0}
.lb-dlg-field label{font-size:13.5px;color:var(--pencil);line-height:1.35}
.lb-dlg-field input{font:inherit;font-size:15px;height:40px;padding:0 12px;border:1px solid var(--divider);
  border-radius:10px;background:var(--canvas);color:var(--ink);min-width:0}
.lb-dlg-field input:focus{outline:2px solid var(--ink);outline-offset:1px}
.lb-dlg-qty{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lb-quick{display:flex;gap:6px}
.lb-quick button{font:inherit;font-size:14px;font-weight:500;height:40px;min-width:48px;padding:0 10px;
  border-radius:10px;border:1px solid var(--divider);background:transparent;color:var(--pencil);cursor:pointer}
.lb-quick button:hover{color:var(--ink);border-color:var(--ink)}
.lb-quick button[aria-pressed="true"]{background:var(--action-bg);color:var(--action-fg);border-color:var(--action-bg)}
.lb-dlg-go{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;margin:18px -28px 0;
  padding:14px 28px 18px;background:var(--canvas);border-top:1px solid var(--hairline)}
.lb-dlg-go .btn{min-height:46px}

/* ---------------- toast ---------------- */
.lb-toast{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:80;padding:10px 16px;
  border-radius:12px;background:var(--action-bg);color:var(--action-fg);font-size:14.5px;font-weight:500;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.45);max-width:calc(100vw - 32px)}
.lb-toast[hidden]{display:none}

/* ---------------- cart rows ---------------- */
.lb-row .m.v{color:var(--pencil)}
.lb-row .r{gap:4px}

@media (max-width:820px){
  .lb-dlg{max-width:100vw;max-height:100dvh;margin:0;height:100dvh}
  .lb-dlg-in{display:block;border-radius:0;height:100dvh;max-height:100dvh;overflow:auto;border:0}
  .lb-dlg-art{border-right:0;border-bottom:1px solid var(--hairline);padding:60px 20px 16px}
  .lb-dlg-stage{max-height:none}
  .lb-dlg-stage svg,.lb-dlg-stage img{max-height:none}
  .lb-dlg-side{overflow:visible;padding:18px 16px 0;max-height:none}
  .lb-dlg-x{position:fixed;top:10px;right:10px;background:var(--canvas);z-index:2}
  .lb-dlg-go{margin:18px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .lb-dlg-go .btn{flex:1}
  .lb-dlg-field{grid-template-columns:1fr}
}