/* ============================================================================
   GSB Usage — admin tab: who spends how long on which part of the app.
   #usage-screen only; .usg-* classes. Token-based (gsb-tokens.css). Class
   names avoid the -card / -panel suffixes that gsb-clean.css force-flattens,
   and never set `display` on the screen id itself.
   One data hue (shoot green) everywhere: every chart here is magnitude, not
   identity, so bars read light→dark / short→long, never a rainbow.
   ========================================================================= */

#usage-screen { font-family: var(--font-body); color: var(--color-text); }

/* GSB.<Page> title wordmark — same four selector groups as gsb-sales-flash.css */
#usage-screen .nav-bar h2 {
  font-family: 'Inter', var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
}
#usage-screen .nav-bar h2 .gsb-title-mark { flex: 0 0 auto; color: var(--gsb-soil-ink); }
#usage-screen .nav-bar h2 .gsb-title-dot { color: var(--gsb-leaf); }
#usage-screen .nav-bar h2 .gsb-kw {
  color: var(--gsb-soil-ink) !important;
  background: linear-gradient(transparent 58%, rgba(130, 187, 144, 0.50) 58%) !important;
  padding: 0 2px;
  border-radius: 1px;
}
#usage-screen .usg-sub { font-size: 11px; color: var(--gsb-stone); }

#usage-screen #usage-root {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 72px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
#usage-screen .usg-loading,
#usage-screen .usg-empty {
  color: var(--gsb-stone);
  padding: 22px 4px;
  text-align: center;
  font-size: 13.5px;
}
#usage-screen .usg-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gsb-stone);
  margin: 0 0 6px;
}

/* ── Controls row ─────────────────────────────────────────────────────────── */
#usage-screen .usg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  margin: 4px 0 14px;
}
#usage-screen .usg-ctl { display: flex; flex-direction: column; gap: 4px; }
#usage-screen .usg-ctl-right { margin-left: auto; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
#usage-screen .usg-range { font: 400 11px/1.4 var(--font-mono); color: var(--gsb-stone); letter-spacing: 0.02em; }
#usage-screen .usg-segs {
  display: inline-flex;
  gap: 2px;
  background: var(--gsb-oat);
  border-radius: 6px;
  padding: 3px;
}
#usage-screen .usg-seg {
  appearance: none;
  border: 0;
  border-radius: 4px;
  background: transparent;
  min-height: 30px;
  padding: 0 12px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gsb-stone);
  cursor: pointer;
  white-space: nowrap;
}
#usage-screen .usg-seg[aria-pressed="true"] { background: var(--gsb-soil-ink); color: var(--gsb-paper); }
#usage-screen .usg-btn {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--gsb-soil-ink);
  border-radius: 4px;
  min-height: 30px;
  padding: 0 12px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
#usage-screen .usg-btn:hover { border-color: var(--gsb-stone); }
#usage-screen .usg-btn[disabled] { opacity: 0.55; cursor: default; }

/* ── Banners ──────────────────────────────────────────────────────────────── */
#usage-screen .usg-banner {
  border-left: 3px solid var(--gsb-stone);
  background: rgba(111, 105, 91, 0.07);
  border-radius: 0 4px 4px 0;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gsb-soil-ink);
  margin: 0 0 12px;
}
#usage-screen .usg-banner-clay { border-left-color: var(--gsb-clay); background: rgba(181, 83, 46, 0.08); }
#usage-screen .usg-banner-ochre { border-left-color: var(--gsb-ochre); background: rgba(185, 139, 50, 0.10); }

/* ── KPI strip ────────────────────────────────────────────────────────────── */
#usage-screen .usg-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
#usage-screen .usg-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 12px 14px 10px;
  min-width: 0;
}
#usage-screen .usg-tile-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gsb-stone);
}
#usage-screen .usg-tile-value {
  font-family: 'Inter', var(--font-body);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--gsb-soil-ink);
  margin: 6px 0 2px;
  font-variant-numeric: proportional-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#usage-screen .usg-tile-value.usg-tile-text { font-size: 19px; line-height: 1.3; }
#usage-screen .usg-tile-sub { font-size: 11.5px; color: var(--gsb-stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#usage-screen .usg-delta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(111, 105, 91, 0.12);
  color: var(--gsb-stone);
  vertical-align: 1px;
}
#usage-screen .usg-delta-up { background: rgba(47, 107, 69, 0.12); color: var(--gsb-shoot-green); }
#usage-screen .usg-delta-down { background: rgba(181, 83, 46, 0.12); color: var(--gsb-clay); }
#usage-screen .usg-delta-new { background: rgba(185, 139, 50, 0.16); color: #8A6420; }

/* ── Section blocks ───────────────────────────────────────────────────────── */
#usage-screen .usg-sec {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
#usage-screen .usg-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
#usage-screen .usg-sec-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--gsb-soil-ink);
}
#usage-screen .usg-sec-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gsb-stone);
}
#usage-screen .usg-search {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--gsb-paper);
  padding: 5px 10px;
  font: 400 12.5px/1.4 var(--font-body);
  color: var(--gsb-soil-ink);
  min-width: 180px;
}
#usage-screen .usg-search:focus { outline: 2px solid rgba(47, 107, 69, 0.35); outline-offset: 1px; }

/* ── Charts ───────────────────────────────────────────────────────────────── */
#usage-screen .usg-charts {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 18px;
}
#usage-screen .usg-chart { min-width: 0; }
#usage-screen .usg-canvas { position: relative; height: 200px; }
#usage-screen .usg-canvas canvas { max-width: 100%; }

/* ── Tables — style.css has a bare `table {}` leak; carry !important on cells. */
#usage-screen .usg-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#usage-screen table.usg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
#usage-screen table.usg-table th,
#usage-screen table.usg-table td {
  padding: 7px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent !important;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  font-family: var(--font-mono) !important;
  font-size: 12px;
  color: var(--gsb-soil-ink);
}
#usage-screen table.usg-table th {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gsb-stone) !important;
  border-bottom: 1.5px solid var(--gsb-soil-ink) !important;
}
#usage-screen table.usg-table th.usg-th-num,
#usage-screen table.usg-table td.usg-td-num { text-align: right; }
#usage-screen table.usg-table th.usg-th-sort { cursor: pointer; user-select: none; }
#usage-screen table.usg-table th.usg-th-sort:hover { color: var(--gsb-soil-ink) !important; }
#usage-screen table.usg-table th.usg-th-on { color: var(--gsb-soil-ink) !important; }
#usage-screen table.usg-table td.usg-td-name { font-family: var(--font-body) !important; font-weight: 600; color: var(--gsb-soil-ink); }
#usage-screen table.usg-table td.usg-td-name small { display: block; font: 400 10.5px/1.3 var(--font-mono); color: var(--gsb-stone); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#usage-screen table.usg-table td.usg-td-rung { color: var(--gsb-stone); }
#usage-screen table.usg-table td.usg-td-last { color: var(--gsb-stone); font-size: 11px; }
#usage-screen table.usg-table td.usg-td-tops { font-family: var(--font-body) !important; font-size: 12px; min-width: 190px; line-height: 1.45; }
#usage-screen .usg-top { display: block; white-space: nowrap; color: var(--gsb-stone); }
#usage-screen .usg-top b { font-weight: 500; color: var(--gsb-soil-ink); }
#usage-screen .usg-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(47, 107, 69, 0.12);
  color: var(--gsb-shoot-green);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
#usage-screen tr.usg-tr-screen,
#usage-screen tr.usg-tr-person { cursor: pointer; }
#usage-screen tr.usg-tr-screen:hover td,
#usage-screen tr.usg-tr-person:hover td { background: rgba(47, 107, 69, 0.04) !important; }
#usage-screen tr.usg-open td { background: rgba(47, 107, 69, 0.06) !important; border-bottom-color: transparent !important; }
#usage-screen tr.usg-tr-bucket td { color: var(--gsb-stone); }
#usage-screen tr.usg-tr-bucket td.usg-td-name { color: var(--gsb-stone); font-weight: 500; font-style: italic; }
#usage-screen tr.usg-tr-detail td { background: var(--gsb-paper) !important; padding: 12px 14px 14px !important; white-space: normal; }

/* In-table magnitude bars: value at the tip, text in ink not the data color. */
#usage-screen td.usg-td-bar { min-width: 200px; }
#usage-screen .usg-bar {
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  height: 8px;
  background: rgba(34, 30, 24, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-right: 8px;
}
#usage-screen .usg-bar-fill { height: 100%; background: var(--gsb-shoot-green); border-radius: 4px; min-width: 2px; }
#usage-screen .usg-bar-val { display: inline-block; vertical-align: middle; min-width: 44px; }

/* Expanded detail: two columns of mini-rows + a sparkline */
#usage-screen .usg-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
#usage-screen .usg-detail-col { min-width: 0; }
#usage-screen .usg-mini-row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr 84px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 12px;
}
#usage-screen .usg-mini-name { font-family: var(--font-body); color: var(--gsb-soil-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usage-screen .usg-mini-bar { display: block; height: 8px; background: rgba(34, 30, 24, 0.06); border-radius: 4px; overflow: hidden; }
#usage-screen .usg-mini-bar span { display: block; height: 100%; background: var(--gsb-shoot-green); border-radius: 4px; min-width: 2px; }
#usage-screen .usg-mini-val { font-family: var(--font-mono); text-align: right; color: var(--gsb-soil-ink); }
#usage-screen .usg-mini-val small { display: inline-block; margin-left: 6px; color: var(--gsb-stone); font-size: 10.5px; min-width: 32px; text-align: right; }
#usage-screen .usg-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 11.5px/1.5 var(--font-mono); color: var(--gsb-stone); }
#usage-screen .usg-clay { color: var(--gsb-clay); }

#usage-screen .usg-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 56px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}
#usage-screen .usg-spark-bar {
  flex: 1 1 0;
  min-width: 2px;
  height: var(--h, 0%);
  min-height: 1px;
  background: var(--gsb-shoot-green);
  border-radius: 2px 2px 0 0;
}
#usage-screen .usg-spark-bar.usg-spark-wknd { background: rgba(47, 107, 69, 0.55); }

/* ── Heatmap (weekday × hour) — one sequential hue, alpha carries magnitude */
#usage-screen .usg-heat { display: grid; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
#usage-screen .usg-heat-row { display: grid; grid-template-columns: 34px repeat(20, minmax(18px, 1fr)); gap: 3px; align-items: center; }
#usage-screen .usg-heat-wd { font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gsb-stone); }
#usage-screen .usg-heat-cell {
  height: 22px;
  border-radius: 3px;
  background: rgba(47, 107, 69, calc(0.06 + var(--a, 0) * 0.86));
}
#usage-screen .usg-heat-cell[style*="--a:0.000"] { background: rgba(34, 30, 24, 0.04); }
#usage-screen .usg-heat-head .usg-heat-cell { height: auto; background: transparent; }
#usage-screen .usg-heat-hl { font: 400 9.5px/1 var(--font-mono); color: var(--gsb-stone); text-align: center; }

/* ── Method note ──────────────────────────────────────────────────────────── */
#usage-screen .usg-sec-method p { font-size: 12.5px; line-height: 1.6; color: var(--gsb-stone); margin: 0 0 8px; max-width: 900px; }
#usage-screen .usg-sec-method p b { color: var(--gsb-soil-ink); font-weight: 600; }
#usage-screen .usg-sec-method code { font: 400 11.5px/1 var(--font-mono); background: var(--gsb-paper); padding: 2px 5px; border-radius: 3px; }

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #usage-screen .usg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #usage-screen .usg-tile-value { font-size: 24px; }
  #usage-screen .usg-charts { grid-template-columns: 1fr; }
  #usage-screen .usg-canvas { height: 170px; }
  #usage-screen .usg-detail { grid-template-columns: 1fr; }
  #usage-screen .usg-ctl-right { margin-left: 0; width: 100%; }
  #usage-screen .usg-sec { padding: 12px 12px; }
  #usage-screen .usg-sec-meta { margin-left: 0; width: 100%; }
  #usage-screen .usg-search { width: 100%; }
  #usage-screen td.usg-td-bar { min-width: 150px; }
  #usage-screen .usg-bar { width: 70px; }
  #usage-screen .usg-heat-row { grid-template-columns: 30px repeat(20, minmax(14px, 1fr)); }
  #usage-screen .usg-heat-cell { height: 18px; }
  /* Phone: keep Person · Days · Time · Top screens · Last; the rest is a tap away on desktop. */
  #usage-screen table.usg-table-people th:nth-child(2), #usage-screen table.usg-table-people td:nth-child(2),
  #usage-screen table.usg-table-people th:nth-child(5), #usage-screen table.usg-table-people td:nth-child(5),
  #usage-screen table.usg-table-people th:nth-child(6), #usage-screen table.usg-table-people td:nth-child(6),
  #usage-screen table.usg-table-people th:nth-child(8), #usage-screen table.usg-table-people td:nth-child(8) { display: none; }
  #usage-screen table.usg-table:not(.usg-table-people) th:nth-child(5), #usage-screen table.usg-table:not(.usg-table-people) td:nth-child(5),
  #usage-screen table.usg-table:not(.usg-table-people) th:nth-child(6), #usage-screen table.usg-table:not(.usg-table-people) td:nth-child(6) { display: none; }
  #usage-screen tr.usg-tr-detail td { display: table-cell; }
}