/* =================================================================== */
/* RinkSense — Game Summary (gs)                                       */
/* Strategy A: card owns rounding; table kept slightly inset           */
/* =================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --gs-font-size: 12.5px;
  --gs-line-height: 1.2;
  --gs-cell-px: 6px;
  --gs-cell-py: 4px;

  --gs-border: #e5e7eb;         /* gray-200 */
  --gs-header-bg: #f3f4f6;      /* gray-100 */
  --gs-header-fg: #111827;      /* gray-900 */
  --gs-subheader-bg: #f9fafb;   /* gray-50 */
  --gs-muted: #6b7280;          /* gray-500 */
  --gs-muted-strong: #374151;   /* gray-700 */

  /* event backgrounds (your exact hexes) */
  --gs-red:    #EC8987; /* OPP goal on-ice */
  --gs-green:  #82ECB7; /* PC on-ice (non-scorer/assist) */
  --gs-blue:   #B6D9F8; /* scorer */
  --gs-yellow: #ECE688; /* assister */
  --gs-purple: #B17AFF; /* penalty shot */

  /* Strategy A: tiny safety gutter on the right so no painter touches the card arc */
  --gs-right-gutter: 6px;
}

/* ---------- Table base ---------- */
.gs-root .gt{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--gs-font-size);
  line-height: var(--gs-line-height);
  color: var(--gs-muted-strong);
  background: #fff;
  border: 0px solid var(--gs-border);

  /* Strategy A — let the CARD own rounding/clipping; table stays rectangular */
  border-radius: 0;          /* no inner rounding */
  overflow: visible;         /* don't self-clip; the card will clip */

  /* Keep the table a hair inside the card's right arc (no visible real-estate loss) */
  padding-inline-end: var(--gs-right-gutter);
  margin-inline-end: 0;

  /* Stable scrollbars so they never overlap the arc */
  scrollbar-gutter: stable both-edges;
}
.gs-root .gt col{ width: auto; }

.gs-root .gt thead th,
.gs-root .gt tbody td{
  padding: var(--gs-cell-py) var(--gs-cell-px);
  border-right: 0px solid var(--gs-border);
  border-bottom: 0px solid var(--gs-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* header rows */
.gs-root .gt thead th{
  background: var(--gs-header-bg);
  color: var(--gs-header-fg);
  text-align: center;
  font-weight: 600;
}

/* subheaders (our gray header cells inside body) */
.gs-root .gt .gt-h{
  background: var(--gs-subheader-bg);
  color: var(--gs-muted-strong);
}

/* default cell alignment */
.gs-root .gt .gt-c{ text-align: center; }
.gs-root .gt .gt-l{ text-align: left !important; }

/* Bold tags inside THEAD stay bold; body/subheader headers match normal weight */
.gs-root .gt .gt-c b{ font-weight: inherit; }
.gs-root .gt thead th b{ font-weight: inherit; }

/* For now, make body subheader cells and any <b> inside them normal-weight */
.gs-root .gt .gt-h,
.gs-root .gt .gt-h b{ font-weight: 400; }

/* grey header helpers */
.gs-root .gt .gt-grey{      background: var(--gs-subheader-bg); color: var(--gs-muted-strong); }
.gs-root .gt .gt-grey-lite{ background: #fafafa;                color: var(--gs-muted); }

/* underlined section labels (Goalies / Skaters) */
.gs-root .gs-uline{ text-decoration: underline; }

/* ---------- Header pills row ---------- */
.gs-root .gs-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: center;
  margin: 2px 0 6px 0;
  font-size: var(--gs-font-size);
  line-height: var(--gs-line-height);
}

.gs-root .gs-pilltag{
  display: inline-flex;
  align-items: center;
  gap: 0.40rem;
  padding: 0.40rem 0.92rem;
  border-radius: 9999px;
  border: 1px solid #A3A9B5;
  background: #f3f4f6;
  color: #111827;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(17,24,39,0.06) inset,
    0 1px 0 rgba(0,0,0,0.05);
  font-weight: 400;
  font-size: calc(var(--gs-font-size) * 1.10);
  line-height: 1.05;
  min-height: 2.05rem;
}

.gs-root .gs-pilltag .k{
  opacity: 0.98;
  font-weight: 560;
  color: #6b7280;
}
.gs-root .gs-pilltag .v{
  color: #4b5563;
  font-weight: 600;
}

/* group gap token */
.gs-root .gs-pilltag.gs-gap{
  margin-left: 5rem;
  background: transparent;
  border-color: transparent;
  padding: 0;
  width: 0; height: 0;
}

/* state variants */
.gs-root .gs-pill--win{
  background: #AEE4D3;
  border-color: #7EA791;
  box-shadow: 0 0 0 1px rgba(17,24,39,0.08) inset;
}
.gs-root .gs-pill--even{
  background: #FAF6C8;
  border-color: #B5AF7A;
  box-shadow: 0 0 0 1px rgba(17,24,39,0.08) inset;
}
.gs-root .gs-pill--loss{
  background: #F4D9D7;
  border-color: #BE918C;
  box-shadow: 0 0 0 1px rgba(17,24,39,0.08) inset;
}

/* goalie-pull ✓ pill (header area): brighter & rounder */
.gs-root .gs-pill.gs-pill--ok{
  padding: 0.10rem 0.28rem;
  border-radius: 9999px;
  background: #CFFAEA;
  border-color: #10B981;
  color: #065F46;
}

/* ---------- In-cell event chips & shading ---------- */

/* chips/pills (G / A / + / −) — topmost in-cell layer */
.gs-root .gs-chip,
.gs-root .gs-pill{
  position: relative;
  z-index: 5;                /* above painters & content wrapper */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.95em;
  height: 1.15em;
  padding: 0 0.18rem;
  border-radius: 9999px;
  border: 1px solid #9ca3af;
  background: #f9fafb;
  color: #111827;
  font-weight: 600;
  font-size: 0.82em;
  line-height: 1;
  vertical-align: middle;
}

/* specific, lighter chip fills so they don’t match the cell bg 1:1 */
.gs-root .gs-chip--G{
  background: #D9E8FF;
  border-color: #9EC0F2;
  color: #0F1B33;
}
.gs-root .gs-chip--A{
  background: #FBF9D9;
  border-color: #C8C45C;
  color: #3A3A12;
}
.gs-root .gs-chip--plus{
  background: #E6FAF2;
  border-color: #5ACFA3;
  color: #0F3A2B;
}
.gs-root .gs-chip--minus{
  background: #FBEAEA;
  border-color: #D46F6C;
  color: #471B1A;
}

/* when chips sit atop shaded cells, blend the border a touch */
.gs-root .gs-bg-blue  .gs-chip--G{     border-color: #B6D9F8; }
.gs-root .gs-bg-yellow .gs-chip--A{    border-color: #CFCB63; }
.gs-root .gs-bg-green .gs-chip--plus{  border-color: #60D2A7; }
.gs-root .gs-bg-red   .gs-chip--minus{ border-color: #D57471; }

/* ensure body cells anchor absolute painters */
.gs-root .gt tbody td,
.gs-root .gt thead th{
  position: relative;
}

/* wrapper: covers the whole cell, sits above zebra/column bands */
.gs-root .gs-evwrap{
  position: absolute;
  inset: 0;                 /* fill the cell (padding box) */
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;               /* cellbg=0, colbg=1, evwrap=2, borders=3, content=4 */
}

/* pill overlay: centered to the CELL, independent of the shade */
.gs-root .gs-evchip{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% + var(--gs-chip-y, 0px)));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;               /* above shade (0) within wrapper */
  pointer-events: none;
}

/* ---------- Simple color helper backgrounds ---------- */
.gs-root .gs-bg-red{    background: var(--gs-red)    !important; color:#111827; }
.gs-root .gs-bg-green{  background: var(--gs-green)  !important; color:#111827; }
.gs-root .gs-bg-blue{   background: var(--gs-blue)   !important; color:#111827; }
.gs-root .gs-bg-yellow{ background: var(--gs-yellow) !important; color:#111827; }
.gs-root .gs-bg-purple{ background: var(--gs-purple) !important; color:#111827; }

/* DEBUG (optional) */
.gs-root .dbg-miss{ background: rgba(251, 191, 36, 0.18); } /* amber hint */

/* ---------- BLANK SLATE OVERRIDES (white cells, no borders) ---------- */
.gs-root .gt thead th,
.gs-root .gt td{
  background: #fff !important;
}
.gs-root .gt .gt-h,
.gs-root .gt .gt-grey,
.gs-root .gt .gt-grey-lite{
  background: #fff !important;
  color: inherit !important;
}
.gs-root .gt th,
.gs-root .gt td{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.gs-root .gt th::before,
.gs-root .gt th::after,
.gs-root .gt td::before,
.gs-root .gt td::after{
  content: none !important;
}

/* shaded background inside the wrapper, with controllable insets */
.gs-root .gs-shade{
  position: absolute;
  top:    var(--gs-inset-y, 0px);
  bottom: var(--gs-inset-y, 0px);
  left:   var(--gs-inset-x, 0px);
  right:  var(--gs-inset-x, 0px);
  background: var(--gs-shade-bg, transparent);
  border-radius: var(--gs-shade-radius, 4px);
  z-index: 0;               /* within wrapper */
  pointer-events: none;
}

/* =================================================================== */
/*            PAINTERS: unified, gapless, Excel-style                   */
/* =================================================================== */

/* Layer order (low→high): .gs-colbg (0) → .gs-cellbg (1) → .gs-bbox (2) → .gs-content (3) → chips (4) */

/* Goal-event / column band background */
.gs-root .gt .gs-colbg{
  position: absolute;
  inset: 0;
  background: var(--gs-colbg, transparent);
  z-index: 1;                 /* lowest */
  pointer-events: none;
}

/* Per-cell background (zebra / targeted) */
.gs-root .gt .gs-cellbg{
  position: absolute;
  inset: 0;                   /* full cell — no gaps between neighbors */
  background: var(--gs-cellbg, transparent);
  border-radius: 0;
  z-index: 0;                 /* above col band, below borders/content */
  pointer-events: none;
}

/* Border box container (drawn only on rectangle perimeter) */
.gs-root .gt .gs-bbox{
  position: absolute;
  inset: 0;
  z-index: 3;                 /* above backgrounds, below content */
  pointer-events: none;
  border-radius: 0 !important; /* multi-cell rects stay square */
  overflow: visible;           /* allow 1px overlap at edges */
}

/* Default overlap for anti-aliased seam hiding */
.gs-root .gt .gs-b {
  position: absolute;
  background: currentColor;
  pointer-events: none;
  --b-overlap-x: 1px;  /* horizontal overhang (used by top/bottom edges) */
  --b-overlap-y: 1px;  /* vertical overhang (used by left/right edges) */
}

/* Top edge */
.gs-root .gt .gs-b.t {
  top: 0;
  left: calc(-1 * var(--b-overlap-x));
  right: calc(-1 * var(--b-overlap-x));
  height: var(--b-t, 0px);
}
/* Right edge */
.gs-root .gt .gs-b.r {
  right: 0;
  top: calc(-1 * var(--b-overlap-y));
  bottom: calc(-1 * var(--b-overlap-y));
  width: var(--b-r, 0px);
}
/* Bottom edge */
.gs-root .gt .gs-b.b {
  bottom: 0;
  left: calc(-1 * var(--b-overlap-x));
  right: calc(-1 * var(--b-overlap-x));
  height: var(--b-b, 0px);
}
/* Left edge */
.gs-root .gt .gs-b.l {
  left: 0;
  top: calc(-1 * var(--b-overlap-y));
  bottom: calc(-1 * var(--b-overlap-y));
  width: var(--b-l, 0px);
}

/* Content wrapper: always above painters */
.gs-root .gt .gs-content{
  position: relative;
  z-index: 4;
}

/* Larger in-cell event chips (G / A / + / −) without affecting header pills */
.gs-root .gt .gs-evchip .gs-chip{
  min-width: 1.25em;   /* was ~0.95em */
  height: 1.35em;      /* was 1.15em */
  padding: 0 0.30rem;  /* a touch wider */
  font-size: 0.90em;   /* slightly larger text */
  line-height: 1;      /* keep crisp */
  border-width: 1px;   /* unchanged border weight */
}

/* ==== Text utilities (final, robust) ==== */

/* Tokens — slightly lighter greys for bold/semi */
:root{
  --gs-bold-fg: #4b5563; /* gray-600 */
  --gs-semi-fg: #6b7280; /* gray-500 */
}

/* Bold (700): apply to cell, its content wrapper, and any inner <b> */
.gs-root .gt th.gs-bold,
.gs-root .gt td.gs-bold,
.gs-root .gt th.gs-bold .gs-content,
.gs-root .gt td.gs-bold .gs-content,
.gs-root .gt th.gs-bold b,
.gs-root .gt td.gs-bold b{
  font-weight: 700 !important;
  color: var(--gs-bold-fg) !important;
}

/* Semi (600): same coverage */
.gs-root .gt th.gs-semi,
.gs-root .gt td.gs-semi,
.gs-root .gt th.gs-semi .gs-content,
.gs-root .gt td.gs-semi .gs-content,
.gs-root .gt th.gs-semi b,
.gs-root .gt td.gs-semi b{
  font-weight: 600 !important;
  color: var(--gs-semi-fg) !important;
}

/* Size bumps */
.gs-root .gt th.gs-fs-110,
.gs-root .gt td.gs-fs-110,
.gs-root .gt th.gs-fs-110 .gs-content,
.gs-root .gt td.gs-fs-110 .gs-content { font-size: 110% !important; }

.gs-root .gt th.gs-fs-120,
.gs-root .gt td.gs-fs-120,
.gs-root .gt th.gs-fs-120 .gs-content,
.gs-root .gt td.gs-fs-120 .gs-content { font-size: 120% !important; }

.gs-root .gt th.gs-fs-130,
.gs-root .gt td.gs-fs-130,
.gs-root .gt th.gs-fs-130 .gs-content,
.gs-root .gt td.gs-fs-130 .gs-content { font-size: 130% !important; }

/* Ensure any header/subheader <b> doesn’t fight utilities */
.gs-root .gt thead th b,
.gs-root .gt .gt-h b { font-weight: inherit !important; }

/* =================================================================== */
/* End Strategy A                                                      */
/* =================================================================== */

/* ==== Situation-specific semi-bold (weight + color only) ==== */
:root{
  /* tweak hues if you want them lighter/darker later */
  --gs-sitch-pp-fg: #22df2c; /* PP muted green */
  --gs-sitch-pk-fg: #DF7166; /* PK muted red   */
  --gs-sitch-ps-fg: #A86DFA; /* PS muted purple*/
}

/* Target both th/td and their .gs-content so wrappers don't grey it out */
.gs-root .gt th.gs-semi-pp,
.gs-root .gt td.gs-semi-pp,
.gs-root .gt th.gs-semi-pp > .gs-content,
.gs-root .gt td.gs-semi-pp > .gs-content{
  font-weight: 600 !important;
  color: var(--gs-sitch-pp-fg) !important;
}
.gs-root .gt th.gs-semi-pk,
.gs-root .gt td.gs-semi-pk,
.gs-root .gt th.gs-semi-pk > .gs-content,
.gs-root .gt td.gs-semi-pk > .gs-content{
  font-weight: 600 !important;
  color: var(--gs-sitch-pk-fg) !important;
}
.gs-root .gt th.gs-semi-ps,
.gs-root .gt td.gs-semi-ps,
.gs-root .gt th.gs-semi-ps > .gs-content,
.gs-root .gt td.gs-semi-ps > .gs-content{
  font-weight: 600 !important;
  color: var(--gs-sitch-ps-fg) !important;
}