/* Voice usage (LRN) (2026-09-24). Owner: console/js/voiceusage.js.
 * Tokens only, like house.css, so all four themes come for free. Colour is
 * never the only signal: every state has an icon and a word. */

.vu-month select { min-width: 11rem; }
.vu-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.vu-bundle { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vu-bundle p { margin: 0; max-width: 46ch; }
.vu-bundle-actions, .vu-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.vu-alert {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin: var(--space-3) 0 0; padding: var(--space-3);
  border-radius: var(--radius); background: var(--warn-soft); color: var(--text);
}
.vu-alert svg { flex: none; color: var(--warn); margin-top: 2px; }

.vu-voice-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.vu-voice-name { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.vu-voice-name h2 { margin: 0; font-size: var(--fs-h2); }
.vu-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.vu-h { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-semibold);
        text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

.vu-samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.vu-sample { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3);
             border-radius: var(--radius); background: var(--surface-2); }
.vu-sample-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vu-sample audio { width: 100%; }
.vu-sample-text { margin: 0; font-size: var(--fs-small); color: var(--text-dim); font-style: italic; }
.vu-notes { margin: 0; padding-left: 1.1rem; }
.vu-notes li + li { margin-top: 2px; }

@media (max-width: 700px) {
  .vu-bar { flex-direction: column; }
  .vu-samples { grid-template-columns: 1fr; }
}

/* A house page: the header tiles describe one tenant's courses, not this. */
body[data-tab="voice"] #stats { display: none; }