/* Usage meters (customer Usage and limits, tenant console) and the Zargina Commercial and Alerts tabs. Flat: 4px corners, no shadows. */
.meter-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.meter { position: relative; flex: 1; min-width: 56px; height: 6px; background: var(--line-2); border-radius: 4px; }
.meter > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .25s var(--ease); }
.meter.warn > i { background: var(--warn); }
.meter.bad > i { background: var(--bad); }
.meter > b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); opacity: .55; }
.cm-wrap { overflow-wrap: anywhere; }
.cm-bad { color: var(--bad); }
.nowrap { white-space: nowrap; }
.icon.flip { transform: rotate(180deg); }

.cm-nav { display: flex; flex-wrap: wrap; gap: 2px; background: var(--line-2); border-radius: 4px; padding: 3px; }
.cm-nav a { padding: 4px 11px; border-radius: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; }
.cm-nav a:hover { color: var(--ink); }
.cm-nav a[aria-current] { background: var(--sheet); color: var(--ink); }

.cm-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.cm-totals > div { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; min-width: 0; }
.cm-totals small { display: block; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cm-totals b { display: block; font-size: 22px; font-variation-settings: 'wdth' 80; margin-top: 4px; overflow-wrap: anywhere; }

.cm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.cm-head h2 { margin: 0; font-size: 18px; }
.cm-head .spacer { flex: 1; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
td .cm-actions { margin: 0; }

.cm-history, .cm-timeline { list-style: none; margin: 0; padding: 0; }
.cm-history > li, .cm-timeline > li { padding: 10px 0 10px 14px; border-left: 2px solid var(--line); }
.cm-timeline > li.is-now { border-left-color: var(--ok); }
.cm-timeline > li.is-next { border-left-color: var(--warn); }
.cm-history header, .cm-timeline header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.cm-history p { margin: 4px 0; }
.cm-diff { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.cm-diff li { padding: 2px 0; overflow-wrap: anywhere; }
.cm-diff li > span { color: var(--ink-2); }
.cm-diff s { color: var(--ink-3); }

.cm-sub { font-size: 13px; margin: 18px 0 8px; }
.cm-group { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 8px; }
.cm-group > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 13px; transition: background .2s; }
.cm-group > summary:hover { background: var(--sheet-2); }
.cm-group > .form-grid { padding: 4px 12px 12px; }
.cm-step { display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.cm-json { width: 100%; font: 12.5px/1.45 ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }

@media (max-width: 720px) {
  .cm-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-step { grid-template-columns: minmax(0, 1fr) 32px; }
  .cm-step > select, .cm-step > input[type=number] { grid-column: 1; }
  .cm-step > .icon-btn { grid-row: 1; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .meter > i, .cm-nav a, .cm-group > summary { transition: none; } }