/* "One quarter of a design system" (scripts/site/interactives/ops-quarter.ts and
   apps/showcase/site/interactives/ops-quarter.ts). Custom properties only, so the brand system can
   restyle it. Dye meanings: teal = healthy or approved, saffron = waiting or attention, madder =
   broken or expired, indigo = action or link. */
.ix-oq {
  --ix-ok: var(--teal-ink); --ix-wait: var(--saffron-ink); --ix-broken: var(--madder-ink); --ix-action: var(--indigo-ink);
  --ix-ink: var(--ink); --ix-ink-2: var(--ink-2); --ix-line: var(--line); --ix-surface: var(--surface); --ix-ground: var(--cotton);
  color: var(--ix-ink); background: var(--ix-surface); border: 1px solid var(--ix-line); border-top: 4px solid var(--ix-action);
  padding: clamp(var(--space-6), 3vw, var(--space-9)); margin-top: var(--space-8); min-block-size: 420px;
}
.ix-oq[data-mode="tools"] { border-top-color: var(--ix-wait); }
.ix-oq-label { display: inline-block; margin: 0 0 var(--space-6); font: var(--type-label); color: var(--ix-ink-2); border: 1px solid var(--ix-line); padding: var(--space-2) var(--space-4); }
.ix-oq-controls { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-6); }
@media (min-width: 900px) { .ix-oq-controls { grid-template-columns: auto 1fr; } .ix-oq-week { grid-column: 1 / -1; } }
.ix-oq fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.ix-oq legend { font-weight: 700; margin-bottom: var(--space-3); padding: 0; width: 100%; }
.ix-oq fieldset label { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px; cursor: pointer; }
.ix-oq input[type="radio"], .ix-oq input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ix-action); margin: 0; }
.ix-oq-week { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.ix-oq-week button { min-height: 44px; min-width: 44px; padding: 0 var(--space-6); border: 2px solid var(--ix-action); background: transparent; color: var(--ix-action); font: var(--type-small-strong); cursor: pointer; }
.ix-oq-week button:disabled { opacity: .45; cursor: default; }
.ix-oq-range { flex: 1 1 220px; display: flex; align-items: center; gap: var(--space-5); font-weight: 700; }
.ix-oq-range input { flex: 1; min-height: 44px; accent-color: var(--ix-action); }
.ix-oq :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ix-oq-weekof { font: var(--type-strong); margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.ix-oq-holiday { font-weight: 600; font-size: var(--fs-small); color: var(--ix-wait); }
.ix-oq-readout { font-size: var(--fs-body); line-height: 1.5; margin: 0 0 var(--space-6); max-width: 70ch; min-height: 3em; }
.ix-oq-counts { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.ix-oq-counts li { border-left: 4px solid var(--ix-tone, var(--ix-line)); padding: var(--space-3) var(--space-5); background: var(--ix-ground); display: grid; }
.ix-oq-counts b { font: var(--type-h3); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-h3); }
.ix-oq-counts span { font-size: var(--fs-small); color: var(--ix-ink-2); }
.ix-oq .is-ok { --ix-tone: var(--ix-ok); }
.ix-oq .is-wait { --ix-tone: var(--ix-wait); }
.ix-oq .is-broken { --ix-tone: var(--ix-broken); }
.ix-oq td .is-ok, .ix-oq td .is-wait, .ix-oq td .is-broken, .ix-oq small, .ix-oq-exc li { color: var(--ix-tone); font-weight: 700; }
.ix-oq-events-now { font-size: var(--fs-small); margin: 0 0 var(--space-6); }
.ix-oq-body { display: grid; gap: var(--space-6) var(--space-9); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ix-oq-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .ix-oq-counts, .ix-oq-events-now { grid-column: 1 / -1; } }
.ix-oq-panel h3 { font: var(--type-strong); margin: 0 0 var(--space-4); }
.ix-oq-panel h4 { font: var(--type-small-strong); margin: var(--space-6) 0 var(--space-3); }
.ix-oq-agenda { margin: 0; padding-left: var(--space-7); display: grid; gap: var(--space-4); }
.ix-oq-agenda ul { margin: var(--space-2) 0 0; padding-left: var(--space-7); }
.ix-oq-none { color: var(--ix-ink-2); margin: 0; }
.ix-oq .table-wrap { overflow-x: auto; max-width: 100%; }
.ix-oq-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ix-oq-table caption { text-align: start; font-weight: 700; padding-bottom: var(--space-4); }
.ix-oq-table th, .ix-oq-table td { text-align: start; vertical-align: top; padding: var(--space-4); border-bottom: 1px solid var(--ix-line); }
.ix-oq-table thead th { font-size: var(--fs-label); color: var(--ix-ink-2); }
.ix-oq small { display: block; font-size: var(--fs-label); }
.ix-oq-decided { font-size: var(--fs-small); margin: var(--space-5) 0 0; color: var(--ix-ink-2); }
.ix-oq-exc ul { margin: 0; padding-left: var(--space-7); font-size: var(--fs-small); }
.ix-oq-caption { margin: var(--space-7) 0 0; font-size: var(--fs-small); color: var(--ix-ink-2); max-width: 90ch; }
.ix-oq-failed { color: var(--ix-broken); font-weight: 700; }