/* AI Opportunity Map demo. Twelve ideas become a field, the field becomes three decisions. */
.om-h {min-height:1.05em;font:400 clamp(2.3rem,4.6vw,4.8rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.om-w {display:inline-block;animation:om-word .7s var(--ease) both}
@keyframes om-word {from{opacity:0;filter:blur(6px);transform:translateY(.18em)}to{opacity:1;filter:none;transform:none}}

.om-stage {position:relative;display:grid;grid-template-columns:minmax(17rem,.72fr) minmax(0,1.28fr);gap:clamp(4rem,8vw,9rem);margin-top:clamp(2.6rem,4.5vw,4rem);padding-top:clamp(2rem,3vw,2.6rem);border-top:1px solid var(--rule)}

/* The field: two hairline axes, quiet words, dots placed by impact (up) and effort (right). */
.om-map {min-width:0}
.om-field {position:relative;height:clamp(24rem,36vw,33rem);margin-top:.6rem}
.om-axis {position:absolute;left:0;bottom:0;background:var(--rule);transition:transform 1s var(--ease)}
.om-axis-y {top:0;width:1px;transform-origin:50% 100%}
.om-axis-x {right:0;height:1px;transform-origin:0 50%}
.om-ax {position:absolute;font-size:.8125rem;line-height:1;color:var(--ink-2);transition:opacity .6s .5s}
.om-ax-i {left:-1.55rem;bottom:0;writing-mode:vertical-rl;transform:rotate(180deg)}
.om-ax-e {right:0;bottom:-1.7rem}

.om-zone {position:absolute;background:var(--oxide);transition:transform .9s var(--ease)}
.om-zone-v {left:46%;top:35%;width:1px;height:7%;transform-origin:50% 100%}
.om-zone-h {left:39%;top:42%;width:7%;height:1px;transform-origin:100% 50%}
.om-zone-w {position:absolute;right:calc(54% + .55rem);top:calc(42% - 1.45rem);font-size:.8125rem;line-height:1;color:var(--oxide);white-space:nowrap;transition:opacity .6s .4s,transform .6s .4s var(--ease)}

.om-idea {position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:1;width:0;height:0;padding:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer;transition:transform 1.15s var(--ease),opacity .5s}
.om-idea:focus-visible {outline:none}
.om-idea:focus-visible .om-l {outline:1px solid var(--oxide);outline-offset:4px}
.om-dot {position:absolute;left:-5px;top:-5px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--ink);transition:opacity .4s,transform .5s var(--ease),background-color .3s}
.om-idea[data-v="start"] .om-dot {background:var(--oxide)}
.om-idea[data-v="leave"] .om-dot {background:none;border:1px solid var(--ink-2)}
.om-l {position:absolute;left:15px;top:0;transform:translateY(-50%);display:block;white-space:nowrap;font-size:clamp(.8125rem,1.05vw,.9375rem);line-height:1.3;text-align:left;transition:color .3s}
.om-idea[data-side="l"] .om-l {left:auto;right:15px;text-align:right}
.om-s {display:none}
.om-d {position:absolute;left:0;top:100%;font-size:.8125rem;color:var(--ink-2);opacity:0;transition:opacity .4s}
.om-num {position:absolute;right:13px;top:0;transform:translateY(-52%);font:500 1.7rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--oxide);font-variant-numeric:tabular-nums;transition:opacity .4s,transform .5s var(--ease)}
.om-idea[data-side="l"] .om-num {right:auto;left:13px}
.om-idea:hover .om-l,.om-idea.is-focus .om-l {color:var(--oxide)}
.om-idea.is-focus .om-dot {transform:scale(1.4)}

/* Verdict words: colour, no badges. */
.om-v {font-weight:500}
.om-v[data-v="start"] {color:var(--oxide)}
.om-v[data-v="defer"] {color:var(--ink)}
.om-v[data-v="leave"] {color:var(--ink-2)}

/* The decision: ranked list, then everything else in one line each. */
.om-rank {list-style:none;margin:0;padding:0}
.om-rank li {display:grid;grid-template-columns:2.4rem minmax(0,1fr);align-items:center;padding:.9rem 0;border-top:1px solid var(--rule);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.om-rank li:first-child {border-top:0;padding-top:0}
.om-rn {font:500 2.6rem/.82 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--oxide);font-variant-numeric:tabular-nums}
.om-rt button {padding:0;border:0;background:none;font:400 1.3rem/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.03em;color:var(--ink);text-align:left;cursor:pointer;transition:color .3s}
.om-rt button:hover,.om-rank li.is-focus .om-rt button {color:var(--oxide)}
.om-rm {margin-top:.3rem;font-size:.8125rem;color:var(--ink-2)}
.om-rest {margin-top:.4rem;padding-top:1.1rem;border-top:1px solid var(--rule);display:grid;gap:.55rem;font-size:.875rem;line-height:1.6;color:var(--ink-2);transition:opacity .7s var(--ease)}
.om-rest .om-v {margin-right:.35rem}
.om-rest button,.om-rt button {text-decoration:none}
.om-rest button {padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:color .25s,text-decoration-color .25s}
.om-rest button:hover,.om-rest button.is-focus {color:var(--ink);text-decoration-color:var(--oxide)}
.om button:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}
.om .om-idea:focus-visible {outline:none}

/* The reasoning behind whichever idea is in focus. */
.om-note {margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--rule);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.om-nv {display:flex;gap:.7rem;font-size:.8125rem;color:var(--ink-2)}
.om-nt {margin-top:.3rem;font:400 1.3rem/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.03em;color:var(--ink)}
.om-nq {margin-top:.55rem;font:400 1.08rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);max-width:38ch}
.om-nd {margin:.9rem 0 0}
.om-nd div {display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:.45rem 0;border-top:1px solid var(--rule)}
.om-nd dt {font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.om-nd dd {margin:0;font-size:.875rem;line-height:1.5;color:var(--ink)}

.om-wires {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.om-wires path {fill:none;stroke:var(--oxide);stroke-width:1;opacity:.5;transition:stroke-dashoffset 1s var(--ease),opacity .3s}
.om-wires path.is-focus {opacity:1}

/* ---- Phases. Without a phase (no script, or finished) the markup shows the decision. ---- */
.om:not([data-phase]) .om-idea:not([data-v="start"]),
.om[data-phase="zone"] .om-idea:not([data-v="start"]),
.om[data-phase="ranked"] .om-idea:not([data-v="start"]),
.om[data-phase="done"] .om-idea:not([data-v="start"]) {opacity:.48}
.om.om .om-idea:not([data-v="start"]):hover,.om.om .om-idea.is-focus,.om.om .om-idea:focus-visible {opacity:1}

.om[data-phase] .om-idea.is-pre {opacity:0}
.om-idea.is-list .om-dot {opacity:0;transform:scale(.2)}
.om-idea.is-list .om-d {opacity:1}
.om[data-phase="list"] .om-axis-y {transform:scaleY(0)}
.om[data-phase="list"] .om-axis-x {transform:scaleX(0)}
.om[data-phase="list"] .om-ax {opacity:0;transition-delay:0s}
.om[data-phase="list"] .om-zone-v,.om[data-phase="field"] .om-zone-v {transform:scaleY(0)}
.om[data-phase="list"] .om-zone-h,.om[data-phase="field"] .om-zone-h {transform:scaleX(0)}
.om[data-phase="list"] .om-zone-w,.om[data-phase="field"] .om-zone-w {opacity:0;transform:translateY(4px)}
.om[data-phase] .om-idea:not(.is-ranked) .om-num {opacity:0;transform:translateY(-52%) scale(.6)}
.om[data-phase] .om-rank li:not(.is-on) {opacity:0;transform:translateY(10px)}
.om[data-phase] .om-rest:not(.is-on) {opacity:0}
.om[data-phase] .om-note:not(.is-on) {opacity:0;transform:translateY(8px)}
.om[data-phase="list"] .om-side,.om[data-phase="field"] .om-side {pointer-events:none}

@media(max-width:900px){
 .om-stage {grid-template-columns:1fr;gap:2.6rem}
 .om-map {display:contents}
 .om-field {order:-1;margin-top:0}
 .om-ax-i {left:.5rem}
 .om-wires {display:none}
 .om-field {height:clamp(19rem,70vw,24rem)}
 .om-t {display:none}
 .om-s {display:inline}
 .om-l {font-size:.8125rem}
 .om-idea:not([data-v="start"]) .om-l {opacity:0;transition:opacity .4s}
 .om-idea.is-list .om-l {opacity:1}
 .om-idea:not([data-v="start"]).is-focus .om-l {opacity:1}
 .om-idea::after {content:'';position:absolute;left:-18px;top:-18px;width:36px;height:36px}
 .om-num {font-size:1.4rem}
}