/**
 * UniversalMediaController structural styles.
 *
 * Reads Open Door Design design tokens (--odd-*) when present so the
 * controller matches the host page automatically; every property has a
 * plain fallback so the controller also looks reasonable on a page that
 * does not define those tokens at all.
 */

.umc-controller {
  display: flex;
  flex-direction: column;
  gap: var(--odd-space-4, 1rem);
  padding: var(--odd-space-4, 1rem);
  border: 1px solid var(--odd-color-border, #6e7b82);
  border-radius: var(--odd-radius-md, 0.75rem);
  background: var(--odd-color-surface, #fff);
  max-width: 40rem;
}

.umc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--odd-space-3, 0.75rem);
}

.umc-btn {
  min-height: var(--odd-touch-target, 3rem);
  min-width: var(--odd-touch-target, 3rem);
  padding-inline: var(--odd-space-4, 1rem);
  border-radius: var(--odd-radius-sm, 0.375rem);
  border: 1px solid var(--odd-color-border, #6e7b82);
  background: var(--odd-color-surface, #fff);
  color: var(--odd-color-text, #111);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.umc-btn:hover {
  background: var(--odd-color-surface-alt, #eaf3ed);
}

.umc-btn--primary {
  background: var(--odd-color-primary, #0b5d3b);
  border-color: var(--odd-color-primary, #0b5d3b);
  color: #fff;
}

.umc-btn--primary:hover {
  background: var(--odd-color-primary-dark, #08452c);
}

.umc-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.umc-btn[aria-pressed="true"] {
  outline: 2px solid var(--odd-color-primary, #0b5d3b);
  outline-offset: 2px;
}

.umc-btn[data-umc-not-available="true"],
select[data-umc-not-available="true"],
input[data-umc-not-available="true"] {
  opacity: 0.55;
  /* pointer-events intentionally left enabled, and this is a plain HTML
     data attribute rather than an ARIA one on purpose: it is purely a
     visual/CSS hook for sighted users and carries no accessibility-tree
     meaning at all, so it cannot affect a screen reader's navigation in
     any way. A control whose feature is not available is still an
     ordinary, fully enabled button -- it must remain clickable so it can
     explain itself via a status announcement (see Docs/Version 1
     Requirements.md, "Selecting an unavailable control should produce a
     concise accessible status message"), and must remain fully reachable
     by every keyboard and screen-reader navigation method (see
     Docs/Limitations.md, "Issue 1", for why no disabled-style attribute
     is used for this). Only the native `disabled` attribute would remove
     either of those, and this milestone never sets it for capability
     gating. */
}

.umc-row--accessibility {
  padding-block-end: var(--odd-space-2, 0.5rem);
  border-block-end: 1px solid var(--odd-color-border-soft, #b9c5cb);
}

.umc-field {
  display: flex;
  flex-direction: column;
  gap: var(--odd-space-1, 0.25rem);
  min-width: 10rem;
}

.umc-field label {
  font-weight: 600;
  color: var(--odd-color-text, #111);
}

.umc-slider,
.umc-select {
  min-height: var(--odd-touch-target, 3rem);
  font: inherit;
}

.umc-select {
  padding-inline: var(--odd-space-2, 0.5rem);
  border-radius: var(--odd-radius-sm, 0.375rem);
  border: 1px solid var(--odd-color-border, #6e7b82);
  background: var(--odd-color-surface, #fff);
  color: var(--odd-color-text, #111);
}

.umc-time {
  margin: 0;
  color: var(--odd-color-text-muted, #2f3437);
}

:focus-visible {
  outline: 3px solid var(--odd-color-focus, #8a5a00);
  outline-offset: 3px;
}

[data-umc-visually-hidden] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}