/* HACKTRAP final report styles. Layered on top of hacktrap.css, which supplies the
   :root palette, the mono stack and the .panel chrome. */

.report {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    filter: grayscale(0.85) contrast(0.95);
}

/* --- Masthead --------------------------------------------------------------- */

.report-masthead {
    text-align: center;
    padding: 32px 16px 24px;
    border-bottom: 1px solid var(--panel-border);
}

.report-masthead h1 {
    font-size: clamp(1.6rem, 7vw, 3rem);
    font-weight: 700;
    letter-spacing: clamp(3px, 2vw, 12px);
    color: oklch(78% 0.02 220);
}

.report-masthead .subtitle {
    margin-top: 10px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.report-masthead .window {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* --- Headline figures ------------------------------------------------------- */

.headline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.headline-figure {
    padding: 18px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: var(--panel);
}

.headline-figure .value {
    /* Sized so an eight-digit event total keeps clear of the tile border rather than
       sitting flush against it. */
    font-size: clamp(1.15rem, 3.2vw, 1.75rem);
    font-weight: 700;
    color: oklch(82% 0.02 220);
    line-height: 1.1;
}

.headline-figure .label {
    margin-top: 8px;
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.headline-figure .sub {
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--text-dim);
}

/* --- Sections --------------------------------------------------------------- */

.report-section > h2 {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: oklch(75% 0.02 220);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--panel-border);
}

.report-section > .section-intro {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 16px;
    max-width: 80ch;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.panel-grid.wide {
    grid-template-columns: minmax(0, 1fr);
}

/* --- Data tables ------------------------------------------------------------ */

.table-scroll {
    overflow-x: auto;
}

table.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

table.report-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--panel-border);
    background: oklch(6% 0.01 220);
    position: sticky;
    top: 0;
}

table.report-table td {
    padding: 6px 10px;
    border-bottom: 1px solid oklch(18% 0.01 220 / 0.4);
    color: var(--text);
    vertical-align: top;
}

table.report-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: oklch(78% 0.02 220);
}

table.report-table td.mono-wrap {
    font-family: var(--mono);
    word-break: break-all;
    max-width: 60ch;
}

table.report-table tr:last-child td {
    border-bottom: none;
}

/* Inline proportion bar behind the count. Width is set from a number in JS, never
   from data, so there is no attribute-injection surface. */
.bar-cell {
    position: relative;
    min-width: 90px;
}

.bar-fill {
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    background: oklch(35% 0.03 220 / 0.55);
    border-radius: 2px;
}

.bar-text {
    position: relative;
    padding-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* --- Callouts --------------------------------------------------------------- */

.callout {
    padding: 16px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid oklch(55% 0.04 220);
    border-radius: 3px;
    background: var(--panel);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--text);
}

.callout strong {
    color: oklch(85% 0.02 220);
}

.callout .big {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: oklch(84% 0.02 220);
    margin-bottom: 6px;
}

.highlight-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.highlight-list li {
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    background: var(--panel);
    font-size: 0.75rem;
    line-height: 1.6;
}

.highlight-list .k {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 5px;
}

.highlight-list .v {
    font-family: var(--mono);
    color: oklch(84% 0.02 220);
    word-break: break-all;
}

.distinct-note {
    font-size: 0.62rem;
    color: var(--text-dim);
    padding: 6px 10px;
    border-top: 1px solid var(--panel-border);
}

.empty-note {
    padding: 14px;
    font-size: 0.72rem;
    color: var(--text-dim);
    font-style: italic;
}

/* --- Timeline --------------------------------------------------------------- */

#report-timeline {
    padding: 12px;
}

.hour-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: 12px;
}

.hour-bar {
    flex: 1;
    background: oklch(45% 0.03 220 / 0.7);
    border-radius: 1px 1px 0 0;
    min-height: 1px;
}

.hour-axis {
    display: flex;
    gap: 2px;
    padding: 0 12px 10px;
}

.hour-axis span {
    flex: 1;
    text-align: center;
    font-size: 0.55rem;
    color: var(--text-dim);
}

/* --- Footer ----------------------------------------------------------------- */

.report-footer {
    font-size: 0.68rem;
    line-height: 1.8;
    color: var(--text-dim);
    padding-top: 20px;
    border-top: 1px solid var(--panel-border);
}

.report-footer a {
    color: var(--cyan-dim);
}

.report-footer dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin-top: 12px;
}

.report-footer dt {
    color: oklch(60% 0.01 220);
}

.report-footer dd {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .report { padding: 12px 8px 48px; }
    .panel-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Appended for report.html ------------------------------------------------
   The page is already set in a mono stack, so an unstyled <code> is invisible.
   Inline literals in the authored prose and in the callouts are attacker
   strings quoted verbatim, and they need to read as quoted. */

.report code {
    font-family: var(--mono);
    font-size: 0.95em;
    color: oklch(82% 0.02 220);
    background: oklch(15% 0.01 220 / 0.8);
    padding: 1px 4px;
    border-radius: 2px;
    /* `anywhere` rather than break-all: a quoted statement inside flowing prose
       should break at its spaces first and only split a token when it has to. */
    overflow-wrap: anywhere;
}