/*
 * honeypot.css - styles for the /honeypot/ section.
 *
 * dist/output.css is a purged Tailwind build and the repository has no
 * build step, so it only holds the utilities the existing pages already
 * use. What the data-heavy honeypot pages need beyond that lives here,
 * in the same palette: #0c171b cards, #060c0e insets, #13242a borders,
 * #2C5364 accent, blue-300 links.
 */

:root {
    --hp-card: #0c171b;
    --hp-inset: #060c0e;
    --hp-head: #0a1417;
    --hp-border: #13242a;
    --hp-accent: #2c5364;
    --hp-text: #ffffff;
    --hp-text-2: #d1d5dc;
    --hp-muted: #99a1af;
    --hp-faint: #7c8594;
    --hp-link: #8ec5ff;
    --hp-link-hover: #b5d8ff;
    --hp-gradient: linear-gradient(to right, #2c5364, #155dfc);

    /* Chart chrome: hairlines one step off the surface */
    --hp-gridline: #16272d;
    --hp-axisline: #34505a;

    /*
     * Series colours. Checked with the dataviz palette validator
     * (dark mode, surface #0c171b): baseline/campaign and srv3/srv4 each
     * pass lightness, chroma, CVD separation and 3:1 contrast. The two
     * pairs are never drawn in the same chart.
     */
    --hp-series-baseline: #3987e5;
    --hp-series-campaign: #d95926;
    --hp-srv3: #199e70;
    --hp-srv4: #9085e9;

    /* Status - reserved for warnings, always with an icon and a label */
    --hp-warning: #fab219;
    --hp-critical: #d03b3b;

    --hp-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---- page frame --------------------------------------------------- */

.hp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
}

.hp-skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    padding: .5rem 1rem;
    background: var(--hp-card);
    border: 2px solid var(--hp-accent);
    border-radius: .5rem;
}

.hp-hero {
    margin: 5rem 0 1.5rem;
    padding: 2.25rem 1.5rem;
    background: var(--hp-card);
    border: 4px solid var(--hp-border);
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.hp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--hp-link);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hp-hero h1 {
    margin: .75rem 0 1rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

.hp-lead {
    max-width: 62rem;
    overflow-wrap: anywhere;
    color: var(--hp-text-2);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.hp-updated {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .5rem .875rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .5rem;
    color: var(--hp-text-2);
    font-size: .875rem;
}

.hp-updated strong {
    color: var(--hp-text);
    font-weight: 600;
}

@media (min-width: 640px) {
    .hp-hero {
        padding: 3rem 2rem;
    }
}

@media (min-width: 1024px) {
    .hp-hero h1 {
        font-size: 3rem;
    }
}

.hp-subnav {
    margin-bottom: 2rem;
    overflow-x: auto;
}

.hp-subnav ul {
    display: flex;
    gap: .375rem;
    width: max-content;
    min-width: 100%;
    padding: .375rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

.hp-subnav a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--hp-text-2);
    font-size: .9375rem;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.hp-subnav a:hover {
    background: rgb(44 83 100 / .2);
    color: var(--hp-link);
}

.hp-subnav a[aria-current="page"] {
    background: rgb(44 83 100 / .3);
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

.hp-subnav svg {
    width: 1rem;
    height: 1rem;
}

.hp-banner {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    background: rgb(250 178 25 / .08);
    border: 2px solid rgb(250 178 25 / .55);
    border-radius: .75rem;
    color: var(--hp-text-2);
    line-height: 1.6;
}

.hp-banner svg {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
    color: var(--hp-warning);
}

.hp-banner strong {
    display: block;
    margin-bottom: .125rem;
    color: var(--hp-text);
}

/* ---- cards and headings ------------------------------------------- */

.hp-card {
    margin-bottom: 2rem;
    padding: 1.75rem 1.25rem;
    background: var(--hp-card);
    border: 4px solid var(--hp-border);
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    transition: border-color .5s, box-shadow .5s;
    scroll-margin-top: 1.5rem;
}

.hp-card:hover {
    border-color: var(--hp-accent);
    box-shadow: 0 25px 50px -12px rgb(28 57 142 / .2);
}

@media (min-width: 640px) {
    .hp-card {
        padding: 2.25rem 2rem;
    }
}

.hp-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}

.hp-heading-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--hp-gradient);
    border-radius: 9999px;
    color: #fff;
}

.hp-heading-title {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .hp-heading-title {
        font-size: 1.75rem;
    }
}

.hp-anchor {
    margin-left: .25rem;
    color: var(--hp-faint);
    font-weight: 400;
    opacity: 0;
    transition: opacity .2s;
}

.hp-heading:hover .hp-anchor,
.hp-anchor:focus {
    opacity: 1;
}

.hp-rule {
    width: 100px;
    margin: .5rem 0 1.25rem;
    border: 0;
    border-top: 2px solid var(--hp-accent);
    border-radius: .375rem;
    transition: width .5s;
}

.hp-card:hover .hp-rule {
    width: 150px;
}

.hp-card h3 {
    margin: 2rem 0 .75rem;
    color: var(--hp-text);
    font-size: 1.125rem;
    font-weight: 600;
    scroll-margin-top: 1.5rem;
}

.hp-card p {
    color: var(--hp-text-2);
    line-height: 1.75;
}

.hp-card p + p {
    margin-top: .875rem;
}

.hp-card a:not([class]),
.hp-link {
    color: var(--hp-link);
    text-decoration: underline;
    text-decoration-color: rgb(142 197 255 / .35);
    text-underline-offset: 3px;
}

.hp-card a:not([class]):hover,
.hp-link:hover {
    color: var(--hp-link-hover);
    text-decoration-color: currentColor;
}

.hp-muted {
    color: var(--hp-muted);
}

.hp-small {
    font-size: .875rem;
}

.hp-mono {
    font-family: var(--hp-mono);
}

.hp-pending {
    color: var(--hp-faint);
    font-style: italic;
}

.hp-file-missing {
    color: var(--hp-muted);
    font-family: var(--hp-mono);
}

.hp-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.hp-list > li {
    padding: .875rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
    color: var(--hp-text-2);
    line-height: 1.65;
}

.hp-list > li strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--hp-text);
    font-weight: 600;
}

.hp-list code,
.hp-card p code,
.hp-inline-code {
    padding: .05rem .3rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .25rem;
    color: var(--hp-text);
    font-family: var(--hp-mono);
    font-size: .875em;
    overflow-wrap: anywhere;
}

.hp-list > li code {
    background: var(--hp-card);
}

/* ---- layout grids ------------------------------------------------- */

.hp-grid-2,
.hp-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .hp-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 700px) {
    .hp-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .hp-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hp-panel {
    min-width: 0;
    padding: 1.25rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

.hp-card .hp-panel h3 {
    margin-top: 0;
}

.hp-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.hp-jump a {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 9999px;
    color: var(--hp-text-2);
    font-size: .875rem;
}

.hp-jump a:hover {
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

.hp-jump svg {
    width: .875rem;
    height: .875rem;
}

/* ---- overview ------------------------------------------------------ */

.hp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
}

.hp-stat,
.hp-link-card {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    height: 100%;
    padding: 1.125rem 1.25rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
    color: inherit;
    transition: border-color .3s, transform .3s;
}

.hp-stat:hover,
.hp-stat:focus-visible,
.hp-link-card:hover,
.hp-link-card:focus-visible {
    border-color: var(--hp-accent);
    transform: translateY(-2px);
}

.hp-stat-label {
    color: var(--hp-muted);
    font-size: .875rem;
}

.hp-stat-value {
    color: var(--hp-text);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
}

.hp-stat-unit {
    margin-left: .25rem;
    color: var(--hp-text-2);
    font-size: 1rem;
    font-weight: 400;
}

.hp-stat-note {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: auto;
    padding-top: .25rem;
    color: var(--hp-link);
    font-size: .8125rem;
}

.hp-stat-note svg {
    width: .875rem;
    height: .875rem;
}

.hp-link-card-title {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--hp-text);
    font-size: 1.0625rem;
    font-weight: 600;
}

.hp-link-card-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--hp-link);
}

.hp-card .hp-link-card p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
}

/* ---- provenance ---------------------------------------------------- */

.hp-source {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin-top: 1.25rem;
    padding: .75rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-left: 3px solid var(--hp-accent);
    border-radius: .5rem;
    font-size: .8125rem;
}

.hp-source > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .375rem;
    min-width: 0;
}

.hp-source dt {
    color: var(--hp-muted);
}

.hp-source dt::after {
    content: ":";
}

.hp-source dd {
    margin: 0;
    color: var(--hp-text-2);
    overflow-wrap: anywhere;
}

.hp-source a {
    color: var(--hp-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hp-source code {
    font-family: var(--hp-mono);
}

/* ---- notices ------------------------------------------------------- */

.hp-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 1rem 0;
    padding: .875rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
    color: var(--hp-text-2);
    font-size: .9375rem;
    line-height: 1.6;
}

.hp-notice svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .2rem;
    color: var(--hp-link);
}

.hp-notice strong {
    color: var(--hp-text);
}

.hp-notice-warning {
    background: rgb(208 59 59 / .08);
    border: 2px solid rgb(208 59 59 / .7);
}

.hp-notice-warning svg {
    color: #f87171;
}

/* Placed through the admin: something still to come. The colours of the sample-data banner. */
.hp-notice-pending {
    background: rgb(250 178 25 / .08);
    border-color: rgb(250 178 25 / .55);
}

.hp-notice-pending svg {
    color: #fbbf24;
}

.hp-page-notices {
    margin-bottom: 1.5rem;
}

.hp-page-notices .hp-notice:first-child {
    margin-top: 0;
}

/* The chat export: a download, or a disabled button with the reason under it. */
.hp-export {
    margin-top: 1.25rem;
}

.hp-export .hp-notice {
    margin-bottom: 0;
}

.hp-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.hp-notice-translated {
    background: rgb(44 83 100 / .15);
    border: 2px solid var(--hp-accent);
}

.hp-badge-translated {
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

.hp-badge-translated svg {
    color: var(--hp-link);
}

/* ---- forms and filters -------------------------------------------- */

.hp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin: 1rem 0;
}

.hp-field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 9rem;
}

.hp-field-grow {
    flex: 1 1 16rem;
}

.hp-field-label {
    color: var(--hp-muted);
    font-size: .8125rem;
}

.hp-field-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hp-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 .75rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .5rem;
    color: var(--hp-text);
    font: inherit;
    font-size: .9375rem;
}

.hp-input::placeholder {
    color: var(--hp-faint);
}

.hp-input:focus {
    border-color: var(--hp-accent);
    outline: 2px solid var(--hp-accent);
    outline-offset: 1px;
}

select.hp-input {
    appearance: auto;
    padding-right: .5rem;
}

select.hp-input option {
    background: var(--hp-inset);
    color: var(--hp-text);
}

/* The native date picker follows the page: a light icon on the dark field. */
input[type="date"].hp-input {
    color-scheme: dark;
}

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    padding: 0 1rem;
    background: var(--hp-gradient);
    border: 0;
    border-radius: .5rem;
    color: #fff;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s;
}

.hp-btn:hover {
    filter: brightness(1.15);
}

.hp-btn svg {
    width: 1rem;
    height: 1rem;
}

/* With JavaScript, filters apply as they change: no Apply button. */
.hp-js .hp-js-hide {
    display: none !important;
}

/* A live section being refetched keeps its previous render, dimmed. */
[aria-busy="true"] .hp-table-wrap,
[aria-busy="true"] .hp-chart,
[aria-busy="true"] .hp-downloads,
[aria-busy="true"] .hp-timeline,
[aria-busy="true"] .hp-pager {
    opacity: .55;
    transition: opacity .15s;
}

.hp-btn-ghost {
    background: transparent;
    border: 1px solid var(--hp-border);
    color: var(--hp-text-2);
}

.hp-btn-ghost:hover {
    border-color: var(--hp-accent);
    color: var(--hp-link);
    filter: none;
}

.hp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .5rem 0 1.25rem;
}

.hp-chip {
    padding: .375rem .875rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: 9999px;
    color: var(--hp-text-2);
    font-size: .875rem;
}

.hp-chip:hover {
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

.hp-chip[aria-current="true"] {
    background: rgb(44 83 100 / .3);
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

/* ---- embedded map -------------------------------------------------- */

/*
 * The border sits on the wrapper: the frame is given exactly the height
 * the map reports, and a border of its own would take two pixels of it
 * and make the map scroll.
 */
.hp-map {
    overflow: hidden;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

/*
 * The map reports its own height once it has drawn itself and honeypot.js
 * applies it; until then, and without JavaScript, the frame keeps the
 * proportions of a world map with its title and notes.
 */
.hp-map-frame {
    display: block;
    width: 100%;
    min-height: 18rem;
    aspect-ratio: 16 / 11;
    border: 0;
}

/* ---- chart builder ------------------------------------------------- */

/* WHERE conditions: a row each, the controls only as wide as they need. */
.hp-where {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.hp-where legend {
    padding: 0;
}

.hp-where-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.hp-where-row .hp-input {
    width: auto;
    min-width: 8rem;
}

.hp-where-row input.hp-input {
    flex: 1 1 12rem;
    max-width: 24rem;
}

/* The equivalent SQL gets a line of its own. */
.hp-source-wide {
    flex-basis: 100%;
}

/* A long x value - a command, a password - wraps instead of widening the table. */
.hp-builder-key {
    max-width: 40rem;
    overflow-wrap: anywhere;
}

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

.hp-table-wrap {
    overflow-x: auto;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

.hp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.hp-table th,
.hp-table td {
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--hp-border);
    text-align: left;
    vertical-align: top;
}

.hp-table thead th {
    background: var(--hp-head);
    color: var(--hp-muted);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.hp-table td {
    color: var(--hp-text-2);
}

.hp-table tbody tr:last-child td {
    border-bottom: 0;
}

.hp-table tbody tr:hover {
    background: rgb(44 83 100 / .12);
}

.hp-table tbody tr:target {
    background: rgb(44 83 100 / .35);
    box-shadow: inset 3px 0 0 var(--hp-link);
}

.hp-table .hp-num,
.hp-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.hp-table code {
    color: var(--hp-text);
    font-family: var(--hp-mono);
    font-size: .8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hp-table .hp-strong {
    color: var(--hp-text);
    font-weight: 600;
}

.hp-table tr.is-operator td:first-child {
    box-shadow: inset 3px 0 0 var(--hp-warning);
}

.hp-empty {
    padding: 1.5rem;
    color: var(--hp-muted);
    font-style: italic;
    text-align: center;
}

.hp-align-right {
    text-align: right;
}

.hp-align-center {
    text-align: center;
}

.hp-sort {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: inherit;
}

.hp-sort:hover,
.hp-sort.is-active {
    color: var(--hp-link);
}

.hp-sort-arrow {
    font-size: .75rem;
    opacity: .75;
}

.hp-row-anchor {
    color: var(--hp-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.hp-row-anchor:hover {
    color: var(--hp-link);
    text-decoration: underline;
}

.hp-share {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.hp-share-track {
    width: 4rem;
    height: .375rem;
    overflow: hidden;
    background: var(--hp-gridline);
    border-radius: 0 4px 4px 0;
}

.hp-share-fill {
    display: block;
    height: 100%;
    background: var(--hp-series-baseline);
    border-radius: 0 4px 4px 0;
}

.hp-sha {
    font-family: var(--hp-mono);
    font-size: .75rem;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.hp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    color: var(--hp-muted);
    font-size: .875rem;
}

.hp-pager-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.hp-pager-links a,
.hp-pager-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .625rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .5rem;
    color: var(--hp-text-2);
}

.hp-pager-links a:hover {
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

.hp-pager-links .is-current {
    background: rgb(44 83 100 / .3);
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

.hp-pager-links .is-gap {
    background: transparent;
    border-color: transparent;
}

.hp-pager-links .is-disabled {
    opacity: .4;
}

/* ---- badges -------------------------------------------------------- */

.hp-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .125rem .5rem;
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 9999px;
    color: var(--hp-text-2);
    font-size: .8125rem;
    white-space: nowrap;
}

.hp-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
}

.hp-dot-srv3 {
    background: var(--hp-srv3);
}

.hp-dot-srv4 {
    background: var(--hp-srv4);
}

.hp-badge-icon {
    width: .875rem;
    height: .875rem;
}

.hp-badge-agent svg {
    color: var(--hp-link);
}

.hp-badge-operator {
    background: rgb(250 178 25 / .1);
    border-color: rgb(250 178 25 / .6);
    color: var(--hp-text);
}

.hp-badge-operator svg {
    color: var(--hp-warning);
}

/* ---- charts -------------------------------------------------------- */

.hp-chart {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

.hp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-bottom: .75rem;
    color: var(--hp-text-2);
    font-size: .875rem;
}

.hp-legend li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.hp-swatch {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 3px;
}

.hp-fill-baseline {
    fill: var(--hp-series-baseline);
}

.hp-fill-campaign {
    fill: var(--hp-series-campaign);
}

.hp-fill-baseline-bg {
    background: var(--hp-series-baseline);
}

.hp-fill-campaign-bg {
    background: var(--hp-series-campaign);
}

/* A period the data covers only in part: the collection window opens and closes at noon. */
.hp-fill-baseline.is-partial,
.hp-fill-campaign.is-partial {
    opacity: .45;
}

/* Lines, for counts that never stack - unique IPs per server. */
.hp-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.hp-line-srv3 {
    stroke: var(--hp-srv3);
}

.hp-line-srv4 {
    stroke: var(--hp-srv4);
}

/* Markers wear a 2px ring of the surface where they sit on a line; a partial one is hollow. */
.hp-marker {
    stroke: var(--hp-inset);
    stroke-width: 2;
}

.hp-marker-srv3 {
    fill: var(--hp-srv3);
}

.hp-marker-srv4 {
    fill: var(--hp-srv4);
}

.hp-marker.is-partial {
    fill: var(--hp-inset);
}

.hp-marker-srv3.is-partial {
    stroke: var(--hp-srv3);
}

.hp-marker-srv4.is-partial {
    stroke: var(--hp-srv4);
}

.hp-line-label {
    fill: var(--hp-text-2);
}

.hp-swatch-line {
    width: 1rem;
    height: 3px;
    border-radius: 2px;
}

.hp-chart-note {
    margin-top: .75rem;
}

.hp-chart-scroll {
    overflow-x: auto;
}

.hp-chart-svg {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
}

.hp-gridline {
    stroke: var(--hp-gridline);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.hp-baseline {
    stroke: var(--hp-axisline);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.hp-axis {
    fill: var(--hp-muted);
    font-family: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.hp-axis-empty {
    fill: var(--hp-muted);
    font-family: inherit;
    font-size: 15px;
}

.hp-hit {
    fill: transparent;
    cursor: crosshair;
    outline: none;
}

.hp-hit:hover,
.hp-hit:focus {
    fill: rgb(255 255 255 / .05);
}

.hp-hit:focus-visible {
    stroke: var(--hp-link);
    stroke-width: 1;
}

/* On a line chart the target is the slice under a point: a crosshair instead of a wash. */
.hp-hit-area {
    fill: transparent;
}

.hp-crosshair {
    stroke: var(--hp-axisline);
    stroke-width: 1;
    shape-rendering: crispEdges;
    opacity: 0;
}

.hp-hover-only {
    opacity: 0;
}

.hp-hit:hover .hp-crosshair,
.hp-hit:focus .hp-crosshair,
.hp-hit:hover .hp-hover-only,
.hp-hit:focus .hp-hover-only {
    opacity: 1;
}

.hp-tooltip {
    position: fixed;
    z-index: 60;
    max-width: 18rem;
    padding: .5rem .75rem;
    background: var(--hp-head);
    border: 1px solid var(--hp-accent);
    border-radius: .5rem;
    box-shadow: 0 10px 25px rgb(0 0 0 / .45);
    color: var(--hp-text);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.55;
    white-space: pre-line;
    pointer-events: none;
}

.hp-disclosure {
    margin-top: .875rem;
}

.hp-disclosure > summary {
    padding: .25rem 0;
    color: var(--hp-link);
    font-size: .875rem;
    cursor: pointer;
}

.hp-disclosure[open] > summary {
    margin-bottom: .75rem;
}

.hp-bars {
    display: grid;
    gap: .625rem;
}

.hp-bars-row {
    display: grid;
    grid-template-columns: minmax(5rem, 38%) minmax(3rem, 1fr) auto;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}

.hp-bars-label {
    min-width: 0;
    overflow: hidden;
    color: var(--hp-text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-bars-label code {
    color: var(--hp-text);
    font-family: var(--hp-mono);
    font-size: .8125rem;
}

.hp-bars-hint {
    color: var(--hp-faint);
    font-size: .75rem;
}

.hp-bars-track {
    height: .625rem;
    overflow: hidden;
    background: var(--hp-gridline);
    border-radius: 0 4px 4px 0;
}

.hp-bars-fill {
    display: block;
    height: 100%;
    background: var(--hp-series-baseline);
    border-radius: 0 4px 4px 0;
}

.hp-bars-value {
    min-width: 4rem;
    color: var(--hp-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---- primary sources (markdown) ----------------------------------- */

.hp-prose {
    color: var(--hp-text-2);
    font-size: .975rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.hp-prose > * + *,
.hp-details > * + * {
    margin-top: 1rem;
}

.hp-prose h2,
.hp-prose h3,
.hp-prose h4,
.hp-prose h5,
.hp-prose h6 {
    margin-top: 2rem;
    color: var(--hp-text);
    font-weight: 600;
    line-height: 1.35;
    scroll-margin-top: 1rem;
}

.hp-prose h2 {
    padding-bottom: .375rem;
    border-bottom: 1px solid var(--hp-border);
    font-size: 1.5rem;
}

.hp-prose h3 {
    font-size: 1.25rem;
}

.hp-prose h4 {
    font-size: 1.0625rem;
}

.hp-prose h5,
.hp-prose h6 {
    font-size: 1rem;
}

.hp-prose ul {
    padding-left: 1.5rem;
    list-style: disc;
}

.hp-prose ol {
    padding-left: 1.5rem;
    list-style: decimal;
}

.hp-prose li + li,
.hp-prose li > ul,
.hp-prose li > ol {
    margin-top: .25rem;
}

.hp-prose blockquote {
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--hp-accent);
    color: var(--hp-muted);
}

.hp-prose strong {
    color: var(--hp-text);
}

.hp-prose a {
    color: var(--hp-link);
    text-decoration: underline;
}

.hp-prose hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--hp-border);
}

.hp-prose code {
    padding: .05rem .3rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .25rem;
    color: var(--hp-text);
    font-family: var(--hp-mono);
    font-size: .875em;
}

.hp-code {
    position: relative;
    overflow-x: auto;
    padding: .875rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
    font-size: .8125rem;
    line-height: 1.6;
}

.hp-code code,
.hp-prose .hp-code code {
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    white-space: pre;
    overflow-wrap: normal;
}

.hp-code[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: .25rem;
    right: .625rem;
    color: var(--hp-faint);
    font-family: var(--hp-mono);
    font-size: .6875rem;
}

.hp-md-url {
    color: var(--hp-muted);
    font-family: var(--hp-mono);
    font-size: .8125em;
}

.hp-md-url::before {
    content: "<";
}

.hp-md-url::after {
    content: ">";
}

.hp-details {
    padding: .625rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
}

.hp-details > summary {
    color: var(--hp-link);
    font-weight: 500;
    cursor: pointer;
}

/* ---- methodology --------------------------------------------------- */

.hp-timeline {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.hp-timeline-item {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: .875rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
}

.hp-timeline-item.is-operator {
    background: rgb(250 178 25 / .05);
    border-color: rgb(250 178 25 / .55);
    box-shadow: inset 4px 0 0 var(--hp-warning);
}

.hp-timeline-item.is-milestone {
    border-color: var(--hp-accent);
}

.hp-timeline-date {
    color: var(--hp-text);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.hp-timeline-body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.hp-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.hp-timeline-title {
    color: var(--hp-text);
    font-weight: 500;
}

.hp-timeline-text {
    color: var(--hp-text-2);
    font-size: .9375rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .hp-timeline-item {
        grid-template-columns: minmax(0, 1fr);
        gap: .375rem;
    }
}

.hp-diagram {
    overflow-x: auto;
    padding: 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

.hp-diagram svg {
    display: block;
    width: 100%;
    min-width: 760px;
    height: auto;
}

.hp-dg-box {
    fill: var(--hp-card);
    stroke: var(--hp-border);
    stroke-width: 2;
}

.hp-dg-server {
    fill: #0f2027;
    stroke: var(--hp-accent);
    stroke-width: 2;
}

.hp-dg-firewall {
    fill: rgb(208 59 59 / .1);
    stroke: rgb(208 59 59 / .65);
    stroke-width: 2;
}

.hp-dg-title {
    fill: var(--hp-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

.hp-dg-text {
    fill: var(--hp-text-2);
    font-family: inherit;
    font-size: 12px;
}

.hp-dg-muted {
    fill: var(--hp-muted);
    font-family: inherit;
    font-size: 11px;
}

.hp-dg-mono {
    fill: var(--hp-text-2);
    font-family: var(--hp-mono);
    font-size: 11px;
}

.hp-dg-flow {
    fill: none;
    stroke: var(--hp-link);
    stroke-width: 1.5;
}

.hp-dg-control {
    fill: none;
    stroke: var(--hp-warning);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.hp-dg-arrow {
    fill: var(--hp-link);
}

.hp-dg-arrow-control {
    fill: var(--hp-warning);
}

.hp-dg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .75rem;
    color: var(--hp-text-2);
    font-size: .875rem;
}

.hp-dg-legend span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.hp-dg-key {
    display: inline-block;
    width: 1.75rem;
    border-top: 2px solid var(--hp-link);
}

.hp-dg-key-control {
    border-top: 2px dashed var(--hp-warning);
}

/* ---- data, talk, citation ----------------------------------------- */

.hp-downloads {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.hp-download {
    padding: 1rem 1.25rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

.hp-download-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.hp-download-name {
    color: var(--hp-text);
    font-family: var(--hp-mono);
    font-size: .9375rem;
    overflow-wrap: anywhere;
}

.hp-download-name a {
    color: var(--hp-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hp-download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.5rem;
    margin-top: .625rem;
    color: var(--hp-muted);
    font-size: .8125rem;
}

.hp-download-meta dt {
    display: inline;
}

.hp-download-meta dt::after {
    content: ": ";
}

.hp-download-meta dd {
    display: inline;
    margin: 0;
    color: var(--hp-text-2);
}

.hp-download .hp-notice {
    margin-bottom: 0;
}

.hp-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.hp-facts > div {
    padding: .75rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
}

.hp-facts dt {
    color: var(--hp-muted);
    font-size: .8125rem;
}

.hp-facts dd {
    margin: .25rem 0 0;
    color: var(--hp-text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.hp-cite {
    overflow-x: auto;
    margin-top: .75rem;
    padding: 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
    color: var(--hp-text);
    font-family: var(--hp-mono);
    font-size: .8125rem;
    white-space: pre-wrap;
}

.hp-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
}

.hp-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hp-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    aspect-ratio: 16 / 9;
    padding: 2rem;
    background: linear-gradient(135deg, #0f2027, #060c0e);
    border: 2px solid var(--hp-border);
    border-radius: .75rem;
    text-align: center;
}

.hp-placeholder-compact {
    aspect-ratio: auto;
    padding: 1.75rem;
}

.hp-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: var(--hp-gradient);
    border-radius: 9999px;
    color: #fff;
}

.hp-placeholder-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.hp-card .hp-placeholder h3 {
    margin: 0;
    font-size: 1.25rem;
}

.hp-card .hp-placeholder p {
    max-width: 36rem;
    margin: 0;
}

.hp-placeholder-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
    color: var(--hp-link);
    font-size: .9375rem;
}

.hp-placeholder-meta span {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

@media (max-width: 640px) {
    .hp-placeholder {
        aspect-ratio: auto;
        min-height: 16rem;
    }
}

.hp-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    color: var(--hp-link);
    font-size: .9375rem;
}

.hp-back:hover {
    text-decoration: underline;
}

.hp-back svg {
    width: 1rem;
    height: 1rem;
}

/* ---- incidents ----------------------------------------------------- */

.hp-nowrap {
    white-space: nowrap;
}

.hp-incidents {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.hp-incident {
    padding: 1rem 1.25rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-left: 4px solid var(--hp-border);
    border-radius: .75rem;
    scroll-margin-top: 1.5rem;
}

/* Missing data is the one property most readers look for: it gets the stripe. */
.hp-incident.is-data-missing {
    background: rgb(208 59 59 / .06);
    border-left-color: var(--hp-critical);
}

.hp-incident-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    color: var(--hp-text-2);
    font-size: .875rem;
}

.hp-incident-top .hp-data-status {
    margin-left: auto;
}

.hp-incident-when {
    color: var(--hp-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.hp-incident-duration {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.hp-incident-duration svg {
    width: .875rem;
    height: .875rem;
}

.hp-card h3.hp-incident-title {
    margin: .5rem 0 .375rem;
    font-size: 1.125rem;
}

.hp-incident-title a {
    color: var(--hp-text);
}

.hp-incident-title a:hover {
    color: var(--hp-link);
    text-decoration: underline;
}

.hp-card .hp-incident p {
    font-size: .9375rem;
    line-height: 1.6;
}

.hp-incident-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-top: .625rem;
}

.hp-card .hp-incident-meta + .hp-facts {
    margin-top: 1.25rem;
}

.hp-data-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: 9999px;
    font-size: .8125rem;
    white-space: nowrap;
}

.hp-data-status.is-missing {
    background: rgb(208 59 59 / .2);
    border: 1px solid rgb(208 59 59 / .85);
    color: var(--hp-text);
    font-weight: 600;
}

.hp-data-status.is-missing svg {
    color: #f87171;
}

.hp-data-status.is-complete {
    border: 1px solid var(--hp-border);
    color: var(--hp-text-2);
}

.hp-data-status.is-complete svg {
    color: #0ca30c;
}

.hp-badge-severity.is-minor svg {
    color: var(--hp-warning);
}

.hp-badge-severity.is-major {
    border-color: rgb(236 131 90 / .7);
}

.hp-badge-severity.is-major svg {
    color: #ec835a;
}

.hp-badge-severity.is-critical {
    border-color: rgb(208 59 59 / .85);
}

.hp-badge-severity.is-critical svg {
    color: #f87171;
}

.hp-badge-status.is-open {
    border-color: var(--hp-accent);
    color: var(--hp-link);
}

.hp-badge-attribution strong {
    color: var(--hp-text);
    font-weight: 600;
}

.hp-badge-incident svg {
    color: #ec835a;
}

.hp-timeline-item.is-incident {
    border-color: rgb(236 131 90 / .45);
}

.hp-timeline-item.is-incident.is-data-missing {
    box-shadow: inset 4px 0 0 var(--hp-critical);
}

.hp-banner-open svg {
    color: var(--hp-link);
}

.hp-banner-open {
    background: rgb(44 83 100 / .18);
    border-color: var(--hp-accent);
}

.hp-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .25rem 0 1rem;
    padding: .5rem .75rem;
    background: rgb(44 83 100 / .2);
    border: 1px solid var(--hp-accent);
    border-radius: .5rem;
    color: var(--hp-text-2);
    font-size: .875rem;
}

/* Run strip: one band, one mark per incident. */
.hp-strip-track {
    fill: var(--hp-gridline);
}

.hp-strip-tick {
    stroke: var(--hp-axisline);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.hp-strip-mark {
    fill: #7f9aa5;
}

.hp-strip-mark.is-missing {
    fill: var(--hp-critical);
}

.hp-strip-hit {
    fill: transparent;
}

.hp-strip-link:hover .hp-strip-mark,
.hp-strip-link:focus .hp-strip-mark {
    stroke: var(--hp-text);
    stroke-width: 1.5;
}

.hp-swatch-missing {
    background: var(--hp-critical);
}

.hp-swatch-complete {
    background: #7f9aa5;
}

/*
 * Incident phases: until detected, until work started, then until resolved
 * (faded while still open). The middle colour was checked with the dataviz
 * palette validator (dark mode, surface #0c171b) against both neighbours:
 * CVD separation, normal-vision floor and 3:1 contrast pass.
 */
.hp-phase-detect {
    fill: var(--hp-warning);
}

.hp-phase-respond {
    fill: #e0609f;
}

.hp-phase-resolve {
    fill: var(--hp-series-baseline);
}

.hp-phase-ongoing {
    fill: var(--hp-series-baseline);
    fill-opacity: .35;
}

.hp-phase-detect-bg {
    background: var(--hp-warning);
}

.hp-phase-respond-bg {
    background: #e0609f;
}

.hp-phase-resolve-bg {
    background: var(--hp-series-baseline);
}

.hp-phase-marker {
    fill: var(--hp-text);
    stroke: var(--hp-inset);
    stroke-width: 2;
}

.hp-phase-label {
    fill: var(--hp-text-2);
    font-family: inherit;
    font-size: 13px;
}

/* ---- chat viewer ---------------------------------------------------- */

/* Controls that only work with JavaScript stay out of the page without it. */
.hp-js-only {
    display: none;
}

.hp-js .hp-chat-toolbar.hp-js-only {
    display: flex;
}

.hp-chat-toolbar {
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin: 0 0 1.25rem;
}

.hp-chat-switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--hp-text-2);
    font-size: .875rem;
    cursor: pointer;
}

.hp-chat-switch input {
    accent-color: var(--hp-link);
}

.hp-chat {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hp-chat-msg {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    min-width: 0;
    max-width: 100%;
    padding: 1rem 1.125rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: 1rem;
    scroll-margin-top: 5rem;
}

.hp-chat-msg.is-human {
    align-self: flex-end;
    width: min(46rem, 92%);
    background: #10272f;
    border-color: #1f4654;
    border-bottom-right-radius: .25rem;
}

.hp-chat-msg.is-assistant,
.hp-chat-msg.is-other {
    align-self: flex-start;
    width: 100%;
    border-bottom-left-radius: .25rem;
}

.hp-chat-msg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    color: var(--hp-muted);
    font-size: .8125rem;
}

.hp-chat-sender {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--hp-text);
    font-weight: 600;
}

/* The model of an answer - set in the admin, not part of the export. */
.hp-chat-msg-model {
    padding: .0625rem .5rem;
    border: 1px solid var(--hp-border);
    border-radius: .75rem;
    color: var(--hp-text-2);
    background: var(--hp-inset);
    overflow-wrap: anywhere;
}

.hp-chat-time {
    color: var(--hp-muted);
    text-decoration: none;
}

.hp-chat-time:hover {
    color: var(--hp-link);
}

.hp-chat-text .hp-prose > :first-child {
    margin-top: 0;
}

.hp-chat-text .hp-prose > :last-child {
    margin-bottom: 0;
}

.hp-chat-block {
    min-width: 0;
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-left: 3px solid var(--hp-accent);
    border-radius: .5rem;
}

.hp-chat-thinking {
    border-left-color: #5d6b78;
}

.hp-chat-tool {
    border-left-color: var(--hp-series-baseline);
}

.hp-chat-tool.is-error {
    border-left-color: var(--hp-critical);
}

.hp-chat-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .5rem .75rem;
    font-size: .875rem;
    list-style: none;
    cursor: pointer;
}

.hp-chat-row::-webkit-details-marker {
    display: none;
}

.hp-chat-row::before {
    content: "▸";
    flex-shrink: 0;
    color: var(--hp-muted);
    transition: transform .15s;
}

details[open] > .hp-chat-row::before {
    transform: rotate(90deg);
}

.hp-chat-row > svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--hp-muted);
}

.hp-chat-row-title {
    flex-shrink: 0;
    color: var(--hp-text-2);
    font-weight: 600;
    white-space: nowrap;
}

.hp-chat-row-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--hp-muted);
    font-family: var(--hp-mono);
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-chat-row-preview.is-prose {
    font-family: inherit;
}

.hp-chat-row .hp-badge,
.hp-chat-row-time {
    flex-shrink: 0;
}

.hp-chat-row-time {
    color: var(--hp-muted);
    font-size: .75rem;
    white-space: nowrap;
}

.hp-chat-block-body {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: .5rem .875rem .875rem;
    border-top: 1px solid var(--hp-border);
}

.hp-chat-unknown .hp-chat-block-body {
    border-top: 0;
}

.hp-chat-section,
.hp-chat-result {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.hp-chat-label {
    margin: .375rem 0 0;
    color: var(--hp-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hp-chat-tool-name,
.hp-chat-tool-message {
    margin: 0;
    color: var(--hp-text-2);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.hp-chat-pre {
    max-height: 28rem;
    margin: 0;
    padding: .625rem .75rem;
    overflow: auto;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .5rem;
    color: var(--hp-text-2);
    font-family: var(--hp-mono);
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hp-chat-command {
    color: var(--hp-text);
}

.hp-chat-note {
    margin: 0;
    color: var(--hp-muted);
    font-size: .8125rem;
    font-style: italic;
}

.hp-chat-meta {
    font-size: .8125rem;
}

.hp-chat-meta > summary {
    color: var(--hp-muted);
    cursor: pointer;
}

.hp-chat-meta[open] > summary {
    margin-bottom: .5rem;
}

.hp-chat-kv {
    display: grid;
    gap: .25rem;
    min-width: 0;
    margin: 0;
    font-size: .8125rem;
}

.hp-chat-kv > div {
    display: grid;
    grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.hp-chat-kv dt {
    color: var(--hp-muted);
    font-family: var(--hp-mono);
    overflow-wrap: anywhere;
}

.hp-chat-kv dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.hp-chat-kv .hp-chat-kv {
    padding-left: .75rem;
    border-left: 1px solid var(--hp-border);
}

.hp-chat-lit,
.hp-chat-str {
    color: var(--hp-text-2);
    font-family: var(--hp-mono);
    font-size: .8125rem;
}

.hp-chat-str {
    overflow-wrap: anywhere;
}

.hp-chat-summaries {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--hp-text-2);
    font-size: .875rem;
}

.hp-chat-thought {
    padding: .25rem 0 .25rem .875rem;
    border-left: 2px solid var(--hp-border);
    color: var(--hp-text-2);
}

.hp-chat-exit.is-ok {
    border-color: #1f6b50;
    color: #8fe0c1;
}

.hp-chat-exit.is-bad {
    border-color: #7a2e2e;
    color: #f3a4a4;
}

.hp-chat-source {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .625rem .75rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .5rem;
}

.hp-chat-source-title {
    margin: 0;
    color: var(--hp-text);
    font-weight: 600;
}

.hp-chat-url {
    margin: 0;
    color: var(--hp-muted);
    font-family: var(--hp-mono);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

/* The model in the chat list is free text: it wraps instead of widening the table. */
.hp-chat-model {
    display: block;
    min-width: 5rem;
    max-width: 16rem;
    overflow-wrap: anywhere;
}

.hide-thinking .hp-chat-thinking,
.hide-tools .hp-chat-tool {
    display: none;
}

@media (max-width: 640px) {
    .hp-chat-kv > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .hp-chat-msg.is-human {
        width: 100%;
    }

    /* Title, badges and time wrap onto more lines instead of running past the edge. */
    .hp-chat-row {
        flex-wrap: wrap;
    }

    .hp-chat-row-preview {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-card,
    .hp-rule,
    .hp-stat,
    .hp-link-card {
        transition: none;
    }

    .hp-stat:hover,
    .hp-link-card:hover {
        transform: none;
    }
}

/* ---- reporting a problem ------------------------------------------- */

/* The date the data was updated, and the button to report a problem. */
.hp-hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
}

.hp-hero-foot .hp-updated {
    margin-top: 0;
}

.hp-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 46rem;
    margin-top: 1.25rem;
}

.hp-form .hp-notice {
    margin: 0;
}

.hp-choices {
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.hp-choices legend {
    margin-bottom: .5rem;
    padding: 0;
}

.hp-choice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--hp-inset);
    border: 1px solid var(--hp-border);
    border-radius: .625rem;
    cursor: pointer;
    transition: border-color .2s;
}

.hp-choice:hover {
    border-color: var(--hp-accent);
}

.hp-choice:has(input:checked) {
    background: rgb(44 83 100 / .2);
    border-color: var(--hp-link);
}

.hp-choice input {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: .3rem;
    accent-color: var(--hp-link);
}

.hp-choice strong {
    display: block;
    color: var(--hp-text);
    font-weight: 500;
}

.hp-choice-hint {
    display: block;
    color: var(--hp-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.hp-textarea {
    height: auto;
    min-height: 10rem;
    padding: .625rem .75rem;
    line-height: 1.6;
    resize: vertical;
}

.hp-required {
    color: #fbbf24;
}

.hp-field-help {
    margin: 0;
    color: var(--hp-faint);
    font-size: .8125rem;
}

.hp-field-error {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    color: #fca5a5;
    font-size: .875rem;
}

.hp-input[aria-invalid="true"] {
    border-color: rgb(208 59 59 / .8);
}

.hp-error-list {
    margin: .375rem 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.hp-notice-success {
    background: rgb(25 158 112 / .1);
    border: 2px solid rgb(25 158 112 / .6);
}

.hp-notice-success svg {
    color: #4ade80;
}

/* Off-screen rather than display:none, which some bots skip. */
.hp-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hp-report-link {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 2rem 0 0;
    color: var(--hp-muted);
    font-size: .875rem;
}

.hp-report-link svg {
    flex-shrink: 0;
    margin-top: .2rem;
}