/* playbook.php restyle overrides — admin/STYLE-GUIDE.md.
   playbook.php's own <style> already routes its short var names (--primary/--teal/--success/
   --warning/--error/--coral) through the shared --ws-* tokens, so most colour already lands in
   the new palette once site-next.css re-points those tokens. What's left: literal rgba()/hex
   tints that never went through a token (amber badges, the teal/sky "preview" wash, the CTA
   gradient), caps-and-tracked labels, and the shared surf-call.css classes this page pulls in
   for the surf outlook (surf-call.css itself is not edited — playbook.php only renders its
   day-row classes, so only those are overridden here).

   Rule trust-ladder badges (proposed/backtested/active/trusted) are a STATUS, not a verdict —
   neutral chip, `trusted` gets the go-green as text only, never a fill. `contradicted` stays red
   (that one IS a verdict: the record disagrees). Notes — hazard and otherwise — are plain inset
   panels; the old amber left-edge on a hazard note read as a warning state when it is really a
   local's aside, one step below a fact but not a caution. */

/* ── Type (§1.2, §3): caps-and-tracked labels to sentence case ── */
body[data-page="playbook"] .eyebrow {
    text-transform: none; letter-spacing: 0;
    font-size: 13.5px; font-weight: 600;
    color: var(--ws-text-secondary);
}
body[data-page="playbook"] .cta .eyebrow { color: var(--ws-text-secondary); }
body[data-page="playbook"] .note-kind,
body[data-page="playbook"] .rule.note-rule.kind-hazard .note-kind {
    text-transform: none; letter-spacing: 0;
    font-size: 13px; font-weight: 600;
    color: var(--ws-text-secondary);
}
body[data-page="playbook"] .draft-card .draft-meta { text-transform: none; letter-spacing: 0; }
body[data-page="playbook"] .preview .lead {
    text-transform: none; letter-spacing: 0; font-weight: 600;
    color: var(--ws-text-secondary);
}
body[data-page="playbook"] .preview.bad .lead { color: var(--wsv-wrong); }
body[data-page="playbook"] .section-title { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
/* surf-call.css labels: playbook only renders the day rows (surf-call-embedded), not the header/
   chip/week-strip classes, so only the day-row labels need uncapping here. */
body[data-page="playbook"] .surf-day-label,
body[data-page="playbook"] .surf-band { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* The vote glyphs move from ▲/▼ text to a 13px SVG chevron (§1.5); align it with the label. */
body[data-page="playbook"] .vote-btn { display: inline-flex; align-items: center; gap: 4px; }
body[data-page="playbook"] .vote-btn svg { width: 13px; height: 13px; flex: none; }

/* ── Colour (§1.3): status chips neutral, notes un-ambered, tinted washes to real tokens ── */
body[data-page="playbook"] .badge.proposed,
body[data-page="playbook"] .badge.backtested,
body[data-page="playbook"] .badge.active,
body[data-page="playbook"] .badge.expert,
body[data-page="playbook"] .badge.note-stage {
    background: var(--dn-inset); color: var(--ws-text-secondary);
}
body[data-page="playbook"] .badge.trusted {
    background: var(--dn-inset); color: var(--wsv-go-text);
}
/* .badge.contradicted is left alone: red is "we were wrong", which this one actually means. */
body[data-page="playbook"] .badge-unproven {
    background: transparent; border: 1px solid var(--wsv-maybe); color: var(--wsv-maybe);
}
body[data-page="playbook"] .badge-unproven:hover { background: transparent; color: var(--wsv-maybe); }
/* Colour only, not the full border shorthand: a draft note is also `.rule.draft` (dashed edge,
   §1.3 "draft" state) and this must not flatten that back to solid — it only needs to stop being
   amber. The left edge stays the base rule's 3px width, just recoloured neutral. */
body[data-page="playbook"] .rule.note-rule {
    background: var(--dn-inset); border-color: var(--dn-inset-edge);
    border-radius: var(--dn-radius-inner);
}
body[data-page="playbook"] .spot-card .why { color: var(--ws-text-secondary); }
body[data-page="playbook"] .preview {
    background: var(--dn-inset); border: 1px solid var(--dn-inset-edge); color: var(--ws-text-primary);
}
body[data-page="playbook"] .preview.bad {
    background: var(--dn-inset); border: 1px solid var(--wsv-wrong); color: var(--ws-text-primary);
}
body[data-page="playbook"] .surf-band-great { color: var(--wsv-epic); }
body[data-page="playbook"] .surf-band-good { color: var(--wsv-go-text); }
body[data-page="playbook"] .surf-band-marginal { color: var(--wsv-maybe); }
body[data-page="playbook"] .surf-call-upsell-link { color: var(--dn-accent); }

/* ── Chrome (§1.4): the two gradients gone; card radius and section rhythm to the shared scale ── */
body[data-page="playbook"] .btn { background: var(--dn-accent); box-shadow: none; }
body[data-page="playbook"] .btn:hover:not(:disabled) { background: var(--dn-accent-hover); }
body[data-page="playbook"] .cta {
    background: var(--ws-bg-card-solid); border: 1px solid var(--dn-card-edge); box-shadow: none;
}
body[data-page="playbook"] .cta-alt { border-top-color: var(--ws-border-subtle); }
body[data-page="playbook"] :is(.rule, .spot-card, .contribute, .builder, .draft-card, .empty, .cta) {
    border-radius: var(--dn-radius-card);
}
/* §4 "Input / select": radius 12px. Builder controls were 8-10px. */
body[data-page="playbook"] :is(select, input[type="text"], input[type="number"], textarea, .type-card, .compass button) {
    border-radius: var(--dn-radius-inner);
}
body[data-page="playbook"] .section { margin-top: var(--dn-section-gap); }

/* ── Light theme (§1.7): the standalone cards get the defined white/edge/lift; .rule keeps its
   own left accent colour (contradicted/draft/note already set it), so only the other three sides
   are touched. Everything else above already resolves through tokens that flip on their own. ── */
/* :not(.note-rule) — a note already gets dn-inset/dn-inset-edge above, which is theme-aware on
   its own; without this exclusion the tie in specificity would let this white-card rule win here
   by source order and paint a note as a full card in light mode. */
[data-theme="light"] body[data-page="playbook"] .rule:not(.note-rule) {
    background: #FFFFFF; box-shadow: var(--dn-card-lift);
    border-top-color: var(--dn-card-edge); border-right-color: var(--dn-card-edge); border-bottom-color: var(--dn-card-edge);
}
[data-theme="light"] body[data-page="playbook"] :is(.spot-card, .contribute, .builder, .draft-card, .empty) {
    background: #FFFFFF; border-color: var(--dn-card-edge); box-shadow: var(--dn-card-lift);
}

/* A condition rule's permanent blue left edge said "tappable" about a card that is not (09-26
   fix pass). Contradicted keeps red (a verdict) and draft keeps its dashed muted edge. */
body[data-page="playbook"] .rule:not(.contradicted):not(.draft) { border-left-color: var(--dn-card-edge); }