/* Screen fit (S4, 2026-09-17): nothing wider than the screen, every control reachable without a sideways scroll,
   and every sheet or dialog scrolls inside itself and closes with a button or a swipe down. Loaded after app.css. */
html, body { max-width: 100%; overflow-x: clip; }
html.fit-locked, html.fit-locked body { overflow: hidden; overscroll-behavior: none; }
.view, .main, .card, .drawer-panel { min-width: 0; }
:where(.view, .drawer-panel) :where(input:not([type=checkbox], [type=radio], [type=range]), select, textarea) { max-width: 100%; min-width: 0; }
code, .mono, .sku, .sh-id, .r-meta, .t-role, .eyebrow, td, dd, .pill { overflow-wrap: anywhere; }
.pk-elig { flex-wrap: wrap; }
.pk-elig > div { flex: 1 1 200px; min-width: 0; }
.top-actions, .filters, .c-actions, .win-tools, .tm-actbar, .rs-print, .d-head { flex-wrap: wrap; min-width: 0; }
/* A long button label wraps onto a second line instead of pushing the button off the screen. */
.btn { max-width: 100%; }
@media (max-width: 520px) {
  .btn { white-space: normal; height: auto; min-height: 34px; padding-block: 6px; line-height: 1.25; text-align: center; }
  .btn.small { min-height: 28px; padding-block: 4px; }
  .btn svg { flex: none; }
}
@media (max-width: 860px) {
  .seg { flex-wrap: wrap; overflow-x: visible !important; max-width: 100%; height: auto; }
  .seg > * { flex: 0 1 auto; min-width: 0; }
}

/* ---- Tables that do not fit become stacked cards (fit.js adds .fit-cards only when the table overflows) ---- */
@media screen {
  table.fit-cards, .view table.fit-cards { display: block; width: 100%; max-width: 100%; overflow: visible; border: 0; }
  .fit-wrap { max-height: none !important; overflow: visible !important; }
  table.fit-cards > thead { display: block; }
  table.fit-cards > thead > tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
  table.fit-cards > thead > tr > th { display: none; position: static; padding: 0; border: 0; background: transparent; }
  table.fit-cards > thead > tr > th.fit-sort { display: block; }
  table.fit-cards > thead > tr > th.fit-sort button { border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 11px; background: var(--surface-2); }
  table.fit-cards > thead.fit-nosort { display: none; }
  table.fit-cards > tbody, table.fit-cards > tfoot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  table.fit-cards > tbody > tr, table.fit-cards > tfoot > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  table.fit-cards > tbody > tr > td, table.fit-cards > tbody > tr > th, table.fit-cards > tfoot > tr > td { display: block; min-width: 0; width: auto !important; max-width: none !important; padding: 0; border: 0; text-align: start; white-space: normal; overflow-wrap: anywhere; }
  table.fit-cards > tbody > tr > td[data-label]:not(.fit-full)::before, table.fit-cards > tfoot > tr > td[data-label]:not(.fit-full)::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 10.5px/1.3 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
  table.fit-cards > tbody > tr > .fit-full, table.fit-cards > tbody > tr > [colspan] { grid-column: 1 / -1; }
  table.fit-cards > tbody > tr > .fit-act { display: flex; flex-wrap: wrap; align-items: center; align-self: end; gap: 8px; }
  table.fit-cards > tbody > tr > .fit-act:not([data-label]) { justify-content: flex-end; }
  table.fit-cards > thead > tr > th { width: auto !important; min-width: 0 !important; }
  table.fit-cards > thead > tr > th.fit-sort button { display: inline-flex; align-items: center; gap: 4px; margin: 0; min-height: 32px; white-space: nowrap; }
  table.fit-cards > thead > tr > th.fit-sort.on button { border-color: var(--accent); background: var(--accent-soft); }
  table.fit-cards > tbody > tr > .fit-act[data-label]::before { flex-basis: 100%; }
  table.fit-cards > tbody > tr > .fit-empty { display: none; }
  table.fit-cards > tbody > tr.fit-solo { padding: 0; border: 0; background: transparent; display: block; }
  table.fit-cards .inv-prod, table.fit-cards .t-name, table.fit-cards .r-title, table.fit-cards .rs-name { min-width: 0 !important; max-width: none !important; }
  table.fit-cards .inv-prod { white-space: normal; }
  .view table.fit-cards input.rs-in { width: auto; flex: 1 1 90px; max-width: 180px; }
}

/* ---- Sheets and dialogs ---- */
.more-panel { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px) !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.more-panel, .drawer-panel, .qs-list, .w3-pal-res, .lab-rev { overscroll-behavior: contain; }
.drawer-panel { max-height: 100dvh; }
.qs-list { max-height: min(60dvh, 520px); }
.fit-head { position: sticky; top: -10px; z-index: 3; display: flex; align-items: center; justify-content: center; min-height: 48px; margin: -10px -16px 8px; padding: 4px 16px; background: var(--surface); border-radius: 24px 24px 0 0; touch-action: none; cursor: grab; }
.fit-head .more-grip { margin: 0 auto; }
.fit-x { position: absolute; inset-inline-end: 10px; top: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); cursor: pointer; padding: 0; }
.fit-x svg { width: 18px; height: 18px; }
.fit-x:active { background: var(--line); }
.fit-dragging { transition: none !important; animation: none !important; }
.fit-settle { transition: transform .22s cubic-bezier(.2,.8,.2,1) !important; }
.fit-grab { display: none; }
@media (max-width: 700px) {
  .fit-grab { display: block; position: sticky; top: -20px; z-index: 4; height: 26px; margin: -20px -16px 4px; background: var(--surface); touch-action: none; cursor: grab; }
  .fit-grab::after { content: ""; display: block; width: 42px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 11px auto 0; }
  .qs-panel, .w3-pal { max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
  .w3-pal-back { padding-top: 12px !important; }
}