/* ───────────────────────────────────────────────────────────────
   HANGAR MKI: the design system the app is moving to, one page at a time.
   Spec and component log: hangar/design/mki.md. Paper file "Hangar",
   board "Components · MKI". Tokens mirror hangar/design/mki-tokens.css.

   Pages that have moved load this file instead of hangar.css and set
   <body class="hg">. Every class here is prefixed hg- so the two
   stylesheets never collide while the rest of the app still uses
   hangar.css. When the last page moves, hangar.css retires.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --hg-canvas: #0A0A0A;
  --hg-panel: #101010;
  --hg-card: #131313;
  --hg-card-raised: #171717;
  --hg-selected: #181818;
  --hg-control: #141414;
  --hg-icon-btn: #161616;

  /* lines */
  --hg-line-panel: #1A1A1A;
  --hg-line-card: #1E1E1E;
  --hg-line-raised: #262626;
  --hg-line-control: #1F1F1F;
  --hg-line-row: #181818;
  --hg-line-inner: #1C1C1C;
  --hg-tree: #222222;

  /* text */
  --hg-fg-1: #F2F2F2;
  --hg-fg-2: #E6E6E6;
  --hg-fg-3: #D9D9D9;
  --hg-muted: #8A8A8A;
  --hg-subtle: #6B6B6B;
  --hg-faint: #5E5E5E;
  --hg-ghost: #4E4E4E;

  /* buttons */
  --hg-primary: #EDEDED;
  --hg-primary-hover: #FFFFFF;
  --hg-on-primary: #0B0B0B;
  --hg-secondary: #1A1A1A;
  --hg-ghost-label: #9A9A9A;

  /* status dots: the only colour */
  --hg-dot-draft: #7A7A7A;
  --hg-dot-sent: #6EA8FF;
  --hg-dot-ok: #5BC27E;
  --hg-dot-alert: #E8705A;
  --hg-dot-superseded: #3A3A3A;
  --hg-line-alert: #5A2E26;

  /* radius */
  --hg-r-panel: 14px;
  --hg-r-card: 10px;
  --hg-r-control: 8px;
  --hg-r-small: 6px;
  --hg-r-key: 4px;

  /* type */
  --hg-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hg-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* sizes */
  --hg-h-md: 34px;
  --hg-h-sm: 30px;
  --hg-h-xs: 26px;
  --hg-h-lg: 40px;

  --hg-shadow-panel: 0 20px 50px rgba(0, 0, 0, .5);
  --hg-shadow-float: 0 30px 80px rgba(0, 0, 0, .6);

  /* motion: MOTION v1, the studio register (spec: brand/08-motion.md).
     Same curves as the client documents, shorter times: Hangar is used all
     day, so nothing arrives, nothing draws, and keyboard actions are instant. */
  --hg-m-press: 120ms;   /* press feedback */
  --hg-m-quick: 140ms;   /* hover colour, row highlight */
  --hg-m-base: 180ms;    /* menus, popovers, status changes, icon nudges */
  --hg-m-panel: 240ms;   /* inspector, slide-overs, dialogs, toasts in */
  --hg-m-exit: 140ms;    /* anything leaving: faster than it came */
  --hg-m-rise: 6px;
  --hg-ease: cubic-bezier(.23, 1, .32, 1);          /* settle: enter, press, the default */
  --hg-ease-travel: cubic-bezier(.65, 0, .35, 1);   /* between two places on screen */
}

/* ── base, for pages on MKI ── */
body.hg {
  margin: 0; min-height: calc(100vh / var(--z, 1));
  background: var(--hg-canvas); color: var(--hg-fg-2);
  font: 400 14px/1.5 var(--hg-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}
/* :where() keeps these at zero specificity, so any hg- class overrides them */
:where(.hg) *, :where(.hg) *::before, :where(.hg) *::after { box-sizing: border-box; }
.hg [hidden] { display: none !important; }
:where(.hg) :where(h1, h2, h3, p) { margin: 0; }
:where(.hg) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.hg) button { cursor: pointer; }
:where(.hg) ::selection { background: var(--hg-primary); color: var(--hg-on-primary); }
:where(.hg) :focus-visible { outline: 2px solid rgba(237, 237, 237, .55); outline-offset: 2px; }

/* ── lockup: mark | rule | HANGAR ── */
.hg-lockup { display: flex; align-items: center; gap: 12px; height: 40px; color: var(--hg-fg-1); }
.hg-lockup svg { width: 20px; height: 20px; flex: none; }
.hg-lockup__rule { width: 1px; height: 16px; background: #2E2E2E; }
.hg-lockup__word { font: 500 11px/14px var(--hg-mono); letter-spacing: .34em; text-transform: uppercase; color: var(--hg-fg-3); }

/* ── buttons: flat, no bevel. md 34, sm 30, xs 26, lg 40 (sign-in only) ── */
.hg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--hg-h-md); padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--hg-r-control);
  font: 500 13.5px/18px var(--hg-font); white-space: nowrap; text-decoration: none;
  transition: background-color var(--hg-m-quick) ease, border-color var(--hg-m-quick) ease, color var(--hg-m-quick) ease, opacity var(--hg-m-quick) ease, scale var(--hg-m-press) var(--hg-ease);
}
.hg-btn svg { width: 16px; height: 16px; flex: none; }
.hg-btn--primary { background: var(--hg-primary); color: var(--hg-on-primary); }
.hg-btn--primary:hover:not(:disabled) { background: var(--hg-primary-hover); }
.hg-btn--secondary { background: var(--hg-secondary); border-color: var(--hg-line-raised); color: var(--hg-fg-2); }
.hg-btn--secondary:hover:not(:disabled) { background: #202020; border-color: #303030; }
.hg-btn--ghost { background: transparent; color: var(--hg-ghost-label); }
.hg-btn--ghost:hover:not(:disabled) { background: #171717; color: var(--hg-fg-2); }
.hg-btn--sm { height: var(--hg-h-sm); padding: 0 12px; border-radius: var(--hg-r-small); font-size: 13px; line-height: 16px; }
.hg-btn--lg { height: var(--hg-h-lg); font-size: 14px; }
.hg-btn--block { width: 100%; }
.hg-btn:not(:disabled):active { scale: .97; }
.hg-btn:disabled { opacity: .4; cursor: default; }

/* ── row action: one width for every action in a column of rows ──
   Buttons that stack down a list share a width, so the column reads as one
   edge (Reply, Write, Call all 84). Icon 14 + label, centred. On hover the
   icon moves once, a small, meaningful motion: reply slides back, the pen
   lifts, the phone rings. Transitions (not keyframes) for the slide and lift
   so they reverse cleanly; the ring is a one-shot keyframe. Hover only on
   real pointers; none of it under reduced motion. */
.hg-btn--row { width: 84px; height: 28px; padding: 0; gap: 7px; border-radius: var(--hg-r-small); font-size: 12.5px; line-height: 16px; }
.hg-btn--row svg { width: 14px; height: 14px; transition: translate var(--hg-m-base) var(--hg-ease), rotate var(--hg-m-base) var(--hg-ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hg-btn--row[data-icon="reply"]:hover svg { translate: -2px 0; }
  .hg-btn--row[data-icon="write"]:hover svg { translate: 1px -1px; rotate: -10deg; }
  .hg-btn--row[data-icon="call"]:hover svg { animation: hg-ring 420ms var(--hg-ease) 1; }
}
@keyframes hg-ring { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 45% { rotate: 10deg; } 70% { rotate: -6deg; } }

/* ── fields ── */
.hg-field { display: grid; gap: 8px; }
.hg-field__label { font: 400 12px/16px var(--hg-font); color: var(--hg-muted); }
.hg-input {
  width: 100%; height: var(--hg-h-md); padding: 0 12px;
  border: 1px solid var(--hg-line-control); border-radius: var(--hg-r-control);
  background: var(--hg-control); color: var(--hg-fg-1);
  font: 400 13.5px/18px var(--hg-font); outline: none;
  transition: border-color var(--hg-m-quick) ease, box-shadow var(--hg-m-quick) ease;
}
.hg-input--lg { height: var(--hg-h-lg); font-size: 14px; }
.hg-input::placeholder { color: var(--hg-faint); }
.hg-input:hover { border-color: #2A2A2A; }
.hg-input:focus { border-color: #4A4A4A; box-shadow: 0 0 0 3px rgba(255, 255, 255, .05); }
.hg-input[aria-invalid="true"] { border-color: var(--hg-line-alert); }

/* a message beside the thing it's about: dot + one sentence */
.hg-msg { display: flex; align-items: flex-start; gap: 8px; font: 400 12.5px/18px var(--hg-font); color: var(--hg-fg-3); }
.hg-msg::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--hg-dot-alert); }
.hg-msg--ok::before { background: var(--hg-dot-ok); }

/* status dots */
.hg-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 3px; transition: background-color var(--hg-m-base) ease, border-color var(--hg-m-base) ease; }
.hg-dot--draft { border: 1.5px solid var(--hg-dot-draft); }
.hg-dot--sent { background: var(--hg-dot-sent); }
.hg-dot--ok { background: var(--hg-dot-ok); }
.hg-dot--alert { background: var(--hg-dot-alert); }
.hg-dot--superseded { background: var(--hg-dot-superseded); }

/* ── sign in ── */
body.hg-gate {
  display: grid; place-items: center; padding: 24px;
  background: var(--hg-canvas) radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255, 255, 255, .03), transparent 70%) no-repeat;
}
/* the light behind the card: a WebGL canvas (assets/js/hangar-light.js). It
   fades in once it has drawn; until then (or without WebGL) the gradient above
   is the backdrop. The card catches the light along its top edge. */
.hg-light { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--hg-ease); pointer-events: none; }
.hg-light.is-lit { opacity: 1; }
.hg-gate .hg-signin { position: relative; box-shadow: var(--hg-shadow-float), inset 0 1px 0 rgba(255, 255, 255, .07); border-top-color: #262626; }
.hg-signin {
  display: grid; gap: 28px; width: min(400px, 100%);
  padding: 36px 36px 28px;
  background: var(--hg-panel); border: 1px solid var(--hg-line-panel); border-radius: var(--hg-r-panel);
  box-shadow: var(--hg-shadow-float);
}
.hg-signin .hg-lockup { height: auto; }
.hg-signin__head { display: grid; gap: 8px; }
.hg-signin h1 { font: 500 24px/30px var(--hg-font); letter-spacing: -.025em; color: var(--hg-fg-1); }
.hg-signin__lede { font-size: 14px; line-height: 20px; color: var(--hg-muted); }
.hg-signin__body { display: grid; gap: 12px; }
.hg-signin__body form { display: grid; gap: 12px; }
.hg-or { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--hg-faint); }
.hg-or::before, .hg-or::after { content: ''; flex: 1; height: 1px; background: var(--hg-line-inner); }
.hg-btn--google svg { width: 16px; height: 16px; }
.hg-signin__sent { display: grid; gap: 8px; }
.hg-signin__sent-title { display: flex; align-items: center; gap: 8px; font: 500 14px/20px var(--hg-font); color: var(--hg-fg-1); }
.hg-signin__sent p { font-size: 13px; line-height: 20px; color: var(--hg-muted); }
.hg-signin__sent b { font-weight: 500; color: var(--hg-fg-2); }
.hg-signin__sent .hg-btn { justify-self: start; margin: 4px 0 0 -12px; }
@media (max-width: 480px) {
  body.hg-gate { padding: 16px; }
  .hg-signin { padding: 28px 24px 22px; gap: 24px; }
}
.hg-signin__foot { padding-top: 20px; border-top: 1px solid var(--hg-line-inner); font-size: 12.5px; line-height: 18px; color: var(--hg-faint); }

/* ── motion primitives (MOTION v1, studio register) ──────────────────
   Parts that appear and leave. Enter with @starting-style, leave faster
   than they came. Anything opened from the keyboard (⌘K, shortcuts) gets
   data-instant and no motion at all: it's used too often to animate.
   Reduced motion keeps the fades and drops the travel. */

/* menu / popover: grows from its trigger (set --hg-origin to the corner it hangs from) */
.hg-pop {
  transform-origin: var(--hg-origin, top left);
  transition: opacity var(--hg-m-base) var(--hg-ease), scale var(--hg-m-base) var(--hg-ease), display var(--hg-m-base) allow-discrete, overlay var(--hg-m-base) allow-discrete;
  @starting-style { opacity: 0; scale: .97; }
}
.hg-pop[hidden], .hg-pop:not(:popover-open)[popover] { opacity: 0; scale: .97; transition-duration: var(--hg-m-exit); }

/* inspector / slide-over: slides in 12px from the edge it lives on */
.hg-sheet {
  transition: opacity var(--hg-m-panel) var(--hg-ease), translate var(--hg-m-panel) var(--hg-ease);
  @starting-style { opacity: 0; translate: 12px 0; }
}
/* dialog: centred, so it scales from the centre */
.hg-dialog {
  transition: opacity var(--hg-m-panel) var(--hg-ease), scale var(--hg-m-panel) var(--hg-ease);
  @starting-style { opacity: 0; scale: .97; }
}
/* toast: rises from the bottom edge it sits on, and leaves the same way */
.hg-toast {
  transition: opacity var(--hg-m-panel) var(--hg-ease), translate var(--hg-m-panel) var(--hg-ease);
  @starting-style { opacity: 0; translate: 0 var(--hg-m-rise); }
}
.hg-toast[data-leaving] { opacity: 0; translate: 0 var(--hg-m-rise); transition-duration: var(--hg-m-exit); }

/* gauge segments resize when a figure changes; the figure itself just swaps */
.hg-gauge__seg { transform-origin: left center; transition: scale var(--hg-m-base) var(--hg-ease); }

/* the selected-row marker (views, tabs) travels between rows */
.hg-marker { transition: translate var(--hg-m-panel) var(--hg-ease-travel), height var(--hg-m-panel) var(--hg-ease-travel); }

[data-instant], [data-instant] * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hg-sheet, .hg-toast, .hg-toast[data-leaving] { translate: none; @starting-style { translate: none; } }
  .hg-pop, .hg-dialog { scale: none; @starting-style { scale: none; } }
  .hg-marker, .hg-gauge__seg { transition: none; }
  .hg-btn:not(:disabled):active { scale: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE APP SHELL (2026-11-12, from the boards "Home / Projects / Project ·
   manifest · MKI B+"). Pages opt in with <body class="hg hg-app">:
     <aside data-side>          the grouped sidebar, painted by hangar.js
     <main class="hg-main">     the main panel
     <aside class="hg-inspector"> 360, only while something is selected
   Separate surfaces 10px apart on the canvas, one soft shadow each.
   ═══════════════════════════════════════════════════════════════════ */
:root { --hg-side-w: 232px; --hg-insp-w: 360px; --hg-screen: calc(100vh / var(--z, 1)); }
body.hg-app { display: flex; align-items: flex-start; gap: 10px; padding: 10px; }

/* ── HG / Nav: the grouped sidebar ── */
.hg-side {
  position: sticky; top: 10px; flex: none; width: var(--hg-side-w); height: calc(var(--hg-screen) - 20px);
  display: flex; flex-direction: column; gap: 18px; padding: 14px 13px; overflow-y: auto; scrollbar-width: none;
}
.hg-side__head { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px; flex: none; }
.hg-side__mark { width: 18px; height: 18px; flex: none; color: var(--hg-primary); }
.hg-side__rule { width: 1px; height: 14px; flex: none; background: #333; }
.hg-side__word { flex: 1; font: 500 11px/14px var(--hg-mono); letter-spacing: .36em; color: var(--hg-fg-1); text-decoration: none; }
.hg-side__tool { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 -4px; padding: 0; border: 0; border-radius: var(--hg-r-small); background: none; color: #7A7A7A; }
.hg-side__tool:hover { background: var(--hg-card-raised); color: var(--hg-fg-2); }
.hg-side__tool svg { width: 16px; height: 16px; }
.hg-nav { display: flex; flex-direction: column; gap: 2px; }
.hg-nav__label {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; background: none;
  font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); text-align: left;
}
.hg-nav__label:hover { color: var(--hg-muted); }
.hg-nav__label svg { width: 9px; height: 9px; transition: rotate var(--hg-m-base) var(--hg-ease); }
.hg-nav__label[aria-expanded="false"] svg { rotate: -90deg; }
.hg-nav__group[data-closed] { display: none; }
.hg-nav__group { display: flex; flex-direction: column; gap: 2px; }
.hg-nav__item {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; flex: none;
  border-radius: var(--hg-r-control); color: #9A9A9A; text-decoration: none;
  transition: background-color var(--hg-m-quick) ease, color var(--hg-m-quick) ease;
}
.hg-nav__item svg { width: 16px; height: 16px; flex: none; color: #7A7A7A; }
.hg-nav__item span:first-of-type { flex: 1; font: 400 14px/20px var(--hg-font); }
.hg-nav__item:hover { background: #141414; color: var(--hg-fg-2); }
.hg-nav__item[aria-current="page"] { background: var(--hg-card-raised); color: var(--hg-fg-1); }
.hg-nav__item[aria-current="page"] span:first-of-type { font-weight: 500; }
.hg-nav__item[aria-current="page"] svg { color: var(--hg-primary); }
.hg-nav__item[aria-disabled="true"] { color: var(--hg-subtle); cursor: default; }
.hg-nav__item[aria-disabled="true"]:hover { background: none; color: var(--hg-subtle); }
.hg-nav__item[aria-disabled="true"] svg { color: var(--hg-ghost); }
.hg-count { font: 400 11px/14px var(--hg-mono); color: var(--hg-muted); font-variant-numeric: tabular-nums; }
.hg-count--alert { color: var(--hg-dot-alert); }
.hg-count:empty { display: none; }
/* HG / Nav views: filters nested under the current section, on a tree line */
.hg-nav__views { display: flex; flex-direction: column; margin: 2px 0 6px 17px; }
.hg-nav__view {
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px 0 16px; border: 0; background: none;
  border-left: 1px solid var(--hg-tree); font: 400 13.5px/18px var(--hg-font); color: var(--hg-muted); text-align: left; text-decoration: none;
}
.hg-nav__view span:first-child { flex: 1; }
.hg-nav__view .hg-count { color: var(--hg-ghost); }
.hg-nav__view .hg-count--alert { color: var(--hg-dot-alert); }
.hg-nav__view:hover { color: var(--hg-fg-2); }
.hg-nav__view[aria-current="true"] { border-left-color: var(--hg-primary); color: var(--hg-fg-1); }
.hg-nav__vhead { padding: 16px 10px 6px 0; font: 400 12px/16px var(--hg-font); color: var(--hg-faint); }
.hg-nav__vhead + .hg-nav__view { margin-top: 0; }
.hg-side__spacer { flex: 1; }
.hg-me { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px; border: 0; border-radius: var(--hg-r-control); background: none; color: var(--hg-fg-2); text-align: left; flex: none; }
.hg-me:hover { background: #141414; }
.hg-avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 14px; background: #1F1F1F; font: 500 11px/14px var(--hg-font); color: var(--hg-fg-2); }
.hg-avatar--md { width: 32px; height: 32px; border-radius: 16px; background: #1C1C1C; font-size: 11.5px; }
.hg-avatar--lg { width: 48px; height: 48px; border-radius: 24px; background: #1C1C1C; font-size: 15px; }
.hg-me__name { flex: 1; font: 400 13.5px/18px var(--hg-font); }
/* collapsed: an icon rail (the board's collapse button, top right of the sidebar) */
body.hg-side-min { --hg-side-w: 60px; }
.hg-side-min .hg-side__word, .hg-side-min .hg-side__rule, .hg-side-min .hg-side__tool[data-search],
.hg-side-min .hg-nav__label, .hg-side-min .hg-nav__item span, .hg-side-min .hg-nav__views, .hg-side-min .hg-me__name { display: none; }
.hg-side-min .hg-side__head { flex-direction: column; height: auto; gap: 12px; padding: 0; align-items: center; }
.hg-side-min .hg-nav__item { justify-content: center; padding: 0; }
.hg-side-min .hg-nav__group[data-closed] { display: flex; }
.hg-side-min .hg-me { justify-content: center; padding: 0; }

/* ── HG / Panel / main ── */
.hg-main {
  flex: 1; min-width: 0; min-height: calc(var(--hg-screen) - 20px); display: flex; flex-direction: column; padding-bottom: 40px;
  background: var(--hg-panel); border: 1px solid var(--hg-line-panel); border-radius: var(--hg-r-panel); box-shadow: var(--hg-shadow-panel);
}
/* the header bar: where you are on the left, search and the one primary on the right */
.hg-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; flex: none; padding: 0 32px; border-bottom: 1px solid var(--hg-line-row); }
.hg-bar__title { font: 400 14px/18px var(--hg-font); color: var(--hg-fg-2); }
.hg-bar__end { display: flex; align-items: center; gap: 8px; }
.hg-bar__note { font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-pad { padding-inline: 32px; }
.hg-head { display: flex; flex-direction: column; padding: 36px 32px 0; }
.hg-title { font: 500 30px/36px var(--hg-font); letter-spacing: -.03em; color: var(--hg-fg-1); }
.hg-greeting { font: 500 26px/32px var(--hg-font); letter-spacing: -.02em; color: var(--hg-fg-1); }
.hg-lede { margin-top: 6px; font: 400 15px/22px var(--hg-font); color: var(--hg-muted); }
.hg-lede b { font-weight: 400; color: var(--hg-fg-2); }
.hg-crumbs { display: flex; align-items: center; gap: 8px; font: 400 13.5px/18px var(--hg-font); color: var(--hg-muted); }
.hg-crumbs a { color: inherit; text-decoration: none; }
.hg-crumbs a:hover { color: var(--hg-fg-2); }
.hg-crumbs i { font-style: normal; color: var(--hg-ghost); }
.hg-toolrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hg-toolrow__end { display: flex; align-items: center; gap: 8px; }
.hg-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.hg-sec-head h2 { font: 500 15px/18px var(--hg-font); color: var(--hg-fg-1); }
.hg-sec-head p { font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-link { color: var(--hg-muted); text-decoration: underline 1px var(--hg-ghost); text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; }
.hg-link:hover { color: var(--hg-fg-2); text-decoration-color: var(--hg-subtle); }

/* ── HG / Panel / inspector ── */
.hg-inspector {
  position: sticky; top: 10px; flex: none; width: var(--hg-insp-w); height: calc(var(--hg-screen) - 20px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--hg-panel); border: 1px solid var(--hg-line-panel); border-radius: var(--hg-r-panel); box-shadow: var(--hg-shadow-panel);
}
.hg-inspector__head { display: flex; align-items: flex-start; gap: 10px; flex: none; padding: 20px 18px 16px; border-bottom: 1px solid var(--hg-line-row); }
.hg-inspector__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hg-inspector__title { font: 500 19px/24px var(--hg-font); color: var(--hg-fg-1); overflow-wrap: anywhere; }
.hg-inspector__meta { font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-inspector__bar { display: flex; align-items: center; justify-content: space-between; height: 52px; flex: none; padding: 0 18px; border-bottom: 1px solid var(--hg-line-row); }
.hg-inspector__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.hg-inspector__foot { display: flex; align-items: center; gap: 10px; flex: none; padding: 14px 18px; border-top: 1px solid var(--hg-line-row); }
.hg-inspector__note { flex: 1; font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }

/* ── more buttons ── */
.hg-btn--xs { height: var(--hg-h-xs); padding: 0 10px; border-radius: var(--hg-r-small); font-size: 12.5px; line-height: 16px; }
.hg-btn--sm svg, .hg-btn--xs svg { width: 13px; height: 13px; }
/* outline: the one-action-per-row button on Home ("Reply", "Open") */
.hg-btn--outline { background: transparent; border-color: var(--hg-line-control); color: var(--hg-fg-2); font-weight: 400; font-size: 13px; }
.hg-btn--outline:hover:not(:disabled) { background: #171717; border-color: #2A2A2A; }
/* danger: never a red fill (HG / Button / danger) */
.hg-btn--danger { background: var(--hg-secondary); border-color: #4A2A24; color: var(--hg-dot-alert); }
.hg-btn--danger:hover:not(:disabled) { background: #201614; }
.hg-iconbtn { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--hg-r-small); background: transparent; color: var(--hg-muted); }
.hg-iconbtn:hover { background: var(--hg-icon-btn); color: var(--hg-fg-2); }
.hg-iconbtn svg { width: 14px; height: 14px; }

/* ── HG / Search, HG / Select / labelled (30 tall, in bars and tool rows) ── */
.hg-search {
  display: flex; align-items: center; gap: 8px; width: 220px; height: 30px; padding: 0 6px 0 10px;
  background: var(--hg-control); border: 1px solid var(--hg-line-control); border-radius: var(--hg-r-small);
  transition: border-color var(--hg-m-quick) ease;
}
.hg-search:focus-within { border-color: #4A4A4A; }
.hg-search svg { width: 13px; height: 13px; flex: none; color: var(--hg-subtle); }
.hg-search input { flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; outline: none; background: none; font: 400 13px/16px var(--hg-font); color: var(--hg-fg-1); }
.hg-search input::placeholder { color: var(--hg-faint); }
.hg-key { display: inline-block; padding: 1px 5px; border: 1px solid var(--hg-line-raised); border-radius: var(--hg-r-key); font: 400 10.5px/14px var(--hg-mono); color: var(--hg-faint); }
.hg-select {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  background: var(--hg-control); border: 1px solid var(--hg-line-control); border-radius: var(--hg-r-small);
  font: 400 13px/16px var(--hg-font); color: var(--hg-subtle); cursor: pointer;
}
.hg-select:hover { border-color: #2A2A2A; }
.hg-select:focus-within { border-color: #4A4A4A; }
.hg-select select { appearance: none; -webkit-appearance: none; padding: 0; border: 0; outline: none; background: none; font: inherit; color: var(--hg-fg-3); cursor: pointer; }
.hg-select select option { background: #161616; color: var(--hg-fg-2); }

/* ── HG / Pill tabs ── */
.hg-tabs { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px; background: var(--hg-card); border: 1px solid var(--hg-line-card); border-radius: var(--hg-r-control); }
.hg-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; flex: none;
  border: 1px solid transparent; border-radius: var(--hg-r-small); background: none;
  font: 400 13px/16px var(--hg-font); color: var(--hg-muted); white-space: nowrap; text-decoration: none;
  transition: background-color var(--hg-m-quick) ease, color var(--hg-m-quick) ease;
}
.hg-tab .hg-count { color: var(--hg-ghost); }
.hg-tab .hg-count--alert { color: var(--hg-dot-alert); }
.hg-tab:hover { color: var(--hg-fg-2); }
.hg-tab[aria-selected="true"] { background: var(--hg-card-raised); border-color: var(--hg-line-raised); color: var(--hg-fg-1); font-weight: 500; }
.hg-tab[aria-selected="true"] .hg-count:not(.hg-count--alert) { color: var(--hg-muted); }

/* ── HG / Stat strip (4), compact: boxed, ruled cells, mono caps label + figure + mono caps qualifier ── */
.hg-stats { display: flex; background: var(--hg-card); border: 1px solid var(--hg-line-card); border-radius: var(--hg-r-card); }
.hg-stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 11px 14px; }
.hg-stat + .hg-stat { border-left: 1px solid var(--hg-line-inner); }
.hg-stat__label { font: 400 10.5px/13px var(--hg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-stat__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; }
.hg-stat__fig { font: 500 20px/24px var(--hg-font); color: var(--hg-fg-1); font-variant-numeric: tabular-nums; }
.hg-stat__fig.is-zero { color: var(--hg-ghost); }
.hg-stat__qual { font: 400 10.5px/13px var(--hg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-stat__qual--alert { color: var(--hg-dot-alert); }

/* ── HG / Block meter: one 6×12 block per deliverable, delivered ones lit ── */
.hg-meter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hg-meter__blocks { display: flex; gap: 3px; flex: none; }
.hg-meter__blocks i { width: 6px; height: 12px; border-radius: 1.5px; background: #2A2A2A; }
.hg-meter__blocks i.is-on { background: var(--hg-fg-3); }
.hg-meter__text { font: 400 11.5px/14px var(--hg-mono); color: var(--hg-subtle); white-space: nowrap; }

/* ── HG / Table: a grid of rows; each page sets --cols ── */
.hg-table { display: flex; flex-direction: column; }
.hg-tr { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 16px; padding: 0 12px; }
.hg-th { height: 34px; border-bottom: 1px solid var(--hg-line-inner); font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-th > .r, .hg-tr > .r { text-align: right; justify-self: end; }
.hg-row {
  min-height: 64px; border-bottom: 1px solid var(--hg-line-row); border-radius: 0; color: inherit; text-decoration: none; cursor: pointer;
  transition: background-color var(--hg-m-quick) ease;
}
button.hg-row { width: 100%; border: 0; border-bottom: 1px solid var(--hg-line-row); background: none; font: inherit; color: inherit; text-align: left; }
.hg-row:hover, .hg-row[aria-current="true"] { background: var(--hg-selected); border-radius: var(--hg-r-control); }
.hg-row--56 { min-height: 56px; }
.hg-row--56 .hg-cell { gap: 2px; }
.hg-row[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--hg-line-raised); border-bottom-color: transparent; }
.hg-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hg-cell__main { font: 400 14px/20px var(--hg-font); color: var(--hg-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-cell__main--2 { color: var(--hg-fg-2); }
.hg-row[aria-current="true"] .hg-cell__main { color: var(--hg-fg-1); font-weight: 500; }
/* a record's head: crumbs, then the title and its line on the left, status and switches on the right */
.hg-rec-head { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 0; }
.hg-rec-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hg-rec-head__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 560px; }
.hg-rec-head__text .hg-title { letter-spacing: -.02em; }
.hg-rec-head__line { font: 400 14px/20px var(--hg-font); color: var(--hg-muted); }
.hg-rec-head__end { display: flex; align-items: center; gap: 10px; flex: none; }
[data-edit][contenteditable] { outline: none; border-radius: 4px; cursor: text; }
[data-edit][contenteditable]:hover { box-shadow: 0 0 0 4px #141414; background: #141414; }
[data-edit][contenteditable]:focus { box-shadow: 0 0 0 4px #161616; background: #161616; }
[data-edit]:empty::before { content: attr(data-ph); color: var(--hg-faint); }
@media (max-width: 1100px) { .hg-rec-head__row { flex-direction: column; align-items: flex-start; } }
.hg-cell__val { font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-2); }
.hg-cell__val--3 { color: var(--hg-fg-3); }
.hg-cell__sub { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 400 12.5px/16px var(--hg-font); color: var(--hg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-cell__sub--subtle { font-size: 12px; color: var(--hg-subtle); }
.hg-code { font: 400 11px/14px var(--hg-mono); color: var(--hg-faint); }
.hg-mono { font-family: var(--hg-mono); }
.hg-when { font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); white-space: nowrap; }
.hg-ghost-dash { color: var(--hg-ghost); }
.hg-status { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.hg-status > .hg-dot { margin-top: 6px; }
.hg-status--inline { align-items: center; gap: 8px; font: 400 13px/16px var(--hg-font); color: var(--hg-fg-3); }
.hg-status--inline > .hg-dot { margin-top: 0; }
.hg-tfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 12px; font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-empty-row { display: flex; align-items: center; min-height: 60px; padding: 0 12px; border-bottom: 1px solid var(--hg-line-row); font: 400 13px/18px var(--hg-font); color: var(--hg-faint); }
/* HG / Loading rows: ghost bars in the real row layout, no spinners */
.hg-skel { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; border-bottom: 1px solid var(--hg-line-row); }
.hg-skel i { display: block; height: 10px; width: 40%; border-radius: 3px; background: #1C1C1C; }
.hg-skel i + i { width: 24%; background: #171717; }

/* more status dots: planned (solid grey), neutral (your move, no hurry) */
.hg-dot--planned { background: var(--hg-dot-draft); }
.hg-dot--fg { background: var(--hg-fg-3); }
.hg-dot--ring { border: 1.5px solid var(--hg-dot-draft); background: none; }

/* ── HG / Switch, HG / Status chip, HG / Notice ── */
.hg-switch { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 4px 0 6px; border: 0; background: none; font: 400 13px/16px var(--hg-font); color: var(--hg-fg-2); }
.hg-switch__track { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: #262626; transition: background-color var(--hg-m-base) var(--hg-ease); }
.hg-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 7px; background: #6B6B6B; transition: translate var(--hg-m-base) var(--hg-ease), background-color var(--hg-m-base) var(--hg-ease); }
.hg-switch[aria-checked="true"] .hg-switch__track { background: var(--hg-primary); }
.hg-switch[aria-checked="true"] .hg-switch__track::after { translate: 12px 0; background: var(--hg-on-primary); }
.hg-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--hg-line-control); border-radius: var(--hg-r-control); background: none; font: 400 13px/16px var(--hg-font); color: var(--hg-fg-2); }
button.hg-chip:hover { border-color: #2A2A2A; background: #141414; }
.hg-notice { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--hg-card); border: 1px solid var(--hg-line-card); border-radius: var(--hg-r-card); font: 400 13.5px/20px var(--hg-font); color: var(--hg-fg-3); }
.hg-notice > p { flex: 1; min-width: 0; }
.hg-notice b { font-weight: 500; color: var(--hg-fg-1); }
.hg-notice .hg-link { flex: none; font-size: 13px; line-height: 16px; }

/* ── HG / Manifest table: phase heads, rows, the add row ── */
.hg-phase { display: flex; align-items: baseline; gap: 10px; padding: 22px 12px 8px; }
.hg-phase:first-child { padding-top: 18px; }
.hg-phase__name { font: 500 13.5px/18px var(--hg-font); color: var(--hg-fg-1); }
.hg-phase__note { flex: 1; min-width: 0; font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-phase__edit { opacity: 0; align-self: center; }
.hg-phase:hover .hg-phase__edit, .hg-phase__edit:focus-visible { opacity: 1; }
.hg-due { font: 400 12px/16px var(--hg-mono); color: var(--hg-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-addrow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; }
.hg-addrow button { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 400 13px/16px var(--hg-font); color: var(--hg-muted); }
.hg-addrow button:hover { color: var(--hg-fg-2); }
.hg-addrow button svg { width: 12px; height: 12px; }
.hg-addrow button + button { margin-left: auto; gap: 8px; color: var(--hg-subtle); }

/* ── form parts for the inspector ── */
.hg-form { display: flex; flex-direction: column; gap: 16px; }
.hg-form .hg-field { gap: 6px; }
.hg-form .hg-field__label { font-size: 12.5px; }
.hg-pair { display: flex; gap: 10px; }
.hg-pair > * { flex: 1 1 0; min-width: 0; }
.hg-input--area { height: auto; min-height: 77px; padding: 9px 10px; font: 400 13px/19px var(--hg-font); color: var(--hg-fg-3); resize: vertical; field-sizing: content; }
.hg-input--mono { font: 400 12.5px/16px var(--hg-mono); }
.hg-form .hg-input { padding: 0 10px; }
select.hg-input {
  appearance: none; -webkit-appearance: none; padding-right: 28px; color: var(--hg-fg-2); cursor: pointer;
  background: var(--hg-control) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236B6B6B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px;
}
.hg-hint { font: 400 12px/16px var(--hg-font); color: var(--hg-faint); }
.hg-check { display: flex; align-items: flex-start; gap: 10px; font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-2); cursor: pointer; }
.hg-check input { margin: 2px 0 0; accent-color: var(--hg-primary); }
.hg-check small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--hg-subtle); }
/* HG / Status segmented (4) */
.hg-seg { display: flex; gap: 2px; padding: 3px; background: var(--hg-control); border: 1px solid var(--hg-line-control); border-radius: var(--hg-r-control); }
.hg-seg button { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 4px; border: 0; border-radius: 5px; background: none; font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); white-space: nowrap; overflow: hidden; }
.hg-seg button:hover { color: var(--hg-fg-2); }
.hg-seg button .hg-dot { display: none; width: 5px; height: 5px; }
.hg-seg button[aria-pressed="true"] { background: #242424; color: var(--hg-fg-1); font-weight: 500; }
.hg-seg button[aria-pressed="true"] .hg-dot { display: inline-block; }
/* files and links */
.hg-links { display: flex; flex-direction: column; gap: 6px; }
.hg-linkrow { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 10px; background: var(--hg-card); border: 1px solid var(--hg-line-card); border-radius: var(--hg-r-control); }
.hg-linkrow > svg { width: 14px; height: 14px; flex: none; color: var(--hg-muted); }
.hg-linkrow a { flex: 1; min-width: 0; font: 400 13px/16px var(--hg-font); color: var(--hg-fg-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-linkrow a:hover { color: var(--hg-fg-1); text-decoration: underline 1px var(--hg-ghost); }
.hg-linkrow__kind { font: 400 11px/14px var(--hg-mono); text-transform: uppercase; color: var(--hg-subtle); }
.hg-linkrow .hg-iconbtn { width: 24px; height: 24px; opacity: 0; }
.hg-linkrow:hover .hg-iconbtn, .hg-linkrow .hg-iconbtn:focus-visible { opacity: 1; }
.hg-drop { display: flex; align-items: center; height: 36px; padding: 0 10px; border: 1px dashed var(--hg-line-raised); border-radius: var(--hg-r-control); }
.hg-drop:focus-within { border-style: solid; border-color: #4A4A4A; }
.hg-drop input { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; outline: none; background: none; font: 400 12.5px/16px var(--hg-font); color: var(--hg-fg-1); }
.hg-drop input::placeholder { color: var(--hg-subtle); }
/* what's happened: notes the client sees */
.hg-notes { display: flex; flex-direction: column; gap: 8px; }
.hg-note { display: flex; gap: 10px; }
.hg-note time { flex: none; width: 52px; font: 400 11.5px/18px var(--hg-mono); color: var(--hg-subtle); }
.hg-note p { flex: 1; min-width: 0; font: 400 13px/18px var(--hg-font); color: var(--hg-fg-3); overflow-wrap: anywhere; }
.hg-note small { color: var(--hg-subtle); }

/* ── Home: your-move rows, project rows, the activity feed ── */
.hg-move { display: flex; align-items: center; gap: 16px; min-height: 54px; padding: 0 4px; border-top: 1px solid var(--hg-line-row); }
.hg-move:last-child { border-bottom: 1px solid var(--hg-line-row); }
.hg-move > .hg-dot { flex: none; }
.hg-move__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hg-move__text b { font: 400 14px/20px var(--hg-font); color: var(--hg-fg-1); }
.hg-move__text span { font: 400 12.5px/16px var(--hg-font); color: var(--hg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.hg-move { color: inherit; text-decoration: none; }
a.hg-move:hover b { text-decoration: underline 1px var(--hg-ghost); text-underline-offset: 3px; }
.hg-feed { display: flex; flex-direction: column; padding: 6px 18px; }
.hg-feed__day { padding: 16px 0 6px; font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-feed__day:first-child { padding-top: 12px; }
.hg-event { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hg-line-row); }
.hg-event > .hg-dot { margin-top: 6px; }
.hg-event > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hg-event b { font: 400 13.5px/19px var(--hg-font); color: var(--hg-fg-2); overflow-wrap: anywhere; }
.hg-event span { font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-feed__none { padding: 16px 0; font: 400 13px/18px var(--hg-font); color: var(--hg-faint); }

/* ── record inspectors (Quotes, Clients): a head, then cards 12 apart ── */
.hg-inspector--cards .hg-inspector__body { gap: 12px; padding: 16px; }
.hg-ihead { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 12px; }
.hg-ihead__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; }
.hg-ihead__code { font: 400 11.5px/14px var(--hg-mono); color: #7A7A7A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-ihead__btns { display: flex; gap: 6px; }
.hg-ihead__btns .hg-iconbtn { background: var(--hg-icon-btn); }
.hg-ihead__btns .hg-iconbtn:hover { background: #1E1E1E; }
.hg-ihead__title { font: 500 19px/24px var(--hg-font); letter-spacing: -.015em; color: var(--hg-fg-1); overflow-wrap: anywhere; }
.hg-ihead__meta { font: 400 13px/18px var(--hg-font); color: #7A7A7A; }
/* HG / Card / fields and friends */
.hg-card { display: flex; flex-direction: column; padding: 4px 16px; background: var(--hg-card); border: 1px solid var(--hg-line-card); border-radius: var(--hg-r-card); }
.hg-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; flex: none; }
.hg-card__title { font: 500 13px/18px var(--hg-font); color: var(--hg-fg-2); }
.hg-card__aside { display: flex; align-items: center; gap: 7px; font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-card__row { display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid var(--hg-line-inner); font: 400 13.5px/18px var(--hg-font); }
.hg-card__row > span:first-child { flex: 1; min-width: 0; color: var(--hg-muted); }
.hg-card__row > span:last-child { color: var(--hg-fg-2); text-align: right; overflow-wrap: anywhere; }
.hg-card__row--total { min-height: 44px; }
.hg-card__row--total > span:first-child { color: var(--hg-fg-1); font-weight: 500; }
.hg-card__row--total > span:last-child { color: var(--hg-fg-1); font: 500 16px/20px var(--hg-font); letter-spacing: -.01em; }
.hg-card__row .is-empty { color: var(--hg-faint); }
.hg-card__note { padding: 12px 0 14px; font: 400 13px/20px var(--hg-font); color: var(--hg-muted); }
.hg-card__foot { display: flex; align-items: center; justify-content: space-between; height: 40px; border-top: 1px solid var(--hg-line-inner); font: 500 13px/18px var(--hg-font); color: var(--hg-fg-3); text-decoration: none; }
.hg-card__foot:hover { color: var(--hg-fg-1); }
.hg-card__foot svg { width: 14px; height: 14px; color: var(--hg-muted); }
/* HG / Card row / record: dot, title over a sub-line, an amount */
.hg-rec { display: flex; align-items: center; gap: 10px; min-height: 56px; border-top: 1px solid var(--hg-line-inner); color: inherit; text-decoration: none; }
.hg-rec > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hg-rec b { font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-rec small { font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-rec > span:last-child { font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-2); }
a.hg-rec:hover b { color: var(--hg-fg-1); }
.hg-rec--old b, .hg-rec--old > span:last-child { color: var(--hg-subtle); }
/* HG / Card row / contact + HG / Role tag */
.hg-contact { display: flex; align-items: center; gap: 10px; min-height: 56px; border-top: 1px solid var(--hg-line-inner); }
.hg-contact > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hg-contact b { font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-2); }
.hg-contact b span { color: var(--hg-subtle); font-size: 12.5px; }
.hg-contact small { font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-role { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 7px; border: 1px solid var(--hg-line-raised); border-radius: var(--hg-r-small); background: #1C1C1C; font: 400 12px/16px var(--hg-font); color: var(--hg-fg-3); }
.hg-role--quiet { background: none; color: var(--hg-subtle); }
/* HG / Card / signal: the one primary in the panel */
.hg-signal { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--hg-card-raised); border: 1px solid var(--hg-line-raised); border-radius: var(--hg-r-card); }
.hg-signal p { display: flex; align-items: flex-start; gap: 10px; font: 400 13.5px/20px var(--hg-font); color: var(--hg-fg-2); }
.hg-signal p > .hg-dot { margin-top: 7px; }
.hg-signal__acts { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 16px; }
.hg-signal--wide { flex-direction: row; align-items: center; }
.hg-signal--wide p { flex: 1; }
.hg-signal--wide .hg-signal__acts { padding-left: 0; }
/* HG / Link field */
.hg-linkfield { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 12px; background: var(--hg-control); border: 1px solid var(--hg-line-control); border-radius: var(--hg-r-control); }
.hg-linkfield code { flex: 1; min-width: 0; font: 400 12px/16px var(--hg-mono); color: var(--hg-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* HG / Card / versions: a rail through the dots */
.hg-ver { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid var(--hg-line-inner); font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-2); text-decoration: none; }
.hg-ver > span:nth-child(2) { flex: 1; }
.hg-ver + .hg-ver::before { content: ''; position: absolute; left: 3px; top: -20px; height: 40px; width: 1px; background: #2A2A2A; }
.hg-ver > .hg-dot { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--hg-card); }
.hg-ver > .hg-dot--draft, .hg-ver > .hg-dot--ring { background: var(--hg-card); }
.hg-ver--old { color: var(--hg-subtle); }
.hg-ver[aria-current="page"] > span:nth-child(2) { color: var(--hg-fg-1); font-weight: 500; }
a.hg-ver:hover > span:nth-child(2) { text-decoration: underline 1px var(--hg-ghost); text-underline-offset: 3px; }

/* ── HG / Group head, HG / Quote row, HG / Client row (grouped lists) ── */
.hg-group + .hg-group { margin-top: 12px; }
.hg-group__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 48px; padding: 0 12px 10px; border-bottom: 1px solid var(--hg-line-inner); }
.hg-group__head h2 { display: flex; align-items: baseline; gap: 8px; font: 500 13px/18px var(--hg-font); color: var(--hg-fg-2); }
.hg-group__head p { font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-group__head p b { font-weight: 400; color: var(--hg-fg-3); }
.hg-qrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--hg-line-row); background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--hg-m-quick) ease; }
.hg-group__head + .hg-qrow, .hg-group__head + .hg-qrow--sel { margin-top: 4px; }
.hg-qrow:hover, .hg-qrow[aria-current="true"] { background: var(--hg-selected); border-radius: var(--hg-r-control); }
.hg-qrow[aria-current="true"] { border-bottom-color: transparent; }
.hg-qrow__dot { display: grid; place-items: center; flex: none; width: 8px; height: 8px; }
.hg-qrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hg-qrow__main b { font: 400 14px/18px var(--hg-font); color: var(--hg-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-qrow__main span { font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-qrow__main span .hg-mono { font-size: 11px; }
.hg-qrow__stand { flex: none; width: 180px; font: 400 13px/18px var(--hg-font); color: var(--hg-muted); }
.hg-qrow__amt { flex: none; width: 88px; font: 400 14px/18px var(--hg-font); color: var(--hg-fg-2); text-align: right; font-variant-numeric: tabular-nums; }
.hg-qrow[aria-current="true"] .hg-qrow__main b, .hg-qrow[aria-current="true"] .hg-qrow__amt { color: var(--hg-fg-1); font-weight: 500; }
/* HG / Table / row / quiet: an older version under the current one */
.hg-qrow--old { min-height: 40px; padding-left: 32px; }
.hg-qrow--old .hg-qrow__main b, .hg-qrow--old .hg-qrow__amt, .hg-qrow--old .hg-qrow__stand { font-size: 12.5px; color: var(--hg-subtle); }
.hg-colheads { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-colheads span:first-child { flex: 1; padding-left: 20px; }
/* HG / Totals foot: ruled cells at the panel's foot */
.hg-totals { display: flex; flex: none; height: 44px; margin-top: auto; border-top: 1px solid var(--hg-line-inner); }
.hg-totals > div { flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 24px; font: 400 12.5px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-totals > div:first-child { justify-content: flex-start; padding-left: 32px; }
.hg-totals > div:last-child { padding-right: 32px; }
.hg-totals > div + div { border-left: 1px solid var(--hg-line-inner); }
.hg-totals b { font: 500 13px/16px var(--hg-font); color: var(--hg-fg-3); }
.hg-totals .hg-mono { font-size: 11px; color: var(--hg-fg-3); }
.hg-main--foot { padding-bottom: 0; }
.hg-search--md { flex: 1; width: auto; height: 34px; border-radius: var(--hg-r-control); }
.hg-search--md input { height: 32px; font-size: 13.5px; }
.hg-select--md { height: 34px; border-radius: var(--hg-r-control); font-size: 13.5px; }
.hg-toolbar { display: flex; align-items: center; gap: 8px; padding: 22px 32px 0; }

/* ── HG / Empty / page ── */
.hg-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 440px; margin: 48px auto; padding: 0 12px; }
.hg-empty__ghost { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px; margin-bottom: 8px; border: 1px dashed var(--hg-line-raised); border-radius: var(--hg-r-card); }
.hg-empty__ghost i { display: block; height: 10px; border-radius: 3px; background: #171717; }
.hg-empty__ghost i:nth-child(1) { width: 70%; } .hg-empty__ghost i:nth-child(2) { width: 52%; } .hg-empty__ghost i:nth-child(3) { width: 61%; }
.hg-empty h2 { font: 500 19px/24px var(--hg-font); color: var(--hg-fg-1); }
.hg-empty p { font: 400 13.5px/21px var(--hg-font); color: var(--hg-muted); }
.hg-empty__acts { display: flex; gap: 8px; margin-top: 6px; }

/* ── overlays: HG / Menu, HG / Toast, HG / Dialog (hangar.js builds them) ── */
.hg-menu {
  position: fixed; inset: auto; margin: 0; min-width: 220px; max-width: 320px; padding: 6px;
  background: #161616; border: 1px solid var(--hg-line-raised); border-radius: var(--hg-r-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); color: var(--hg-fg-2);
}
.hg-menu__label { padding: 6px 8px 4px; font: 400 12px/16px var(--hg-font); color: var(--hg-faint); overflow: hidden; text-overflow: ellipsis; }
.hg-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: var(--hg-r-small); background: none; font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-3); text-align: left; }
.hg-menu__item > svg, .hg-menu__item > .hg-menu__slot { width: 14px; height: 14px; flex: none; color: var(--hg-muted); }
.hg-menu__item span:not(.hg-menu__slot) { flex: 1; }
.hg-menu__item:hover:not(:disabled), .hg-menu__item:focus-visible { background: #202020; color: var(--hg-fg-1); outline: none; }
.hg-menu__item:disabled { opacity: .4; cursor: default; }
.hg-menu__item--danger, .hg-menu__item--danger > svg { color: var(--hg-dot-alert); }
.hg-menu__item kbd { font: 400 12px/16px var(--hg-font); color: var(--hg-subtle); }
.hg-menu__sep { height: 1px; margin: 6px 0; background: var(--hg-line-raised); }
.hg-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 12px; min-height: 48px; max-width: min(520px, calc(100vw - 32px));
  padding: 0 16px; translate: -50% 0; background: #1A1A1A; border: 1px solid #2A2A2A; border-radius: var(--hg-r-card); box-shadow: var(--hg-shadow-float);
  font: 400 13.5px/18px var(--hg-font); color: var(--hg-fg-2);
  @starting-style { opacity: 0; translate: -50% var(--hg-m-rise); }
}
.hg-toast[data-leaving] { opacity: 0; translate: -50% var(--hg-m-rise); }
.hg-toast > .hg-dot { flex: none; }
.hg-toast p { padding: 13px 0; }
dialog.hg-dialog {
  width: min(440px, calc(100vw - 32px)); max-height: calc(var(--hg-screen) - 64px); margin: auto; padding: 0;
  background: #141414; border: 1px solid var(--hg-line-raised); border-radius: var(--hg-r-panel); box-shadow: var(--hg-shadow-float); color: var(--hg-fg-2); overflow: hidden;
}
dialog.hg-dialog::backdrop { background: rgba(5, 5, 5, .62); }
.hg-dialog form { display: flex; flex-direction: column; max-height: inherit; }
.hg-dialog__body { display: flex; flex-direction: column; gap: 16px; padding: 24px; overflow-y: auto; }
.hg-dialog__title { font: 500 17px/22px var(--hg-font); color: var(--hg-fg-1); }
.hg-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; background: #111; border-top: 1px solid var(--hg-line-inner); }
.hg-gate-card { display: grid; gap: 16px; width: min(420px, 100%); padding: 32px; background: var(--hg-panel); border: 1px solid var(--hg-line-panel); border-radius: var(--hg-r-panel); box-shadow: var(--hg-shadow-float); }
.hg-gate-card h1 { font: 500 22px/28px var(--hg-font); color: var(--hg-fg-1); }
.hg-gate-card p { font-size: 14px; line-height: 21px; color: var(--hg-muted); }
.hg-gate-card b { font-weight: 500; color: var(--hg-fg-2); }

/* ── narrower screens: tighter columns at 1280; phones stack the panels ── */
@media (max-width: 1380px) {
  .hg-pad, .hg-head, .hg-bar { padding-inline: 24px; }
  .hg-stat__row { flex-wrap: wrap; row-gap: 2px; }
  .hg-stat__label { white-space: normal; }
}
@media (max-width: 860px) {
  body.hg-app { flex-direction: column; align-items: stretch; padding: 8px; gap: 8px; }
  .hg-side { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px; }
  .hg-side__head { width: 100%; }
  .hg-side .hg-side__tool[data-collapse], .hg-side__spacer, .hg-nav__label { display: none; }
  .hg-nav, .hg-nav__group { flex-direction: row; flex-wrap: wrap; }
  .hg-nav__group[data-closed] { display: flex; }
  .hg-nav__item { height: 30px; padding: 0 8px; gap: 6px; }
  .hg-nav__item span:first-of-type { font-size: 13px; }
  .hg-nav__views { display: none; }
  .hg-me { margin-left: auto; height: 34px; }
  .hg-me__name { display: none; }
  .hg-main { min-height: 0; }
  .hg-inspector { position: static; width: auto; height: auto; max-height: none; }
  .hg-pad, .hg-head, .hg-bar { padding-inline: 16px; }
  .hg-main, .hg-inspector { max-width: 100%; min-width: 0; }
  .hg-bar { height: auto; min-height: 52px; flex-wrap: wrap; padding-block: 10px; }
  .hg-bar__end { width: 100%; }
  .hg-search { flex: 1; width: auto; }
  .hg-toolrow__end { flex-wrap: wrap; }
  .hg-tfoot { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 10px; }
  .hg-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .hg-totals > div:nth-child(3) { display: none; }
  .hg-totals > div { padding-inline: 16px; }
  .hg-toolbar { padding-inline: 16px; flex-wrap: wrap; }
  .hg-head { flex-wrap: wrap; }
  .hg-stats { flex-wrap: wrap; }
  .hg-stat { flex-basis: 50%; }
  .hg-stat:nth-child(3) { border-left: 0; }
  .hg-stat:nth-child(n+3) { border-top: 1px solid var(--hg-line-inner); }
  .hg-scroll-x { overflow-x: auto; }
  .hg-scroll-x > .hg-table { min-width: 760px; }
}

/* ── big screens: the whole app scales, so a 27–32" display reads like a
   laptop held closer instead of a small UI pinned to the left. Two gentle
   steps (1.1 from 2240px wide, 1.2 from 2560) and no more: past that the
   layout reflows, and pages centre inside a maximum width.
   Screen-height lengths divide by --z so full-height parts stay one screen
   tall; hangar.js converts measured positions (menus) by the same factor.
   Same steps as the client documents (brand/08-motion.md, scripts/doc-system). */
:root { --z: 1; }
@media screen and (min-width: 2240px) and (min-height: 1200px) { :root { --z: 1.1; } }
@media screen and (min-width: 2560px) and (min-height: 1300px) { :root { --z: 1.2; } }
@media screen { html { zoom: var(--z); } }