/* SELLUP PITCH — DISCOVERY DETAIL PAGE.
   Loads after _kit/mockup-base.css and ../design/styles/global.css, so it
   inherits every token and primitive. Adds only what a scan report needs:
   a severity mark, a bar-in-a-table cell, and a correction callout.

   NAMING: nothing here may reuse a class the shared kit declares. The kit owns
   `.opt` (picker row, height:38px) and `.sw` (token swatch) unscoped, and both
   have already bitten this project once. New names are prefixed or distinct. */

/* severity — a word plus a 2px left edge, never colour alone */
.sev{display:inline-flex;align-items:center;gap:7px;padding:2px 9px 2px 7px;background:var(--sunken);
  border:1px solid var(--line);border-left-width:2px;border-left-style:solid;
  border-radius:var(--r-sm);font-size:11px;font-weight:500;color:var(--ink-2);white-space:nowrap;line-height:1.6}
.sev-high{border-left-color:var(--danger)}
.sev-med{border-left-color:var(--warn)}
.sev-low{border-left-color:var(--line-strong);color:var(--muted)}
.sev-ok{border-left-color:var(--ok)}
.sev-sm{font-size:10.5px;font-family:var(--mono);padding:1px 7px 1px 6px}

/* a proportion bar inside a table cell */
.pbar{display:flex;align-items:center;gap:9px;min-width:0}
.pbar .track{flex:1 1 auto;min-width:34px;height:6px;border-radius:var(--r-full);background:var(--sunken);
  overflow:hidden;border:1px solid var(--line)}
.pbar .track i{display:block;height:100%;background:var(--ink-3)}
.pbar .track.dim i{background:var(--line-strong)}
.pbar .pv{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 44px;text-align:right}

/* a correction — where the crawl overturns something we said earlier.
   NAMED .cbody, NOT .cb: the kit declares `.cb{width:16px;height:16px;border…}`
   unscoped for the checkbox stand-in, and a scoped `.corr .cb` would not have
   overridden its width or height — the body copy would have rendered inside a
   16px square. Fourth collision on this project; see pitch/README.md. */
.corr{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:16px 18px}
.corr .ck{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--warn);margin-bottom:9px}
.corr .ck svg{width:13px;height:13px;stroke-width:2;flex:0 0 auto}
.corr .ct{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.45;color:var(--ink);margin-bottom:8px}
.corr .cbody{font-size:13px;color:var(--ink-3);line-height:1.65}
.corr .cbody .m{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.corr .cbody b{color:var(--ink);font-weight:600}

/* scan-scope figures */
.scan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-xs);padding:16px 18px}
.scan>.s{padding:0 18px;border-left:1px solid var(--line-soft);min-width:0}
.scan>.s:first-child{border-left:0;padding-left:0}
.scan>.s:last-child{padding-right:0}
.scan .sk{font-size:11.5px;color:var(--muted);line-height:1.45}
.scan .sv{margin-top:6px;font-family:var(--mono);font-size:23px;font-weight:640;letter-spacing:-.025em;
  color:var(--ink);line-height:1.15}
.scan .sd{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.55}
.scan .sd .m{font-family:var(--mono);color:var(--ink-2)}

/* file provenance */
.src{display:flex;flex-direction:column;gap:0}
.src .r{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line-soft)}
.src .r:first-child{border-top:0;padding-top:0}
.src .r svg{width:14px;height:14px;stroke-width:1.75;flex:0 0 auto;margin-top:3px;color:var(--muted-2)}
.src .r .b{min-width:0;flex:1 1 auto}
.src .r .f{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);word-break:break-all;line-height:1.5}
.src .r .n{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:2px}

@media (max-width:1099px){ .scan{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px} }
@media (max-width:899px){
  .scan{grid-template-columns:minmax(0,1fr)}
  .scan>.s{padding:0;border-left:0}
  .scan>.s+.s{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
}

/* ---- narrow-column tables ------------------------------------------------
   HISTORY, kept because it explains why these rules are now nearly empty: the
   security-header table used to sit in a ~278px rail column of a .grid2 while
   its natural width was 311px (a 130px mono header name that will not wrap,
   plus a .pbar with hard minimums). It scrolled at 1280, 1100 and 900 — above
   the 900px breakpoint where the "scroll sideways" affordance appears, so it
   was an unsignposted scroller. Two rules fixed it: wrap the mono names, and
   let the bar give up its minimums.

   The rail is gone — the content slot is one full-width column — so the table
   now has ~1010px for a 311px natural width and none of the squeeze is needed.
   The cell-padding override and the 1199px early collapse that went with it
   are deleted rather than left to quietly tighten a table that has room. The
   two wrapping rules stay: they cost nothing and they are what makes the table
   safe at 390px, where the pressure is real. */
.tbl-narrow .mono{white-space:normal;word-break:break-word;line-height:1.45}
.tbl-narrow .pbar{gap:7px}
.tbl-narrow .pbar .track{min-width:18px}
.tbl-narrow .pbar .pv{flex:0 0 38px}