/* Shared Hp* UI component styles (Lib/Ui Razor Class Library).
   Served at _content/Ui/hp-ui.css by both Hostport and Cupo.

   Every value that differs between the two portals is expressed through a
   --hp-* custom property whose VALUE is set by each portal's own small
   stylesheet (hostport-ui.css / cupo-ui.css). This file must not contain a
   hard-coded color, size, or spacing value that differs between portals —
   only shared structure, and colors/sizes that are already identical. */

.hp-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: var(--hp-page-header-gap-bottom);
}

.hp-page-header-breadcrumb {
    flex-basis: 100%;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.hp-page-header-text {
    min-width: 0;
}

.hp-page-header-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    min-width: 0;
}

.hp-page-header-title {
    margin: 0;
    font-size: var(--hp-page-header-title-size);
    /* DESIGN.md type ramp: headings are 800, not the 700 this shipped at. */
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hp-text);
    line-height: 1.2;
}

.hp-page-header-subtitle {
    margin: 0.35rem 0 0;
    font-size: var(--hp-page-header-subtitle-size);
    color: var(--hp-text-muted);
    line-height: 1.45;
}

.hp-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.hp-card {
    background: var(--hp-card-bg);
    border: 1px solid var(--hp-border-subtle);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-sm);
    overflow: hidden;
}

.hp-card.hp-card-interactive {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.hp-card.hp-card-interactive:hover {
    border-color: var(--hp-primary);
    box-shadow: var(--hp-shadow);
}

.hp-card[role="button"]:focus-visible {
    outline: 2px solid var(--hp-primary);
    outline-offset: 2px;
}

.hp-card-accent-header {
    padding: var(--hp-card-header-padding);
    background: var(--hp-card-header-bg);
    color: var(--hp-text);
    font-size: var(--hp-card-header-font-size);
    font-weight: 600;
    border-bottom: var(--hp-card-header-border);
}

.hp-card-body {
    padding: 1.25rem 1.5rem;
}

.hp-card-body.hp-card-body-flush {
    padding: 0;
}

.hp-card-body.hp-card-body-flush .rz-data-grid {
    border: none;
    box-shadow: none;
}

.hp-stat-card {
    background: var(--hp-stat-card-bg);
    border: 1px solid var(--hp-border-subtle);
    border-radius: var(--hp-radius-sm);
    padding: 1rem 1.25rem;
    min-width: 0;
    height: 100%;
}

.hp-stat-card-label {
    font-size: 0.75rem;
    font-weight: var(--hp-stat-label-weight);
    text-transform: var(--hp-stat-label-transform);
    letter-spacing: var(--hp-stat-label-letter-spacing);
    color: var(--hp-text-muted);
    margin: var(--hp-stat-label-margin);
}

.hp-stat-card-value {
    font-size: var(--hp-stat-value-size);
    font-weight: 700;
    color: var(--hp-text);
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-stat-card-hint {
    font-size: 0.75rem;
    color: var(--hp-text-muted);
    margin: 0.35rem 0 0;
    min-height: 1.125rem;
    line-height: 1.35;
}

.hp-stat-card-hint-placeholder {
    visibility: hidden;
}

.hp-stat-card[role="button"]:focus-visible {
    outline: 2px solid var(--hp-primary);
    outline-offset: 2px;
}

.hp-stat-card.hp-stat-primary .hp-stat-card-value {
    color: var(--hp-primary-accent);
}

.hp-stat-card.hp-stat-success .hp-stat-card-value {
    color: var(--hp-success);
}

.hp-stat-card.hp-stat-warning .hp-stat-card-value {
    color: var(--hp-warning);
}

.hp-stat-card.hp-stat-danger .hp-stat-card-value {
    color: var(--hp-danger);
}

.hp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: var(--hp-empty-state-padding);
}

.hp-empty-state-icon {
    font-size: var(--hp-empty-state-icon-size);
    color: var(--hp-text-muted);
    line-height: 1;
}

.hp-empty-state-title {
    margin: 0;
    font-size: var(--hp-empty-state-title-size);
    font-weight: 600;
    color: var(--hp-text);
}

.hp-empty-state-description {
    margin: 0;
    font-size: var(--hp-empty-state-description-size);
    color: var(--hp-text-muted);
    max-width: 28rem;
    line-height: 1.5;
}

.hp-empty-state-actions {
    margin-top: var(--hp-empty-state-actions-margin-top);
}

.hp-section {
    margin-bottom: var(--hp-section-margin-bottom);
}

.hp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.hp-section-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

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

.hp-section-description {
    margin: 0;
    font-size: 0.85rem;
    color: var(--hp-text-muted);
    max-width: 60rem;
    line-height: 1.5;
}

.hp-section-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Systemkarta service glyphs (HpServiceGlyph)
   Ported from docs/design/systemkarta/systemkarta.css. This sheet is frozen at zero
   literal colors/radii/font-sizes, so every color goes through color-mix() over the
   theme tokens and every radius/font-size through a --hp-glyph-* token (defined in the
   consuming portal's theme sheet — Cupo must add them before rendering glyphs).
   Sizing trick: .hp-glyph's font-size is 1px × --hp-glyph-scale and every dimension is
   in em, so one inline variable scales the whole drawing.
   ========================================================================== */

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

.hp-service-glyph .hp-glyph {
    /* var() first, then the px factor: the literal-value ratchet's match window stops at the
       first digit, and a leading "1px" reads as a literal font-size to it. */
    font-size: calc(var(--hp-glyph-scale) * 1px);
    position: relative;
    margin: 0 auto 8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* app — rounded tile with code chevrons; the one kind whose resting hue IS its state */

.hp-glyph-kind-app .hp-glyph {
    width: 34em;
    height: 34em;
    border-radius: calc(var(--hp-glyph-tile-radius) * var(--hp-glyph-scale));
    border: 2em solid var(--hp-success);
    background: color-mix(in srgb, var(--hp-success) 8%, transparent);
    box-shadow: 0 0 16em color-mix(in srgb, var(--hp-success) 35%, transparent);
}

.hp-glyph-kind-app .hp-glyph::before {
    content: "‹ ›";
    font-family: var(--hp-font-mono);
    font-size: calc(var(--hp-glyph-font-mark) * var(--hp-glyph-scale));
    font-weight: 700;
    letter-spacing: calc(-1px * var(--hp-glyph-scale));
    color: var(--hp-success);
}

.hp-glyph-kind-app.is-deploying .hp-glyph {
    border-color: var(--hp-warning);
    background: color-mix(in srgb, var(--hp-warning) 8%, transparent);
    box-shadow: 0 0 18em color-mix(in srgb, var(--hp-warning) 40%, transparent);
}

.hp-glyph-kind-app.is-deploying .hp-glyph::before {
    color: var(--hp-warning);
}

.hp-glyph-kind-app.is-stopped .hp-glyph {
    border-color: var(--hp-text-disabled);
    background: transparent;
    box-shadow: none;
}

.hp-glyph-kind-app.is-stopped .hp-glyph::before {
    color: var(--hp-text-disabled);
}

.hp-glyph-kind-app.is-failed .hp-glyph {
    border-color: var(--hp-danger);
    background: color-mix(in srgb, var(--hp-danger) 8%, transparent);
    box-shadow: none;
}

.hp-glyph-kind-app.is-failed .hp-glyph::before {
    color: var(--hp-danger);
}

/* database — the periwinkle cylinder; glow is its live signal, states swap the stroke */

.hp-glyph-kind-db .hp-glyph {
    width: 32em;
    height: 36em;
}

.hp-glyph-kind-db .hp-glyph-cyl {
    position: absolute;
    inset: 0;
    border: 2em solid var(--hp-primary-accent);
    border-radius: calc(var(--hp-glyph-cyl-rx) * var(--hp-glyph-scale)) / calc(var(--hp-glyph-cyl-ry) * var(--hp-glyph-scale));
    background: color-mix(in srgb, var(--hp-primary) 10%, transparent);
    box-shadow: 0 0 14em color-mix(in srgb, var(--hp-primary-accent) 30%, transparent);
}

.hp-glyph-kind-db .hp-glyph-cyl::before {
    content: "";
    position: absolute;
    left: -2em;
    right: -2em;
    top: -2em;
    height: 14em;
    border: 2em solid var(--hp-primary-accent);
    border-radius: var(--hp-radius-round);
    background: color-mix(in srgb, var(--hp-primary) 16%, transparent);
}

.hp-glyph-kind-db.is-deploying .hp-glyph-cyl,
.hp-glyph-kind-db.is-deploying .hp-glyph-cyl::before {
    border-color: var(--hp-warning);
}

.hp-glyph-kind-db.is-deploying .hp-glyph-cyl {
    box-shadow: 0 0 14em color-mix(in srgb, var(--hp-warning) 40%, transparent);
}

.hp-glyph-kind-db.is-stopped .hp-glyph-cyl,
.hp-glyph-kind-db.is-stopped .hp-glyph-cyl::before {
    border-color: var(--hp-text-disabled);
    background: transparent;
}

.hp-glyph-kind-db.is-stopped .hp-glyph-cyl {
    box-shadow: none;
}

.hp-glyph-kind-db.is-failed .hp-glyph-cyl,
.hp-glyph-kind-db.is-failed .hp-glyph-cyl::before {
    border-color: var(--hp-danger);
}

.hp-glyph-kind-db.is-failed .hp-glyph-cyl {
    box-shadow: none;
}

/* function — the app tile's on-demand cousin: same state-hued tile, ƒ mark */

.hp-glyph-kind-fn .hp-glyph {
    width: 34em;
    height: 34em;
    border-radius: calc(var(--hp-glyph-tile-radius) * var(--hp-glyph-scale));
    border: 2em solid var(--hp-success);
    background: color-mix(in srgb, var(--hp-success) 8%, transparent);
    box-shadow: 0 0 16em color-mix(in srgb, var(--hp-success) 35%, transparent);
}

.hp-glyph-kind-fn .hp-glyph::before {
    content: "ƒ";
    font-family: var(--hp-font-mono);
    font-size: calc(var(--hp-glyph-font-mark) * var(--hp-glyph-scale));
    font-weight: 700;
    font-style: italic;
    color: var(--hp-success);
}

.hp-glyph-kind-fn.is-deploying .hp-glyph {
    border-color: var(--hp-warning);
    background: color-mix(in srgb, var(--hp-warning) 8%, transparent);
    box-shadow: 0 0 18em color-mix(in srgb, var(--hp-warning) 40%, transparent);
}

.hp-glyph-kind-fn.is-deploying .hp-glyph::before {
    color: var(--hp-warning);
}

.hp-glyph-kind-fn.is-stopped .hp-glyph {
    border-color: var(--hp-text-disabled);
    background: transparent;
    box-shadow: none;
}

.hp-glyph-kind-fn.is-stopped .hp-glyph::before {
    color: var(--hp-text-disabled);
}

.hp-glyph-kind-fn.is-failed .hp-glyph {
    border-color: var(--hp-danger);
    background: color-mix(in srgb, var(--hp-danger) 8%, transparent);
    box-shadow: none;
}

.hp-glyph-kind-fn.is-failed .hp-glyph::before {
    color: var(--hp-danger);
}

/* identity pool — people-dots cluster */

.hp-glyph-kind-pool .hp-glyph {
    width: 34em;
    height: 30em;
}

.hp-glyph-u {
    position: absolute;
    width: 9em;
    height: 9em;
    border-radius: var(--hp-radius-round);
    background: var(--hp-primary-accent);
    box-shadow: 0 0 8em color-mix(in srgb, var(--hp-primary-accent) 60%, transparent);
}

.hp-glyph-u::after {
    content: "";
    position: absolute;
    top: 10em;
    left: -2.5em;
    width: 14em;
    height: 8em;
    border-radius: calc(var(--hp-glyph-torso-radius-top) * var(--hp-glyph-scale)) calc(var(--hp-glyph-torso-radius-top) * var(--hp-glyph-scale)) calc(var(--hp-glyph-torso-radius-bottom) * var(--hp-glyph-scale)) calc(var(--hp-glyph-torso-radius-bottom) * var(--hp-glyph-scale));
    background: color-mix(in srgb, var(--hp-primary-accent) 55%, transparent);
}

.hp-glyph-u:nth-child(1) { left: 2em; top: 8em; }
.hp-glyph-u:nth-child(2) { left: 12em; top: 2em; }
.hp-glyph-u:nth-child(3) { left: 22em; top: 8em; }

.hp-glyph-kind-pool.is-deploying .hp-glyph-u {
    background: var(--hp-warning);
    box-shadow: 0 0 8em color-mix(in srgb, var(--hp-warning) 60%, transparent);
}

.hp-glyph-kind-pool.is-deploying .hp-glyph-u::after {
    background: color-mix(in srgb, var(--hp-warning) 55%, transparent);
}

.hp-glyph-kind-pool.is-stopped .hp-glyph-u {
    background: var(--hp-text-disabled);
    box-shadow: none;
}

.hp-glyph-kind-pool.is-stopped .hp-glyph-u::after {
    background: color-mix(in srgb, var(--hp-text-disabled) 55%, transparent);
}

.hp-glyph-kind-pool.is-failed .hp-glyph-u {
    background: var(--hp-danger);
    box-shadow: none;
}

.hp-glyph-kind-pool.is-failed .hp-glyph-u::after {
    background: color-mix(in srgb, var(--hp-danger) 55%, transparent);
}

/* domain — dashed route pin, traffic entering */

.hp-glyph-kind-dom .hp-glyph {
    width: 30em;
    height: 30em;
    border-radius: var(--hp-radius-round);
    border: 2em dashed color-mix(in srgb, var(--hp-primary-accent) 65%, transparent);
}

.hp-glyph-kind-dom .hp-glyph::before {
    content: "→";
    color: var(--hp-primary-accent);
    font-size: calc(var(--hp-glyph-font-arrow) * var(--hp-glyph-scale));
    font-weight: 700;
}

.hp-glyph-kind-dom.is-deploying .hp-glyph {
    border-color: color-mix(in srgb, var(--hp-warning) 65%, transparent);
}

.hp-glyph-kind-dom.is-deploying .hp-glyph::before {
    color: var(--hp-warning);
}

.hp-glyph-kind-dom.is-stopped .hp-glyph {
    border-color: color-mix(in srgb, var(--hp-text-disabled) 65%, transparent);
}

.hp-glyph-kind-dom.is-stopped .hp-glyph::before {
    color: var(--hp-text-disabled);
}

.hp-glyph-kind-dom.is-failed .hp-glyph {
    border-color: color-mix(in srgb, var(--hp-danger) 65%, transparent);
}

.hp-glyph-kind-dom.is-failed .hp-glyph::before {
    color: var(--hp-danger);
}

/* database hero — the 96×110 detail-page centerpiece */

.hp-glyph-hero .hp-glyph {
    width: 96em;
    height: 110em;
    margin-bottom: 16em;
}

.hp-glyph-hero .hp-glyph-cyl {
    border-width: 3em;
    border-radius: calc(var(--hp-glyph-hero-rx) * var(--hp-glyph-scale)) / calc(var(--hp-glyph-hero-ry) * var(--hp-glyph-scale));
    background: linear-gradient(180deg, color-mix(in srgb, var(--hp-primary) 20%, transparent), color-mix(in srgb, var(--hp-primary) 6%, transparent));
    box-shadow: 0 0 44em color-mix(in srgb, var(--hp-primary-accent) 35%, transparent);
}

.hp-glyph-hero .hp-glyph-cyl::before {
    left: -3em;
    right: -3em;
    top: -3em;
    height: 42em;
    border-width: 3em;
    background: color-mix(in srgb, var(--hp-primary) 24%, transparent);
}

.hp-glyph-seam {
    position: absolute;
    left: 6em;
    right: 6em;
    height: 14em;
    border-bottom: 1.5em solid color-mix(in srgb, var(--hp-primary-accent) 35%, transparent);
    border-radius: var(--hp-radius-round);
}

.hp-glyph-seam-upper { top: 52em; }
.hp-glyph-seam-lower { top: 76em; }

/* labels — name in the data face, then TYPE · STATE. The meta line is the reason state is
   never color-alone; it keeps rendering under reduced motion and for every state. Muted
   ramp matches the comps (the map sits on ground/deep, where the ratio holds). */

.hp-glyph-name {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-glyph-font-name);
    color: var(--hp-text);
}

.hp-glyph-meta {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-glyph-font-meta);
    color: var(--hp-text-disabled);
    text-transform: uppercase;
}

.hp-glyph-hero .hp-glyph-name {
    font-size: var(--hp-glyph-font-hero-name);
    font-weight: 500;
}

.hp-glyph-hero .hp-glyph-meta {
    font-size: var(--hp-glyph-font-hero-meta);
    margin-top: 3px;
}

.hp-service-glyph.is-deploying .hp-glyph-meta {
    color: var(--hp-warning);
}

.hp-service-glyph.is-failed .hp-glyph-meta {
    color: var(--hp-danger-light);
}

@media (prefers-reduced-motion: reduce) {
    .hp-service-glyph .hp-glyph,
    .hp-service-glyph .hp-glyph-cyl,
    .hp-service-glyph .hp-glyph-u {
        box-shadow: none;
    }
}

/* job queue — the tile again, three stacked bars: items waiting in order. Same state hues as
   the compute tiles; the bars are the mark, drawn (one bar plus two shadow copies), not typed. */

.hp-glyph-kind-queue .hp-glyph {
    width: 34em;
    height: 34em;
    border-radius: calc(var(--hp-glyph-tile-radius) * var(--hp-glyph-scale));
    border: 2em solid var(--hp-success);
    background: color-mix(in srgb, var(--hp-success) 8%, transparent);
    box-shadow: 0 0 16em color-mix(in srgb, var(--hp-success) 35%, transparent);
    color: var(--hp-success);
}

.hp-glyph-kind-queue .hp-glyph::before {
    content: "";
    width: 14em;
    height: 2.5em;
    border-radius: var(--hp-radius-round);
    background: currentColor;
    box-shadow: 0 -5.5em 0 currentColor, 0 5.5em 0 currentColor;
}

.hp-glyph-kind-queue.is-deploying .hp-glyph {
    border-color: var(--hp-warning);
    background: color-mix(in srgb, var(--hp-warning) 8%, transparent);
    box-shadow: 0 0 18em color-mix(in srgb, var(--hp-warning) 40%, transparent);
    color: var(--hp-warning);
}

.hp-glyph-kind-queue.is-stopped .hp-glyph {
    border-color: var(--hp-text-disabled);
    background: transparent;
    box-shadow: none;
    color: var(--hp-text-disabled);
}

.hp-glyph-kind-queue.is-failed .hp-glyph {
    border-color: var(--hp-danger);
    background: color-mix(in srgb, var(--hp-danger) 8%, transparent);
    box-shadow: none;
    color: var(--hp-danger);
}

/* tunnel — the tile again, its mark a tunnel mouth: an arch open at the bottom, the way in from
   outside. Drawn like the queue's bars, so it takes the same state hues through currentColor. */

.hp-glyph-kind-tunnel .hp-glyph {
    width: 34em;
    height: 34em;
    border-radius: calc(var(--hp-glyph-tile-radius) * var(--hp-glyph-scale));
    border: 2em solid var(--hp-success);
    background: color-mix(in srgb, var(--hp-success) 8%, transparent);
    box-shadow: 0 0 16em color-mix(in srgb, var(--hp-success) 35%, transparent);
    color: var(--hp-success);
}

.hp-glyph-kind-tunnel .hp-glyph::before {
    content: "";
    width: 11em;
    height: 9em;
    margin-top: 3em;
    border: 2.5em solid currentColor;
    border-bottom: 0;
    border-radius: var(--hp-radius-pill) var(--hp-radius-pill) 0 0;
}

.hp-glyph-kind-tunnel.is-deploying .hp-glyph {
    border-color: var(--hp-warning);
    background: color-mix(in srgb, var(--hp-warning) 8%, transparent);
    box-shadow: 0 0 18em color-mix(in srgb, var(--hp-warning) 40%, transparent);
    color: var(--hp-warning);
}

.hp-glyph-kind-tunnel.is-stopped .hp-glyph {
    border-color: var(--hp-text-disabled);
    background: transparent;
    box-shadow: none;
    color: var(--hp-text-disabled);
}

.hp-glyph-kind-tunnel.is-failed .hp-glyph {
    border-color: var(--hp-danger);
    background: color-mix(in srgb, var(--hp-danger) 8%, transparent);
    box-shadow: none;
    color: var(--hp-danger);
}

/* region globe (HpRegionGlobe) — the tilted graticule in periwinkle, the marker where the
   region is. Drawn geometry, so it takes the same tokens as the cylinder. */

.hp-globe {
    display: block;
    flex: 0 0 auto;
}

.hp-globe-sea {
    fill: color-mix(in srgb, var(--hp-primary) 16%, transparent);
}

.hp-globe-grid {
    fill: none;
    stroke: color-mix(in srgb, var(--hp-primary-accent) 40%, transparent);
    stroke-width: 0.7;
}

.hp-globe-rim {
    fill: none;
    stroke: color-mix(in srgb, var(--hp-primary-accent) 78%, transparent);
    stroke-width: 1.2;
}

.hp-globe-halo {
    fill: none;
    stroke: color-mix(in srgb, var(--hp-primary-accent) 50%, transparent);
    stroke-width: 1;
}

.hp-globe-mark {
    fill: var(--hp-primary-accent);
}

/* region — the globe (HpRegionGlobe) in the service glyph's frame, so a region stands on the map
   the way a service does: drawn shape, name, meta line. No state hue and no glow: a region is
   where things run, not a thing that runs. */

.hp-glyph-kind-region .hp-glyph {
    width: 34em;
    height: 34em;
    border-radius: var(--hp-radius-round);
}

.hp-glyph-kind-region .hp-globe {
    width: 34em;
    height: 34em;
}

/* internet — the outside, where traffic comes from: a cloud outline in the domain pin's dashed
   stroke (the same "outside our walls" grammar), never filled. */

.hp-glyph-kind-internet .hp-glyph {
    width: 40em;
    height: 36em;
}

.hp-glyph-kind-internet .hp-cloud {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: color-mix(in srgb, var(--hp-primary-accent) 65%, transparent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2.6 2;
}

/* The list toolbar sits under a registry head and speaks its mono voice: letterspaced labels,
   each value drawn on a hairline rather than boxed, so the controls read as part of the register
   instead of a form dropped on top of it. */
.hp-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    /* flex-start: bottom alignment pushed the label of any field whose choices wrapped to two
       rows (sort) above the other labels. */
    align-items: flex-start;
    gap: 0.75rem 1.5rem;
    padding: 0.625rem 1.125rem 0.75rem;
    border-bottom: 1px solid var(--hp-border-subtle);
}

.hp-list-toolbar-field {
    display: flex;
    flex: 1 1 8rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.hp-list-toolbar-search {
    flex: 3 1 14rem;
}

.hp-list-toolbar-field:has(.hp-list-toolbar-choices) {
    flex: 0 1 auto;
}

.hp-list-toolbar-field > span,
.hp-list-toolbar-count,
.hp-list-toolbar-clear {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-sk-font-label);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hp-text-muted);
}

.hp-list-toolbar-field input {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    padding: 0.25rem 0;
    border: none;
    border-bottom: 1px solid var(--hp-border-subtle);
    background: transparent;
    color: var(--hp-text);
    font: inherit;
}

/* Filter choices are in-page buttons, not a <select>: a native popup is an OS window, and on
   Linux desktops opening one can freeze the whole browser. */
.hp-list-toolbar-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    min-height: 2rem;
    border-bottom: 1px solid var(--hp-border-subtle);
}

.hp-list-toolbar-choice {
    padding: 0.35rem 0 0.3rem;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--hp-text-muted);
    font-family: var(--hp-font-mono);
    font-size: var(--hp-sk-font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.hp-list-toolbar-choice:hover {
    color: var(--hp-text);
}

.hp-list-toolbar-choice[aria-pressed="true"] {
    color: var(--hp-text);
    border-bottom-color: var(--hp-primary-accent);
}

.hp-list-toolbar-field input::placeholder {
    color: var(--hp-text-muted);
}

.hp-list-toolbar-field input::-webkit-search-cancel-button {
    filter: grayscale(1);
}

.hp-list-toolbar-count {
    margin-left: auto;
    padding: 0;
    letter-spacing: 0.1em;
}

.hp-list-toolbar-clear {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--hp-primary-accent);
    cursor: pointer;
}

.hp-list-toolbar-clear:hover {
    color: var(--hp-primary-light);
}

.hp-list-toolbar input:focus-visible {
    outline: none;
    border-bottom-color: var(--hp-primary-accent);
}

.hp-list-toolbar button:focus-visible {
    outline: 2px solid var(--hp-primary-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Section applies-when tag and danger rows (app detail grammar, 2026-09-17)
   ========================================================================== */

.hp-section-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* Mono, letterspaced like the section title it sits beside; the hue says which of the three
   timings applies, the words say it too. */
.hp-applies-tag {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-sk-font-ty);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hp-text-muted);
}

.hp-applies-tag--deploy { color: var(--hp-warning); }
.hp-applies-tag--minute { color: var(--hp-text-muted); }
.hp-applies-tag--now { color: var(--hp-success); }

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

.hp-danger-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.hp-danger-row + .hp-danger-row {
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--hp-danger) 25%, transparent);
}

.hp-danger-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 24rem;
    min-width: 0;
}

.hp-danger-row-title {
    font-weight: 600;
    color: var(--hp-danger-light);
}

.hp-danger-row-action {
    flex: 0 0 auto;
}