/* VENDORED AT DEPLOY TIME from theme/src/kit/css/hj-ui.css. Do not edit here —
change it in the theme kit so the whole estate gains it. */
/* hj-ui.css — the shared hellojade component layer.
*
* STANDING RULE: every product in the jadeworks VPC builds its UI from THIS
* file plus brand/tokens.css. Product-specific styling belongs here too, not in
* the product — so the next service inherits it instead of reinventing it, and
* the whole estate moves together when the brand does.
*
* Served by jadethemed at https://theme.hellojade.ai/css/hj-ui.css and vendored
* into each product at deploy time (same as tokens.css) so a page still renders
* if the theme host is down.
*
* LAYERING — do not skip a step:
* brand/tokens.json the source of truth, generated by tools/hjkit
* brand/tokens.css :root custom properties, GENERATED — never hand-edit
* css/hj-ui.css this file: components built ONLY from those tokens
* product css layout unique to one app (a map pane, a canvas)
*
* ⚠️ NO RAW HEX IN THIS FILE. Every colour must be a var(--hj-*) or a
* color-mix() of them. If a value you need does not exist, add it to
* brand/tokens.json and regenerate — that is how the kit grows.
*
* First extracted 2026-07-27 from campaign.hellojade.ai, which had ~370 lines of
* component CSS inline. Anything below that reads as app-specific is a bug in
* this file, not a reason to fork it.
*/
/* ---- derived surface tokens -----------------------------------------------
* tokens.css gives raw brand values. These are the two or three mixes every
* dark surface needs, defined once so products stop re-deriving them slightly
* differently. */
:root{
--hj-line: color-mix(in srgb, var(--hj-semantic-brand-primary) 34%, transparent);
--hj-line-soft: color-mix(in srgb, var(--hj-semantic-brand-primary) 18%, transparent);
--hj-muted: color-mix(in srgb, var(--hj-semantic-text-primary) 62%, transparent);
--hj-overlay-bg: color-mix(in srgb, var(--hj-semantic-bg-surface) 92%, transparent);
}
/* ---- base ---------------------------------------------------------------- */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100% }
body{
margin:0;
background:var(--hj-semantic-bg-page);
color:var(--hj-semantic-text-primary);
font-family:var(--hj-font-family-sans);
font-size:var(--hj-font-size-small);
line-height:var(--hj-font-leading-body);
}
/* ---- wordmark ------------------------------------------------------------ */
.hj-brand{ display:flex; align-items:baseline; gap:var(--hj-space-2); margin:0 0 var(--hj-space-1) }
.hj-wordmark{
font-size:var(--hj-font-size-h3);
font-weight:var(--hj-font-weight-heavy);
letter-spacing:-.02em;
line-height:var(--hj-font-leading-tight);
}
.hj-wordmark .hello{ color:var(--hj-semantic-wordmark-hello) }
.hj-wordmark .jade { color:var(--hj-semantic-wordmark-jade) }
/* ---- typography ---------------------------------------------------------- */
.hj-title{
font-size:var(--hj-font-size-h3);
font-weight:var(--hj-font-weight-medium);
margin:0 0 var(--hj-space-1);
letter-spacing:-.01em;
line-height:var(--hj-font-leading-tight);
}
.hj-sub{ color:var(--hj-muted); font-size:var(--hj-font-size-caption); margin:0 0 var(--hj-space-6) }
.hj-hint{ color:var(--hj-muted); font-size:var(--hj-font-size-caption); margin-top:var(--hj-space-4) }
.hj-mono{ font-family:var(--hj-font-family-mono) }
/* ---- status dot ---------------------------------------------------------- */
.hj-dot{
display:inline-block; width:7px; height:7px; border-radius:var(--hj-radius-pill);
background:var(--hj-semantic-brand-accent); vertical-align:middle; margin-right:6px;
animation:hj-pulse var(--hj-duration-glow-period) var(--hj-easing-ease-out-cubic) infinite;
}
.hj-dot.is-down{ background:var(--hj-motion-glitch-red); animation:none }
@keyframes hj-pulse{
0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--hj-semantic-brand-accent) 65%, transparent) }
70% { box-shadow:0 0 0 7px transparent }
100%{ box-shadow:0 0 0 0 transparent }
}
@media (prefers-reduced-motion:reduce){ .hj-dot{ animation:none } }
/* ---- controls ------------------------------------------------------------ */
.hj-label{
display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
font-weight:var(--hj-font-weight-medium); color:var(--hj-muted);
margin:var(--hj-space-4) 0 var(--hj-space-1);
}
.hj-label .opt{ text-transform:none; letter-spacing:0; opacity:.7; font-weight:var(--hj-font-weight-regular) }
.hj-field{
width:100%; max-width:100%; padding:9px var(--hj-space-3);
background:var(--hj-semantic-bg-page); color:var(--hj-semantic-text-primary);
border:1px solid var(--hj-line); border-radius:var(--hj-radius-sm);
font-family:inherit; font-size:var(--hj-font-size-small);
}
.hj-field:focus-visible, .hj-focusable:focus-visible{
outline:2px solid var(--hj-semantic-brand-accent); outline-offset:2px;
}
.hj-btn{
width:100%; max-width:100%; padding:9px var(--hj-space-3);
margin-top:var(--hj-space-4);
background:var(--hj-semantic-brand-primary); border:1px solid var(--hj-semantic-brand-primary);
color:var(--hj-primitive-ink); border-radius:var(--hj-radius-sm);
font-family:inherit; font-size:var(--hj-font-size-small);
font-weight:var(--hj-font-weight-medium); cursor:pointer;
transition:background var(--hj-duration-cut-in) var(--hj-easing-ease-out-cubic);
}
.hj-btn:hover:not(:disabled){
background:var(--hj-semantic-brand-bright); border-color:var(--hj-semantic-brand-bright);
}
.hj-btn:disabled{ opacity:.45; cursor:default }
.hj-btn--ghost{
width:auto; margin:0; padding:3px 9px;
background:transparent; border-color:var(--hj-line);
color:var(--hj-semantic-link); border-radius:var(--hj-radius-pill);
font-size:var(--hj-font-size-caption); font-weight:var(--hj-font-weight-regular);
}
.hj-btn--ghost:hover{
background:var(--hj-semantic-bg-page); border-color:var(--hj-semantic-brand-accent);
}
/* ---- surfaces ------------------------------------------------------------ */
.hj-rail{
background:var(--hj-semantic-bg-surface);
border-right:1px solid var(--hj-line-soft);
padding:var(--hj-space-6); overflow-y:auto; min-width:0;
}
.hj-panel{
background:var(--hj-semantic-bg-surface); border:1px solid var(--hj-line);
border-radius:var(--hj-radius-lg); padding:var(--hj-space-4);
}
.hj-overlay{
background:var(--hj-overlay-bg); border:1px solid var(--hj-line);
border-radius:var(--hj-radius-sm);
padding:var(--hj-space-2) var(--hj-space-3);
font-size:var(--hj-font-size-caption);
}
.hj-code{
background:var(--hj-semantic-bg-surface); border:1px solid var(--hj-line-soft);
padding:1px 6px; border-radius:var(--hj-radius-sm);
font-family:var(--hj-font-family-mono); font-size:12px; overflow-wrap:anywhere;
}
.hj-divider{ border:0; border-top:1px solid var(--hj-line-soft); margin:var(--hj-space-4) 0 }
/* ---- messages ------------------------------------------------------------ */
.hj-error{
color:var(--hj-motion-glitch-red); font-size:var(--hj-font-size-caption);
margin-top:var(--hj-space-3); border-left:2px solid var(--hj-motion-glitch-red);
padding-left:var(--hj-space-2);
}
/* ---- key/value data rows -------------------------------------------------
* The workhorse for every panel that shows measured values. dt is the label,
* dd the number; tabular-nums so columns of figures line up. */
.hj-kv-group{ margin-bottom:var(--hj-space-4) }
.hj-kv-group > h3, .hj-kv-title{
font-size:11px; text-transform:uppercase; letter-spacing:.08em;
font-weight:var(--hj-font-weight-medium); color:var(--hj-semantic-brand-accent);
margin:0 0 var(--hj-space-1);
}
.hj-kv-list{ margin:0 }
.hj-kv{
display:flex; justify-content:space-between; align-items:baseline;
gap:var(--hj-space-3); padding:6px 0; border-bottom:1px solid var(--hj-line-soft);
}
.hj-kv dt{ color:var(--hj-muted); min-width:0; overflow-wrap:anywhere }
.hj-kv dd{
margin:0; font-variant-numeric:tabular-nums;
font-weight:var(--hj-font-weight-medium); white-space:nowrap;
}
.hj-kv dd .hj-pct{
color:var(--hj-muted); font-weight:var(--hj-font-weight-regular);
font-size:var(--hj-font-size-caption); margin-left:6px;
}
/* ---- breadcrumbs --------------------------------------------------------- */
.hj-crumbs{
display:flex; flex-wrap:wrap; align-items:center; gap:6px;
margin-top:var(--hj-space-4); font-size:var(--hj-font-size-caption);
}
.hj-crumbs .here{ color:var(--hj-muted); padding:3px 0; overflow-wrap:anywhere }
.hj-crumbs .sep { color:var(--hj-muted) }
/* ---- selection header ---------------------------------------------------- */
.hj-selection{ margin-top:var(--hj-space-6); padding-top:var(--hj-space-3); border-top:1px solid var(--hj-line) }
.hj-selection h2{
font-size:var(--hj-font-size-h3); font-weight:var(--hj-font-weight-medium);
margin:0; letter-spacing:-.01em; line-height:var(--hj-font-leading-tight);
}
.hj-selection .id{ color:var(--hj-muted); font-family:var(--hj-font-family-mono); font-size:12px }
/* ---- data-viz legend -----------------------------------------------------
* Not map-specific: any product showing a continuous scale needs a ramp, its
* end labels, and an explicit no-data swatch. The no-data swatch matters —
* without one, "absent" and "lowest value" look identical. */
.hj-legend .lt{ color:var(--hj-muted); margin-bottom:6px; overflow-wrap:anywhere; white-space:normal }
.hj-legend .and{ color:var(--hj-semantic-brand-accent); font-weight:var(--hj-font-weight-medium) }
.hj-ramp{
height:8px; border-radius:var(--hj-radius-pill);
background:linear-gradient(90deg,
color-mix(in srgb, var(--hj-semantic-bg-surface) 30%, var(--hj-primitive-jade-deep)),
var(--hj-primitive-jade-deep), var(--hj-primitive-jade), var(--hj-primitive-jade-bright),
color-mix(in srgb, var(--hj-primitive-mint) 58%, var(--hj-semantic-text-primary)));
}
.hj-ramp-ends{
display:flex; justify-content:space-between;
color:var(--hj-muted); margin-top:4px; font-size:11px;
}
.hj-nodata{
display:flex; align-items:center; gap:6px;
color:var(--hj-muted); margin-top:6px; font-size:11px;
}
.hj-nodata .sw{
width:11px; height:11px; flex:0 0 auto; border-radius:3px;
background:color-mix(in srgb, var(--hj-semantic-bg-surface) 84%, var(--hj-semantic-text-primary));
}
/* ---- app shell -----------------------------------------------------------
* The rail + workspace split most tools in the estate use. minmax(0,1fr) is
* load-bearing: a bare 1fr lets a wide child force the grid wider than the
* viewport, which is the horizontal-spill failure the breakpoint battery gates
* on. */
.hj-shell{
display:grid;
grid-template-columns:var(--hj-rail-w, 340px) minmax(0,1fr);
overflow-x:hidden;
}
/* display:grid + place-items:center is part of the contract, not decoration —
it is what centres a workspace's fallback/empty state, and dropping it shifts
any canvas that sizes itself to this box. */
.hj-shell > main{
position:relative; min-width:0; overflow:hidden;
display:grid; place-items:center;
background:var(--hj-semantic-bg-page);
}
@media (max-width:820px){
.hj-shell{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(460px,60vh) }
.hj-rail{ border-right:0; border-bottom:1px solid var(--hj-line-soft); overflow-y:visible }
}
/* ── chips, tabs, and the screen-reader mirror ─────────────────────────────
* Added 2026-07-29 for internal.hellojade.ai (the marketing agent console),
* put HERE rather than in that product because all three are generic:
* a chip row is any "what can this do" affordance, a tab strip is any
* multi-session surface, and .hj-sr-only is needed by every product that
* paints to a canvas.
*
* ⚠️ .hj-sr-only must NOT use display:none or visibility:hidden — both remove
* the element from the accessibility tree, which is the one thing it exists to
* stay in. The clip-path form keeps it announced and unpainted.
*/
.hj-chip{
flex:0 0 auto; padding:4px 11px; cursor:pointer;
background:var(--hj-semantic-bg-surface);
border:1px solid var(--hj-line); border-radius:var(--hj-radius-pill);
color:var(--hj-semantic-link);
font-family:inherit; font-size:var(--hj-font-size-caption);
font-weight:var(--hj-font-weight-regular); white-space:nowrap;
transition:border-color var(--hj-duration-cut-in) var(--hj-easing-ease-out-cubic);
}
.hj-chip:hover:not(:disabled){ border-color:var(--hj-semantic-brand-accent) }
.hj-chip:disabled{ opacity:.4; cursor:not-allowed }
.hj-tab{
flex:0 0 auto; padding:4px 12px; cursor:pointer;
background:transparent; border:1px solid transparent;
border-bottom-color:var(--hj-line);
color:var(--hj-semantic-text-primary);
font-family:inherit; font-size:var(--hj-font-size-caption);
border-radius:var(--hj-radius-sm) var(--hj-radius-sm) 0 0; white-space:nowrap;
}
.hj-tab[aria-pressed="true"]{
border-color:var(--hj-line); border-bottom-color:transparent;
color:var(--hj-semantic-brand-accent);
}
.hj-sr-only{
position:absolute; width:1px; height:1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
/* ---- toolbar layer ------------------------------------------------------
* The kit had a FORM layer and no TOOLBAR layer, and that absence is a bug
* that propagates: a product needing a horizontal bar reaches for .hj-btn,
* which is `width:100%` because it is a stacked-form submit button. cloudmap
* did exactly that and its 899px of controls rendered 117px tall across EIGHT
* rows inside a 1920px bar. Every element it used carried 16px of vertical
* margin for the same reason: .hj-brand is a panel heading, .hj-divider is an
* , .hj-label and .hj-hint are field furniture.
*
* ⚠️ .hj-btn's width:100% is CORRECT for forms and other products depend on
* it. The fix is this missing variant, never a change to that rule.
*/
.hj-toolbar{
display:flex;
/* EXPLICIT. nowrap is already the initial value, but stating it means a
* utility class or a later kit change cannot silently re-enable wrapping —
* which is precisely how the 8-row bar happened. */
flex-wrap:nowrap;
align-items:center;
gap:var(--hj-space-2);
block-size:48px; min-block-size:48px; max-block-size:48px;
flex:0 0 48px; /* content cannot grow it as a grid/flex child */
padding-inline:var(--hj-space-3); padding-block:0;
/* Converts the failure mode. A regression now clips one control — visible and
* obviously wrong — instead of silently reflowing the bar and mis-sizing
* every panel measured against it. */
overflow:hidden;
container-type:inline-size;
}
.hj-toolbar > *{ flex:0 0 auto; }
/* Neutralise the form layer's vertical rhythm for anything placed in a bar. */
.hj-toolbar :is(.hj-brand,.hj-divider,.hj-label,.hj-hint,.hj-btn,.hj-field){ margin:0 }
/* A bar's separator is a vertical rule, NOT .hj-divider (which is an
* with border-top and 16px block margins). */
.hj-toolbar__rule{
flex:0 0 1px; inline-size:1px; block-size:20px;
margin-inline:var(--hj-space-2);
background:var(--hj-line); border:0;
}
/* Exactly ONE per bar: the item that absorbs slack and truncates.
* min-inline-size:0 is the whole trick — flex items default to min-width:auto
* (= max-content), so they refuse to shrink below their text and
* text-overflow never engages. */
.hj-toolbar__elastic{
flex:1 1 auto; min-inline-size:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hj-btn--toolbar{
inline-size:auto; max-inline-size:none; margin:0;
block-size:32px; padding:0 10px;
display:inline-flex; align-items:center; gap:6px;
white-space:nowrap; flex:0 0 auto;
border-radius:var(--hj-radius-sm);
}
.hj-btn--icon{ inline-size:32px; padding:0; justify-content:center; }
/* ---- select ------------------------------------------------------------
* The kit had no select at all, so products invented their own — cloudmap's
* was a native