/*!
 * PHASE 6 · Slice 2 — shared stage frame.
 * Wraps EVERY stage tool (Steps 1–8) with one product chrome + orientation header + the signature
 * 8-stage rail, so opening any stage from the Workspace feels like one product. Uses LBIC DS v1 tokens.
 * Only shown when a tool is opened in project context (?tw_project=…); standalone public tools are unaffected.
 */
.twf{ font-family:var(--lbic-sans); }

/* product bar (mirrors the Workspace shell bar) */
.twf-bar{ position:sticky; top:0; z-index:40; background:var(--lbic-surface); border-bottom:1px solid var(--lbic-line); }
.twf-bar .in{ max-width:var(--lbic-maxw); margin:0 auto; padding:0 24px; height:54px; display:flex; align-items:center; gap:16px; }
.twf-brand{ display:flex; align-items:baseline; gap:9px; text-decoration:none; }
.twf-brand .co{ font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lbic-ink-faint); }
.twf-brand .sep{ color:var(--lbic-line-strong); }
.twf-brand .app{ font-family:var(--lbic-serif); font-size:1.08rem; color:var(--lbic-ink); }
.twf-bar .spacer{ flex:1; }
.twf-back{ font-weight:600; font-size:.86rem; color:var(--lbic-ink-soft); text-decoration:none; padding:6px 12px; border-radius:var(--lbic-r-sm); }
.twf-back:hover{ background:var(--lbic-surface-2); color:var(--lbic-ink); text-decoration:none; }
@media(max-width:520px){ .twf-brand .co,.twf-brand .sep{ display:none; } }

/* orientation header */
.twf-ctx{ max-width:var(--lbic-maxw); margin:0 auto; padding:22px 24px 4px; }
.twf-crumb{ font-size:.84rem; color:var(--lbic-ink-soft); margin-bottom:12px; }
.twf-crumb a{ color:var(--lbic-primary); font-weight:600; text-decoration:none; }
.twf-crumb a:hover{ text-decoration:underline; }
.twf-eyebrow{ font-family:var(--lbic-sans); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lbic-primary); display:block; margin-bottom:6px; }
.twf-title{ font-family:var(--lbic-serif); font-weight:500; font-size:clamp(1.5rem,3vw,2rem); color:var(--lbic-ink); line-height:1.15; margin:0; }
.twf-proj{ font-size:.86rem; color:var(--lbic-ink-faint); font-weight:600; margin-top:6px; }

/* rail (shared component — matches the Workspace shell) */
.twf-rail-wrap{ max-width:var(--lbic-maxw); margin:0 auto; padding:18px 24px 8px; position:relative; }
.twf-rail{ display:flex; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.twf-rail::-webkit-scrollbar{ height:4px; } .twf-rail::-webkit-scrollbar-thumb{ background:var(--lbic-line-strong); border-radius:2px; }
.twf-stage{ flex:1 0 96px; position:relative; text-align:center; padding-top:26px; text-decoration:none; color:inherit; }
.twf-stage::before,.twf-stage::after{ content:""; position:absolute; top:12px; height:2px; background:var(--lbic-line); }
.twf-stage::before{ left:0; width:50%; } .twf-stage::after{ right:0; width:50%; }
.twf-stage:first-child::before{ display:none; } .twf-stage:last-child::after{ display:none; }
.twf-stage.done::before,.twf-stage.done::after,.twf-stage.current::before{ background:#cfe6d8; }
.twf-dot{ position:absolute; top:2px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%;
  background:var(--lbic-surface); border:2px solid var(--lbic-line-strong); display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:700; color:var(--lbic-ink-faint); z-index:1; }
.twf-stage.done .twf-dot{ background:var(--lbic-good); border-color:var(--lbic-good); color:#fff; }
.twf-stage.current .twf-dot{ background:var(--lbic-primary); border-color:var(--lbic-primary); color:#fff; box-shadow:0 0 0 4px var(--lbic-primary-soft); }
.twf-stage.action .twf-dot{ border-color:var(--lbic-warn); color:var(--lbic-warn); box-shadow:0 0 0 4px var(--lbic-warn-bg); }
.twf-stage.blocked .twf-dot{ border-color:var(--lbic-crit); color:var(--lbic-crit); box-shadow:0 0 0 4px var(--lbic-crit-bg); }
.twf-stage .nm{ font-size:.78rem; font-weight:600; color:var(--lbic-ink-soft); line-height:1.2; padding:0 4px; }
.twf-stage.current .nm{ color:var(--lbic-ink); }
.twf-stage:hover .nm{ color:var(--lbic-ink); }
@media(max-width:720px){
  .twf-rail-wrap::after{ content:""; position:absolute; top:18px; right:0; bottom:8px; width:34px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--lbic-ground)); }
  .twf-stage{ flex:0 0 92px; }
}

/* body constraint for the tool that follows the frame */
.twf-body{ max-width:var(--lbic-maxw); margin:0 auto; padding:8px 24px 80px; }
.twf-hr{ max-width:var(--lbic-maxw); margin:14px auto 0; height:1px; background:var(--lbic-line); }

/* When a tool is opened in Workspace context, suppress the marketing chrome so it reads as the app.
 * Scoped to body.lbic-tw-framed — standalone public visits keep their normal site header/footer. */
body.lbic-tw-framed{ background:var(--lbic-ground)!important; }
body.lbic-tw-framed header.dsh,body.lbic-tw-framed footer.dsf,
body.lbic-tw-framed #masthead,body.lbic-tw-framed header.ct-header,body.lbic-tw-framed [data-device].ct-header,
body.lbic-tw-framed #colophon,body.lbic-tw-framed footer.ct-footer,body.lbic-tw-framed .ct-footer,
body.lbic-tw-framed .entry-header,body.lbic-tw-framed .page-title,body.lbic-tw-framed .entry-title,
body.lbic-tw-framed .lbic-carm-banner,body.lbic-tw-framed .carm-banner,body.lbic-tw-framed #lbic-carm-bar,
body.lbic-tw-framed .kodee-fab,body.lbic-tw-framed [class*="kodee"],body.lbic-tw-framed [class*="ask-ai"],body.lbic-tw-framed [id*="ask-ai"]{ display:none!important; }
body.lbic-tw-framed .ct-container,body.lbic-tw-framed .ct-container-full,body.lbic-tw-framed #main-container,body.lbic-tw-framed .entry-content,body.lbic-tw-framed main#main,body.lbic-tw-framed .site-main{ max-width:none!important; margin:0!important; padding:0!important; }
body.admin-bar.lbic-tw-framed .twf-bar{ top:32px!important; }
/* F1 fallback: if the Step 3 tool didn't start by itself, show only its own start button and note. */
body.lbic-tw-framed.lbic-tw-show-start .iit-hero{ display:block!important; text-align:center; padding:8px 0 0!important; }
body.lbic-tw-framed.lbic-tw-show-start .iit-hero > :not(.iit-hero-cta):not(.iit-hero-note){ display:none!important; }