/* ======================================================================
   HOT BOARDS - print-defaults.css
   Panel chrome for the Print Defaults screen (pill rail, toggle rows,
   switches, footer). The live-preview card itself needs NO css here --
   it renders through the real .pb-card/.pbl* rules already loaded by
   print-offense.css, so it can never visually drift from the real card.
   ====================================================================== */

.pdz-wrap { max-width: 1320px; margin: 0 auto; padding: 34px 40px 60px; }
.pdz-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.pdz-sub { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-secondary); max-width: 70ch; margin: 6px 0 22px; }
.pdz-sub b { color: var(--text-body); font-weight: 600; }

.pdz-shell { background: var(--surface-panel); border: 1px solid var(--border-hair); border-radius: var(--radius-lg); overflow: hidden; }

.pdz-pillrail { display: flex; flex-wrap: wrap; gap: 7px; padding: 18px 26px; border-bottom: 1px solid var(--border-hair); background: var(--surface-raised); }
.pdz-pill {
  position: relative; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-strong);
  padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pdz-pill:hover { border-color: var(--alpha-3); color: var(--text-body); }
.pdz-pill:focus-visible { outline: 2px solid var(--heat-400); outline-offset: 2px; }
.pdz-pill.active { background: var(--accent-grad); border-color: transparent; color: var(--text-on-heat); box-shadow: 0 2px 10px var(--heat-glow); }
.pdz-pill .pdz-cdot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--heat-400); border: 2px solid var(--surface-raised); display: none; }
.pdz-pill.has-custom .pdz-cdot { display: block; }
.pdz-pill.active .pdz-cdot { border-color: var(--heat-500); }

.pdz-cols { display: flex; align-items: flex-start; gap: 0; }
.pdz-settings-col { flex: 1 1 460px; min-width: 0; }
.pdz-preview-col { flex: 0 0 420px; padding: 26px 30px 26px 0; position: sticky; top: 20px; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (max-width: 1050px) {
  .pdz-cols { flex-direction: column; }
  .pdz-preview-col { position: static; padding: 22px 26px 6px; align-self: stretch; }
}
.pdz-preview-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); align-self: flex-start; padding-left: 2px; }
/* Deliberately NOT #printCanvases -- that id belongs to the real My Hotboard
   print container (index.html, inside #app). This screen loads earlier in
   the document, so reusing it shadowed the real one: every board-render call
   resolved to this (empty, hidden) element instead, and My Hotboard stopped
   rendering. Own id here, plus the handful of #printCanvases-scoped rules
   from print-offense.css repeated under it (verbatim, so the preview still
   matches the real card) since those selectors won't match this id. */
#pdzPreviewCanvas { width: 100%; max-width: 340px; }
#pdzPreviewCanvas .pb-card-board > [data-auto="statrule"],
#pdzPreviewCanvas .pb-card-board > [data-auto="statrule"] ~ * { background: #fafafa; }
#pdzPreviewCanvas .pb-card-board > .pb-band,
#pdzPreviewCanvas .pb-card-board > [data-auto="statrule"] ~ * { font-size: 9.5px; }
#pdzPreviewCanvas .pb-card-board > [data-auto="statrule"] .pbl-rule { border-top: 1px solid #999; margin: 0; }
#pdzPreviewCanvas .pb-card-board > [data-auto="biorule"] .pbl-rule { border-top: 2px solid #ccc; margin: 0; }
#pdzPreviewCanvas .pb-card-board > [data-auto="bionote"] { background: transparent; border: 0; padding-left: 0; }
#pdzPreviewCanvas .pb-card-board > [data-auto="bionote"] .pbl-tp { margin-top: 0; }
#pdzPreviewCanvas .pb-card-board > [data-auto="gamenote"] { background: transparent; border: 0; margin: 1px 0 7px; }
#pdzPreviewCanvas .pb-card-board > [data-auto="gamenote"] .pbl-tp { margin-top: 0; }
#pdzPreviewCanvas .pb-card-board > [data-auto="gamenote"] + [data-auto="bionote"] { border-top: 1px solid #dfe2e7; padding-top: 4px; margin-top: 3px; }

.pdz-sections { padding: 6px 26px 4px; }
.pdz-section { padding: 18px 0; border-bottom: 1px solid var(--border-hair); }
.pdz-section:last-child { border-bottom: none; }
.pdz-section-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-body); margin: 0 0 2px; }
.pdz-section-note { font-family: var(--font-sans); font-size: 11.5px; color: var(--text-faint); margin: 2px 0 10px; }

.pdz-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 10px; margin: 0 -10px; border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: background .15s, border-color .15s; }
.pdz-row.is-custom { border-left-color: var(--heat-500); background: var(--heat-wash); }
.pdz-row-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-body); font-weight: 500; }
.pdz-custom-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .03em; color: var(--heat-400); background: var(--heat-wash); border-radius: 4px; padding: 1px 5px; display: none; }
.pdz-row.is-custom .pdz-custom-tag { display: inline-block; }

.pdz-period { margin-top: 3px; }
.pdz-period-row .pdz-row-label { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.pdz-subrow { padding-left: 22px; margin-left: 0; position: relative; }
.pdz-subrow::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.pdz-subrow:last-of-type::before { bottom: 50%; }
.pdz-subrow .pdz-row-label { font-size: 11.5px; color: var(--text-secondary); font-weight: 500; }
.pdz-subrow.is-disabled { opacity: .4; }
.pdz-subrow.is-disabled .pdz-switch { cursor: default; }
.pdz-primary-tag { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .03em; color: var(--positive); background: var(--positive-wash); border-radius: 4px; padding: 1px 4px; }
.pdz-empty-note { font-family: var(--font-sans); font-size: 11.5px; color: var(--text-faint); background: var(--surface-raised); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; margin: 4px 0 0; line-height: 1.5; }

.pdz-switch { position: relative; width: 29px; height: 17px; border-radius: var(--radius-pill); background: var(--ink-700); border: 1px solid var(--border-strong); cursor: pointer; flex-shrink: 0; padding: 0; transition: background .15s, border-color .15s; }
.pdz-switch:focus-visible { outline: 2px solid var(--heat-400); outline-offset: 2px; }
.pdz-switch.on { background: var(--heat-600); border-color: var(--heat-500); }
.pdz-switch-knob { position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-100); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .16s cubic-bezier(.22,1,.36,1); }
.pdz-switch.on .pdz-switch-knob { transform: translateX(12px); background: var(--text-on-heat); }

.pdz-footerbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px; background: var(--surface-raised); border-top: 1px solid var(--border-hair); flex-wrap: wrap; }
.pdz-diffcount { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.pdz-diffcount b { color: var(--heat-300); font-weight: 600; }
.pdz-footer-actions { display: flex; align-items: center; gap: 10px; }
.pdz-resetbtn { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-strong); padding: 9px 14px; border-radius: var(--radius-md); cursor: pointer; transition: color .15s, border-color .15s; }
.pdz-resetbtn:hover { color: var(--text-strong); border-color: var(--alpha-3); }
.pdz-resetbtn:disabled { opacity: .4; cursor: default; }
.pdz-synced { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint); }
.pdz-synced svg { width: 12px; height: 12px; color: var(--positive); flex-shrink: 0; }

/* "Update all cards" sits beside the position reset. Quieter than the reset --
   it is the safe, non-destructive one of the pair. */
.pdz-updatebtn{background:transparent;border:1px solid rgba(182,138,78,.55);color:#B68A4E;
  font:600 11px/1 "Saira Condensed",system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 14px;border-radius:4px;cursor:pointer;
  margin-right:8px;transition:background .15s,border-color .15s}
.pdz-updatebtn:hover{background:rgba(182,138,78,.14);border-color:rgba(182,138,78,.85)}
.pdz-updatebtn:focus-visible{outline:2px solid #B68A4E;outline-offset:2px}

/* Default note text size -- a personal (not per-position) stepper in the Notes
   section. Mirrors the card editor's A-/13/A+ control so it reads as the same
   instrument; the readout doubles as reset, same as everywhere else. */
.pdz-szrow { border-top: 1px dashed var(--border-hair); margin-top: 4px; padding-top: 9px; }
.pdz-szhint { font-size: 10.5px; color: var(--text-faint); font-weight: 400; }
.pdz-szstep { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pdz-szbtn, .pdz-szro { font-family: var(--font-mono); background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 4px; cursor: pointer; padding: 2px 7px; line-height: 1.4; transition: color .15s, border-color .15s; }
.pdz-szbtn:hover, .pdz-szro:hover { color: var(--text-strong); border-color: var(--alpha-3); }
.pdz-szbtn:disabled { opacity: .35; cursor: default; }
.pdz-szro { font-size: 12px; font-weight: 600; min-width: 30px; text-align: center; }
.pdz-szrow.is-custom .pdz-szro { color: var(--heat-300); border-color: var(--heat-500); }