/* ============================================================
   functional.css — Daylight Tool theme (light, high-contrast)
   Loaded LAST on the interactive tool pages and guide/article pages:
      converter.html / deck.html / penalty.html /
      penalty-navi.html / opponent-error.html / guides/*.html / about.html
   Re-skins the dark "Holo Night Lab" surface into a bright,
   readable, operation-first tool UI. Layout/structure stay
   intact — this layer only changes color, surface, depth and
   interaction states. LP (index) keeps the dark Lab design.
   ============================================================ */

/* ---------- 1. Tokens: repaint the palette for daylight ---------- */
:root {
  color-scheme: light;

  /* Canvas / ink */
  --bg: #e9edf2;
  --text: #16212e;
  --muted: #56616f;

  /* Surfaces */
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #eef2f7;
  --surface-blue: #e7f1fb;
  --line: #d9e0e8;
  --line-strong: #bcc6d2;

  /* Platinum scale is used as FOREGROUND (text) across the dark
     theme — flip it to inks so it stays readable on light. */
  --plat-50: #0f1822;
  --plat-100: #16212e;
  --plat-200: #1f2a37;
  --plat-300: #3a4654;
  --plat-400: #56616f;
  --plat-500: #8b97a4;

  /* Accents: keep brand hues, pick on-light-safe variants for text */
  --blue: #0b63ad;
  --blue-bright: #1180d4;
  --blue-pale: #0b5390;
  --blue-dark: #06477f;
  --gold: #f59e0b;
  --gold-bright: #c97c08;   /* used as text in spots → darker for contrast */
  --gold-deep: #9a5d08;
  --gold-dark: #9a5d08;
  --red-soft: #d23b44;
  --success-bright: #0f766e;
  --warning-bright: #b45309;

  /* Depth: soft neutral shadows instead of black glow */
  --shadow: 0 1px 2px rgba(16, 33, 48, 0.06), 0 10px 26px rgba(16, 33, 48, 0.08);
  --shadow-strong: 0 2px 6px rgba(16, 33, 48, 0.08), 0 22px 50px rgba(16, 33, 48, 0.14);
  --shadow-card: 0 1px 2px rgba(16, 33, 48, 0.06), 0 12px 30px rgba(16, 33, 48, 0.08);

  /* Glass gradients (lab.css surfaces) → light card fills. Redefining the
     tokens flips .panel / .summary-strip / .result-card / .guides-panel
     in one move. */
  --glass: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  --glass-soft: #f1f4f8;

  /* Holo headline — keep the multi-hue signature but darken every stop so
     it stays legible on white (large bold text → 3:1 is enough). */
  --holo: linear-gradient(105deg, #9a5d08 0%, #c97c08 26%, #0b63ad 64%, #6d3bbf 100%);
  --holo-line: linear-gradient(90deg, transparent, rgba(201, 124, 8, 0.85) 30%, rgba(17, 128, 212, 0.85) 60%, rgba(109, 59, 191, 0.8) 80%, transparent);
}

/* ---------- 2. Base canvas ---------- */
html {
  background: var(--bg);
}

body {
  color: var(--text);
  background-color: var(--bg) !important;
  /* faint dot grid — carries the "lab instrument" identity into daylight */
  background-image: radial-gradient(rgba(15, 42, 68, 0.05) 1px, transparent 1.5px) !important;
  background-size: 24px 24px !important;
}

/* kill the film-grain overlay (designed for the dark skin) */
body::after {
  display: none !important;
}

/* converter's fixed dark atmosphere layer */
.cv-bg,
.cv-bg::before,
.cv-bg::after {
  background: none !important;
  display: none !important;
}

a {
  color: var(--blue);
  text-decoration-color: rgba(11, 99, 173, 0.4);
}

::selection {
  background: rgba(245, 158, 11, 0.28);
  color: #16212e;
}

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(17, 128, 212, 0.18);
}

/* ---------- 3. Shared form controls (lab.css element selectors) ---------- */
button {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 1px rgba(16, 33, 48, 0.04);
}

button:hover {
  border-color: var(--blue-bright);
  background: var(--surface-blue);
  box-shadow: 0 0 0 3px rgba(17, 128, 212, 0.12);
}

input,
select,
textarea {
  background: #ffffff;
  background-color: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--text);
  color-scheme: light;
}

input::placeholder,
textarea::placeholder {
  color: var(--plat-500);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(17, 128, 212, 0.16);
}

/* Re-declare the caret with full position/size/repeat — the `background`
   shorthand above resets those, so image-only would tile across the field. */
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--plat-400) 50%),
    linear-gradient(135deg, var(--plat-400) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

select option {
  background: #ffffff;
  color: var(--text);
}

/* ---------- 4. Shared button system + foil CTAs ---------- */
.primary-button {
  background: linear-gradient(180deg, #1583d6 0%, #0b63ad 100%);
  border: 1px solid #0b5390;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 52, 92, 0.25), 0 8px 20px rgba(11, 99, 173, 0.22);
}

.primary-button:hover {
  background: linear-gradient(180deg, #2a93e0 0%, #0d6cbb 100%);
  border-color: #0b5390;
  box-shadow: 0 1px 2px rgba(8, 52, 92, 0.25), 0 10px 26px rgba(11, 99, 173, 0.3);
}

.ghost-button {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--plat-300);
}

.ghost-button:hover {
  border-color: var(--blue-bright);
  color: var(--blue);
}

/* Gold foil CTA — the single loud action per screen. Dark text on
   warm gold reads well on a light canvas; keep it, soften the glow. */
.hero-cta,
.share-cta,
.pdoc-cta,
.pdoc-start-cta,
.guide-cta-card a,
.guide-site-note > a {
  border: 1px solid rgba(154, 93, 8, 0.7);
  color: #2a1c03;
  box-shadow: 0 1px 2px rgba(120, 72, 12, 0.2), 0 10px 24px rgba(245, 158, 11, 0.28);
}

.hero-cta:hover,
.share-cta:hover,
.pdoc-cta:hover,
.pdoc-start-cta:hover,
.guide-cta-card a:hover,
.guide-site-note > a:hover {
  box-shadow: 0 1px 2px rgba(120, 72, 12, 0.2), 0 12px 30px rgba(245, 158, 11, 0.36);
}

/* ---------- 5. Shared panel + footer + corner ticks ---------- */
.panel,
.pdoc-card,
.guide-related {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

/* Corner measurement ticks: lighten so they read on white */
.panel::before,
.pdoc-card::before,
.guide-related::before,
.guide-shell article > h1::after,
.guide-index-hero::after,
.beginner-hero::after,
.cv-step::after,
.cv-notes::before,
.cv-faq::after {
  background:
    linear-gradient(rgba(154, 93, 8, 0.55), rgba(154, 93, 8, 0.55)) left top / 14px 1.5px,
    linear-gradient(rgba(154, 93, 8, 0.55), rgba(154, 93, 8, 0.55)) left top / 1.5px 14px,
    linear-gradient(rgba(15, 42, 68, 0.22), rgba(15, 42, 68, 0.22)) right bottom / 14px 1.5px,
    linear-gradient(rgba(15, 42, 68, 0.22), rgba(15, 42, 68, 0.22)) right bottom / 1.5px 14px !important;
  background-repeat: no-repeat !important;
}

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer .footer-disclaimer a {
  color: var(--blue);
}

.site-footer .footer-disclaimer {
  color: var(--plat-300);
}

.site-footer .footer-disclaimer strong {
  color: var(--plat-50);
}

.disclaimer-banner {
  background: linear-gradient(180deg, #fff7e6 0%, #fffdf7 100%);
  border: 1px solid rgba(201, 124, 8, 0.42);
  box-shadow: 0 1px 2px rgba(120, 72, 12, 0.08), 0 10px 24px rgba(120, 72, 12, 0.1);
  color: var(--plat-100);
  font-weight: 650;
}

.disclaimer-banner strong {
  color: var(--gold-deep);
}

/* ============================================================
   6. Guides and article pages (guides/*.html / about.html)
   Bring reference content into the same daylight tool language.
   ============================================================ */
body.guide-page,
body.beginner-guide-page {
  background-color: var(--bg) !important;
  background-image: radial-gradient(rgba(15, 42, 68, 0.05) 1px, transparent 1.5px) !important;
  color: var(--text);
}

.guide-nav {
  color: var(--plat-300);
}

.guide-nav a,
.guide-shell article a,
.beginner-table a {
  color: var(--blue);
  text-decoration-color: rgba(11, 99, 173, 0.36);
}

.guide-nav a:hover,
.guide-shell article a:hover,
.beginner-table a:hover {
  color: var(--blue-dark);
}

.guide-shell article > h1,
.guide-index-hero,
.beginner-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 249, 252, 0.96) 58%, rgba(255, 247, 230, 0.9) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  color: var(--plat-50);
}

.guide-shell article > h1,
.guide-index-hero h1,
.beginner-hero h1 {
  color: var(--plat-50);
}

.guide-shell article > .guide-lede {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--plat-200);
}

.guide-index-hero .guide-lede,
.guide-shell p,
.guide-shell li {
  color: var(--plat-200);
}

.guide-shell .section-kicker,
.guide-index-hero .section-kicker,
.guide-index-grid span,
.guide-use-case small {
  color: var(--gold-deep);
}

.guide-shell h2,
.guide-shell h3,
.guide-shell strong,
.guide-index-grid strong,
.guide-use-case strong,
.guide-site-note h2,
.beginner-point strong,
.beginner-do-dont h3,
.beginner-checklist h3,
.beginner-step-list strong {
  color: var(--plat-50);
}

.guide-shell article > h2::before {
  color: var(--gold-deep);
}

.guide-shell article > h2::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.guide-shell article > ul > li::marker,
.guide-shell article > ol > li::marker {
  color: var(--gold-deep);
}

.guide-shell code {
  background: var(--surface-blue);
  border: 1px solid rgba(11, 99, 173, 0.24);
  color: var(--blue-dark);
}

.guide-cta-card {
  background: linear-gradient(135deg, #ffffff 0%, #fff7e6 100%);
  border: 1px solid rgba(201, 124, 8, 0.38);
  box-shadow: var(--shadow-card);
  color: var(--plat-50);
}

.guide-cta-card strong {
  color: var(--plat-50);
}

.guide-cta-card p {
  color: var(--plat-300);
}

.guide-table th {
  background: var(--surface-blue);
  border-color: rgba(11, 99, 173, 0.22);
  color: var(--plat-50);
}

.guide-table td {
  background: #ffffff;
  border-color: var(--line);
  color: var(--plat-200);
}

.guide-table tbody tr:nth-child(even) td {
  background: #f7f9fc;
}

.guide-related,
.guide-index-grid a,
.guide-use-case,
.guide-site-note,
.beginner-point,
.beginner-do-dont > div,
.beginner-checklist > section,
.beginner-step-list li {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.guide-index-grid p,
.guide-use-cases-head p:not(.section-kicker),
.guide-use-case p,
.guide-site-note p:not(.section-kicker),
.beginner-point p,
.beginner-callout p,
.beginner-step-list p {
  color: var(--muted);
}

.guide-index-grid a:hover,
.guide-use-case:hover {
  border-color: rgba(17, 128, 212, 0.45);
  box-shadow: 0 0 0 3px rgba(17, 128, 212, 0.12), 0 12px 30px rgba(16, 33, 48, 0.12);
}

.guide-hero-media,
.odds-mini-board,
.case-flow-board,
.beginner-check-board {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.guide-use-case-label {
  background: var(--surface-blue);
  border: 1px solid rgba(11, 99, 173, 0.26);
  color: var(--blue-dark);
}

.odds-url-chip,
.odds-zone-grid span,
.case-flow-board span,
.beginner-check-board li,
.beginner-phrase-list p {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--plat-100);
}

.odds-zone-grid b {
  color: var(--muted);
}

.odds-zone-grid em {
  color: var(--gold-deep);
}

.beginner-callout {
  background: linear-gradient(180deg, #fff7e6 0%, #fffdf7 100%);
  border-color: rgba(201, 124, 8, 0.38);
  border-left-color: var(--gold);
}

.beginner-callout strong {
  color: var(--gold-deep);
}

.beginner-quick-nav a {
  background: var(--surface-blue);
  border: 1px solid rgba(11, 99, 173, 0.24);
  color: var(--blue-dark);
}

.beginner-step-list li::before {
  background: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.36);
  color: var(--success-bright);
}

/* ============================================================
   7. Converter (converter.html — cv-* classes)
   ============================================================ */
.cv-nav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--line);
}

.cv-brand {
  color: var(--plat-100);
}

.cv-brand-mark {
  background: linear-gradient(150deg, #15304d, #0a1828 70%);
  border: 0;
  color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(8, 20, 35, 0.28);
}

.cv-nav-links a {
  color: var(--plat-300);
}

.cv-nav-links a:hover {
  color: var(--gold-deep);
}

.cv-kicker {
  color: var(--plat-400);
}

.cv-badge {
  border: 1px solid rgba(154, 93, 8, 0.5);
  background: rgba(245, 158, 11, 0.14);
  color: var(--gold-deep);
}

.cv-hero h1 {
  color: var(--plat-50);
}

/* gold-foil headline text stays warm but legible on light */
.cv-goldfoil {
  background: linear-gradient(110deg, #8a5a0a 0%, #c97c08 45%, #e3920c 60%, #b06a07 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cv-lead {
  color: var(--plat-300);
}

/* Converter panel → white instrument card */
.cv-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-strong);
}

.cv-panel::before {
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.9), transparent);
}

.cv-label {
  color: var(--plat-400);
}

.cv-input,
.cv-output {
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.cv-input::placeholder,
.cv-output::placeholder {
  color: var(--plat-500);
}

.cv-input:hover {
  border-color: var(--plat-400);
}

.cv-input:focus {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(17, 128, 212, 0.16);
}

.cv-output:focus {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(17, 128, 212, 0.16);
}

.cv-divider::before {
  background: linear-gradient(90deg, transparent, var(--line-strong));
}

.cv-divider::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.cv-divider span {
  color: var(--gold-deep);
}

.cv-hint {
  color: var(--plat-400);
}

.cv-message {
  color: var(--red-soft);
}

.cv-warnings .ptcgl-warning {
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-left: 3px solid var(--gold);
  background: rgba(245, 158, 11, 0.1);
  color: #6b4708;
}

.cv-section-head h2 {
  color: var(--plat-50);
}

.cv-section-num {
  color: var(--gold-deep);
}

/* Step / tool / notes / faq cards → white surfaces */
.cv-step,
.cv-tool,
.cv-notes,
.cv-faq {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.cv-step::before {
  background: linear-gradient(180deg, var(--plat-200) 0%, var(--plat-400) 70%, var(--plat-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cv-step h3,
.cv-tool h3 {
  color: var(--plat-100);
}

.cv-step p,
.cv-tool p {
  color: var(--plat-400);
}

.cv-tool:hover {
  border-color: var(--blue-bright);
  box-shadow: var(--shadow-strong);
}

.cv-tool-cta {
  color: var(--plat-200);
}

.cv-notes li {
  color: var(--plat-300);
}

.cv-notes strong,
.cv-faq dt {
  color: var(--plat-100);
}

.cv-faq dt::before {
  color: var(--gold-deep);
}

.cv-faq dd {
  color: var(--plat-300);
  border-bottom: 1px solid var(--line);
}

.cv-footer {
  background: rgba(255, 255, 255, 0.7);
  border-top: 1px solid var(--line);
}

.cv-footer-nav a,
.cv-footer-legal {
  color: var(--plat-400);
}

.cv-footer-nav a:hover {
  color: var(--gold-deep);
}

.cv-h1-sub {
  color: var(--plat-300);
}

/* ============================================================
   8. Deck odds tool (deck.html — lab.css .hero / .panel / etc.)
   ============================================================ */

/* Unified brand mark — the same navy chip used on the LP and converter,
   replacing the per-page card SVG so the mark is consistent site-wide. */
.brand-chip {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, #15304d, #0a1828 70%);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(8, 20, 35, 0.28);
}

.hero {
  background: linear-gradient(180deg, #f4f7fb 0%, #e9edf2 100%);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.hero::before,
.hero::after {
  display: none !important;
}

.hero-brand {
  color: var(--plat-100);
}

.hero-title {
  color: var(--plat-50);
}

.hero-sub {
  color: var(--plat-300);
}

.hero-input {
  background: #ffffff;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
}

.hero-input input {
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.hero-input input::placeholder {
  color: var(--plat-500);
}

.hero-sample {
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--plat-300);
}

.hero-sample:hover {
  background: var(--surface-blue);
  border-color: var(--blue-bright);
  color: var(--blue);
}

.hero-tagline {
  color: var(--plat-400);
}

.hero-status {
  color: var(--gold-deep);
}

.hero-steps li {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--plat-200);
  box-shadow: 0 1px 2px rgba(16, 33, 48, 0.05);
}

/* Panels & summary */
.panel-title h2 {
  color: var(--plat-100);
}

.summary-strip div {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.summary-strip span {
  color: var(--gold-deep);
}

/* Tabs: inactive light, active = white card with gold underline accent */
.condition-tab.active,
.picker-tab.active {
  background: #ffffff;
  border-color: var(--gold);
  border-bottom-color: var(--gold);
  color: var(--plat-50);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.condition-card {
  background: var(--surface);
  border: 1px solid var(--line);
}

.condition-title {
  color: var(--plat-100);
}

.disable-condition {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.selected-condition-cards {
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
}

.condition-token img,
.pick-thumb,
.deck-image-panel img {
  background: var(--surface-soft);
}

.quick-picks button {
  background: #ffffff;
  border: 1px solid var(--line);
}

.quick-picks button:hover {
  border-color: var(--blue-bright);
  background: var(--surface-blue);
}

.pick-name {
  color: var(--plat-200);
}

.pick-count,
.count-value {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: var(--gold-deep);
}

/* Results: standard cards light. The "combined" feature card becomes a warm
   gold-tinted highlight (instead of the dark navy panel) so it anchors the
   hierarchy while staying fully readable on the light canvas. */
.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
}

.result-value {
  color: var(--plat-50);
}

.result-meta,
.result-top span {
  color: var(--muted);
}

.result-card.combined {
  background: linear-gradient(165deg, #fff7e8 0%, #ffffff 70%);
  border-color: rgba(245, 158, 11, 0.55);
  color: var(--text);
}

.result-card.combined .result-value {
  color: var(--gold-deep);
}

.result-card.combined .result-meta,
.result-card.combined .result-top span,
.result-card.combined .result-top strong {
  color: var(--muted);
}

.result-card.combined .warning-text {
  color: var(--warning-bright);
}

.share-preview,
.share-preview figcaption {
  background: var(--surface-soft);
}

/* Card list & official search */
.official-search {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.official-card-button {
  background: #ffffff;
  border: 1px solid var(--line);
}

.official-card-button:hover {
  border-color: var(--blue-bright);
  background: var(--surface-blue);
}

.card-row {
  background: var(--surface);
}

.card-thumb {
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
}

.card-thumb span {
  color: var(--plat-400);
}

.card-main strong {
  color: var(--plat-100);
}

.deck-code-message a {
  color: var(--gold-deep);
}

/* Floating "Live Odds" dock (appears once a deck is loaded) */
.probability-dock {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 18px 50px rgba(16, 33, 48, 0.18), 0 0 0 1px rgba(16, 33, 48, 0.05);
}

.probability-dock.is-error {
  border-color: rgba(210, 59, 68, 0.55);
  box-shadow: 0 18px 50px rgba(16, 33, 48, 0.18), 0 0 0 1px rgba(210, 59, 68, 0.2);
}

.probability-dock-head strong {
  color: var(--plat-100);
}

.probability-dock-kicker {
  color: var(--gold-deep);
}

.probability-dock-jump {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--plat-200);
}

.probability-dock-jump:hover {
  border-color: var(--blue-bright);
  background: var(--surface-blue);
  color: var(--blue);
}

.probability-dock-item strong {
  color: var(--plat-100);
}

.probability-dock-item b {
  color: var(--gold-deep);
}

.probability-dock-item.is-combined {
  background: linear-gradient(180deg, #fff3da 0%, #fffaf0 100%);
  border-color: rgba(245, 158, 11, 0.55);
}

.probability-dock-item.is-combined .probability-dock-label,
.probability-dock-item.is-combined strong,
.probability-dock-item.is-combined small {
  color: #6b4708;
}

.probability-dock-item.is-combined b {
  color: var(--gold-deep);
}

.probability-dock-item.is-invalid {
  background: #fff4e6;
  border-color: rgba(180, 83, 9, 0.5);
}

/* ============================================================
   9. Penalty doc (penalty.html — .pdoc-* classes)
   ============================================================ */
.pdoc-hero {
  background: linear-gradient(180deg, #f4f7fb 0%, #e9edf2 100%);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.pdoc-hero::after {
  display: none !important;
}

.pdoc-brand {
  color: var(--plat-100);
}

.pdoc-brand:hover {
  color: var(--blue);
}

.pdoc-kicker {
  color: var(--gold-deep);
}

.pdoc-title {
  color: var(--plat-50);
}

.pdoc-sub {
  color: var(--plat-300);
}

.pdoc-sub strong {
  color: var(--plat-50);
}

.pdoc-tagline {
  color: var(--plat-400);
}

/* Decorative diagnosis orb scene → clean soft bubbles on light */
.pdoc-navi-visual::before {
  opacity: 0.45;
}

.pdoc-orb {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--po-ring);
  box-shadow: 0 1px 2px rgba(16, 33, 48, 0.05), 0 10px 24px rgba(16, 33, 48, 0.08);
}

.pdoc-orb--q .pdoc-orb-step {
  color: var(--gold-deep);
}

.pdoc-orb-result {
  background: linear-gradient(165deg, #ffffff 0%, #f6f9fc 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: var(--shadow-card);
}

.pdoc-orb-result > span {
  color: var(--gold-deep);
}

.pdoc-orb-result strong {
  color: var(--plat-50);
}

.pdoc-orb-result em {
  color: var(--muted);
}

.pdoc-steps li {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--plat-200);
  box-shadow: 0 1px 2px rgba(16, 33, 48, 0.05);
}

.pdoc-start-kicker {
  color: var(--gold-deep);
}

.pdoc-start {
  background: #ffffff;
  border-color: rgba(201, 124, 8, 0.34);
  box-shadow: var(--shadow-strong);
}

.pdoc-start-title,
.pdoc-cta-band h2 {
  color: var(--plat-50);
}

.pdoc-start-sub,
.pdoc-cta-band p {
  color: var(--plat-300);
}

.pdoc-start-note {
  color: var(--plat-400);
}

.pdoc-cta-band {
  background: linear-gradient(135deg, #ffffff 0%, #fff7e6 100%);
  border-color: rgba(201, 124, 8, 0.38);
  box-shadow: var(--shadow-card);
  color: var(--plat-50);
}

/* ============================================================
   10. Diagnosis wizard (penalty-navi.html — .penalty-* / .single-*)
   ============================================================ */
.penalty-onepage-header {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--text);
}

.penalty-back-link {
  color: var(--blue);
}

.penalty-back-link:hover {
  color: var(--blue-dark);
}

.penalty-onepage-title .section-kicker {
  color: var(--gold-deep);
}

.penalty-onepage-title h1 {
  color: var(--plat-50);
}

.penalty-onepage-title p {
  color: var(--muted);
}

.penalty-source-note {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--plat-300);
}

.stage-progress span {
  color: var(--gold-deep);
}

.stage-progress-bar {
  background: var(--surface-soft);
}

.question-kicker {
  color: var(--gold-deep);
}

/* Yes / No / Unknown answers — darken text so it reads on light tints */
.single-answer.yes {
  background: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.5);
  color: #0f766e;
}

.single-answer.no {
  background: rgba(210, 59, 68, 0.1);
  border-color: rgba(210, 59, 68, 0.5);
  color: #c12530;
}

.single-answer.unknown {
  background: rgba(17, 128, 212, 0.1);
  border-color: rgba(17, 128, 212, 0.5);
  color: var(--blue);
}

/* Choice orbs — keep the bubble shape but give a defined colored edge and a
   neutral drop shadow so they read as clear, tappable targets on light. */
.single-choice {
  background: radial-gradient(135% 135% at 32% 26%, #ffffff 0%, var(--orb-a) 62%, var(--orb-b) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px var(--ring),
    0 12px 28px -10px rgba(16, 33, 48, 0.26);
}

.single-choice:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 2px var(--ring),
    0 16px 34px -10px rgba(16, 33, 48, 0.32);
}

/* Wizard result screen */
.result-main dl div {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.result-headline span {
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  color: var(--plat-200);
}

.result-headline strong {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: var(--gold-deep);
}

.candidate-list strong,
.penalty-comparison > strong {
  color: var(--gold-deep);
}

.penalty-comparison section {
  background: #ffffff;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.penalty-share-preview {
  background: var(--surface-soft);
}

/* ============================================================
   11. Opponent-error one-pager (opponent-error.html — styles.css
   ships a dark monochrome "裏システム" theme; relight it while
   keeping a strong red caution accent. Scoped to .opponent-onepage-body
   so it matches styles.css specificity and wins on load order.)
   ============================================================ */
body.opponent-onepage-body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(15, 42, 68, 0.05) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

.opponent-onepage-body .penalty-onepage-header {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.opponent-onepage-body .penalty-back-link {
  color: var(--blue);
}

.opponent-onepage-body .penalty-onepage-title h1 {
  color: var(--plat-50);
}

.opponent-onepage-body .penalty-onepage-title p {
  color: var(--muted);
}

.opponent-onepage-body .penalty-onepage-title .section-kicker {
  color: var(--gold-deep);
}

.opponent-onepage-body .penalty-onepage-header .penalty-source-note {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--plat-300);
}

.opponent-onepage-body .penalty-stage {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.opponent-onepage-body .stage-progress-bar {
  background: var(--surface-soft);
}

.opponent-onepage-body .stage-progress-bar span {
  background: var(--holo);
}

.opponent-onepage-body .choice-icon {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.opponent-onepage-body .reverse-warning {
  background: #fbeaea;
  border-color: rgba(193, 37, 48, 0.5);
  color: #9f1722;
}

.opponent-onepage-body .reverse-warning span {
  color: #c0392b;
}

.opponent-onepage-body .penalty-onepage-disclaimer {
  color: var(--muted);
}

.opponent-onepage-body .result-headline span {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--plat-200);
}

.opponent-onepage-body .judge-memo-card {
  background: var(--surface-soft);
}

.opponent-onepage-body .candidate-links a {
  background: #ffffff;
  border-color: var(--line);
  color: var(--blue);
}

/* Body / secondary text → dark on light */
.opponent-onepage-body .stage-progress strong,
.opponent-onepage-body .single-question > p:not(.question-kicker),
.opponent-onepage-body .choice-copy > span,
.opponent-onepage-body .result-main p,
.opponent-onepage-body .candidate-list li,
.opponent-onepage-body .judge-memo-card li,
.opponent-onepage-body .copy-status {
  color: var(--muted);
}

/* Headings / emphasis → ink */
.opponent-onepage-body .stage-progress span,
.opponent-onepage-body .question-kicker,
.opponent-onepage-body .single-question h2,
.opponent-onepage-body .choice-copy strong,
.opponent-onepage-body .result-main h2,
.opponent-onepage-body .judge-memo-card h3,
.opponent-onepage-body .candidate-list strong {
  color: var(--plat-50);
}

/* Result / memo / candidate surfaces */
.opponent-onepage-body .result-main,
.opponent-onepage-body .judge-memo-card,
.opponent-onepage-body .memo-template,
.opponent-onepage-body .secondary-candidates {
  background: var(--surface);
  border-color: var(--line);
}

.opponent-onepage-body .result-main dl div {
  background: var(--surface-soft);
  border-color: var(--line);
}

.opponent-onepage-body .result-main dt {
  color: var(--muted);
}

.opponent-onepage-body .result-main dd,
.opponent-onepage-body .memo-template p {
  color: var(--plat-100);
}

.opponent-onepage-body .result-memo textarea {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--text);
}

.opponent-onepage-body .result-memo span {
  color: var(--muted);
}

.opponent-onepage-body .answer-trail span {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--plat-200);
}

.opponent-onepage-body .ghost-button {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--plat-200);
}

.opponent-onepage-body .ghost-button:hover:not(:disabled) {
  background: #fbeaea;
  border-color: #dc2626;
}

.opponent-onepage-body .candidate-links a {
  background: #ffffff;
  border-color: var(--line);
  color: var(--blue);
}

.opponent-onepage-body .candidate-links a:hover {
  border-color: #dc2626;
}

/* Branch comparison spotlight — keep the red "escalation" emphasis on light */
.opponent-result-screen .opponent-branch-spotlight {
  background: #fdf0f0;
  border: 1px solid rgba(220, 38, 38, 0.35);
  box-shadow: var(--shadow-card);
}

.opponent-result-screen .branch-card.is-base {
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.opponent-result-screen .branch-card.is-base span {
  background: #ffffff;
  color: var(--plat-200);
}

.opponent-result-screen .branch-card.is-base strong,
.opponent-result-screen .branch-card.is-base b,
.opponent-result-screen .branch-card.is-base em {
  color: var(--plat-50);
}

.opponent-result-screen .branch-card.is-base p {
  color: var(--muted);
}

.opponent-result-screen .branch-card.is-upgrade {
  background: #fdecec;
  border: 2px solid #dc2626;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18), 0 10px 28px rgba(220, 38, 38, 0.14);
}

.opponent-result-screen .branch-card.is-upgrade span {
  background: #dc2626;
  color: #ffffff;
}

.opponent-result-screen .branch-card.is-upgrade strong,
.opponent-result-screen .branch-card.is-upgrade b,
.opponent-result-screen .branch-card.is-upgrade em {
  color: #7f1d1d;
}

.opponent-result-screen .branch-card.is-upgrade p {
  color: #9f3a3a;
}

.opponent-onepage-body .stage-progress-bar {
  background: var(--surface-soft);
}