/* ISET canonical table system · CLAUDE.md §1.0.8
   Single source for tabular display across pages, instruments, and pack materials.

   Markup pattern:
     <div class="iset-table-wrap">
       <table class="iset-table iset-table--neg">          // or --pos / --neutral
         <caption class="iset-table__cap">Optional · uppercase eyebrow</caption>
         <thead><tr><th>...</th></tr></thead>
         <tbody><tr><td>...</td></tr></tbody>
       </table>
     </div>

   On mobile (< 720px) the wrapper enables horizontal scroll without breaking layout.
   Print drops the scrollbar and lets the table flow naturally.
*/

:root{
  --it-bg:#FFFFFF;
  --it-bg-2:#F5F1E9;
  --it-bg-3:#FBF9F4;
  --it-border:rgba(140,101,22,.22);
  --it-border-2:rgba(20,25,31,.08);
  --it-text:#16191F;
  --it-text-2:#4C5048;
  --it-text-3:#857F70;
  --it-gold:#8C6516;
  --it-gold-dim:rgba(140,101,22,.08);
  --it-gold-rim:rgba(140,101,22,.28);
  --it-rust:#7A2424;
  --it-rust-dim:rgba(122,36,36,.05);
  --it-rust-rim:rgba(122,36,36,.28);
  --it-green:#2E7D32;
  --it-green-dim:rgba(46,125,50,.06);
  --it-green-rim:rgba(46,125,50,.32);
}

/* === wrapper · enables horizontal scroll on narrow viewports === */
.iset-table-wrap{
  margin:18px 0;
  border-radius:12px;
  border:1px solid var(--it-border);
  background:var(--it-bg);
  box-shadow:0 6px 18px rgba(20,25,31,.05);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
.iset-table-wrap::-webkit-scrollbar{height:8px;background:transparent}
.iset-table-wrap::-webkit-scrollbar-thumb{background:var(--it-gold-rim);border-radius:8px}
.iset-table-wrap::-webkit-scrollbar-thumb:hover{background:var(--it-gold)}
.iset-table-wrap{scrollbar-color:var(--it-gold-rim) transparent;scrollbar-width:thin}

/* edge fade · cues that more content exists to the right */
.iset-table-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:24px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.95));
  pointer-events:none;opacity:0;transition:opacity .25s ease;
}
.iset-table-wrap.has-overflow::after{opacity:1}

/* === table base === */
.iset-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:13.5px;
  line-height:1.65;
  color:var(--it-text-2);
}

/* caption · sits above table as uppercase eyebrow */
.iset-table__cap{
  caption-side:top;
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--it-gold);font-weight:700;
  padding:16px 22px 4px;
  background:var(--it-bg-2);
}

/* header row */
.iset-table thead th{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--it-gold);font-weight:700;
  text-align:left;
  background:var(--it-bg-2);
  padding:14px 18px 12px;
  border-bottom:1px solid var(--it-border);
  white-space:nowrap;
}

/* body cells */
.iset-table tbody td{
  padding:13px 18px;
  vertical-align:top;
  border-bottom:1px solid var(--it-border-2);
  color:var(--it-text-2);
}
.iset-table tbody tr:last-child td{border-bottom:none}
.iset-table tbody tr:hover td{background:var(--it-gold-dim)}

/* first column · either mono-statute or sans-bold-name (modifier classes) */
.iset-table tbody td:first-child{
  color:var(--it-text);
  font-weight:600;
  white-space:nowrap;
}
.iset-table--mono-first tbody td:first-child{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--it-gold);
  font-weight:700;
}

/* marker column · ✗ for neg, ✓ for pos, ◐ for neutral */
.iset-table__mark{
  width:42px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;
  padding-left:18px !important;padding-right:8px !important;
  white-space:nowrap;
}
.iset-table--neg .iset-table__mark{color:var(--it-rust)}
.iset-table--pos .iset-table__mark{color:var(--it-gold)}
.iset-table--neutral .iset-table__mark{color:var(--it-text-3)}

/* statute / authority column · mono-styled */
.iset-table__statute{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.02em;
  color:var(--it-gold);font-weight:700;
  white-space:nowrap;
}

/* === variants · accent stripe on top === */
.iset-table--neg{border-top:none}
.iset-table-wrap:has(.iset-table--neg){border-top:3px solid var(--it-rust)}
.iset-table-wrap:has(.iset-table--pos){border-top:3px solid var(--it-gold)}
.iset-table-wrap:has(.iset-table--neutral){border-top:3px solid var(--it-text-3)}

/* fallback for browsers without :has() */
.iset-table-wrap.is-neg{border-top:3px solid var(--it-rust)}
.iset-table-wrap.is-pos{border-top:3px solid var(--it-gold)}
.iset-table-wrap.is-neutral{border-top:3px solid var(--it-text-3)}

/* === sticky first column on mobile horizontal scroll === */
@media (max-width: 720px){
  .iset-table{font-size:12.5px}
  .iset-table thead th,
  .iset-table tbody td{padding:11px 14px}
  .iset-table--sticky-first tbody td:first-child,
  .iset-table--sticky-first thead th:first-child{
    position:sticky;left:0;z-index:1;
    background:var(--it-bg);
    box-shadow:6px 0 8px -4px rgba(20,25,31,.10);
  }
  .iset-table--sticky-first thead th:first-child{background:var(--it-bg-2)}
}

/* === print === */
@media print{
  .iset-table-wrap{overflow:visible;box-shadow:none;border-radius:0;page-break-inside:auto}
  .iset-table-wrap::after{display:none}
  .iset-table{min-width:0}
  .iset-table tbody tr{page-break-inside:avoid}
  .iset-table tbody tr:hover td{background:none}
}