/* Bounded pages for card lists. Content stays readable and only visible items
   are mounted. The remaining height is reserved for the art, never its label. */
.fit-screen {
  width:min(100%,1100px);height:var(--fit-screen-height,100dvh);min-height:0;
  margin:0 auto;padding:calc(var(--st) + 10px) max(var(--sr),16px) max(var(--sb),10px) max(var(--sl),16px);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px;
}
.fit-header { display:grid;gap:8px;min-width:0;align-content:start }
.fit-top { display:flex;align-items:center;gap:10px;min-width:0 }
.fit-top h1 { font:850 clamp(1.35rem,4vw,2.05rem)/1.1 var(--sans);min-width:0;color:var(--moon);margin:0 }
.fit-top .kback,.fit-actions button { min-height:44px;padding:6px 11px;margin:0;font:850 .9rem/1.18 var(--sans);white-space:normal }
.fit-top .kback { flex:none }
.fit-top .kback .ic { width:18px;height:18px }
.fit-header .fd-search { min-height:44px;max-width:none;margin:0;padding:0 10px }
.fit-header .fd-input { min-height:42px;font-size:max(16px,1rem);width:100% }
.fit-sub { color:var(--moon-soft);font:750 .92rem/1.3 var(--sans);margin:0;text-wrap:pretty }
.fit-finder-tools { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center }
.fit-finder-tools .fd-search:last-child { grid-column:1/-1 }
.fit-view-button,.fit-action { min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border:1px solid #f7d9796b;border-radius:14px;background:#152b5ae6;color:#fff5d2;font:850 .9rem/1.15 var(--sans);cursor:pointer }
.fit-action.emphasis { background:#f6d178;color:#2a1c08;border-color:#ffe6a6 }
.fit-actions { display:flex;align-items:center;gap:7px;flex-wrap:wrap }
.fit-actions [aria-pressed=true] { background:#f6d178;color:#2a1c08;border-color:#ffe6a6 }
.fit-area { min-width:0;min-height:0 }
.fit-deck { --fit-gap:10px;height:100%;min-height:0;min-width:0;display:grid;
  grid-template-columns:repeat(var(--fit-cols,1),minmax(0,1fr));grid-template-rows:repeat(var(--fit-rows,1),minmax(0,1fr));
  gap:var(--fit-gap);place-items:stretch; }
.fit-deck:focus { outline:none }
.fit-deck>.fd-chip { display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;align-content:center;min-height:0;height:100%;max-height:170px;align-self:center;padding:4px 3px;gap:4px }
.fit-deck>.fd-chip .cl-art { max-width:min(108px,100%);width:auto;max-height:100%;height:100%;aspect-ratio:1;min-height:0 }
.fit-deck>.fd-chip .cl-art::before { display:none }
.fit-deck>.fd-chip .cl-label { margin:0;font:900 .97rem/1.17 var(--sans);text-wrap:balance }
.fit-deck[data-mode=text] { place-items:center }
.fit-message { max-width:46ch;display:grid;justify-items:center;gap:10px;text-align:center;color:var(--moon);padding:10px;font:750 1rem/1.4 var(--sans) }
.fit-message h2 { font:900 1.25rem/1.14 var(--sans);color:#fff2c2 }
.fit-card { min-width:0;min-height:0;max-height:270px;align-self:center;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:4px;justify-items:center }
.fit-card>.tile { min-height:44px;height:min(100%,calc(var(--fit-col-width) / var(--ar,.716)));width:auto;aspect-ratio:var(--ar,.716);max-width:100%;align-self:center;justify-self:center }
.fit-card>.tile img { object-fit:contain }
.fit-card>.tile .tile-name { display:none }
.fit-card>.tile .tile-hide { display:none }
.fit-card>.tile .tile-lock { top:50%;transform:translate(-50%,-50%) }
.fit-card-name { color:#fff2d1;font:850 .9rem/1.18 var(--sans);text-wrap:balance;overflow-wrap:anywhere;text-align:center }
.fit-pager { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:46px;justify-self:center;width:min(100%,440px) }
.fit-turn { display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:5px 10px;border:1px solid #f3d79568;border-radius:12px;background:#122852e8;color:#fff5d6;font:850 .86rem/1.12 var(--sans);cursor:pointer }
.fit-turn .ic { width:17px;height:17px }
.fit-turn:disabled { opacity:.44;cursor:default }
.fit-count { color:#f4e9d3;text-align:center;font:850 .85rem/1.16 var(--sans);overflow-wrap:anywhere }
.fit-pager[data-single=true] { min-height:0;grid-template-columns:1fr }
.fit-pager[data-single=true] .fit-turn { display:none }
.fit-keyboard .fit-deck,.fit-keyboard .fit-pager { visibility:hidden }
@media (max-height:430px) and (orientation:landscape) {
  .fit-screen { padding-top:max(var(--st),6px);padding-bottom:max(var(--sb),6px);gap:5px }
  .fit-header { gap:5px }
  .fit-finder-header { grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6px 12px }
  .fit-finder-header>.fit-sub { grid-column:1/-1 }
}
@media (max-width:370px) {
  .fit-screen { padding-inline:max(var(--sl),10px) max(var(--sr),10px) }
  .fit-turn { padding-inline:6px }
  .fit-turn .ic { width:14px;height:14px }
  .fit-pager { gap:5px }
}
.mine.fit-screen { max-width:1100px;padding-bottom:max(var(--sb),10px) }
.fit-collection-header .mine-action { margin-inline-start:auto }
.fit-card>.fit-creation { min-width:0;min-height:0;height:min(100%,calc(var(--fit-col-width) / .716));max-width:100%;aspect-ratio:290/405;padding:0;gap:0;background:none;border:0;box-shadow:none }
.fit-creation .mine-creation-art { height:100%;min-height:0 }
.fit-creation .mine-creation-art>svg { height:100%;width:100% }
.fit-card-name:empty { display:none }
@media (max-width:420px) {
  .fit-collection-header .fit-top { flex-wrap:wrap;gap:5px 9px }
  .fit-collection-header .mine-action { margin-inline-start:0 }
}