.included-usage { max-width: 36.25rem; padding: 1.5rem; border: 1px solid var(--stroke); border-radius: 0.875rem; background: var(--surface); color: var(--text); margin-bottom: 1.5rem; }
.included-usage-header, .included-usage footer, .usage-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.included-usage-header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.included-usage button, .included-usage a, .usage-dialog button { min-height: 2.75rem; min-width: 2.75rem; }
.included-usage-header .button { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0 0.5625rem; background: transparent; font-size: 0.8125rem; }
.usage-refresh-icon { width: 1.0625rem; height: 1.0625rem; }
.included-period { margin: 2px 0 1.375rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.6; }
.included-hero { display: flex; align-items: baseline; gap: 0.5625rem; margin: 0 0 1rem; }
.included-hero strong { font-size: 2rem; line-height: 1.2; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.included-hero span { font-size: 0.875rem; color: var(--muted); }
.included-meter { display: flex; position: relative; height: 0.5rem; overflow: hidden; border-radius: 0.25rem; background: #334155; }
.included-meter > span { height: 100%; flex-shrink: 1; }
.meter-used { background: #2563eb; }
.meter-reserved { background: #60a5fa; }
.included-meter .meter-tiny { position: absolute; right: 0; width: 1px; background: #e9b65a; }
.included-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.125rem 0 1.375rem; }
.included-legend dd { margin: 0 0 0.3125rem; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.included-legend dt { font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }
.included-status { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--text-soft); }
.included-updated { margin: 0.3125rem 0 0; color: var(--muted); font-size: 0.75rem; }
.included-usage footer { margin-top: 0.625rem; flex-wrap: wrap; }
.usage-details-link { padding: 0; font-size: 0.875rem; color: var(--blue-bright); }
.included-usage footer a { display: inline-flex; align-items: center; font-size: 0.8125rem; }
.usage-stale .included-hero, .usage-stale .included-meter { opacity: .65; }
.usage-processing { animation: usage-pulse 1.8s ease-in-out infinite; }
/* #309 7-day limit: a second block under the monthly figures */
.included-weekly { margin: 1.25rem 0 1.125rem; padding-top: 1.125rem; border-top: 1px solid var(--stroke); }
.included-window-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.included-window-head h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.usage-limiting { display: inline-block; margin-left: 0.625rem; padding: 0.0625rem 0.5rem; border: 1px solid var(--stroke-strong); border-radius: 0.75rem; font-size: 0.6875rem; line-height: 1.5; color: var(--text-soft); white-space: nowrap; }
.included-window-head .usage-limiting { margin-left: 0; }
.included-weekly-reset { margin: 0.125rem 0 0.75rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.6; }
.included-weekly-hero { display: flex; align-items: baseline; gap: 0.5625rem; margin: 0 0 0.625rem; }
.included-weekly-hero strong { font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.included-weekly-hero span { font-size: 0.875rem; color: var(--muted); }
.included-meter-weekly { height: 0.375rem; }
.included-weekly-legend, .included-weekly-note { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
[aria-busy="true"] .usage-refresh-icon { animation: usage-spin 1.2s linear infinite; }
@keyframes usage-pulse { 50% { opacity: .55; } }
@keyframes usage-spin { to { transform: rotate(360deg); } }
.usage-dialog { width: min(32.5rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem); padding: 1.5rem; border: 1px solid var(--stroke-strong); border-radius: 1rem; background: var(--surface); color: var(--text); box-shadow: 0 1.5rem 5rem #0005; }
.usage-dialog::backdrop { background: #02061799; }
.usage-dialog-header h2 { margin: 0; font-size: 1.25rem; }
.usage-dialog-header .icon-button { font-size: 1.5rem; }
#usage-details-subtitle { margin: 0.25rem 0 1.25rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.6; }
.usage-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--stroke); border-radius: 0.625rem; background: var(--canvas-soft); }
.usage-tabs button { border: 0; border-radius: 0.4375rem; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.8125rem; }
.usage-tabs button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 0.25rem #0002; }
.usage-tabpanel { margin-top: 1.375rem; min-height: 10.625rem; font-size: 0.8125rem; line-height: 1.6; }
.usage-tabpanel h3 { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.usage-facts { margin: 0; }
.usage-facts > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.25rem; padding: 0.6875rem 0; border-bottom: 1px solid var(--stroke); }
.usage-facts dt { color: var(--muted); }
.usage-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.usage-history-row { padding: 0.75rem 0; border-bottom: 1px solid var(--stroke); }
.usage-history-row p { margin: 0.25rem 0 0; color: var(--text-soft); }
.usage-disclosure { color: var(--muted); }
@media (max-width: 639px) {
  body:has(.included-usage) .app-shell:not(.menu-open) .sidebar { box-shadow: none; }
  body:has(.included-usage) .content { padding-left: 1rem; padding-right: 1rem; }
  .included-usage { padding: 1rem; width: 100%; }
  .included-legend { gap: 0.5rem; }
  .included-legend dd { font-size: 0.875rem; }
  .usage-dialog { margin: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 1rem); border-radius: 1.125rem 1.125rem 0 0; padding: 1.25rem 1rem max(1.25rem, env(safe-area-inset-bottom)); }
  .usage-facts > div { gap: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .usage-processing, [aria-busy="true"] .usage-refresh-icon { animation: none; }
}

/* #248: on narrow screens the customer tables (Activity, API keys, Payments, Alerts) show one labelled block per row, so no action or result is cut off. */
@media (max-width: 640px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 0.625rem 0; border-bottom: 1px solid var(--stroke); }
  .table-stack td { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.875rem; padding: 0.3125rem 1rem; border: 0; text-align: right; overflow-wrap: anywhere; }
  .table-stack td::before { content: attr(data-label); flex: 0 0 38%; color: var(--muted); font-size: 0.6875rem; text-align: left; }
  .table-stack td button, .table-stack td summary { min-height: 2.75rem; }
  .table-stack td[colspan]::before { content: none; }
  /* An opened Diagnostics block stays inside the row: it wraps, and its Show/Hide control stays visible. */
  .table-stack td details { flex: 1 1 0; min-width: 0; text-align: right; }
  .table-stack td details summary { display: list-item; list-style-position: inside; }
  .table-stack td details code { display: inline; white-space: normal; word-break: break-all; overflow-wrap: anywhere; }
}
details.diagnostics summary { cursor: pointer; color: var(--muted); font-size: 0.75rem; }
details.diagnostics p { margin: 0.375rem 0 0; overflow-wrap: anywhere; }

/* #465/#467 compact monthly and weekly usage */
.included-usage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.25rem 1.5rem; max-width:none; padding:.5rem 1.125rem; margin:0; border-radius:.75rem; box-sizing:border-box; }
.included-usage-header { grid-column:1/-1; display:flex; align-items:center; gap:.75rem; margin:0; }
.included-usage-header h2 { font-size:.9375rem; font-weight:600; margin:0; }
.included-usage-header .included-period { margin:0 auto 0 0; font-size:.75rem; color:var(--muted); }
.included-usage-header .button { min-height:2.75rem; min-width:2.75rem; padding:0 .5rem; font-size:.75rem; }
.included-window-head h3 { margin:0; font-size:.75rem; font-weight:600; color:var(--text-soft); }
.included-hero, .included-weekly-hero { margin:0 0 .375rem; display:flex; align-items:baseline; gap:.375rem; }
.included-hero strong, .included-weekly-hero strong { font-size:1.5rem; line-height:1.1; }
.included-hero span, .included-weekly-hero span { font-size:.75rem; }
.included-meter { height:.375rem; }
.included-legend { display:flex; gap:1rem; margin:.375rem 0 0; }
.included-legend div { display:flex; flex-direction:row-reverse; gap:.25rem; align-items:baseline; }
.included-legend dd, .included-legend dt { margin:0; font-size:.75rem; }
.included-weekly { margin:0; padding:0 0 0 1.5rem; border-top:0; border-left:1px solid var(--stroke); }
.included-weekly-legend, .included-weekly-reset { margin:.25rem 0 0; font-size:.75rem; color:var(--muted); }
.included-usage footer { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; margin:0; padding-top:.25rem; border-top:1px solid var(--stroke); font-size:.75rem; color:var(--muted); }
.included-usage footer .included-status { display:inline; margin:0; }
@media (max-width:900px) { .included-usage { grid-template-columns:1fr; } .included-weekly { padding:.625rem 0 0; border-left:0; border-top:1px solid var(--stroke); } .included-usage-header { flex-wrap:wrap; } .included-usage-header .included-period { order:3; flex-basis:100%; } }
/* Dashboard compact layout tweaks */
.dash .included-weekly-note { margin:.25rem 0 0; font-size:.6875rem; line-height:1.4; }
.dash .included-usage footer { padding-top:.1875rem; font-size:.6875rem; }