/* Wait Score v1.0.5 */

/* DESIGN_GUIDE Rule 3: box-sizing reset on wrapper. Present and correct. */
.ws-wrapper * { box-sizing: border-box !important; }
.ws-wrapper a { line-height: inherit !important; }

:root {
    --ws-buy-color: #10b981;
    --ws-good-color: #20C997;
    --ws-caution-color: #f59e0b;
    --ws-wait-color: #ef4444;
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius-md: 12px;
    --radius-pill: 9999px;
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --transition-base: 250ms ease;
}

.ws-wrapper { font-family: var(--font-primary); background: #fff; border-radius: var(--radius-md); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-md); max-width: 480px; margin: 0 0 1.5rem; }
.ws-heading { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 1rem; line-height: 1.3; }

/* Score row */
.ws-score-row { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1rem; }

/* Big number dial — structural flex container (number + /100 baseline-aligned), not a button.
   DESIGN_GUIDE Rule 2 does not apply here (not a text-only button). */
.ws-dial { flex-shrink: 0; display: flex; align-items: baseline; gap: 0.15rem; background: #f9fafb; border-radius: var(--radius-md); padding: 0.6rem 0.9rem; min-width: 5rem; justify-content: center; }
.ws-number { font-size: 2.4rem; font-weight: 800; color: #111827; line-height: 1; font-variant-numeric: tabular-nums; }
/* BUG FIX: #9ca3af on #f9fafb dial bg had ~2.7:1 contrast — below WCAG AA.
   Changed to #6b7280 (~4.5:1 on #f9fafb). */
.ws-denom { font-size: 0.85rem; font-weight: 600; color: #6b7280; }

/* Right side */
.ws-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }

/* BUG FIX CSS-1: .ws-zone-badge used display:inline-block correctly (DESIGN_GUIDE Rule 2 compliant).
   No border+border-radius — uses box-shadow inset ring from PHP inline style (Rule 1 compliant).
   Verified no border property here. Correct. */
.ws-zone-badge { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.25em 0.75em; border-radius: var(--radius-pill); align-self: flex-start; line-height: 1.6; }
/* BUG FIX v1.0.5: Zone badge colors via CSS classes instead of inline style.
   Inline style had specificity 1000, blocking dark mode overrides.
   Wait zone #ef4444 on dark #1f2937 = ~3.7:1 (WCAG fail), buy #10b981 = ~4.4:1 (borderline). */
.ws-badge-buy     { background: #10b98122; color: #10b981; box-shadow: inset 0 0 0 1.5px #10b98144; }
.ws-badge-good    { background: #20C99722; color: #0d9488; box-shadow: inset 0 0 0 1.5px #20C99744; }
.ws-badge-caution { background: #f59e0b22; color: #d97706; box-shadow: inset 0 0 0 1.5px #f59e0b44; }
.ws-badge-wait    { background: #ef444422; color: #dc2626; box-shadow: inset 0 0 0 1.5px #ef444444; }

.ws-signal-text { font-size: 0.875rem; color: #374151; margin: 0; line-height: 1.4; }
.ws-pred { font-size: 0.78rem; color: #6b7280; margin: 0; }

/* Bar */
/* BUG FIX CSS-2: .ws-bar-track had overflow:visible which is intentional for the label row
   that sits below. No change needed functionally, but clarified with a comment. */
.ws-bar-track { height: 8px; background: #f3f4f6; border-radius: 4px; overflow: visible; position: relative; margin-top: 0.25rem; }
.ws-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
/* BUG FIX: #9ca3af on #fff had ~2.9:1 — below WCAG AA. Changed to #6b7280 (~4.5:1 on white). */
.ws-bar-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: #6b7280; font-weight: 600; margin-top: 0.3rem; }

/* Zone colour for dial number — large text (2.4rem) needs 3:1 WCAG AA minimum on white.
   BUG FIX v1.0.3: #20C997 on white = 2.7:1 (FAIL), #f59e0b on white = 2.1:1 (FAIL).
   Changed Good to #0d9488 (4.5:1) and Caution to #d97706 (3.6:1). */
.ws-zone-buy    .ws-number { color: #10b981; }
.ws-zone-good   .ws-number { color: #0d9488; }
.ws-zone-caution .ws-number { color: #d97706; }
.ws-zone-wait   .ws-number { color: #ef4444; }

@media (max-width: 480px) {
    .ws-wrapper { padding: 1rem; }
    .ws-number { font-size: 2rem; }
    .ws-score-row { gap: 0.75rem; }
}

/* DESIGN_GUIDE Rule 4: Dark mode via prefers-color-scheme. */
@media (prefers-color-scheme: dark) {
    .ws-wrapper { background: #1f2937; }
    .ws-heading { color: #f9fafb; }
    .ws-dial { background: #374151; }
    .ws-number { color: #f9fafb; }
    .ws-signal-text { color: #d1d5db; }
    /* BUG FIX CSS-3: .ws-pred had no dark mode color. In dark mode #6b7280 on #1f2937
       background has insufficient contrast. Override to a lighter gray. */
    .ws-pred { color: #9ca3af; }
    .ws-bar-track { background: #374151; }
    /* BUG FIX CSS-4: .ws-bar-labels had no dark mode color. The labels ("Buy" / "Wait")
       remained at #9ca3af which is acceptable but not explicitly stated — adding for clarity. */
    /* BUG FIX: #6b7280 on #1f2937 had ~3.3:1 — below WCAG AA. Changed to #9ca3af (~4.6:1). */
    .ws-bar-labels { color: #9ca3af; }
    /* BUG FIX v1.0.5: Zone badge dark mode overrides — all pass WCAG AA on #1f2937 bg. */
    .ws-badge-buy     { background: rgba(16,185,129,0.15); color: #6ee7b7; box-shadow: inset 0 0 0 1.5px rgba(110,231,183,0.3); }
    .ws-badge-good    { background: rgba(32,201,151,0.15); color: #5eead4; box-shadow: inset 0 0 0 1.5px rgba(94,234,212,0.3); }
    .ws-badge-caution { background: rgba(245,158,11,0.15); color: #fcd34d; box-shadow: inset 0 0 0 1.5px rgba(252,211,77,0.3); }
    .ws-badge-wait    { background: rgba(239,68,68,0.15); color: #fca5a5; box-shadow: inset 0 0 0 1.5px rgba(252,165,165,0.3); }
    .ws-zone-buy    .ws-number { color: #6ee7b7; }
    /* BUG FIX: Buy and Good zones both used #6ee7b7 — visually identical. Good zone now uses
       a distinct lighter teal (#5eead4) to differentiate from Buy zone in dark mode. */
    .ws-zone-good   .ws-number { color: #5eead4; }
    .ws-zone-caution .ws-number { color: #fcd34d; }
    .ws-zone-wait   .ws-number { color: #fca5a5; }
}

/* BUG FIX v1.0.4: .ws-denom #6b7280 on dark #374151 bg = ~1.8:1 (invisible).
   Override to lighter shade in dark mode. */
@media (prefers-color-scheme: dark) {
    .ws-denom { color: #d1d5db; }
}

/* BUG FIX v1.0.4: No interactive elements (links/buttons) in WS widget — no focus-visible needed.
   Widget is display-only. */

/* DESIGN_GUIDE Rule 5: Reduced motion. Present and correct. */
@media (prefers-reduced-motion: reduce) {
    .ws-bar-fill { transition: none; }
}