/* phone-tables.css — phone layout for static content tables that overflowed a 390px screen (2026-10-08 visual sweep).
   Applied per table by dev-assets/sweep-fixes-2026-10-09/convert_tables.py, only where the table was MEASURED overflowing:
     .gc-pw  two-column tables: drop the forced min-width and wrap the text so the table fits.
     .gc-pc  three+ columns: each row becomes a card; every cell carries its column header in data-label.
   !important is deliberate: each page's own inline table rules (stripes, padding, min-width) out-rank a shared file. */
@media (max-width: 600px) {
  table.gc-pw { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  /* break-word (not anywhere): keeps a short label like "Attribute" whole instead of letting auto layout split it */
  table.gc-pw th, table.gc-pw td { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word; min-width: 0 !important; }

  /* the scroll box around a converted table: its right-edge fade (mask or ::after) now hides real text */
  :is(div, figure, section):has(> table.gc-pc, > table.gc-pw) { -webkit-mask-image: none !important; mask-image: none !important; }
  :is(div, figure, section):has(> table.gc-pc, > table.gc-pw)::after { content: none !important; }
  :is(div, figure, section):has(> table.gc-pc) { overflow: visible !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  table.gc-pc caption { display: block !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; }
  table.gc-pc, table.gc-pc tbody, table.gc-pc tr, table.gc-pc td, table.gc-pc tbody th {
    display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box;
  }
  table.gc-pc { border: 0 !important; background: transparent !important; }
  table.gc-pc thead, table.gc-pc tr.gc-pc-head { display: none !important; }
  table.gc-pc tbody tr {
    margin: 0 0 10px !important; padding: 10px 14px !important; border: 1px solid rgba(28, 25, 23, 0.12) !important;
    border-radius: 10px !important; background: #fff !important;
  }
  table.gc-pc tbody td, table.gc-pc tbody th {
    border: 0 !important; padding: 4px 0 !important; background: transparent !important; text-align: left !important;
    white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45;
  }
  /* a nowrap pill or badge inside a cell must wrap too (a long "Paused; …" status pill held one card 150px wide) */
  table.gc-pc td *, table.gc-pw td * { white-space: normal !important; max-width: 100%; }
  /* a highlighted "winner" cell keeps its tint + left bar (6 comparison pages); give its text room off the bar */
  table.gc-pc tbody td.winner { padding: 6px 10px 6px 12px !important; border-radius: 6px; margin: 2px 0; }
  table.gc-pc tbody tr > :first-child { font-weight: 700; font-size: 15px; padding-bottom: 6px !important; }
  table.gc-pc tbody tr > :not(:first-child)[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; opacity: 0.65; margin-bottom: 1px;
  }
}
/* a "Scroll/Swipe to see all columns" hint beside a converted table (marked by mark_hints.py) is false on phones */
@media (max-width: 600px) { .gc-pc-hint { display: none !important; } }
/* very narrow phones (320–360px): two-column tables were still 8–25px too wide with the page's own cell padding */
@media (max-width: 360px) {
  table.gc-pw th, table.gc-pw td { padding-left: 8px !important; padding-right: 8px !important; }
  table.gc-pw td:not(:first-child) { overflow-wrap: anywhere; } /* a long value word kept one RDA table 9px wide at 320px */
}