/* ---------------------------------------------------------------------------
   Grayheadz — grayheadz.com
   Implements ui_kits/website/ against the design system. Component classes are
   ported from the compiled primitives (Button, Card, Icon, Badge, StatFigure,
   DataTable, Tabs, Input, Select, Checkbox); page rules follow Chrome/Home/Pages.
   Every value is a token from styles.css; no raw hex except the semantic text
   tints the source itself hard-codes.
   --------------------------------------------------------------------------- */

/* --- Layout primitives ---------------------------------------------------- */

.gh-container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-inline: var(--space-9);
}

.gh-skip {
  position: absolute;
  left: var(--space-9);
  top: 0;
  transform: translateY(-120%);
  z-index: 60;
  padding: var(--space-4) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: transform var(--dur-fast) var(--ease-out);
}

.gh-skip:focus-visible { transform: translateY(var(--space-5)); }

/* Section — Chrome.jsx */
.gh-section { padding-block: var(--section-y); }
.gh-section--tight { padding-block: var(--section-y-tight); }
.gh-section--band { background: var(--ink-950); border-top: 1px solid var(--line-subtle); }
.gh-section--ruled { border-top: 1px solid var(--line-subtle); }

.gh-section__head {
  max-width: 720px;
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.gh-section__title {
  font: var(--type-h1);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.gh-section__lede {
  font: var(--type-body);
  color: var(--text-body);
  text-wrap: pretty;
}

/* --- Icon — components/core/Icon.jsx -------------------------------------
   Lucide via CSS mask so every glyph inherits currentColor. The CDN origin is
   the design system's documented choice (readme.md → Iconography).
   ------------------------------------------------------------------------- */

.gh-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: var(--gh-icon);
  mask-image: var(--gh-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.gh-icon--accent { color: var(--platinum-300); }

/* --- Button — components/core/Button.jsx ---------------------------------- */

.gh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* base.css underlines every <a>; buttons opt out. */
  border-bottom-style: solid;
  text-decoration: none;
  transition: var(--transition-control), filter var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}

/* Hover is a fill brighten only — readme.md → Hover: "Buttons brighten 8%
   and keep their fill." */
.gh-btn:hover { filter: brightness(1.08); }
.gh-btn:active { transform: scale(var(--press-scale)); }

/* base.css sets `a:hover{color:#fff;border-bottom-color:var(--platinum-300)}`,
   which outranks the variant rules below (0,1,1 vs 0,1,0). On the primary CTA
   that flipped the dark ink label to white and recoloured only its bottom
   edge. Buttons keep their own ink and border; the brighten is the hover. */
.gh-btn--primary:hover {
  color: var(--action-text);
  border-color: transparent;
}

.gh-btn--ghost:hover {
  color: var(--text-primary);
  border-color: var(--line-strong);
}

.gh-btn[aria-disabled="true"], .gh-btn:disabled {
  opacity: .38; cursor: not-allowed; filter: none; transform: none;
}

.gh-btn--sm { height: var(--control-h-sm); padding: 0 14px; font-size: var(--text-2xs); }
.gh-btn--md { height: var(--control-h);    padding: 0 20px; font-size: var(--text-xs);  }
.gh-btn--lg { height: var(--control-h-lg); padding: 0 28px; font-size: var(--text-sm);  }

.gh-btn--block { width: 100%; }

/*
 * The fill is --metal-silver exactly as the token defines it: one smooth 135°
 * sweep, nothing resized, offset or repeated.
 *
 * Button.jsx borders this with `1px solid rgba(255,255,255,.5)`, which against
 * the black page reads as a grey ring around the button. That ring is dropped.
 * The border is kept but made transparent so the box model matches the ghost
 * and quiet variants exactly and no size shifts.
 */
.gh-btn--primary {
  background: var(--metal-silver);
  color: var(--action-text);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}

/*
 * Feature CTAs only — the single conversion action, not all 35 primary
 * buttons. A soft specular band crosses the face, leaving the silver beneath
 * untouched, which is why the gradient survives the animation intact. It loops
 * without a seam because the band sits fully clear of the button at both ends
 * of the keyframe, so the restart is never visible.
 */
.gh-btn--feature {
  position: relative;
  overflow: hidden;
}

.gh-btn--feature::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-110%);
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.gh-btn--feature:hover::after,
.gh-btn--feature:focus-visible::after {
  opacity: 1;
  animation: gh-metal-sheen 3s linear infinite;
}

@keyframes gh-metal-sheen {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

.gh-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--action-ghost-border);
}

.gh-btn--quiet {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}

.gh-btn--quiet:hover { color: var(--text-primary); border-color: var(--line); }

/* --- Card — components/core/Card.jsx -------------------------------------- */

.gh-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--line-subtle);
  box-shadow: var(--inset-top-sheen), var(--shadow-md);
  transition: var(--transition-control), transform var(--dur-base) var(--ease-out);
}

.gh-card--inset {
  background: var(--surface-inset);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .5);
}

/* One metal fill per view — readme.md → Visual foundations. */
.gh-card--metal {
  background: var(--metal-graphite);
  border-color: var(--line);
  box-shadow: var(--inset-top-sheen), var(--shadow-lg);
}

.gh-card--link { cursor: pointer; display: block; border-bottom-style: solid; }
.gh-card--link:hover { transform: translateY(-2px); border-color: var(--line-strong); }

.gh-card__body { padding: var(--space-8); }
.gh-card__body--lg { padding: var(--space-9); }
.gh-card__body--flush { padding: var(--space-2); }

.gh-card__title { font: var(--type-h3); color: var(--text-primary); }
.gh-card__text { font: var(--type-body-sm); color: var(--text-muted); }

/* --- Badge — components/core/Badge.jsx ------------------------------------ */

.gh-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  color: var(--text-body);
  border: 1px solid var(--line);
}

.gh-badge--platinum {
  background: var(--metal-silver-soft);
  color: var(--ink-900);
  border-color: rgba(255, 255, 255, .4);
}

.gh-badge--success {
  background: rgba(62, 143, 107, .16);
  color: #7FC7A4;
  border-color: rgba(62, 143, 107, .4);
}

.gh-badge--warning {
  background: rgba(184, 145, 47, .16);
  color: #E0BC6A;
  border-color: rgba(184, 145, 47, .4);
}

.gh-badge--danger {
  background: rgba(175, 66, 60, .16);
  color: #E08B86;
  border-color: rgba(175, 66, 60, .4);
}

.gh-badge--info {
  background: rgba(92, 124, 158, .16);
  color: #9DB8D2;
  border-color: rgba(92, 124, 158, .4);
}

.gh-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* --- StatFigure — components/data/StatFigure.jsx -------------------------- */

.gh-stat { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

.gh-stat__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.gh-stat__row { display: flex; align-items: baseline; gap: var(--space-5); }

.gh-stat__value {
  font: var(--type-h1);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.gh-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: #7FC7A4;
}

.gh-stat__delta--danger { color: #E08B86; }
.gh-stat__delta .gh-icon { width: 12px; height: 12px; }

.gh-stat__caption { font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-muted); }

/* --- DataTable — components/data/DataTable.jsx ---------------------------- */

.gh-table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }

.gh-table th {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.gh-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-subtle);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gh-table--dense th, .gh-table--dense td { padding: 8px 14px; }

.gh-table tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.gh-table tbody tr:hover { background: rgba(255, 255, 255, .03); }

.gh-table .is-emphasis { color: var(--text-primary); }
.gh-table .is-numeric { font-family: var(--font-mono); }
.gh-table .is-right { text-align: right; }

.gh-table-scroll { overflow-x: auto; }

/* --- Tabs — components/navigation/Tabs.jsx -------------------------------- */

.gh-tabs {
  display: flex;
  gap: var(--space-9);
  border-bottom: 1px solid var(--line-subtle);
  overflow-x: auto;
}

.gh-tab {
  position: relative;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font: var(--type-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--transition-control);
}

.gh-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: transparent;
}

.gh-tab[aria-selected="true"] { color: var(--text-primary); }
.gh-tab[aria-selected="true"]::after { background: var(--metal-silver); }

/* --- Form controls — Input / Select / Checkbox ---------------------------- */

.gh-field { display: flex; flex-direction: column; gap: var(--space-4); }

.gh-field__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.gh-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--control-h);
  padding: 0 12px;
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  transition: var(--transition-control);
}

.gh-field__control:focus-within {
  border-color: var(--platinum-300);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.gh-field__prefix { font: var(--type-body-sm); color: var(--text-muted); }

.gh-field input,
.gh-field select {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font: var(--type-body-sm);
}

.gh-field input::placeholder { color: var(--text-disabled); }

.gh-field__control--select { position: relative; padding: 0; }

.gh-field select {
  appearance: none;
  width: 100%;
  height: 100%;
  padding: 0 34px 0 12px;
  cursor: pointer;
}

.gh-field select option { background: var(--surface-raised); }

.gh-field__chevron { position: absolute; right: 11px; color: var(--text-muted); pointer-events: none; width: 15px; height: 15px; }

.gh-check { display: flex; gap: var(--space-5); align-items: flex-start; cursor: pointer; }

.gh-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.gh-check__box {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: grid; place-items: center;
  margin-top: 2px;
  border-radius: var(--radius-xs);
  background: var(--surface-inset);
  border: 1px solid var(--line-strong);
  color: var(--ink-900);
  transition: var(--transition-control);
}

.gh-check__box .gh-icon { width: 13px; height: 13px; opacity: 0; }

.gh-check input:checked + .gh-check__box {
  background: var(--metal-silver-soft);
  border-color: transparent;
}

.gh-check input:checked + .gh-check__box .gh-icon { opacity: 1; }
.gh-check input:focus-visible + .gh-check__box { box-shadow: 0 0 0 3px var(--focus-ring); }

.gh-check__text { display: flex; flex-direction: column; gap: 2px; }
.gh-check__label { font: var(--type-body-sm); color: var(--text-primary); }
.gh-check__hint { font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-muted); }

/* --- ImagePlaceholder — Chrome.jsx ---------------------------------------
   Deliberately unfilled: no brand photography was supplied.
   ------------------------------------------------------------------------- */

.gh-placeholder {
  border-radius: var(--radius-lg);
  background: var(--metal-graphite);
  border: 1px solid var(--line-subtle);
  box-shadow: var(--inset-top-sheen);
  display: grid;
  place-items: center;
  min-height: 260px;
}

.gh-placeholder__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-disabled);
}

/* --- Header — Chrome.jsx Nav ---------------------------------------------- */

.gh-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(10, 10, 11, .82);
  -webkit-backdrop-filter: var(--blur-veil);
  backdrop-filter: var(--blur-veil);
  border-bottom: 1px solid var(--line-subtle);
}

.gh-header__bar { height: 76px; display: flex; align-items: center; gap: var(--space-10); }

.gh-logo { display: block; width: auto; }
.gh-logo--header { height: 26px; }
.gh-logo--footer { height: 30px; }

.gh-nav { display: flex; gap: var(--space-9); margin-left: var(--space-8); }

.gh-nav__link {
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  transition: var(--transition-control);
}

.gh-nav__link:hover { color: var(--text-primary); border-bottom-color: transparent; }
.gh-nav__link[aria-current="page"] { color: var(--text-primary); }

.gh-header__actions { margin-left: auto; display: flex; gap: var(--space-5); align-items: center; }

/* Disclosure menu — an addition; the kit defines no mobile behaviour. */
.gh-menu-toggle { display: none; }
.gh-header__drawer { display: none; }

/* --- Hero ----------------------------------------------------------------
   Layout is the page-shell hero (single column, 760px, left-aligned) as
   instructed; the content is the website kit's.
   ------------------------------------------------------------------------- */

.gh-hero { padding-block: var(--space-14) var(--space-13); position: relative; overflow: hidden; }

/* The one atmospheric device in the system: a single soft radial wash. */
.gh-hero__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 420px at 22% -10%, rgba(195, 201, 209, .12), transparent 70%);
  pointer-events: none;
}

.gh-hero__inner { position: relative; display: grid; gap: var(--space-8); max-width: 760px; }

.gh-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  /* DS hero range is 58–76px; the floor relaxes below 480px so the display
     serif still fits a phone. */
  font-size: clamp(2.75rem, 7.4vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.gh-hero__lede {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: 520px;
  text-wrap: pretty;
}

.gh-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-11);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line-subtle);
}

.gh-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-2); }

/* --- Page furniture ------------------------------------------------------- */

.gh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.gh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.gh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }

.gh-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-11); align-items: start; }

.gh-stack { display: grid; gap: var(--space-8); }
.gh-stack--tight { gap: var(--space-5); }
.gh-stack--loose { gap: var(--space-7); }

.gh-quote {
  font: var(--type-h2);
  font-size: var(--text-xl);
  color: var(--text-primary);
  text-wrap: pretty;
}

.gh-avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--metal-graphite);
  border: 1px solid var(--line);
}

.gh-tick {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  font: var(--type-body-sm);
  color: var(--text-body);
}

.gh-tick--ruled {
  font: var(--type-body);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-subtle);
}

.gh-step { display: flex; gap: var(--space-6); }

.gh-step__n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--platinum-400);
  padding-top: 3px;
}

.gh-chip {
  padding: 14px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: var(--type-h3);
  color: var(--text-muted);
}

.gh-note { font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-disabled); }

.gh-price { display: flex; align-items: baseline; gap: var(--space-4); }
.gh-price__amount { font: var(--type-h1); color: var(--text-primary); }
.gh-price__per { font: var(--type-body-sm); color: var(--text-muted); }

.gh-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-11);
  border-radius: var(--radius-lg);
  background: var(--metal-graphite);
  border: 1px solid var(--line);
  box-shadow: var(--inset-top-sheen);
}

.gh-cta__title { font: var(--type-h1); font-size: var(--text-2xl); color: var(--text-primary); }

.gh-contact-row { display: flex; gap: var(--space-6); }
.gh-contact-row .gh-icon { margin-top: 2px; }
.gh-contact-row__value { font: var(--type-body-sm); color: var(--text-primary); }

/* --- Footer — Chrome.jsx Footer ------------------------------------------- */

.gh-footer { border-top: 1px solid var(--line-subtle); background: var(--ink-950); }

.gh-footer__top {
  padding-block: var(--space-12) var(--space-9);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-10);
}

.gh-footer__blurb { font: var(--type-body-sm); color: var(--text-muted); max-width: 280px; }

.gh-footer__col { display: grid; gap: var(--space-5); align-content: start; }

.gh-footer__link {
  font: var(--type-body-sm);
  color: var(--text-body);
  border-bottom: 1px solid transparent;
  justify-self: start;
}

.gh-footer__link:hover { color: var(--text-primary); border-bottom-color: transparent; }

.gh-footer__legal {
  padding-block: var(--space-6) var(--space-10);
  border-top: 1px solid var(--line-subtle);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  font-size: var(--text-2xs);
  color: var(--text-disabled);
}

.gh-footer__reg { font-family: var(--font-mono); }

/* =========================================================================
   Client portal — ui_kits/portal/
   Components below are ported from components/ the same way as the ones
   above; the portal shell follows Shell.jsx.
   ========================================================================= */

/* Card header/footer bands — Card.jsx */
.gh-card__header,
.gh-card__footer {
  font: var(--type-label);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--line-subtle);
}

.gh-card__footer {
  border-bottom: 0;
  border-top: 1px solid var(--line-subtle);
  text-transform: none;
  font: var(--type-body-sm);
}

/* A flush body keeps its header inset readable rather than 8px from the edge. */
.gh-card--flush .gh-card__header { padding-inline: var(--space-6); }

/* IconButton — components/core/IconButton.jsx */
.gh-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-control);
}

.gh-icon-btn:hover { color: var(--text-primary); }
.gh-icon-btn--sm { width: 28px; height: 28px; }
.gh-icon-btn--md { width: 36px; height: 36px; }
.gh-icon-btn--lg { width: 44px; height: 44px; }
.gh-icon-btn--ghost { border: 1px solid var(--line); }
.gh-icon-btn--ghost:hover { border-color: var(--line-strong); }
.gh-icon-btn--solid { background: var(--ink-700); border: 1px solid var(--line); }
.gh-icon-btn--bare { border: 1px solid transparent; }

/* Tag — components/core/Tag.jsx */
.gh-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font: var(--type-body-sm);
  font-size: var(--text-2xs);
  background: rgba(255, 255, 255, .04);
  color: var(--text-body);
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-control);
}

.gh-tag:hover { background: rgba(255, 255, 255, .08); }

.gh-tag[aria-pressed="true"] {
  background: var(--platinum-200);
  color: var(--ink-900);
  border-color: transparent;
}

/* Tooltip — components/feedback/Tooltip.jsx (CSS-only) */
.gh-tt { position: relative; display: inline-flex; }

.gh-tt__bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--silver-100);
  color: var(--ink-900);
  font: var(--type-body-sm);
  font-size: var(--text-2xs);
  box-shadow: var(--shadow-md);
}

.gh-tt:hover .gh-tt__bubble,
.gh-tt:focus-within .gh-tt__bubble { opacity: 1; }

/* Dialog — components/feedback/Dialog.jsx, on native <dialog> for focus
   trapping and Escape without hand-rolling either. */
.gh-dialog {
  width: 100%;
  max-width: 480px;
  padding: 0;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--inset-top-sheen), var(--shadow-lg);
  color: var(--text-body);
}

.gh-dialog::backdrop {
  background: var(--surface-overlay);
  -webkit-backdrop-filter: var(--blur-veil);
  backdrop-filter: var(--blur-veil);
}

.gh-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.gh-dialog__title { font: var(--type-h2); font-size: var(--text-lg); color: var(--text-primary); }
.gh-dialog__body { padding: 0 var(--space-8) var(--space-8); font: var(--type-body-sm); color: var(--text-body); display: grid; gap: var(--space-6); }

.gh-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--line-subtle);
}

/* Toast — components/feedback/Toast.jsx. Bottom-right, 24px inset: the only
   floating element besides dialogs. */
.gh-toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 12px;
  z-index: 80;
}

.gh-toast {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  width: 360px;
  max-width: calc(100vw - 48px);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 2px solid #7FC7A4;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: gh-toast-in var(--dur-panel) var(--ease-out);
}

.gh-toast__icon { color: #7FC7A4; margin-top: 1px; }
.gh-toast__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.gh-toast__title { font: var(--type-body-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.gh-toast__msg { font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-muted); }

@keyframes gh-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Radio — components/forms/Radio.jsx */
.gh-radio { display: flex; gap: var(--space-5); align-items: flex-start; cursor: pointer; }
.gh-radio input { position: absolute; opacity: 0; width: 0; height: 0; }

.gh-radio__dot {
  width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 2px;
  background: var(--surface-inset);
  border: 1px solid var(--line-strong);
  transition: var(--transition-control);
}

.gh-radio__dot::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--metal-silver-soft);
  opacity: 0;
  transition: var(--transition-control);
}

.gh-radio input:checked + .gh-radio__dot { border-color: var(--platinum-300); }
.gh-radio input:checked + .gh-radio__dot::after { opacity: 1; }
.gh-radio input:focus-visible + .gh-radio__dot { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Switch — components/forms/Switch.jsx */
.gh-switch { display: inline-flex; align-items: center; gap: var(--space-5); cursor: pointer; }
.gh-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.gh-switch__track {
  width: 44px; height: 24px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 3px;
  display: flex; align-items: center; justify-content: flex-start;
  background: var(--surface-inset);
  border: 1px solid var(--line-strong);
  transition: var(--transition-control);
}

.gh-switch__knob {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--silver-400);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-control);
}

.gh-switch input:checked + .gh-switch__track {
  background: var(--metal-silver-soft);
  border-color: transparent;
  justify-content: flex-end;
}

.gh-switch input:checked + .gh-switch__track .gh-switch__knob { background: var(--ink-900); }
.gh-switch input:focus-visible + .gh-switch__track { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Tabs, pill variant — components/navigation/Tabs.jsx */
.gh-tabs--pill {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-inset);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  overflow: visible;
}

.gh-tabs--pill .gh-tab {
  height: 28px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
}

.gh-tabs--pill .gh-tab::after { display: none; }

.gh-tabs--pill .gh-tab[aria-selected="true"] {
  background: var(--ink-600);
  color: var(--text-primary);
  box-shadow: var(--inset-top-sheen);
}

/* --- Portal shell — Shell.jsx --------------------------------------------- */

.gh-portal { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }

.gh-side {
  border-right: 1px solid var(--line-subtle);
  background: var(--ink-950);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.gh-side__nav { display: grid; gap: 2px; }

.gh-side__link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 38px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font: var(--type-body-sm);
  border-bottom: 1px solid transparent;
  transition: var(--transition-control);
}

.gh-side__link:hover { color: var(--text-primary); background: rgba(255, 255, 255, .03); border-bottom-color: transparent; }
.gh-side__link[aria-current="page"] { background: rgba(255, 255, 255, .06); color: var(--text-primary); }

.gh-side__foot { margin-top: auto; display: grid; gap: var(--space-6); }

.gh-side__card {
  padding: var(--space-6);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-4);
}

.gh-side__out {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--text-muted);
  font: var(--type-body-sm);
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
}

.gh-side__out:hover { color: var(--text-primary); border-bottom-color: transparent; }

.gh-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 10, 11, .86);
  -webkit-backdrop-filter: var(--blur-veil);
  backdrop-filter: var(--blur-veil);
  border-bottom: 1px solid var(--line-subtle);
  padding: var(--space-8) var(--space-9);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.gh-topbar__title { font: var(--type-h2); font-size: var(--text-lg); color: var(--text-primary); }
.gh-topbar__sub { font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-muted); }
.gh-topbar__actions { margin-left: auto; display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }

.gh-pad { padding: var(--space-9); display: grid; gap: var(--space-8); }
.gh-pad--narrow { max-width: 860px; }

.gh-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.gh-split-wide { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); }
.gh-docbar { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }

.gh-outstanding { display: flex; align-items: center; gap: var(--space-5); }
.gh-outstanding .gh-btn { margin-left: auto; }

/* --- Login — Shell.jsx Login ---------------------------------------------- */

.gh-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.gh-login__pane { display: grid; place-items: center; padding: var(--space-11); }
.gh-login__inner { width: 360px; max-width: 100%; display: grid; gap: var(--space-9); }

.gh-login__aside {
  background: var(--metal-graphite);
  border-left: 1px solid var(--line-subtle);
  display: grid;
  place-items: center;
  padding: var(--space-11);
}

.gh-login__aside-inner { max-width: 420px; display: grid; gap: var(--space-8); }

/* --- Responsive ----------------------------------------------------------
   The kit is authored at 1440×900 only; these are additions.
   ------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .gh-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gh-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .gh-footer__brand { grid-column: 1 / -1; }
  .gh-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .gh-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .gh-split, .gh-grid-2 { grid-template-columns: 1fr; gap: var(--space-10); }
  .gh-cta { flex-direction: column; align-items: flex-start; }
  .gh-split-wide { grid-template-columns: 1fr; }

  /* The login's proof panel is decoration; below this it costs more than it
     gives, so the form takes the full width. */
  .gh-login { grid-template-columns: 1fr; }
  .gh-login__aside { display: none; }
}

@media (max-width: 860px) {
  .gh-container { padding-inline: var(--space-7); }

  /* The bar keeps only the wordmark and the disclosure; both CTAs move into
     the drawer, which is what stops the nowrap labels overflowing at 375px. */
  .gh-header__bar { gap: var(--space-6); }

  .gh-header__bar .gh-nav,
  .gh-header__actions .gh-btn--quiet,
  .gh-header__actions .gh-btn--primary { display: none; }

  .gh-menu-toggle { display: inline-flex; }

  .gh-header__drawer {
    display: grid;
    gap: var(--space-7);
    padding-block: var(--space-7) var(--space-8);
    border-top: 1px solid var(--line-subtle);
  }

  .gh-header__drawer[hidden] { display: none; }
  .gh-header__drawer .gh-nav { display: grid; gap: var(--space-7); margin-left: 0; }

  .gh-drawer__actions { display: grid; gap: var(--space-5); justify-items: start; }
  .gh-drawer__actions .gh-btn--primary { width: 100%; }

  .gh-hero { padding-block: var(--space-12) var(--space-11); }
  .gh-hero__stats { gap: var(--space-9); }
  .gh-section { padding-block: var(--space-11); }
  .gh-cta { padding: var(--space-9); }

  /* Portal: the sidebar becomes a scrolling strip above the content rather
     than eating 248px of a phone. */
  .gh-portal { grid-template-columns: 1fr; }

  .gh-side {
    border-right: 0;
    border-bottom: 1px solid var(--line-subtle);
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    overflow-x: auto;
  }

  .gh-side__nav { grid-auto-flow: column; gap: var(--space-2); }
  .gh-side__link { white-space: nowrap; }
  .gh-side__foot { margin-top: 0; grid-auto-flow: column; align-items: center; }
  .gh-side__card { display: none; }

  .gh-topbar { padding: var(--space-7) var(--space-7); }
  .gh-pad { padding: var(--space-7); }
  /* The 360px form column is max-content-sized by the centring grid, so it
     outgrows a phone once the pane padding is added. Let it fill instead. */
  .gh-login__pane { padding: var(--space-8); }
  .gh-login__inner { width: 100%; }
}

@media (max-width: 620px) {
  .gh-grid-4, .gh-grid-3, .gh-kpis { grid-template-columns: 1fr; }
  .gh-footer__top { grid-template-columns: 1fr 1fr; }
  .gh-actions .gh-btn { width: 100%; }
  .gh-footer__legal { flex-direction: column; gap: var(--space-4); }
  .gh-toasts { right: 12px; left: 12px; bottom: 12px; }
  .gh-toast { width: auto; }

  /* Button labels are nowrap by default (Button.jsx). The longest of them —
     "Enquire about reporting & compliance" — is wider than a 320px viewport, so
     below this breakpoint let labels wrap and the control grow instead of
     pushing the page sideways. Control heights become minimums. */
  .gh-btn {
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: var(--control-h);
    padding-block: 9px;
  }

  .gh-btn--sm { min-height: var(--control-h-sm); }
  .gh-btn--lg { min-height: var(--control-h-lg); }
}

/* Drop transforms, keep opacity — readme.md → Motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .gh-btn:active { transform: none; }
  .gh-card--link:hover { transform: none; }
  .gh-skip { transition: none; }

  /* No travelling sheen; the 8% brighten still marks the hover. */
  .gh-btn--feature:hover::after,
  .gh-btn--feature:focus-visible::after { animation: none; opacity: 0; }
}