/* HQ theme v1 (2026-11-08) — Steve's default look. Rules: ~/Projects/_hq/STYLE.md
* Plain CSS, no build step. Copy into the project (repos can't reach ~/Projects/_hq at deploy time).
* Font: add this to (or self-host Plus Jakarta Sans):
*
* Re-brand by overriding ONE variable after this file: :root { --hq-accent-hsl: 158 38% 30%; }
*/
/* ---------- Tokens (unlayered so a project's :root override after this file wins) ---------- */
:root {
/* Colour: HSL triplets are the single source; the Tailwind/shadcn adapter reads the same ones. */
--hq-accent-hsl: 228 66% 54%; /* the ONE accent: links, active nav, selected tile, charts, primary button */
--hq-up-hsl: 152 55% 34%; /* up / positive figures only */
--hq-down-hsl: 2 68% 50%; /* down / negative figures only */
--hq-bg-hsl: 220 20% 98%; /* page */
--hq-surface-hsl: 0 0% 100%; /* tiles, cards, sidebar */
--hq-subtle-hsl: 220 18% 96%; /* hover, quiet fills, drill-down insets */
--hq-border-hsl: 220 16% 91%;
--hq-text-hsl: 222 22% 14%;
--hq-muted-hsl: 220 10% 46%; /* labels, notes */
--hq-accent: hsl(var(--hq-accent-hsl));
--hq-accent-soft: hsl(var(--hq-accent-hsl) / .10);
--hq-accent-ring: hsl(var(--hq-accent-hsl) / .28);
--hq-on-accent: #fff;
--hq-up: hsl(var(--hq-up-hsl));
--hq-down: hsl(var(--hq-down-hsl));
--hq-bg: hsl(var(--hq-bg-hsl));
--hq-surface: hsl(var(--hq-surface-hsl));
--hq-subtle: hsl(var(--hq-subtle-hsl));
--hq-border: hsl(var(--hq-border-hsl));
--hq-text: hsl(var(--hq-text-hsl));
--hq-muted: hsl(var(--hq-muted-hsl));
/* Charts: the accent at falling strength, then neutral. Never a rainbow. */
--hq-chart-1: hsl(var(--hq-accent-hsl));
--hq-chart-2: hsl(var(--hq-accent-hsl) / .65);
--hq-chart-3: hsl(var(--hq-accent-hsl) / .40);
--hq-chart-4: hsl(var(--hq-accent-hsl) / .22);
--hq-chart-5: hsl(var(--hq-muted-hsl) / .30);
/* Type */
--hq-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--hq-title-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
--hq-figure-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
/* Space (8px scale) — sections are --hq-gap-xl apart so nothing looks stacked */
--hq-gap-xs: .5rem;
--hq-gap-sm: .75rem;
--hq-gap: 1.25rem;
--hq-gap-lg: 2rem;
--hq-gap-xl: 3rem;
/* Shape */
--hq-radius: 1.25rem; /* tiles, cards */
--hq-radius-sm: .75rem; /* inputs, buttons, nav items */
--hq-shadow: 0 1px 2px hsl(222 30% 20% / .04), 0 6px 24px -8px hsl(222 30% 20% / .10);
--hq-shadow-lift: 0 2px 4px hsl(222 30% 20% / .05), 0 12px 32px -10px hsl(222 30% 20% / .16);
/* Layout */
--hq-sidebar-w: 248px;
--hq-sidebar-rail: 72px;
--hq-content-max: 1100px;
--hq-ease: cubic-bezier(.2, .7, .2, 1);
}
@layer components {
/* ---------- Base ---------- */
.hq-app, .hq-app * { box-sizing: border-box; }
.hq-app {
min-height: 100vh;
display: grid;
grid-template-columns: var(--hq-sidebar-w) 1fr;
background: var(--hq-bg);
color: var(--hq-text);
font-family: var(--hq-font);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: grid-template-columns 220ms var(--hq-ease);
}
.hq-app[data-sidebar="closed"] { grid-template-columns: var(--hq-sidebar-rail) 1fr; }
.hq-app :focus-visible { outline: 2px solid var(--hq-accent); outline-offset: 2px; }
.hq-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hq-up { color: var(--hq-up); }
.hq-down { color: var(--hq-down); }
.hq-muted { color: var(--hq-muted); }
.hq-icon { width: 20px; height: 20px; flex: none; }
/* ---------- Sidebar (collapsible; logo at top) ---------- */
.hq-sidebar {
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column; gap: var(--hq-gap);
padding: var(--hq-gap) var(--hq-gap-sm);
background: var(--hq-surface);
border-right: 1px solid var(--hq-border);
overflow: hidden;
}
.hq-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--hq-gap-xs); min-height: 40px; padding-left: 6px; }
.hq-logo { display: flex; align-items: center; gap: var(--hq-gap-sm); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--hq-text); text-decoration: none; white-space: nowrap; }
.hq-logo__mark {
width: 36px; height: 36px; flex: none; border-radius: 11px;
display: grid; place-items: center;
background: var(--hq-accent); color: var(--hq-on-accent);
}
.hq-nav { display: flex; flex-direction: column; gap: 2px; }
.hq-nav__group { margin: var(--hq-gap-sm) 0 4px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hq-muted); white-space: nowrap; }
.hq-nav a {
display: flex; align-items: center; gap: var(--hq-gap-sm);
padding: 10px 12px; border-radius: var(--hq-radius-sm);
color: var(--hq-muted); font-weight: 500; text-decoration: none; white-space: nowrap;
transition: background 140ms, color 140ms;
}
.hq-nav a:hover { background: var(--hq-subtle); color: var(--hq-text); }
.hq-nav a[aria-current="page"] { background: var(--hq-accent-soft); color: var(--hq-accent); font-weight: 600; }
.hq-sidebar__foot { margin-top: auto; padding: 0 12px; font-size: 13px; color: var(--hq-muted); white-space: nowrap; }
.hq-icon-btn {
display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
border: 0; border-radius: 10px; background: transparent; color: var(--hq-muted); cursor: pointer;
}
.hq-icon-btn:hover { background: var(--hq-subtle); color: var(--hq-text); }
/* Collapsed rail: icons only */
.hq-app[data-sidebar="closed"] .hq-sidebar__label,
.hq-app[data-sidebar="closed"] .hq-nav__group,
.hq-app[data-sidebar="closed"] .hq-sidebar__foot { display: none; }
.hq-app[data-sidebar="closed"] .hq-sidebar__head { flex-direction: column; padding-left: 0; }
.hq-app[data-sidebar="closed"] .hq-nav a { justify-content: center; padding: 10px; }
/* Mobile top bar (hidden on desktop) */
.hq-topbar { display: none; }
.hq-scrim { display: none; }
/* ---------- Main + page pattern ---------- */
.hq-main { min-width: 0; }
.hq-page {
max-width: var(--hq-content-max); margin: 0 auto;
padding: var(--hq-gap-xl) var(--hq-gap-lg) calc(var(--hq-gap-xl) * 2);
display: flex; flex-direction: column; gap: var(--hq-gap-xl);
}
.hq-head { display: flex; flex-direction: column; gap: var(--hq-gap); }
/* 1. Title: 1–5 words, one line, always */
.hq-title {
margin: 0; font-size: var(--hq-title-size); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Optional one-line context under the title (a month picker, "as of" date) — not a paragraph */
.hq-meta { margin: 0; font-size: 14px; color: var(--hq-muted); }
/* 2. Up to three tiles */
.hq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hq-gap); }
.hq-tile {
position: relative; display: flex; flex-direction: column; gap: 6px;
width: 100%; padding: 22px 24px 20px; text-align: left;
font: inherit; color: inherit;
background: var(--hq-surface); border: 1px solid var(--hq-border); border-radius: var(--hq-radius);
box-shadow: var(--hq-shadow);
transition: box-shadow 180ms var(--hq-ease), transform 180ms var(--hq-ease), border-color 180ms;
}
button.hq-tile { cursor: pointer; }
button.hq-tile:hover { box-shadow: var(--hq-shadow-lift); transform: translateY(-1px); }
.hq-tile[aria-expanded="true"] { border-color: var(--hq-accent); box-shadow: 0 0 0 3px var(--hq-accent-ring), var(--hq-shadow); }
.hq-tile__label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hq-muted); }
.hq-tile__label::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 180ms var(--hq-ease); }
div.hq-tile .hq-tile__label::after { display: none; } /* non-tappable tile: no chevron */
.hq-tile[aria-expanded="true"] .hq-tile__label::after { transform: rotate(45deg) translate(-2px, -2px); }
.hq-tile__value { font-size: var(--hq-figure-size); font-weight: 750; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hq-tile__note { font-size: 13px; color: var(--hq-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 3. Drill-down: opens under the tiles; charts first, then lists */
.hq-drill {
display: flex; flex-direction: column; gap: var(--hq-gap-lg);
padding: var(--hq-gap-lg);
background: var(--hq-surface); border: 1px solid var(--hq-border); border-radius: var(--hq-radius);
box-shadow: var(--hq-shadow);
animation: hq-settle 260ms var(--hq-ease) both;
}
.hq-drill[hidden] { display: none; }
.hq-drill__title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hq-muted); }
/* Collapsed sections below the tiles (native ) */
.hq-sections { display: flex; flex-direction: column; gap: var(--hq-gap); }
.hq-section { background: var(--hq-surface); border: 1px solid var(--hq-border); border-radius: var(--hq-radius); box-shadow: var(--hq-shadow); }
.hq-section > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--hq-gap);
padding: 18px 24px; font-weight: 600;
}
.hq-section > summary::-webkit-details-marker { display: none; }
.hq-section > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--hq-muted); border-bottom: 2px solid var(--hq-muted); transform: rotate(45deg); transition: transform 180ms var(--hq-ease); }
.hq-section[open] > summary::after { transform: rotate(-135deg); }
.hq-section__body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: var(--hq-gap-lg); }
.hq-card { padding: var(--hq-gap-lg); background: var(--hq-surface); border: 1px solid var(--hq-border); border-radius: var(--hq-radius); box-shadow: var(--hq-shadow); }
/* ---------- Charts (CSS bars; for SVG/library charts use --hq-chart-1..5) ---------- */
.hq-bars { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hq-bar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: var(--hq-gap-sm); font-size: 14px; }
.hq-bar__track { height: 10px; border-radius: 999px; background: var(--hq-subtle); overflow: hidden; }
.hq-bar__fill { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--hq-chart-1); }
.hq-bar__value { font-weight: 600; font-variant-numeric: tabular-nums; }
/* ---------- Lists ---------- */
.hq-list { margin: 0; padding: 0; list-style: none; }
.hq-list > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hq-gap); padding: 14px 0; border-top: 1px solid var(--hq-border); }
.hq-list > li:first-child { border-top: 0; }
.hq-list__sub { display: block; font-size: 13px; color: var(--hq-muted); }
/* ---------- Forms: few fields, lots of air, tiles over dropdowns ---------- */
.hq-form { display: flex; flex-direction: column; gap: var(--hq-gap-lg); max-width: 540px; }
.hq-field { display: flex; flex-direction: column; gap: var(--hq-gap-xs); border: 0; margin: 0; padding: 0; min-width: 0; }
.hq-field > label, .hq-field > legend { padding: 0; font-size: 14px; font-weight: 600; }
.hq-field > legend { margin-bottom: var(--hq-gap-xs); } /* flex gap skips