/* sim-options.css — 3 commercial variants of the P3 simulation.
   Built on ENTIA tokens. Each option is self-contained under .opt-<x>. */

.simopt { --pos: var(--entia-primary); --pos-soft: var(--entia-primary-soft); --pos-line: var(--entia-primary-line); --pos-tint: var(--entia-primary-tint); --pos-glow: var(--entia-primary-glow);
  --neg: var(--entia-status-degraded); }
.simopt .card { background: var(--entia-bg-card); border: 1px solid var(--entia-border-subtle); border-radius: var(--entia-radius-xl); padding: 26px; }
.simopt .eyebrow { font-family: var(--entia-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pos-soft); display: inline-flex; align-items: center; gap: 9px; }
.simopt .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--pos); display: inline-block; flex: none; }
.simopt .so-title { font-size: 23px; font-weight: 600; color: var(--entia-text-primary); margin: 12px 0 0; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; max-width: 30ch; }
.simopt .so-sub { font-size: 14px; color: var(--entia-text-secondary); margin: 9px 0 0; line-height: 1.55; max-width: 62ch; }

/* shared mode toggle */
.so-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--entia-border-subtle); border-radius: 999px; background: var(--entia-bg-overlay); margin-top: 20px; }
.so-toggle button { font-family: var(--entia-font-body); font-size: 13px; font-weight: 500; padding: 8px 16px; border: none; border-radius: 999px; background: none; color: var(--entia-text-tertiary); cursor: pointer; transition: .25s; display: inline-flex; align-items: center; gap: 7px; }
.so-toggle button .tdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.so-toggle button.on.now { background: rgba(249,115,22,.12); color: var(--neg); }
.so-toggle button.on.entia { background: var(--pos-tint); color: var(--pos-soft); box-shadow: 0 0 14px -4px var(--pos-glow); }
.so-cap { margin-top: 18px; font-size: 14.5px; line-height: 1.5; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.so-cap .ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; }
.so-cap.now .ic { color: var(--neg); border: 1px solid rgba(249,115,22,.3); }
.so-cap.entia .ic { color: var(--pos-soft); border: 1px solid var(--pos-line); }
.so-cap b { color: var(--entia-text-primary); font-weight: 600; }
.so-foot { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--entia-border-subtle); display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.so-method { font-family: var(--entia-font-mono); font-size: 11px; color: var(--entia-text-tertiary); }
.so-method a { color: var(--pos-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.so-method a:hover { text-shadow: 0 0 10px var(--pos-glow); }
.so-cta { font-family: var(--entia-font-body); font-weight: 600; font-size: 13px; color: var(--pos-soft); background: var(--pos-tint); border: 1px solid var(--pos-line); border-radius: 8px; padding: 9px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .2s; }
.so-cta:hover { box-shadow: 0 0 16px -4px var(--pos-glow); }
.mono { font-family: var(--entia-font-mono); font-variant-numeric: tabular-nums; }

/* ══════ OPTION A — AI CHAT ══════ */
.optA .chat { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.optA .crow { display: flex; gap: 12px; align-items: flex-start; }
.optA .crow.me { flex-direction: row-reverse; }
.optA .cav { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--entia-border-subtle); background: var(--entia-bg-overlay); color: var(--entia-text-secondary); }
.optA .cav.ai { border-color: var(--pos-line); color: var(--pos-soft); background: var(--pos-tint); }
.optA .bubble { max-width: 78%; padding: 14px 17px; border-radius: 14px; font-size: 15px; line-height: 1.5; border: 1px solid var(--entia-border-subtle); background: var(--entia-bg-overlay); color: var(--entia-text-primary); }
.optA .crow.me .bubble { border-radius: 14px 14px 4px 14px; background: var(--entia-bg-elevated); }
.optA .crow.ai .bubble { border-radius: 14px 14px 14px 4px; }
.optA .bubble.now { color: var(--entia-text-secondary); }
.optA .bubble.entia { border-color: var(--pos-line); background: linear-gradient(180deg, var(--pos-tint), transparent 120%); }
.optA .bubble .nm { color: var(--entia-text-primary); font-weight: 600; }
.optA .bubble .typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.optA .bubble .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--entia-text-faint); animation: soBlink 1.2s infinite; }
.optA .bubble .typing i:nth-child(2) { animation-delay: .2s; }
.optA .bubble .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes soBlink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
.optA .cite { margin-top: 11px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--entia-font-mono); font-size: 11.5px; color: var(--pos-soft); border: 1px solid var(--pos-line); border-radius: 7px; padding: 6px 11px; background: var(--entia-bg-base); white-space: nowrap; }
.optA .cite .seal { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 7px var(--pos-glow); }
.optA .verdict { margin-top: 10px; font-family: var(--entia-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.optA .verdict.now { color: var(--neg); }
.optA .verdict.entia { color: var(--pos-soft); }
.so-fade { animation: soFade .4s ease; }
@keyframes soFade { from { transform: translateY(6px); } to { transform: none; } }

/* ══════ OPTION B — LEAD JOURNEY ══════ */
.optB .journey { margin-top: 24px; display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 8px; }
.optB .jnode { padding: 16px; border-radius: 12px; border: 1px solid var(--entia-border-subtle); background: var(--entia-bg-overlay); text-align: center; }
.optB .jnode .jt { font-size: 14px; font-weight: 600; color: var(--entia-text-primary); }
.optB .jnode .js { font-family: var(--entia-font-mono); font-size: 11px; color: var(--entia-text-tertiary); margin-top: 4px; }
.optB .jnode .ji { width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--entia-border-subtle); color: var(--entia-text-secondary); background: var(--entia-bg-base); }
.optB .dest { display: flex; flex-direction: column; gap: 10px; }
.optB .dnode { padding: 13px 15px; border-radius: 11px; border: 1px solid var(--entia-border-subtle); background: var(--entia-bg-overlay); display: flex; align-items: center; gap: 11px; opacity: .4; transition: .4s; }
.optB .dnode.win { opacity: 1; border-color: var(--pos-line); background: var(--pos-tint); box-shadow: 0 0 22px -8px var(--pos-glow); }
.optB .dnode.lose { opacity: 1; border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.07); }
.optB .dnode .di { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--entia-border-subtle); background: var(--entia-bg-base); color: var(--entia-text-secondary); }
.optB .dnode.win .di { color: var(--pos-soft); border-color: var(--pos-line); }
.optB .dnode.lose .di { color: var(--neg); border-color: rgba(249,115,22,.3); }
.optB .dnode .dt { font-size: 14px; font-weight: 600; color: var(--entia-text-primary); }
.optB .dnode .ds { font-family: var(--entia-font-mono); font-size: 10.5px; color: var(--entia-text-tertiary); margin-top: 2px; }
.optB .dnode .dtag { margin-left: auto; font-family: var(--entia-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; }
.optB .dnode.win .dtag { color: var(--pos-soft); border: 1px solid var(--pos-line); }
.optB .dnode.lose .dtag { color: var(--neg); border: 1px solid rgba(249,115,22,.3); }
.optB .route { position: relative; height: 100%; min-height: 90px; display: grid; place-items: center; }
.optB .route svg { width: 60px; height: 110px; overflow: visible; }
.optB .route .rpath { stroke: var(--entia-border-medium); stroke-width: 2; fill: none; }
.optB .route .rlive { stroke-width: 2.5; fill: none; stroke-dasharray: 5 5; animation: soDash 1s linear infinite; }
@keyframes soDash { to { stroke-dashoffset: -20; } }
.optB .counter { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.optB .cstat { flex: 1; min-width: 150px; padding: 14px 16px; border-radius: 11px; border: 1px solid var(--entia-border-subtle); background: var(--entia-bg-overlay); }
.optB .cstat .cn { font-family: var(--entia-font-mono); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.optB .cstat .cn.pos { color: var(--pos-soft); }
.optB .cstat .cn.neg { color: var(--neg); }
.optB .cstat .cl { font-family: var(--entia-font-mono); font-size: 10.5px; color: var(--entia-text-tertiary); margin-top: 5px; letter-spacing: .04em; }

/* ══════ OPTION C — RECOMMENDATION SHARE ══════ */
.optC .qline { margin-top: 22px; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-radius: 12px 12px 12px 4px; background: var(--entia-bg-overlay); border: 1px solid var(--entia-border-subtle); }
.optC .qline .qav { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--entia-border-subtle); background: var(--entia-bg-base); color: var(--entia-text-secondary); }
.optC .qline .qt { font-size: 15px; color: var(--entia-text-primary); }
.optC .bars { margin-top: 20px; display: flex; flex-direction: column; gap: 13px; }
.optC .bar { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 14px; }
.optC .bar .bname { font-size: 13.5px; color: var(--entia-text-secondary); display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.optC .bar.you .bname { color: var(--entia-text-primary); font-weight: 600; }
.optC .bar .brank { font-family: var(--entia-font-mono); font-size: 11px; color: var(--entia-text-faint); width: 16px; flex: none; }
.optC .bar .btrack { height: 26px; border-radius: 6px; background: var(--entia-bg-overlay); border: 1px solid var(--entia-border-subtle); overflow: hidden; position: relative; display: flex; align-items: stretch; }
.optC .bar .bfill { align-self: stretch; min-height: 24px; border-radius: 5px; background: var(--entia-text-faint); transition: width .9s cubic-bezier(.22,.61,.36,1), background .4s; }
.optC .bar.you .bfill { background: var(--pos); box-shadow: 0 0 16px -3px var(--pos-glow); }
.optC .bar .bpct { font-family: var(--entia-font-mono); font-size: 14px; font-weight: 600; text-align: right; color: var(--entia-text-secondary); }
.optC .bar.you .bpct { color: var(--pos-soft); }
.optC .badge1 { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; font-family: var(--entia-font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pos-soft); border: 1px solid var(--pos-line); border-radius: 5px; padding: 2px 7px; }

@media (max-width: 720px) {
  .optB .journey { grid-template-columns: 1fr; gap: 12px; }
  .optB .route { min-height: 50px; transform: rotate(90deg); }
  .optC .bar { grid-template-columns: 110px 1fr 44px; gap: 8px; }
  .optA .bubble { max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .optA .bubble .typing i, .optB .route .rlive { animation: none; }
}