/* ============================================
   BREAKLINE SECURITY — Product mockups
   Representative, in-repo UI panels styled from the redesign.css tokens.
   (Phase 3 / option C: real sanitised captures can swap in later.)
============================================ */

.mock-frame {
    max-width: 840px;
    margin: var(--sp-12) auto;
}

.mock {
    /* status palette, scoped so it never leaks to the rest of the site */
    --mock-fixed: #34D399;
    --mock-new:   var(--accent);
    --mock-reg:   #F0776C;
    /* neutral "info" tone — GRC observed-satisfied must NOT borrow the green
       success ramp (grc.md §9: green reads as "passed", the attestation the
       subsystem refuses); a changed-but-not-worse asset uses it too. */
    --mock-info:  #6C97B0;

    margin: 0;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* window chrome */
.mock-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.95rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-3);
    letter-spacing: 0.02em;
}

.mock-dots { display: inline-flex; gap: 0.35rem; flex-shrink: 0; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: block; }
.mock-title { color: var(--text-2); }
.mock-meta { margin-left: auto; color: var(--text-3); }

/* body — scrolls horizontally on narrow viewports instead of breaking layout */
.mock-scroll { overflow-x: auto; }
.mock-body { padding: 0.95rem 1.05rem 1.05rem; min-width: 540px; }

.mock-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--text-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.mock-summary b { font-weight: 700; margin-right: 0.3rem; }
.mock-stat-new b   { color: var(--mock-new); }
.mock-stat-fixed b { color: var(--mock-fixed); }
.mock-stat-reg b   { color: var(--mock-reg); }
.mock-stat-open b  { color: var(--text-2); }
.mock-stat-info b  { color: var(--mock-info); }

.mock-row {
    display: grid;
    grid-template-columns: 96px 1fr 128px 72px 104px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 0.76rem;
    color: var(--text-2);
}
.mock-row:last-child { border-bottom: none; }

.mock-chip {
    justify-self: start;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.chip-new   { color: var(--mock-new);   background: rgba(192, 135, 44, 0.12); border-color: var(--accent-border); }
.chip-fixed { color: var(--mock-fixed); background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.30); }
.chip-reg   { color: var(--mock-reg);   background: rgba(240, 119, 108, 0.10); border-color: rgba(240, 119, 108, 0.30); }
.chip-open  { color: var(--text-3);     background: rgba(255, 255, 255, 0.03); border-color: var(--border); }
.chip-info  { color: var(--mock-info);  background: rgba(108, 151, 176, 0.12); border-color: rgba(108, 151, 176, 0.32); }

.mock-name   { color: var(--text); font-family: var(--sans); font-weight: 500; }
.mock-target { color: var(--text-3); }
.mock-sev    { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sev-high { color: var(--mock-reg); }
.sev-med  { color: var(--accent-hover); }
.sev-low  { color: var(--text-3); }
.mock-seen { color: var(--text-3); font-size: 0.66rem; text-align: right; }

.mock-foot {
    padding-top: 0.85rem;
    color: var(--text-3);
    font-size: 0.72rem;
    font-style: italic;
    font-family: var(--sans);
}

/* honest label — this is a representative UI, not a claimed screenshot */
.mock-cap {
    margin: 0.7rem 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ------------------------------------------------------------------
   Reusable primitives shared by every screen below.
   Chips reuse the diff palette: chip-fixed (green) · chip-new (gold)
   · chip-reg (red) · chip-open (grey) — the label text carries the
   meaning (High/Medium/Low, Observed/Gap/Not-evidenced, …).
------------------------------------------------------------------ */

/* list row — findings, GRC coverage, QA items, report sections */
.mock-line {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 0.76rem;
    color: var(--text-2);
}
.mock-line:last-child { border-bottom: none; }
.mock-line-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mock-line-t { color: var(--text); font-family: var(--sans); font-weight: 500; }
.mock-line-s { color: var(--text-3); font-size: 0.66rem; }
.mock-val { margin-left: auto; color: var(--text-2); white-space: nowrap; font-size: 0.72rem; }

/* document panel — priced SoW / proposal */
.mock-li {
    display: grid;
    grid-template-columns: 1fr 48px 88px 96px;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 0.76rem;
    color: var(--text-2);
}
.mock-li-desc { color: var(--text); font-family: var(--sans); font-weight: 500; }
.mock-li .r { text-align: right; color: var(--text-3); }
.mock-li .amt { text-align: right; color: var(--text-2); }
.mock-li.mock-thead {
    color: var(--text-3);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom-color: var(--border);
}
.mock-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.85rem;
    font-family: var(--sans);
}
.mock-total .lbl { color: var(--text-3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mock-total .sum { color: var(--text); font-size: 1.05rem; font-weight: 700; }
.mock-sig {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    color: var(--text-3);
    font-size: 0.68rem;
    font-family: var(--sans);
}
.mock-sig .sig-line { height: 1px; background: var(--border); flex: 1 1 auto; max-width: 150px; }

/* severity distribution strip — report / PDF */
.mock-bars {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    margin: 0.15rem 0 0.75rem;
    background: var(--bg-2);
}
.mock-bars span { height: 100%; }
/* flex ratios set representative High:Medium:Low proportions on the bar;
   the same classes colour the legend swatches (ignored there — not flex items) */
.bar-high { background: var(--mock-reg); flex: 3; }
.bar-med  { background: var(--accent); flex: 5; }
.bar-low  { background: var(--text-3); flex: 6; }
.bar-gp   { background: var(--mock-fixed); }
.mock-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.64rem; color: var(--text-3); letter-spacing: 0.03em; }
.mock-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
/* Good Practice is an observation type, not a severity band — fence it off from
   the High/Medium/Low swatches so it doesn't read as a fourth severity. */
.mock-legend .leg-obs { border-left: 1px solid var(--border); padding-left: 0.9rem; }

/* section eyebrow inside a panel (report kind label, etc.) */
.mock-kicker {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.mock-h { color: var(--text); font-family: var(--sans); font-weight: 700; font-size: 0.98rem; margin: 0 0 0.6rem; }