/* ==========================================================================
   BrewNight · overlays — the pieces that float above any page: the global
   search palette, the card dialog and the hover peek. Selectors are scoped
   to their own roots so the sheet is safe to load on Play setup too.
   ========================================================================== */

/* ── Search palette ─────────────────────────────────────────────────────── */
.palette { width: min(680px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 96px)); margin: 72px auto auto; padding: 0; overflow: hidden; display: none; flex-direction: column; border-radius: var(--r-5); }
.palette[open] { display: flex; animation: pal-in var(--t-3) var(--ease); }
@keyframes pal-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.palette .pal-form { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); }
.palette .pal-icon { color: var(--muted); display: grid; }
.palette .pal-icon .icon { width: 18px; height: 18px; }
.palette input { border: 0; background: none; font-size: var(--fs-18); height: 60px; padding: 0; margin: 0; outline: none; }
.palette input:hover { border: 0; }
.palette .pal-list { list-style: none; margin: 0; padding: var(--sp-2); overflow-y: auto; flex: 1; }
.palette .pal-group { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-3) var(--sp-3) var(--sp-1h); color: var(--muted); font-size: var(--fs-11); letter-spacing: var(--ls-caps-sm); text-transform: uppercase; }
.palette .pal-aside { color: var(--gold); text-transform: none; letter-spacing: 0; font-size: var(--fs-12); text-decoration: none; }
.palette .pal-aside:hover { text-decoration: underline; }
.palette .pal-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-3); cursor: pointer; }
.palette .pal-row[aria-selected=true] { background: var(--panel3); box-shadow: inset 2px 0 0 var(--gold); }
.palette .pal-thumb { flex: 0 0 34px; display: grid; place-items: center; color: var(--muted); }
.palette .pal-thumb .cimg { width: 34px; box-shadow: var(--sh-2); }
.palette .pal-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.palette .pal-text strong { font-weight: var(--fw-medium); font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .pal-text span { color: var(--muted); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .pal-end { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.palette .pal-end .pip { height: 15px; min-width: 15px; }
.palette .pal-recent { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-2); }
.palette .pal-empty { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--muted); }
.palette .pal-foot { display: flex; align-items: center; gap: var(--sp-4); margin: 0; padding: var(--sp-2h) var(--sp-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-11); }
.palette .pal-foot kbd { margin-right: var(--sp-1); }
@media (max-width: 560px) { .palette { margin-top: 12px; max-height: calc(100vh - 24px); } .palette .pal-foot { display: none; } }

/* ── Card dialog ────────────────────────────────────────────────────────── */
.cdialog { width: min(1040px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; position: fixed; inset: 0; margin: auto; display: none; }
.cdialog[open] { display: flex; flex-direction: column; animation: pal-in var(--t-3) var(--ease); }
.cdialog .cd-close { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: var(--z-row); }
.cdialog .cd-pager { display: inline-flex; gap: var(--sp-1); margin-right: auto; }
/* The card gets the left half; everything about it reads on the right; the add bar is a footer that never scrolls away. */
.cdialog .cd-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); gap: var(--sp-7); padding: var(--sp-7); overflow-y: auto; overscroll-behavior: contain; }
.cdialog .cd-art { display: grid; gap: var(--sp-3); align-content: start; justify-items: center; }
.cdialog .cd-art { min-width: 0; }
.artwork-picker { width: 100%; min-width: 0; display: grid; gap: var(--sp-2); }
.artwork-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-13); }
.artwork-heading button { min-height: 44px; }
.artwork-rail { display: flex; gap: var(--sp-2h); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: var(--sp-1); }
.artwork-option { flex: 0 0 26%; min-width: 76px; scroll-snap-align: start; display: grid; gap: var(--sp-1h); align-content: start; }
.cdialog .cd-art .artwork-option .cimg { width: 100%; box-shadow: none; border: 2px solid transparent; }
.cdialog .cd-art .artwork-option[aria-pressed=true] .cimg { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.artwork-label { font-size: var(--fs-11); color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.artwork-option[aria-pressed=true] .artwork-label { color: var(--text); font-weight: var(--fw-heavy); }
.artwork-caption { color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; }
.cdialog .cd-art .cimg { width: min(100%, calc((100vh - 18rem) * 488 / 680)); box-shadow: var(--sh-3); }
.cdialog .cd-faces { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.cdialog .cd-info { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; padding-right: var(--sp-6); }
.cdialog h2 { font-size: var(--fs-32); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cdialog h2:focus { outline: none; }
.cdialog .cd-type { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2h); color: var(--text2); font-size: var(--fs-14); }
.cdialog .cd-rules { display: grid; gap: var(--sp-2h); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-body); }
.cdialog .cd-rules em { color: var(--muted); }
.cdialog .cd-pt { font: var(--fs-20) var(--font-figures); color: var(--text2); }
.cdialog .cd-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.cdialog .legal { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-12); color: var(--green2); }
.cdialog .legal.bad { color: var(--danger); } .cdialog .legal.maybe { color: var(--muted); }
.cdialog .cd-fine { display: grid; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.cdialog .cd-fine .card-attribution { margin: 0; }
.cdialog .cd-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2h); padding: var(--sp-3) var(--sp-7); border-top: 1px solid var(--line2); background: var(--panel); }
.cdialog .cd-bar select { width: auto; flex: 0 1 240px; min-width: 0; margin: 0; }
.cdialog .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); }
.cdialog .stepper button { width: 32px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-round); color: var(--muted); }
.cdialog .stepper button:hover { background: var(--panel3); color: var(--text); }
.cdialog .stepper output { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.cdialog .cd-bar .btn, .cdialog .cd-bar button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); }
.cdialog .cd-printing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: var(--muted); font-size: var(--fs-12); }
.cdialog .cd-printing .dim { color: var(--dim); }
.cdialog .cd-printing select { width: auto; max-width: 100%; margin: 0; padding: var(--sp-1h) var(--sp-2h); font-size: var(--fs-12); }
.cdialog .linkish { background: none; border: 0; padding: 0; color: var(--gold); font-size: inherit; text-decoration: underline; text-decoration-color: var(--gold-a30); text-underline-offset: 3px; }
@media (max-width: 700px) {
  .cdialog .cd-body { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-5); }
  .cdialog .cd-art .cimg { width: min(300px, 82%); }
  .cdialog .cd-info { padding-right: 0; gap: var(--sp-3); }
  .cdialog h2 { font-size: var(--fs-28); }
  .cdialog .cd-pager button { width: 40px; height: 40px; }
  .cdialog .cd-bar { padding: var(--sp-3) var(--sp-5); }
}

/* ── Hover peek ─────────────────────────────────────────────────────────── */
.peek { position: fixed; z-index: var(--z-tip); width: 260px; pointer-events: none; opacity: 0; transform: scale(.96); transition: opacity var(--t-2), transform var(--t-2) var(--ease); filter: drop-shadow(0 12px 28px var(--black-a60)); }
.peek.on { opacity: 1; transform: none; }
.peek .cimg { box-shadow: var(--sh-4); }

/* ── Confirmation sheet ─────────────────────────────────────────────────── */
.ask { width: min(440px, calc(100vw - 24px)); padding: var(--sp-6); }
.ask h2 { font-size: var(--fs-28); margin-bottom: var(--sp-2h); }
.ask p { color: var(--muted); line-height: var(--lh-body); }
.ask .ask-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }
.ask .ask-actions button { min-height: var(--tap); padding-inline: var(--sp-5); }   /* Concede / Leave the table are asked in the game too, where base.css does not raise buttons to 44px */
.ask button.danger { background: var(--danger-a08); border-color: var(--danger-a30); }

/* The shared reader gives the printed card, printings and reference details their own views. */
.cdialog { width:min(680px,calc(100vw - 24px)); height:min(800px,calc(100dvh - 24px)); }
.cdialog .cd-workspace-head { flex:none; padding:var(--sp-3) var(--sp-5) 0; border-bottom:1px solid var(--line); }
.cdialog .cd-workspace-head h2 { font:var(--fw-bold) var(--fs-18)/1.3 var(--font-ui); padding-right:44px; margin:0 0 var(--sp-2); }
.cdialog .cd-body { display:block; padding:var(--sp-4) var(--sp-5); }
.cdialog .cd-body > [hidden] { display:none; }
.cdialog .cd-art > .cimg { width:min(100%,360px,calc((100dvh - 300px) * 488 / 680)); box-shadow:none; }
.cdialog .cd-info { padding:0; }
.cdialog .artwork-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); overflow:visible; }
.cdialog .artwork-option { width:100%; min-width:0; }
.cdialog .stepper { border-radius:var(--r-2); }
.cdialog .stepper button,.cdialog .cd-pager button { min-width:44px; min-height:44px; border-radius:var(--r-1); }
.cdialog .cd-bar { padding-inline:var(--sp-4); }
@media(max-width:650px){
 .cdialog .cd-body { padding:var(--sp-3) var(--sp-4); }
 .cdialog .cd-workspace-head { padding-inline:var(--sp-4); }
 .cdialog .artwork-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Reader sizing belongs to the component, including when opened from Play. */
@media(max-width:560px){
 dialog.cdialog { inset:auto 0 0; margin:0; width:100%; max-width:100%; height:calc(100dvh - max(var(--sp-3),env(safe-area-inset-top))); max-height:calc(100dvh - max(var(--sp-3),env(safe-area-inset-top))); border-radius:var(--r-5) var(--r-5) 0 0; }
 .cdialog .cd-bar { padding:var(--sp-3) var(--sp-4) max(var(--sp-4),env(safe-area-inset-bottom)); }
 .cdialog .cd-bar select { flex:1 1 140px; }
 .cdialog .cd-bar .primary { flex:1 1 auto; min-height:48px; }
 .cdialog .cd-close { width:44px; height:44px; top:var(--sp-2); right:var(--sp-2); background:var(--chrome); }
}
.cdialog .cd-printings .artwork-option .cimg { width:100%; border:2px solid transparent; box-shadow:none; }
.cdialog .cd-printings .artwork-option[aria-pressed=true] .cimg { border-color:var(--text); }
@supports(height:1cqh){
 .cdialog .cd-body { container-type:size; }
 .cdialog .cd-art > .cimg { width:min(100%,360px,calc(100cqh * 488 / 680)); }
 .cdialog .cd-art:has(.cd-faces) > .cimg { width:min(100%,360px,calc((100cqh - 56px) * 488 / 680)); }
}

.pal-text .ctile-price { font-size:var(--fs-12); }

/* Modal specificity keeps the phone geometry intact even when this stylesheet
   is loaded after phone.css. The header belongs below the status safe area. */
@media (max-width:560px) {
  dialog.palette:modal { position:fixed; inset:auto 0 auto 0; top:calc(var(--vv-top,0px) + env(safe-area-inset-top)); width:100%; max-width:100%; height:max(0px,calc(var(--vv-h,100dvh) - env(safe-area-inset-top))); max-height:none; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; animation:none; }
  dialog.palette:modal .pal-form { padding:0 var(--sp-2) 0 var(--page-pad); flex-shrink:0; }
  dialog.palette:modal #pal-search-host { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  dialog.palette:modal .pal-list { min-height:0; overscroll-behavior:contain; }
  dialog.palette:modal .pal-cancel { display:inline-flex; min-height:44px; align-items:center; }
}

.palette .search-field { position:relative; }
.palette .list-filters .search-field input { padding-right:44px; }
.palette .pal-clear { position:absolute; inset-inline-end:0; top:50%; translate:0 -50%; width:36px; min-width:36px; height:44px; min-height:44px; padding:8px; border:0; background:transparent; box-shadow:none; color:var(--muted); }
.palette .pal-clear .icon { position:static; translate:none; pointer-events:none; }
.palette .pal-clear[hidden] { display:none; }
.cdialog .cd-close[data-return] { left:var(--sp-2); right:auto; }
.cdialog .cd-has-return h2 { padding-left:44px; padding-right:0; }