/* Callbook Label Builder — tool styles.
 *
 * Layered on top of marketing.css, reusing its tokens (--c-accent, --c-border,
 * --c-bg-subtle …) so the tool reads as part of the site.
 *
 * PRINT RULES ARE LOAD-BEARING — see the @media print block at the bottom
 * before changing any colour there.
 */

/* Light is the default and also the explicit-light case, so one block covers
   both. Category fills are pale here so dark label text stays legible; the dark
   block swaps in saturated equivalents. The :not() keeps an explicit light
   choice winning over a dark system preference. */
:root,
html[data-theme="light"] {
  --lb-panel:    #ffffff;
  --lb-cell:     #f3f4f6;
  --lb-empty:    #fafafa;
  --lb-key-txt:  #111827;
  --lb-hk:       #6b7280;
  --lb-nav:      #dce8f6;
  --lb-target:   #e9dcf3;
  --lb-record:   #f8dada;
  --lb-cue:      #d9f0e3;
  --lb-keypad:   #f3f4f6;
  --lb-mod:      #f8ecd3;
  --lb-sk:       #dff1f4;
  --lb-mac:      #ede4d4;
  --lb-layer:    #cdeeda;
  --lb-blocked:  #e6e6e6;
  --lb-blocked-txt: #9ca3af;
}

/* Dark needs both arms — system preference OR an explicit toggle — and CSS
   cannot OR a media query with a plain selector, so these two blocks stay
   separate. Keep their values identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lb-panel:   #14171d;
    --lb-cell:    #23262d;
    --lb-empty:   #16181d;
    --lb-key-txt: #e6e8ec;
    --lb-hk:      #9aa3b0;
    --lb-nav:     #3b4a5c;
    --lb-target:  #4a3b5c;
    --lb-record:  #5c3b3b;
    --lb-cue:     #3b5c4a;
    --lb-keypad:  #2a2d33;
    --lb-mod:     #5c503b;
    --lb-sk:      #35505c;
    --lb-mac:     #4f4636;
    --lb-layer:   #2f6b4a;
    --lb-blocked: #1c1f25;
    --lb-blocked-txt: #565c66;
  }
}
html[data-theme="dark"] {
  --lb-panel:   #14171d;
  --lb-cell:    #23262d;
  --lb-empty:   #16181d;
  --lb-key-txt: #e6e8ec;
  --lb-hk:      #9aa3b0;
  --lb-nav:     #3b4a5c;
  --lb-target:  #4a3b5c;
  --lb-record:  #5c3b3b;
  --lb-cue:     #3b5c4a;
  --lb-keypad:  #2a2d33;
  --lb-mod:     #5c503b;
  --lb-sk:      #35505c;
  --lb-mac:     #4f4636;
  --lb-layer:   #2f6b4a;
  --lb-blocked: #1c1f25;
  --lb-blocked-txt: #565c66;
}

/* ── Layout ─────────────────────────────────────── */
.lb-wrap { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1.5rem; }
.lb-board { flex: 0 0 auto; }
.lb-side { flex: 1 1 320px; min-width: 300px; }

.lb-toolbar {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .875rem 1rem; margin-top: 1.5rem;
  background: var(--lb-panel);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.lb-toolbar .lb-sep { width: 1px; height: 22px; background: var(--c-border); margin: 0 .25rem; }
.lb-toolbar label { font-size: .8125rem; color: var(--c-text-muted); font-weight: 600; }

.lb-btn {
  background: var(--lb-panel); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: .4rem .75rem; font-size: .8125rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.lb-btn:hover:not(:disabled) { border-color: var(--c-accent); }
.lb-btn:disabled { opacity: .45; cursor: default; }
.lb-btn.on { background: var(--c-accent); border-color: var(--c-accent); color: #1a1100; }

.lb-select, .lb-num {
  background: var(--lb-panel); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: .4rem .5rem; font-size: .8125rem; font-family: inherit;
}
.lb-num { width: 4.25rem; }
#lbCustom[hidden] { display: none; }
#lbCustom { display: inline-flex; gap: .4rem; align-items: center; }

#lbStatus { font-size: .8125rem; color: var(--c-accent); font-weight: 600; margin-left: auto; }

/* ── Board ──────────────────────────────────────── */
.lb-boardwrap {
  background: var(--lb-panel); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1rem; overflow-x: auto;
}
.lb-grid {
  display: grid; gap: 4px;
  grid-template-columns: repeat(var(--lb-cols, 10), 62px);
}
.lb-key {
  position: relative; aspect-ratio: 1 / 1;
  border: 1px solid var(--c-border); border-radius: 4px;
  background: var(--lb-cell); color: var(--lb-key-txt);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; padding: 2px; overflow: hidden; user-select: none;
}
.lb-key:hover { box-shadow: 0 0 0 2px var(--c-accent) inset; }
.lb-key.dragover { box-shadow: 0 0 0 2px #3fa96a inset; }
.lb-lbl { font-size: 9.5px; line-height: 1.18; font-weight: 700; word-break: break-word; }
.lb-alt { font-size: 8px; line-height: 1.15; font-weight: 400; opacity: .75; margin-bottom: 1px; }
.lb-hk {
  position: absolute; bottom: 1px; right: 3px;
  font-size: 7.5px; font-weight: 400; color: var(--lb-hk);
}
.lb-key.empty { background: var(--lb-empty); border-style: dashed; }
.lb-key.empty .lb-lbl { opacity: .35; font-weight: 400; }

/* Keys and palette chips share one fill per category. */
.lb-key.nav,    .lb-chip.nav    { background: var(--lb-nav); }
.lb-key.target, .lb-chip.target { background: var(--lb-target); }
.lb-key.record, .lb-chip.record { background: var(--lb-record); }
.lb-key.cue,    .lb-chip.cue    { background: var(--lb-cue); }
.lb-key.keypad, .lb-chip.keypad { background: var(--lb-keypad); }
.lb-key.mod,    .lb-chip.mod    { background: var(--lb-mod); }
.lb-key.sk,     .lb-chip.sk     { background: var(--lb-sk); }
.lb-key.mac,    .lb-chip.mac    { background: var(--lb-mac); }
.lb-key.layer,  .lb-chip.layer  { background: var(--lb-layer); }
.lb-key.layer  { outline: 1px dashed #3fa96a; outline-offset: -3px; }
.lb-key.blocked {
  background: var(--lb-blocked); border-style: dashed; color: var(--lb-blocked-txt);
}
.lb-key.blocked .lb-lbl { font-size: 8px; font-weight: 400; color: var(--lb-blocked-txt); }

.lb-key.wide { aspect-ratio: auto; height: 62px; grid-column: span 2; }
.lb-key.wide::after {
  content: "2×1"; position: absolute; top: 1px; left: 3px;
  font-size: 7px; color: var(--lb-hk);
}

/* ── Palette ────────────────────────────────────── */
.lb-pal {
  background: var(--lb-panel); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1rem;
}
.lb-layerbar { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .875rem; }
.lb-layerbar strong { font-size: .9375rem; }
.lb-palgroup { margin-bottom: .875rem; }
.lb-palgroup h3 {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--c-text-muted); margin: 0 0 .45rem; font-weight: 700;
}
.lb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-chip {
  border: 1px solid var(--c-border); border-radius: 4px;
  padding: .25rem .45rem; font-size: .6875rem; cursor: grab;
  background: var(--lb-cell); color: var(--lb-key-txt);
  display: flex; gap: .3rem; align-items: baseline;
}
.lb-chip:hover { border-color: var(--c-accent); }
.lb-chip.used { opacity: .35; }
.lb-chip .k { font-size: .625rem; color: var(--lb-hk); }

/* ── Notes & export ─────────────────────────────── */
.lb-note {
  color: var(--c-text-muted); font-size: .8125rem;
  margin: .625rem 2px 0; max-width: 660px; line-height: 1.55;
}
.lb-note strong { color: var(--c-text); }
#lbExport {
  width: 100%; height: 210px; margin-top: .75rem;
  background: var(--lb-empty); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: .625rem; font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace;
}
#lbExport[hidden] { display: none; }

@media (max-width: 640px) {
  .lb-grid { grid-template-columns: repeat(var(--lb-cols, 10), 48px); }
  .lb-key.wide { height: 48px; }
  #lbStatus { margin-left: 0; width: 100%; }
}

/* ── Print ──────────────────────────────────────────────────────────────────
 *
 * DOMAIN CONSTRAINTS — do not "fix" these:
 *
 * 1. The keypad backlight shines UP THROUGH the paper legend. Print fills must
 *    stay pale tints on white. A saturated fill blocks the LED and the key goes
 *    dead in a dark booth. NEVER darken these colours, and never let the dark
 *    theme's variables reach print — every rule below is explicit for that
 *    reason, not by accident.
 * 2. This is a true-size REFERENCE MAP, not a cutting template. X-keys legend
 *    sheets ship pre-die-cut. 0.625" caps on 0.75" centres.
 * 3. Laser printers only. Inkjet smears on X-keys legend stock.
 */
@media print {
  body { background: #fff; color: #000; }
  .nav, .footer, .lb-hero, .lb-toolbar, .lb-side, .lb-note, .lb-intro,
  .lb-disclaimer, #lbExport { display: none !important; }
  .lb-wrap { display: block; margin: 0; }
  .lb-boardwrap { border: none; background: #fff; padding: 0; overflow: visible; }

  .lb-grid {
    gap: .125in !important;
    grid-template-columns: repeat(var(--lb-cols, 10), .625in) !important;
  }
  .lb-key {
    width: .625in; height: .625in; aspect-ratio: auto;
    background: #fff !important; color: #000 !important;
    border: 1px solid #000; border-radius: 2px;
    outline: none !important; box-shadow: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .lb-key.wide { width: 1.375in !important; height: .625in !important; }
  .lb-key.wide::after { display: none; }

  .lb-lbl { font-size: 6.5pt; color: #000 !important; line-height: 1.18; }
  .lb-alt { font-size: 5.5pt; color: #666 !important; line-height: 1.15; opacity: 1; }
  .lb-hk  { font-size: 5pt;  color: #555 !important; }
  .lb-key.empty { border-style: dotted; }
  .lb-key.blocked { background: #ddd !important; }
  .lb-key.blocked .lb-lbl { color: #444 !important; }

  /* Colour mode — pale tints only, so the backlight still reads through. */
  body.lb-printcolor .lb-key.nav     { background: #dce8f6 !important; }
  body.lb-printcolor .lb-key.target  { background: #e9dcf3 !important; }
  body.lb-printcolor .lb-key.record  { background: #f8dada !important; }
  body.lb-printcolor .lb-key.cue     { background: #d9f0e3 !important; }
  body.lb-printcolor .lb-key.keypad  { background: #fff    !important; }
  body.lb-printcolor .lb-key.mod     { background: #f8ecd3 !important; }
  body.lb-printcolor .lb-key.sk      { background: #dff1f4 !important; }
  body.lb-printcolor .lb-key.mac     { background: #ede4d4 !important; }
  body.lb-printcolor .lb-key.layer   { background: #cdeeda !important; }
  body.lb-printcolor .lb-key.blocked { background: #e2e2e2 !important; }
}