/*! FocalShift Ai · Mission Control shell partials · MC-SHELL-DELIVERY-2 (ruling 454 phase 2, 11 Sep 2026).
    Generated by build/externalise.py from the partial's own inline block(s) — byte-for-byte the same
    rules/code, moved out of the document so the browser can cache them. The filename carries the
    content hash; a changed file is a new name, never an overwrite. */
/* ── from private_html/_tpl_experience.php: <style id=fs-tplx-assets> ── */
/* ════════════ FocalShift · the template experience (.tplx-*) ════════════
   Variables cloned from the canonical modal so light + dark are complete by
   construction. Sora display / Inter body. No serif, ever. */
.tplx-scrim{
  --pnl:#fff;--pnl2:#f4f4fb;--sft:#f7f7fc;--ln:#ececf4;--ln2:#e0e1ef;
  --tx:#23233a;--mut:#6b7194;--fnt:#9b9cb4;--brt:#1c1c30;
  --acc:#615dfa;--acc2:#5551e8;--accsoft:#eeedfd;--grn:#16c43b;--gld:#d6307a;--amb:#d98a12;
  --ambsoft:#fbf1de;--grnsoft:#e6f6ed;
  --shadow:0 40px 100px -24px rgba(16,16,45,.6);--shadow-s:0 2px 10px rgba(20,20,40,.07);
  /* skeleton tokens — a drawn wireframe has to be READABLE or it reads as a blank
     card, which is exactly how the first pass failed. These are deliberately several
     steps darker than the hairline tokens they were first built from. */
  --sk1:#b9bdcd;--sk2:#d5d8e4;--sk3:#e9ebf2;--skbg:#fbfbfe;
  position:fixed;inset:0;background:rgba(14,16,30,.58);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  z-index:1300;display:none;align-items:center;justify-content:center;padding:26px 18px;
  font-family:Inter,-apple-system,"Segoe UI",sans-serif;font-size:14px;color:var(--tx)}
html.fs-dark .tplx-scrim,.fs-dark .tplx-scrim{
  --pnl:#1d1e2b;--pnl2:#23243a;--sft:#20213a;--ln:#2e2f44;--ln2:#33344c;
  --tx:#e9e9f3;--mut:#a0a4c0;--fnt:#8f91ac;--brt:#f4f6ff;--acc2:#8d8aff;--accsoft:#2f2e57;
  --gld:#ff6b9d;--amb:#e6a53a;--ambsoft:#3a2f18;--grnsoft:#17311f;
  --shadow:0 26px 80px rgba(0,0,0,.55);--shadow-s:0 2px 10px rgba(0,0,0,.35);
  --sk1:#565877;--sk2:#3f4059;--sk3:#333449;--skbg:#24253a}
.tplx-scrim.on{display:flex}
.tplx-scrim *{box-sizing:border-box}
.tplx-sheet{width:min(1280px,100%);height:min(880px,94vh);background:var(--pnl);border:1px solid var(--ln2);
  border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(14px) scale(.985);opacity:0;transition:transform .26s cubic-bezier(.2,.9,.28,1),opacity .2s}
.tplx-scrim.on .tplx-sheet{transform:none;opacity:1}
/* The intent screen is eight cards, not a scrolling shelf — it sizes to its content
   instead of holding a gallery-sized sheet open around a third of a screen of air. */
.tplx-sheet.compact{height:auto;max-height:94vh}
.tplx-scrim h2,.tplx-scrim h3,.tplx-scrim h4,.tplx-dsp{font-family:Sora,Inter,-apple-system,sans-serif;
  letter-spacing:-.015em;font-weight:600;margin:0}
.tplx-scrim button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.tplx-scrim input{font:inherit}

/* ── header ───────────────────────────────────────────────────────────── */
.tplx-hdr{display:flex;align-items:center;gap:14px;padding:15px 18px 13px;border-bottom:1px solid var(--ln);flex:0 0 auto}
.tplx-hdr h2{font-size:18px;color:var(--brt)}
.tplx-hdr .sub{color:var(--fnt);font-size:12.5px;margin-top:2px}
.tplx-sp{flex:1}
.tplx-x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--fnt);flex:0 0 auto}
.tplx-x:hover{background:var(--pnl2);color:var(--tx)}
.tplx-back{display:inline-flex;align-items:center;gap:7px;color:var(--fsc-muted,#6a6a8b);font-weight:500;height:32px;padding:0 11px;border-radius:9px}
.tplx-back:hover{background:var(--pnl2);color:var(--tx)}

/* pill subnav — never underline tabs */
.tplx-pills{display:inline-flex;gap:4px;background:var(--sft);padding:4px;border-radius:12px;flex-wrap:wrap}
.tplx-pills button{height:32px;padding:0 13px;border-radius:9px;color:var(--fsc-muted,#6a6a8b);font-size:13.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tplx-pills button .c{font-size:11.5px;color:var(--fnt);font-variant-numeric:tabular-nums}
.tplx-pills button:hover{color:var(--tx)}
.tplx-pills button.on{background:var(--acc);color:#fff;box-shadow:var(--shadow-s)}
.tplx-pills button.on .c{color:#ffffffb0}

.tplx-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;
  border:1px solid var(--ln2);background:var(--sft);min-width:230px}
.tplx-search input{border:0;background:none;outline:0;color:var(--tx);width:100%}
.tplx-search input::placeholder{color:var(--fnt)}

.tplx-body{flex:1;display:flex;min-height:0}

/* ── category rail ────────────────────────────────────────────────────── */
.tplx-cats{width:224px;flex:0 0 224px;border-right:1px solid var(--ln);background:var(--sft);padding:13px 11px;overflow:auto}
.tplx-cats .lbl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fnt);margin:15px 8px 7px;font-weight:700}
.tplx-cats .lbl:first-child{margin-top:2px}
.tplx-cat{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--fsc-muted,#6a6a8b);text-align:left}
.tplx-cat:hover{background:var(--pnl);color:var(--tx)}
.tplx-cat.on{background:var(--accsoft);color:var(--acc2);font-weight:600}
.tplx-hex{width:13px;height:15px;flex:0 0 auto;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tplx-cat .n{flex:1;font-size:13.5px}
.tplx-cat .c{font-size:11.5px;color:var(--fnt);font-variant-numeric:tabular-nums}
.tplx-cat.on .c{color:var(--acc2)}

/* ── gallery ──────────────────────────────────────────────────────────── */
.tplx-gal{flex:1;min-width:0;overflow:auto;padding:16px 20px 28px;background:var(--pnl)}
.tplx-newstrip{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  background:var(--grnsoft);margin-bottom:16px}
.tplx-newstrip .t{font-size:13.5px;color:var(--tx)}
.tplx-newstrip .t span{color:var(--fsc-muted,#6a6a8b)}
.tplx-dot{width:7px;height:7px;border-radius:50%;display:inline-block;vertical-align:middle;background:var(--fnt)}
.tplx-dot.live{background:var(--grn)}
.tplx-galhead{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px}
.tplx-galhead h3{font-size:15px;color:var(--brt)}
.tplx-galhead .count{color:var(--fnt);font-size:12.5px;font-variant-numeric:tabular-nums}
.tplx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 18px}
@media (max-width:1080px){.tplx-grid{grid-template-columns:repeat(2,1fr)}.tplx-cats{display:none}}

.tplx-tile{border-radius:14px;text-align:left;position:relative;display:flex;flex-direction:column;gap:9px;width:100%}
.tplx-frame{position:relative;border:1px solid var(--ln2);border-radius:13px;overflow:hidden;background:var(--pnl2);
  aspect-ratio:16/11;box-shadow:var(--shadow-s);transition:.18s}
.tplx-tile:hover .tplx-frame{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,20,40,.16);border-color:var(--acc)}
html.fs-dark .tplx-tile:hover .tplx-frame{box-shadow:0 16px 34px rgba(0,0,0,.5)}
.tplx-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:object-position var(--tplx-pan,3s) linear}
/* ── HOVER-TO-SCROLL ─────────────────────────────────────────────────────
   Hans (8/9): "if you hover over one of the previews and it starts scrolling through the
   actual page". The card's image already IS the full-height render of the design, and it
   is already downloaded, so the whole behaviour is a pan of object-position from the top
   of that render to the bottom of it. ZERO extra payload: no second asset, no sprite, no
   generated animation. The duration is set per card in JS from the render's own aspect
   ratio, so a long sales letter does not whip past and a short page does not crawl, and
   the class is only added to cards that actually have something below the fold. */
.tplx-tile:hover .tplx-frame img.tplx-pan,
.tplx-tile:focus-visible .tplx-frame img.tplx-pan{object-position:bottom center}
/* A touch pointer keeps today's static top crop. There is no hover state to LEAVE on
   touch, so a pan would stick at the bottom of the render and never come back.
   ⚠️ MEASURED: this guard was written as `(hover:none),(pointer:coarse)` and the
   `hover:none` arm DISABLED THE WHOLE FEATURE under test — headless Chrome reports
   `(hover:none)` true even with a fine pointer, so the pan could not be exercised and
   would have shipped on the strength of a class name alone. `(pointer:coarse)` is the
   more accurate test in any case: a hybrid laptop has a touchscreen AND a mouse, reports
   a fine primary pointer, and should pan. */
@media (pointer:coarse){
  .tplx-frame img{transition:none}
  .tplx-tile:hover .tplx-frame img.tplx-pan{object-position:top center}
}
/* THIS SHELF CARRIED NO prefers-reduced-motion HANDLING AT ALL until now — not for the
   pan, and not for the lift the card already had. Under the setting nothing animates: the
   card CUTS to the middle of the render on hover, so a member who cannot take motion
   still gets to see past the fold. */
@media (prefers-reduced-motion:reduce){
  .tplx-frame{transition:none}
  .tplx-tile:hover .tplx-frame{transform:none}
  .tplx-frame img{transition:none}
  .tplx-tile:hover .tplx-frame img.tplx-pan,
  .tplx-tile:focus-visible .tplx-frame img.tplx-pan{object-position:center center}
}
.tplx-meta{display:flex;align-items:center;gap:8px;padding:0 2px}
.tplx-meta .nm{font-weight:600;font-size:13.5px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tplx-meta .sub{color:var(--fnt);font-size:12px;white-space:nowrap}
.tplx-hover{position:absolute;inset:auto 0 0 0;padding:10px;display:flex;gap:8px;justify-content:flex-end;
  background:linear-gradient(to top,rgba(18,18,30,.62),transparent);opacity:0;transition:.16s}
.tplx-tile:hover .tplx-hover{opacity:1}
.tplx-hover span{height:30px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;background:rgba(255,255,255,.94);color:#1d1e2b}
.tplx-hover span.pri{background:var(--acc);color:#fff}

.tplx-tag{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;
  border-radius:20px;font-size:11px;font-weight:700;background:var(--pnl);color:var(--tx);box-shadow:var(--shadow-s)}
.tplx-tag.new{color:var(--grn)}
.tplx-tag.right{left:auto;right:9px;color:var(--fsc-muted,#6a6a8b)}

/* ── THE DRAWN SKELETON ───────────────────────────────────────────────
   Only ~13% of library rows carry a preview image. The other 87% must still
   LOOK like a page, or the shelf reads as a wall of empty cards — which is
   how the first pass of this failed: the shapes were painted in the hairline
   tokens and were invisible against the card. This is a real wireframe of the
   shape the design actually is (page / section / email / site), drawn in the
   skeleton tokens above, and captioned so it is never mistaken for a photo of
   the design. Every card carries one; none is ever blank. */
.tplx-schem{position:absolute;inset:0;background:var(--skbg);display:flex;flex-direction:column;overflow:hidden}
.tplx-schem .sk-nav{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid var(--sk3);flex:0 0 auto}
.tplx-schem .sk-nav .lg{width:14px;height:14px;border-radius:4px;background:var(--sk1);flex:0 0 auto}
.tplx-schem .sk-nav .nm{width:34px;height:5px;border-radius:3px;background:var(--sk1)}
.tplx-schem .sk-nav .sp{flex:1}
.tplx-schem .sk-nav em{width:20px;height:4px;border-radius:3px;background:var(--sk2);display:block}
.tplx-schem .sk-nav .cta{width:34px;height:12px;border-radius:7px;background:var(--sk1)}
.tplx-schem .sk-hero{padding:14px 11px 12px;flex:0 0 auto}
.tplx-schem .sk-hero i{display:block;border-radius:3px;background:var(--sk1);margin-bottom:6px}
.tplx-schem .sk-hero i.t{height:9px;width:62%}
.tplx-schem .sk-hero i.t2{height:9px;width:44%}
.tplx-schem .sk-hero i.p{height:4px;width:76%;background:var(--sk2)}
.tplx-schem .sk-hero i.p2{height:4px;width:58%;background:var(--sk2)}
.tplx-schem .sk-hero i.btn{height:13px;width:52px;border-radius:7px;margin-top:9px}
.tplx-schem .sk-cards{display:flex;gap:7px;padding:0 11px 11px;flex:1;min-height:0}
.tplx-schem .sk-cards b{flex:1;border-radius:6px;background:var(--sk3);border:1px solid var(--sk2);display:block}
.tplx-schem .sk-band{flex:1;margin:11px;border-radius:8px;background:var(--sk3);border:1px solid var(--sk2);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 16px}
.tplx-schem .sk-band i{display:block;height:6px;border-radius:3px;background:var(--sk1)}
.tplx-schem .sk-mail{width:58%;margin:9px auto 0;flex:1;border:1px solid var(--sk2);border-radius:6px 6px 0 0;
  background:var(--pnl);padding:9px;display:flex;flex-direction:column;gap:6px;min-height:0}
.tplx-schem .sk-mail .img{height:34%;border-radius:4px;background:var(--sk2);flex:0 0 auto}
.tplx-schem .sk-mail i{display:block;height:5px;border-radius:3px;background:var(--sk1)}
.tplx-schem .cap{position:absolute;left:0;right:0;bottom:0;padding:5px 10px;font-size:10.5px;font-weight:600;
  color:var(--fnt);background:var(--pnl);border-top:1px solid var(--ln);text-align:center}

/* WO-EMAILPREV — the STRUCTURE-DERIVED wireframe. Same drawn-SVG-free approach as the
   generic schematic above (divs + tokens, nothing to fetch), but the bands come from the
   row's own block tree, so two templates without images no longer look identical. */
.tplx-schem .sk-doc{position:absolute;left:0;right:0;top:0;bottom:19px;display:flex;flex-direction:column;
  gap:3px;padding:7px 10px;overflow:hidden}
.tplx-schem .sk-doc.email{width:62%;margin:0 auto;background:var(--pnl);border:1px solid var(--sk3);
  border-bottom:0;border-radius:5px 5px 0 0;padding:7px 8px}
/* every band may shrink: nine fixed-height bands overflowed the 16:11 frame and the
 last one clipped under the caption. Shrinking a heading bar reads fine; clipping does not. */
.tplx-schem .sk-doc > *{flex:0 1 auto;min-height:0}
.tplx-schem .sb-img{flex:1 1 0;min-height:12px;border-radius:4px;background:var(--sk2);
  border:1px solid var(--sk3)}
.tplx-schem .sb-h{height:8px;border-radius:3px;background:var(--sk1)}
.tplx-schem .sb-p{display:flex;flex-direction:column;gap:3px}
.tplx-schem .sb-p i{display:block;height:4px;border-radius:2px;background:var(--sk2)}
.tplx-schem .sb-btn{height:12px;width:46px;border-radius:6px;background:var(--sk1)}
.tplx-schem .sb-hr{height:1px;background:var(--sk3);margin:2px 0}
.tplx-schem .sb-cols{flex:1 1 0;min-height:14px;display:flex;gap:5px}
.tplx-schem .sb-cols > span{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.tplx-schem .sb-more{height:4px;border-radius:2px;background:var(--sk3);width:34%;margin:1px auto 0}
/* a dark band in the design draws as a dark band in the wireframe — the one colour cue */
.tplx-schem .dk{background:var(--sk1);border-color:var(--sk1)}
.tplx-schem .sb-p.dk i,.tplx-schem .sb-cols.dk > span > *{background:var(--sk2)}

/* locked — visible, blurred, padlocked. Never removed from the shelf. */
.tplx-lockveil{position:absolute;inset:0;display:grid;place-items:center;background:rgba(245,245,250,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.fs-dark .tplx-lockveil{background:rgba(18,18,28,.45)}
.tplx-lockhex{width:38px;height:43px;background:var(--brt);color:var(--pnl);display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tplx-locknote{position:absolute;left:0;right:0;bottom:0;padding:8px 11px;font-size:11.5px;font-weight:600;
  background:var(--pnl);border-top:1px solid var(--ln);display:flex;align-items:center;gap:8px;color:var(--tx)}

/* blank tile */
.tplx-tile.blank .tplx-frame{display:grid;place-items:center;border-style:dashed;background:
  repeating-linear-gradient(45deg,transparent,transparent 9px,var(--sft) 9px,var(--sft) 18px)}
.tplx-tile.blank .inner{text-align:center;color:var(--fsc-muted,#6a6a8b);padding:12px}
.tplx-tile.blank .g{width:44px;height:50px;margin:0 auto 10px;background:linear-gradient(150deg,var(--acc2),var(--acc));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#fff}

.tplx-empty{padding:52px 20px;text-align:center;color:var(--fnt);max-width:470px;margin:16px auto}
.tplx-empty h4{margin:0 0 6px;color:var(--tx);font-size:16px}
.tplx-empty .tplx-btn{border-color:var(--acc);color:var(--acc2)}
.tplx-empty p{margin:0 0 16px;line-height:1.55}
/* Load more — Hans (8/9): pink and more prominent. The platform's magenta family
   (--gld, the same stop the canonical modal uses for its danger/attention signal);
   #ff2e93 stays reserved, so this uses the token, not that hex. */
.tplx-more{display:flex;justify-content:center;padding:28px 0 10px}
.tplx-more .tplx-btn{height:50px;padding:0 34px;border-radius:14px;font-size:15px;font-weight:700;
  background:var(--gld);border-color:var(--gld);color:#fff;letter-spacing:-.01em;
  box-shadow:0 10px 26px -8px var(--gld)}
.tplx-more .tplx-btn:hover{background:var(--gld);border-color:var(--gld);filter:brightness(1.08);
  transform:translateY(-1px);box-shadow:0 14px 30px -8px var(--gld)}
.tplx-more .tplx-btn[disabled]{filter:none;transform:none}

/* ── buttons ──────────────────────────────────────────────────────────── */
.tplx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;
  border-radius:10px;border:1px solid var(--ln2);background:var(--pnl);color:var(--tx);font-weight:600;
  font-size:13.5px;transition:.15s}
.tplx-btn:hover{border-color:var(--acc);background:var(--pnl2)}
.tplx-btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.tplx-btn.pri:hover{filter:brightness(1.07);background:var(--acc)}
.tplx-btn.ghost{border-color:transparent;background:transparent;color:var(--fsc-muted,#6a6a8b)}
.tplx-btn.ghost:hover{background:var(--pnl2)}
.tplx-btn[disabled]{opacity:.45;pointer-events:none}
.tplx-btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}

/* ── the intent screen ────────────────────────────────────────────────
   The FIRST beat when nothing pre-answered what you are making. A caller
   that already knows (Landing Pages, Campaigns, the Design Canvas) passes
   a surface and never sees this. */
.tplx-intent{flex:1;overflow:auto;padding:26px 30px 34px;background:var(--pnl)}
.tplx-intent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1080px;margin:0 auto}
@media (max-width:1040px){.tplx-intent-grid{grid-template-columns:repeat(2,1fr)}}
.tplx-icard{border:1px solid var(--ln2);border-radius:16px;padding:16px 15px 15px;background:var(--sft);
  text-align:left;transition:.15s;display:flex;flex-direction:column;gap:9px;min-height:150px;position:relative}
.tplx-icard:hover{border-color:var(--acc);background:var(--pnl);transform:translateY(-2px);box-shadow:var(--shadow-s)}
.tplx-icard.soon{opacity:.66;cursor:default}
.tplx-icard.soon:hover{border-color:var(--ln2);transform:none;box-shadow:none;background:var(--sft)}
.tplx-icard .ic{width:34px;height:39px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tplx-icard b{font-family:Sora,Inter,sans-serif;font-size:14.5px;font-weight:600;color:var(--tx);line-height:1.3}
.tplx-icard p{margin:0;font-size:12.3px;color:var(--fnt);line-height:1.45}
.tplx-icard .n{font-size:11.5px;color:var(--fsc-muted,#6a6a8b);font-variant-numeric:tabular-nums;margin-top:auto}
.tplx-icard .tplx-soonpill{position:absolute;top:13px;right:13px}
.tplx-introw{max-width:1080px;margin:0 auto 14px;display:flex;align-items:baseline;gap:10px}
.tplx-introw h3{font-size:13px;color:var(--fnt);text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* the ⋯ "More options" menu */
.tplx-more-wrap{position:relative}
.tplx-dots{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--fsc-muted,#6a6a8b);
  border:1px solid var(--ln2);background:var(--pnl);font-size:18px;line-height:1}
.tplx-dots:hover{border-color:var(--acc);color:var(--tx)}
.tplx-menu{position:absolute;top:40px;right:0;z-index:5;width:290px;background:var(--pnl);
  border:1px solid var(--ln2);border-radius:14px;box-shadow:var(--shadow);padding:7px;display:none}
.tplx-menu.on{display:block}
.tplx-menu .hd{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fnt);
  font-weight:700;padding:7px 10px 6px}
.tplx-mi{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--tx);text-align:left;font-size:13.5px}
.tplx-mi:hover{background:var(--sft)}
.tplx-mi.soon{opacity:.62;cursor:default}
.tplx-mi.soon:hover{background:none}
.tplx-mi .ic{width:20px;height:23px;flex:0 0 auto;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tplx-mi .tplx-soonpill{margin-left:auto}

/* ── detail ───────────────────────────────────────────────────────────── */
.tplx-detail{flex:1;display:flex;min-width:0}
.tplx-stage{flex:1;min-width:0;background:var(--sft);display:flex;flex-direction:column}
.tplx-stagebar{display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid var(--ln);background:var(--pnl)}
.tplx-stagearea{flex:1;min-height:0;overflow:auto;padding:18px 20px;display:flex;justify-content:center;align-items:flex-start}
.tplx-viewport{width:100%;max-width:940px;border:1px solid var(--ln2);border-radius:12px;overflow:hidden;
  background:var(--pnl);box-shadow:0 20px 50px rgba(20,20,40,.14);position:relative;min-height:260px}
html.fs-dark .tplx-viewport{box-shadow:0 20px 50px rgba(0,0,0,.5)}
.tplx-viewport.email{max-width:600px}
.tplx-viewport img{width:100%;display:block}
.tplx-emailhint{text-align:center;color:var(--fnt);font-size:12px;margin-bottom:9px}
.tplx-chrome{height:28px;background:var(--sft);border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:6px;padding:0 10px}
.tplx-chrome i{width:8px;height:8px;border-radius:50%;background:var(--ln2);display:block}
.tplx-chrome .url{margin-left:8px;font-size:11px;color:var(--fnt);font-family:ui-monospace,Menlo,monospace}

.tplx-flip{display:flex;align-items:center;gap:10px;padding:11px 15px;border-top:1px solid var(--ln);background:var(--pnl)}
.tplx-strip{flex:1;display:flex;gap:9px;overflow:auto;padding:2px}
.tplx-pg{flex:0 0 auto;width:106px;border-radius:8px;text-align:left}
.tplx-pg .f{border:1px solid var(--ln2);border-radius:7px;overflow:hidden;height:66px;background:var(--pnl2);position:relative}
.tplx-pg .f img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tplx-pg.on .f{border-color:var(--acc);box-shadow:0 0 0 2px var(--accsoft)}
.tplx-pg .n{font-size:11.5px;color:var(--fnt);margin-top:5px;padding-left:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tplx-pg.on .n{color:var(--acc2);font-weight:600}
.tplx-arrow{width:32px;height:32px;border-radius:9px;border:1px solid var(--ln2);display:grid;place-items:center;
  color:var(--fsc-muted,#6a6a8b);background:var(--pnl);flex:0 0 auto}
.tplx-arrow:hover{border-color:var(--acc)}

.tplx-info{width:356px;flex:0 0 356px;border-left:1px solid var(--ln);background:var(--pnl);display:flex;flex-direction:column;min-height:0}
.tplx-scrollpart{flex:1;overflow:auto;padding:18px}
.tplx-info h3{font-size:19px;color:var(--brt);margin-bottom:3px}
.tplx-byline{color:var(--fnt);font-size:12.5px;margin-bottom:13px}
.tplx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}
.tplx-chip{height:26px;padding:0 10px;border-radius:20px;background:var(--sft);color:var(--fsc-muted,#6a6a8b);font-size:12px;
  display:inline-flex;align-items:center;gap:6px}
.tplx-chip.kelly{background:var(--grnsoft);color:var(--grn);font-weight:600}
.tplx-chip.lav{background:var(--accsoft);color:var(--acc2);font-weight:600}
.tplx-chip.warn{background:var(--ambsoft);color:var(--amb);font-weight:600}
.tplx-desc{color:var(--fsc-muted,#6a6a8b);line-height:1.6;font-size:13.5px;margin:0 0 16px}
.tplx-seclbl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fnt);font-weight:700;margin:0 0 9px}
.tplx-incl{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px;max-height:190px;overflow:auto}
.tplx-incl li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--fsc-muted,#6a6a8b)}
.tplx-incl li .d{width:6px;height:6px;border-radius:50%;background:var(--ln2);flex:0 0 auto}

.tplx-field{margin-bottom:14px}
.tplx-field label{display:block;font-size:12.5px;color:var(--fsc-muted,#6a6a8b);margin-bottom:6px;font-weight:600}
.tplx-field input[type=text]{width:100%;height:38px;border-radius:10px;border:1.5px solid var(--ln2);background:var(--sft);
  padding:0 12px;color:var(--tx);outline:0}
.tplx-field input[type=text]:focus{border-color:var(--acc);background:var(--pnl)}

.tplx-dest{display:flex;flex-direction:column;gap:8px}
/* WO-WALKTHROUGH (8/9): one destination is a statement, not a choice. */
.tplx-dest.single .tplx-mk{display:none}
.tplx-dest.single .tplx-dopt{cursor:default}
.tplx-dopt{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--ln2);border-radius:12px;
  background:var(--sft);text-align:left;width:100%;transition:.15s}
.tplx-dopt:hover{border-color:var(--acc)}
.tplx-dopt.on{border-color:var(--acc);background:var(--accsoft)}
.tplx-dopt.soon{opacity:.66;cursor:default}
.tplx-dopt.soon:hover{border-color:var(--ln2)}
.tplx-gi{width:26px;height:30px;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tplx-gi.canvas{background:linear-gradient(150deg,#8b88ff,#4f4bd6)}
.tplx-gi.wp{background:linear-gradient(150deg,#9aa4b2,#4c5866)}
.tplx-gi.mail{background:linear-gradient(150deg,#ffc46b,#e0813b)}
.tplx-dopt .tx{flex:1;min-width:0}
.tplx-dopt .tx b{display:block;font-size:13.5px;font-weight:600;color:var(--tx)}
.tplx-dopt .tx span{display:block;font-size:12px;color:var(--fnt);line-height:1.4}
.tplx-mk{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ln2);flex:0 0 auto}
.tplx-dopt.on .tplx-mk{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 3px var(--pnl)}
.tplx-soonpill{height:21px;padding:0 8px;border-radius:20px;background:var(--ambsoft);color:var(--amb);
  font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;flex:0 0 auto}

.tplx-sitechip{margin-top:9px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  background:var(--sft);font-size:12.5px;color:var(--fsc-muted,#6a6a8b);flex-wrap:wrap}
.tplx-sitechip a{color:var(--acc2);text-decoration:none;font-weight:600;cursor:pointer}
.tplx-sitechip.warn{background:var(--ambsoft);color:var(--amb)}

.tplx-actionbar{border-top:1px solid var(--ln);padding:13px 17px;display:flex;flex-direction:column;gap:9px;background:var(--pnl);flex:0 0 auto}
.tplx-why{font-size:12px;color:var(--fnt);line-height:1.4}
.tplx-row2{display:flex;gap:8px}
.tplx-row2 .tplx-btn{flex:1}

/* ── the builder question / site picker ───────────────────────────────── */
.tplx-qwrap h3{font-size:17px;margin-bottom:4px}
.tplx-lead{color:var(--fsc-muted,#6a6a8b);font-size:13.5px;line-height:1.55;margin:0 0 15px}
.tplx-qc{border:1px solid var(--ln2);border-radius:14px;padding:12px;text-align:left;background:var(--sft);
  transition:.15s;width:100%;margin-bottom:10px}
.tplx-qc:hover{border-color:var(--acc)}
.tplx-qc.on{border-color:var(--acc);background:var(--accsoft);box-shadow:0 0 0 3px var(--accsoft)}
.tplx-qc .top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.tplx-qc .top b{font-size:14px;color:var(--tx)}
.tplx-qc p{margin:6px 0 0;font-size:12.5px;color:var(--fsc-muted,#6a6a8b);line-height:1.5}
.tplx-helper{border:1px solid var(--ln2);background:var(--sft);border-radius:12px;padding:12px 13px;font-size:12.5px;color:var(--fsc-muted,#6a6a8b)}
.tplx-helper b{color:var(--tx)}
.tplx-helper ol{margin:8px 0 0;padding-left:18px;line-height:1.7}
.tplx-helper.kelly{background:var(--grnsoft);border-color:transparent}
.tplx-helper .quiet{margin-top:8px;color:var(--fnt)}
.tplx-srow{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--ln2);border-radius:12px;
  background:var(--sft);text-align:left;width:100%;margin-bottom:8px}
.tplx-srow:hover{border-color:var(--acc)}
.tplx-srow.on{border-color:var(--acc);background:var(--accsoft)}
.tplx-srow .tx{flex:1;min-width:0}
.tplx-srow .tx b{display:block;font-size:13.5px;color:var(--tx)}
.tplx-srow .tx span{display:block;font-size:12px;color:var(--fnt)}
.tplx-srow .tx span.warn{color:var(--amb);font-weight:600}
.tplx-srow .tx span.ok{color:var(--grn);font-weight:600}

/* ── handoff + receipt ────────────────────────────────────────────────── */
.tplx-handoff{flex:1;display:grid;place-items:center;padding:28px;background:var(--sft);overflow:auto}
.tplx-hcard{width:min(560px,100%);background:var(--pnl);border:1px solid var(--ln2);border-radius:18px;
  padding:26px;box-shadow:var(--shadow-s);text-align:center}
.tplx-hexbig{width:64px;height:72px;margin:0 auto 15px;background:linear-gradient(150deg,var(--acc2),var(--acc));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#fff}
.tplx-hexbig.pulse{animation:tplxPulse 1.6s ease-in-out infinite}
@keyframes tplxPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.tplx-hcard h3{font-size:19px;color:var(--brt);margin-bottom:6px}
.tplx-hcard .sub{color:var(--fnt);font-size:13px;margin-bottom:20px}
.tplx-steps{text-align:left;max-width:360px;margin:0 auto;display:flex;flex-direction:column;gap:11px}
.tplx-step{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--fnt);transition:.2s}
.tplx-step.done{color:var(--tx)}
.tplx-step .b{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ln2);display:grid;place-items:center;flex:0 0 auto}
.tplx-step .b svg{opacity:0;transition:.2s}
.tplx-step.done .b svg{opacity:1}
.tplx-step.done .b{background:var(--grn);border-color:var(--grn);color:#fff}
.tplx-step.now .b{border-color:var(--acc);border-right-color:transparent;animation:tplxSpin .8s linear infinite}
.tplx-step.fail .b{background:var(--gld);border-color:var(--gld);color:#fff}
@keyframes tplxSpin{to{transform:rotate(360deg)}}
.tplx-bar{height:4px;border-radius:3px;background:var(--sft);overflow:hidden;margin-top:20px}
.tplx-bar i{display:block;height:100%;background:var(--acc);width:0;transition:width .5s ease}
.tplx-receipt{border:1px solid var(--ln);border-radius:12px;margin:16px 0;overflow:hidden;text-align:left}
.tplx-receipt div{display:flex;gap:12px;padding:9px 13px;border-bottom:1px solid var(--ln);font-size:12.5px}
.tplx-receipt div:last-child{border-bottom:0}
.tplx-receipt span{color:var(--fnt);width:112px;flex:0 0 auto}
.tplx-receipt b{color:var(--tx);font-weight:600}
.tplx-warn{display:flex;gap:10px;padding:11px 13px;border-radius:11px;background:var(--ambsoft);color:var(--amb);
  font-size:12.5px;line-height:1.5;text-align:left;margin-top:14px}