/* ═══════════════════════════════════════════════════════════════
   7 — TABLES (canonical, site-wide)
   Single source of truth for every table: verbatim module-content
   tables (.table-wrap table) AND code-built diagram tables
   (.fss-data-table). Overrides the legacy rules in 3-components.css
   and 5-polish-fixes-final.css (loaded later in the cascade).

   Behavior:
   · Desktop / tablet — classic table, comfortable rhythm, rows
     auto-size, no clipping.
   · Mobile ≤640px — tables with data-labels stack into cards
     (one card per row, "HEADER  value" lines). No horizontal
     compression, no hidden text, no pinch zoom.
   · Tables that can't stack (no headers / very wide numeric grids)
     fall back to momentum horizontal scroll with a fade hint that
     only shows while there is actually more content to scroll
     (.is-scrollable / .at-end classes set by ResponsiveTables.tsx),
     so content is never sitting invisibly under a gradient.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base wrapper ── */
.table-wrap {
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.table-wrap table,
.fss-data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
}

/* ── Header cells ── */
.table-wrap thead th,
.fss-data-table thead th {
  text-align: left;
  vertical-align: bottom;
  padding: 12px 18px;
  background: var(--surface2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  white-space: normal; /* headers may wrap — never clip */
}

/* ── Body cells ── */
.table-wrap td,
.fss-data-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
  overflow-wrap: anywhere; /* long tokens never blow out the layout */
}
.table-wrap tbody tr:last-child td,
.fss-data-table tbody tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover td { background: var(--glass-d); }

/* Health colors (kept from legacy system) */
td.green, .green { color: var(--green); font-weight: 600; }
td.yellow, .yellow { color: var(--yellow); font-weight: 600; }
td.red, .red { color: var(--red); font-weight: 600; }

/* ── Scroll-fade hint: ONLY when scrollable AND not at the end.
      Legacy always-on ::after fade removed (it hid content). ── */
.table-wrap::after { content: none; }
.table-wrap.is-scrollable:not(.at-end)::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--surface));
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ≤640px — stacked cards
   ResponsiveTables.tsx marks stackable tables with
   .table-wrap--stack and writes data-label onto every td.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Stacked mode */
  .table-wrap--stack { overflow: visible; border: none; background: transparent; }
  .table-wrap--stack::after { content: none !important; }
  .table-wrap--stack table { min-width: 0; display: block; }
  .table-wrap--stack thead { display: none; }
  .table-wrap--stack tbody { display: block; }
  .table-wrap--stack tbody tr {
    display: block;
    margin: 0 0 12px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .table-wrap--stack tbody tr:hover td { background: transparent; }
  .table-wrap--stack td {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .table-wrap--stack tbody tr td:last-child { border-bottom: none; }
  .table-wrap--stack td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 38%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text2);
    line-height: 1.5;
  }
  /* Cells with no header (rare) get full width */
  .table-wrap--stack td:not([data-label])::before,
  .table-wrap--stack td[data-label=""]::before { content: none; }

  /* Scroll-fallback mode: keep a sane min width so columns
     don't compress into unreadability */
  .table-wrap--scroll table { min-width: 560px; }
  .table-wrap--scroll td, .table-wrap--scroll th { padding: 11px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   DIAGRAM DATA TABLES (.fss-data-table) — shared React component
   Same visual language; grid on desktop, cards on mobile.
   ═══════════════════════════════════════════════════════════════ */
.fss-data-table {
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.fss-dt-head, .fss-dt-row {
  display: grid;
  grid-template-columns: var(--dt-cols, 1fr 1fr 1fr);
  gap: 0 14px;
  padding: 13px 16px;
  align-items: start;
}
.fss-dt-head {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text2);
}
.fss-dt-row { font-size: 14px; line-height: 1.55; border-bottom: 1px solid var(--border); }
.fss-dt-row:last-child { border-bottom: none; }
.fss-dt-cell { min-width: 0; overflow-wrap: anywhere; }
.fss-dt-cell b, .fss-dt-cell strong { color: var(--heading); }
.fss-dt-label { display: none; }

@media (max-width: 640px) {
  .fss-data-table { border: none; background: transparent; overflow: visible; }
  .fss-dt-head { display: none; }
  .fss-dt-row {
    display: block;
    margin: 0 0 12px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .fss-dt-row .fss-dt-cell {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .fss-dt-row .fss-dt-cell:last-child { border-bottom: none; }
  .fss-dt-label {
    display: block;
    flex: 0 0 38%;
    max-width: 38%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text2);
    line-height: 1.5;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING-LAYER FIXES (popup / nav separation)
   Z-scale: content sticky 40 · mobile bars 85 · capture popup 88 ·
   sidebar/backdrop/header 90–100 · feedback 1200 · lightboxes 200+.
   The capture popup (88) always sits BELOW navigation (90+), so the
   Discord button is never tinted, covered, or restyled by it.
   ═══════════════════════════════════════════════════════════════ */
.fss-capture-pop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 88;
  width: min(400px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,0.22));
  padding: 24px 22px 22px;
  animation: fss-pop-in 0.28s cubic-bezier(0.21, 0.9, 0.35, 1);
}
@keyframes fss-pop-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .fss-capture-pop {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)); /* above sticky module bar */
  }
}
@media (prefers-reduced-motion: reduce) {
  .fss-capture-pop { animation: none; }
}
/* While the capture popup is open, hide the feedback pill so the two
   floating elements never overlap in the bottom-right corner. */
body.fss-capture-open .fss-feedback-btn,
body.fss-capture-open .fss-feedback-reopen { display: none !important; }

/* ── Accessibility: visible focus + 44px hit targets on header controls ── */
.hdr-btn { width: 44px; height: 44px; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, .dhc-btn:focus-visible, .hdr-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm, 8px);
}
/* Header capture bar dismiss: small visual ×, 44px touch area */
#header-capture-bar button[aria-label="Dismiss"] {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
}
#header-capture-bar button[aria-label="Dismiss"]::before {
  content: "";
  position: absolute;
  inset: -8px; /* extends tap area to 48px without changing looks */
}