/* AS Report — editorial-light theme, scoped for modal embedding.
   The report renders inside a large overlay in the main RE Topology
   Report app, so everything is scoped under .as-report-modal — the
   host app's global styles must not be affected, and vice versa.
   Serif display faces for identity, system sans for UI chrome,
   hairline rules, restrained color. All colors via tokens.
   Exception: .help-pop is appended to document.body (outside the
   modal), so it uses literal values only — no var() tokens. */

/* ---- modal frame (overlay on the main app) ---- */
.as-report-backdrop {
    /* Above the host app's stacking order: panel .is-open is 100 and
       its modals are 1000 — at 55 the report rendered invisibly
       behind the panel. .help-pop must stay above this value. */
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(20, 27, 46, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 2vh 2vw;
}
/* Tokens + base styles + frame geometry in one block. Custom
   properties inherit down the subtree, so every var() use below
   keeps working. */
.as-report-modal {
    --ink: #2a2f3a;
    --ink-soft: #666e80;
    --ink-faint: #8a90a0;
    --navy: #1f2a44;
    --paper: #fbfbfd;
    --card: #ffffff;
    --rule: #e8e9f0;
    --rule-strong: #d8dae4;
    --bad: #b03434;
    --bad-bg: #f7e3e3;
    --warn: #a06d10;
    --warn-bg: #fdf3dc;
    --ok: #2c7a44;
    --ok-bg: #f2f7f3;
    --info: #2c4f8f;
    --info-bg: #e3ecfa;
    --serif: Georgia, "Palatino Linotype", "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "SF Mono", Menlo, Consolas, monospace;
    position: relative;
    width: min(1200px, 96vw); height: 94vh;
    overflow-y: auto; overflow-x: hidden;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(20, 27, 46, 0.4);
    padding: 0 22px 40px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
}
.as-report-modal *, .as-report-modal *::before, .as-report-modal *::after {
    box-sizing: border-box;
}
.as-report-close {
    position: sticky; top: 10px; float: right; z-index: 5;
    margin: 10px -6px 0 0;
    border: 1px solid var(--rule-strong); background: var(--card);
    color: var(--ink); border-radius: 6px; font-size: 14px;
    padding: 4px 12px; cursor: pointer;
}
.as-report-close:hover { background: var(--info-bg); }

.as-report-modal a { color: var(--info); }
.as-report-modal code, .as-report-modal .mono {
    font-family: var(--mono); font-size: 0.93em;
}

.boot-state { padding: 80px 0; text-align: center; color: var(--ink-faint); }

/* ---- build-progress indicator (modal loading stages) ---- */
.as-report-progress { color: var(--ink-soft); }
.as-report-progress-detail { font-size: 12px; color: var(--ink-faint);
                             margin-top: 6px; }
.as-report-spinner { display: block; width: 34px; height: 34px;
    margin: 0 auto 16px; border-radius: 50%;
    border: 3px solid var(--rule-strong); border-top-color: var(--navy);
    animation: as-report-spin 0.9s linear infinite; }
@keyframes as-report-spin { to { transform: rotate(360deg); } }

/* ---- hero ---- */
.hero { background: var(--card); border-bottom: 3px solid var(--navy);
        margin: 0; padding: 28px 24px 0; border-radius: 8px 8px 0 0; }
.hero-inner { max-width: 1036px; margin: 0 auto; }
.hero .kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
                color: var(--ink-faint); }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: 34px;
           margin: 8px 0 2px; color: var(--navy); }
.hero h1 b { font-weight: 700; }
.hero .asn-chip { font-family: var(--mono); font-size: 15px; color: var(--ink-soft);
                  border: 1px solid var(--rule-strong); border-radius: 16px;
                  padding: 2px 12px; vertical-align: middle; margin-left: 10px; }
.hero .sub { font-size: 12.5px; color: var(--ink-soft); }
.hero .stats { display: flex; border-top: 1px solid var(--rule); margin-top: 18px; }
.hero .stat { flex: 1; padding: 14px 10px 16px; border-right: 1px solid var(--rule);
              min-width: 0; }
.hero .stat:last-child { border-right: none; }
.hero .stat .n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.hero .stat .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
                 color: var(--ink-faint); margin-top: 2px; display: flex;
                 align-items: center; gap: 4px; }
.n-bad { color: var(--bad); } .n-warn { color: var(--warn); }
.n-ok { color: var(--ok); } .n-plain { color: var(--navy); }

.as-report-modal .view-note { font-size: 12px; color: var(--ink-soft);
                              padding: 8px 0 12px; border-top: 1px solid var(--rule); }

/* ---- sections ---- */
section.report-section { margin-top: 36px; }
section.report-section > h2 { font-family: var(--serif); font-weight: 400;
    font-size: 23px; color: var(--navy); border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 8px; margin: 0 0 16px; }
.section-note { font-size: 13px; color: var(--ink-soft); margin: -8px 0 16px; }

/* ---- badges & glyphs ---- */
.badge { display: inline-block; border-radius: 4px; padding: 1px 8px;
         font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
         white-space: nowrap; }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-info { background: var(--info-bg); color: var(--info); }
.glyph-ok { color: var(--ok); font-weight: 700; }
.glyph-bad { color: var(--bad); font-weight: 700; }
.glyph-warn { color: var(--warn); font-weight: 700; }
.glyph-none { color: var(--ink-faint); }

/* help affordance — anything clickable-for-help */
[data-help] { cursor: help; text-decoration: underline dotted var(--ink-faint);
              text-underline-offset: 3px; }
th[data-help] { text-decoration: none; }
th[data-help]::after { content: " ⓘ"; font-size: 9px; color: var(--info); }

/* ---- finding cards ---- */
.finding-card { background: var(--card); border: 1px solid var(--rule);
    border-radius: 8px; padding: 16px 18px; margin: 12px 0;
    box-shadow: 0 1px 3px rgba(31, 42, 68, 0.06); }
.finding-card.sev-high { border-left: 4px solid var(--bad); }
.finding-card.sev-medium { border-left: 4px solid var(--warn); }
.finding-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.finding-head .pfx { font-family: var(--mono); font-size: 16px; font-weight: 600;
                     color: var(--navy); }
.finding-head a.pfx-goto { text-decoration: none;
    border-bottom: 1px dashed var(--rule-strong); }
.finding-head a.pfx-goto:hover { color: var(--info);
    border-bottom-color: var(--info); }
.finding-head .holder { color: var(--ink-faint); font-size: 12px; margin-left: auto; }
.finding-body { font-size: 13.5px; margin-top: 8px; }
.finding-body p { margin: 6px 0; }
.finding-fix { margin-top: 10px; padding: 8px 12px; background: var(--ok-bg);
    border-left: 3px solid var(--ok); font-size: 12.5px; color: #245c38;
    border-radius: 0 4px 4px 0; }
.finding-fix b { letter-spacing: 0.06em; }

/* ---- inventory table ---- */
.inv-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--rule);
            border-radius: 8px; }
table.inv { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 780px; }
.inv th { text-align: left; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 700;
    padding: 10px 10px 8px; border-bottom: 1.5px solid var(--rule-strong);
    background: var(--card); position: sticky; top: 0; }
.inv td { padding: 7px 10px; border-bottom: 1px solid var(--rule);
          vertical-align: middle; }
.inv td.c, .inv th.c { text-align: center; }
.inv tbody tr.inv-row { cursor: pointer; }
.inv tbody tr.inv-row:hover { background: #f4f6fb; }
.inv tbody tr.inv-row[aria-expanded="true"] { background: #eef1fa; }
@keyframes inv-row-flash { 0%, 60% { background: var(--info-bg); }
                           100% { background: #eef1fa; } }
.inv tbody tr.inv-row-flash { animation: inv-row-flash 1.6s ease-out; }
.inv .pfx-cell { font-family: var(--mono); white-space: nowrap; }
.inv .pfx-cell .twisty { display: inline-block; width: 14px; color: var(--ink-faint); }
.inv .holder-cell { color: var(--ink-soft); font-size: 12px; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-head td { font-family: var(--serif); font-size: 15px; color: var(--navy);
               background: var(--paper); padding-top: 14px; }

/* ---- expansion panel ---- */
.inv-detail td { background: #f7f8fc; padding: 14px 16px; }
.detail-grid { display: grid; grid-template-columns: minmax(320px, 3fr) 2fr;
               gap: 18px; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-grid h4 { margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ink-soft); }
.detail-diag { font-size: 13px; }
.detail-diag li { margin: 4px 0; }
.detail-diag ul { margin: 4px 0; padding-left: 18px; list-style: none; }
.detail-ms-list { max-height: 170px; overflow-y: auto; margin: 4px 0;
                  padding-left: 18px; list-style: none; font-size: 12.5px; }
.detail-ms-list li { margin: 3px 0; }
.path-tree-box { background: var(--card); border: 1px solid var(--rule);
                 border-radius: 6px; padding: 10px; overflow-x: auto; }
.path-tree-box svg { display: block; }

/* ---- path tree ---- */
.pt-node rect { fill: #f6f7fb; stroke: #c5cbdb; stroke-width: 1.4; }
.pt-node.pt-target rect { fill: var(--info-bg); stroke: var(--info); }
.pt-node.pt-private rect { fill: var(--bad-bg); stroke: var(--bad); }
.pt-node.pt-tier1 rect { fill: var(--warn-bg); stroke: var(--warn); }
.pt-node text { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
.pt-node text.pt-asname { font-family: var(--sans); font-size: 8px;
                          fill: var(--ink-soft); }
.pt-node.pt-target text { font-weight: 700; }
.pt-node.pt-leaf rect { stroke-width: 2.4; }
.pt-edge { fill: none; stroke-width: 2.5; }
.pt-edge.pt-acc { stroke: #9fd6a9; }
.pt-edge.pt-rej { stroke: #e8a0a0; }
.pt-edge.pt-mixed { stroke: #c5cbdb; }
.pt-prep { font-family: var(--mono); font-size: 9px; fill: var(--warn);
           font-weight: 700; }
.pt-legend { font-size: 11px; color: var(--ink-soft); margin-top: 6px;
             display: flex; gap: 14px; flex-wrap: wrap; }
.pt-legend .sw { display: inline-block; width: 14px; height: 4px;
                 border-radius: 2px; vertical-align: middle; margin-right: 4px; }

/* ---- popover ----
   Appended to document.body, OUTSIDE .as-report-modal — it cannot
   inherit the scoped custom properties, so literal values only. */
.help-pop { position: absolute; z-index: 1060; max-width: 380px;
    background: #2c3548; color: #eef1f8; border-radius: 8px;
    padding: 12px 14px; font-size: 12.5px; line-height: 1.5;
    box-shadow: 0 6px 22px rgba(20, 27, 46, 0.35); }
.help-pop h5 { margin: 0 0 6px; font-size: 13px; color: #fff; }
.help-pop .fix { margin-top: 8px; padding-top: 8px;
                 border-top: 1px solid #4a5570; }
.help-pop .fix b { color: #9fd6a9; }
.help-pop code { color: #ffd28a;
                 font-family: "SF Mono", Menlo, Consolas, monospace; }
.help-pop a { color: #9fc1ff; }

/* ---- footer ---- */
.report-footer { margin-top: 48px; border-top: 1px solid var(--rule-strong);
    padding-top: 14px; font-size: 12px; color: var(--ink-soft); }
.report-footer ul { margin: 6px 0; padding-left: 18px; }

.as-report-modal input:focus-visible,
.as-report-modal button:focus-visible,
.as-report-modal [data-help]:focus-visible,
.as-report-modal tr.inv-row:focus-visible {
    outline: 2px solid var(--info); outline-offset: 2px;
}