/* ==========================================================================
   BrewNight · phone — one place for how the app uses a small screen.
   Loaded after every other stylesheet on the library, dashboard and shell
   pages. Principle: cards are the content, so chrome gets out of the way —
   one compact header, a single row of filters, sheets instead of modals —
   and plain, even gutters (--page-pad) everywhere. No safe-area tricks.
   Tokens only (ui/tokens.css).
   ========================================================================== */

/* Inputs below 16px make iOS zoom the page on focus, which is what pushes the
   header off the top when a search field gets the keyboard. */
@media (max-width: 760px) {
  input, select, textarea { font-size: var(--fs-16); }
  /* Scanner IDs otherwise override the shared input floor. */
  #library-main.scan-page :is(input,select,textarea) { font-size: max(16px,var(--fs-16)); }
  body:has(dialog:modal) { overflow: hidden; }
}

/* Escape closes the palette on a keyboard; a phone needs a button for it. */
.palette .pal-cancel { display: none; }

/* Actions that only fit on a wide screen, and the "More" menu that stands in for them on a phone. */
@media (min-width: 561px) { .narrow-only { display: none !important; } }
@media (max-width: 560px) { .wide-only { display: none !important; } }

@media (max-width: 560px) {
  /* ── Page frame: titles lead into content, not into more titles ───────────── */
  .page { padding-top: var(--sp-3); padding-bottom: var(--sp-7); }
  .page-head { margin-bottom: var(--sp-3); padding-bottom: 0; border-bottom: 0; gap: var(--sp-2) var(--sp-4); align-items: center; }
  .page-head .eyebrow { display: none; }
  .page-head h1 { font-size: var(--fs-28); }
  .page-actions { gap: var(--sp-2); }
  .page-actions > .primary { order: -1; }
  .page-actions .btn, .page-actions button { min-height: 40px; padding: var(--sp-1h) var(--sp-3); font-size: var(--fs-13); }
  .seg { position: relative; flex-wrap: nowrap; overflow-x: auto; padding: 0 0 var(--sp-2); margin: 0 calc(var(--page-pad) * -1) var(--sp-1); padding-inline: var(--page-pad); border-bottom: 0; gap: var(--sp-1); }
  .seg a, .seg button { padding: var(--sp-1h) var(--sp-3); min-height: 40px; }
  .summary { margin: var(--sp-1) 0 var(--sp-3); min-height: 0; }
  .credits { margin-top: var(--sp-6); }
  .page > .credits { margin-top: var(--sp-6); }
  .empty, .empty-results, .nada { padding: var(--sp-6) var(--sp-4); }
  .nada h2 { line-height: var(--lh-snug); }

  .menu-panel { position: fixed; left: var(--page-pad); right: var(--page-pad); bottom: var(--sp-4); top: auto; z-index: var(--z-sheet); }

  /* ── Rhythm: one heading size and one gap between sections ──────────────────── */
  .section-h, .rail-head h2 { font-size: var(--fs-20); }
  .section-h { margin: var(--sp-5) 0 var(--sp-3); }
  .rail-head { margin: var(--sp-5) 0 var(--sp-2h); }
  .rail { padding-bottom: var(--sp-2); }
  .start { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
  .start-card { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); row-gap: 0; align-items: center; padding: var(--sp-3) var(--sp-4); }
  .start-card .icon { grid-row: 1 / span 2; }
  .start-card strong { font-size: var(--fs-16); }
  .nada { gap: var(--sp-1); }
  .invite { gap: var(--sp-3); padding: var(--sp-4); }
  .invite strong { font-size: var(--fs-20); }
  .nada h2 { font-size: var(--fs-20); }

  /* Subheadings inside any page sit one step below the title, whichever screen it is. */
  :where(.page) h2 { font-size: var(--fs-20); line-height: var(--lh-snug); }
  :where(.page) h3 { font-size: var(--fs-16); }
  .history-layout { gap: var(--sp-4); margin-top: var(--sp-4); }

  /* ── The tab bar says where you are, so a page that is only a title and tabs does not spend a row saying it again ── */
  .page-head.plain { margin: 0; padding: 0; min-height: 0; }
  .page-head.plain .sub { display: none; }
  .page-head.plain h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ── The collection header: one title row, one summary line, one search row ── */
  .page-head.has-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m a"; align-items: center; gap: var(--sp-0) var(--sp-3); }
  .page-head.has-meta > :first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .page-head.has-meta > .page-actions { grid-area: a; } .page-head.has-meta > .collection-summary { grid-area: m; }
  .page-head.compact .sub { display: none; }
  /* A sheet's first row is its tabs and its close button; its title is for screen readers. */
  .add-sheet .sheet-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .add-sheet .sheet-head { gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .add-sheet .sheet-head .seg { margin: 0; padding: 0; flex: 1; }
  .collection-summary > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-0) var(--sp-2h); font-size: var(--fs-13); }
  .collection-summary .price-estimate { margin: 0; font-size: var(--fs-13); }
  .summary.quiet { display: none; }

  /* ── Long fine print folds away ────────────────────────────────────────────── */
  .fine-fold { margin: var(--sp-1) 0 var(--sp-3); }
  .fine-fold > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-13); list-style: none; }
  .fine-fold > summary::-webkit-details-marker { display: none; }
  .fine-fold > summary::before { content: 'ⓘ '; }
  .fine-fold[open] > summary { margin-bottom: var(--sp-2); }


  /* ── Builder: one calm row for the deck's name and what you can do with it ─── */
  .crumb.tabbed { display: none; }
  .build-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .build-head { display: contents; }
  .build-top .build-tabs { grid-column: 1; grid-row: 2; margin: 0; justify-content: flex-start; gap: var(--sp-3); }
  .build-top .count-line { display: none; }
  .build-top button[data-pane=search] { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); white-space: nowrap; min-height: 44px; padding: var(--sp-2); font-size: var(--fs-14); }
  .build-head .page-actions { grid-column: 3; grid-row: 2; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); }
  .build-head .title-input { grid-column: 1 / -1; grid-row: 1; padding-inline: 0; }
  .build-top .build-format { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; }
  .build-top .build-format select { min-width: 0; max-width: 100%; min-height: 44px; margin: 0; }
  .save-state { font-size: 0; }
  .save-state:not(.bad) { width: 8px; flex: 0 0 8px; }
  .save-state.bad { position: absolute; top: 100%; right: 0; max-width: 220px; background: var(--panel); padding: var(--sp-2); z-index: var(--z-row); }
  .build-head .page-actions { position: relative; }
  .save-state.bad { font-size: var(--fs-12); }
  .build-deck:has(.leader-empty):not(:has(.leader)) > #leaders, .build-deck:has(.leader-empty):not(:has(.leader)) > #stats { grid-column: 1 / -1; }
  .leader-empty { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); aspect-ratio: auto; }
  .leader-empty strong { font-size: var(--fs-16); }
  .leader-empty span { display: none; }
  .leader [data-remove-commander] { min-height: 44px; text-align: left; padding-inline: 0; border: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }

  /* ── Tiles ───────────────────────────────────────────────────────────────── */
  .posters { gap: var(--sp-3); }
  .poster-acts { display: none; }
  .poster-title { font-size: var(--fs-16); }
  .poster-sub { font-size: var(--fs-12); }
  .poster-meta, .poster-art-credit { font-size: var(--fs-12); }

  /* ── Sheets: a dialog is a sheet from the bottom edge you can always dismiss ─ */
  dialog:not(.palette), dialog.sheet:not(.palette), dialog.sheet.wide:not(.palette), dialog.ask:not(.palette) { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: calc(100dvh - max(var(--sp-3), env(safe-area-inset-top))); padding: var(--sp-5) var(--page-pad) max(var(--sp-6), env(safe-area-inset-bottom)); border-radius: var(--r-5) var(--r-5) 0 0; border-bottom-width: 0; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--sh-4); }
  .build[data-pane=search] dialog.build-search.bottom-sheet { inset: auto 0 0; 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))); margin: 0; padding: 0 var(--page-pad) max(var(--sp-5), env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line2); border-radius: var(--r-5) var(--r-5) 0 0; }
  .build-search .add-head { gap: var(--sp-2); flex-wrap: wrap; }
  .build-search .add-head h2 { font-size: var(--fs-20); }
  .build-search .add-head button { min-height: 44px; }
  .build-search .fbar { position: static; background: none; backdrop-filter: none; }
  .build-search .search-field input { width: 100%; }
  #toast:has(button) { display: flex; align-items: center; gap: var(--sp-3); width: min(440px, calc(100vw - var(--sp-6))); max-width: calc(100vw - var(--sp-6)); white-space: normal; }
  #toast button { flex: 0 0 auto; min-height: 44px; }
  dialog[open]:not(.palette) { animation: sheet-in var(--t-3) var(--ease); }
  dialog.cdialog:not(.palette) { padding: 0; overflow: hidden; }
  dialog.deck-shopping:not(.palette) { padding: 0; overflow: hidden; 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))); }
  .cdialog .cd-body { padding: var(--sp-5) var(--page-pad) var(--sp-4); }
  .owned .ask-actions { position: sticky; bottom: calc(var(--sp-6) * -1); margin: 0 calc(var(--page-pad) * -1) calc(var(--sp-6) * -1); padding: var(--sp-3) var(--page-pad) var(--sp-4); background: var(--panel); border-top: 1px solid var(--line); justify-content: flex-end; }
  .owned .ask-actions button { flex: 1; min-height: 48px; }
  .ask .ask-actions { flex-direction: column-reverse; }
  .ask .ask-actions button { min-height: 48px; }

  /* ── Search: takes the whole visible screen, input on top, results scroll ─── */
  .palette { position: fixed; inset: auto 0 auto 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); width: 100%; max-width: 100%; max-height: none; margin: 0; border-radius: 0; border-width: 0; box-shadow: none; }
  .palette .pal-form { padding: 0 var(--sp-2) 0 var(--page-pad); }
  .palette input { height: 56px; }
  .palette .pal-end kbd, .palette .pal-esc { display: none; }
  .palette .pal-cancel { display: inline-flex; min-height: 44px; align-items: center; padding: 0 var(--sp-3); border: 0; background: none; color: var(--gold); font-weight: var(--fw-bold); }
  .palette .pal-list { padding: var(--sp-2) var(--sp-2) var(--sp-5); overscroll-behavior: contain; }
  .palette .pal-row { min-height: 52px; }

  /* ── Builder: the deck first, adding cards one tap away ───────────────────── */
  .build-head { gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
  .title-input { font-size: var(--fs-24); flex-basis: 100%; }
  .build-tabs { margin-bottom: var(--sp-2); }
  .build-deck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  .build-deck > :is(#issues, #values, #deck-supplies):empty { display: none; }
  /* Only the commander and compact stats share a row. Coach, notices and
     the card list need the whole panel, including future builder sections. */
  .build-deck > * { grid-column: 1 / -1; }
  .build-deck > #leaders { grid-column: 1; }
  .build-deck > #stats { grid-column: 2; }
  .leader, .leader-empty { width: 100%; }
  .leader-empty { min-height: 0; }
  .stats.compact { gap: var(--sp-2) var(--sp-4); padding-bottom: 0; border-bottom: 0; }
  .stats.compact .stat strong { font-size: var(--fs-24); }
  .curve { height: 48px; gap: var(--sp-1); }
  .curve > div { width: 16px; }
  .bar-row, .presets { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--page-pad) * -1); padding-inline: var(--page-pad); width: auto; }
  .bar-row::-webkit-scrollbar, .presets::-webkit-scrollbar { display: none; }
  .bar-row > *, .presets > *, .presets-end { flex: 0 0 auto; }
  .presets-end { margin-left: 0; flex-wrap: nowrap; }
  .build-search .cards.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-board .dl-row, .deck-board .dl-name { min-height: 44px; }
  .deck-board .stepper button, .deck-board .row-x { min-height: 44px; }

  /* ── Deck page: the cards are the page ───────────────────────────────────── */
  .hero { z-index: var(--z-raised); }
  .hero.with-art { padding: var(--sp-4); gap: var(--sp-3); border-radius: var(--r-3); }
  .hero { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: center; margin-bottom: var(--sp-3); }
  .hero-faces { padding-left: 0; justify-content: flex-start; }
  .hero-faces .hero-face { width: 100%; max-width: 150px; }
  .hero-faces .hero-face + .hero-face { display: none; }
  /* The picture sits beside the title, commander, set and colours; the buttons run the full width underneath. (They used to live in the text column, which made it taller than the picture and left blank above and below it.) */
  .hero.with-art { row-gap: 0; }
  .hero-main { display: contents; }
  .hero-faces { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .hero-main > :not(.hero-actions) { grid-column: 2; min-width: 0; margin-top: var(--sp-1); }
  .hero-main > h1 { margin-top: 0; }
  .hero-actions { grid-row: 5; }
  .hero-main h1 { font-size: var(--fs-24); line-height: var(--lh-snug); }
  .hero-line { font-size: var(--fs-12); line-height: var(--lh-snug); }
  .hero-id { gap: var(--sp-1h) var(--sp-3); margin-top: 0; }
  .hero-actions { grid-column: 1 / -1; margin-top: var(--sp-3); }
  .hero-actions .btn, .hero-actions button { min-height: 44px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions [data-play] { flex: 2 1 0; min-width: max-content; }   /* Play, Copy and the menu share one row; a draft's Edit or a shared deck's Save wraps onto a second */
  .hero-actions [data-copy], .hero-actions [data-favorite] { flex: 1 1 0; }
  .hero-stats { padding: var(--sp-1) 0; margin-bottom: var(--sp-3); }
  .hero-stats > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; color: var(--text2); font-size: var(--fs-13); list-style: none; }
  .hero-stats > summary::-webkit-details-marker { display: none; }
  .hero-stats > summary::after { content: '+'; font-size: var(--fs-20); color: var(--muted); }
  .hero-stats[open] > summary::after { content: '−'; }
  .deck-layout { gap: var(--sp-5); }
  /* The commander is already the card in the deck's header; the picture grid does not show it twice. */
  .public-deck-workbench .dg-group[data-group=Commander] { display: none; }
  .list-head { margin-bottom: var(--sp-3); }
  .list-head { gap: var(--sp-2); }
  .list-head h2 { font-size: var(--fs-20); }
  .list-head .seg-pill button { padding: var(--sp-1h) var(--sp-2h); }
  .density { min-height: 40px; padding: var(--sp-1h) var(--sp-2h); font-size: var(--fs-13); white-space: nowrap; }
  .across-3 .cards.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
  .across-1 .cards.compact { grid-template-columns: minmax(0, 1fr); }
  .deck-rail { gap: var(--sp-3); }
  .deck-rail > section { padding: var(--sp-3); }
}

@keyframes sheet-in { from { transform: translateY(100%); } }

/* Desktop and tablets read the stats at a glance; the summary only exists on phones. */
@media (min-width: 561px) {
  .hero-stats > summary { display: none; }
}
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }

@media(max-width:560px){.scan-footer>div{min-width:0}.scan-footer .price-estimate{font-size:var(--fs-12);margin:0}}

@media (max-width: 699px) {
  .build-top .build-format select { width:100%; height:44px; padding:0 6px; font-size:var(--fs-16); }
  .build-top #play { min-height:44px; padding:8px; gap:3px; font-size:var(--fs-14); white-space:nowrap; }
  .build-top .page-actions { gap:6px; }
  .build-top .save-state:not(.bad) { position:absolute; right:46px; top:-6px; }
  .build-top .add-cards-word { display:none; }
  .build-top .menu > summary { width:44px; min-height:44px; padding:8px; }
  .build-deck { column-gap:10px; grid-template-columns:minmax(0,50%) minmax(0,1fr); }
  .build-deck > #leaders { display:contents; }
  .leaders { display:contents; }
  .leader { display:contents; }
  .leader-face { grid-column:1; grid-row:auto; }
  .leader figcaption { grid-column:1 / -1; margin-top:0; }
  .build-deck > #stats { grid-row:1; }
  .build-deck:has(.leader-empty):not(:has(.leader)) > #leaders { display:block; }
  .build-deck:has(.leader-empty):not(:has(.leader)) > #stats { grid-row:auto; }
  .commander-name { display:flex; align-items:baseline; gap:6px; overflow-wrap:normal; }
  .commander-name .mana { flex-shrink:0; }
  .leader figcaption [data-remove-commander] { justify-self:start; }
  .deck-values { gap:8px 16px; padding-block:4px; }
  .deck-value-actions { display:flex; gap:8px; flex-basis:100%; }
  .deck-value-actions button { min-height:44px; }
  /* Deck tile controls: every button is a real 44px target and no two hit areas overlap.
     Row 1 is the quantity; row 2 is the ownership note with the move and remove buttons (across-3 gives the note a third row). */
  .dtile-foot { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:0 var(--sp-1); align-items:center; }
  .dtile-foot .stepper { grid-column:1 / -1; grid-row:1; justify-self:start; border:0; padding:0; gap:0; }
  .dtile-foot .stepper button { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; }
  .dtile-foot .stepper button::after, .dtile-foot .row-x::after { content:none; }
  .dtile-foot .qty { width:2ch; height:44px; padding:0; font-size:var(--fs-12); }
  .dtile-foot .stepper .icon { width:14px; }
  .dtile-foot .dl-meta { grid-column:1; grid-row:2; flex-wrap:wrap; gap:var(--sp-0) var(--sp-1); margin:0; justify-content:flex-start; min-width:0; font-size:var(--fs-12); }
  .dtile-foot .own-tag { font-size:var(--fs-12); padding:0 3px; }
  .dtile-foot .row-x { opacity:1; width:44px; min-width:44px; height:44px; min-height:44px; margin:0; padding:0; grid-row:2; }
  .dtile-foot [data-move] { grid-column:2; }
  .dtile-foot [data-remove] { grid-column:3; }
  .deck-board.across-3 .dtile-foot .dl-meta { grid-column:1 / -1; grid-row:3; justify-content:space-between; padding:0 2px var(--sp-1); }
  .deck-board.across-3 .own-tag { font-size:var(--fs-12); padding:0 3px; }
  /* Editable list rows: name and cost on the first line, then quantity, ownership and the two 44px buttons. */
  .deck-board .dl.edit .dl-row { flex-wrap:wrap; row-gap:0; padding-block:var(--sp-1); }
  .deck-board .dl.edit .dl-row > .dl-name { order:1; flex:1 1 0; min-width:50%; }
  .deck-board .dl.edit .dl-row > .mana { order:2; }
  .deck-board .dl.edit .dl-row::after { content:''; order:3; flex-basis:100%; height:0; }
  .deck-board .dl.edit .dl-row > .stepper { order:4; }
  .deck-board .dl.edit .dl-row > .dl-meta { order:5; flex:1 1 0; min-width:0; }
  .deck-board .dl.edit .dl-row > [data-move] { order:6; }
  .deck-board .dl.edit .dl-row > [data-remove] { order:7; }
  .deck-board .dl.edit .stepper button, .deck-board .dl.edit .row-x { width:44px; min-width:44px; height:44px; }
  .deck-board .dl.edit .stepper button::after, .deck-board .dl.edit .row-x::after { content:none; }
}
@media (max-width:359px) {
  .build-top #play span { display:none; }
  .build-top #play { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:44px; }
  /* Three across cannot hold 44px controls at 320px: two across, so each tile keeps the whole row of buttons. */
  .deck-board.across-3 .dg-group .cards.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:699px) { #stats .curve { width:100%; min-width:0; gap:3px; } #stats .curve > div { flex:1; min-width:0; width:auto; } }

@media (max-width:699px) { .build-deck > #leaders[hidden] { display:none; } }

.add-head { flex-wrap:wrap; }
.add-count { color:var(--green2); font-weight:var(--fw-bold); white-space:nowrap; }

/* A list row is one line. Quantity edits use a numeric field; less-used
   increment/move/remove actions live in a labeled menu with full touch targets. */
@media(max-width:560px){
 .deck-board .dl.edit .dl-row { flex-wrap:nowrap; gap:4px; min-height:52px; padding-block:4px; }
 .deck-board .dl.edit .dl-row::after { content:none; }
 .deck-board .dl.edit .dl-row > .stepper { order:0; padding:0; border:0; }
 .deck-board .dl.edit .stepper > button { display:none; }
 .deck-board .dl.edit .stepper .qty { width:44px; height:44px; min-height:44px; font-size:var(--fs-16); border:1px solid var(--line); border-radius:var(--r-2); }
 .deck-board .dl.edit .dl-row > .dl-name { order:1; min-width:0; flex:1 1 0; font-size:var(--fs-13); }
 .deck-board .dl.edit .dl-row > .mana { order:2; max-width:70px; overflow:hidden; }
 .deck-board .dl.edit .dl-row > .dl-meta { order:3; flex:0 0 auto; margin:0; font-size:var(--fs-12); }
 .deck-board .dl.edit .dl-meta .own-tag { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .deck-board .dl.edit .dl-row > .row-inline-action { display:none; }
 .deck-board .dl.edit .row-menu { display:block; flex:none; order:4; }
 .deck-board .dl.edit .row-menu > summary { opacity:1; display:grid; place-items:center; width:44px; min-height:44px; margin:0; padding:0; }
 .deck-board .dl.edit .row-menu .menu-item { min-height:44px; width:100%; }
}