/* Touch-friendly controls and compact layouts; loaded after the desktop theme. */
.mobile-filter-toolbar { display: none; }
.connection-banner { display: flex; align-items: center; gap: 16px; margin: 16px 40px; padding: 16px; border: 1px solid #986456; border-radius: 8px; background: #3a241f; color: #f2d5cb; line-height: 1.6; }
.connection-banner span { flex: 1; }
.connection-banner button { flex-shrink: 0; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.active-filter { border: 1px solid var(--line); border-radius: 20px; padding: 7px 12px; background: var(--raised); color: var(--gold); font-size: 12px; }
.active-filter:hover { border-color: var(--gold); }
.view, .results, .deck-panel, .pool-panel, .detail-info, .field-row > label { min-width: 0; }
@media (max-width: 640px) {
  body { font-size: 15px; }
  .view { padding: 22px 16px; }
  .rail { padding: 8px 12px; height: 64px; padding-top: max(8px, env(safe-area-inset-top)); }
  .rail .nav-button { min-width: 56px; min-height: 44px; }
  .heading { flex-wrap: wrap; gap: 10px; }
  .heading > div { flex: 1 1 100%; }
  .heading h1 { font-size: 38px; }
  .heading p { font-size: 14px; }
  .heading .primary { margin: 0; min-height: 44px; padding: 11px 18px; font-size: 14px; }
  .stats { margin-bottom: 20px; }
  .stat { padding: 15px; }
  .stat-number small { display: block; margin: 4px 0 0; font-size: 11px; }
  .stat-label { font-size: 9px; }
  .workspace { gap: 14px; }
  .mobile-filter-toolbar { display: flex; justify-content: space-between; align-items: center; order: 0; }
  #toggle-filters { min-width: 124px; justify-content: space-between; }
  #filter-count:empty { display: none; }
  #filter-count { padding: 1px 7px; border-radius: 20px; background: var(--gold); color: var(--bg); }
  .filters { display: none; order: 1; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--panel); grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filters.is-open { display: grid; }
  .filters > label { margin-bottom: 16px; }
  .filter-title { display: none; }
  .filters > select { margin: 0 0 16px; }
  .color-buttons { justify-content: space-between; gap: 8px; }
  .color-buttons .mana { width: 38px; height: 38px; font-size: 13px; }
  .color-buttons .mana[aria-pressed=true] { outline-offset: 2px; }
  .filters .checkbox-label { min-height: 44px; font-size: 14px; }
  .filters .checkbox-label input { width: 20px; height: 20px; }
  .filters .tiny { font-size: 12px; }
  .results { order: 2; width: 100%; }
  input, select, textarea, .filters input, .filters select { font-size: 16px; min-height: 44px; padding: 10px 12px; }
  .searchbar { min-height: 50px; }
  .searchbar input { font-size: 16px; padding: 0; min-width: 0; }
  .primary, .secondary, .danger, .text-button, .icon-button { min-height: 44px; }
  .text-button { padding: 10px 4px; font-size: 13px; }
  .icon-button { min-width: 44px; }
  label { font-size: 11px; }
  .results-bar { flex-wrap: wrap; gap: 10px; }
  .results-bar > div { margin-left: auto; }
  .results-bar select { width: 140px; min-height: 44px; font-size: 14px; }
  .active-filter { min-height: 40px; }
  .card-grid { gap: 22px 12px; }
  .card-name { white-space: normal; font-size: 14px; line-height: 1.4; }
  .card-caption { flex-wrap: wrap; gap: 7px; font-size: 11px; }
  .card-list-row { grid-template-columns: 40px minmax(0,1fr) 64px; gap: 10px; }
  .card-list-row .cost { display: none; }
  .card-list-row .card-name { font-size: 14px; }
  .pagination { font-size: 12px; gap: 8px; }
  .pagination .secondary { padding: 9px 10px; font-size: 13px; }
  dialog { padding: 20px 16px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); border-radius: 10px; }
  .dialog-header { gap: 12px; }
  .dialog-header .icon-button { font-size: 26px; }
  .detail-images { max-width: 265px; }
  .detail-meta { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .detail-meta dd { overflow-wrap: anywhere; font-size: 14px; }
  .oracle-text { font-size: 15px; }
  .quantity-edit { flex-wrap: wrap; }
  .quantity-edit input { flex: 1; width: 100%; min-width: 60px; }
  .quantity-edit button { font-size: 13px; }
  .tag { font-size: 12px; }
  details, .detail-info .tiny { font-size: 13px; }
  summary { padding: 10px 0; }
  .file-input input { max-width: 100%; margin-inline: 0; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button { flex: 1; }
  .deck-list { grid-template-columns: minmax(0,1fr); }
  .editor-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .deck-panel, .pool-panel { padding: 16px; }
  .deck-panel .field-row, .pool-panel .field-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .deck-panel .field-row > label { width: 100%; }
  .editor-toolbar { gap: 8px; position: sticky; top: 64px; background: var(--bg); padding: 12px 0; z-index: 2; border-bottom: 1px solid var(--line); }
  .editor-toolbar #save-status { flex-basis: 100%; font-size: 13px; }
  .editor-toolbar #save-deck { margin-left: auto; }
  .deck-entry { flex-wrap: wrap; gap: 7px; }
  .deck-entry .entry-name { font-size: 14px; line-height: 1.4; }
  .deck-entry button:not(.entry-name) { width: 40px; height: 44px; font-size: 20px; }
  .deck-entry .cost { display: none; }
  .deck-counts { flex-wrap: wrap; font-size: 13px; gap: 14px; }
  .pool-card { gap: 9px; }
  .pool-card .card-name { font-size: 14px; }
  .pool-card .tiny { font-size: 12px; }
  .pool-card .cost { display: none; }
  .pool-card .secondary { min-width: 44px; }
  .pool-panel .checkbox-label { min-height: 44px; font-size: 14px; }
  .checkbox-label input { width: 20px; height: 20px; min-height: 20px; padding: 0; }
  .validation { font-size: 14px; overflow-wrap: anywhere; }
  .agent-panel { padding: 20px 16px; }
  .agent-panel .tiny, .agent-columns p { font-size: 13px; }
  .endpoint { padding: 13px; }
  .endpoint code { font-size: 13px; }
  .action-row > * { flex: 1 1 100%; }
  .connection-banner { margin: 12px 16px; padding: 15px; flex-direction: column; align-items: stretch; font-size: 14px; }
  footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  #toast { font-size: 14px; bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .color-buttons { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); justify-items: center; gap: 12px; }
  .color-buttons .mana { width: 44px; height: 44px; }
}

/* Keyword explanations use native disclosures for keyboard and touch access. */
.keyword-glossary { display: grid; gap: 10px; }
.keyword-entry { margin: 0; padding-top: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.keyword-entry summary { min-height: 44px; padding: 12px 14px; line-height: 1.6; overflow-wrap: anywhere; }
.keyword-entry summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.keyword-category { display: inline; margin-left: 10px; color: var(--muted); font-size: 11px; font-weight: normal; }
.keyword-body { padding: 0 14px 14px; line-height: 1.7; overflow-wrap: anywhere; }
.keyword-body p { margin: 0 0 12px; }
.keyword-body ul { margin: 0 0 12px; padding-left: 20px; }
.keyword-source { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }
.keyword-body .keyword-source { margin-bottom: 0; }
.keyword-source a { display: inline-block; padding: 8px 0; }
.keyword-source span { align-self: center; }
@media (max-width: 640px) {
  .keyword-body { font-size: 15px; }
  .keyword-category { display: block; margin-left: 18px; font-size: 12px; }
  .keyword-source { font-size: 12px; }
  .keyword-source a { min-height: 44px; }
}

.deck-search { margin-top: 22px; }
.deck-search > label { margin-bottom: 8px; }
.deck-search .searchbar { margin-bottom: 8px; }
.deck-search .searchbar input { min-width: 0; }
.deck-search .searchbar button { flex-shrink: 0; min-width: 44px; min-height: 44px; font-size: 12px; }
.deck-search .searchbar input::-webkit-search-cancel-button { display: none; }
.deck-search-empty { border: 1px dashed var(--line); border-radius: 6px; padding: 20px; }

.card-name-es { display: block; color: var(--muted); font-size: 11px; font-weight: normal; line-height: 1.5; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; }
.detail-spanish { display: block; margin: 0 0 14px; color: var(--gold); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.deck-entry .card-name-es { font-size: 11px; }
@media (max-width: 640px) { .card-name-es, .deck-entry .card-name-es { font-size: 12px; } }

/* Counts are card-wide, even when a tile represents one printing. */
.card-availability { display: flex; flex-wrap: wrap; gap: 3px 9px; margin: 7px 0; font-size: 11px; line-height: 1.5; color: var(--muted); font-weight: normal; }
.card-availability span:last-child { color: var(--gold); }
.card-availability.unavailable span:last-child { color: #da9f8e; }
@media (max-width: 640px) {
  .card-availability { gap: 2px 7px; font-size: 11px; }
  .deck-entry .card-availability { font-size: 10px; }
}

.collection-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.heading .collection-actions .primary { margin: 0; }
.catalog-card { display: grid; grid-template-columns: minmax(140px,220px) minmax(0,1fr); gap: 24px; margin: 20px 0; }
.catalog-card h3 { font-size: 22px; margin: 0 0 8px; }
.catalog-images .detail-image { width: 100%; display: block; margin-bottom: 10px; }
.catalog-pagination { display: flex; justify-content: space-between; gap: 12px; }
.manual-add-actions { display: flex; gap: 16px; align-items: end; }
.manual-add-actions label { flex: 1; margin: 0; }
.manual-add-actions input { width: 100%; }
.remove-card { width: 100%; }
.entry-title { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; }
.deck-printings, .printing-rarity { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.deck-printings { gap: 9px; }
.printing-rarity { color: #afb4ae; font-size: 10px; font-weight: normal; }
.printing-rarity.uncommon { color: #c5cbd3; }
.printing-rarity.rare { color: #d1b66d; }
.printing-rarity.mythic { color: #eea064; }
.printing-rarity.special, .printing-rarity.bonus { color: #c3a7d9; }
.rarity-label { text-transform: capitalize; }
.set-symbol { display: inline-flex; position: relative; width: 23px; height: 23px; align-items: center; justify-content: center; flex-shrink: 0; }
.set-code { font-size: 7px; letter-spacing: -.3px; }
.set-symbol.has-icon .set-code { visibility: hidden; }
.set-icon { width: 21px; height: 21px; object-fit: contain; position: absolute; filter: invert(1); }
@media (max-width:640px) {
  .collection-actions { width: 100%; }
  .collection-actions button { flex: 1; }
  #catalog-search-form .field-row { flex-direction: column; gap: 0; }
  .catalog-card { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .catalog-images { max-width: 225px; margin: auto; }
  .manual-add-actions { flex-wrap: wrap; }
  .manual-add-actions label, .manual-add-actions button { width: 100%; flex-basis: 100%; }
  #add-card-dialog select { max-width:100%; }
}

.basic-supply { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.basic-supply .field-row label { flex: 1; min-width: 0; }
.basic-supply .field-row input, .basic-supply .field-row select { width: 100%; }
.basic-supply button { min-height: 44px; }
.conversion-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.conversion-columns ul { padding-left: 18px; font-size: 12px; line-height: 1.8; }
#deck-status, #deck-parent { width: 100%; }
@media (max-width:640px) {
  .conversion-columns { grid-template-columns: minmax(0,1fr); gap: 8px; }
  #conversion-dialog .dialog-actions { flex-wrap: wrap; }
  #conversion-dialog .dialog-actions button { min-height: 44px; flex: 1; }
}