.connected-shell .usage-workspace { display: grid; gap: 24px; min-width: 0; color: var(--connected-ink); }
.usage-workspace *, .usage-workspace *::before, .usage-workspace *::after { box-sizing: border-box; }
.usage-workspace h2, .usage-workspace h3, .usage-workspace p { margin: 0; }
.usage-workspace h2 { font-size: 1.25rem; line-height: 1.3; }
.usage-workspace h3 { font-size: 1rem; line-height: 1.4; }
.usage-workspace p { overflow-wrap: anywhere; }
.usage-workspace ::selection { color: var(--connected-ink); background: var(--connected-teal-pale); }
.usage-workspace :is(button, select, summary):focus-visible { outline: 2px solid var(--connected-teal-deep); outline-offset: 4px; }
.usage-heading, .usage-toolbar, .usage-history__heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.usage-heading > div, .usage-history__heading > div { min-width: 0; }
.usage-heading .usage-note, .usage-history__heading .usage-note { margin-top: 4px; }
.usage-heading .button { flex-shrink: 0; }
.usage-heading .button[aria-busy="true"] { cursor: progress; }
.usage-toolbar { padding-bottom: 20px; border-bottom: 1px solid var(--connected-hairline); }
.usage-workspace .usage-filter { display: grid; gap: 8px; min-width: 200px; font-size: .875rem; font-weight: 600; }
.usage-workspace .usage-filter select { width: 100%; min-height: 44px; padding: 8px 36px 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background-color: var(--connected-paper); color: var(--connected-ink); font: inherit; font-size: 1rem; font-weight: 400; cursor: pointer; }
.usage-workspace select:hover { border-color: var(--connected-teal-action); }
.usage-workspace select:disabled { opacity: .6; cursor: not-allowed; }
.usage-freshness { display: grid; gap: 4px; text-align: right; color: var(--connected-muted); font-size: .875rem; }
.usage-note { color: var(--connected-muted); font-size: .9375rem; line-height: 1.5; }
.usage-state { padding: 32px; border: 1px solid var(--connected-hairline); border-radius: 16px; background: var(--connected-paper); }
.usage-state h3 { font-size: 1.25rem; }
.usage-state p { margin-top: 12px; }
.usage-state--empty { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.usage-state__intro > p { max-width: 52ch; }
.usage-state--error { background: var(--connected-coral-pale); color: var(--connected-coral-dark); border-color: currentColor; }
.usage-outlook { display: grid; gap: 20px; margin: 0; padding-left: 32px; border-left: 1px solid var(--connected-hairline); }
.usage-workspace .usage-outlook dt { font-weight: 600; font-size: .9375rem; }
.usage-outlook dd { margin: 4px 0 0; color: var(--connected-muted); font-size: .9375rem; line-height: 1.5; }
.usage-skeleton { display: grid; gap: 12px; margin-top: 24px; max-width: 520px; }
.usage-skeleton span { height: 12px; background: var(--connected-hairline-soft); border-radius: 4px; }
.usage-skeleton span:last-child { width: 60%; }
.usage-overview, .usage-history { background: var(--connected-paper); border: 1px solid var(--connected-hairline); border-radius: 16px; min-width: 0; }
.usage-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 24px 0; }
.usage-metric { min-width: 0; padding: 0 24px; }
.usage-metric + .usage-metric { border-left: 1px solid var(--connected-hairline); }
.usage-metric h3 { color: var(--connected-muted); font-weight: 500; }
.usage-metric__reading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 12px !important; }
.usage-metric__value { font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.usage-metric__unit { color: var(--connected-muted); font-size: .875rem; }
.usage-metric[data-usage-metric="online"] .usage-metric__value { color: var(--connected-teal-deep); }
.usage-metric__note { color: var(--connected-muted); font-size: .8125rem; line-height: 1.5; margin-top: 12px !important; }
.usage-overview__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 12px 24px; border-top: 1px solid var(--connected-hairline); color: var(--connected-muted); font-size: .875rem; }
.usage-breakdown { padding: 0 24px 8px; }
.usage-breakdown summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.usage-breakdown summary:hover { color: var(--connected-teal-deep); }
.usage-breakdown dl { display: grid; gap: 12px; margin: 8px 0 16px; }
.usage-breakdown dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; }
.usage-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.usage-breakdown > p { padding-bottom: 12px; }
.usage-history { padding: 24px; }
.usage-chart { margin: 24px 0; }
.usage-chart figcaption { color: var(--connected-muted); font-size: .875rem; margin-bottom: 16px; }
.usage-bars { display: block; width: 100%; height: 160px; border-bottom: 1px solid var(--line-strong); }
.usage-bar:not([fill]), .usage-pattern-stripe { fill: var(--connected-teal-action); }
.usage-pattern-base { fill: var(--connected-teal-pale); }
.usage-bar--missing { stroke: var(--connected-muted); stroke-width: 2; stroke-dasharray: 2 2; }
.usage-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: .8125rem; color: var(--connected-muted); }
.usage-axis span { text-align: center; min-width: 0; }
.usage-axis small { display: block; margin-top: 4px; font-size: inherit; font-variant-numeric: tabular-nums; }
.usage-history__empty { padding: 32px 0; color: var(--connected-muted); }
.usage-table-details summary, .usage-explanation summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-weight: 600; }
.usage-table-details summary:hover, .usage-explanation summary:hover { color: var(--connected-teal-deep); }
.usage-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.usage-table caption { text-align: left; font-weight: 600; padding: 12px 0; }
.usage-table th, .usage-table td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--connected-hairline); vertical-align: top; overflow-wrap: anywhere; }
.usage-table th:first-child { padding-left: 0; }
.usage-table thead th { color: var(--connected-muted); font-size: .875rem; }
.usage-table tbody th { font-weight: 500; }
.usage-table .usage-number { font-variant-numeric: tabular-nums; font-weight: 600; }
.usage-range-end { display: block; }
.usage-comparison { display: grid; gap: 4px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--connected-hairline); }
.usage-comparison p { color: var(--connected-muted); font-size: .9375rem; }
.usage-explanation { border-top: 1px solid var(--connected-hairline); border-bottom: 1px solid var(--connected-hairline); padding: 4px 0; }
.usage-explanation__body { padding: 8px 0 20px; }
.usage-explanation__body h3:not(:first-child) { margin-top: 24px; }
.usage-explanation__body p { margin-top: 8px; font-size: .9375rem; color: var(--connected-muted); }
@media (max-width: 1200px) {
  .usage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .usage-metric:nth-child(3) { border-left: 0; }
  .usage-state--empty { grid-template-columns: 1fr; gap: 24px; }
  .usage-outlook { grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--connected-hairline); padding: 24px 0 0; }
}
@media (max-width: 600px) {
  .connected-shell .usage-workspace { gap: 20px; }
  .usage-heading, .usage-toolbar, .usage-history__heading { align-items: stretch; flex-direction: column; gap: 16px; }
  .usage-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
  .usage-heading h2 { font-size: 1.125rem; }
  .usage-heading .button { padding: 12px; }
  .usage-heading .button { align-self: flex-start; }
  .usage-workspace .usage-filter { min-width: 0; width: 100%; }
  .usage-freshness { text-align: left; }
  .usage-state, .usage-history { padding: 20px; }
  .usage-outlook { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .usage-metrics { grid-template-columns: 1fr; padding: 0 20px; gap: 0; }
  .usage-metric { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 16px 0; }
  .usage-metric + .usage-metric { border-left: 0; border-top: 1px solid var(--connected-hairline); }
  .usage-metric__reading { justify-content: flex-end; margin-top: 0 !important; }
  .usage-metric__value { font-size: 1.75rem; }
  .usage-metric__note { grid-column: 1 / -1; margin-top: 4px !important; }
  .usage-overview__foot { padding: 12px 20px; }
  .usage-breakdown { padding: 0 20px 8px; }
  .usage-table { font-size: .8125rem; }
  .usage-table th, .usage-table td { padding: 12px 4px; }
  .usage-bars { height: 120px; }
}