/* The folded first answer and Plan tab (8 November 2026; web/journey_fold.py). On the shell's tokens: every colour is a
   var(--r-*), no hex is typed here. Phone first (375px), then a two-column top. Class prefix df-. Motion only where it
   explains a change: the Plimsoll mark is the shell's float-or-sink, and a chosen way's path rises when its row opens.
   Nothing loops; under prefers-reduced-motion nothing moves. Text is 17px or more; 13px only inside a drawing's axis. */

.df-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;background:var(--r-surface);border-top:4px solid var(--r-ink);padding:14px 16px;min-width:0}
.df-top[data-tone="breaks"]{border-top-color:var(--r-breach)}
.df-top[data-tone="holds"]{border-top-color:var(--r-holds)}
.df-read{display:flex;flex-direction:column;gap:10px;min-width:0}
.df-top p{margin:0}
.df-sentence{font-size:19px;line-height:1.3}
.df-tightest{font-size:17px;line-height:1.35;font-weight:500}
.df-note{color:var(--r-muted);font-size:17px;line-height:1.35}
.df-margin{font-size:17px;line-height:1.35}
.df-eyebrow{display:block;font:700 13px/1.2 var(--r-font);letter-spacing:.08em;text-transform:uppercase;color:var(--r-muted);margin-bottom:4px}
.df-ask{background:var(--r-tint);box-shadow:inset 4px 0 0 var(--r-anchor);padding:10px 12px;font-size:17px;line-height:1.35;display:flex;flex-direction:column;gap:4px;min-width:0}
.df-ask[data-not-priced]{box-shadow:none;outline:2px dashed var(--r-muted);outline-offset:-2px}
.df-ask-what strong{display:block}
.df-ask-then{color:var(--r-ink)}
.df-clear{font-size:17px;line-height:1.35}
.df-figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.df-kept{font-size:17px;line-height:1.35}
.df-kept ul,.df-assumed ul{margin:4px 0 0;padding-left:20px}
.df-assumed{font-size:17px;line-height:1.35;color:var(--r-ink);border-top:1px solid var(--r-rule);padding-top:10px}
.df-assumed .r-stamp{margin-top:4px}

/* A calm no-fix answer: the page's own ink, no alarm around it. */
.df-nofix .yd-nofix{gap:6px;font-size:17px;line-height:1.35}
.df-nofix .yd-nofix p{margin:0}

/* The drawings: one scale per comparison. */
.df-path,.df-time,.df-walk{display:block;width:100%;height:auto;overflow:visible}
.df-min{stroke:var(--r-ink);stroke-width:3}
.df-line{stroke:var(--r-ink);stroke-width:2.5}
.df-was{stroke:var(--r-muted);stroke-width:1.5;stroke-dasharray:4 3}
.df-pt{fill:var(--r-ink);stroke:none}
.df-tight{fill:var(--r-surface);stroke:var(--r-ink);stroke-width:2.5}
.df-under{fill:var(--r-breach)}
.df-tile{fill:var(--r-signal)}
.df-tick{font:400 13px/1 var(--r-font);fill:var(--r-muted)}
.df-axis{stroke:var(--r-ink);stroke-width:2}
.df-in{fill:var(--r-anchor)}
.df-out{fill:var(--r-ink)}
.df-walkline{display:flex;flex-direction:column;gap:6px;min-width:0}
.df-walkline .rd-table th,.df-walkline .rd-table td{padding:6px 4px}
.df-walk-hold{stroke:var(--r-ink);stroke-width:3}
.df-walk-past{stroke:var(--r-muted);stroke-width:3;stroke-dasharray:4 4}
.df-stop-now{fill:var(--r-surface);stroke:var(--r-ink);stroke-width:2}
.df-stop-ask{fill:var(--r-anchor)}
.df-stop-walk{fill:var(--r-breach)}
.df-stop-past{fill:none;stroke:var(--r-breach);stroke-width:2.5}

/* The ways: the best few, and the rest opening. Words first, colour second. */
.df-fixes,.df-ways{display:flex;flex-direction:column;gap:12px;min-width:0}
.df-ways h2{margin:0}
.df-ways>p{margin:0}
.df-ways-table{width:100%;background:var(--r-surface)}
.df-ways-table td,.df-ways-table th{font-size:17px}
.df-way-yes>th{box-shadow:inset 4px 0 0 var(--r-anchor);padding-left:12px}
.df-way-plan>th{box-shadow:inset 4px 0 0 var(--r-ink);padding-left:12px}
.df-way-no{color:var(--r-muted);background:var(--r-page)}
.df-way-no .yd-verdict{color:var(--r-muted)}
.df-way-no>th{box-shadow:inset 4px 0 0 var(--r-rule);padding-left:12px}
.df-way-no strong{font-weight:500}
[data-not-priced]>th{box-shadow:none;outline:2px dashed var(--r-muted);outline-offset:-2px;padding-left:12px}
.df-way-more>td{padding:0 8px 10px}
.df-rest>summary,[data-way-more]>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--r-anchor)}
.df-rest>summary::-webkit-details-marker,[data-way-more]>summary::-webkit-details-marker{display:none}
.df-rest>summary::after,[data-way-more]>summary::after{content:"\203A";margin-left:8px;display:inline-block;transition:transform 180ms var(--r-ease)}
.df-rest[open]>summary::after,[data-way-more][open]>summary::after{transform:rotate(90deg)}
.df-rest{min-width:0}

/* Each section folds and opens with a tap, with no script. */
.df-sec{background:var(--r-surface);border-top:3px solid var(--r-ink);min-width:0}
.df-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 16px}
.df-sec>summary::-webkit-details-marker{display:none}
.df-sec>summary:focus-visible,.df-rest>summary:focus-visible,[data-way-more]>summary:focus-visible{outline:3px solid var(--r-signal);outline-offset:-3px}
.df-h{margin:0;font-size:19px;line-height:1.25}
.df-tog{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;box-shadow:inset 0 0 0 2px var(--r-ink);font-weight:700}
.df-c,.df-sec[open]>summary .df-o{display:none}
.df-sec[open]>summary .df-c{display:inline}
.df-body{padding:0 16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.df-body p{margin:0}
.df-body .rd-cya{border-top:0}
.df-body .rd-cya>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.df-body .yd-say-side:first-child>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.df-body .yd-say-msg{padding:12px 0 0}

/* A chosen way moving the path: it rises to where the change puts it when its row opens (no script: details open). */
.df-lifts{transform-box:view-box}
details[open] .df-lifts{animation:dfLift 420ms var(--r-ease) 1 both}
@keyframes dfLift{from{transform:translateY(var(--df-lift,0));opacity:.25}to{transform:none;opacity:1}}
.df-sec[open]>.df-body,.df-rest[open]>table,[data-way-more][open]>.df-figure{animation:dfOpen 180ms var(--r-ease) 1 both}
@keyframes dfOpen{from{opacity:0}to{opacity:1}}

@media (max-width:767px){
  .df-ways-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .df-ways-table,.df-ways-table tbody,.df-ways-table tr,.df-ways-table th,.df-ways-table td{display:block}
  .df-ways-table caption{display:block;width:auto}
  .df-ways-table>tbody>tr[data-yd-way]{border-top:1px solid var(--r-rule);padding:8px 0}
  .df-ways-table>tbody>tr[data-yd-way]>th,.df-ways-table>tbody>tr[data-yd-way]>td{border-top:0;padding:3px 0 3px 12px}
  .df-ways-table>tbody>tr[data-yd-way]>td{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:8px;align-items:baseline}
  .df-ways-table>tbody>tr[data-yd-way]>td::before{content:attr(data-label);color:var(--r-muted);font-size:17px}
  .df-v{min-width:0;overflow-wrap:anywhere}
  .df-way-more>td{padding:0 0 8px 12px;border-top:0}
  .df-way-more .rd-table,.df-way-more .rd-table tbody{display:table;width:100%}
  .df-way-more .rd-table tbody{display:table-row-group}
  .df-way-more .rd-table thead{display:table-header-group;position:static;width:auto;height:auto;clip:auto}
  .df-way-more .rd-table tr{display:table-row}
  .df-way-more .rd-table th,.df-way-more .rd-table td{display:table-cell;padding:6px 4px}
  .df-way-more .rd-table caption{display:table-caption}
  .df-way-more .rd-table td::before{content:none}
}
@media (min-width:768px){
  .df-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 32px;padding:20px 24px}
  .df-read{grid-column:1}
  .df-figure{grid-column:2;grid-row:1}
  .df-margin,.df-note,.df-kept,.df-assumed{grid-column:1 / -1}
  .df-read .df-margin,.df-read .df-note{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  details[open] .df-lifts{animation:none}
  .df-sec[open]>.df-body,.df-rest[open]>table,[data-way-more][open]>.df-figure{animation:none}
  .df-rest>summary::after,[data-way-more]>summary::after{transition:none}
}