/* =========================================================================
   HELSTIFY PANEL — shared shell and primitives for /dashboard and /panel/*

   Plain CSS served from public/, not through Vite: every kind panel ships its
   own file next to this one (public/hpanel/{kind}.css, loaded by the shell),
   so a panel can change without a theme build. Everything is scoped under
   `.hp`. Colours derive from the admin palette (`--color-*` HSL triplets), so
   light/dark and any retint follow the rest of the site.

   Brand: monochrome, one orange (`--hp-accent`), Inter / Inter Tight /
   JetBrains Mono. The chamfered corner is reserved for instruments — consoles,
   readouts — never for cards or buttons.
   ========================================================================= */

.hp {
    --hp-bg: hsl(var(--color-background));
    --hp-bg-2: hsl(var(--color-background-secondary));
    --hp-ink: hsl(var(--color-base));
    --hp-ink-2: color-mix(in srgb, hsl(var(--color-base)) 72%, hsl(var(--color-background)));
    --hp-ink-3: color-mix(in srgb, hsl(var(--color-base)) 56%, hsl(var(--color-background)));
    --hp-line: color-mix(in srgb, hsl(var(--color-base)) 10%, transparent);
    --hp-line-2: color-mix(in srgb, hsl(var(--color-base)) 16%, transparent);
    --hp-fill: color-mix(in srgb, hsl(var(--color-base)) 4%, transparent);
    --hp-fill-2: color-mix(in srgb, hsl(var(--color-base)) 7%, transparent);
    --hp-surface: color-mix(in srgb, hsl(var(--color-background-secondary)) 70%, hsl(var(--color-background)));
    --hp-accent: hsl(var(--color-primary));
    --hp-accent-ink: hsl(var(--color-inverted, var(--color-background)));
    --hp-accent-soft: hsl(var(--color-primary) / 0.12);
    --hp-accent-line: hsl(var(--color-primary) / 0.42);
    --hp-ok: hsl(var(--color-success, 142 60% 45%));
    --hp-warn: hsl(var(--color-warning, 38 92% 50%));
    --hp-err: hsl(var(--color-error, 0 72% 55%));
    --hp-info: hsl(var(--color-info, 210 80% 56%));

    --hp-r-xs: 6px;
    --hp-r-sm: 10px;
    --hp-r: 10px;
    --hp-r-lg: 14px;
    --hp-shadow: none;
    --hp-shadow-lg: 0 30px 80px -30px rgb(0 0 0 / 0.55);
    --hp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hp-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --hp-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --hp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    display: block;
    min-height: 100%;
    background: var(--hp-bg);
    color: var(--hp-ink);
    font-family: var(--hp-font);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp :where(a) { color: inherit; text-decoration: none; }
.hp [x-cloak] { display: none !important; }
.hp .hp-ico { flex: none; }
.hp :focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; border-radius: var(--hp-r-xs); }

/* -------------------------------------------------------------- nav ---- */
/* The product bar: flush with the top of the work surface, one hairline under
   it, and a menu per product placed under the item that opened it. */
.hp-nav {
    position: sticky; top: 0; z-index: 30;
    margin: 0 0 4px;
    background: var(--hp-bg);
    border-bottom: 1px solid var(--hp-line-2);
}
.hp-nav { container: hpnav / inline-size; }
.hp-nav__bar { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.hp-nav__bar::-webkit-scrollbar { display: none; }
.hp-nav__item {
    position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px;
    color: var(--hp-ink-2); font: 500 13.5px/1 var(--hp-font); letter-spacing: -0.01em; white-space: nowrap;
    transition: color .15s;
}
.hp-nav__item:first-child { padding-left: 2px; }
.hp-nav__item .hp-ico { color: var(--hp-ink-3); transition: color .15s; }
.hp-nav__item::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: transparent; }
.hp-nav__item:first-child::after { left: 2px; }
.hp-nav__item:hover, .hp-nav__item[aria-expanded=true] { color: var(--hp-ink); }
.hp-nav__item:hover .hp-ico, .hp-nav__item[aria-expanded=true] .hp-ico { color: var(--hp-ink-2); }
.hp-nav__item.is-active { color: var(--hp-ink); font-weight: 600; }
.hp-nav__item.is-active::after { background: var(--hp-accent); }
.hp-nav__item.is-active .hp-ico { color: var(--hp-accent); }
.hp-nav__item.is-empty { color: var(--hp-ink-3); }
.hp-nav__item em { font: 500 11px/1 var(--hp-mono); font-style: normal; color: var(--hp-ink-3); font-variant-numeric: tabular-nums; }
.hp-nav__item.is-active em { color: var(--hp-ink-2); }
.hp-nav__sep { flex: none; width: 1px; margin: 14px 8px; background: var(--hp-line-2); }
.hp-nav__end { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 16px; }
@container hpnav (max-width: 1260px) {
    .hp-nav__item { padding: 0 10px; }
    .hp-nav__item:not(.is-active, :first-child) .hp-ico { display: none; }
    .hp-nav__item::after { left: 10px; right: 10px; }
}
@container hpnav (max-width: 1060px) {
    .hp-nav__end .hp-btn > span, .hp-nav__end .hp-btn { font-size: 0; gap: 0; width: 30px; padding: 0; }
}

.hp-nav__menu {
    position: absolute; top: calc(100% + 1px); width: 340px; z-index: 40;
    background: var(--hp-bg-2); border: 1px solid var(--hp-line-2); border-top: 0;
    border-radius: 0 0 var(--hp-r) var(--hp-r); box-shadow: var(--hp-shadow-lg);
}
.hp-nav__menu-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--hp-line); }
.hp-nav__menu-head strong { display: block; font: 600 13.5px/1.3 var(--hp-display); }
.hp-nav__menu-head small { display: block; margin-top: 3px; color: var(--hp-ink-3); font-size: 12.5px; line-height: 1.45; }
.hp-nav__menu ul { list-style: none; margin: 0; padding: 6px; }
.hp-nav__menu li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--hp-r-xs); }
.hp-nav__menu li a:hover, .hp-nav__menu li a:focus-visible { background: var(--hp-fill-2); }
.hp-nav__menu li span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-nav__menu li small { color: var(--hp-ink-3); font: 500 11.5px/1 var(--hp-mono); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-nav__menu .hp-dot { box-shadow: none; }
.hp-nav__menu-empty { margin: 0; padding: 14px 16px; color: var(--hp-ink-3); font-size: 13px; }
.hp-nav__menu-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--hp-line); font-size: 12.5px; font-weight: 500; }
.hp-nav__menu-foot a { display: inline-flex; align-items: center; gap: 5px; color: var(--hp-ink-2); }
.hp-nav__menu-foot a:last-child { margin-left: auto; }
.hp-nav__menu-foot a:hover { color: var(--hp-accent); }
.hp-switch { position: relative; }
.hp-switch > button { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--hp-line-2); background: var(--hp-fill); color: var(--hp-ink); font: 500 13px/1 var(--hp-font); cursor: pointer; white-space: nowrap; }
.hp-pop {
    position: fixed; margin-top: 8px; min-width: 260px; padding: 6px; z-index: 60; display: block;
    background: var(--hp-bg-2); border: 1px solid var(--hp-line-2); border-radius: var(--hp-r); box-shadow: var(--hp-shadow-lg);
}
.hp-pop a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; padding: 8px 10px; border-radius: var(--hp-r-xs); color: var(--hp-ink); }
.hp-pop a small { grid-column: 2; color: var(--hp-ink-3); font-size: 12px; }
.hp-pop a:hover, .hp-pop a.is-active { background: var(--hp-fill-2); }
.hp kbd { font: 500 11px/1 var(--hp-mono); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--hp-line-2); color: var(--hp-ink-3); background: var(--hp-bg); }

/* ------------------------------------------------------------ content --- */
.hp-content { padding: 24px 0 64px; }
.hp-page { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; animation: hp-fade .35s var(--hp-ease); }

.hp-eyebrow { margin: 0 0 8px; font: 500 11px/1 var(--hp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hp-ink-3); }
.hp-display { margin: 0; font: 600 26px/1.15 var(--hp-display); letter-spacing: -0.025em; }
.hp-title { margin: 0; font: 600 clamp(24px, 2.4vw, 30px)/1.1 var(--hp-display); letter-spacing: -0.03em; }
.hp-lede { margin: 10px 0 0; max-width: 62ch; color: var(--hp-ink-2); font-size: 15px; }
.hp-muted { color: var(--hp-ink-3); }
.hp-link { display: inline-flex; align-items: center; gap: 4px; color: var(--hp-ink-2); font-weight: 500; font-size: 13px; }
.hp-link:hover { color: var(--hp-accent); }
.hp code, .hp .hp-mono { font-family: var(--hp-mono); font-size: .92em; }

.hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hp-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------- primitives -- */
.hp-card {
    position: relative; background: var(--hp-surface); border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg); padding: 20px; box-shadow: var(--hp-shadow);
}
.hp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 14px; }
.hp-card__head h2, .hp-card__head h3 { margin: 0; font: 600 15px/1.2 var(--hp-display); letter-spacing: -0.015em; }
.hp-card--flush { padding: 0; overflow: hidden; }
.hp-card--flush > .hp-card__head { padding: 18px 20px 0; }

.hp-grid { display: grid; gap: 16px; }
.hp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-grid--main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

.hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
    border-radius: var(--hp-r-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    font: 600 13.5px/1 var(--hp-font); letter-spacing: -0.01em;
    background: var(--hp-ink); color: var(--hp-bg);
    transition: transform .15s var(--hp-ease), background .2s, box-shadow .2s, opacity .2s;
}
.hp-btn:hover { box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--hp-ink) 60%, transparent); }
.hp-btn:active { transform: translateY(1px) scale(.99); }
.hp-btn:disabled, .hp-btn[aria-disabled=true] { opacity: .5; pointer-events: none; }
.hp-btn--accent { background: var(--hp-accent); color: #fff; }
.hp-btn--accent:hover { box-shadow: 0 0 0 1px var(--hp-accent-line), 0 10px 28px -10px var(--hp-accent); }
.hp-btn--ghost { background: var(--hp-fill); color: var(--hp-ink); border-color: var(--hp-line-2); }
.hp-btn--ghost:hover { background: var(--hp-fill-2); box-shadow: none; }
.hp-btn--danger { background: transparent; color: var(--hp-err); border-color: color-mix(in srgb, var(--hp-err) 40%, transparent); }
.hp-btn--danger:hover { background: color-mix(in srgb, var(--hp-err) 10%, transparent); box-shadow: none; }
.hp-btn--sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.hp-btn--icon { width: 38px; padding: 0; }

.hp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hp-ink-3); flex: none; }
.hp-dot--active, .hp-dot--ok, .hp-dot--running { background: var(--hp-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-ok) 20%, transparent); }
.hp-dot--pending, .hp-dot--warn, .hp-dot--starting { background: var(--hp-warn); }
.hp-dot--suspended, .hp-dot--err, .hp-dot--offline, .hp-dot--cancelled { background: var(--hp-err); }
.hp-dot--live { animation: hp-pulse 2s infinite; }

.hp-badge {
    display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 999px;
    font: 500 12px/1 var(--hp-font); background: var(--hp-fill-2); color: var(--hp-ink-2); white-space: nowrap;
}
.hp-badge--active, .hp-badge--ok { background: color-mix(in srgb, var(--hp-ok) 12%, transparent); color: color-mix(in srgb, var(--hp-ok) 75%, var(--hp-ink)); }
.hp-badge--suspended, .hp-badge--err { background: color-mix(in srgb, var(--hp-err) 12%, transparent); color: color-mix(in srgb, var(--hp-err) 80%, var(--hp-ink)); }
.hp-badge--pending, .hp-badge--warn { background: color-mix(in srgb, var(--hp-warn) 14%, transparent); color: color-mix(in srgb, var(--hp-warn) 70%, var(--hp-ink)); }
.hp-badge--accent { background: var(--hp-accent-soft); color: var(--hp-accent); }

/* Stat readout: label / big mono value / foot. */
.hp-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hp-stat__label { display: flex; align-items: center; gap: 7px; font: 500 11px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3); }
.hp-stat__value { font: 600 26px/1 var(--hp-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-stat__value small { font-size: 13px; font-weight: 500; color: var(--hp-ink-3); margin-left: 3px; letter-spacing: 0; }
.hp-stat__foot { font-size: 12.5px; color: var(--hp-ink-3); }

/* Meter: <div class="hp-meter" style="--v: 64%"><i></i></div>. data-level=warn|err recolours. */
.hp-meter { position: relative; height: 6px; border-radius: 99px; background: var(--hp-fill-2); overflow: hidden; }
.hp-meter > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: var(--hp-ink); transition: width .6s var(--hp-ease); }
.hp-meter[data-level=warn] > i { background: var(--hp-warn); }
.hp-meter[data-level=err] > i { background: var(--hp-err); }
.hp-meter--accent > i { background: var(--hp-accent); }

/* Sparkline host: an inline <svg class="hp-spark"> with a <path class="line"> and <path class="area">. */
.hp-spark { display: block; width: 100%; height: 44px; overflow: visible; }
.hp-spark .line { fill: none; stroke: var(--hp-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hp-spark .area { fill: var(--hp-accent-soft); stroke: none; }

/* Tabs: <nav class="hp-tabs"><button class="is-active">…</button></nav>. */
.hp-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--hp-fill); border: 1px solid var(--hp-line); overflow-x: auto; scrollbar-width: none; }
.hp-tabs > a, .hp-tabs > button {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 9px; border: 0; background: none;
    font: 500 13.5px/1 var(--hp-font); color: var(--hp-ink-2); cursor: pointer; white-space: nowrap; transition: background .18s, color .18s;
}
.hp-tabs > a:hover, .hp-tabs > button:hover { color: var(--hp-ink); }
.hp-tabs > .is-active { background: var(--hp-bg-2); color: var(--hp-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 0 0 1px var(--hp-line); }
.hp-tabs > .is-active .hp-ico { color: var(--hp-accent); }

/* Key/value list. */
.hp-kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.hp-kv dt { color: var(--hp-ink-3); font-size: 13px; }
.hp-kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Tables. */
.hp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hp-table th { text-align: left; font: 500 11px/1 var(--hp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hp-ink-3); padding: 10px 14px; border-bottom: 1px solid var(--hp-line); }
.hp-table td { padding: 12px 14px; border-bottom: 1px solid var(--hp-line); vertical-align: middle; }
.hp-table tr:last-child td { border-bottom: 0; }
.hp-table tbody tr { transition: background .15s; }
.hp-table tbody tr:hover { background: var(--hp-fill); }
.hp-table-wrap { overflow-x: auto; }

/* Forms. */
.hp-field { display: flex; flex-direction: column; gap: 6px; }
.hp-field > label, .hp-label { font-size: 13px; font-weight: 500; color: var(--hp-ink-2); }
.hp-field small { color: var(--hp-ink-3); font-size: 12px; }
.hp-input, .hp select.hp-input, .hp textarea.hp-input {
    width: 100%; height: 38px; padding: 0 12px; border-radius: var(--hp-r-sm); border: 1px solid var(--hp-line-2);
    background: var(--hp-bg); color: var(--hp-ink); font: 400 14px/1.2 var(--hp-font); transition: border-color .2s, box-shadow .2s;
}
.hp textarea.hp-input { height: auto; padding: 10px 12px; line-height: 1.5; }
.hp-input:focus { outline: none; border-color: var(--hp-accent-line); box-shadow: 0 0 0 3px var(--hp-accent-soft); }
.hp-toggle { position: relative; width: 38px; height: 22px; flex: none; appearance: none; border-radius: 99px; background: var(--hp-fill-2); border: 1px solid var(--hp-line-2); cursor: pointer; transition: background .2s; }
.hp-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--hp-ink-2); transition: transform .22s var(--hp-ease), background .2s; }
.hp-toggle:checked { background: var(--hp-accent); border-color: var(--hp-accent); }
.hp-toggle:checked::after { transform: translateX(16px); background: #fff; }

/* Console / log — an instrument, so it gets the cut corner. */
.hp-console {
    background: #0b0b0c; color: #e9e6e1; font: 400 12.5px/1.65 var(--hp-mono);
    border: 1px solid rgb(255 255 255 / .08);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    border-radius: var(--hp-r) 0 var(--hp-r) var(--hp-r);
}
.hp-console__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgb(255 255 255 / .07); color: rgb(233 230 225 / .55); font-size: 11.5px; }
.hp-console__body { padding: 12px 14px; height: 380px; overflow: auto; white-space: pre-wrap; word-break: break-word; scrollbar-color: rgb(255 255 255 / .2) transparent; }
.hp-console__input { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid rgb(255 255 255 / .07); }
.hp-console__input::before { content: '›'; color: var(--hp-accent); font-weight: 700; }
.hp-console__input input { flex: 1; background: none; border: 0; outline: none; color: inherit; font: inherit; }

/* Empty / skeleton / toast. */
.hp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 20px; color: var(--hp-ink-2); }
.hp-empty p { margin: 0; max-width: 46ch; }
.hp-empty--hero { padding: 64px 24px; background: var(--hp-surface); }
.hp-empty--hero h2 { margin: 6px 0 0; font: 600 22px/1.2 var(--hp-display); letter-spacing: -0.02em; color: var(--hp-ink); }
.hp-empty__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--hp-bg-2); border: 1px solid var(--hp-line-2); color: var(--hp-accent); box-shadow: var(--hp-shadow); }
.hp-skel { border-radius: var(--hp-r-xs); background: var(--hp-fill-2); animation: hp-pulse 1.4s infinite; }
.hp-toast { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--hp-r); background: var(--hp-ink); color: var(--hp-bg); box-shadow: var(--hp-shadow-lg); font-weight: 500; animation: hp-rise .25s var(--hp-ease); }

.hp-copy { display: inline-flex; align-items: center; gap: 8px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--hp-line-2); background: var(--hp-fill); color: var(--hp-ink-2); cursor: pointer; font: inherit; }
.hp-copy:hover { color: var(--hp-ink); border-color: var(--hp-ink-3); }

/* ---------------------------------------------------------- hero band --- */
.hp-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 28px; align-items: start;
    padding: 26px 28px; border-radius: var(--hp-r-lg); border: 1px solid var(--hp-line); overflow: hidden;
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
}
.hp-hero > * { position: relative; z-index: 1; }
.hp-hero__id { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.hp-hero__ico {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; flex: none;
    background: var(--hp-bg-2); color: var(--hp-ink); border: 1px solid var(--hp-line-2);
}
.hp-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; font-size: 13px; }
.hp-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hp-hero__stats {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
    margin: 4px -28px -26px; border-top: 1px solid var(--hp-line); background: color-mix(in srgb, var(--hp-bg) 40%, transparent);
}
.hp-hero__stats > * { padding: 16px 28px; border-right: 1px solid var(--hp-line); }
.hp-hero__stats > *:last-child { border-right: 0; }

/* ------------------------------------------------------------- hub ------ */
.hp-hub { gap: 20px; }
.hp-hub__head { padding-top: 6px; }

/* Account figures: one ruled line, no boxes. */
.hp-ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--hp-line-2); }
.hp-ledger > div { padding: 16px 20px 15px; border-left: 1px solid var(--hp-line); min-width: 0; }
.hp-ledger > div:first-child { border-left: 0; padding-left: 2px; }
.hp-ledger dt { font: 500 11px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3); }
.hp-ledger dd { margin: 10px 0 0; font: 600 28px/1 var(--hp-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-ledger dd.is-date { font-size: 22px; line-height: 28px; }
.hp-ledger p { margin: 6px 0 0; font-size: 12.5px; color: var(--hp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-ledger .is-due dd { color: var(--hp-accent); }

.hp-hub__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.hp-hub__main, .hp-hub__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hp-card--flush > .hp-card__head { padding: 16px 20px 0; margin-bottom: 10px; }

/* Needs attention: a list, not a row of cards. */
.hp-attn__row {
    display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto 56px; align-items: center; gap: 14px;
    padding: 12px 20px; border-top: 1px solid var(--hp-line); transition: background .15s;
}
.hp-attn__row:hover { background: var(--hp-fill); }
.hp-attn__row > .hp-ico { color: var(--hp-ink-3); }
.hp-attn__row.is-due > .hp-ico, .hp-attn__row.is-due em { color: var(--hp-accent); }
.hp-attn__row.is-err > .hp-ico { color: var(--hp-err); }
.hp-attn__what { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-attn__meta { color: var(--hp-ink-3); font-size: 12.5px; white-space: nowrap; }
.hp-attn__amt { font: 500 13px/1 var(--hp-mono); text-align: right; min-width: 70px; font-variant-numeric: tabular-nums; }
.hp-attn__row em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--hp-ink-2); text-align: right; }
.hp-attn__row:hover em { color: var(--hp-accent); }

/* Services: a table you can click through. */
.hp-svcs { padding-bottom: 6px; }
.hp-svcs__cols, .hp-svcs__row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 16px; align-items: center; gap: 16px; padding-inline: 20px; }
.hp-svcs__cols { padding-block: 8px; border-top: 1px solid var(--hp-line); font: 500 10.5px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3); }
.hp-svcs__cols span:last-child { text-align: right; }
.hp-svcs__group {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px 6px;
    border-top: 1px solid var(--hp-line); font: 600 12.5px/1 var(--hp-font); color: var(--hp-ink-2);
}
.hp-svcs__group .hp-ico { color: var(--hp-ink-3); }
.hp-svcs__group b { font: 500 11px/1 var(--hp-mono); color: var(--hp-ink-3); }
.hp-svcs__row { padding-block: 10px; transition: background .15s; }
.hp-svcs__row:hover { background: var(--hp-fill); }
.hp-svcs__row > .hp-ico { color: var(--hp-ink-3); transition: color .15s, transform .15s var(--hp-ease); }
.hp-svcs__row:hover > .hp-ico { color: var(--hp-ink); transform: translateX(2px); }
.hp-svcs__name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hp-svcs__name strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-svcs__name small { color: var(--hp-ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-svcs__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hp-ink-2); }
.hp-svcs__status .hp-dot { box-shadow: none; }
.hp-svcs__when { font: 500 12.5px/1 var(--hp-mono); color: var(--hp-ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.hp-svcs .hp-empty { border-top: 1px solid var(--hp-line); }

/* Products not on the account yet. */
.hp-more .hp-section-label { margin: 6px 0 10px; }
.hp-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hp-line); }
.hp-more__item { display: flex; gap: 12px; padding: 14px 16px 14px 2px; border-bottom: 1px solid var(--hp-line); }
.hp-more__item:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hp-line); }
.hp-more__item > .hp-ico { margin-top: 2px; color: var(--hp-ink-3); }
.hp-more__item strong { display: block; font-weight: 600; font-size: 13.5px; }
.hp-more__item small { display: block; margin-top: 2px; color: var(--hp-ink-3); font-size: 12.5px; }
.hp-more__item:hover strong { color: var(--hp-accent); }

.hp-svc__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--hp-bg-2); border: 1px solid var(--hp-line-2); color: var(--hp-ink-2); }

.hp-side__label { margin: 0 0 4px; font: 500 10.5px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3); }
.hp-side__none { margin: 0; font-size: 13px; }
.hp-timeline { list-style: none; margin: 0; padding: 0; }
.hp-timeline li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hp-line); }
.hp-timeline li:first-child { border-top: 0; }
.hp-timeline li.hp-muted { display: block; }
.hp-timeline time { font: 500 12px/1.5 var(--hp-mono); color: var(--hp-ink-3); }
.hp-timeline span { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-timeline b { font: 500 12px/1.5 var(--hp-mono); color: var(--hp-ink-2); }
.hp-ticket { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hp-line); }
.hp-ticket:first-of-type { border-top: 0; }
.hp-ticket small { display: block; color: var(--hp-ink-3); font-size: 12px; }
.hp-ticket:hover span { color: var(--hp-accent); }
/* The dashboard is only the workspace chat: every wrapper down to it fills the editor. */
.wb-editor-body:has(.hp-hubchat) > main,
.wb-editor-body:has(.hp-hubchat) .hl-console-shell,
.wb-editor-body:has(.hp-hubchat) .hp,
.wb-editor-body:has(.hp-hubchat) .hp-content { height: 100%; min-height: 0; padding: 0; margin: 0; max-width: none; }
.wb-editor-body:has(.hp-hubchat) { overflow: hidden; }
.hp-hubchat { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.hp-hubchat > .dk-council { flex: 1; min-height: 0; }
/* The chat fills the page: a hairline toolbar, then the conversation. */
.hp .hp-hubchat .dk-council .cc.cc { border: 0; border-radius: 0; background: transparent; }
.hp-hubchat .dk-council .cc-head { height: 48px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--hp-line); background: var(--hp-bg); }
.hp-hubchat .dk-council .cc-thread-btn { height: 30px; font-size: 13px; }
.hp-hubchat .dk-council .cc-head .cc-chip { height: 28px; padding: 0 10px; border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-xs); background: transparent; font-size: 12px; }
.hp-hubchat .dk-council .cc-head .cc-chip:hover { background: var(--hp-fill-2); }
.hp-hubchat .dk-council .cc-head .cc-icon-btn { height: 30px; width: 30px; }
.hp-hubchat .dk-council .cc-thread { padding-top: 32px; }
.hp-hubchat .dk-council .cc-you-text { border: 0; border-radius: 14px 14px 4px 14px; background: var(--hp-fill-2); box-shadow: none; }

/* A new conversation is the dashboard's front page: heading, the composer
   straight under it, then the starters. The wrappers between .cc and the
   empty state step aside (display: contents) so those pieces can be ordered
   as one centred column. */
.hp-hubchat .dk-council .cc:has(.cc-empty) { justify-content: safe center; gap: 0; padding: 72px 0 40px; overflow-y: auto; }
.hp-hubchat .dk-council .cc:has(.cc-empty) > .cc-head { position: absolute; inset: 0 0 auto; z-index: 5; }
.hp-hubchat .dk-council .cc:has(.cc-empty) :is(.cc-stage, .cc-scroll, .cc-thread, .cc-empty) { display: contents; }
.hp-hubchat .dk-council .cc:has(.cc-empty) :is(.cc-empty-kicker, .cc-empty-title, .cc-empty-copy, .cc-suggest, .cc-empty-card, .cc-banner) {
    box-sizing: border-box; width: 100%; max-width: 720px; margin-inline: auto; padding-inline: 24px; text-align: center;
}
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-empty-kicker { order: 1; display: flex !important; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; font: 500 11px/1 var(--hp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hp-ink-3); }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-empty-kicker::before { content: ""; width: 6px; height: 6px; background: var(--hp-accent); }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-empty-title { order: 2; margin: 0 auto; font: 600 34px/1.1 var(--hp-display); letter-spacing: -.035em; color: var(--hp-ink); }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-empty-copy { order: 3; max-width: 560px; margin: 12px auto 0; font-size: 14.5px; line-height: 1.6; color: var(--hp-ink-3); text-wrap: pretty; }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-empty-card { order: 4; max-width: 640px; margin-top: 24px; padding: 18px; text-align: left; }
.hp-hubchat .dk-council .cc:has(.cc-empty) :is(.ba-wrap, .cc-composer) { order: 5; flex: none; }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-composer { width: 100%; margin-top: 28px; padding-bottom: 0; }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-suggest {
    order: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; max-width: 768px;
}
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-suggestion {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; padding: 12px 14px;
    border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-sm); background: transparent; box-shadow: none; transform: none;
    font-size: 13px; line-height: 1.4; text-align: left; color: var(--hp-ink-2);
}
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-suggestion::after { content: "\2192"; flex: none; font-family: var(--hp-mono); color: var(--hp-ink-3); transition: color .15s, translate .15s var(--hp-ease); }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-suggestion:hover { border-color: var(--hp-ink-3); background: var(--hp-fill); color: var(--hp-ink); transform: none; }
.hp-hubchat .dk-council .cc:has(.cc-empty) .cc-suggestion:hover::after { color: var(--hp-accent); translate: 2px 0; }
@media (max-width: 640px) {
    .hp-hubchat .dk-council .cc:has(.cc-empty) { justify-content: flex-start; padding-top: 80px; }
    .hp-hubchat .dk-council .cc:has(.cc-empty) .cc-empty-title { font-size: 26px; }
    .hp-hubchat .dk-council .cc:has(.cc-empty) .cc-empty-copy { font-size: 13.5px; }
    .hp-hubchat .dk-council .cc:has(.cc-empty) .cc-suggest { grid-template-columns: 1fr; padding-inline: 10px; }
    .hp-hubchat .dk-council .cc:has(.cc-empty) .cc-composer { margin-top: 20px; }
}
.hp-hubchat--none { justify-content: center; }
.hp-ws__copy { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--hp-ink-2); }
.hp-ws__copy.hp-muted { margin: 8px 0 0; font-size: 12px; color: var(--hp-ink-3); }
.hp-ws__addr { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-xs); background: var(--hp-bg); color: var(--hp-ink); cursor: pointer; }
.hp-ws__addr code { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-ws__addr .hp-ico { color: var(--hp-ink-3); flex: none; }
.hp-ws__addr:hover { border-color: var(--hp-ink-3); }
.hp-shortcuts a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--hp-r-xs); color: var(--hp-ink-2); font-weight: 500; font-size: 13px; }
.hp-shortcuts a .hp-ico { color: var(--hp-ink-3); }
.hp-shortcuts a:hover { background: var(--hp-fill); color: var(--hp-ink); }

.hp-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.hp-alert strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-alert {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--hp-r);
    border: 1px solid var(--hp-line-2); background: var(--hp-surface); transition: border-color .2s, transform .2s var(--hp-ease);
}
.hp-alert:hover { border-color: var(--hp-ink-3); }
.hp-alert > span { flex: 1; min-width: 0; }
.hp-alert strong { display: block; font-size: 13.5px; }
.hp-alert small { display: block; color: var(--hp-ink-3); font-size: 12.5px; }
.hp-alert em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--hp-ink-2); }
.hp-alert > .hp-ico { color: var(--hp-ink-3); }
.hp-alert--due { border-color: var(--hp-accent-line); background: var(--hp-surface); }
.hp-alert--due > .hp-ico, .hp-alert--due em { color: var(--hp-accent); }
.hp-alert--err { border-color: color-mix(in srgb, var(--hp-err) 40%, transparent); }
.hp-alert--err > .hp-ico { color: var(--hp-err); }

.hp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hp-tile { display: flex; flex-direction: column; gap: 4px; transition: border-color .2s; }
.hp-tile:hover { border-color: var(--hp-line-2); }
.hp-tile__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hp-tile__name { font: 600 17px/1.25 var(--hp-display); letter-spacing: -0.02em; }
.hp-tile > small { color: var(--hp-ink-3); }
.hp-tile__foot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hp-line); font-size: 12.5px; color: var(--hp-ink-3); }

/* ---------------------------------------------------------- motion ----- */
@keyframes hp-fade { from { opacity: 0; } }
@keyframes hp-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes hp-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .hp *, .hp *::before, .hp *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------- responsive ---- */
@media (max-width: 1180px) {
    .hp-hub__cols, .hp-grid--main { grid-template-columns: minmax(0, 1fr); }
    .hp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hp-nav__item { height: 44px; padding: 0 10px; }
    .hp-nav__end .hp-switch { display: none; }
    .hp-content { padding: 16px 0 48px; }
    .hp-grid--2, .hp-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .hp-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .hp-hero__actions { justify-content: flex-start; }
    .hp-hero__stats { margin: 0 -20px -20px; }
    .hp-hero__stats > * { padding: 14px 20px; }
}
@media (max-width: 560px) {
    .hp-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.hp-section-label { margin: 6px 0 -8px; font: 500 11px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3); }
@media (max-width: 1180px) {
    .hp-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp-ledger > div:nth-child(4) { border-left: 0; padding-left: 2px; }
    .hp-ledger > div:nth-child(n+4) { border-top: 1px solid var(--hp-line); }
}
@media (max-width: 900px) {
    .hp-attn__row { grid-template-columns: 16px minmax(0, 1fr) auto; padding-inline: 16px; }
    .hp-attn__meta { grid-column: 2; grid-row: 2; margin-top: -8px; }
    .hp-attn__row em { display: none; }
    .hp-svcs__cols { display: none; }
    .hp-svcs__row, .hp-svcs__group { padding-inline: 16px; }
    .hp-svcs__row { grid-template-columns: minmax(0, 1fr) auto 16px; }
    .hp-svcs__when { display: none; }
    .hp-svcs__name { flex-direction: column; gap: 2px; }
    .hp-more__grid { grid-template-columns: minmax(0, 1fr); }
    .hp-more__item:nth-child(even) { padding-left: 2px; border-left: 0; }
    .hp-card--flush > .hp-card__head { padding-inline: 16px; }
}
@media (max-width: 560px) {
    .hp-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-ledger > div { padding: 14px 14px 13px; }
    .hp-ledger > div:nth-child(odd) { border-left: 0; padding-left: 2px; }
    .hp-ledger > div:nth-child(4) { border-left: 1px solid var(--hp-line); padding-left: 14px; }
    .hp-ledger > div:nth-child(n+3) { border-top: 1px solid var(--hp-line); }
    .hp-ledger dd { font-size: 24px; }
    .hp-nav__end { display: none; }
}

/* ------------------------------------------------------------ frame ---- */
/* A service panel is a page of its own. Its features are the buttons of the
   workbench's icon rail (.hpf-rail, teleported there), and the page is the
   screen for the current feature, edge to edge: bar, readouts, body. */
.hx .hl-console-shell:has(> .hp--panel), .hl-console-shell:has(> .hp--panel) { padding: 0; }
.hx .hl-console-shell > .hp.hp--panel { max-width: none; margin: 0; }
.hp--panel { min-height: 0; }
.hp--panel > .hpf { display: flex; flex-direction: column; gap: 0; }
.hpf { min-height: calc(100dvh - 68px); min-width: 0; }
@media (min-width: 901px) {
    main:has(> .hl-console-shell > .hp--panel), .hl-console-shell:has(> .hp--panel), .hp--panel { height: 100%; }
    .hp--panel > .hpf { height: 100%; min-height: 540px; }
    .hpf-body { overflow-y: auto; scrollbar-width: thin; }
}

/* Rail buttons. Same size and states as the workbench's own .wb-rail-btn; the
   label stays in the DOM for screen readers and becomes the tooltip. */
.hpf-rail { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hpf-rail .hpf-link {
    position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
    border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--wb-muted, #8a8a8a);
    transition: color .12s, background-color .12s;
}
.hpf-rail .hpf-link > span, .hpf-rail .hpf-link > em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hpf-rail .hpf-link svg { width: 19px; height: 19px; }
.hpf-rail .hpf-link:hover { color: hsl(var(--color-base)); background: var(--wb-hover, rgb(127 127 127 / .12)); }
.hpf-rail .hpf-link.is-active { color: hsl(var(--color-base)); background: var(--wb-sel, rgb(127 127 127 / .18)); }
.hpf-rail .hpf-link.is-active::before { content: ''; position: absolute; left: -7px; top: 50%; height: 18px; width: 3px; margin-top: -9px; border-radius: 0 2px 2px 0; background: hsl(var(--color-primary)); }
.hpf-rail .hpf-link .hp-dot, .hpf-rail .hpf-link > i.hpf-pip { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; box-shadow: none; }
.hpf-rail .hpf-label { width: 22px; height: 1px; margin: 7px 0; overflow: hidden; color: transparent; background: currentColor; opacity: .18; font-size: 0; }
.hpf-rail .hpf-label:first-child { display: none; }
.hpf-rail .hpf-label { color: hsl(var(--color-base)); }

.hpf-bar {
    display: flex; align-items: center; gap: 12px; flex: none; min-height: 56px; padding: 8px 24px;
    border-bottom: 1px solid var(--hp-line); background: var(--hp-bg);
}
.hpf-id { position: relative; min-width: 0; flex: none; }
.hpf-id__main { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; margin-left: -5px; border-radius: var(--hp-r-sm); }
.hpf-id__main[role=button] { cursor: pointer; }
.hpf-id__main[role=button]:hover { background: var(--hp-fill-2); }
.hpf-id__main > .hp-ico { color: var(--hp-ink-3); }
.hpf-id__ico {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px;
    background: var(--hp-bg-2) center / 70% no-repeat; border: 1px solid var(--hp-line-2); color: var(--hp-ink);
}
.hpf-id__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hpf-id__text strong { font: 600 14px/1.15 var(--hp-display); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.hpf-id__text small { display: flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--hp-font); color: var(--hp-ink-3); white-space: nowrap; }
.hpf-id__text .hp-dot { width: 6px; height: 6px; box-shadow: none; }
.hpf-switch {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 280px; padding: 5px;
    background: var(--hp-bg-2); border: 1px solid var(--hp-line-2); border-radius: var(--hp-r); box-shadow: var(--hp-shadow-lg);
}
.hpf-switch a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; padding: 7px 9px; border-radius: var(--hp-r-xs); font-size: 13px; }
.hpf-switch a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hpf-switch a small { grid-column: 2; color: var(--hp-ink-3); font-size: 11.5px; }
.hpf-switch a:hover, .hpf-switch a.is-active { background: var(--hp-fill-2); }
.hpf-switch .hp-dot { box-shadow: none; }
.hpf-switch .hpf-switch__all { display: block; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--hp-line); border-radius: 0; color: var(--hp-ink-2); font-size: 12.5px; }
.hpf-sep { color: var(--hp-line-2); font-size: 20px; font-weight: 300; }
.hpf-title { margin: 0; min-width: 0; font: 600 15px/1.2 var(--hp-display); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpf-addr {
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; margin-left: 4px;
    border: 1px solid var(--hp-line); border-radius: var(--hp-r-xs); background: none; color: var(--hp-ink-3); cursor: pointer;
}
.hpf-addr code { font: 500 11.5px/1 var(--hp-mono); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpf-addr:hover { border-color: var(--hp-line-2); color: var(--hp-ink); }
.hpf-bar__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.hpf-bar__actions .hp-btn { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.hpf-bar__actions .hp-btn--icon { width: 32px; padding: 0; }

.hpf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); flex: none; border-bottom: 1px solid var(--hp-line); }
.hpf-stats > * { padding: 12px 24px 13px; border-left: 1px solid var(--hp-line); min-width: 0; }
.hpf-stats > *:first-child { border-left: 0; }
.hpf-stats .hp-stat { gap: 5px; }
.hpf-stats .hp-stat__value { font-size: 19px; }
.hpf-stats .hp-stat__foot { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpf-stats .hp-meter { margin: 2px 0 1px; max-width: 200px; }

.hpf-body { flex: 1; min-height: 0; padding: 22px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.hpf-body:not(.hpf-body--flush) > * { width: 100%; }
.hpf-body--flush { padding: 0; gap: 0; }

@media (max-width: 900px) {
    .hpf-bar { padding: 8px 16px; flex-wrap: wrap; }
    .hpf-sep, .hpf-addr { display: none; }
    .hpf-title { order: 3; flex-basis: 100%; font-size: 14px; color: var(--hp-ink-2); }
    .hpf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hpf-stats > * { padding: 11px 16px; }
    .hpf-stats > *:nth-child(odd) { border-left: 0; }
    .hpf-stats > *:nth-child(n+3) { border-top: 1px solid var(--hp-line); }
    .hpf-body { padding: 16px 16px 40px; }
    .hpf-body--flush { padding: 0; }
}
.hpf-rail .hpf-g { display: contents; }

/* ------------------------------------------------- the operator dock ---- */
/* On a service panel the right-hand AI dock wears the panel's own chrome:
   the same title bar, hairline strips, flat cards and buttons as the left
   half, instead of the desk's softer chat styling. Scoped to pages that hold
   a panel, so the desk and the workspace chat keep theirs. */
:root:has(.hp--panel) .wb-agent {
    --hp-bg: hsl(var(--color-background));
    --hp-bg-2: hsl(var(--color-background-secondary));
    --hp-ink: hsl(var(--color-base));
    --hp-ink-2: color-mix(in srgb, hsl(var(--color-base)) 72%, hsl(var(--color-background)));
    --hp-ink-3: color-mix(in srgb, hsl(var(--color-base)) 56%, hsl(var(--color-background)));
    --hp-line: color-mix(in srgb, hsl(var(--color-base)) 10%, transparent);
    --hp-line-2: color-mix(in srgb, hsl(var(--color-base)) 16%, transparent);
    --hp-fill: color-mix(in srgb, hsl(var(--color-base)) 4%, transparent);
    --hp-fill-2: color-mix(in srgb, hsl(var(--color-base)) 7%, transparent);
    --hp-surface: color-mix(in srgb, hsl(var(--color-background-secondary)) 70%, hsl(var(--color-background)));
    --hp-accent: hsl(var(--color-primary));
    --hp-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --hp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    border-left: 1px solid var(--hp-line-2);
    background: var(--hp-bg);
}

/* Title bar: icon box + two lines, the height of .hpf-bar. */
:root:has(.hp--panel) .wb-agent .wb-agent-head.is-service { height: 57px; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--hp-line); background: var(--hp-bg); }
:root:has(.hp--panel) .wb-agent .wb-agent-ico {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--hp-line-2); background: var(--hp-bg-2); color: var(--hp-accent);
}
:root:has(.hp--panel) .wb-agent .wb-agent-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
:root:has(.hp--panel) .wb-agent .wb-agent-id strong { font: 600 14px/1.15 var(--hp-display); letter-spacing: -0.015em; color: var(--hp-ink); }
:root:has(.hp--panel) .wb-agent .wb-agent-id small { font: 500 11px/1.2 var(--hp-font, 'Inter', sans-serif); color: var(--hp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:has(.hp--panel) .wb-agent .wb-agent-head .wb-icon-btn { width: 32px; height: 32px; border: 1px solid var(--hp-line-2); border-radius: 8px; background: var(--hp-fill); color: var(--hp-ink-2); }
:root:has(.hp--panel) .wb-agent .wb-agent-head .wb-icon-btn:hover { background: var(--hp-fill-2); color: var(--hp-ink); }

/* The chat's own toolbar becomes a hairline strip, like the stat ledger. */
:root:has(.hp--panel) .wb-agent .cc.cc { border: 0; border-radius: 0; background: transparent; }
:root:has(.hp--panel) .wb-agent .cc-head { height: 46px; gap: 6px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--hp-line); background: var(--hp-bg); }
:root:has(.hp--panel) .wb-agent .cc-threads { margin-left: -8px; }
:root:has(.hp--panel) .wb-agent .cc-thread-btn { height: 30px; padding: 0 8px; border-radius: 6px; font: 600 13px/1 var(--hp-display); letter-spacing: -0.01em; }
:root:has(.hp--panel) .wb-agent .cc-head .cc-chip {
    height: 28px; padding: 0 9px; gap: 6px; border: 1px solid var(--hp-line-2); border-radius: 6px;
    background: transparent; box-shadow: none; font: 500 11.5px/1 var(--hp-mono); letter-spacing: 0;
}
:root:has(.hp--panel) .wb-agent .cc-head .cc-chip:hover,
:root:has(.hp--panel) .wb-agent .cc-head .cc-chip[aria-expanded="true"] { background: var(--hp-fill-2); border-color: var(--hp-line-2); }
:root:has(.hp--panel) .wb-agent .cc-head .cc-chip:active { transform: none; }
:root:has(.hp--panel) .wb-agent .cc-head .cc-icon-btn { width: 28px; height: 28px; border-radius: 6px; }

/* Transcript */
:root:has(.hp--panel) .wb-agent .cc-thread { padding-top: 20px; }
:root:has(.hp--panel) .wb-agent .cc-you-text { border: 1px solid var(--hp-line); border-radius: 10px; background: var(--hp-surface); box-shadow: none; font-size: 13.5px; }
:root:has(.hp--panel) .wb-agent .cc-reply-who { font: 600 13px/1 var(--hp-display); letter-spacing: -0.01em; }
:root:has(.hp--panel) .wb-agent .cc-reply .cn-time { font: 500 11px/1 var(--hp-mono); color: var(--hp-ink-3); }
:root:has(.hp--panel) .wb-agent .cc-reply-body { font-size: 13.5px; line-height: 1.6; }
:root:has(.hp--panel) .wb-agent .cc-reply-body :not(pre) > code { padding: 1px 5px; border: 1px solid var(--hp-line); border-radius: 4px; background: var(--hp-fill); font: 500 .86em/1.4 var(--hp-mono); }
:root:has(.hp--panel) .wb-agent .cc-reply-body pre { border: 1px solid var(--hp-line-2); border-radius: 8px; background: var(--hp-surface); box-shadow: none; }
:root:has(.hp--panel) .wb-agent .cc-changed { border: 1px solid var(--hp-line-2); border-radius: 8px; background: var(--hp-surface); box-shadow: none; }

/* Empty state: a left-aligned heading, then the starters as one ruled card,
   the way the panel's side cards list Address / Online / Resources. */
:root:has(.hp--panel) .wb-agent .cc-empty { align-items: stretch; text-align: left; gap: 0; max-width: none; margin: auto 0 0; padding: 0 16px 18px; }
:root:has(.hp--panel) .wb-agent .cc-empty-kicker {
    display: flex !important; align-items: center; gap: 8px; margin: 0 0 12px;
    font: 500 11px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3);
}
:root:has(.hp--panel) .wb-agent .cc-empty-kicker::before { content: ""; width: 6px; height: 6px; background: var(--hp-accent); }
:root:has(.hp--panel) .wb-agent .cc-empty-title { margin: 0; font: 600 22px/1.15 var(--hp-display); letter-spacing: -0.03em; text-align: left; text-wrap: balance; }
:root:has(.hp--panel) .wb-agent .cc-empty-copy { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--hp-ink-3); text-align: left; text-wrap: pretty; }
:root:has(.hp--panel) .wb-agent .cc-suggest {
    display: flex; flex-direction: column; gap: 0; margin-top: 18px; overflow: hidden;
    border: 1px solid var(--hp-line); border-radius: 14px; background: var(--hp-surface);
}
:root:has(.hp--panel) .wb-agent .cc-suggest::before {
    content: "Try asking"; padding: 14px 16px 10px;
    font: 500 11px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3);
}
:root:has(.hp--panel) .wb-agent .cc-suggestion {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 0; margin: 0;
    padding: 11px 16px; border: 0; border-top: 1px solid var(--hp-line); border-radius: 0;
    background: transparent; box-shadow: none; transform: none;
    font-size: 13px; line-height: 1.4; text-align: left; color: var(--hp-ink-2);
}
:root:has(.hp--panel) .wb-agent .cc-suggestion::after { content: "\2192"; flex: none; font-family: var(--hp-mono); color: var(--hp-ink-3); transition: color .15s, translate .15s; }
:root:has(.hp--panel) .wb-agent .cc-suggestion:hover { background: var(--hp-fill); color: var(--hp-ink); transform: none; }
:root:has(.hp--panel) .wb-agent .cc-suggestion:hover::after { color: var(--hp-accent); translate: 2px 0; }
:root:has(.hp--panel) .wb-agent .cc-suggestion:active { transform: none; background: var(--hp-fill-2); }
:root:has(.hp--panel) .wb-agent .cc-empty-card { margin-top: 18px; padding: 16px; border: 1px solid var(--hp-line); border-radius: 14px; background: var(--hp-surface); box-shadow: none; text-align: left; }

/* Composer: a flat card with the toolbar under a hairline; Send is .hp-btn--accent. */
:root:has(.hp--panel) .wb-agent .cc-composer { padding: 0 12px 10px; }
:root:has(.hp--panel) .wb-agent .cc-box { border: 1px solid var(--hp-line-2); border-radius: 12px; background: var(--hp-surface); box-shadow: none; }
:root:has(.hp--panel) .wb-agent .cc-box:has(.cc-textarea:focus) { border-color: color-mix(in srgb, var(--hp-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-accent) 12%, transparent); }
:root:has(.hp--panel) .wb-agent .cc-box.is-off { background: var(--hp-fill); }
:root:has(.hp--panel) .wb-agent .cc-textarea { min-height: 52px; padding: 13px 44px 8px 14px; font-size: 13.5px; }
:root:has(.hp--panel) .wb-agent .cc-tools { padding: 6px 6px 6px 6px; border-top: 1px solid var(--hp-line); }
:root:has(.hp--panel) .wb-agent .cc-tool { height: 30px; border-radius: 6px; font-size: 12.5px; }
:root:has(.hp--panel) .wb-agent .cc-tool:active:not(.is-off) { transform: none; }
:root:has(.hp--panel) .wb-agent .cc-send {
    height: 30px; padding: 0 14px; border-radius: 8px; background: var(--hp-accent); box-shadow: none;
    font: 600 12.5px/1 var(--hp-font, 'Inter', sans-serif); letter-spacing: -0.01em; color: #fff;
}
:root:has(.hp--panel) .wb-agent .cc-send:hover:not(:disabled) { background: var(--hp-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hp-accent) 42%, transparent); }
:root:has(.hp--panel) .wb-agent .cc-send:active:not(:disabled) { transform: translateY(1px); }
:root:has(.hp--panel) .wb-agent .cc-send:disabled { background: var(--hp-fill-2); color: var(--hp-ink-3); }
:root:has(.hp--panel) .wb-agent .cc-meta { margin-top: 8px; padding: 0 4px; font: 500 11px/1 var(--hp-mono); letter-spacing: 0; color: var(--hp-ink-3); }