/* hotusage - design tokens (light) */
:root {
  color-scheme: light;
  --page:           #f9f9f7;
  --surface:        #fcfcfb;
  --ink:            #0b0b0b;
  --ink-2:          #52514e;
  --muted:          #898781;
  --grid:           #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);
  /* series: color follows the token type, everywhere */
  --s-out:          #2a78d6;   /* output      - slot 1 blue   */
  --s-in:           #eb6834;   /* input       - slot 2 orange */
  --s-cw:           #1baf7a;   /* cache write - slot 3 aqua   */
  --s-cr:           #eda100;   /* cache read  - slot 4 yellow */
  --s-ctx:          #4a3aa7;   /* context line - slot 7 violet */
  --lift:           brightness(1.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page:         #0d0d0d;
    --surface:      #1a1a19;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --muted:        #898781;
    --grid:         #2c2c2a;
    --baseline:     #383835;
    --border:       rgba(255, 255, 255, 0.10);
    --s-out:        #3987e5;
    --s-in:         #d95926;
    --s-cw:         #199e70;
    --s-cr:         #c98500;
    --s-ctx:        #9085e9;
    --lift:         brightness(1.15);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; }

header.top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
header.top h1 { font-size: 20px; font-weight: 650; margin: 0; }
header.top .sub { color: var(--ink-2); font-size: 13px; }
header.top .spacer { flex: 1; }
button.refresh {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
button.refresh:hover { color: var(--ink); }

/* ---- filter row: one row, above everything it scopes ---- */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--page); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
select.project {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: 13px; max-width: 260px;
}
.filters .flabel { color: var(--muted); font-size: 12px; }

/* ---- stat tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.tile .label { color: var(--ink-2); font-size: 12.5px; margin-bottom: 4px; }
.tile .value { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.tile .hint { color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.card-head h2 { font-size: 14.5px; font-weight: 650; margin: 0; }
.card-head .spacer { flex: 1; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend .item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; }
.legend .linekey { width: 14px; height: 2px; border-radius: 1px; }
.viewtoggle { display: inline-flex; gap: 2px; }
.viewtoggle button {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; padding: 2px 9px; border-radius: 6px; cursor: pointer;
}
.viewtoggle button[aria-pressed="true"] { color: var(--ink); background: var(--page); }

.chartbox { position: relative; }
.chartbox.loading { opacity: 0.6; }
.chartbox svg { display: block; width: 100%; height: auto; }
.chartbox .scroller { overflow-x: auto; }

svg text { font: 11px system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--muted); }
svg .tick { font-variant-numeric: tabular-nums; }
svg .gridline { stroke: var(--grid); stroke-width: 1; }
svg .baseline { stroke: var(--baseline); stroke-width: 1; }
svg .hitcol { fill: transparent; cursor: default; outline: none; }
svg g.day.lift rect.segment { filter: var(--lift); }
svg .crosshair { stroke: var(--baseline); stroke-width: 1; }
svg .direct-label { fill: var(--ink-2); font-weight: 600; }

/* ---- data table ---- */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; color: var(--muted); font-weight: 500; font-size: 12px;
  padding: 6px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap;
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink); }
table.data th .arrow { font-size: 9px; margin-left: 3px; }
table.data td { padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr.sess { cursor: pointer; }
table.data tbody tr.sess:hover td { background: var(--page); }
table.data tbody tr.sess:focus-visible td { background: var(--page); outline: none; }
.sess .title { font-weight: 550; color: var(--ink); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess .meta { color: var(--muted); font-size: 11.5px; margin-top: 1px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minibar { display: flex; height: 10px; width: 140px; border-radius: 3px; overflow: hidden; background: transparent; }
.minibar span { height: 100%; }
.minibar span + span { margin-left: 2px; }
.detailrow > td { background: var(--page); padding: 14px 16px; }
.detailrow h3 { font-size: 13px; font-weight: 650; margin: 0 0 6px; }
.detailrow .dmeta { color: var(--ink-2); font-size: 12px; margin-bottom: 10px; }

/* ---- tooltip ---- */
#tooltip {
  position: fixed; z-index: 10; pointer-events: none; display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  padding: 8px 11px; font-size: 12.5px; max-width: 280px;
}
#tooltip .tt-head { color: var(--muted); font-size: 11.5px; margin-bottom: 5px; }
#tooltip .tt-row { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
#tooltip .tt-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#tooltip .tt-key.line { height: 2.5px; width: 12px; border-radius: 1px; }
#tooltip .tt-val { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
#tooltip .tt-label { color: var(--ink-2); }
#tooltip .tt-row.total { border-top: 1px solid var(--grid); padding-top: 4px; margin-top: 5px; }

footer.foot { color: var(--muted); font-size: 12px; margin-top: 8px; }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* ---- invite modal ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20;
         display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
              padding: 22px 24px; width: min(460px, 92vw); }
.modal-card h2 { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
.modal-sub { color: var(--ink-2); font-size: 12.5px; margin: 0 0 14px; }
.modal-row, .modal-result { display: flex; gap: 8px; margin-bottom: 10px; }
.modal-row input, .modal-result input { flex: 1; background: var(--page); color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; }
.modal-result input { font-variant-numeric: tabular-nums; }
.modal-err { background: rgba(227,73,72,.12); border: 1px solid rgba(227,73,72,.4);
             border-radius: 8px; padding: 7px 10px; font-size: 12.5px; margin-bottom: 10px; }
.modal-close { background: transparent; border: 0; color: var(--muted); font: inherit;
               font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.modal-close:hover { color: var(--ink); }
.modal-or { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
#teamMaxUses { max-width: 110px; }

/* ---- shared header nav ---- */
.brand { text-decoration: none; color: inherit; margin-right: 4px; }
.navlinks { display: flex; gap: 2px; }
.navlink { color: var(--ink-2); text-decoration: none; font-size: 13px;
           padding: 5px 10px; border-radius: 7px; }
.navlink:hover { color: var(--ink); background: var(--surface); }
.navlink.current { color: var(--ink); background: var(--surface);
                   border: 1px solid var(--border); padding: 4px 9px; }
.accountwrap { position: relative; }
.account { display: flex; align-items: center; gap: 6px; background: var(--surface);
           color: var(--ink); border: 1px solid var(--border); border-radius: 8px;
           padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.account .caret { color: var(--muted); font-size: 11px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
        min-width: 200px; background: var(--surface); border: 1px solid var(--border);
        border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.menu[hidden] { display: none; }
.menu-email { color: var(--muted); font-size: 12px; padding: 6px 8px 8px; }
.menu-sep { height: 1px; background: var(--border); margin: 0 4px 6px; }
.menu-item { display: block; color: var(--ink); text-decoration: none; font-size: 13px;
             padding: 7px 8px; border-radius: 7px; }
.menu-item:hover { background: var(--page); }

/* ---- first-paint skeleton ----
   The shell (header, filters, cards) is static HTML, but tiles, the chart and
   the session list are built from data. Without placeholders the page paints
   as an empty dark rectangle and then jumps once the fetch resolves, so each
   region reserves its real size up front. .skel-chart matches the daily
   chart's rendered height (plotH 230 + margins 38). */
.skel { background: linear-gradient(90deg, var(--page) 25%, var(--border) 37%, var(--page) 63%);
        background-size: 400% 100%; border-radius: 6px;
        animation: skelshift 1.4s ease-in-out infinite; }
@keyframes skelshift { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: var(--page); }
}
.skel-label { height: 18px; width: 58%; margin-bottom: 10px; }
.skel-value { height: 38px; width: 42%; }
.skel-chart { height: 268px; }
.skel-row { height: 38px; margin: 6px 0; }