/* One question, then play (TWH_ONE_QUESTION): the home card. Tokens from brand.css; light and dark follow them. No inline style anywhere (strict CSP). */
.oq { box-sizing: border-box; margin: var(--space-4, 16px) 0; padding: var(--space-4, 16px); background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-card, 14px); box-shadow: var(--shadow-1, none); }
.oq .oq-q { margin: 0 0 var(--space-3, 12px); font-size: var(--text-lg, 1.25rem); }
.oq-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oq-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 14px; box-sizing: border-box; width: 100%;
  border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-card, 14px); background: var(--surface); color: inherit; font-size: var(--text-base, 1rem); font-weight: 600; cursor: pointer; }
.oq-chip:hover:not(:disabled) { border-color: var(--accent-fill, currentColor); }
.oq-chip:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }
.oq-chip:disabled { opacity: .6; cursor: default; }
.oq-chip[aria-pressed="true"] { background: var(--accent-soft, transparent); border-color: var(--accent-fill, currentColor); color: var(--accent-ink, inherit); }
.oq-chip[aria-pressed="true"]::before { content: "\275A\275A"; content: "\275A\275A" / ""; margin-right: 8px; font-size: .875em; letter-spacing: -2px; }      /* pause bars: tap again to pause (not colour alone) */
.oq-chip.oq-last { border-color: var(--accent-fill, currentColor); }
.oq-chip.oq-last:not([aria-pressed="true"])::before { content: "\2605"; content: "\2605" / ""; margin-right: 8px; }                                   /* a star: your last answer */
.oq-go { margin-top: var(--space-3, 12px); }
.oq-go .btn { width: 100%; min-height: 52px; }
.oq-note { margin: 8px 0 0; min-height: 1.4em; }
.oq-fine { margin: 4px 0 0; }
.oq-after { margin: 8px 0 0; }
.oq-after .btn { min-height: 44px; }
@media (min-width: 640px) { .oq-chips { grid-template-columns: repeat(4, 1fr); } .oq-go .btn { width: auto; min-width: 14rem; } }
/* W174 (TWH_PERSONAL_HOME): the returning listener's one card; "Something else?" is a quiet text button. Lives here (lazy, with the card), never in style.css. */
.oq-ph { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.oq-ph[hidden], .oq-chips[hidden] { display: none; }
.oq-ph-title { margin: 0; font-weight: 600; }
.oq-ph-line { margin: 0 0 var(--space-2, 8px); }
.oq-ph-play { width: 100%; min-height: 52px; }
.oq-ph-else { align-self: flex-start; min-height: 44px; padding: 0 4px; background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.oq-ph-else:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }
@media (min-width: 640px) { .oq-ph-play { width: auto; min-width: 14rem; align-self: flex-start; } }
@media (prefers-reduced-motion: reduce) { .oq-chip { transition: none; } }
/* W244 (TWH_TIME_OF_DAY): the answer the visitor's clock suggests comes first; same size, no new row. */
.oq-chip.oq-sugg:not([aria-pressed="true"]) { border-color: var(--accent-fill, currentColor); }
.oq .oq-q.oq-q-sm { font-size: var(--text-base, 1rem); }      /* W244: the time-of-day line, when it would otherwise wrap onto a second row */
.oq-note .oq-cont { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }     /* W253: the continue line is the note's one line */
/* W392: starting state; inline retry */
.oq-chip.is-starting { border-color: var(--accent-fill, currentColor); cursor: progress; }
.oq-chip.is-starting .oq-label::after { content: "\2026"; content: "\2026" / ""; }
.oq-note .oq-retry { min-height: 44px; padding: 0 6px; background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.oq-note .oq-retry:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }