/* Recently down and most discussed: views/v2/recently-down.php and discussed.php. The head, summary and incidents
   come from hub.css, the board, sparkline, FAQ and category cards from home.css; this adds the ranking, the
   reports-per-day chart, the comment cards and the method note. */

@layer page {
    .activity :is(.ranking__link, .hub) { text-decoration: none; }
    .activity .hubpage__now { margin-top: var(--space-4); }

    /* Ranked rows: rank, logo, name with details, daily bars, count, status. The name link covers the row. */
    .ranking {
        display: grid;
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: hidden;
    }

    .ranking__row {
        position: relative;
        display: grid;
        grid-template-columns: 1.75rem auto minmax(0, 1fr) 8rem 7.5rem auto;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-5);

        & + & { border-top: 1px solid var(--line); }
        &:hover { background: var(--surface-2); }
        &:hover .ranking__link { color: var(--brand); }
    }

    .ranking__n {
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: var(--step--1);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .ranking__main {
        display: grid;
        min-inline-size: 0;
        line-height: 1.35;

        small {
            display: flex;
            flex-wrap: wrap;
            gap: 0 var(--space-3);
            color: var(--muted);
            font-size: var(--step--1);
        }
    }

    .ranking__link {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;

        &::after { content: ''; position: absolute; inset: 0; }
        &:focus-visible { outline: none; }
        &:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: inherit; }
    }

    .ranking__row :is(.ranking__main small, .ranking__count) { position: relative; pointer-events: none; }

    .ranking__spark .spark { display: block; block-size: 2rem; }

    .ranking__count {
        display: grid;
        justify-items: end;
        line-height: 1.3;
        text-align: right;

        strong { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
        small { color: var(--muted); font-size: var(--step--1); white-space: nowrap; }
        small.is-today { color: var(--brand); font-weight: 600; }
    }

    @media (width < 48rem) {
        .ranking__row {
            grid-template-columns: 1.25rem auto minmax(0, 1fr) auto auto;
            gap: var(--space-2) var(--space-3);
            padding-inline: var(--space-4);
        }
        .ranking__spark { grid-column: 3 / -1; grid-row: 2; }
        .ranking__spark .spark { block-size: 1.5rem; }
        .ranking__n { text-align: left; }
    }

    /* Reports per day */
    .daychart {
        position: relative;
        display: grid;
        gap: var(--space-2);
        margin: 0;
        padding: var(--space-5) var(--space-5) var(--space-4) calc(var(--space-5) + 2.5rem);

        svg { inline-size: 100%; block-size: 9rem; }
        rect { fill: var(--chart-bar); }
        rect.is-peak { fill: var(--brand); }
        rect:hover { fill: var(--ink-2); }
        line { stroke: var(--line); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
        figcaption { color: var(--ink-2); font-size: var(--step--1); }
    }

    .daychart__axis {
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: .75rem;
    }

    .daychart__max {
        position: absolute;
        top: calc(var(--space-5) - .5em);
        left: var(--space-5);
        inline-size: 2rem;
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: .75rem;
        text-align: right;
    }

    /* Most discussed: one card per service with its newest comment */
    .talk {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
        gap: var(--space-3);
    }

    .talk__item {
        position: relative;
        display: grid;
        align-content: start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-lg);
        background: var(--surface);

        &:hover { background: var(--surface-2); }
        &:hover .ranking__link { color: var(--brand); }
    }

    .talk__head {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-3);

        .ranking__n { text-align: left; }
    }

    .talk__quote {
        position: relative;
        display: grid;
        gap: var(--space-2);
        margin: 0;
        padding-left: var(--space-4);
        border-left: 3px solid var(--line-strong);
        pointer-events: none;

        p { color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
        footer { color: var(--muted); font-size: var(--step--1); }
        footer strong { color: var(--ink-2); font-weight: 600; }
    }

    .talk__none { color: var(--muted); font-size: var(--step--1); }

    /* How to read the page */
    .activity__method {
        display: grid;
        gap: var(--space-3);
        max-inline-size: 70ch;

        p { color: var(--ink-2); line-height: 1.7; }
    }
}