/* 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);
}

/* event bus — the tile again, its mark a bus: one rail with three taps hanging off it, every
   attached service on the same line. Drawn like the queue's bars (one tap plus two shadow
   copies), so it takes the same state hues through currentColor. */

.hp-glyph-kind-bus .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);
}

/* The rail's bottom margin centres rail and taps together; the taps start inside the rail so
   no seam shows between them at any scale. */
.hp-glyph-kind-bus .hp-glyph::before {
    content: "";
    width: 18em;
    height: 2.5em;
    margin-bottom: 6em;
    border-radius: var(--hp-radius-round);
    background: currentColor;
}

.hp-glyph-kind-bus .hp-glyph::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.5em;
    height: 7.25em;
    margin-left: -1.25em;
    margin-top: -3em;
    border-radius: var(--hp-radius-round);
    background: currentColor;
    box-shadow: -7em 0 0 currentColor, 7em 0 0 currentColor;
}

.hp-glyph-kind-bus.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-bus.is-stopped .hp-glyph {
    border-color: var(--hp-text-disabled);
    background: transparent;
    box-shadow: none;
    color: var(--hp-text-disabled);
}

.hp-glyph-kind-bus.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;
}

.hp-danger-row-refusal {
    color: var(--hp-text-muted);
}