/* ============================================================
   FORMATS — Switchboard (master / detail) + PATH FLOW
   Mounted inside the .ed Editorial page. The Switchboard is a slim
   rail of all six format names + one fixed-height detail panel:
   zero scroll, total focus. The path flow is the three-step
   "Your path" process revealed when a lane is chosen.

   Responsive: keyed off the .ed-switch CONTAINER width (named `fmt`),
   so the rail reflows on the page's own width. Lane-accent threading
   (--active, dimming, "for you" tag) follows the page's .ed[data-lane].
   Tokens from shared/design-system.css. Prefixed .fmt3 / .ed-flow.
   ============================================================ */

/* the "for you" recommendation pill — hidden until its pane is recommended.
   Sized to match the kicker (.fmt3-detail .k) exactly so the row reads as one label. */
.fmt-tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--active);display:inline-flex;
  align-items:center;gap:6px;opacity:0;transition:opacity .25s}
.fmt-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--active)}
.fmt3-pane[data-rec="1"] .fmt-tag{opacity:1}

/* ---- the section is the `fmt` query container ---- */
.ed-switch{container-type:inline-size;container-name:fmt}
.ed-switch .fmt3-wrap{margin-top:clamp(34px,5cqw,52px)}

/* ---- wrap: rail + detail ---- */
.fmt3-wrap{display:grid;grid-template-columns:288px 1fr;gap:0;
  border:1px solid var(--hairline);border-radius:var(--radius-md);
  overflow:hidden;background:var(--surface);min-height:432px}

/* ---- rail ---- */
.fmt3-rail{display:flex;flex-direction:column;border-right:1px solid var(--hairline);
  background:var(--paper-2)}
.fmt3-tab{display:flex;align-items:center;gap:14px;padding:0 24px;flex:1 0 72px;
  background:none;border:0;border-bottom:1px solid var(--hairline);
  font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;
  transition:background .18s,opacity .25s}
.fmt3-tab:last-child{border-bottom:0}
.fmt3-tab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--active);transform:scaleY(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.75,.2,1)}
.fmt3-tab .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--steel);transition:color .2s}
.fmt3-tab .t{font-family:var(--serif);font-weight:500;font-size:1.04rem;
  letter-spacing:-.01em;line-height:1.05;flex:1}

/* recommended highlight: the number sits in a filled accent pill (the chosen treatment) */
.fmt3-rail[data-hl="badge"] .fmt3-tab[data-rec="1"] .n{
  background:var(--active);color:var(--paper);border-radius:999px;padding:4px 9px;line-height:1}

/* Hover preview only where there's a real pointer. On touch a tap commits
   directly (pin); gating hover off avoids the iOS "first tap = reveal :hover,
   not click" trap, which otherwise previewed one tab while aria-selected stayed
   stuck on the initial tab — two tabs looking selected at once. */
@media (hover:hover){
  .fmt3-tab:hover{background:var(--surface)}
  .fmt3-tab:hover .n{color:var(--active)}
  .ed[data-lane]:not([data-lane="none"]) .fmt3-tab:hover{opacity:1}
}
.fmt3-tab[aria-selected="true"]{background:var(--surface)}
.fmt3-tab[aria-selected="true"]::before{transform:scaleY(1)}
.fmt3-tab[aria-selected="true"] .n{color:var(--active)}

/* ---- detail: all six panes stacked in one cell → height is the tallest pane,
   constant across selections (no jump) ---- */
.fmt3-detail{padding:38px 44px;display:grid;grid-template-rows:1fr}
.fmt3-pane{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
.fmt3-pane[data-on="0"]{visibility:hidden;pointer-events:none}
.fmt3-detail .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);margin-bottom:16px;
  display:flex;align-items:center;gap:12px}
.fmt3-detail h3{font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,2.6cqw,2rem);letter-spacing:-.015em;line-height:1.06;margin:0 0 14px}
.fmt3-detail .d{font-size:1.04rem;color:var(--graphite);line-height:1.58;margin:0 0 22px;max-width:46ch}
.fmt3-detail .for{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel);margin-top:auto;
  padding-top:20px;border-top:1px solid var(--hairline);
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.fmt3-detail .for b{color:var(--ink);font-weight:500}

/* ---- Variant C: price column inside the detail pane ---- */
.fmt3-detail--split .fmt3-pane{display:grid;grid-template-columns:1fr 232px;
  gap:0;align-items:stretch}
.fmtp-text{display:flex;flex-direction:column;min-width:0;padding-right:36px}
.fmtp-col{display:flex;flex-direction:column;gap:0;min-width:0;box-sizing:border-box;
  border-left:1px solid var(--hairline);padding-left:30px;position:relative}
.fmtp-col::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:42px;
  background:var(--active)}
.fmtp-cap{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:18px}
.fmtp-tier{display:flex;flex-direction:column;gap:3px;padding:14px 0;
  border-top:1px solid var(--paper-2)}
.fmtp-cap+.fmtp-tier{border-top:0}
.fmtp-tier .amt{font-family:var(--serif);font-weight:500;font-size:1.5rem;
  letter-spacing:-.02em;line-height:1;color:var(--active)}
.fmtp-tier .who{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--ink)}
.fmtp-tier .note{font-size:.82rem;color:var(--steel);line-height:1.35}
.fmtp-cta-btn{box-sizing:border-box;margin-top:auto;display:block;text-align:center;width:100%;
  font-family:var(--sans);font-weight:600;font-size:.9rem;background:var(--ink);
  color:var(--paper);border:1px solid var(--ink);border-radius:var(--radius-sm);
  padding:13px 18px;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
.fmtp-cta-btn:hover{background:color-mix(in srgb,var(--ink) 92%,var(--surface));
  color:var(--paper)}
.fmtp-vatmini{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);margin-top:12px;text-align:center}

/* ---- lane-active dimming: non-recommended tabs recede ---- */
.ed[data-lane]:not([data-lane="none"]) .fmt3-tab{opacity:.4}
.ed[data-lane]:not([data-lane="none"]) .fmt3-tab[data-rec="1"],
.ed[data-lane]:not([data-lane="none"]) .fmt3-tab[aria-selected="true"]{opacity:1}

/* ---- responsive: rail → horizontal strip; price column stacks under prose ---- */
@container fmt (max-width:680px){
  .fmt3-wrap{grid-template-columns:1fr}
  .fmt3-rail{flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--hairline);scrollbar-width:none}
  .fmt3-rail::-webkit-scrollbar{display:none}
  .fmt3-tab{flex:0 0 150px;width:150px;min-width:0;flex-direction:column;align-items:flex-start;gap:5px;
    min-height:0;padding:14px 16px;
    border-bottom:0;border-right:1px solid var(--hairline);justify-content:flex-start}
  .fmt3-tab:last-child{border-right:0}
  .fmt3-tab::before{top:auto;bottom:0;left:0;right:0;width:auto;height:3px;
    transform:scaleX(0);transform-origin:left}
  .fmt3-tab[aria-selected="true"]::before{transform:scaleX(1)}
  .fmt3-tab .t{font-size:.96rem}
  .fmt3-detail{padding:26px 24px}
  .fmt3-detail--split .fmt3-pane{grid-template-columns:1fr}
  .fmtp-text{padding-right:0}
  .fmtp-col{border-left:0;border-top:1px solid var(--hairline);
    padding-left:0;padding-top:20px;margin-top:22px}
  .fmtp-col::before{left:0;top:-1px;width:42px;height:1px}
}

@media (prefers-reduced-motion:reduce){
  .fmt3-tab,.fmt3-tab::before,.fmt-tag,.fmtp-cta-btn{transition:none!important}
}

/* ============================================================
   ADAPTIVE HEIGHT — when the viewport is short, compress the #work HEADER (never
   the switchboard, which is the fixed-height budget anchor) so the whole formats
   section fits on scroll (top-aligned via html{scroll-padding-top}) instead of
   clipping the H2 or chopping the switchboard. Scoped to #work; coarse viewport-
   height steps (no pulse). The H2 is the section identity and is never hidden;
   the lead paragraph is dropped first, then spacing tightens, then the H2 shrinks.
   Below the floor the switchboard's fixed height wins and the page just scrolls.
   ============================================================ */
@media (max-height:900px){
  #work.ed-sec{padding-block:clamp(44px,6vh,80px)}
  #work .fmt3-wrap{margin-top:clamp(20px,3vh,40px)}
}
@media (max-height:800px){
  #work .ed-lead{display:none}                 /* lead goes first */
  #work h2{font-size:2.2rem;margin-bottom:14px}
}
@media (max-height:700px){
  #work.ed-sec{padding-block:30px}
  #work .eyebrow{margin-bottom:14px}
  #work h2{font-size:1.95rem;margin-bottom:10px}
}
@media (max-height:670px){
  #work.ed-sec{padding-block:16px}
  #work .eyebrow{margin-bottom:8px}
  #work h2{font-size:1.6rem;margin-bottom:0;max-width:none}
  #work .fmt3-wrap{margin-top:14px}
}

/* ============================================================
   PATH FLOW — three-step process for the "Your path" section.
   Desktop: three connected columns. Mobile: a vertical timeline.
   Accent threads through the page's --active.
   ============================================================ */
.ed-flow{--flow-gap:clamp(20px,3cqw,46px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--flow-gap);max-width:880px;margin:8px auto 0;text-align:center}
.ed-flow .step{position:relative}
.ed-flow .top{display:flex;justify-content:center;margin-bottom:16px}
.ed-flow .num{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--active);
  background:var(--surface);color:var(--active);display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;position:relative;z-index:1}
/* connector drawn BETWEEN circles: this circle's right edge → next circle's left edge,
   crossing the column gap. Symmetric + gap-accurate, so the row reads as centered.
   (Mobile re-enables .bar as the vertical timeline line and hides this.) */
.ed-flow .bar{display:none}
.ed-flow .step:not(:last-child)::after{content:"";position:absolute;top:16px;
  left:calc(50% + 17px);width:calc(100% + var(--flow-gap) - 34px);height:1px;
  background:var(--hairline);z-index:0}
.ed-flow h4{font-family:var(--serif);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;
  line-height:1.15;margin:0 0 8px}
.ed-flow p{font-size:.94rem;color:var(--graphite);line-height:1.52;margin:0 auto;max-width:28ch}

@container ed (max-width:620px){
  /* vertical timeline: number on the left, content in a left-padded column */
  .ed-flow{grid-template-columns:1fr;gap:0;max-width:360px;margin-inline:auto;text-align:left}
  .ed-flow .step{padding:0 0 26px 50px}
  .ed-flow .step:last-child{padding-bottom:0}
  .ed-flow .step:not(:last-child)::after{display:none}   /* the desktop horizontal connector */
  .ed-flow .top{justify-content:flex-start;margin-bottom:4px}
  .ed-flow .num{position:absolute;left:0;top:2px}
  .ed-flow .bar{display:block;position:absolute;left:16px;top:40px;bottom:2px;width:1px;height:auto;flex:none}
  .ed-flow .step:last-child .bar{display:none}
  .ed-flow h4{padding-top:6px}
  .ed-flow p{margin:0;max-width:28ch}
}