/* Strategy table. External by necessity: the site's CSP is style-src 'self',
   so an inline <style> block is blocked and the page renders unstyled. */

.strategy-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.strategy-rules button {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 99px; background: rgba(2, 17, 14, .4);
  color: var(--muted); font-family: inherit; font-size: .66rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.strategy-rules button[aria-pressed="true"] { border-color: var(--cream); color: var(--cream); }
.strategy-rules i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); font-style: normal; }
.strategy-rules button[aria-pressed="true"] i { background: var(--green); }

/* The header row was already `position: sticky; top: 0` and never stuck.
   `overflow-x: auto` makes this element a scroll container, so `top` is
   measured against ITS scrollport — and with height:auto that port never
   scrolls, so the row had nothing to stick to while the page moved beneath it.
   Giving the box a height makes it the thing that scrolls, and both axes
   freeze for real. */
.sheet {
  max-height: min(70vh, 620px);
  overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 16px; background: var(--felt-deep);
}
.sheet table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; }
.sheet caption {
  caption-side: top; padding: 13px 15px; text-align: left; color: var(--muted);
  font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
/* The caption is deliberately NOT sticky. Pinning it too meant the column
   headers had to park below it at a hardcoded offset, and that number was
   wrong the moment the caption wrapped — the headers slid underneath it and
   vanished. The caption is a legend; it can scroll away. */
.sheet th, .sheet td { padding: 0; text-align: center; }
.sheet thead th {
  position: sticky; top: 0; z-index: 3; padding: 9px 0 10px;
  background: var(--felt-light); color: var(--cream);
  font: 700 .95rem/1 "Bodoni 72", Didot, serif;
}
.sheet thead th:first-child {
  left: 0; z-index: 5; background: var(--felt-deep);
}
.sheet tbody th {
  position: sticky; left: 0; z-index: 2; width: 64px; padding: 0 10px;
  background: var(--felt-deep); text-align: right; color: var(--cream);
  font: 700 .88rem/1 "Bodoni 72", Didot, serif; border-right: 1px solid var(--line);
}
.sheet tbody td { border-top: 1px solid rgba(244, 233, 207, .06); border-left: 1px solid rgba(244, 233, 207, .06); }

/* Ruled, labelled sections — the ledger's own organising device. */
.sheet tr.rail th {
  padding: 14px 10px 6px; color: var(--muted); font: 800 .56rem/1 inherit;
  letter-spacing: .15em; text-transform: uppercase; text-align: left;
  border-right: 1px solid var(--line);
}
.sheet tr.rail td { border: 0; border-top: 1px solid var(--line); }

.cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 42px; padding: 5px 2px;
}
.cell b { font: 800 .82rem/1 inherit; letter-spacing: .02em; }
.cell small { font-size: .5rem; font-weight: 700; letter-spacing: .06em; opacity: .62; text-transform: lowercase; }

.t-hit { color: var(--muted); background: rgba(255, 255, 255, .02); }
.t-stand { color: var(--green); background: rgba(93, 204, 139, .15); }
.t-double { color: var(--yellow); background: rgba(229, 185, 75, .16); }
.t-double-stand { color: var(--yellow); background: rgba(229, 185, 75, .16); box-shadow: inset 0 -3px 0 rgba(93, 204, 139, .55); }
.t-split { color: var(--ink); background: var(--cream); }
.t-split-soft { color: var(--cream); background: rgba(244, 233, 207, .13); box-shadow: inset 0 0 0 1px rgba(244, 233, 207, .42); }
.t-sur { color: var(--red); background: rgba(226, 85, 62, .17); }

.strategy-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; margin-top: 14px; }
.strategy-legend div {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(2, 17, 14, .34);
  color: var(--muted); font-size: .72rem;
}
.strategy-legend span { flex: 0 0 auto; width: 34px; padding: 4px 0; border-radius: 6px; text-align: center; font: 800 .66rem/1 inherit; }

.rule-decks {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.rule-decks select {
  min-height: 32px; padding: 0 6px;
  border: 0; border-radius: 7px;
  color: var(--cream); background: rgba(255,255,255,.07);
  font-size: .85rem; font-weight: 700; letter-spacing: 0;
}
.rule-decks select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }


/* ---- Look it up -------------------------------------------------------- */
/* One line, not a hero. The chart is what the page is for; this is a shortcut
   into it, so it takes a row and gives the rest of the screen back. */
.lookup { margin-bottom: 10px; }
.lookup-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 13px;
  background: rgba(2, 17, 14, .45);
}
.lookup-row select {
  flex: 1 1 108px; min-width: 0; min-height: 48px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px;
  color: var(--cream); background: rgba(2, 17, 14, .6);
  font-family: inherit; font-size: .9rem; font-weight: 700;
  touch-action: manipulation;
}
.lookup-row select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.lookup-vs { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lookup-row strong {
  flex: 0 0 auto; margin-left: auto; padding: 6px 13px;
  border-radius: 999px; background: rgba(244, 233, 207, .07);
  font: 700 1.05rem/1.2 "Bodoni 72", Didot, Georgia, serif; letter-spacing: -.01em;
  white-space: nowrap;
}
.lookup-note { margin: 6px 2px 0; color: var(--muted); font-size: .7rem; }

/* Same colour language as the chart, so the answer and the grid agree. */
.lookup-row strong.t-hit { color: #ff9484; }
.lookup-row strong.t-stand { color: #8de4b2; }
.lookup-row strong.t-double, .lookup-row strong.t-double-stand { color: var(--yellow); }
.lookup-row strong.t-split, .lookup-row strong.t-split-soft { color: #8fd0ff; }
.lookup-row strong.t-sur { color: var(--cream); }

/* The looked-up cell, so the grid confirms the answer rather than repeating it. */
.sheet tr.is-row th[scope="row"] { color: var(--yellow); }
.sheet td.is-found .cell {
  outline: 2px solid var(--yellow); outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(229, 185, 75, .18);
}

@media (max-width: 520px) {
  /* 42px is under the 44px touch minimum and it showed — the selects were a
     miss for anyone not aiming carefully. Full width, 54px, full-size text.
     The chart still keeps most of the screen. */
  .sheet { max-height: 66vh; }
  .lookup-row { gap: 7px; padding: 10px; }
  .lookup-row select { flex: 1 1 100%; min-height: 54px; font-size: 1rem; }
  .lookup-vs { flex: 1 1 100%; text-align: center; margin: -2px 0; }
  .lookup-row strong { flex: 1 1 100%; margin-left: 0; text-align: center; font-size: 1.2rem; padding: 9px 13px; }
}