/* tiun atlas v2: journey map. One framed map: who and goal, phases, actions, the mood curve, pains, screens. Needs base.css. */
.sheet { position: relative; min-width: 1180px; max-width: 1760px; margin: 0 auto; padding-top: 20px; }
.jmap { --jlabel: 108px; background: var(--sheet); border: 3px solid var(--ink); }

/* ---- who, scenario, goal */
.jwho { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 3px solid var(--ink); }
.jwho__icon { flex: none; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.jwho__id { flex: none; }
.jwho__t { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 640; letter-spacing: -0.02em; }
.jwho__s { margin: 3px 0 0; color: var(--ink-2); font-size: 15px; }
.jwho__goal { margin: 0 0 0 auto; max-width: 46ch; padding-left: 20px; border-left: 1.5px solid var(--ink); font-size: 16px; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.jwho__k { display: block; font-size: 13px; font-weight: 640; color: var(--ink-2); }

/* ---- the grid: one column per phase, one row per lane */
.jgrid { display: grid; }
.jcell { min-width: 0; padding: 10px 10px; border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); }
.jcell[style*="grid-row: 1"] { border-top: 0; }
.jlabel { position: relative; border-left: 0; padding: 12px 10px 12px 16px; }
.jlabel__t { display: block; font-size: 14px; font-weight: 640; }
.jlabel__s { display: block; font-size: 13px; color: var(--ink-2); }
.jphase { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px 10px; background: var(--ink); color: #fff; border-left-color: #5a6072; }
.jlabel--corner { background: var(--ink); }
.jphase__t { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 620; letter-spacing: -0.01em; }
.jphase__s { margin: 0; font-size: 13px; color: #c9cedb; white-space: nowrap; }

.num { flex: none; min-width: 22px; height: 22px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 11px; font-size: 12px; font-weight: 660; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); background: var(--sheet); }
.num--pain, .num--neg { background: var(--pain-line); color: #fff; box-shadow: none; }
.num--pos { background: var(--gain-line); color: #fff; box-shadow: none; }
.num--zero { background: var(--ink); color: #fff; box-shadow: none; }
.num--none { box-shadow: none; outline: 1.5px dashed var(--ink); outline-offset: -1.5px; }

.acts, .pains { margin: 0; padding: 0; list-style: none; column-width: 190px; column-gap: 14px; }
.acts li, .pains li { break-inside: avoid; }
.act, .pain { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 7px; background: transparent; text-align: left; font-size: 14px; line-height: 1.35; font-weight: 520; cursor: pointer; transition: background-color 140ms var(--ease), opacity 180ms var(--ease); }
.act__t { padding-top: 1px; }
.pain { color: var(--pain-ink); }
.act:hover, .pain:hover, .act.is-lit, .pain.is-lit { background: #fff1b8; }
.act.is-selected, .pain.is-selected { background: var(--job); }
.jnone { margin: 4px 6px; font-size: 13px; color: var(--ink-2); }
.jmap.has-sel .act:not(.is-lit):not(.is-selected), .jmap.has-sel .pain:not(.is-lit):not(.is-selected) { opacity: 0.72; }

/* ---- feeling lane */
.jfeelcell { height: 270px; padding: 0; }
.jlabel--feel { height: 270px; }
.jaxis { position: absolute; left: 16px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.jaxis--up { top: 82px; }
.jaxis--down { top: 178px; }
.jface { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; }
.jface__dot { fill: var(--ink-2); stroke: none; }
.jfeel { position: relative; height: 270px; padding: 0; border: 0; pointer-events: none; }
.jv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jv-zero { stroke: #8f96a6; stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.jv-area--pos { fill: var(--gain); opacity: 0.55; }
.jv-area--neg { fill: var(--pain); opacity: 0.5; }
.jv-band { fill: #14161c; opacity: 0.13; }
.jv-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jv-leader { stroke: var(--ink); stroke-width: 1.3; }
.jv-bubble rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.3; }
.jv-bubble text { font-size: 13px; font-weight: 560; fill: var(--ink); }
.jv-bubble--low rect { fill: var(--pain-line); stroke: var(--pain-line); }
.jv-bubble--low text { fill: #fff; font-weight: 620; }
.jv-bubble--low .jv-leader { stroke: var(--pain-line); stroke-width: 2; }
.jv-bubble { transition: opacity 180ms var(--ease); }
.jmap.has-sel .jv-bubble:not(.is-lit):not(.is-selected) { opacity: 0.6; }
.jv-guide { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.55; }
.jv-loop { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linecap: round; }
.jv-head { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.dot { position: absolute; z-index: 2; width: 26px; height: 26px; margin: 0; padding: 0; translate: -50% -50%; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 660; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--sheet); cursor: pointer; pointer-events: auto; transition: scale 160ms var(--ease), box-shadow 160ms var(--ease); }
.dot--neg { background: var(--pain-line); }
.dot--pos { background: var(--gain-line); }
.dot--none { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 3px var(--sheet); outline: 1.5px dashed var(--ink); outline-offset: -1.5px; }
.dot:hover, .dot.is-lit { scale: 1.22; }
.dot.is-selected { scale: 1.22; box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5.5px var(--ink); }
.dot.is-linked { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--ink-2); }

/* the one authored moment: the line draws itself across the phases and the steps land on it in order */
.jfeel.is-drawing .jv-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: jdraw 1100ms var(--ease) forwards; }
.jfeel.is-drawing .jv-area { animation: jfade 700ms 500ms var(--ease) backwards; }
.jfeel.is-drawing .dot { animation: jpop 420ms calc(var(--i) * 45ms) var(--ease) backwards; }
.jfeel.is-drawing .jv-bubbles { animation: jfade 500ms 800ms var(--ease) backwards; }
@keyframes jdraw { to { stroke-dashoffset: 0; } }
@keyframes jfade { from { opacity: 0; } }
@keyframes jpop { from { scale: 0; opacity: 0; } }

/* ---- screens lane: one frame per step, under its point on the curve */
.jscreens { padding: 12px 0; }
.thumbs { display: flex; justify-content: space-around; align-items: center; }
.thumb { position: relative; flex: none; width: min(84px, calc(100% / var(--n) - 8px)); aspect-ratio: 16 / 10; padding: 0; border: 1px solid #9aa1af; border-radius: 4px; background: var(--ground); overflow: hidden; cursor: pointer; transform-origin: 50% 100%; transition: scale 200ms var(--ease), box-shadow 200ms var(--ease), border-color 160ms var(--ease); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.thumb--none { border-style: dashed; display: grid; place-items: center; }
.thumb--none span { font-size: 11px; line-height: 1.1; color: var(--ink-2); text-align: center; overflow: hidden; overflow-wrap: anywhere; max-height: 100%; padding: 0 2px; }
.thumb:hover, .thumb.is-lit { scale: 2.3; z-index: 6; border-color: var(--ink); box-shadow: 0 2px 3px rgba(20, 22, 28, 0.14), 0 10px 22px -8px rgba(20, 22, 28, 0.45); }
.thumb--none:hover, .thumb--none.is-lit { scale: 1.25; }
.thumb.is-selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

/* ---- lowest points */
.jlow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 11px 20px; border-top: 3px solid var(--ink); }
.jlow__t { margin: 0; font-size: 17px; font-weight: 640; letter-spacing: -0.01em; }
.jlow__list { display: flex; flex-wrap: wrap; gap: 8px; }
.lowchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border: 1.5px solid var(--pain-line); border-radius: 18px; background: color-mix(in srgb, var(--pain) 30%, #fff); color: var(--pain-ink); font-size: 14px; text-align: left; cursor: pointer; transition: background-color 140ms var(--ease); }
.lowchip strong { font-weight: 620; }
.lowchip:hover, .lowchip.is-lit, .lowchip.is-selected { background: var(--pain); }
.jlow__link { margin-left: auto; color: var(--ink); font-size: 14px; font-weight: 560; text-decoration: underline; text-decoration-color: #9aa1af; text-underline-offset: 3px; }
.jlow__link:hover { text-decoration-color: var(--ink); }

.jfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; padding: 14px 4px 0; color: var(--ink-2); font-size: 14px; }
.jfoot__note { margin: 0; max-width: 86ch; }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.key li { display: inline-flex; align-items: center; gap: 7px; }
.keydot { width: 12px; height: 12px; border-radius: 50%; }
.keydot--pos { background: var(--gain-line); } .keydot--neg { background: var(--pain-line); } .keydot--zero { background: var(--ink); }
.keydot--none { outline: 1.5px dashed var(--ink); outline-offset: -1.5px; }
.keyband { width: 8px; height: 18px; border-radius: 4px; background: rgba(20, 22, 28, 0.16); }

/* ---- step card */
.card--step { width: 408px; max-height: min(660px, calc(100vh - 80px)); }
.card--step .card__title { display: flex; align-items: flex-start; gap: 9px; font-size: 19px; }
.card--step .card__title .num { margin-top: 1px; }
.card--step .card__meta { margin-top: 5px; }
.stepnavs { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.stepnav { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); cursor: pointer; transition: background-color 140ms var(--ease), border-color 140ms var(--ease); }
.stepnav:hover:not(:disabled) { background: var(--ground); border-color: #aeb5c2; }
.stepnav:disabled { opacity: 0.35; cursor: default; }
.stepnavs__hint { margin-left: 4px; font-size: 13px; color: var(--ink-2); }
.shot { margin: 14px 0 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--ground); }
.shot figcaption { margin-top: 5px; font-size: 13px; color: var(--ink-2); }
.shot--none { padding: 12px 14px; border: 1.5px dashed #9aa1af; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.shot--none strong { display: block; color: var(--ink); font-weight: 600; }
.card__text--sm { margin-top: 6px; font-size: 15px; }
.card--step .card__sub { margin-top: 16px; padding-top: 12px; }
.linkbtn--step { align-items: flex-start; }
.linkbtn--step strong { display: block; font-weight: 600; }
.linkbtn__why { display: block; color: var(--ink-2); font-weight: 400; }
.card__src > div { display: grid; gap: 10px; margin-top: 8px; }
.card__src .card__line { margin: 0; }
.srcrow p:last-child { margin: 2px 0 0; }

/* ---- phones: the same steps as a list by phase */
.jlist { display: none; }
@media (max-width: 700px) {
  .sheet { min-width: 0; padding-top: 16px; }
  .jgrid { display: none; }
  .jlist { display: block; }
  .jwho { flex-wrap: wrap; padding: 14px 16px; }
  .jwho__id { flex: 1; min-width: 0; }
  .jwho__t { font-size: 22px; }
  .jwho__goal { margin: 0; padding: 12px 0 0; border-left: 0; border-top: 1.5px solid var(--ink); max-width: none; width: 100%; }
  .jlist section { border-top: 1.5px solid var(--ink); }
  .jlist section:first-child { border-top: 0; }
  .jlist .jphase__t { padding: 9px 16px; background: var(--ink); color: #fff; }
  .jsteps { margin: 0; padding: 6px 8px 10px; list-style: none; }
  .jstep { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 15px; line-height: 1.35; cursor: pointer; }
  .jstep.is-selected { background: var(--job); }
  .jstep__b { display: grid; gap: 2px; }
  .jstep__b strong { font-weight: 600; }
  .jstep__feel { color: var(--ink-2); }
  .jstep__pain { color: var(--pain-ink); }
  .jlow { padding: 14px 16px; }
  .jlow__link { margin-left: 0; }
  .jfoot { display: block; }
  .jfoot .key { display: none; }
  .card--step { width: auto; max-height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
  .dot, .thumb, .act, .pain, .jv-bubble, .lowchip, .stepnav { transition-duration: 1ms; }
  .thumb:hover, .thumb.is-lit { scale: 1.6; }
}

/* during the tour the bar sits at the bottom, so the step card stops above it */
body.is-touring .card--step { max-height: min(660px, calc(100vh - 322px)); }