/* table-responsive.css — Sean FAIL fix 2026-09-15
   Elegant desktop matrix + true mobile card-stack for .table-wrap.table-stack
   Additive; does not touch Palm hit-area rules. Beauty magenta/maroon via --t-accent.
*/

/* ---- Desktop / tablet: denser typography so 5–7 cols fit without scroll when possible ---- */
@media (min-width: 900px) {
  .prose-custom .table-wrap.table-stack,
  .table-wrap.table-stack {
    overflow-x: visible;
    max-width: 100%;
  }
  .prose-custom .table-wrap.table-stack table,
  .table-wrap.table-stack table {
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
  }
  .prose-custom .table-wrap.table-stack th,
  .prose-custom .table-wrap.table-stack td,
  .table-wrap.table-stack th,
  .table-wrap.table-stack td {
    padding: 0.45rem 0.5rem;
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
  }
  .prose-custom .table-wrap.table-stack[data-cols="6"] th,
  .prose-custom .table-wrap.table-stack[data-cols="6"] td,
  .prose-custom .table-wrap.table-stack[data-cols="7"] th,
  .prose-custom .table-wrap.table-stack[data-cols="7"] td,
  .table-wrap.table-stack[data-cols="6"] th,
  .table-wrap.table-stack[data-cols="6"] td,
  .table-wrap.table-stack[data-cols="7"] th,
  .table-wrap.table-stack[data-cols="7"] td {
    padding: 0.4rem 0.4rem;
    font-size: 0.78rem;
  }
  /* Prefer fitting; only allow subtle scroll as last resort for ultra-wide matrices */
  .prose-custom .table-wrap.table-stack[data-cols="7"],
  .table-wrap.table-stack[data-cols="7"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .prose-custom .table-wrap.table-stack[data-cols="7"]::after,
  .table-wrap.table-stack[data-cols="7"]::after {
    content: none;
  }
}

/* Mid widths: still prefer stack over clipped horizontal table */
@media (min-width: 721px) and (max-width: 899px) {
  .prose-custom .table-wrap.table-stack table,
  .table-wrap.table-stack table {
    min-width: 0 !important;
  }
}

/* ---- Mobile + narrow tablet: TRUE card stack (all cols visible, no H-scroll) ---- */
@media (max-width: 899px) {
  .prose-custom .table-wrap.table-stack,
  .table-wrap.table-stack,
  .item-card--split > .table-wrap.table-stack,
  .item-card--bg > .table-wrap.table-stack,
  .article-flow .prose-custom .table-wrap.table-stack {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
  }

  .prose-custom .table-wrap.table-stack::before,
  .prose-custom .table-wrap.table-stack::after,
  .table-wrap.table-stack::before,
  .table-wrap.table-stack::after {
    content: none !important;
    display: none !important;
  }

  .prose-custom .table-wrap.table-stack table,
  .prose-custom .table-wrap.table-stack thead,
  .prose-custom .table-wrap.table-stack tbody,
  .prose-custom .table-wrap.table-stack tr,
  .prose-custom .table-wrap.table-stack th,
  .prose-custom .table-wrap.table-stack td,
  .table-wrap.table-stack table,
  .table-wrap.table-stack thead,
  .table-wrap.table-stack tbody,
  .table-wrap.table-stack tr,
  .table-wrap.table-stack th,
  .table-wrap.table-stack td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    white-space: normal !important;
  }

  .prose-custom .table-wrap.table-stack thead,
  .table-wrap.table-stack thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }

  .prose-custom .table-wrap.table-stack tbody,
  .table-wrap.table-stack tbody {
    display: grid !important;
    gap: 0.85rem !important;
  }

  .prose-custom .table-wrap.table-stack tbody tr,
  .table-wrap.table-stack tbody tr {
    display: block !important;
    background: color-mix(in srgb, var(--t-bg-card, #fff) 94%, var(--t-bg-primary, #fff5f7));
    border: 1px solid color-mix(in srgb, var(--t-border, #f5d0d8) 88%, transparent);
    border-radius: 1rem;
    margin: 0 !important;
    padding: 0.85rem 0.95rem 0.7rem !important;
    box-shadow: 0 10px 24px #1c0f0c0d;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .prose-custom .table-wrap.table-stack tbody tr:nth-child(2n) td,
  .prose-custom .table-wrap.table-stack tbody tr:hover td,
  .table-wrap.table-stack tbody tr:nth-child(2n) td,
  .table-wrap.table-stack tbody tr:hover td {
    background: transparent !important;
  }

  .prose-custom .table-wrap.table-stack td,
  .table-wrap.table-stack td {
    display: grid !important;
    grid-template-columns: minmax(6.25rem, 34%) minmax(0, 1fr) !important;
    align-items: start;
    gap: 0.45rem 0.75rem;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--t-border, #f5d0d8) 70%, transparent) !important;
    padding: 0.4rem 0 !important;
    color: var(--t-text-secondary, #4a342c);
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: normal !important;
    word-break: break-word;
    overflow: visible !important;
  }

  .prose-custom .table-wrap.table-stack td:last-child,
  .table-wrap.table-stack td:last-child {
    border-bottom: 0 !important;
  }

  .prose-custom .table-wrap.table-stack td::before,
  .table-wrap.table-stack td::before {
    content: attr(data-label) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t-accent, #b71c1c);
    padding-top: 0.12rem;
    font-size: 0.66rem;
    font-weight: 700;
    display: block !important;
  }

  /* Platform / first cell = card title */
  .prose-custom .table-wrap.table-stack td:first-child,
  .table-wrap.table-stack td:first-child {
    grid-template-columns: 1fr !important;
    letter-spacing: -0.02em;
    color: var(--t-text-primary, #1c0f0c) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.15rem;
    padding-top: 0.05rem !important;
    padding-bottom: 0.55rem !important;
    border-bottom-color: color-mix(in srgb, var(--t-border, #f5d0d8) 90%, transparent) !important;
  }

  .prose-custom .table-wrap.table-stack td:first-child::before,
  .table-wrap.table-stack td:first-child::before {
    display: none !important;
  }

  /* 2-col stacks stay label/value without duplicating attr labels (Base pattern) */
  .prose-custom .table-wrap.table-stack[data-cols="2"] td::before,
  .table-wrap.table-stack[data-cols="2"] td::before,
  .prose-custom .table-wrap.table-stack[data-cols="2"] td:first-child::before,
  .table-wrap.table-stack[data-cols="2"] td:first-child::before {
    display: none !important;
  }
  .prose-custom .table-wrap.table-stack[data-cols="2"] td:first-child,
  .table-wrap.table-stack[data-cols="2"] td:first-child {
    color: var(--t-accent, #b71c1c) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding-bottom: 0.38rem !important;
  }
  .prose-custom .table-wrap.table-stack[data-cols="2"] tbody tr,
  .table-wrap.table-stack[data-cols="2"] tbody tr {
    display: grid !important;
    gap: 0.35rem 0.75rem;
  }

  /* Kill page-level horizontal scroll caused by wide matrices */
  .prose-custom:has(.table-wrap.table-stack),
  main:has(.table-wrap.table-stack) {
    overflow-x: visible;
    max-width: 100%;
  }
}