/* Build_30A rail-30a.css — bolt-on left-rail stepper. Delete this file to revert. */

/* ---------- Body offsets (Ram Sept-17 iter-3: rail left + breadcrumb top) ---------- */
body.rail-desktop { padding-left: 310px; padding-top: 40px; }
body.rail-mobile  { padding-top: 62px; }

/* Desktop breadcrumb — Home > Workflow > Step N of 6 — <Name> */
.rail-30a-crumb-desktop{
  position: fixed;
  top: 0; left: 310px; right: 0;
  height: 40px;
  z-index: 25;
  background: rgba(10,20,24,0.96);
  border-bottom: 1px solid rgba(94,234,212,0.30);
  display: flex; align-items: center;
  padding: 0 22px;
  font: 700 14px "Segoe UI", system-ui, sans-serif;
  color: #93aab0;
  letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.40);
}
/* Ram 2026-10-04 click-enabled-must-have-pill-background rule:
   Home crumb is click-enabled -> give it a visible pill-ish background. */
.rail-30a-crumb-desktop .cr-home{
  color: var(--teal);
  text-decoration: none;
  background: rgba(45,212,191,.12);
  border: 1px solid var(--teal-dim);
  border-radius: 6px;
  padding: 2px 10px;
  transition: background .15s ease, border-color .15s ease;
}
.rail-30a-crumb-desktop .cr-home:hover{
  background: rgba(45,212,191,.22);
  border-color: var(--teal);
}
.rail-30a-crumb-desktop .cr-section{
  color: #cfe9e5;
}
.rail-30a-crumb-desktop .cr-sep{
  color: rgba(94,234,212,0.55);
  margin: 0 10px;
  font-weight: 400;
}
.rail-30a-crumb-desktop .cr-current{
  color: var(--teal);
  font-weight: 900;
  text-shadow: 0 0 6px rgba(94,234,212,0.35);
}
@media (max-width: 899px){
  .rail-30a-crumb-desktop{ display: none; }
}

/* ---------- Desktop rail — Sept-17 iter-2: labels bigger than the right-panel cards ---------- */
.rail-30a{
  position: fixed; left: 0; top: 0; bottom: 0; width: 310px;
  background: linear-gradient(180deg, #0c1c22 0%, #0a1418 65%);
  border-right: 2px solid var(--teal-dim);
  box-shadow: 4px 0 22px rgba(0,0,0,0.55), inset -1px 0 0 rgba(94,234,212,0.18);
  z-index: 30;
  display: flex; flex-direction: column;
  padding: 16px 0 18px 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow-y: auto;
}
.rail-30a .rail-title{
  color: var(--teal);
  /* Ram 2026-09-29: 20% font reduction across the rail — was "awkward looking" at prior sizes. */
  font: 900 13px/1.2 "Segoe UI";
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 6px 18px 12px 18px;
  border-bottom: 1px solid rgba(94,234,212,0.35);
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(94,234,212,0.35);
}
.rail-30a .rail-list{ list-style:none; margin:0; padding:0; }
.rail-30a .rail-step{
  position: relative;
  min-height: 74px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  color: #c6d5d8;
  cursor: default;
  border-left: 5px solid transparent;
  transition: background .18s ease, border-left-color .18s ease;
}
.rail-30a .rail-step + .rail-step::before{
  content: ""; position: absolute; left: 33px; top: -8px; width: 2px; height: 12px;
  background: rgba(94,234,212,0.30);
}
.rail-30a .rail-circle{
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 900 16px "IBM Plex Mono", monospace;
  border: 2px solid var(--edge);
  background: #0a141b;
  color: #8fa8ab;
  flex: 0 0 34px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rail-30a .rail-label{
  flex: 1 1 auto;
  font: 900 19px/1.22 "Segoe UI";
  color: inherit;
  letter-spacing: .01em;
}
.rail-30a .rail-help{
  color: var(--teal-dim);
  font: 800 9px "Segoe UI";
  border: 1.5px solid var(--teal-dim);
  border-radius: 50%;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  cursor: help;
  flex: 0 0 14px;
}

/* Done */
.rail-30a .rail-step.done{ color: #e6f2f1; cursor: pointer; }
.rail-30a .rail-step.done:hover{ background: rgba(94,234,212,0.08); border-left-color: var(--teal-dim); }
.rail-30a .rail-step.done .rail-circle{
  background: var(--teal); color: #04211d; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45,212,191,0.20);
}
/* Ram 2026-10-04 click-enabled-pill-background rule — Modify buttons on done
   steps carry a visible background when the step is hovered (visible state). */
.rail-30a .rail-step.done .rail-modify{
  opacity: 0;
  transition: opacity .15s ease;
  background: rgba(45,212,191,.14);
  border: 1px solid var(--teal-dim);
  color: var(--teal);
  font: 700 10px "Segoe UI";
  border-radius: 10px;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: 4px;
}
.rail-30a .rail-step.done:hover .rail-modify{ opacity: 1; }
.rail-30a .rail-step.done .rail-modify:hover{ background: var(--teal-dim); color: #0b1418; }

/* Active — commanding presence */
.rail-30a .rail-step.active{
  color: #ffffff;
  background: linear-gradient(90deg, rgba(94,234,212,0.16) 0%, rgba(94,234,212,0.05) 100%);
  border-left-color: var(--teal);
  box-shadow: inset 0 0 0 1px rgba(94,234,212,0.15);
}
.rail-30a .rail-step.active .rail-circle{
  background: var(--teal); color: #04211d; border-color: var(--teal);
  box-shadow: 0 0 0 5px rgba(94,234,212,0.30), 0 2px 12px rgba(94,234,212,0.55);
  transform: scale(1.08);
}
.rail-30a .rail-step.active .rail-label{ font-weight: 900; font-size: 22px; line-height: 1.15; }
.rail-30a .rail-here{
  display: none;
  font: 900 10px "Segoe UI";
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #04211d;
  background: var(--amber);
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 6px;
  margin-right: 8px;
  box-shadow: 0 2px 10px rgba(224,140,0,0.55);
}
.rail-30a .rail-step.active .rail-here{ display: inline-block; }

/* Ram 2026-09-29 Build_30E: symmetric arrows on active rail step — Previous on
   its LEFT edge, Next on its RIGHT edge. Both hidden on non-active steps but
   kept in the DOM so state-change is a pure display toggle. Amber matches the
   rail-here "you are here" chip so nav-actionability reads at a glance. */
.rail-30a .rail-prev,
.rail-30a .rail-next{
  display: none;
  font: 900 11px "Segoe UI",system-ui,sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #04211d;
  background: var(--amber);
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(224,140,0,0.55);
  transition: transform .12s ease, box-shadow .12s ease;
  flex: 0 0 auto;
}
.rail-30a .rail-step.active .rail-prev,
.rail-30a .rail-step.active .rail-next{ display: inline-block; }
.rail-30a .rail-prev{ margin-right: 8px; }
.rail-30a .rail-next{ margin-left: 8px; }
.rail-30a .rail-prev:hover,
.rail-30a .rail-next:hover{ transform: translateY(-1px); box-shadow: 0 4px 14px rgba(224,140,0,0.7); }
.rail-30a .rail-next[disabled]{ opacity: 0.4; cursor: default; box-shadow: none; }
.rail-30a .rail-next[disabled]:hover{ transform: none; box-shadow: none; }

/* Ram 2026-09-29 Build_30E: prominent "Start a new verification" button ABOVE
   Step 1. Always visible, always reachable, resets the whole workbench. Teal
   accent so it reads as a distinct action-class from the amber Prev/Next arrows. */
.rail-30a .rail-start-new{
  display: block;
  width: calc(100% - 24px);
  margin: 4px 12px 10px;
  padding: 9px 14px;
  background: rgba(94,234,212,0.08);
  border: 1.5px solid var(--teal-dim);
  border-radius: 7px;
  color: var(--teal);
  font: 800 11px "Segoe UI",system-ui,sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.rail-30a .rail-start-new:hover{
  background: rgba(94,234,212,0.16);
  border-color: var(--teal);
  transform: translateY(-1px);
}

/* Ram 2026-09-29: Kill the floating amber demo playback banner — Next lives
   in the rail now, no floating banner needed. */
.rail-demo-banner{ display: none !important; }

/* Locked */
.rail-30a .rail-step.locked{
  color: #506b6a;
  cursor: not-allowed;
}
.rail-30a .rail-step.locked .rail-circle{
  color: #506b6a; border-color: #26424a; background: transparent;
}
.rail-30a .rail-step.locked .rail-lock{ font-size: 12px; }

/* Modify buttons hidden by default when not .done */
.rail-30a .rail-step:not(.done) .rail-modify{ display: none; }

/* ---------- Mobile breadcrumb bar ---------- */
.rail-30a.rail-mobile-bar{
  position: sticky; top: 0; left: 0; right: 0;
  width: 100%; height: 52px;
  flex-direction: column;
  padding: 0;
  border-right: 0;
  border-bottom: 1px solid var(--edge);
  z-index: 30;
}
.rail-30a.rail-mobile-bar .rail-mb-line{
  flex: 1 1 auto;
  display: flex; align-items: center;
  padding: 0 14px;
  color: var(--teal);
  font: 700 13px "Segoe UI";
}
.rail-30a.rail-mobile-bar .rail-mb-progress{
  height: 4px; width: 100%;
  background: rgba(94,234,212,0.10);
  overflow: hidden;
}
.rail-30a.rail-mobile-bar .rail-mb-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-dim));
  transition: width .25s ease;
}

/* ---------- Modify confirmation modal (bolt-on variant of .backdrop/.modal) ---------- */
.rail-confirm-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 40;
}
.rail-confirm-backdrop.on{ display: flex; }
.rail-confirm-modal{
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 20px 22px;
  max-width: 440px;
  width: calc(100% - 40px);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.rail-confirm-modal h3{
  margin: 0 0 10px 0;
  color: var(--teal);
  font: 700 15px "Segoe UI";
}
.rail-confirm-modal p{
  margin: 0 0 16px 0;
  color: var(--ink);
  font: 400 13px "Segoe UI";
  line-height: 1.45;
}
.rail-confirm-actions{
  display: flex; gap: 10px; justify-content: flex-end;
}
.rail-confirm-btn{
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--dim);
  font: 700 12px "Segoe UI";
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.rail-confirm-btn.primary{
  background: var(--teal); color: #0b1418; border-color: var(--teal);
}
.rail-confirm-btn:hover{ color: var(--ink); }
.rail-confirm-btn.primary:hover{ background: var(--teal-dim); }

/* Mobile "modify on desktop" toast */
.rail-mobile-note{
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel); color: var(--amber);
  border: 1px solid var(--amber);
  padding: 8px 14px;
  border-radius: 6px;
  font: 700 12px "Segoe UI";
  z-index: 41;
  display: none;
}
.rail-mobile-note.on{ display: block; }

/* Small viewports: hide desktop rail, show mobile bar (JS also toggles) */
@media (max-width: 899px){
  body.rail-desktop{ padding-left: 0; }
}

/* ---------- Top-right action cluster (Build_30A bolt-on) ---------- */
.rail-30a-topright{
  position: fixed;
  top: 12px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 40;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.rail-30a-topright .tr-btn{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal, #5eead4);
  color: #04211d;
  border: 1px solid #04211d;
  border-radius: 999px;
  padding: 7px 14px;
  font: 800 13px "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease, transform .12s ease;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.rail-30a-topright .tr-btn:hover:not(.tr-disabled){
  background: #a4f4e3;
  color: #04211d;
  transform: translateY(-1px);
}
.rail-30a-topright .tr-btn.tr-disabled{
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--edge, #26424a);
  color: var(--dim, #7fa6a5);
}
.rail-30a-topright .tr-ico{ font-size: 14px; line-height: 1; }
.rail-30a-topright .tr-label{ line-height: 1; }

/* Top-right modal fields */
.rail-confirm-backdrop.tr-modal-back .tr-field{
  display: block;
  color: var(--dim, #7fa6a5);
  font: 600 12px "Segoe UI", system-ui, sans-serif;
  margin: 0 0 12px 0;
}
.rail-confirm-backdrop.tr-modal-back .tr-email{
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  background: #0a1418;
  border: 1px solid var(--edge, #26424a);
  border-radius: 4px;
  color: var(--ink, #e6f1f2);
  font: 400 12px "Segoe UI", system-ui, sans-serif;
  box-sizing: border-box;
}
.rail-confirm-backdrop.tr-modal-back .tr-msg{
  margin: 0 0 12px 0;
  color: var(--teal, #5eeadf);
  font: 600 12px "Segoe UI", system-ui, sans-serif;
  min-height: 1em;
}

/* Mobile: icons-only, smaller pills, above the sticky breadcrumb */
@media (max-width: 899px){
  .rail-30a-topright{
    top: 8px;
    right: 8px;
    gap: 6px;
    z-index: 42;
  }
  .rail-30a-topright .tr-btn{
    padding: 0;
    width: 32px;
    height: 32px;
    justify-content: center;
  }
  .rail-30a-topright .tr-label{ display: none; }
  /* Reserve space above the breadcrumb so cluster + bar don't collide */
  body.rail-mobile{ padding-top: 100px; }
  body.rail-mobile .rail-30a.rail-mobile-bar{ top: 48px; }
}

/* -----------------------------------------------------------------------
   Grok graphic overlay cleanup (Ram 2026-09-16).
   ----------------------------------------------------------------------- */
.hero .hs::before { display: none !important; }
.heroloop::after  { display: none !important; }

/* -----------------------------------------------------------------------
   Demo playback banner (Ram Sept-17 Fix 5 v2) — user-clickable step advance.
   Banner shows current step, a Next button, and a close X. Sits at top-center.
   ----------------------------------------------------------------------- */
.rail-demo-banner{
  position: fixed;
  top: 46px; left: 50%; transform: translateX(-50%);
  min-width: 560px; max-width: 92vw;
  background: linear-gradient(90deg,#fbbf24 0%,#f59e0b 100%);
  color: #04211d;
  padding: 14px 20px;
  border-radius: 16px;
  font: 800 15px "Segoe UI",system-ui,sans-serif;
  /* Ram Sept-17 Fix 9: heavier shadow + amber halo so the banner clearly
     dominates the teal reconstruct heading below. */
  box-shadow: 0 18px 50px rgba(0,0,0,0.6),
              0 0 0 4px rgba(251,191,36,0.55),
              0 0 30px rgba(251,191,36,0.35);
  z-index: 42;
  display: none;
}
.rail-demo-banner.on{ display: block; }
.rail-demo-row{
  display: flex; align-items: center; gap: 16px;
}
.rail-demo-banner .rail-demo-step{
  flex: 1 1 auto;
  font-weight: 900;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: .01em;
}
.rail-demo-banner .rail-demo-step b{ font-weight: 900; margin-right: 4px; font-size: 16px; }
.rail-demo-banner .rail-demo-hint{
  display: block; font-weight: 600; font-size: 12.5px;
  color: #4a3a04; margin-top: 2px;
}
.rail-demo-banner .rail-demo-next,
.rail-demo-banner .rail-demo-prev{
  flex: 0 0 auto;
  background: #04211d;
  color: #fbbf24;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font: 900 14px "Segoe UI",system-ui,sans-serif;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform .12s ease, background .15s ease;
}
.rail-demo-banner .rail-demo-prev{
  background: transparent;
  color: #04211d;
  border: 2px solid #04211d;
  padding: 8px 14px;
}
.rail-demo-banner .rail-demo-next:hover:not(:disabled),
.rail-demo-banner .rail-demo-prev:hover:not(:disabled){
  background: #0a2a24; color: #fbbf24; transform: translateY(-1px);
}
.rail-demo-banner .rail-demo-close{
  flex: 0 0 auto;
  background: transparent;
  color: #04211d;
  border: 1.5px solid #04211d;
  border-radius: 50%;
  width: 28px; height: 28px;
  font: 900 14px "Segoe UI";
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.rail-demo-banner .rail-demo-close:hover{ background: rgba(0,0,0,0.15); }
@media (max-width: 899px){
  .rail-demo-banner{ top: 70px; min-width: unset; width: calc(100% - 20px); }
  .rail-demo-row{ flex-wrap: wrap; }
  .rail-demo-banner .rail-demo-step{ flex: 1 1 100%; }
}

/* -----------------------------------------------------------------------
   Card-grid storytelling banner on the workflow screen (Ram 2026-09-16).
   Same card banner the home page uses — consistent story on both pages.
   Copied verbatim from index.html so reconstruct.html can render it.
   ----------------------------------------------------------------------- */
/* Ram Sept-17 Fix 9: unbolded + muted so the amber Demo banner dominates. */
.seehow-heading{margin:16px auto 10px;text-align:center;
  font:500 18px/1.35 "Segoe UI",system-ui,sans-serif;
  color:#7fb8ac;letter-spacing:.3px}

/* Ram Sept-18 Fix 10: prompt-first heading for the action panel that now
   sits at the top of the workflow screen. */
.ask-first-heading{margin:22px auto 6px;text-align:center;
  font:900 24px/1.25 "Segoe UI",system-ui,sans-serif;
  color:#5eead4;letter-spacing:.3px;max-width:900px}
.ask-first-heading b{color:#fbbf24}
.ask-first-sub{text-align:center;color:#a4bfc4;
  font:500 14px/1.5 "Segoe UI",system-ui,sans-serif;
  max-width:780px;margin:0 auto 16px}
.seehow-sub{text-align:center;color:#93aab0;font-size:13.5px;line-height:1.55;
  max-width:640px;margin:0 auto 14px}
.seehow-sub b{color:#e6f2f1}
.banner{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 52px;
  background:linear-gradient(135deg,#0a2622 0%,#0e332e 55%,#0a2a2a 100%);
  color:#e6f5f2;padding:26px 30px 22px;border-radius:16px;margin:0 auto 12px;max-width:1080px;position:relative;
  border:1px solid rgba(94,234,212,.35);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.banner-step{background:rgba(6,26,24,.72);border:2px solid #2dd4bf;border-radius:14px;padding:14px 14px 14px 138px;
  position:relative;min-height:160px;cursor:help;transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease}
.banner-step:hover{box-shadow:0 8px 26px rgba(45,212,191,.45);border-color:#5eead4;transform:translateY(-2px)}
.banner-step .n{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;
  background:#5eead4;color:#04211d;font:900 15px "IBM Plex Mono",monospace;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(45,212,191,.25), 0 2px 6px rgba(0,0,0,.4);z-index:2}
.banner-step .step-icon{position:absolute;left:12px;top:46px;width:112px;height:112px;
  object-fit:contain;background:rgba(94,234,212,.14);border-radius:14px;padding:8px;
  filter:brightness(1.1) drop-shadow(0 2px 4px rgba(0,0,0,.55));
  box-shadow:inset 0 0 0 1px rgba(94,234,212,.25)}
.banner-step h4{margin:2px 0 6px;font:900 22px "Segoe UI",system-ui,sans-serif;color:#ffffff;letter-spacing:.3px}
.banner-step p{margin:0;font-size:14px;color:#cdeee9;line-height:1.5}
.banner-step:not(:nth-child(3n))::after{content:"\2192";position:absolute;right:-40px;top:50%;
  transform:translateY(-50%);font:900 40px "Segoe UI",system-ui,sans-serif;color:#5eead4;
  text-shadow:0 0 12px rgba(94,234,212,.75), 0 2px 4px rgba(0,0,0,.5);pointer-events:none}
.bannerfoot{grid-column:1 / -1;text-align:center;font:900 13px "Segoe UI",system-ui,sans-serif;
  color:#5eead4;padding:10px 0 2px;letter-spacing:.6px;text-shadow:0 0 8px rgba(94,234,212,.5)}
@media (max-width:640px){
  .banner{grid-template-columns:1fr}
  .banner-step:not(:nth-child(3n))::after{display:none}
}

/* ============================================================================
   Ram Sept-18 Fix 11 — Facelift v2: upload gate, channel picker,
   stepwise navigation, Step 6 Decide panel.
   ============================================================================ */

/* --- Choices v2 replaces the old two-card demo|upload layout ---------------- */
.choices-v2{max-width:900px;margin:16px auto 8px;background:rgba(13,42,45,0.55);
  border:1px solid #1e3a3f;border-radius:14px;padding:16px 18px}
.choices-v2 .doc-status{margin-bottom:10px}
.choices-v2 .doc-line{font:800 14px 'Segoe UI';color:#5eead4}
.choices-v2 .doc-line b{color:#fbbf24}
.choices-v2 .doc-sub{font:500 12.5px 'Segoe UI';color:#a4bfc4;margin-top:2px}

.upload-gate{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:10px 0;border-top:1px dashed #234548;margin-top:8px}
.upload-gate .ug-q{font:700 13px 'Segoe UI';color:#e6faf8;margin-right:6px}
.upload-gate .ug-radio{font:500 13px 'Segoe UI';color:#c8e3e0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.upload-gate .ug-radio input{accent-color:#5eead4}

.upload-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:10px 0;border-top:1px dashed #234548}
.upload-panel .ug-choose{background:#5eead4;color:#04211d;border:none;
  border-radius:999px;padding:8px 16px;font:800 12.5px 'Segoe UI';cursor:pointer}
.upload-panel .ug-filename{font:600 12px 'IBM Plex Mono',monospace;color:#a4bfc4}
.upload-panel .ug-status{flex-basis:100%;font:500 12px 'Segoe UI';color:#7fb8ac}

.channel-picker{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:10px 0;border-top:1px dashed #234548;margin-top:6px}
.channel-picker .cp-q{font:700 13px 'Segoe UI';color:#e6faf8;margin-right:6px}
.channel-picker .cp-radio{font:600 13px 'Segoe UI';color:#c8e3e0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.channel-picker .cp-radio input{accent-color:#fbbf24}
.channel-picker .cp-hint{font:400 11.5px 'Segoe UI';color:#7fb8ac}

/* --- Stepwise navigation banner (right panel top) --------------------------- */
.stepwise-nav{display:none;align-items:center;gap:14px;
  margin:10px auto 14px;max-width:1180px;
  background:linear-gradient(90deg,#fbbf24 0%,#f59e0b 100%);
  color:#04211d;padding:12px 18px;border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,0.45),0 0 0 3px rgba(251,191,36,0.4)}
.stepwise-nav .sw-status{flex:1 1 auto;font:900 14px 'Segoe UI';letter-spacing:.01em}
.stepwise-nav .sw-back,.stepwise-nav .sw-next{flex:0 0 auto;
  background:#04211d;color:#fbbf24;border:none;border-radius:999px;
  padding:9px 18px;font:900 13px 'Segoe UI';cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,0.3)}
.stepwise-nav .sw-back{background:transparent;color:#04211d;border:2px solid #04211d;padding:7px 14px}
.stepwise-nav .sw-back:disabled,.stepwise-nav .sw-next:disabled{opacity:.45;cursor:default}
.stepwise-nav .sw-back:hover:not(:disabled),.stepwise-nav .sw-next:hover:not(:disabled){background:#0a2a24;color:#fbbf24}

/* --- Step 6 Decide panel ---------------------------------------------------- */
.sec-decide{background:rgba(4,33,29,0.7);border:2px solid #5eead4;
  border-radius:16px;padding:18px 20px;margin-top:14px;
  box-shadow:0 12px 40px rgba(94,234,212,0.12)}
.sec-decide .sectionbar{color:#5eead4;font:900 14px 'Segoe UI';margin-bottom:12px}
.decide-body{display:flex;flex-direction:column;gap:14px}
.decide-lead{font:600 14px/1.4 'Segoe UI';color:#e6faf8}
.decide-lead b{color:#fbbf24}
.decide-actions{display:flex;flex-wrap:wrap;gap:10px}
.decide-btn{border:2px solid;border-radius:999px;padding:10px 18px;
  font:800 13px 'Segoe UI';cursor:pointer;background:transparent;transition:transform .1s}
.decide-btn:hover{transform:translateY(-1px)}
.decide-btn.decide-selected{background:currentColor;color:#04211d !important}
.decide-support{color:#5eead4;border-color:#5eead4}
.decide-partial{color:#fbbf24;border-color:#fbbf24}
.decide-notsupp{color:#f87171;border-color:#f87171}
.decide-note label{font:600 12px 'Segoe UI';color:#a4bfc4;display:block;margin-bottom:4px}
.decide-note textarea{width:100%;min-height:60px;background:#0a141b;color:#e6faf8;
  border:1px solid #234548;border-radius:8px;padding:8px 10px;
  font:400 12.5px 'Segoe UI';resize:vertical}
.decide-nextsteps{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding-top:6px;border-top:1px dashed #234548}
.decide-nextsteps button{background:transparent;color:#5eead4;border:1px solid #5eead4;
  border-radius:999px;padding:8px 16px;font:700 12.5px 'Segoe UI';cursor:pointer}
.decide-nextsteps button:hover{background:rgba(94,234,212,0.1)}
.decide-nextsteps .decide-or{color:#7fb8ac;font:500 12px 'Segoe UI'}

/* ============================================================================
   Ram Sept-18 Fix 12 — Step 2 Stepwise: scrollable panels, bidirectional
   [N] anchor <-> chip linkage, named-actor copy chips.
   ============================================================================ */

/* Sub-labels / instructions above and below Step 2 row */
.step2-instruct{max-width:1180px;margin:6px auto 10px;padding:8px 14px;
  font:500 12.5px/1.5 'Segoe UI';color:#a4bfc4;text-align:center;
  background:rgba(94,234,212,0.04);border:0.5px solid rgba(94,234,212,0.15);border-radius:10px}
.step2-instruct .anchor-hint{display:inline-block;background:#fbbf24;color:#04211d;
  padding:0 6px;border-radius:6px;font-weight:900;font-family:'IBM Plex Mono',monospace;font-size:11px}

.step2-nudge{max-width:1180px;margin:12px auto 4px;padding:10px 14px;
  font:500 12.5px/1.55 'Segoe UI';color:#cfe9e5;text-align:center;
  background:rgba(4,33,29,0.6);border:1px solid #5eead4;border-radius:10px}
.step2-nudge b{color:#fbbf24}

.actor-chip{margin:0 0 8px;padding:5px 10px;font:500 11px 'Segoe UI';color:#93aab0;
  background:rgba(251,191,36,0.08);border-left:2px solid #fbbf24;border-radius:0 4px 4px 0}
.actor-chip b{color:#fbbf24;font-weight:700}

/* Scrollable panel bodies — cap at 60vh, independent overflow */
.panel-scroll{display:flex;flex-direction:column}
.scroll-body{max-height:60vh;overflow-y:auto;overflow-x:hidden;
  padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(94,234,212,0.35) transparent}
.scroll-body::-webkit-scrollbar{width:8px}
.scroll-body::-webkit-scrollbar-thumb{background:rgba(94,234,212,0.35);border-radius:4px}
.scroll-body::-webkit-scrollbar-thumb:hover{background:rgba(94,234,212,0.6)}

/* Panel-header sub-label (parenthetical) muted */
.plabel .plabel-sub{color:#cfe9e5;font-weight:400;font-size:11.5px;margin-left:2px}

/* Claim anchor spans in Gemini raw prose */
.claim-anchor{display:inline;cursor:pointer;padding:1px 2px;
  border-radius:3px;transition:background .15s ease, color .15s ease}
.claim-anchor:hover,.claim-anchor.cn-hi{background:rgba(251,191,36,0.22);color:#fbe7a6}
.anchor-marker{display:inline-block;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:900;color:#04211d;background:#5eead4;
  padding:0 5px;margin:0 2px 0 3px;border-radius:5px;vertical-align:2px;
  cursor:pointer;transition:transform .12s ease, background .15s ease}
.anchor-marker:hover,.anchor-marker.cn-hi{background:#fbbf24;color:#04211d;transform:scale(1.15)}

/* Chip highlight state matches anchor */
.chip.cn-hi{border-color:#fbbf24 !important;box-shadow:0 0 0 3px rgba(251,191,36,0.35);
  background:rgba(251,191,36,0.10) !important}

/* ============================================================================
   Ram Sept-18 Fix 13 — Step 2 potato hero, single-chip focus, chip type tags.
   ============================================================================ */

.step2-hero{max-width:1180px;margin:8px auto 14px;padding:12px;
  background:rgba(4,33,29,0.55);border:1px solid #2a4d4a;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.step2-hero img{max-width:100%;height:auto;max-height:260px;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,0.4)}
.step2-hero-cap{font:500 12.5px/1.5 'Segoe UI',system-ui,sans-serif;
  color:#a4bfc4;text-align:center;max-width:820px}
.step2-hero-cap b{color:#fbbf24}

/* Chip type tag inside the chnum line */
.chip .chtype{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:900;
  padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:1px}
.chip.chip-page .chtype{background:#5eead4;color:#04211d}
.chip.chip-web  .chtype{background:#a78bfa;color:#04211d}
.chip.chip-warn .chtype{background:#fbbf24;color:#04211d}

/* Chip selection state (single-chip focus, Fix 13 item 10) */
.chip{cursor:pointer;transition:transform .12s ease, box-shadow .15s ease, background .15s ease}
.chip:hover{transform:translateY(-1px)}
.chip.chip-selected{background:rgba(94,234,212,0.14) !important;
  border-color:#5eead4 !important;box-shadow:0 0 0 3px rgba(94,234,212,0.35),0 8px 20px rgba(94,234,212,0.15)}
.chip.chip-selected .chnum{color:#5eead4;font-weight:800}