/* Usage analytics: calendar, multi-series curves and token composition. */
.usage-workspace { --heat-0: var(--surface-alt); --heat-1: color-mix(in srgb, #438ff4 22%, var(--surface)); --heat-2: color-mix(in srgb, #438ff4 44%, var(--surface)); --heat-3: color-mix(in srgb, #438ff4 68%, var(--surface)); --heat-4: #438ff4; }
.usage-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.usage-section-eyebrow { color:var(--faint); font-size:var(--font-small); letter-spacing:1.8px; font-weight:600; }
.usage-controls h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.usage-controls p { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted); margin:0; font-variant-numeric:tabular-nums; }
.usage-filter-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.usage-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px 0; margin-bottom: 16px; }
.usage-kpi { padding: 0 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.usage-kpi:last-child { border:0; }
.usage-kpi > span { font-size:12px; color:var(--muted); }

.usage-kpi strong { font-size: 28px; letter-spacing: -.7px; font-weight: 550; font-variant-numeric: tabular-nums; margin: 6px 0 4px; line-height: 1.3; }
.usage-kpi small { font-size:var(--font-small); color:var(--muted); font-variant-numeric:tabular-nums; }
.usage-kpi small span { margin:0 5px; color:var(--border-strong); }
.usage-workspace > .card { margin-bottom: 16px; overflow: hidden; }
.usage-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.usage-card-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.usage-card-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--font-small); }
.usage-calendar-scroll { overflow-x: auto; padding: 0 20px 8px; scrollbar-width: thin; }
.usage-calendar-content { min-width:680px; }
.usage-heat-months { margin-left:23px; display:grid; grid-template-columns:repeat(var(--heat-weeks),minmax(0,1fr)); height:24px; font-size:var(--font-small); color:var(--faint); }
.usage-heat-months > span { white-space:nowrap; }
.usage-heat-body { display:flex; gap:8px; }
.usage-weekdays { display:grid; grid-template-rows:repeat(7,1fr); width:15px; gap:3px; color:var(--faint); font-size:var(--font-small); line-height:1; }
.usage-weekdays span { display:flex; align-items:center; }
.usage-heat-weeks { display:grid; grid-template-columns:repeat(var(--heat-weeks),minmax(0,1fr)); gap:3px; flex:1; }
.usage-heat-week { display:grid; grid-template-rows:repeat(7,1fr); gap:3px; }
.usage-heat-cell, .usage-heat-blank { width:100%; aspect-ratio:1; border-radius:3px; border:1px solid transparent; padding:0; display:block; min-width:0; background:var(--heat-0); }
button.usage-heat-cell { cursor:pointer; }
button.usage-heat-cell:hover { outline:1px solid var(--text); outline-offset:1px; }
.usage-heat-cell.level-1 { background:var(--heat-1); }
.usage-heat-cell.level-2 { background:var(--heat-2); }
.usage-heat-cell.level-3 { background:var(--heat-3); }
.usage-heat-cell.level-4 { background:var(--heat-4); }
.usage-heat-blank { visibility:hidden; }
.usage-heat-cell.unknown { background: transparent; border-color: var(--border); border-style: solid; opacity: .6; }
.usage-calendar-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px 16px; font-size: var(--font-small); color: var(--muted); }
.usage-heat-key { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.usage-heat-key .usage-heat-cell { width:10px; height:10px; }
.usage-heat-key > span { margin:0 3px; }
.usage-curve-legend { display: flex; gap: 4px 16px; flex-wrap: wrap; padding: 0 20px 8px; max-height: 96px; overflow: auto; scrollbar-width: thin; }
.usage-curve-legend button { display: flex; gap: 6px; align-items: center; background: none; border: 0; color: var(--muted); padding: 4px 0; font-size: var(--font-small); min-width: 0; cursor: pointer; }
.usage-curve-legend button span { max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.usage-curve-legend i, .usage-token-row > i, .usage-model-name i, .usage-chart-tooltip i { width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
.usage-curve-legend button.is-hidden { opacity:.35; text-decoration:line-through; }
.usage-chart-shell { padding:0 20px 0 14px; margin:0; }
.usage-mobile-chart { display:none; }
.usage-chart { display:block; width:100%; min-height:240px; max-height:350px; overflow:visible; }
.usage-chart text { fill:var(--faint); font-size:var(--font-small); font-family:inherit; font-variant-numeric:tabular-nums; }
.usage-grid { stroke:var(--border); stroke-width:1; stroke-dasharray:3 4; }
.usage-curve { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.usage-chart-tooltip { width:min(365px,calc(100% - 20px)); max-width:365px; top:8px; font-size:var(--font-small); }
.usage-chart-tooltip div { gap:8px; }
.usage-chart-tooltip div > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usage-chart-tooltip .usage-tooltip-total { padding-top:8px; margin-top:9px; border-top:1px solid var(--border); }
.usage-chart-tooltip p { font-size:var(--font-small); margin:6px 0 0; color:var(--muted); }
.usage-trend-foot { padding: 12px 20px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--font-small); }
.usage-empty-note { margin:0; padding:0 26px 14px; font-size:var(--font-small); color:var(--muted); }
.usage-token-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; gap: 32px; padding: 8px 24px 24px; }
.usage-token-donut { background: var(--distribution); width: 168px; height: 168px; display: grid; place-items: center; border-radius: 50%; justify-self: center; position: relative; }
.usage-token-donut > div { width: 130px; height: 130px; background: var(--surface); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.usage-token-donut strong { font-size: 24px; letter-spacing: -.5px; font-weight: 550; }
.usage-token-donut span { color:var(--muted); font-size:var(--font-small); }
.usage-token-donut small { color:var(--faint); font-size:var(--font-small); margin-top:7px; }
.usage-token-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.usage-token-row:last-child { border:0; }
.usage-token-row > div { min-width:0; flex:1; }
.usage-token-row strong { display:block; font-size:var(--font-small); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usage-token-row small { display:block; font-size:var(--font-small); color:var(--faint); margin-top:3px; font-variant-numeric:tabular-nums; }
.usage-token-row b { font-size:12px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }
.usage-model-details { border-top:1px solid var(--border); }
.usage-model-details > summary { padding:13px 26px; display:flex; justify-content:space-between; font-size:var(--font-small); color:var(--muted); cursor:pointer; }
.usage-model-details > summary > span { display:flex; align-items:center; gap:12px; color:var(--faint); }
.usage-model-details[open] > summary .icon { transform:rotate(90deg); }
.usage-model-name { display:flex; align-items:center; gap:8px; font-size:var(--font-small); }
.usage-model-name span { max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usage-lifetime { border-top:1px solid var(--border); padding-top:20px; }
.usage-lifetime > summary { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:12px; cursor:pointer; color:var(--muted); margin-bottom:18px; }
.usage-lifetime > summary span { color:var(--faint); font-size:var(--font-small); }
.usage-day-rows { margin-top:18px; }
/* Trend and composition share one analysis row on wide workspaces. */
.usage-analysis-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.usage-analysis-grid > .card { min-width: 0; overflow: hidden; }
.live-request-details { border-top: 1px solid var(--border); margin-bottom: 12px; }
.live-request-details summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 10px 20px; font-size: var(--font-small); color: var(--muted); list-style: none; }
.live-request-details summary::-webkit-details-marker { display: none; }
.live-request-details summary > span { font-size: var(--font-small); }
.live-request-details summary > span::after { content: "⌄"; margin-left: 8px; }
.live-request-details[open] summary > span::after { content: "⌃"; }
.live-request-details summary:hover { color: var(--text); background: var(--surface-alt); }
.usage-live-card .card-head { padding-bottom: 12px; }
@media(min-width:1450px) {
  .usage-analysis-grid { grid-template-columns: minmax(0,1.65fr) minmax(330px,1fr); }
  .usage-analysis-grid { align-items: stretch; }
  .usage-analysis-grid > .card { display: flex; flex-direction: column; }
  .usage-chart text { font-size: 18px; }
  .usage-trend .usage-chart-shell { margin-top: auto; margin-bottom: auto; }
  .usage-model-details { margin-top: auto; }
  .usage-token-layout { grid-template-columns: 1fr; gap: 12px; padding: 4px 20px 16px; }
  .usage-token-donut { width: 140px; height: 140px; }
  .usage-token-donut > div { width: 108px; height: 108px; }
  .usage-token-donut strong { font-size: 21px; }
  .usage-token-row { padding: 8px 0; }
  .usage-token-row strong { max-width: 270px; }
}
@media (max-width:1000px) {
  .usage-controls { align-items:flex-start; flex-direction:column; gap:15px; }
  .usage-kpi { padding:0 18px; }
  .usage-token-layout { gap:24px; padding:12px 27px 26px; }
}
@media (max-width:640px) {
  .usage-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; }
  .usage-kpi { padding:19px; border-bottom:1px solid var(--border); }
  .usage-kpi:nth-child(2) { border-right:0; }
  .usage-kpi:nth-child(3), .usage-kpi:nth-child(4) { border-bottom:0; }
  .usage-kpi strong { font-size:25px; }
  .usage-card-head { padding:18px; gap:12px; }
  .usage-card-head p { max-width:195px; }
  .usage-curve-legend { padding:0 18px 8px; gap:4px 12px; }
  .usage-curve-legend button span { max-width:200px; }
  .usage-calendar-scroll { padding:2px 18px 5px; }
  .usage-calendar-foot, .usage-trend-foot { padding:12px 18px 18px; }
  .usage-token-layout { grid-template-columns:1fr; padding:10px 24px 24px; gap:15px; }
  .usage-token-donut { width:180px; height:180px; }
  .usage-token-donut > div { width:138px; height:138px; }
  .usage-desktop-chart { display:none; }
  .usage-mobile-chart { display:block; }
  .usage-chart text { font-size:13px; }
  .usage-chart { min-height:200px; }
  .usage-chart-shell { padding:0 10px 0 0; }
  .usage-lifetime > summary { flex-direction:column; align-items:flex-start; gap:4px; }
}

/* Lifetime counters remain visible regardless of daily-history availability. */
.analytics-chart-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.usage-lifetime-overview { margin-bottom:0; }
.usage-lifetime-overview .usage-kpi small { overflow-wrap:anywhere; }
.lifetime-distribution { margin-bottom:32px; }
.usage-workspace + .usage-lifetime-table { border-top:1px solid var(--border); padding-top:23px; }
@media (max-width:640px) { .lifetime-distribution .card-head { align-items:flex-start; flex-direction:column; } }

.usage-heat-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.usage-heat-week.column-hover:hover .usage-heat-cell { outline:1px solid var(--faint); outline-offset:1px; }
.usage-heat-cell.activity-only { background:radial-gradient(circle at center,var(--chart-color) 24%,transparent 29%),repeating-linear-gradient(135deg,transparent,transparent 3px,var(--border) 3px,var(--border) 4px); border-color:var(--chart-color); opacity:.8; }
@media (max-width:640px) { .usage-calendar .usage-card-head { align-items:flex-start; flex-direction:column; } .usage-heat-controls { justify-content:flex-start; gap:8px; } }

.usage-live-card { margin-bottom: 16px; }
.usage-live-stats { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr 1fr; gap: 20px; padding: 0 20px 12px; align-items: center; }
.usage-live-stats>div { min-width:0; } .usage-live-stats span { display:block;font-size:var(--font-small);color:var(--muted); }
.usage-live-stats strong { font-size: 22px; font-weight: 550; font-variant-numeric: tabular-nums; display: block; }
.usage-live-stats strong small { font-size:var(--font-small);font-weight:400;margin-left:7px; }
.usage-live-stats small { font-size:var(--font-small);color:var(--faint);display:inline-block; }
.live-sparkline { display:block;width:100%;max-height:70px; } .live-sparkline path { fill:none;stroke:var(--chart-color);stroke-width:2;stroke-linejoin:round; }
.usage-live-idle,.usage-live-note,.usage-live-placeholder { color:var(--muted);font-size:var(--font-small);margin:0;padding:0 26px 15px; }
.live-request-list { margin: 0 20px 16px; border-top: 1px solid var(--border); max-height: 220px; overflow: auto; }
.live-request-list>div { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:var(--font-small); }
.live-request-list .live-model { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.live-request-list strong { font-size:var(--font-small);font-weight:500;font-variant-numeric:tabular-nums; } .live-request-list small { color:var(--faint); }
@media(max-width:640px) { .usage-live-stats {grid-template-columns:1fr 1fr;padding:0 18px 18px;gap:18px;} .live-request-list {margin:0 18px 15px;} .live-request-list>div {flex-wrap:wrap;} .live-request-list .live-model {flex-basis:60%;} .usage-live-note,.usage-live-idle {padding:0 18px 15px;} }


/* Data first; methodology is available from the header and coverage badges. */
.analytics-workspace { max-width: 1360px; margin: 0 auto; }
.usage-title-row,.usage-header-actions { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.usage-title-row h2 { margin:0; }
.usage-help-button { border:0;background:none;color:var(--muted);padding:5px 3px;font-size:12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer; }
.usage-help-button:hover { color:var(--text); }
.usage-help-button .icon { width:15px;height:15px; }
.usage-period-controls { padding-top: 8px; margin-bottom: 20px; }
.usage-period-controls p { margin-top:5px; }
.analytics-workspace .segmented { border-radius: 6px; padding: 2px; box-shadow: none; }
.analytics-workspace .segmented button { border-radius: 4px; font-size: var(--font-small); }
.analytics-workspace .segmented button.active { box-shadow:none; }
.usage-period-kpis { background: transparent; border: 0; border-radius: 0; padding: 0 0 16px; margin-bottom: 0; }
.usage-period-kpis .usage-kpi strong { font-size:24px; }
.usage-period-kpis .usage-kpi { padding: 0 20px; }
.usage-live-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px 16px; font-size: var(--font-small); color: var(--muted); }
.usage-live-placeholder { display:flex;justify-content:space-between;align-items:center;gap:12px; }
.usage-lifetime-section { border-top:1px solid var(--border);margin-top:6px; }
.usage-lifetime-section>summary { display:flex;align-items:center;justify-content:space-between;gap:15px;cursor:pointer;list-style:none;padding:20px 0; }
.usage-lifetime-section>summary::-webkit-details-marker { display:none; }
.usage-lifetime-section>summary h2 { margin:0;font-size:15px;font-weight:600; }
.usage-lifetime-section>summary span { color:var(--muted);font-size:var(--font-small); }
.usage-lifetime-section>summary>.icon { color:var(--muted);width:16px;transition:transform .15s; }
.usage-lifetime-section[open]>summary>.icon { transform:rotate(90deg); }
.usage-lifetime-content { padding-bottom:20px; }
.usage-lifetime-content .lifetime-distribution { margin-bottom:20px; }
.usage-methodology { margin:0;display:grid;gap:18px; }
.usage-methodology dt,.usage-source-details h3 { font-size:13px;font-weight:600;margin:0 0 5px; }
.usage-methodology dd,.usage-source-details>p { margin:0;color:var(--muted);font-size:12px;line-height:1.85; }
.usage-source-details { margin-top:24px;padding-top:20px;border-top:1px solid var(--border); }
.usage-source-row { display:grid;grid-template-columns:1fr auto;gap:4px 15px;padding:12px 0;border-bottom:1px solid var(--border);font-size:var(--font-small); }
.usage-source-row strong { font-weight:500;overflow-wrap:anywhere; }
.usage-source-row span,.usage-source-row small { color:var(--muted); }
.usage-source-row small { grid-column:1/-1; }
.console-explanation { margin-top:16px;font-size:12px;color:var(--muted); }
.console-explanation>summary { cursor:pointer;width:fit-content; }
.console-explanation>p { max-width:850px;line-height:1.8;margin:10px 0; }
@media(max-width:640px) {
  .usage-lifetime-overview .usage-controls { flex-direction:column;align-items:stretch;gap:10px; }
  .usage-header-actions { gap:6px;justify-content:space-between; }
  .usage-header-actions .button { font-size:var(--font-small); }
  .usage-help-button { font-size:var(--font-small); }
  .usage-period-kpis { padding:0; }
  .usage-period-kpis .usage-kpi { padding:16px; }
  .usage-live-footer { padding:0 18px 15px; }
  .usage-source-row { grid-template-columns:1fr; }
}

@media (max-width:480px) { .usage-chart text { font-size:18px; } }