/* cq-bookmark.css — bookmark printing + three-word picker.
   Print side is pure black on white: most families print in black and white,
   and anything relying on colour comes out as grey mud. */

/* ───────── the picker (screen only) ───────── */
.cq-pick-back{position:fixed;inset:0;z-index:2147483400;display:grid;place-items:center;
  background:rgba(3,9,19,.78);backdrop-filter:blur(3px);padding:16px}
.cq-pick{width:min(560px,100%);max-height:92svh;overflow:auto;background:#FCF3DC;
  border:2px solid #C9A227;border-radius:16px;padding:22px;
  font-family:Georgia,"Times New Roman",serif;color:#2A1C07;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.cq-pick h2{margin:0 0 4px;font-size:26px;color:#8E2F1C}
.cq-pick-sub{margin:0 0 16px;font:15px/1.5 Arial,sans-serif;color:#5A4A2C}
.cq-pick-code{text-align:center;font:700 clamp(24px,5vw,34px) "Courier New",monospace;
  color:#12305A;background:#FFFDF6;border:2px dashed #8E2F1C;border-radius:10px;
  padding:14px 8px;margin-bottom:16px;word-break:break-word}
.cq-pick-slots{display:grid;gap:9px;margin-bottom:16px}
.cq-pick-slot{display:flex;align-items:center;gap:10px}
.cq-pick-n{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:#12305A;color:#FFF3D0;font:700 13px Arial,sans-serif}
.cq-pick-word{flex:1;text-align:left;padding:12px 14px;border-radius:9px;cursor:pointer;
  border:1px solid #C9A227;background:#fff;color:#12305A;font:700 19px "Courier New",monospace}
.cq-pick-word:hover,.cq-pick-word:focus-visible{background:#FFF6DC;outline:2px solid #C9A227;outline-offset:1px}
.cq-pick-dice{flex:0 0 44px;height:44px;border-radius:9px;cursor:pointer;border:1px solid #C9A227;
  background:#12305A;color:#FFF3D0;font-size:19px;line-height:1}
.cq-pick-dice:hover,.cq-pick-dice:focus-visible{background:#1C4D80}
.cq-pick-actions{display:flex;gap:9px;flex-wrap:wrap}
.cq-pick-btn{flex:1;min-width:150px;padding:13px 18px;border-radius:999px;cursor:pointer;
  border:1px solid #C9A227;background:#fff;color:#8E2F1C;font:700 16px Georgia,serif}
.cq-pick-btn.primary{background:linear-gradient(#A8461F,#7A2C15);color:#FFF3D0}
.cq-pick-btn:hover{filter:brightness(1.06)}
.cq-pick-listwrap{margin-top:16px;border-top:1px solid #D9C48A;padding-top:12px}
.cq-pick-listwrap.is-hidden{display:none}
.cq-pick-listhead{display:flex;gap:8px;align-items:center;margin-bottom:9px}
.cq-pick-listhead span{font:700 13px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8E2F1C}
.cq-pick-listhead input{flex:1;padding:9px 12px;border-radius:8px;border:1px solid #C9A227;
  background:#fff;font:15px Arial,sans-serif;color:#2A1C07}
.cq-pick-close{width:34px;height:34px;border-radius:50%;border:1px solid #C9A227;background:#fff;
  cursor:pointer;font-size:20px;line-height:1;color:#8E2F1C}
.cq-pick-list{max-height:230px;overflow:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px}
.cq-pick-opt{padding:9px 6px;border-radius:7px;border:1px solid #E0CFA0;background:#fff;
  cursor:pointer;font:15px "Courier New",monospace;color:#12305A}
.cq-pick-opt:hover,.cq-pick-opt:focus-visible{background:#FFF0C9;border-color:#C9A227}
.cq-pick-empty{grid-column:1/-1;margin:8px 0;color:#7A6540;font:14px Arial,sans-serif}

/* ───────── the bookmark (print) ───────── */
.cq-bm-sheet{display:none}
body.printing-progress-card .cq-bm-sheet{
  display:flex;gap:.14in;justify-content:center;align-items:flex-start;
  width:auto;padding:0;background:#fff;color:#000;margin:0 auto;
  page-break-inside:avoid;break-inside:avoid}

.cq-bm{width:2.2in;height:9.5in;page-break-inside:avoid;break-inside:avoid;position:relative;display:flex;flex-direction:column;
  border:1.5px dashed #777;border-radius:3px;overflow:hidden;background:#fff}
.cq-bm-cut{position:absolute;top:-9px;left:-6px;background:#fff;padding:0 2px;font-size:12px;color:#777}

.cq-bm-half{flex:1 1 50%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:.10in .10in;text-align:center}
/* printed upside down so it reads upright once folded behind the front */
.cq-bm-back{transform:rotate(180deg);border-top:none}

.cq-bm-fold{position:relative;height:0;border-top:1.4px dashed #000}
.cq-bm-fold span{position:absolute;left:50%;top:-7px;transform:translateX(-50%);
  background:#fff;padding:0 6px;font:700 7.5px Arial,sans-serif;letter-spacing:.18em;color:#555}

.cq-bm-front{display:flex;flex-direction:row;align-items:center;gap:.05in}
.cq-bm-brand{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font:700 .3in Georgia,serif;letter-spacing:.04em;color:#000}
.cq-bm-art{display:flex;flex-direction:column;align-items:center;gap:.06in;flex:1;justify-content:center}
.cq-bm-kick{font:700 .08in Arial,sans-serif;letter-spacing:.2em;color:#000}
.cq-bm-rule{display:flex;align-items:center;gap:.04in;font-size:.08in;color:#000}
.cq-bm-rule i{display:block;width:.34in;height:1px;background:#000}
.cq-bm-cannon{width:1.2in;height:auto;display:block;filter:grayscale(1) contrast(1.35)}
.cq-bm-motto{font:italic .105in Georgia,serif;line-height:1.35;color:#000}

.cq-bm-cap{font:700 .08in Arial,sans-serif;letter-spacing:.18em;color:#000}
.cq-bm-code{margin:.07in 0;padding:.09in .05in;width:100%;border:1.5px dashed #000;border-radius:4px;
  font:700 .17in "Courier New",monospace;letter-spacing:.01em;color:#000;word-break:break-word}
.cq-bm-qr{width:.95in;height:.95in;margin:.02in 0}
.cq-bm-qr svg{width:100%;height:100%;display:block}
.cq-bm-scan{font:700 .07in Arial,sans-serif;letter-spacing:.1em;color:#000;margin-bottom:.04in}
.cq-bm-link{font:.062in "Courier New",monospace;color:#000;word-break:break-all;line-height:1.3}
.cq-bm-note{margin-top:.06in;font:.068in/1.35 Arial,sans-serif;color:#222;padding:0 .02in}
.cq-bm-owner{margin-top:.08in;font:.07in Arial,sans-serif;color:#333}
.cq-bm-owner u{display:inline-block;width:1.1in;border-bottom:1px solid #666;text-decoration:none}

@page{ size:letter portrait; margin:0.35in; }
@media print{
  body.printing-progress-card .cq-bm-sheet{width:auto;margin:0}
  html,body{height:auto!important}
  .cq-bm,.cq-bm-half,.cq-bm-code,.cq-bm-qr{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cq-pick-back{display:none!important}
}

/* ── the middle strip, in colour ──
   The outer two stay pure black on white because most families print mono.
   This one is a bonus for anyone who does have colour, and it is chosen so it
   still degrades to readable greys if it lands on a mono printer anyway. */
.cq-bm-color{border-color:#C9A227}
.cq-bm-color .cq-bm-front{
  background:linear-gradient(168deg,#1A3F72 0%,#12305A 52%,#0C2144 100%);color:#F6EBD2}
.cq-bm-color .cq-bm-brand{color:#F5DC93;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.cq-bm-color .cq-bm-kick{color:#F2CB68}
.cq-bm-color .cq-bm-rule{color:#F2CB68}
.cq-bm-color .cq-bm-rule i{background:#C9A227}
.cq-bm-color .cq-bm-motto{color:#F6EBD2}
.cq-bm-color .cq-bm-cannon{filter:none}
.cq-bm-color .cq-bm-fold{border-top-color:#C9A227}
.cq-bm-color .cq-bm-back{
  background:linear-gradient(168deg,#FBF3DE 0%,#F2E4C2 100%);color:#2A1C07}
.cq-bm-color .cq-bm-cap{color:#8E2F1C}
.cq-bm-color .cq-bm-code{border-color:#8E2F1C;background:#FFFDF6;color:#12305A}
.cq-bm-color .cq-bm-scan{color:#8E2F1C}
.cq-bm-color .cq-bm-link{color:#12305A}
.cq-bm-color .cq-bm-note{color:#4A3C22}
.cq-bm-color .cq-bm-owner{color:#6B5A34}
.cq-bm-color .cq-bm-owner u{border-bottom-color:#B9A671}
/* the QR stays pure black on white in every variant - never tint a QR */
.cq-bm-color .cq-bm-qr svg rect{fill:#fff}
.cq-bm-color .cq-bm-qr svg path{fill:#000}

/* Native modal keeps keyboard focus inside the custom-word picker. */
dialog.cq-pick-back{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;color:inherit}
dialog.cq-pick-back::backdrop{background:transparent}
.cq-pick-word{min-width:0;width:100%;cursor:text}
.cq-pick-list-toggle{padding:10px 8px;border:1px solid #c9a227;border-radius:8px;background:#fff;color:#12305a;cursor:pointer;font:700 12px Arial,sans-serif}
.cq-pick-help{font:12px/1.5 Arial,sans-serif;color:#5a4a2c;margin:0 0 10px}
.cq-pick-status{font:700 14px/1.45 Arial,sans-serif;color:#8e2f1c;margin:10px 0}.cq-pick-status:empty{display:none}
.cq-pick-cancel{display:block;margin:15px auto 0;padding:7px;border:0;background:none;color:#12305a;text-decoration:underline;font:13px Arial,sans-serif;cursor:pointer}
.cq-pick button:disabled,.cq-pick input:disabled{opacity:.6;cursor:wait}
.cq-pick-listhead{flex-wrap:wrap}.cq-pick-listhead input{min-width:0}
@media(max-width:420px){.cq-pick{padding:18px 14px}.cq-pick-slot{gap:6px}.cq-pick-word{font-size:16px;padding:12px 8px}.cq-pick-dice{flex-basis:36px}.cq-pick-n{flex-basis:22px}}