/*
 * report.css - the architecture report's typography and components.
 *
 * Everything is scoped under .rpt so the same rules can dress the standalone
 * report page and the in-graph reader overlay without one leaking into the
 * other. The palette comes from the site tokens rather than the blue-purple
 * this page used to carry on its own, which is why it read as a different
 * product from the graph that links to it.
 */

.rpt {
    --rpt-line: var(--border, rgba(255, 240, 228, 0.09));
    --rpt-card: var(--bg-card, rgba(255, 246, 238, 0.038));
    --rpt-ink: var(--text-primary, #F3EBE2);
    --rpt-soft: var(--text-secondary, #A99584);
    --rpt-muted: var(--text-tertiary, #6B5D51);
    --rpt-accent: var(--accent, #C08457);
    --rpt-ember: var(--accent-secondary, #E0521F);
    --rpt-gold: var(--accent-tertiary, #D9A441);
    --rpt-high: #E0521F;
    --rpt-med: #D9A441;
    --rpt-low: #7FA6B8;
    color: var(--rpt-ink);
    line-height: 1.6;
}

/* ---- masthead ---------------------------------------------------------- */

.rpt .eyebrow {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--rpt-muted);
}
.rpt .eyebrow .live { color: var(--rpt-ember); }

.rpt h1 {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1;
    margin: 14px 0 10px; letter-spacing: -0.01em; text-wrap: balance;
    word-break: break-word;
}
.rpt .lede {
    color: var(--rpt-soft); font-size: 1rem; max-width: 62ch; margin: 0 0 6px;
}
.rpt .repolinks {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
}
.rpt .repolinks a { color: var(--rpt-accent); text-decoration: none; }
.rpt .repolinks a:hover { color: var(--rpt-ember); }

.rpt hr.rule { border: 0; border-top: 1px solid var(--rpt-line); margin: 30px 0 26px; }

/* Section heads carry a numeral only where the order is real: the report is
   read top to bottom as overview -> structure -> findings. */
.rpt .sec {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.05rem; font-weight: 600; color: var(--rpt-ink);
    margin: 38px 0 16px; display: flex; gap: 12px; align-items: baseline;
}
.rpt .sec .no {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.68rem; letter-spacing: 0.1em; color: var(--rpt-gold);
}
.rpt .sec .qual { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--rpt-muted); }

/* ---- stat tiles -------------------------------------------------------- */

.rpt .tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--rpt-line); border: 1px solid var(--rpt-line);
    border-radius: 14px; overflow: hidden;
}
@media (max-width: 640px) { .rpt .tiles { grid-template-columns: repeat(2, 1fr); } }
.rpt .tile { background: var(--bg-secondary, #14100C); padding: 20px 18px; }
.rpt .tile .v {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 2rem; font-weight: 500; line-height: 1;
    color: var(--rpt-accent); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rpt .tile.alert .v { color: var(--rpt-ember); }
.rpt .tile .l {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    color: var(--rpt-muted); font-size: 0.6rem; margin-top: 9px;
    letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---- bars -------------------------------------------------------------- */

.rpt .bars { margin-top: 18px; display: grid; gap: 10px; }
.rpt .bar { display: flex; align-items: center; gap: 12px; font-size: 0.82rem; }
.rpt .bar .name { width: 130px; color: var(--rpt-soft); text-transform: capitalize; }
/* The fill is a span: without display:block it stays inline and collapses to
   zero height, which is why these bars rendered as empty tracks. */
.rpt .bar .track { flex: 1; display: flex; height: 8px; border-radius: 999px; background: rgba(255, 246, 238, 0.06); overflow: hidden; }
.rpt .bar .fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.rpt .bar .n {
    width: 44px; text-align: right; color: var(--rpt-soft);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums; font-size: 0.78rem;
}
.rpt .fill.high { background: var(--rpt-high); }
.rpt .fill.medium { background: var(--rpt-med); }
.rpt .fill.low { background: var(--rpt-low); }
.rpt .fill.cat { background: linear-gradient(90deg, var(--rpt-accent), var(--rpt-gold)); }

/* ---- coupling table ---------------------------------------------------- */

.rpt .tablewrap { overflow-x: auto; }
.rpt table.coupling { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 460px; }
.rpt table.coupling th {
    text-align: left; color: var(--rpt-muted); font-weight: 600;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
    padding: 8px 10px; border-bottom: 1px solid var(--rpt-line);
}
.rpt table.coupling td { padding: 9px 10px; border-bottom: 1px solid var(--rpt-line); }
.rpt table.coupling td.mod { font-family: var(--font-mono, ui-monospace, Menlo, monospace); color: var(--rpt-ink); }
.rpt table.coupling td.num {
    text-align: right; font-variant-numeric: tabular-nums; color: var(--rpt-soft);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
}
.rpt .cyc { color: var(--rpt-ember); font-size: 0.68rem; font-weight: 600; }

/* ---- findings ---------------------------------------------------------- */

/* Severity is carried by a left stripe as well as a dot, so what needs
   attention reads at a glance rather than requiring the reader to decode
   a colour on a 9px circle. */
.rpt .finding {
    padding: 14px 16px; margin-bottom: 8px;
    background: var(--rpt-card); border: 1px solid var(--rpt-line);
    border-left: 3px solid var(--rpt-low); border-radius: 0 12px 12px 0;
}
.rpt .finding.high { border-left-color: var(--rpt-high); }
.rpt .finding.medium { border-left-color: var(--rpt-med); }
.rpt .finding .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rpt .finding .ttl { font-size: 0.95rem; font-weight: 600; color: var(--rpt-ink); }
.rpt .finding .chip {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--rpt-accent); border: 1px solid var(--rpt-line);
    border-radius: 999px; padding: 2px 9px;
}
.rpt .finding .rankchip {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.62rem; color: var(--rpt-muted); margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.rpt .finding .loc {
    font-size: 0.74rem; color: var(--rpt-muted);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    margin-top: 6px; overflow-wrap: anywhere;
}
.rpt .finding .ev { font-size: 0.84rem; color: var(--rpt-soft); margin-top: 7px; }
.rpt .finding .rec { font-size: 0.84rem; color: var(--rpt-soft); margin-top: 6px; }
.rpt .finding .rec b { color: var(--rpt-gold); font-weight: 600; }

.rpt .group-h {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--rpt-muted); margin: 24px 0 10px; display: flex; align-items: center; gap: 10px;
}
.rpt .group-h::after { content: ""; flex: 1; height: 1px; background: var(--rpt-line); }

/* Long finding lists are the norm, so the tail collapses behind a toggle
   instead of turning the page into an unreadable scroll. */
.rpt .more-findings { margin-top: 6px; }
.rpt .more-findings[hidden] { display: none; }
.rpt .more-btn {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--rpt-accent); background: none; cursor: pointer;
    border: 1px solid var(--rpt-line); border-radius: 999px; padding: 8px 16px; margin-top: 10px;
}
.rpt .more-btn:hover { border-color: var(--rpt-accent); color: var(--rpt-ember); }

.rpt .note { color: var(--rpt-soft); font-size: 0.85rem; }
.rpt .method { color: var(--rpt-muted); font-size: 0.78rem; line-height: 1.75; }
.rpt .loading { color: var(--rpt-muted); padding: 60px 0; text-align: center; }

/* ---- report index ------------------------------------------------------ */

.rpt .rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; }
.rpt .rcard {
    display: block; background: var(--rpt-card); border: 1px solid var(--rpt-line);
    border-radius: 14px; padding: 18px; text-decoration: none; color: inherit;
    transition: border-color .18s, transform .18s;
}
.rpt .rcard:hover { border-color: var(--rpt-accent); transform: translateY(-2px); }
.rpt .rcard .rname { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; word-break: break-word; }
.rpt .rcard .rmeta { font-size: 0.74rem; color: var(--rpt-muted); margin-bottom: 12px; }
.rpt .rcard .rpills { display: flex; gap: 6px; flex-wrap: wrap; }
.rpt .rp { font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.rpt .rp.high { background: rgba(224, 82, 31, 0.16); color: #F08A63; }
.rpt .rp.medium { background: rgba(217, 164, 65, 0.16); color: var(--rpt-gold); }
.rpt .rp.low { background: rgba(127, 166, 184, 0.16); color: #9CC0CF; }

@media (prefers-reduced-motion: reduce) {
    .rpt .rcard { transition: none; }
}