/* portal-focus.css — Focus mode + the calm landing page (2026-09-10, Rick's pick of the three UX directions).
   A layer over the guide's own styles: the hub keeps its markup (hidden), the module sections keep theirs (one
   scenario shown at a time), and everything new is prefixed fx-. Tokens come from portal-theme.css / index.html. */
:root{--fx-top:0px;--fx-rail:296px}

/* ── the old hub blocks stay in the DOM (the guide's scripts still update their pills) but out of sight ── */
body.fx-on #hub>.hub-callout,body.fx-on #hub>.hub-tabs,body.fx-on #hub>.hub-hero,body.fx-on #hub>.tracks,body.fx-on #hub>.pt-ring-wrap{display:none}

/* ── HOME ── */
#fxHome{display:flex;flex-direction:column;gap:1.1rem}
.fx-hero{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:1.7rem 2rem;border-radius:20px;background:var(--banner);color:var(--banner-fg);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.fx-hero::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.16), transparent 62%);pointer-events:none}
.fx-hero::after{content:"";position:absolute;left:-60px;bottom:-140px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(185,114,50,.28), transparent 62%);pointer-events:none}
.fx-hello{position:relative;z-index:1;min-width:0}
.fx-eyebrow{font-family:var(--pt-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--banner-fg-2)}
.fx-hero h1{font-family:var(--pt-display);font-size:2.05rem;font-weight:800;margin:.3rem 0 .35rem;letter-spacing:-.02em;color:#fff;line-height:1.1}
.fx-hero p{margin:0;color:var(--banner-fg-2);font-size:.92rem;max-width:56ch}
.fx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.15rem}
.fx-primary{font:inherit;font-weight:700;font-size:.9rem;background:#fff;color:#0A5A66;border:none;border-radius:999px;padding:.72rem 1.25rem .72rem 1.1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;box-shadow:0 10px 24px rgba(0,0,0,.2);transition:transform .15s;max-width:100%}
.fx-primary:hover{transform:translateY(-1px)}
.fx-primary small{font-weight:500;color:#4E6165;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
.fx-primary svg{flex:none}
.fx-ghost{font:inherit;font-weight:600;font-size:.86rem;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:.7rem 1.1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.fx-ghost:hover{background:rgba(255,255,255,.2)}
.fx-ring{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:170px}
.fx-dial{position:relative;width:128px;height:128px;flex:none}
.fx-dial svg{width:100%;height:100%;display:block}
.fx-dial b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--pt-display);font-size:1.55rem;font-weight:800;color:#fff;line-height:1}
.fx-ringtxt{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.fx-ring span{font-size:.74rem;color:var(--banner-fg-2)}
.fx-ring button{font:inherit;background:none;border:none;color:#fff;font-size:.72rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.fx-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.fx-glance button{text-align:left;font:inherit;display:flex;gap:.8rem;align-items:flex-start;background:var(--bg-0);border:1px solid var(--border-1);border-radius:14px;padding:.85rem .95rem;cursor:pointer;box-shadow:var(--shadow-sm);color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.fx-glance button:hover{transform:translateY(-2px);border-color:rgba(14,113,128,.4);box-shadow:var(--shadow-lg)}
.fx-glance i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--sq-teal-bg);color:var(--sq-teal)}
.fx-glance i.copper{background:var(--copper-bg);color:var(--sq-copper)}
.fx-glance i.gold{background:color-mix(in srgb, var(--sq-gold) 38%, transparent);color:var(--pt-gold)}
.fx-glance i svg{width:18px;height:18px}
.fx-glance b{display:block;font-size:.86rem;color:var(--fg-1);line-height:1.3}
.fx-glance span{display:block;font-size:.74rem;color:var(--fg-3);margin-top:.15rem;line-height:1.4}
.fx-glance button>div{align-self:stretch;display:flex;flex-direction:column}
.fx-glance em{display:inline-block;font-style:normal;font-size:.68rem;color:var(--sq-teal);font-weight:700;margin-top:auto;padding-top:.4rem;align-self:flex-start}
.fx-journey{display:flex;flex-direction:column;gap:.6rem}
.fx-jhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fx-jhead h2{font-family:var(--pt-display);font-size:1.25rem;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;row-gap:.1rem}
.fx-jhead h2 small{font-family:var(--pt-body);font-weight:500;font-size:.78rem;color:var(--fg-3);white-space:nowrap;letter-spacing:0;word-spacing:.15em}
.fx-legend{display:flex;gap:.9rem;font-size:.68rem;color:var(--fg-3);font-family:var(--pt-mono)}
.fx-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.3rem;vertical-align:-1px}
.fx-mods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.fx-mod{display:grid;grid-template-columns:auto minmax(0,1fr) 190px auto auto;align-items:center;gap:1rem;background:var(--bg-0);border:1px solid var(--border-1);border-radius:14px;padding:.7rem 1rem .7rem .85rem;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;text-align:left;font:inherit;color:inherit;width:100%;box-sizing:border-box}
.fx-mod:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:rgba(14,113,128,.35)}
.fx-mod:focus-visible{outline:2px solid var(--sq-teal);outline-offset:2px}
.fx-mod.cur{border-color:var(--sq-teal);box-shadow:var(--pt-glow)}
.fx-mod.done{opacity:.8}
.fx-lead{display:flex;align-items:center;gap:.35rem;min-width:88px}
.fx-mod h3{margin:0;font-size:.94rem;font-weight:700;color:var(--fg-1);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.fx-mod p{margin:.1rem 0 0;font-size:.75rem;color:var(--fg-3);overflow:hidden;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fx-prog{display:flex;flex-direction:column;gap:.32rem;align-items:flex-end}
.fx-prog small{font-family:var(--pt-mono);font-size:.62rem;color:var(--fg-3);white-space:nowrap}
.fx-prog .prog-bar{display:flex;flex:none;width:190px;min-width:0;height:6px;margin:0;border-radius:3px;overflow:hidden;background:var(--bg-3)}
.fx-prog .prog-bar span{display:block;height:100%}
.fx-prog .p-pass{background:var(--pass)}.fx-prog .p-fail{background:var(--danger)}.fx-prog .p-blocked{background:var(--warning)}
.fx-mod .pill{width:6.2rem;min-width:0;text-align:center;box-sizing:border-box}
.fx-mod .pill.retest{background:var(--copper-bg);color:var(--sq-copper)}
.fx-go{color:var(--fg-5);width:18px;height:18px;flex:none}
.fx-badge{font-family:var(--pt-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .55rem;border-radius:6px;background:var(--copper-bg);color:var(--sq-copper);line-height:1.4;max-width:100%}
.fx-other{border:1px dashed var(--border-2);border-radius:14px;padding:.55rem 1rem .8rem}
.fx-other summary{cursor:pointer;font-weight:600;font-size:.86rem;color:var(--fg-2);list-style:none;display:flex;align-items:center;gap:.6rem}
.fx-other summary::-webkit-details-marker{display:none}
.fx-other summary::after{content:"Show";margin-left:auto;font-size:.7rem;color:var(--sq-teal);font-weight:700}
.fx-other[open] summary::after{content:"Hide"}
.fx-other .fx-mods{margin-top:.7rem}

/* ── FOCUS MODE: the main column becomes rail + one module section, and that section shows one scenario ── */
body.fx-focus main.main{display:grid;grid-template-columns:var(--fx-rail) minmax(0,1fr);gap:0;max-width:none;margin:0;padding:0;min-height:calc(100vh - var(--fx-top))}
body.fx-focus section.view.show{display:flex;flex-direction:column;gap:.9rem;padding:1.1rem 2rem 7rem;max-width:960px;box-sizing:border-box;min-width:0}
body.fx-focus section.view.show>:not(.fx-head):not(article.test){display:none!important}   /* mod-head, why-panel, ticket-mini… the head replaces them */
body.fx-focus section.view.show>article.test:not(.fx-cur){display:none!important}
body.fx-focus article.test.fx-cur .verdict-row{display:none}
body.fx-focus article.test.fx-cur .verdict{gap:.55rem}
body.fx-focus article.test.fx-cur .verdict>textarea:first-of-type{margin-top:0}
body.fx-focus article.test.fx-cur .shot{max-width:780px}
body.fx-focus article.test.fx-cur .pt-th-msgs{max-height:none;overflow:visible}          /* one card on screen: the page scrolls, nothing is sliced */
body.fx-focus article.test.fx-cur footer.verdict:has(>.pt-th)>textarea{display:none}      /* the conversation already carries the comment */
body.fx-focus article.test.fx-cur .steps>li{cursor:pointer;border-radius:10px;transition:background .15s;margin-left:-.3rem;padding:.2rem .75rem .2rem 2.45rem}
body.fx-focus article.test.fx-cur .steps>li::before{left:.3rem;top:.15rem;transition:box-shadow .15s,background .15s}
body.fx-focus article.test.fx-cur .steps>li:hover:not(:has(.shot:hover)){background:color-mix(in srgb, var(--sq-teal) 5%, transparent)}
body.fx-focus article.test.fx-cur .steps>li:hover::before{box-shadow:inset 0 0 0 1.5px var(--sq-teal)}
body.fx-focus article.test.fx-cur .steps>li .pt-tick,body.fx-focus article.test.fx-cur .steps>li.pt-done .pt-tick{position:absolute;left:.3rem;top:.15rem;right:auto;width:22px;height:22px;margin:0;padding:0;border:0;border-radius:7px;background:transparent;color:transparent;font-size:0;cursor:pointer;z-index:1}
body.fx-focus article.test.fx-cur .steps>li .pt-tick:focus-visible{outline:2px solid var(--sq-teal);outline-offset:2px}
body.fx-focus article.test.fx-cur .steps>li.pt-done{opacity:1;color:var(--fg-5)}
body.fx-focus article.test.fx-cur .steps>li.pt-done :is(b,.ui,.hint,.hint .ic,a){color:inherit;text-decoration:none}
body.fx-focus article.test.fx-cur .steps>li.pt-done .ui{background:transparent}
body.fx-focus article.test.fx-cur .steps>li.pt-done::before{content:"\2713";background:var(--pass);color:var(--fg-invert)}
body.fx-focus article.test.fx-cur .steps>li.pt-done .shot{opacity:.6}
.fx-head{display:none;flex-direction:column;gap:.75rem}
body.fx-focus section.view.show>.fx-head{display:flex}
.fx-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.74rem;color:var(--fg-3)}
.fx-crumb .mod-num{font-size:.6rem;padding:.12rem .45rem}
.fx-crumb b{color:var(--fg-2);font-weight:600}
.fx-crumb .sep{color:var(--fg-5)}
.fx-meta{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;color:var(--fg-3)}
.fx-mapbtn{display:none;margin-left:auto;font:inherit;font-size:.74rem;font-weight:600;background:var(--bg-0);border:1px solid var(--border-2);border-radius:999px;padding:.35rem .8rem;color:var(--fg-2);cursor:pointer}
.fx-why{background:var(--sq-teal-bg);border:1px solid var(--sq-teal-bg-2);border-radius:12px;padding:.65rem 1rem;font-size:.8rem;color:var(--fg-2);line-height:1.5}
.fx-why b.fx-lbl{color:var(--sq-teal-hover);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;margin-right:.45rem;font-family:var(--pt-mono)}
.fx-why details{display:block;margin-top:.35rem}
.fx-why summary{cursor:pointer;color:var(--sq-teal);font-weight:600;font-size:.76rem;list-style:none}
.fx-why summary::-webkit-details-marker{display:none}
.fx-why details p{margin:.4rem 0 0;font-size:.78rem}
.fx-tip{font-size:.66rem;color:var(--fg-3);font-family:var(--pt-mono);display:flex;column-gap:1rem;row-gap:.15rem;flex-wrap:wrap}

/* the rail */
.fx-rail{display:none;position:sticky;top:var(--fx-top);height:calc(100vh - var(--fx-top));overflow:auto;border-right:1px solid var(--border-1);background:var(--bg-1);padding:.85rem .75rem 1rem;flex-direction:column;gap:.45rem;box-sizing:border-box;z-index:2}
body.fx-focus .fx-rail{display:flex}
.fx-back{font:inherit;font-size:.76rem;color:var(--fg-3);text-decoration:none;display:inline-flex;gap:.35rem;align-items:center;background:none;border:none;cursor:pointer;padding:.2rem .3rem;align-self:flex-start}
.fx-back:hover{color:var(--sq-teal)}
.fx-cont{background:var(--bg-0);border:1px solid var(--border-1);border-radius:12px;padding:.6rem .75rem;font-size:.72rem;color:var(--fg-3);box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;font-family:inherit;width:100%;box-sizing:border-box}
.fx-cont:hover{border-color:var(--sq-teal)}
.fx-cont b{display:block;font-size:.8rem;color:var(--fg-1);margin-bottom:.1rem}
.fx-search{font:inherit;font-size:.78rem;width:100%;box-sizing:border-box;border:1px solid var(--border-2);border-radius:9px;background:var(--bg-0);color:var(--fg-1);padding:.45rem .65rem}
.fx-search:focus{outline:none;border-color:var(--sq-teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--sq-teal) 18%, transparent)}
.fx-rtrack{font-family:var(--pt-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-5);padding:.5rem .4rem .1rem}
.fx-rmod>button{width:100%;text-align:left;font:inherit;display:flex;align-items:center;gap:.5rem;background:none;border:none;padding:.42rem .5rem;border-radius:9px;color:var(--fg-2);cursor:pointer;font-size:.79rem;line-height:1.25}
.fx-rmod>button:hover{background:var(--bg-3)}
.fx-rmod>button .mod-num{font-size:.58rem;padding:.12rem .4rem;flex:none;min-width:2.5rem;text-align:center;box-sizing:border-box}
.fx-rmod>button em{margin-left:auto;font-style:normal;font-family:var(--pt-mono);font-size:.6rem;color:var(--fg-3);flex:none}
.fx-rmod.open>button{color:var(--fg-1);font-weight:600}
.fx-rsc{display:none;flex-direction:column;gap:2px;padding:.1rem 0 .45rem .35rem}
.fx-rmod.open .fx-rsc{display:flex}
.fx-rsc button{font:inherit;text-align:left;display:flex;align-items:flex-start;gap:.5rem;border:none;background:none;color:var(--fg-2);font-size:.75rem;padding:.35rem .55rem;border-radius:8px;cursor:pointer;line-height:1.3;width:100%}
.fx-rsc button:hover{background:var(--bg-3)}
.fx-rsc button.cur{background:var(--sq-teal-bg);color:var(--sq-teal-hover);font-weight:600}
.fx-rsc button span{opacity:.75;font-family:var(--pt-mono);font-size:.62rem;flex:none;padding-top:.1rem}
.fx-dot{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--fg-5);background:transparent;margin-top:.3rem;box-sizing:border-box}
.fx-dot.pass{background:var(--pass);border-color:var(--pass)}
.fx-dot.fail{background:var(--danger);border-color:var(--danger)}
.fx-dot.blocked{background:var(--warning);border-color:var(--warning)}
.fx-dot.retest{background:var(--sq-copper);border-color:var(--sq-copper);box-shadow:0 0 0 3px color-mix(in srgb, var(--sq-copper) 25%, transparent)}
.fx-railfoot{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;font-size:.64rem;color:var(--fg-3);padding-top:.7rem;border-top:1px solid var(--border-1);font-family:var(--pt-mono)}
.fx-railfoot button{font:inherit;font-family:var(--pt-body);font-size:.76rem;font-weight:600;background:var(--bg-0);border:1px solid var(--border-2);border-radius:999px;padding:.42rem .85rem;color:var(--fg-2);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start}
.fx-railfoot button:hover{border-color:var(--sq-teal);color:var(--sq-teal)}

/* the verdict bar: fixed at the bottom of the reading column, proxies the card's own buttons */
.fx-bar{display:none;position:fixed;left:var(--fx-rail);right:0;bottom:0;z-index:600;padding:.7rem 2rem .8rem;background:color-mix(in srgb, var(--bg-0) 90%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border-1);align-items:center;gap:.55rem;flex-wrap:wrap;row-gap:.45rem;padding-right:var(--fx-bar-pr,2rem)}
body.fx-focus .fx-bar{display:flex}
.fx-bar .q{font-size:.78rem;font-weight:600;color:var(--fg-2);white-space:nowrap}
.fx-bar .vbtn{white-space:nowrap}
.fx-bar .saved{font-size:.7rem;color:var(--fg-3);font-family:var(--pt-mono);white-space:nowrap}
.fx-bar [hidden]{display:none!important}
.fx-bar .fx-suggest,.fx-bar .fx-suggest[hidden]+.fx-nav{margin-left:auto}          /* right group; a wrapped row stays right-aligned */
.fx-bar :is(.vbtn,.fx-nav,.fx-suggest){box-sizing:border-box;height:34px;padding-top:0;padding-bottom:0;line-height:1;display:inline-flex;align-items:center;gap:.4rem}
.fx-bar svg{flex:none}
.fx-bar .vbtn[data-proxy="pass"]:hover,.fx-bar .vbtn[data-proxy="pass"].on{background:var(--pass);border-color:var(--pass);color:var(--chip-ink)}
.fx-bar .vbtn[data-proxy="fail"]:hover,.fx-bar .vbtn[data-proxy="fail"].on{background:var(--danger);border-color:var(--danger);color:var(--chip-ink)}
.fx-bar .vbtn[data-proxy="blocked"]:hover,.fx-bar .vbtn[data-proxy="blocked"].on{background:var(--warning);border-color:var(--warning);color:var(--chip-ink)}
.fx-bar .saved{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){.fx-bar .saved,.fx-bar .fx-long{display:none}}
@media (min-width:961px) and (max-width:1180px){:root{--fx-rail:264px}}
.fx-nav{font:inherit;font-size:.78rem;font-weight:600;border:1px solid var(--border-2);background:var(--bg-0);color:var(--fg-2);border-radius:999px;padding:.45rem .95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.fx-nav:hover{border-color:var(--sq-teal);color:var(--sq-teal)}
.fx-nav:disabled{opacity:.45;cursor:default}
.fx-nav:disabled:hover{border-color:var(--border-2);color:var(--fg-2)}
.fx-nav.next{background:var(--sq-teal);border-color:var(--sq-teal);color:var(--chip-ink)}
.fx-nav.next:hover{color:var(--chip-ink);filter:brightness(1.06)}
.fx-suggest{font:inherit;font-size:.74rem;font-weight:600;background:none;border:1px dashed color-mix(in srgb, var(--pt-gold) 60%, transparent);color:var(--pt-gold);border-radius:999px;padding:.4rem .8rem;cursor:pointer;white-space:nowrap}
.fx-suggest:hover{border-style:solid}
.fx-kbd{font-family:var(--pt-mono);font-size:.58rem;color:var(--fg-5);letter-spacing:.06em;white-space:nowrap}

/* the drawer: "How this round works" */
.fx-scrim{position:fixed;inset:0;background:rgba(11,15,16,.45);z-index:900;opacity:0;pointer-events:none;transition:opacity .2s}
.fx-scrim.show{opacity:1;pointer-events:auto}
.fx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,94vw);background:var(--bg-1);z-index:950;box-shadow:-16px 0 40px rgba(0,0,0,.25);transform:translateX(102%);transition:transform .25s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column;visibility:hidden}
.fx-drawer.show{transform:none;visibility:visible}
.fx-dhead{display:flex;align-items:center;gap:.9rem;padding:1rem 1.25rem .7rem;border-bottom:1px solid var(--border-1)}
.fx-dhead h2{font-family:var(--pt-display);font-size:1.18rem;margin:0;font-weight:800}
.fx-dhead p{margin:.1rem 0 0;font-size:.74rem;color:var(--fg-3)}
.fx-dclose{margin-left:auto;font:inherit;font-size:.76rem;background:none;border:1px solid var(--border-2);border-radius:999px;padding:.36rem .8rem;cursor:pointer;color:var(--fg-2);white-space:nowrap}
.fx-dclose:hover{border-color:var(--sq-teal);color:var(--sq-teal)}
.fx-dtabs{display:flex;flex-wrap:wrap;gap:2px;padding:.35rem .9rem 0;border-bottom:1px solid color-mix(in srgb, var(--fg-5) 45%, transparent);background:var(--bg-1)}
.fx-dtab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:10px 12px 9px;font:inherit;font-weight:600;font-size:.82rem;color:var(--fg-3);cursor:pointer;white-space:nowrap;border-radius:0;box-shadow:none}
.fx-dtab:hover{color:var(--fg-1)}
.fx-dtab.is-active{color:var(--sq-teal);border-bottom-color:var(--sq-teal)}
.fx-dtab:focus-visible{outline:2px solid var(--sq-teal);outline-offset:2px;border-radius:6px}
.fx-dtab .tab-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:.72em;font-weight:700;letter-spacing:.04em;line-height:1.35;vertical-align:1px;color:var(--sq-copper);border:1px solid color-mix(in srgb, var(--sq-copper) 55%, transparent)}   /* the guide scopes this pill to .hub-tabs; the drawer's tabs need their own copy */
.fx-dbody{overflow:auto;padding:1rem 1.25rem 2.5rem;flex:1}
.fx-dbody .tabpanel[hidden]{display:none!important}
.fx-dbody .tabpanel>h2{display:block;font-family:var(--pt-display);font-size:1.02rem;margin:0}
.fx-dbody .cfg-wrap{overflow-x:auto}
#tab-feedback,#tab-fixes{display:flex;flex-direction:column;gap:1rem}
#tab-feedback>.why-panel,#tab-fixes>.why-panel{margin:0}
#tab-fixes>.fb-group{margin:.6rem 0 -.3rem}

/* ── responsive ── */
@media (max-width:960px){
  body.fx-focus main.main{grid-template-columns:1fr}
  body.fx-focus section.view.show{padding:.9rem 1rem 7rem}
  .fx-bar{left:0;padding:.6rem 1rem .7rem;flex-wrap:wrap;gap:.45rem}
  .fx-kbd,.fx-bar .saved{display:none}
  .fx-mapbtn{display:inline-flex;order:-1;margin-left:0;margin-right:.15rem;padding:.3rem .75rem}
  body.fx-focus .fx-rail{display:none;position:fixed;top:var(--fx-top);left:0;bottom:0;width:min(320px,88vw);box-shadow:16px 0 40px rgba(0,0,0,.25);z-index:850;height:auto}
  body.fx-focus.fx-rail-open .fx-rail{display:flex}
  .fx-glance{grid-template-columns:1fr}
  .fx-mod{grid-template-columns:auto minmax(0,1fr) auto}
  .fx-prog,.fx-go{display:none}
  .fx-mod p{white-space:normal}
}
@media (max-width:640px){
  .fx-hero{padding:1.3rem 1.2rem}
  .fx-hero h1{font-size:1.6rem}
  .fx-mod{grid-template-columns:auto minmax(0,1fr);gap:.6rem}
  .fx-mod .pill{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion: reduce){.fx-drawer,.fx-scrim,.fx-mod,.fx-glance button,.fx-primary{transition:none}}

/* floating notices (push offer, toasts) sit above the fixed Result bar in Focus mode, and step aside for the drawer */
body.fx-focus .pt-push{left:calc(var(--fx-rail) + 2rem);bottom:calc(var(--fx-bar-h,58px) + 14px)}
body.fx-focus .pt-toast{bottom:calc(var(--fx-bar-h,58px) + 14px)}
body.fx-focus .toast{bottom:calc(var(--fx-bar-h,58px) + 16px)}
body.fx-drawer-open .pt-push{visibility:hidden}
@media (max-width:960px){body.fx-focus .pt-push{left:10px;right:10px}}
/* narrow phones: the command bar keeps the brand and the actions; progress lives on the home ring and in the map */
body.fx-on .cmdbar .cb-prog{flex:none}
@media (max-width:480px){body.fx-on .cmdbar .cb-prog{display:none}}

/* ── audit pass (2026-09-10, visual QA) ── */
@media (max-width:700px){                                        /* the hero goes single-column only when it must */
  .fx-hero{grid-template-columns:1fr;gap:1.2rem}
  .fx-ring{flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;min-width:0}
  .fx-dial{width:88px;height:88px}
  .fx-dial b{font-size:1.2rem}
  .fx-ringtxt{align-items:flex-start;text-align:left}
}
/* the guide's global :focus-visible squares corners; keep each control's own shape */
html :is(.fx-primary,.fx-ghost,.fx-nav,.fx-suggest,.fx-dclose,.fx-mapbtn,.fx-railclose):focus-visible{border-radius:999px}
html .fx-mod:focus-visible{border-radius:14px}
html .fx-cont:focus-visible{border-radius:12px}
html .fx-search:focus-visible{border-radius:9px}
/* crumb: a dot before the meta on wide screens; where the meta may wrap to its own line it goes */
@media (max-width:960px){.fx-crumb .fx-sep1{display:none}}
/* rail: top row with Home and (on small screens) Close; search results and an empty state */
.fx-railtop{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fx-railclose{display:none;font:inherit;font-size:.74rem;font-weight:600;background:var(--bg-0);border:1px solid var(--border-2);border-radius:999px;padding:.3rem .75rem;color:var(--fg-2);cursor:pointer}
.fx-railclose:hover{border-color:var(--sq-teal);color:var(--sq-teal)}
.fx-rempty{margin:0;padding:.6rem .5rem;font-size:.76rem;color:var(--fg-3)}
.fx-mapscrim{display:none}
@media (max-width:960px){
  .fx-railclose{display:inline-flex}
  body.fx-focus.fx-rail-open .fx-mapscrim{display:block;position:fixed;inset:var(--fx-top) 0 0 0;background:rgba(11,15,16,.45);z-index:840}
}
body.fx-rail-open .pt-push{visibility:hidden}
/* drawer: legend as a two-column list, card spacing, rule corners, scrollable tabs and stacked tables on phones */
.fx-dbody .fb-legend{display:grid;grid-template-columns:auto 1fr;gap:.45rem .75rem;align-items:center}
.fx-dbody .fb-legend .fb-tag{justify-self:start}
#tab-feedback .fb-item,#tab-fixes .fb-item{margin:0}
.fx-dbody #tab-roles,.fx-dbody #tab-before,.fx-dbody #engine-settings{border-top-left-radius:4px;border-bottom-left-radius:4px}
@media (max-width:640px){
  .fx-dtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .fx-dtabs::-webkit-scrollbar{display:none}
  .fx-dbody .cfg-wrap{overflow-x:visible}
  .fx-dbody .cfg-table thead{display:none}
  .fx-dbody .cfg-table,.fx-dbody .cfg-table tbody,.fx-dbody .cfg-table tr,.fx-dbody .cfg-table td,.fx-dbody .cfg-table tbody th{display:block;width:auto;min-width:0}
  .fx-dbody .cfg-table tr{padding:.55rem 0;border-bottom:1px solid color-mix(in srgb,var(--fg-5) 40%,transparent)}
  .fx-dbody .cfg-table td,.fx-dbody .cfg-table tbody th{border:0;padding:.15rem 0;white-space:normal;text-align:left}
}
/* phones: the command bar keeps the logo and the actions */
@media (max-width:480px){body.fx-on .cmdbar .cb-tt{display:none}}

/* ── audit pass 2 (2026-09-10, code review) ── */
body.fx-focus section.view.show{padding-bottom:calc(var(--fx-bar-h,58px) + 3rem)}   /* the last card clears a wrapped bar too */
.fx-extra{display:flex;flex-direction:column;gap:.6rem}
.fx-extra[hidden]{display:none}
.fx-more{border:1px solid var(--border-1);border-radius:12px;background:var(--bg-0);padding:.55rem 1rem}
.fx-more>summary{cursor:pointer;font-weight:600;font-size:.8rem;color:var(--fg-2)}
.fx-more[open]>summary{margin-bottom:.1rem}
.fx-more>.why-panel{margin-top:.6rem}
.fx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fx-railtop{position:sticky;top:-.85rem;z-index:1;background:var(--bg-1);margin:-.85rem -.75rem 0;padding:.85rem .75rem .35rem}
.fx-drawer{transition:transform .25s cubic-bezier(.2,.8,.25,1),visibility 0s linear .25s}
.fx-drawer.show{transition:transform .25s cubic-bezier(.2,.8,.25,1),visibility 0s}
#fxHome.fx-loading .fx-mod .pill,#fxHome.fx-loading .fx-prog{visibility:hidden}
/* the "Why this module" box takes its module's colour, as the guide's own panels do */
.fx-why[data-tone="copper"]{background:var(--copper-bg);border-color:color-mix(in srgb, var(--sq-copper) 28%, transparent)}
.fx-why[data-tone="copper"] b.fx-lbl{color:var(--sq-copper)}
.fx-why[data-tone="maroon"]{background:var(--sq-maroon-bg);border-color:color-mix(in srgb, var(--sq-maroon) 28%, transparent)}
.fx-why[data-tone="maroon"] b.fx-lbl{color:var(--sq-maroon)}

/* ── audit pass 3 (2026-09-10, functional review) ── */
/* first paint: <head> sets html.fx-boot, so the old hub and the long module pages never flash before this layer applies */
html.fx-boot body:not(.fx-on) main.main{visibility:hidden}
html.fx-boot body:not(.fx-on) main.main::before{content:"Loading the guide…";visibility:visible;display:block;padding:4rem 1.5rem;text-align:center;color:var(--fg-3);font-size:.9rem}
/* an unsent report is a ring, not a dot: nothing is recorded yet */
.fx-dot.draft{background:transparent;border:2px solid var(--danger)}
.fx-dot.draft.dblocked{border-color:var(--warning)}
.fx-legend i.lg-draft{background:transparent;border:2px solid var(--danger);box-sizing:border-box}
.fx-mod .pill.draft{background:color-mix(in srgb, var(--danger) 14%, transparent);color:var(--danger)}
.fx-ringtxt .fx-draftbtn::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid currentColor;margin-right:.4rem;vertical-align:-1px;box-sizing:border-box}
/* the bar waits for sign-in; a failing or running sync shows even where the saved stamp is hidden */
.fx-bar .vbtn:disabled{opacity:.45;pointer-events:none;transform:none}   /* no hover fill or lift while the bar waits */
.fx-bar .saved[data-state="offline"]{color:var(--warning)}
@media (max-width:1180px){.fx-bar .saved[data-state="offline"],.fx-bar .saved[data-state="saving"]{display:inline}}
/* the moved "Getting in" panel: its heading is the summary now */
.fx-more>.why-panel>h4:first-child{display:none}
/* the bell and a restored report land clear of the command bar and the verdict bar */
body.fx-focus .pt-th,body.fx-focus .pt-report{scroll-margin-top:calc(var(--fx-top,0px) + 14px);scroll-margin-bottom:calc(var(--fx-bar-h,58px) + 14px)}
/* the map keeps the current scenario clear of its sticky "Home" header when it scrolls it into view, and the list
   fades under that header instead of being cut mid-line */
.fx-rail .fx-rsc button,.fx-rail .fx-rmod>button{scroll-margin-top:4rem;scroll-margin-bottom:.75rem}
.fx-railtop::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(var(--bg-1),transparent);pointer-events:none}
.fx-railfoot span{text-wrap:balance}

/* ── audit round 2 (visual, functional and code review; 2026-09-10 night) ── */
/* the Result bar: Suggest, Previous and Next are one group that wraps as a unit; on narrow screens a save status
   floats above the bar instead of pushing Next onto a row of its own; phone labels shorten */
.fx-bar .fx-navgrp{margin-left:auto;display:flex;align-items:center;gap:inherit;flex-wrap:nowrap}
.fx-bar .fx-suggest,.fx-bar .fx-suggest[hidden]+.fx-nav{margin-left:0}
@media (max-width:1180px){.fx-bar .saved[data-state="offline"],.fx-bar .saved[data-state="saving"]{position:absolute;right:var(--fx-bar-pr,1rem);bottom:calc(100% + 6px);padding:.22rem .65rem;border-radius:999px;background:var(--bg-0);border:1px solid var(--border-2);box-shadow:var(--shadow-sm);max-width:none;line-height:1.4}}
@media (max-width:480px){.fx-bar .fx-lbl-s{display:none}}
@media (max-width:420px){.fx-bar .fx-lbl-p{display:none}}
/* an armed Fail / Blocked keeps its coloured outline on hover */
.fx-bar .vbtn[data-proxy="fail"].pt-arming{outline-color:var(--danger)}
.fx-bar .vbtn[data-proxy="blocked"].pt-arming{outline-color:var(--warning)}
/* phones: the top bar's buttons stay on the right once the progress counter is hidden */
@media (max-width:480px){body.fx-on .cmdbar .cb-actions{margin-left:auto;border-left:0;padding-left:0}}
/* the drawer's tab strip shows there is more to the right on phones */
@media (max-width:640px){.fx-dtabs{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}}
/* PA1 "Getting in": its login tables wrap instead of scrolling sideways, and stack on phones like the drawer's */
.fx-more .cfg-table td:first-child,.fx-more .cfg-table td:nth-child(2){white-space:normal}
.fx-more .cfg-table a{overflow-wrap:anywhere}
@media (max-width:640px){
  .fx-more .cfg-table thead{display:none}
  .fx-more .cfg-table,.fx-more .cfg-table tbody,.fx-more .cfg-table tr,.fx-more .cfg-table td,.fx-more .cfg-table tbody th{display:block;width:auto;min-width:0}
  .fx-more .cfg-table tr{padding:.55rem 0;border-bottom:1px solid color-mix(in srgb,var(--fg-5) 40%,transparent)}
  .fx-more .cfg-table td,.fx-more .cfg-table tbody th{border:0;padding:.15rem 0;white-space:normal;text-align:left}
}
#tab-roles .cfg-table th:last-child{width:7.5rem}
/* Home: on phones the whole description shows and the chip column gives its spare room back; no orphaned words */
@media (max-width:640px){.fx-mod p{display:block;-webkit-line-clamp:unset;overflow:visible}.fx-lead{min-width:0}}
.fx-glance b{text-wrap:balance}
.fx-legend i.lg-retest{margin-right:calc(.3rem + 3px)}
.fx-ringtxt .fx-draftbtn{position:relative}
.fx-ringtxt .fx-draftbtn::before{position:absolute;left:-14px;top:.3em;margin:0}
/* map header and "Why this module" link colours */
.fx-railtop .fx-back{align-self:center}
.fx-why[data-tone="copper"] summary{color:var(--sq-copper)}
.fx-why[data-tone="maroon"] summary{color:var(--sq-maroon)}
/* step badges: the number and the ✓ sit on the badge's centre (the font rides 1 px high); a ticked badge stays
   green on hover */
body.fx-focus article.test.fx-cur .steps>li::before{padding-top:2px;box-sizing:border-box}
body.fx-focus article.test.fx-cur .steps>li.pt-done:hover::before{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pass) 55%,#000)}
/* report panel on phones: a status line takes its own row, so Cancel and Send stay together on the right */
@media (max-width:640px){.pt-report-row .pt-report-status:not(:empty){flex:1 0 100%}}
/* paired pills share one height */
html .verdict .pt-th-tools .pt-th-attach,html .verdict .pt-th-send{height:32px;box-sizing:border-box;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
html .verdict .pt-report-cancel,html .verdict .pt-report-send{height:35px;box-sizing:border-box;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
/* conversation: times never break ("4h / ago"); small helper text meets 4.5:1 */
.pt-th-msg time{white-space:nowrap;flex:none}
.fx-rtrack,.pt-th-hint,.pt-th-msg time{color:var(--fg-3)}
/* the suggestion box matches the other pills and grows with its text */
.pt-sug-box .pt-sug-send{border-radius:999px}
@supports (field-sizing: content){.pt-sug-box textarea{resize:none;field-sizing:content;min-height:3.2rem;max-height:40vh}}
/* lightbox: the image fits a phone, the caption wraps, the arrows sit below the image and on their circles' centre */
html .lb img{max-width:min(1200px,100%)}
#lb .pt-lb-nav{display:grid;place-items:center;line-height:1;padding:0 0 4px}
@media (max-width:640px){
  #lb .pt-lb-cap{white-space:normal;text-align:center;max-width:calc(100vw - 2rem)}
  #lb .pt-lb-nav{top:auto;bottom:88px;transform:none}
}
/* native controls (search clear button, scrollbars) follow the theme */
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
/* the drawer's tab strip fades only on a side that has more tabs beyond it (phones), so no tab is ever cut hard */
@media (max-width:640px){
  .fx-dtabs{-webkit-mask-image:none;mask-image:none}
  .fx-dtabs.fx-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .fx-dtabs.fx-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .fx-dtabs.fx-l.fx-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent)}
}

/* ── audit round 3 (visual; 2026-09-10 night) ── */
/* lightbox on phones: the caption is a readable block between the arrows and clear of the image */
@media (max-width:640px){
  #lb .pt-lb-cap{left:74px;right:74px;bottom:16px;transform:none;max-width:none;border-radius:14px;overflow:auto;max-height:30vh;text-overflow:clip;text-align:center;white-space:normal}
  #lb .pt-lb-nav{top:auto;bottom:16px;transform:none}
  html .lb.show{padding:1rem 1rem calc(30vh + 32px)}
  html .lb img{max-height:calc(70vh - 64px)}
}
/* tablets: the arrows sit beside the image; above phones a long caption gets up to three centred lines */
@media (min-width:641px) and (max-width:1024px){html .lb.show{padding-left:72px;padding-right:72px}}
@media (min-width:641px){#lb .pt-lb-cap{left:0;right:0;margin:0 auto;width:fit-content;max-width:min(80vw,900px);transform:none;white-space:normal;border-radius:14px;text-align:center;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
/* the save pill stays visible: below 1180 px the notification offer and reply toasts sit above it */
@media (max-width:1180px){body.fx-focus .pt-push,body.fx-focus .pt-toast{bottom:calc(var(--fx-bar-h,58px) + 40px)}}
/* report panel below 400 px: Send full width, Cancel under it */
@media (max-width:400px){html .verdict .pt-report-row{flex-direction:column;align-items:stretch}html .verdict .pt-report-send{order:1;justify-content:center}html .verdict .pt-report-cancel{order:2;justify-content:center;margin-left:0}}
/* Home: four-character chips (PA10…PB12) keep one title column on phones; descriptions keep their scenario count
   and time at in-between widths; the legend wraps as whole items */
@media (max-width:640px){.fx-mod .fx-lead .mod-num{min-width:2.8rem;text-align:center;box-sizing:border-box}}
.fx-mod p{-webkit-line-clamp:3}
.fx-legend{flex-wrap:wrap;row-gap:.25rem}
.fx-legend>span{white-space:nowrap}
/* keyboard focus on the teal welcome band: a white ring */
.fx-hero :focus-visible{outline-color:#fff}
/* hero text: no lone last word; the ring links centre as a block; Continue's details go under its label on phones */
.fx-hero p{text-wrap:pretty}
.fx-ringtxt button{text-align:inherit}
.fx-ringtxt>*{text-wrap:balance}
@media (max-width:420px){.fx-primary{flex-wrap:wrap;row-gap:.15rem}.fx-primary small{flex-basis:100%;white-space:normal;max-width:none;padding-left:calc(16px + .6rem)}}
/* the top bar: the progress counter steps aside before the title would be cut */
@media (max-width:760px){body.fx-on .cmdbar .cb-prog{display:none}body.fx-on .cmdbar .cb-actions{margin-left:auto;border-left:0;padding-left:0}}
/* the bell menu stays on screen on phones */
@media (max-width:480px){.pt-bell-menu{position:fixed;left:10px;right:10px;top:calc(var(--fx-top,58px) + 6px);width:auto}}
/* step badges: 1 px top padding centres the digits and the ✓ (2 px overshot) */
body.fx-focus article.test.fx-cur .steps>li::before{padding-top:1px}
/* the Result bar: one row from 961 px (Suggest is an icon up to 1000 px); icon-only buttons are equal squares */
@media (min-width:961px) and (max-width:1000px){.fx-bar .fx-lbl-s{display:none}.fx-bar .fx-suggest{width:34px;padding:0;justify-content:center}}
@media (max-width:480px){.fx-bar .fx-suggest{width:34px;padding:0;justify-content:center}}
@media (max-width:420px){.fx-bar #fxPrev{width:34px;padding:0;justify-content:center}}
/* drawer tables: header labels stay on one line */
.fx-dbody .cfg-table th{white-space:nowrap}
/* focus rings the layout used to clip */
.pt-th-head:focus-visible{outline-offset:-3px}
.fx-cont:focus-visible{position:relative;z-index:2}
@media (max-width:640px){.fx-dtab:focus-visible{outline-offset:-2px}}
/* contrast: the top bar's subtitle and the map's scenario numbers */
.cb-t2{color:var(--fg-3)}
.fx-rsc button:not(.cur) span{opacity:1;color:var(--fg-3)}
/* suggestion box: no resize grip; it grows with its text */
@supports (field-sizing: content){html .verdict .pt-sug-box textarea{resize:none;field-sizing:content;min-height:3.2rem;max-height:40vh}}

/* ── audit round 4 (visual; 2026-09-10 late) ── */
/* lightbox above phones: the caption has its own room under the image, never over it */
@media (min-width:641px){html .lb.show{padding-top:24px;padding-bottom:112px}html .lb img{max-height:calc(100vh - 136px)}}
/* phone lightbox: a long caption fades at the bottom while more of it can be scrolled */
@media (max-width:640px){#lb .pt-lb-cap.pt-lb-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 1.6em),transparent);mask-image:linear-gradient(#000 calc(100% - 1.6em),transparent)}}
/* top bar from 901 px: the subtitle stays on one line; the counter, then the progress bar, step aside first */
@media (min-width:901px){body.fx-on .cb-t2{white-space:nowrap}body.fx-on .cb-brand{flex:none}body.fx-on .cb-prog{min-width:0}body.fx-on .cmdbar .prog-bar{flex:0 1 150px;min-width:0}}
@media (min-width:901px) and (max-width:1160px){body.fx-on .cb-cnt{display:none}}
@media (min-width:901px) and (max-width:1040px){body.fx-on .cmdbar .prog-bar{display:none}}
/* drawer tabs up to 760 px: one scrolling row with the phone fades */
@media (min-width:641px) and (max-width:760px){
  .fx-dtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .fx-dtabs::-webkit-scrollbar{display:none}
  .fx-dtabs.fx-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .fx-dtabs.fx-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .fx-dtabs.fx-l.fx-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent)}
}
/* PA1 "Getting in": links break only where the page put break points (after / . -), never inside a word */
.fx-more .cfg-table a{overflow-wrap:normal;word-break:normal}
/* scenario head up to 640 px: the title has its own row, the ticket chips sit together */
@media (max-width:640px){body.fx-focus article.test.fx-cur .test-head h3{flex:1 1 100%;min-width:0}}
/* bell menu on phones: centred */
@media (max-width:480px){.pt-bell-menu{max-width:none}}
/* Continue: the details line starts under the label on narrow phones, and sits on the label's baseline above them */
@media (max-width:420px){.fx-primary small{text-align:left}}
@media (min-width:421px){.fx-primary{align-items:baseline}.fx-primary svg{align-self:center}}
/* contrast: the current scenario's number in the map */
.fx-rsc button.cur span{opacity:1}
/* the guide's own toast ("Copied") also clears the save pill */
@media (max-width:1180px){body.fx-focus .toast{bottom:calc(var(--fx-bar-h,58px) + 40px)}}
/* Home rows on phones: the number and chip line up with the title, not the middle of the description */
@media (max-width:640px){.fx-mod{align-items:start}}
/* very short windows (a landscape phone, 200% zoom on a small laptop): the top bar scrolls away instead of staying */
@media (max-height:420px){body.fx-on .cmdbar{position:static}}

/* ── audit round 5 (visual; 2026-09-11) ── */
/* the bell's count badge stays hidden when there is nothing to count (the theme's display:grid beat [hidden]) */
#ptBell .pt-bell-badge[hidden]{display:none}
/* lightbox above phones: the arrows sit beside the image at every width, level with its centre */
@media (min-width:641px){html .lb.show{padding-left:72px;padding-right:72px}#lb .pt-lb-nav{top:calc(50% - 44px)}}
/* toasts: one line where they fit, two balanced lines on phones, never a narrow lozenge */
.toast{width:max-content;max-width:calc(100vw - 2rem);box-sizing:border-box;text-align:center;text-wrap:balance;border-radius:20px}
/* scenario head from 641 px: the title keeps at least 20rem, so it wraps to its own row instead of being squeezed */
body.fx-focus article.test.fx-cur .test-head h3{min-width:min(100%,20rem)}
/* drawer tabs 641–760 px: the focus ring is drawn inside the scrolling strip */
@media (min-width:641px) and (max-width:760px){.fx-dtab:focus-visible{outline-offset:-2px}}
/* Home: the description's last word and its "· N scenarios · about N min" travel together */
.fx-nw{white-space:nowrap}
/* map titles and scenario text: no one-word last line */
.fx-rsc button,.fx-rmod>button>span{text-wrap:pretty}
body.fx-focus article.test.fx-cur :is(p,li){text-wrap:pretty}
/* Done module rows: dimmed, but their text keeps 4.5:1 */
#fxHome .fx-mod.done{opacity:1}
#fxHome .fx-mod.done .fx-lead,#fxHome .fx-mod.done .prog-bar,#fxHome .fx-mod.done .pill{opacity:.8}
/* dark theme: the avatar's initials and placeholder text at 4.5:1 or better */
html[data-theme="dark"] .cb-avatar{background:#8f3b47}
html[data-theme="dark"] ::placeholder{color:#8fa0a3;opacity:1}
/* the small-screen map header: Home and Close ✕ are the same height */
@media (max-width:960px){.fx-railtop .fx-back,.fx-railtop .fx-railclose{min-height:30px;box-sizing:border-box}}
/* the narrowest phones: Pass / Fail / Blocked stay together on the first row, Previous / Next on the second */
@media (max-width:360px){.fx-bar .fx-navgrp{flex-basis:100%;justify-content:flex-end}}

/* ── the conversation column (2026-09-11, Rick's round-2 pick): from 1360 px the current scenario's conversation (or
   how reporting works, when it has none) and every conversation the tester has sit in a column on the right. The
   card sits against the rail, the column takes the rest of the width, and the Result bar spans the card only.
   portal-extras.js moves the panel in and out and sets body.pt-side-on and --pt-side-w; below 1360 px the
   conversation stays under the steps. ── */
.pt-side{display:none}
body.fx-focus.pt-side-on main.main{grid-template-columns:var(--fx-rail) minmax(0,960px) minmax(360px,1fr)}
body.fx-focus.pt-side-on section.view.show{grid-column:2;width:100%}
body.fx-focus.pt-side-on .pt-side{display:flex;flex-direction:column;gap:1.25rem;grid-column:3;grid-row:1;align-self:start;position:sticky;top:var(--fx-top);max-height:calc(100vh - var(--fx-top));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;box-sizing:border-box;padding:1.1rem 2rem 1.4rem 0;min-width:0}
body.fx-focus.pt-side-on .fx-bar{right:var(--pt-side-w,0px);container-type:inline-size}
body.fx-focus article.test.fx-cur.pt-has-th footer.verdict>textarea{display:none}      /* the conversation carries the comment, wherever it sits */
.pt-side-grp{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:720px;min-width:0}
.pt-side-grp[hidden]{display:none}
.pt-side-lbl{margin:0;display:flex;align-items:center;gap:.45rem;padding:0 .15rem;font:600 .58rem/1.4 var(--pt-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.pt-side-lbl b{color:var(--sq-teal);font-weight:600}
.pt-side-lbl .n{color:var(--fg-2);border:1px solid var(--border-2);border-radius:999px;padding:.1rem .42rem;letter-spacing:.04em}
/* the docked conversation: always open, as tall as its messages up to the screen's height; a long one scrolls inside
   and the reply box stays in view */
.pt-side .pt-th{margin:0;display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - var(--fx-top) - 4.6rem);border-radius:16px;box-shadow:var(--shadow-sm)}
.pt-side .pt-th .pt-th-head{flex:none;cursor:default;padding:.95rem 1.15rem .8rem}
.pt-side .pt-th .pt-th-head:hover{background:none}
.pt-side .pt-th :is(.pt-th-caret,.pt-th-peek,.pt-th-new){display:none}
.pt-side .pt-th .pt-th-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding-bottom:.9rem}
.pt-side .pt-th .pt-th-body[hidden]{display:none}
.pt-side .pt-th .pt-th-top{flex:none;padding:.85rem 1.15rem .9rem}
.pt-side .pt-th .pt-th-msgs{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;padding:.9rem 1.15rem .3rem}
.pt-side .pt-th :is(.pt-th-seen,.pt-th-typing,.pt-th-retest,.pt-th-composer,.pt-th-note,.pt-th-status,.pt-th-admin){flex:none}
.pt-side .pt-th .pt-th-retest{margin:.3rem 1.15rem .6rem}
.pt-side .pt-th .pt-th-composer{margin:.35rem 1.15rem 0}
.pt-side .pt-th .pt-th-note{margin:.4rem 1.15rem 0}
.pt-side .pt-th .pt-th-body>.pt-th-status{margin:.25rem 1.15rem 0}
.pt-side .pt-th .pt-th-body>.pt-th-admin{margin:.6rem 1.15rem 0}
.pt-side .pt-th-composer textarea{border:none;border-radius:0;background:transparent;box-shadow:none;padding:.45rem 0;min-height:36px;width:auto;margin:0}
.pt-side .pt-th-composer textarea:focus{border:none;box-shadow:none;outline:none}
@supports (field-sizing: content){.pt-side .pt-th-composer textarea{resize:none;field-sizing:content;max-height:30vh}}
/* no conversation on this scenario: how reporting works */
.pt-how{box-sizing:border-box;padding:1rem 1.15rem 1.1rem;border:1px solid var(--border-2);border-radius:16px;background:var(--bg-0);box-shadow:var(--shadow-sm);animation:pt-card-in .3s ease-out}
.pt-how h3{margin:0 0 .75rem;font:600 .92rem/1.35 var(--pt-body);color:var(--fg-1)}
.pt-how ol{margin:0;padding:0;list-style:none;counter-reset:pt-how;display:flex;flex-direction:column;gap:.65rem}
.pt-how li{counter-increment:pt-how;display:grid;grid-template-columns:22px minmax(0,1fr);gap:.7rem;align-items:start;margin:0;font-size:.83rem;line-height:1.5;color:var(--fg-2)}
.pt-how li::before{content:counter(pt-how);width:22px;height:22px;box-sizing:border-box;border-radius:6px;display:grid;place-items:center;font:600 .7rem/1 var(--pt-body);color:var(--sq-teal);background:color-mix(in srgb, var(--sq-teal) 10%, transparent);border:1px solid color-mix(in srgb, var(--sq-teal) 35%, transparent)}
.pt-how li b{color:var(--fg-1);font-weight:600}
/* every conversation: the bell's rows, the one on screen highlighted */
.pt-side-list{box-sizing:border-box;display:flex;flex-direction:column;padding:.35rem;border:1px solid var(--border-2);border-radius:16px;background:var(--bg-0);box-shadow:var(--shadow-sm)}
.pt-side-list .pt-bell-row.cur{background:color-mix(in srgb, var(--sq-teal) 9%, transparent)}
.pt-side-list .pt-bell-row.cur .pt-bell-main>span{color:var(--fg-1);font-weight:600}
.pt-side-list .pt-bell-row:focus-visible{outline:2px solid var(--sq-teal);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){.pt-how{animation:none}}
/* beside the column the Result bar is only as wide as the card: it goes compact by its own width (elsewhere it follows
   the window's) and keeps one row; a saving / offline note still floats above it. Widths are the bar's content box:
   everything fits from about 810 px (a 1920 screen gives 896), the compact set from about 640 (1366 gives 646) */
@container (max-width:820px){
  .fx-bar .saved,.fx-bar .fx-long{display:none}
  .fx-bar .saved[data-state="offline"],.fx-bar .saved[data-state="saving"]{display:inline;position:absolute;right:var(--fx-bar-pr,1rem);bottom:calc(100% + 6px);padding:.22rem .65rem;border-radius:999px;background:var(--bg-0);border:1px solid var(--border-2);box-shadow:var(--shadow-sm);max-width:none;line-height:1.4}
}
@container (max-width:660px){.fx-bar .q{display:none}}
/* an open Fail / Blocked report sits at the top of the column too (2026-09-11, Rick: "this part … show it in the right
   side"): above the conversation, or in place of the how-to card, and back at the foot of the card below 1360 px */
.pt-side-report:empty,.pt-side-report:not(:has(>.pt-report:not([hidden]))){display:none}
.pt-side-here.pt-reporting .pt-how{display:none}
.pt-side .pt-report{margin:0;border-radius:16px;box-shadow:var(--shadow-sm)}
.pt-side .pt-report-ta{border:none;border-radius:0;background:transparent;box-shadow:none;padding:.3rem .2rem;min-height:110px;width:100%;margin:0}
.pt-side .pt-report-ta:focus{border:none;box-shadow:none;outline:none}
@supports (field-sizing: content){.pt-side .pt-report-ta{resize:none;field-sizing:content;max-height:40vh}}
.pt-side .pt-report-cancel,.pt-side .pt-report-send{height:35px;box-sizing:border-box;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}

/* ── 2026-09-16 · space on demand, the logins key ring, and a lighter scenario card ───────────────────────────────
   Two panels, each folded or not — no modes and no switch. A folded panel leaves a 52 px strip with one button to
   bring it back; an open one carries its own button to fold it away. Nothing inside the scenario card ever
   collapses: the screenshots stay exactly as big as they are today. Wide screens only — below 1100 px the guide's
   own map drawer already does this job. */
@media (min-width:1100px) {
  body.fx-focus.fx-map-off main.main { grid-template-columns:52px minmax(0,1fr); }
  body.fx-focus.fx-map-off.pt-side-on main.main { grid-template-columns:52px minmax(0,960px) minmax(360px,1fr); }
  body.fx-focus.fx-side-off.pt-side-on main.main { grid-template-columns:var(--fx-rail) minmax(0,1fr) 52px; }
  body.fx-focus.fx-map-off.fx-side-off.pt-side-on main.main { grid-template-columns:52px minmax(0,1fr) 52px; }
  body.fx-focus.fx-map-off .fx-rail { display:none; }
  body.fx-focus.fx-side-off .pt-side { display:none; }
  body.fx-focus.fx-map-off .fx-bar { left:52px; }
  body.fx-focus.fx-side-off .fx-bar { right:52px; }
  body.fx-focus.fx-side-off section.view.show { grid-column:2; }
  /* with a side folded, the scenario takes the middle of the screen instead of hugging an edge */
  body.fx-focus.fx-side-off section.view.show, body.fx-focus.fx-side-off .fx-head > * { max-width:1040px; margin-inline:auto; }
  body.fx-focus.fx-side-off .fx-bar { padding-inline:max(1rem, calc((100% - 1040px) / 2)); }
  .fx-strip { display:none; grid-row:1; position:sticky; top:var(--fx-top); height:calc(100vh - var(--fx-top));
    background:var(--bg-1); flex-direction:column; align-items:center; gap:.85rem; padding:.85rem .35rem;
    box-sizing:border-box; z-index:3; }
  .fx-strip-l { grid-column:1; border-right:1px solid var(--border-1); }
  .fx-strip-r { grid-column:3; border-left:1px solid var(--border-1); }
  body.fx-focus.fx-map-off .fx-strip-l { display:flex; }
  .fx-foldbtn { font:inherit; background:none; border:1px solid transparent; border-radius:8px; color:var(--fg-3);
    width:28px; height:28px; display:grid; place-items:center; cursor:pointer; padding:0; }
  .fx-foldbtn:hover { border-color:var(--border-2); color:var(--sq-teal); background:var(--bg-0); }
  .fx-foldside { position:sticky; top:0; align-self:flex-end; margin:0 0 -.4rem; z-index:2; background:var(--bg-0); }
}
@media (min-width:1360px) { body.fx-focus.fx-side-off.pt-side-on .fx-strip-r { display:flex; } }
@media (max-width:1099px) { .fx-strip, .fx-coach, .fx-foldbtn { display:none !important; } }
/* the notifications banner is anchored to the rail; with the map folded it follows the strip instead */
@media (min-width:1100px) { body.fx-focus.fx-map-off .pt-push { left:calc(52px + 2rem); } }
.fx-stripbtn { font:inherit; background:var(--bg-0); border:1px solid var(--border-2); color:var(--fg-2); width:34px;
  height:34px; border-radius:10px; cursor:pointer; display:grid; place-items:center; flex:none; }
.fx-stripbtn:hover { border-color:var(--sq-teal); color:var(--sq-teal); }
.fx-stripv { writing-mode:vertical-rl; font-family:var(--pt-mono); font-size:.57rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-5); }
.fx-stripmod { font-family:var(--pt-mono); font-size:.55rem; font-weight:800; color:#fff; background:var(--sq-maroon);
  border-radius:6px; padding:.16rem .28rem; }
.fx-strippill { font-family:var(--pt-mono); font-size:.55rem; background:var(--fg-5); color:var(--bg-0);
  border-radius:99px; padding:.08rem .34rem; }
.fx-strippill.hot { background:var(--sq-copper); color:#fff; }
/* the pointers belong to the strips: never on the home page, never where a strip cannot be */
.fx-coach { display:none; }
@media (min-width:1100px) { body.fx-focus.fx-map-off .fx-coach { display:block; } }
.fx-coach { position:fixed; top:calc(var(--fx-top) + 1.6rem); z-index:700; max-width:15rem; background:var(--bg-1);
  border:1px solid var(--sq-teal); border-radius:12px; padding:.6rem .75rem; box-shadow:var(--shadow-lg,0 18px 40px -22px rgba(0,0,0,.5)); }
.fx-coach b { display:block; font-size:.78rem; margin-bottom:.15rem; }
.fx-coach span { font-size:.7rem; line-height:1.45; color:var(--fg-3); }
.fx-coach-l { left:60px; } .fx-coach-r { right:60px; }
@media (prefers-reduced-motion:no-preference) { .fx-coach { animation:fxCoach .25s ease-out both; } }
@keyframes fxCoach { from { opacity:0; transform:translateY(-6px); } }

/* the key ring: one line per account, opened when they want it, nothing boxed */
.fx-key { color:var(--fg-2); }
body.fx-ring-open .fx-key { color:var(--sq-teal); border-color:var(--sq-teal); }
.kr { position:fixed; top:calc(var(--fx-top) + .4rem); right:.75rem; width:430px; max-width:calc(100vw - 1.5rem);
  max-height:calc(100vh - var(--fx-top) - 1.2rem); display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:16px; z-index:960;
  box-shadow:0 18px 40px -22px rgba(11,15,16,.55); overflow:hidden; }
.kr[hidden] { display:none; }                          /* display:flex above would otherwise beat the hidden attribute */
.kr-head, .kr-row, .kr-note, .kr-foot { flex:none; }   /* the help takes whatever is left, and scrolls inside */
.kr-head { display:flex; align-items:center; gap:.5rem; padding:.7rem .85rem; border-bottom:1px solid var(--border-1); }
.kr-head i { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--sq-teal-bg); color:var(--sq-teal-hover); }
.kr-head b { font-size:.92rem; }
.kr-head span { font-size:.72rem; color:var(--fg-3); }
.kr-x { margin-left:auto; font:inherit; font-size:.78rem; background:none; border:0; color:var(--fg-3); cursor:pointer; padding:.2rem .3rem; }
.kr-x:hover { color:var(--fg-1); }
.kr-row { border-bottom:1px solid var(--border-1); }
.kr-sum { width:100%; display:flex; align-items:center; gap:.6rem; background:none; border:0; font:inherit;
  padding:.55rem .85rem; cursor:pointer; text-align:left; color:var(--fg-1); }
.kr-sum:hover { background:var(--bg-3); }
.kr-sum code { flex:1; min-width:0; font-family:var(--pt-mono); font-size:.73rem; color:var(--fg-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kr-lbl { flex:none; width:4.6rem; font-family:var(--pt-mono); font-size:.56rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--fg-5); }
.kr-chev { display:grid; place-items:center; color:var(--fg-5); transition:transform .15s; }
.kr-row.is-open .kr-chev { transform:rotate(90deg); }
.kr-row.is-open .kr-sum code { visibility:hidden; }   /* the open row shows the value below; no need to say it twice */
.kr-body { padding:0 .85rem .7rem 5.45rem; }
.kr-line { display:grid; grid-template-columns:minmax(0,1fr) 26px 26px 26px; align-items:center; column-gap:2px; position:relative; }
.kr-line + .kr-line { margin-top:.15rem; }
.kr-line code { grid-column:1; min-width:0; font-family:var(--pt-mono); font-size:.74rem; padding:.24rem 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg-1); }
.kr-dots { letter-spacing:.12em; color:var(--fg-3); }
.kr-shown { color:var(--fg-1); }
.kr-ic { flex:none; width:26px; height:26px; display:grid; place-items:center; background:none; border:1px solid transparent;
  border-radius:8px; color:var(--fg-3); cursor:pointer; text-decoration:none; }
.kr-ic:hover { border-color:var(--border-2); color:var(--sq-teal); background:var(--bg-0); }
.kr-ic.sl-forget:hover { color:var(--danger); }
.kr .sl-show { grid-column:2; } .kr .sl-copy { grid-column:3; } .kr .sl-open, .kr .sl-forget { grid-column:4; }
.kr-add { grid-column:1 / -1; justify-self:start; font:inherit; font-size:.68rem; display:inline-flex; align-items:center;
  gap:.25rem; background:none; border:0; color:var(--fg-5); cursor:pointer; padding:.24rem 0; }
.kr-add:hover { color:var(--sq-teal); }
.kr-in { grid-column:1; min-width:0; width:100%; box-sizing:border-box; font:inherit; font-size:.74rem;
  font-family:var(--pt-mono); border:1px solid var(--sq-teal); border-radius:8px; padding:.24rem .5rem;
  background:var(--bg-0); color:var(--fg-1); }
.kr-in:focus { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--sq-teal) 18%, transparent); }
.kr-acts { display:flex; align-items:center; gap:.5rem; margin-top:.4rem; }
.kr-save { font:inherit; font-size:.7rem; font-weight:600; background:var(--sq-teal); color:#fff; border:0;
  border-radius:999px; padding:.26rem .8rem; cursor:pointer; }
.kr-cancel { font:inherit; font-size:.68rem; background:none; border:0; color:var(--fg-5); text-decoration:underline; cursor:pointer; padding:0; }
.kr-cancel:hover { color:var(--fg-1); }
.kr-hint { margin:.4rem 0 0; font-size:.68rem; line-height:1.45; color:var(--fg-3); }
.kr-hint b { color:var(--fg-2); }
.kr-note { margin:0; padding:.5rem .85rem; font-size:.68rem; line-height:1.45; color:var(--fg-3); border-bottom:1px solid var(--border-1); }
.kr-foot { display:flex; align-items:center; gap:.5rem; padding:.55rem .85rem; font-size:.68rem; color:var(--fg-5); }
.kr-more { margin-left:auto; font:inherit; font-size:.7rem; display:inline-flex; align-items:center; gap:.2rem; background:none;
  border:0; color:var(--sq-teal-hover); cursor:pointer; padding:0; }
.kr-more.is-open svg { transform:rotate(90deg); }
.kr-help { flex:1 1 auto; min-height:0; max-height:min(58vh,520px); overflow:auto; padding:.2rem .85rem 1rem;
  border-top:1px solid var(--border-1); }
.kr-help .why-panel { border:0; background:none; padding:0; margin:0; }
.kr-help .cfg-wrap { overflow-x:auto; }
.kr-flash { position:absolute; right:0; bottom:-1.1rem; font-family:var(--pt-mono); font-size:.58rem; color:var(--sq-teal-hover);
  background:var(--bg-1); border-radius:6px; padding:.05rem .3rem; pointer-events:none; }
.kr-moved { margin:.2rem 0 .6rem; font-size:.78rem; color:var(--fg-3); }

/* a lighter scenario card: the same words and the same full-size screenshots, with less room and less decoration */
body.fx-focus .test-head { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .55rem; padding:.5rem .95rem; }
body.fx-focus .test-head h3 { font-size:1rem; line-height:1.3; margin:0; flex:1 1 340px; }
body.fx-focus .test-head .eyebrow { font-size:.58rem; margin:0; }
/* the guide's dark-mode contrast fix (:root:root [data-theme] .jkey) sets dark ink for a FILLED chip, so an outline
   chip has to out-rank it — hence the :root:root prefix here, the same trick index.html uses */
:root:root body.fx-focus .test-head .jkey { font-size:.58rem; padding:.12rem .42rem; color:var(--fg-2);
  background:color-mix(in srgb, var(--sq-maroon) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--sq-maroon) 42%, transparent); }
body.fx-focus .test-head .badge, body.fx-focus .test-head .pill { font-size:.58rem; padding:.1rem .45rem; }
body.fx-focus .test-body { padding:.7rem .95rem .8rem; }
body.fx-focus p.objective { font-size:.84rem; line-height:1.5; margin:0 0 .5rem; color:var(--fg-3); max-width:80ch; }
body.fx-focus ol.steps { gap:.2rem; }
body.fx-focus ol.steps > li { margin:0; padding-block:.14rem; }
body.fx-focus ol.steps > li + li { margin-top:.18rem; }
body.fx-focus ol.steps > li > * { max-width:80ch; }
body.fx-focus ol.steps > li > .shot, body.fx-focus ol.steps > li > figure { max-width:none; }
body.fx-focus div.expected { padding:.55rem .8rem; margin-top:.55rem; max-width:80ch; }
body.fx-focus div.expected ul { margin:.15rem 0 0; }
body.fx-focus div.expected li { margin:0; line-height:1.45; }
body.fx-focus .fx-why { padding:.4rem .8rem; }
body.fx-focus .fx-why .fx-lbl { font-size:.55rem; }
body.fx-focus .shot { margin-block:.45rem; }

/* ── 2026-09-30: a third tone (gold, Track M), cards with nothing to record, and the paths home (html[data-fx-home="paths"]) ── */
.mod-num--gold,.mod-seq--gold,.mod-chip--gold{background:#9A7400}
html .mod-num--gold,html .mod-seq--gold,html .mod-chip--gold{color:#fff}
.fx-bar .vbtn[hidden]{display:none}
.fx-dot.info{border-style:dashed;opacity:.7}
.fx-paths{display:grid;gap:.8rem;margin-bottom:.5rem}
.fx-paths--3{grid-template-columns:repeat(3,minmax(0,1fr))}.fx-paths--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-paths--1{grid-template-columns:minmax(0,340px)}
a.fx-path{text-decoration:none;color:inherit}
a.fx-path.fx-path--link{border-style:dashed}
.fx-path{text-align:left;font:inherit;display:flex;flex-direction:column;gap:.35rem;background:var(--bg-0);border:1px solid var(--border-1);border-radius:14px;padding:.95rem 1.05rem;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}
.fx-path:hover{transform:translateY(-2px);border-color:rgba(14,113,128,.4);box-shadow:var(--shadow-lg)}
.fx-path.cur{border-color:var(--sq-teal);box-shadow:var(--pt-glow)}
.fx-path-top{display:flex;align-items:center;gap:.55rem}
.fx-path-top b{font-family:var(--pt-display);font-size:1.05rem;color:var(--fg-1);flex:1}
.fx-path-top em{font-style:normal;font:700 .8rem var(--font-mono);color:var(--fg-3)}
.fx-path-who{font-size:.78rem;color:var(--fg-3);line-height:1.4}
.fx-path-bar{display:block;height:5px;border-radius:9px;background:var(--bg-3);overflow:hidden;margin-top:.2rem}
.fx-path-bar i{display:block;height:100%;background:var(--sq-teal);border-radius:9px}
.fx-path-meta{font-size:.74rem;color:var(--fg-3)}
.fx-path-go{font-size:.76rem;font-weight:700;color:var(--sq-teal);margin-top:.15rem}
.fx-mods.fx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.fx-mod.fx-tile{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;padding:.75rem .85rem;min-height:106px;text-align:left}
.fx-mods.fx-tiles>li{display:flex}.fx-mod.fx-tile{flex:1;min-width:0}     /* tiles of one row share its height */
.fx-tile-top{display:flex;align-items:center;gap:.4rem}
.fx-tile-top small{font:600 .72rem var(--font-mono);color:var(--fg-3);margin-left:auto}
.fx-tile b{font-size:.86rem;line-height:1.3;color:var(--fg-1);flex:1;font-weight:600}
.fx-tile-note{font-size:.7rem;line-height:1.35;color:var(--fg-3)}     /* the module's prerequisite ("Do this after PA1–PA5") */
.fx-tile .prog-bar{flex:none;min-width:0;width:100%;height:5px;margin:.2rem 0 0;border-radius:9px}
@media (max-width:900px){.fx-paths--3,.fx-paths--2{grid-template-columns:minmax(0,1fr)}.fx-mods.fx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}