/* Data grid — every selector scoped under .gd. Tokens only. */

.gd{
  --gd-row-h:40px;
  --gd-pad-x:14px;
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--bg-1);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  font-family:var(--sans);
  color:var(--ink);
}

/* ---------- control bar ---------- */
.gd .gd-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.gd .gd-search{
  position:relative; display:flex; align-items:center; flex:0 1 260px; min-width:180px;
}
.gd .gd-search svg{
  position:absolute; left:9px; width:13px; height:13px; pointer-events:none;
  fill:none; stroke:var(--ink-4); stroke-width:1.5; stroke-linecap:round;
}
.gd .gd-q{
  width:100%; height:30px; padding:0 10px 0 27px;
  font:inherit; font-size:12.5px; color:var(--ink);
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--r-s);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.gd .gd-q::placeholder{color:var(--ink-4)}
.gd .gd-q:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.gd .gd-q::-webkit-search-cancel-button{cursor:pointer}

.gd .gd-filter{display:inline-flex; align-items:center; gap:6px}
.gd .gd-filter > span{font-size:11px; color:var(--ink-3); letter-spacing:.01em}
.gd .gd-filter select,
.gd .gd-size select{
  height:30px; padding:0 24px 0 9px; font:inherit; font-size:12.5px; color:var(--ink);
  background:var(--bg-1)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1.2 5 5 9 1.2' fill='none' stroke='%236B7079' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 8px center / 9px 6px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  -webkit-appearance:none; appearance:none; cursor:pointer;
  transition:border-color .15s var(--ease);
}
.gd .gd-filter select:hover,
.gd .gd-size select:hover{border-color:var(--brand-soft)}
.gd .gd-filter select.is-set{border-color:var(--brand-soft); background-color:var(--brand-tint); color:var(--brand-dark); font-weight:500}
.gd .gd-filter select:focus-visible,
.gd .gd-size select:focus-visible,
.gd .gd-clear:focus-visible,
.gd .gd-pg:focus-visible,
.gd .gd-sort:focus-visible,
.gd .gd-grp-btn:focus-visible{outline:2px solid var(--brand); outline-offset:1px; border-radius:var(--r-s)}

.gd .gd-clear{
  height:30px; padding:0 11px; font-size:12px; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--bg-1);
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.gd .gd-clear:hover{border-color:var(--brand-soft); color:var(--brand-dark)}
.gd .gd-clear-inline{margin-left:auto}

/* ---------- scroller ---------- */
.gd .gd-scroll{
  overflow:auto;
  max-height:var(--gd-max-h, 560px);
  overscroll-behavior-x:contain;
}
.gd .gd-table{
  width:100%; min-width:100%;
  border-collapse:separate; border-spacing:0;
  table-layout:fixed;
  font-size:13px;
}

/* ---------- head ---------- */
.gd thead th{
  position:sticky; top:0; z-index:3;
  background:var(--bg-1);
  padding:0 var(--gd-pad-x);
  height:38px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-3); text-align:left; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--line-2);
}
.gd thead th.gd-a-right{text-align:right}
.gd thead th.gd-a-center{text-align:center}
/* the whole header cell is the target, so the label can never be a dead zone */
.gd thead th.is-sortable{padding:0; cursor:pointer}
.gd thead th.is-sortable:hover{background:var(--bg-2)}
.gd thead th.is-sortable[aria-sort]:not([aria-sort="none"]){background:var(--brand-tint); color:var(--brand-dark)}
.gd .gd-sort{
  display:inline-flex; align-items:center; gap:5px;
  width:100%; height:38px; padding:0 var(--gd-pad-x);
  font:inherit; font-size:11px; font-weight:600;
  color:var(--ink-3); letter-spacing:.02em; white-space:nowrap;
  cursor:pointer;
  transition:color .12s var(--ease);
}
.gd .gd-sort > span{overflow:hidden; text-overflow:ellipsis}
.gd th.gd-a-right .gd-sort{flex-direction:row-reverse; justify-content:flex-start}
.gd th.gd-a-center .gd-sort{justify-content:center}
.gd thead th.is-sortable:hover .gd-sort{color:var(--ink)}
.gd .gd-sort.is-on{color:var(--brand-dark)}
.gd .gd-ar{width:7px; height:9px; flex:none; fill:var(--brand-deep); opacity:.95}
/* the sort glyph is always present, so a sortable column says so before the
   pointer arrives */
.gd .gd-ar-idle{fill:var(--ink-4); opacity:.42; transition:opacity .12s var(--ease)}
.gd thead th.is-sortable:hover .gd-ar-idle,
.gd .gd-sort:focus-visible .gd-ar-idle{opacity:.8}

/* ---------- body ---------- */
.gd tbody td{
  padding:0 var(--gd-pad-x);
  height:var(--gd-row-h);
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
  vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gd tbody td.gd-first{color:var(--ink); font-weight:500}
.gd td.gd-a-right{text-align:right}
.gd td.gd-a-center{text-align:center}
.gd td.gd-c-badge, .gd td.gd-c-bar, .gd td.gd-c-trend{text-overflow:clip}
.gd .gd-n,
.gd td.gd-a-right{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* rows are the interactive element; nothing inside them may swallow a click */
.gd tr.gd-row{cursor:pointer}
.gd tr.gd-row > td{transition:background .12s var(--ease), box-shadow .12s var(--ease)}
.gd tr.gd-row svg,
.gd tr.gd-row .gd-track,
.gd tr.gd-row .gd-track > i{pointer-events:none}
.gd tr.gd-row a,
.gd tr.gd-row button,
.gd tr.gd-row input,
.gd tr.gd-row select{pointer-events:auto}
.gd tr.gd-row:hover > td,
.gd tr.gd-row:focus-visible > td{background:var(--bg-2)}
.gd tr.gd-row:hover > td.gd-first{box-shadow:inset 2px 0 0 var(--brand-soft)}
.gd tr.gd-row:focus{outline:none}
.gd tr.gd-row:focus-visible > td{box-shadow:inset 0 1px 0 var(--brand), inset 0 -1px 0 var(--brand)}
.gd tr.gd-row:focus-visible > td.gd-first{box-shadow:inset 0 1px 0 var(--brand), inset 0 -1px 0 var(--brand), inset 2px 0 0 var(--brand)}
.gd tr.gd-row.is-sel > td{background:var(--brand-tint)}
.gd tr.gd-row.is-sel > td.gd-first{box-shadow:inset 2px 0 0 var(--brand)}

/* the open affordance: a chevron slides in at the row end on hover or focus */
.gd tbody tr.gd-row > td:last-child{position:relative}
.gd tbody tr.gd-row > td:last-child::after{
  content:''; position:absolute; right:5px; top:50%;
  width:5px; height:5px; margin-top:-3px;
  border-top:1.5px solid var(--brand); border-right:1.5px solid var(--brand);
  transform:rotate(45deg) translate(-3px,0);
  opacity:0; pointer-events:none;
  transition:opacity .12s var(--ease), transform .16s var(--ease);
}
.gd tbody tr.gd-row:hover > td:last-child::after,
.gd tbody tr.gd-row:focus-visible > td:last-child::after{
  opacity:.9; transform:rotate(45deg) translate(0,0);
}

/* ---------- microbar ---------- */
.gd .gd-barwrap{display:inline-flex; align-items:center; gap:9px; width:100%; justify-content:flex-end}
.gd .gd-track{
  flex:1 1 auto; min-width:26px; max-width:120px; height:5px;
  border-radius:3px; background:var(--bg-3); overflow:hidden;
}
.gd .gd-track > i{
  display:block; height:100%; border-radius:3px;
  background:var(--gd-bar, var(--brand)); opacity:.62;
}
.gd tr.gd-row:hover .gd-track > i{opacity:.92}
.gd .gd-barv{flex:none; font-variant-numeric:tabular-nums; color:var(--ink)}

/* ---------- trend ---------- */
.gd .gd-trend{display:inline-flex; align-items:center; gap:7px; justify-content:flex-end}
.gd .gd-tv{font-variant-numeric:tabular-nums}
.gd .gd-trend.is-up .gd-tv{color:var(--pos)}
.gd .gd-trend.is-down .gd-tv{color:var(--neg-ink)}
.gd .gd-trend.is-flat .gd-tv{color:var(--ink-3)}
.gd .gd-spark{width:40px; height:14px; flex:none; fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.gd .gd-spark polyline{stroke:currentColor}
.gd .gd-spark.is-up{color:var(--pos)}
.gd .gd-spark.is-down{color:var(--neg-ink)}
.gd .gd-spark.is-flat{color:var(--ink-4)}

/* ---------- groups ---------- */
.gd tr.gd-grp > td{
  padding:0; height:34px; overflow:visible;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);
}
.gd tr.gd-grp:first-child > td{border-top:0}
.gd tr.gd-grp{cursor:pointer}
.gd .gd-grp-btn{
  display:flex; align-items:center; gap:8px; width:100%; height:34px;
  padding:0 var(--gd-pad-x); text-align:left;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink);
}
.gd .gd-grp-btn:hover{background:var(--bg-3)}
.gd .gd-caret{width:9px; height:9px; flex:none; fill:var(--brand-deep); transition:transform .15s var(--ease)}
.gd .gd-grp-btn[aria-expanded="true"] .gd-caret{transform:rotate(90deg)}
.gd .gd-grp-c{color:var(--ink-4); font-weight:500; letter-spacing:0}

.gd tr.gd-sub > td{
  height:34px; background:var(--bg-2); color:var(--ink-2);
  font-size:12px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--line-2);
}
.gd tr.gd-sub > td.gd-a-right{font-variant-numeric:tabular-nums}

/* ---------- totals footer ---------- */
.gd tfoot td{
  position:sticky; bottom:0; z-index:2;
  height:46px; padding:0 var(--gd-pad-x);
  background:var(--bg-1);
  border-top:1px solid var(--line-2);
  color:var(--ink); font-weight:600; font-size:13px;
  white-space:nowrap; overflow:hidden;
}
.gd tfoot td.gd-a-right{text-align:right; font-variant-numeric:tabular-nums}
.gd .gd-tot-l{display:flex; flex-direction:column; gap:1px; line-height:1.25}
.gd .gd-tot-sub{font-size:10.5px; font-weight:500; color:var(--ink-4); letter-spacing:.01em}
.gd tfoot[data-filtered="1"] td{background:var(--bg-2)}

/* ---------- empty ---------- */
.gd .gd-empty-row > td{border-bottom:1px solid var(--line); white-space:normal; height:auto}
.gd .gd-empty{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:56px 24px; text-align:center;
}
.gd .gd-empty p{margin:0; color:var(--ink-3); font-size:13px}

/* ---------- pager ---------- */
.gd .gd-pager{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:9px 12px;
  border-top:1px solid var(--line);
  background:var(--bg-2);
}
.gd .gd-showing{margin:0; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.gd .gd-pg-wrap{display:flex; align-items:center; gap:3px; margin-left:auto}
.gd .gd-pg{
  min-width:28px; height:28px; padding:0 8px;
  font-size:12px; color:var(--ink-2);
  border:1px solid transparent; border-radius:var(--r-s);
  font-variant-numeric:tabular-nums; cursor:pointer;
  transition:background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.gd .gd-pg:hover:not([disabled]){background:var(--bg-1); border-color:var(--brand-soft); color:var(--brand-dark)}
.gd .gd-pg[disabled]{color:var(--ink-4); opacity:.5; cursor:default}
.gd .gd-pg[data-step]{border-color:var(--line-2); background:var(--bg-1); padding:0 10px}
.gd .gd-pg[data-step="prev"]{margin-left:9px}
.gd .gd-pg[data-step][disabled]{background:transparent; border-color:var(--line)}
/* the page you are on is state, not a control */
.gd .gd-pg-wrap > [aria-current="page"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 8px; font-size:12px; font-weight:600;
  color:var(--brand-dark); background:var(--brand-tint);
  border:1px solid var(--brand-soft); border-radius:var(--r-s);
  font-variant-numeric:tabular-nums;
}
.gd .gd-pg-wrap > [aria-hidden="true"]{padding:0 3px; color:var(--ink-4); font-size:12px}
.gd .gd-size{display:inline-flex; align-items:center; gap:6px; margin-left:10px}
.gd .gd-size > span{font-size:11px; color:var(--ink-3)}
.gd .gd-size select{height:28px}

/* ---------- row figures, for a row with nothing deeper ---------- */
.gd .gd-peek{
  position:absolute; z-index:6; width:280px; max-width:calc(100% - 16px);
  padding:12px 14px;
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:var(--shadow-2);
}
.gd .gd-peek-h{
  margin:0 0 8px; font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gd .gd-peek-l{margin:0; display:flex; flex-direction:column; gap:5px}
.gd .gd-peek-l > div{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.gd .gd-peek-l dt{font-size:11px; color:var(--ink-3); white-space:nowrap}
.gd .gd-peek-l dd{
  margin:0; font-size:12px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gd .gd-peek-x{
  margin-top:10px; height:26px; padding:0 10px; font-size:11.5px; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--bg-1);
  cursor:pointer;
}
.gd .gd-peek-x:hover{border-color:var(--brand-soft); color:var(--brand-dark)}
.gd .gd-peek-x:focus-visible{outline:2px solid var(--brand); outline-offset:1px}

/* ---------- the grid announces that it is live ---------- */
.gd[data-gd-live] thead th{border-bottom-color:var(--brand-soft)}
.gd[data-gd-live] .gd-showing{color:var(--ink-2)}

/* ---------- narrow ---------- */
@media (max-width:1100px){
  .gd{--gd-pad-x:11px}
  .gd .gd-pager{justify-content:flex-start}
  .gd .gd-pg-wrap{margin-left:0}
}