/* PULSE EVIDENCE BROWSER — the shell.
   loader.css keeps the palette, the panels, the tables and the colour view.
   This file adds only what the staged flow needs: the rail, one visible step,
   one primary action, and a progress track. Nothing here restyles the
   measurement: the four states keep the colours and the words they had. */

body { font-size: 14px; }
main { padding-bottom: 40px; }

/* ---- the rail: a real sequence, so it is numbered ---------------------- */
.rail { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px;
        border-bottom: 1px solid var(--line); }
.rstep { display: flex; align-items: center; gap: 8px; color: var(--mut);
         font-size: 12px; border: 1px solid transparent; border-radius: 99px;
         padding: 4px 12px 4px 10px; }
.rstep b { display: inline-flex; align-items: center; justify-content: center;
           width: 20px; height: 20px; border-radius: 50%; font-size: 11px;
           border: 1px solid var(--line); color: var(--mut); }
.rstep.now { color: var(--txt); border-color: var(--acc); }
.rstep.now b { background: var(--acc); border-color: var(--acc); color: #06263a; font-weight: 700; }
.rstep.done { color: var(--ok); }
.rstep.done b { border-color: var(--ok); color: var(--ok); }

/* ---- one step at a time ------------------------------------------------ */
.step { max-width: 68ch; }
#s6 { max-width: none; }
.stepno { color: var(--mut); font-size: 12px; letter-spacing: .04em; }
.step h1 { font-size: 22px; font-weight: 700; margin: 4px 0 14px; }
.step p { margin: 0 0 12px; }
ol.plain { margin: 0 0 12px; padding-inline-start: 20px; }
ol.plain li { margin-bottom: 4px; }
.bar.plain { padding: 12px 0; border-bottom: 0; }
button.primary { background: var(--acc); border-color: var(--acc); color: #06263a;
                 font-weight: 700; padding: 9px 20px; font-size: 14px; }
button.primary:disabled { background: #1b2740; border-color: var(--line); color: var(--mut); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.drop { border: 1px dashed var(--line); border-radius: 10px; padding: 22px;
        text-align: center; color: var(--mut); }
.drop.over { border-color: var(--acc); color: var(--txt); }
.notice { border-inline-start: 4px solid var(--warn); background: #1a1a10;
          border-radius: 6px; padding: 10px 12px; margin: 12px 0; }
.notice.bad { border-inline-start-color: var(--bad); background: #1d1113; }
details.more, details.tech { margin: 14px 18px; }
details.more { margin-inline: 0; }
details.more summary, details.tech summary { color: var(--mut); cursor: pointer; }
details.tech { border-top: 1px solid var(--line); padding-top: 10px; }

/* ---- checks ------------------------------------------------------------ */
.checks { list-style: none; margin: 0 0 12px; padding: 0; }
.checks li { padding: 5px 0; color: var(--mut); }
.checks li.ok { color: var(--ok); }
.checks li.bad { color: var(--bad); }
.checks li::before { content: '·'; display: inline-block; width: 18px; }
.checks li.ok::before { content: '✓'; }
.checks li.bad::before { content: '✕'; }

/* ---- progress ---------------------------------------------------------- */
.track { height: 6px; background: #0d1626; border: 1px solid var(--line);
         border-radius: 99px; overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--acc); transition: width .35s ease; }
.now { margin: 10px 0 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .fill { transition: none; } }

/* ---- summary ----------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 12px; margin: 14px 0; }
.statcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
table.stat td { border-bottom: 1px solid var(--line); }
table.stat td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
table.stat tr.sum td { font-weight: 700; }
table.stat tr.e td:first-child { color: #f0a3a3; }
table.stat tr.p td:first-child { color: #e0b262; }

/* ---- table view -------------------------------------------------------- */
.sticky { position: sticky; top: 0; z-index: 5; background: var(--bg);
          border-bottom: 1px solid var(--line); padding: 0 18px; }
.stickyline { display: flex; align-items: center; gap: 14px; padding: 10px 0 0; flex-wrap: wrap; }
.stickyline button { margin-inline-start: auto; }
#products tbody tr:hover { background: #16233a; }


/* ── the floating identity bar ─────────────────────────────────────────
   A large card at the top of steps 3 to 6 would take height exactly where it
   costs most: step 6, where the table wants every row. This floats above the
   content instead, so the branch under examination is always on screen and
   never in the way. It is also the compact sticky header step 6 asked for —
   the same unit, not a second one. */
.idbar { position: fixed; inset-inline-end: 14px; top: 12px; z-index: 60;
  max-width: min(420px, calc(100vw - 28px)); display: flex; align-items: flex-start;
  gap: 10px; padding: 10px 12px; background: #151b2b; border: 1px solid #2a3550;
  border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.34); }
.idbar[hidden] { display: none; }
.idmain { flex: 1 1 auto; min-width: 0; }
.idchain { font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.idstore { font-size: 13.5px; line-height: 1.3; margin-top: 1px; overflow-wrap: anywhere; }
.idaddr { font-size: 12px; color: #93a3c0; margin-top: 3px; overflow-wrap: anywhere; }
.idids { font-size: 11.5px; color: #93a3c0; margin-top: 3px;
  font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.idsrc { font-size: 10.5px; color: #93a3c0; margin-top: 5px; opacity: .85; }
.idtoggle { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid #2a3550; background: transparent; color: #93a3c0;
  border-radius: 6px; cursor: pointer; font-size: 12px; }
.idtoggle:focus-visible { outline: 2px solid #4f8cff; outline-offset: 2px; }
.idbar.folded .idbody { display: none; }
.idbar.folded .idtoggle { transform: rotate(-90deg); }

/* the branch mark is ours, not the chain's: it carries the StoreID the file
   published and never stands in for an official logo */
.idmark { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 46px; padding: 5px 7px; border-radius: 9px;
  background: #1b2236; border: 1px solid #2a3550; }
.idmark .icon { font-size: 15px; line-height: 1; }
.idmark .num { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }

@media (max-width: 900px) { .idbar { inset-inline: 10px; max-width: none; top: 8px; } }
/* at 200% zoom the viewport is half as wide; the bar stops floating and stays inside it */
@media (max-width: 640px) { .idbar { position: sticky; inset-inline: auto; top: 0; margin: 8px; max-width: none; } }
@media print {
  /* floating is a screen behaviour. On paper it belongs once, at the top. */
  .idbar { position: static; box-shadow: none; margin: 0 0 10px; max-width: none; page-break-inside: avoid; }
  .idbar .idtoggle { display: none; }
  .idbar.folded .idbody { display: block; }
  .guide, .guideveil, .guidebtn { display: none !important; }
}

/* ── the guide ───────────────────────────────────────────────────────── */
.guidebtn { margin-top: 8px; font: inherit; font-size: 13px; padding: 5px 14px;
  border-radius: 8px; border: 1px solid #2a3550; background: #1b2236; color: #e8eefc; cursor: pointer; }
.guidebtn:focus-visible { outline: 2px solid #4f8cff; outline-offset: 2px; }
.guideveil { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5); }
.guide { position: fixed; z-index: 81; top: 50%; inset-inline-start: 50%;
  transform: translate(50%, -50%); width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 40px); overflow: auto; background: #151b2b;
  border: 1px solid #2a3550; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.guide[hidden], .guideveil[hidden] { display: none; }
.ghead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ghead h2 { margin: 0; font-size: 18px; }
.gclose { font: inherit; width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  border: 1px solid #2a3550; background: transparent; color: #93a3c0; }
.gclose:focus-visible, .gfoot button:focus-visible { outline: 2px solid #4f8cff; outline-offset: 2px; }
.gsub { margin: 6px 0 12px; font-size: 12.5px; color: #93a3c0; }
.gdots { display: flex; gap: 7px; margin-bottom: 12px; }
.gdots i { width: 10px; height: 10px; border-radius: 50%; background: #2a3550; display: block; }
.gdots i.done { background: #34d399; }
.gdots i.here { transform: scale(1.35); }
.gcard { min-height: 150px; font-size: 13.5px; line-height: 1.75; }
.gcard h3 { margin: 0 0 8px; font-size: 15px; }
.gcard p { margin: 0 0 8px; }
.gfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.gfoot button { font: inherit; padding: 6px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2a3550; background: #1b2236; color: #e8eefc; }
.gfoot button:disabled { opacity: .4; cursor: default; }
.gfoot span { font-size: 12.5px; color: #93a3c0; }

/* ── the six steps, each active one its own colour ────────────────────── */
.rstep.active { border-color: var(--stepcol); color: var(--stepcol); }
.rstep.active b { background: var(--stepcol); color: #0b1020; }
.rstep.done { border-color: #34d399; color: #34d399; }
.rstep.done b { background: #34d399; color: #0b1020; }
.rstep.blocked { border-color: #fbbf24; color: #fbbf24; }
.rstep.blocked b { background: #fbbf24; color: #0b1020; }
.rstep.failed { border-color: #f87171; color: #f87171; }
.rstep.failed b { background: #f87171; color: #0b1020; }
.rstep .rnote { font-size: 10.5px; display: block; opacity: .9; }

/* a name that did not come from the field it belongs in says so, next to it */
.idfrom { display: inline-block; margin-inline-start: 6px; padding: 1px 6px;
  font-size: 10px; font-weight: 400; vertical-align: middle;
  color: #93a3c0; border: 1px solid #2a3550; border-radius: 99px; }

/* The BT stamp sits at the top-left, and so did this. They were built in
   separate rounds and never opened together, so the stamp covered the branch
   mark. The identity bar starts below it. */
.idbar { top: 108px; }
@media (max-width: 900px) { .idbar { top: 96px; } }
@media (max-width: 700px) { .idbar { top: 84px; } }
@media (max-width: 640px) { .idbar { top: 0; } }
@media print { .idbar { top: auto; } }