/* Phone and tablet layout for every page; loaded after each page's own styles.
   Tablet: up to 900px wide. Phone: up to 760px (600px for the tightest grids).
   web/mobile.js moves data-bar controls into #kf-bar on narrow screens. */

html { -webkit-text-size-adjust: 100%; }

/* The shared menu bar (nav.js) is sticky and 42px tall: keep the rules
   page's own sticky search bar below it instead of behind it. */
body:has(#kf-nav) #bar { top: 42px; }
body:has(#kf-nav) nav#toc { top: 98px; max-height: calc(100vh - 98px); }

/* --- bottom action bar (mobile.js) ----------------------------------------- */
#kf-bar, #kf-sheet, #kf-shade, #kf-toCards, #kf-tocBtn, #kf-tocShade { display: none; }
@media (max-width: 900px) {
  body.kf-has-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  #kf-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 62;
    display: flex; gap: 6px; align-items: stretch;
    padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    background: #1d1d21; border-top: 1px solid #34343a; box-shadow: 0 -4px 16px #0006;
  }
  body:has(#actions[hidden]) #kf-bar { display: none; }
  #kf-bar .kf-bar-main { flex: 1; display: flex; gap: 6px; min-width: 0; }
  #kf-bar button, #kf-bar .btn {
    flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.15; font-size: 13px; padding: 4px 6px;
    background: #26262b; color: #e8e8e4; border: 1px solid #3a3a41; border-radius: 8px; text-decoration: none; cursor: pointer;
  }
  #kf-bar button.primary { background: #2b4366; border-color: #6aa9ff; }
  #kf-bar .kf-more { flex: 0 0 auto; padding: 4px 14px; }
  #kf-bar .kf-more[aria-expanded=true] { background: #2b4366; border-color: #6aa9ff; }
  #kf-shade:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; background: #0008; }
  #kf-sheet:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom)); z-index: 61;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
    max-height: 70vh; overflow: auto; padding: 14px max(14px, env(safe-area-inset-left)) 14px max(14px, env(safe-area-inset-right));
    background: #1d1d21; border-top: 1px solid #34343a; border-radius: 14px 14px 0 0;
  }
  #kf-sheet > button, #kf-sheet > .btn, #kf-sheet > a, #kf-sheet > select {
    background: #26262b; color: #e8e8e4; border: 1px solid #3a3a41; border-radius: 8px; padding: 6px 10px;
    font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
  }
  #kf-sheet > *:active { background: #303037; }
  #kf-sheet > * { width: 100%; min-height: 44px; margin: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; }
  #kf-sheet > select { grid-column: 1 / -1; display: block; }
}

/* --- touch: bigger targets, no zoom-on-focus in iOS ------------------------- */
@media (pointer: coarse) {
  header button, header .btn, header select, #bar button,
  dialog .foot button, dialog .foot .btn, .cropRow button, .cropRow .btn,
  .tile .actions button, .tile .actions .btn, #continue .actions button { min-height: 40px; }
  #filters .chip { padding: 6px 12px; }
  .cropRow input[type=range] { height: 32px; }
  #variants button { min-height: 34px; min-width: 34px; }
  .rt-chip { min-height: 34px; padding: 4px 9px; }
}
@media (pointer: coarse) and (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: 16px !important; }
}

/* --- shared: dialogs fill the screen on phones ----------------------------- */
@media (max-width: 760px) {
  dialog { width: calc(100vw - 16px) !important; max-width: none; max-height: calc(100dvh - 16px) !important; padding: 14px !important; margin: auto; }
  dialog .foot { flex-wrap: wrap; position: sticky; bottom: -14px; z-index: 2; margin: 14px -14px -14px !important; padding: 10px 14px 14px; background: #1d1d21; border-top: 1px solid #2c2c31; }
  header { padding: 10px 14px !important; }
  #balanceGroups { grid-template-columns: minmax(0, 1fr) !important; }
  #balanceGroups td.range { font-size: 11.5px; }
  #balanceGroups .bar { min-width: 24px; }
}

/* --- editor (index.html?edit) ---------------------------------------------- */
@media (max-width: 900px) {
  main:has(> #right) { grid-template-columns: minmax(0, 1fr) 340px; }
  #grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  #artGrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
}
@media (max-width: 760px) {
  body:has(#right) { height: auto; min-height: 100vh; }
  main:has(> #right) { display: block; }
  #left { overflow: visible; padding: 12px 14px; }
  #right { border-left: 0; border-top: 1px solid #2c2c31; overflow: visible; padding: 14px; scroll-margin-top: 42px; }
  #kf-toCards { display: block; align-self: flex-start; position: sticky; top: 50px; z-index: 5; background: #26262b; color: #e8e8e4; border: 1px solid #3a3a41; border-radius: 999px; padding: 6px 14px; min-height: 36px; font: inherit; font-size: 13px; box-shadow: 0 2px 8px #0008; }
  #bigWrap { max-width: 360px; margin: 0 auto; width: 100%; }
  #filters { gap: 8px; }
  #filters input[type=search] { width: 100%; }
  #filters > .group { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  #filters .group .group { flex-wrap: nowrap; }
  #boardBody { grid-template-columns: 1fr; }
  #emblemPair { flex-wrap: wrap; }
  #dDecks td { display: block; padding: 4px 0; border-top: 0; }
  #dDecks tr { display: block; border-top: 1px solid #2c2c31; padding: 6px 0; }
  #dDecks td.actions { text-align: left; white-space: normal; }
  #dDecks td.actions button:first-child { margin-left: 0; }
}
@media (max-width: 600px) {
  #grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #artGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .artTile img, .artTile .noThumb { height: 90px; }
  #dArt .artKeys { display: none; }
  #dArt .bar select { flex: 1 1 40%; min-width: 0; min-height: 36px; }
  #dArt .bar input[type=search] { flex: 1 1 100%; min-height: 36px; }
  #dArtView { width: 100vw; max-width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; padding: 8px; }
  #dArtView .viewHead button { min-height: 36px; min-width: 36px; }
  #dArtView #bArtFit, #dArtView #bArtFull, #dArtView #artViewPos { display: none; }
  #dArtView .viewBody { display: flex; flex-direction: column; overflow: auto; }
  #artStage { flex: 0 0 auto; height: 45dvh; }
  #artViewInfo { overflow: visible; }
}

/* --- dashboard (home.html) ------------------------------------------------- */
@media (max-width: 900px) { .tiles > .empty { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  main:has(> section) { padding: 14px 14px 40px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 8px; }
  .tile .actions button, .tile .actions .btn { flex: 1 1 auto; }
  .wide { grid-template-columns: minmax(0, 1fr); }
  #continue { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
  #continue h3 { font-size: 16px; }
  section > h2 { flex-wrap: wrap; row-gap: 0; }
}

/* --- deck viewer (viewer.html) --------------------------------------------- */
@media (max-width: 760px) {
  #picker { min-width: 0; flex: 1 1 100%; }
  main:has(> #deck) { padding: 12px 14px 30px; }
  .top { grid-template-columns: 110px minmax(0, 1fr) !important; gap: 12px 14px; }
  .top h2 { font-size: 18px; }
  #ability { grid-column: 1 / -1; }
  #dCard .body { gap: 10px; }
  #cardBig { max-width: 340px; width: 100%; margin: 0 auto; }
  #dCard .foot button { flex: 1; min-height: 44px; }
  #dCard .foot span { display: none; }
}
@media (max-width: 600px) {
  #grid button { outline-offset: 1px; }
}

/* --- rules page (rules.html) ----------------------------------------------- */
@media (max-width: 900px) {
  #kf-tocBtn { display: inline-block; white-space: nowrap; background: #26262b; color: #e8e8e4; border: 1px solid #3a3a41; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
  #kf-tocBtn[aria-expanded=true] { background: #2b4366; border-color: #6aa9ff; }
  body.kf-toc-open nav#toc {
    display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 61;
    width: min(320px, 86vw); max-height: none; padding: 16px 12px calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #1b1b1f; border-right: 1px solid #34343a; box-shadow: 4px 0 24px #000a; font-size: 15px;
  }
  body.kf-toc-open nav#toc a { padding: 6px 8px; }
  body.kf-toc-open #kf-tocShade { display: block; position: fixed; inset: 0; z-index: 60; background: #0008; }
}
@media (max-width: 760px) {
  #bar { padding: 8px 14px !important; gap: 8px !important; }
  #bar h1 { font-size: 18px !important; }
  #view, #printBtn { order: 11; }
  #bar input[type=search] { order: 10; flex: 1 1 100% !important; max-width: none !important; }
  #content { padding: 4px 14px 60px !important; }
  .page { padding: 16px 0 !important; }
  .text h2, .text .title { font-size: 24px !important; }
  .board h2 { font-size: 20px !important; }
  #zoom { padding: 0 !important; touch-action: pinch-zoom; }
}

/* --- new monster wizard (new.html) ----------------------------------------- */
@media (max-width: 760px) {
  main:has(#preview) { padding: 14px 14px 40px; gap: 18px; }
  #preview { position: static; grid-template-columns: 110px minmax(0, 1fr) !important; gap: 12px; }
  #backWrap { max-width: none !important; }
}

/* --- simple pages (page.css: printables, credits, settings) ---------------- */
@media (max-width: 600px) {
  label.field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .row .btn, .row button { white-space: normal; text-align: center; }
}

/* --- offline note (mobile.js) --------------------------------------------- */
#kf-offline:not([hidden]) {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 63;
  width: max-content; max-width: calc(100vw - 24px); padding: 8px 14px;
  background: #3a2f12; color: #f3dfa2; border: 1px solid #6b5420; border-radius: 10px; font-size: 12.5px; line-height: 1.35; box-shadow: 0 4px 16px #0008; cursor: pointer;
}
body.kf-has-bar #kf-offline:not([hidden]) { bottom: calc(72px + env(safe-area-inset-bottom)); }

@media print { #kf-offline, #kf-bar, #kf-sheet, #kf-shade, #kf-toCards, #kf-tocBtn, #kf-tocShade { display: none !important; } }