/* ==========================================================================
   gc.css
   Galebach & Company master design system, component layer.

   Handwritten. Consumes the custom properties emitted by @galebach/tokens
   (packages/tokens/dist/gc-tokens.css). Load the token file first.

   Rules this file obeys:
     Navy is the ground. Cream is the ink. Gold is the rule.
     Depth comes from hairlines and surface shifts, not shadows. The overlay
     shadow token is used only by dialog, sheet, popover, and menu.
     Radius: 4px default, 2px chips and badges, 6px dialogs and sheets.
     Nothing is a pill.
     Serif is never bold. Uppercase mono carries labels, eyebrows, and buttons.
     Every transition is under 200ms and honours prefers-reduced-motion.

   Order:
     01 Reset and root
     02 Typography utilities
     03 Foundations
     04 Inputs
     05 Navigation
     06 Feedback
     07 Overlays
     08 Data
     09 Structures
     10 Reduced motion
     11 Print
   ========================================================================== */


/* ==========================================================================
   01 Reset and root
   ========================================================================== */

.gc-root,
.gc-root *,
.gc-root *::before,
.gc-root *::after {
  box-sizing: border-box;
}

.gc-root {
  background-color: var(--gc-surface);
  color: var(--gc-fg);
  font-family: var(--gc-font-mono);
  font-size: var(--gc-type-body-size, 0.92rem);
  line-height: var(--gc-type-body-line, 1.65);
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* A theme band repaints itself. This is what makes a cream section inside a
   navy page, or a navy dialog on a cream app, work with no extra classes. */
.gc-root [data-theme] {
  background-color: var(--gc-surface);
  color: var(--gc-fg);
}

/* The reset is written with :where() so that it carries zero specificity of
   its own. A component class always outranks it, which is what keeps a
   button's own colour from being overwritten by the reset's inherit. */

.gc-root :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre) {
  margin: 0;
}

.gc-root :where(ol, ul) {
  list-style: none;
  padding: 0;
}

.gc-root :where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

.gc-root :where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
}

.gc-root :where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

.gc-root :where(hr) {
  border: 0;
  border-top: var(--gc-hairline-width, 1px) solid var(--gc-line);
  margin: 0;
}

.gc-root :where(:focus-visible) {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-root ::selection {
  background: var(--gc-accent-wash);
  color: var(--gc-accent);
}

/* The faint gold grid. 44px pitch, marketing surfaces only. */
.gc-root--grid {
  background-image:
    linear-gradient(var(--gc-grid) var(--gc-hairline-width, 1px), transparent var(--gc-hairline-width, 1px)),
    linear-gradient(90deg, var(--gc-grid) var(--gc-hairline-width, 1px), transparent var(--gc-hairline-width, 1px));
  background-size:
    var(--gc-layout-grid-unit, 44px) var(--gc-layout-grid-unit, 44px),
    var(--gc-layout-grid-unit, 44px) var(--gc-layout-grid-unit, 44px);
  background-attachment: fixed;
}


/* ==========================================================================
   02 Typography utilities
   Each scale step is available as a .gc-type-* utility and as a .gc-text--*
   modifier. They are the same declarations, grouped.
   ========================================================================== */

.gc-text {
  font-family: var(--gc-type-body-font, var(--gc-font-mono));
  font-size: var(--gc-type-body-size, 0.92rem);
  font-weight: var(--gc-type-body-weight, 400);
  line-height: var(--gc-type-body-line, 1.65);
}

.gc-type-display,
.gc-text--display {
  font-family: var(--gc-type-display-font, var(--gc-font-serif));
  font-size: var(--gc-type-display-size, clamp(3.4rem, 9vw, 7.2rem));
  font-weight: var(--gc-type-display-weight, 400);
  letter-spacing: var(--gc-type-display-tracking, 0);
  line-height: var(--gc-type-display-line, 0.88);
  text-transform: none;
  text-wrap: balance;
}

.gc-type-h1,
.gc-text--h1 {
  font-family: var(--gc-type-h1-font, var(--gc-font-serif));
  font-size: var(--gc-type-h1-size, clamp(2.4rem, 6vw, 4.6rem));
  font-weight: var(--gc-type-h1-weight, 400);
  letter-spacing: var(--gc-type-h1-tracking, 0);
  line-height: var(--gc-type-h1-line, 0.92);
  text-wrap: balance;
}

.gc-type-h2,
.gc-text--h2 {
  font-family: var(--gc-type-h2-font, var(--gc-font-serif));
  font-size: var(--gc-type-h2-size, clamp(1.7rem, 3.2vw, 2.6rem));
  font-weight: var(--gc-type-h2-weight, 400);
  letter-spacing: var(--gc-type-h2-tracking, 0);
  line-height: var(--gc-type-h2-line, 1.05);
  text-wrap: balance;
}

.gc-type-h3,
.gc-text--h3 {
  font-family: var(--gc-type-h3-font, var(--gc-font-serif));
  font-size: var(--gc-type-h3-size, 1.35rem);
  font-weight: var(--gc-type-h3-weight, 400);
  letter-spacing: var(--gc-type-h3-tracking, 0);
  line-height: var(--gc-type-h3-line, 1.15);
}

.gc-type-quote,
.gc-text--quote {
  font-family: var(--gc-type-quote-font, var(--gc-font-serif));
  font-size: var(--gc-type-quote-size, clamp(1.4rem, 2.6vw, 2rem));
  font-weight: var(--gc-type-quote-weight, 400);
  line-height: var(--gc-type-quote-line, 1.25);
  text-wrap: balance;
}

.gc-type-lede,
.gc-text--lede {
  color: var(--gc-fg-muted);
  font-family: var(--gc-type-lede-font, var(--gc-font-mono));
  font-size: var(--gc-type-lede-size, 1.02rem);
  font-weight: var(--gc-type-lede-weight, 400);
  line-height: var(--gc-type-lede-line, 1.6);
  max-width: 58ch;
}

.gc-type-body,
.gc-text--body {
  font-family: var(--gc-type-body-font, var(--gc-font-mono));
  font-size: var(--gc-type-body-size, 0.92rem);
  font-weight: var(--gc-type-body-weight, 400);
  line-height: var(--gc-type-body-line, 1.65);
  max-width: var(--gc-container-prose, 62ch);
}

.gc-type-small,
.gc-text--small {
  font-family: var(--gc-type-small-font, var(--gc-font-mono));
  font-size: var(--gc-type-small-size, 0.82rem);
  font-weight: var(--gc-type-small-weight, 400);
  line-height: var(--gc-type-small-line, 1.55);
}

.gc-type-eyebrow,
.gc-text--eyebrow {
  color: var(--gc-accent);
  font-family: var(--gc-type-eyebrow-font, var(--gc-font-mono));
  font-size: var(--gc-type-eyebrow-size, 0.78rem);
  font-weight: var(--gc-type-eyebrow-weight, 700);
  letter-spacing: var(--gc-type-eyebrow-tracking, 0.14em);
  line-height: var(--gc-type-eyebrow-line, 1.2);
  text-transform: uppercase;
}

.gc-type-label,
.gc-text--label {
  font-family: var(--gc-type-label-font, var(--gc-font-mono));
  font-size: var(--gc-type-label-size, 0.68rem);
  font-weight: var(--gc-type-label-weight, 700);
  letter-spacing: var(--gc-type-label-tracking, 0.12em);
  line-height: var(--gc-type-label-line, 1.2);
  text-transform: uppercase;
}

.gc-type-caption,
.gc-text--caption {
  color: var(--gc-fg-quiet);
  font-family: var(--gc-type-caption-font, var(--gc-font-mono));
  font-size: var(--gc-type-caption-size, 0.72rem);
  font-weight: var(--gc-type-caption-weight, 400);
  letter-spacing: var(--gc-type-caption-tracking, 0.06em);
  line-height: var(--gc-type-caption-line, 1.5);
}

.gc-type-numeral,
.gc-text--numeral {
  font-family: var(--gc-type-numeral-font, var(--gc-font-serif));
  font-size: var(--gc-type-numeral-size, clamp(1.9rem, 3.4vw, 2.6rem));
  font-variant-numeric: tabular-nums;
  font-weight: var(--gc-type-numeral-weight, 400);
  line-height: var(--gc-type-numeral-line, 1);
}

.gc-type-ui,
.gc-text--ui {
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-size, 0.9375rem);
  font-weight: var(--gc-type-ui-weight, 400);
  line-height: var(--gc-type-ui-line, 1.5);
}

.gc-type-ui-small {
  font-family: var(--gc-type-ui-small-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-small-size, 0.8125rem);
  font-weight: var(--gc-type-ui-small-weight, 400);
  line-height: var(--gc-type-ui-small-line, 1.45);
}

.gc-type-ui-strong {
  font-family: var(--gc-type-ui-strong-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-strong-size, 0.9375rem);
  font-weight: var(--gc-type-ui-strong-weight, 600);
  line-height: var(--gc-type-ui-strong-line, 1.5);
}


/* ==========================================================================
   03 Foundations
   ========================================================================== */

/* -------- Eyebrow: numbered marker with a trailing hairline -------------- */

.gc-eyebrow {
  align-items: baseline;
  color: var(--gc-accent);
  display: flex;
  font-family: var(--gc-font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  gap: var(--gc-space-3);
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
}

.gc-eyebrow__num {
  font-variant-numeric: tabular-nums;
}

.gc-eyebrow__rule {
  border-top: var(--gc-hairline-width, 1px) solid var(--gc-line);
  flex: 1;
  transform: translateY(-0.28em);
}

/* -------- Rule ----------------------------------------------------------- */

.gc-rule {
  background: none;
  border: 0;
  border-top: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: block;
  width: 100%;
}

.gc-rule--strong {
  border-top-color: var(--gc-line-strong);
}

.gc-rule--accent {
  border-top-color: var(--gc-accent);
  border-top-width: var(--gc-hairline-accent-width, 2px);
}

/* -------- Button --------------------------------------------------------- */

.gc-button {
  align-items: center;
  background: none;
  border: var(--gc-hairline-width, 1px) solid transparent;
  border-radius: var(--gc-radius-md, 4px);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--gc-type-label-font, var(--gc-font-mono));
  font-size: var(--gc-type-label-size, 0.68rem);
  font-weight: var(--gc-type-label-weight, 700);
  gap: var(--gc-space-2);
  justify-content: center;
  letter-spacing: var(--gc-type-label-tracking, 0.12em);
  line-height: 1;
  min-height: var(--gc-layout-grid-unit, 44px);
  padding: var(--gc-space-3) var(--gc-space-5);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease),
    color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease);
  white-space: nowrap;
}

.gc-button__icon {
  display: inline-flex;
  flex: none;
  height: var(--gc-icon-sm, 16px);
  width: var(--gc-icon-sm, 16px);
}

.gc-button:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-button--primary {
  background-color: var(--gc-fg);
  border-color: var(--gc-fg);
  color: var(--gc-surface);
}

.gc-button--primary:hover {
  background-color: var(--gc-accent);
  border-color: var(--gc-accent);
  color: var(--gc-surface);
}

.gc-button--primary:active {
  background-color: var(--gc-accent-strong);
  border-color: var(--gc-accent-strong);
}

.gc-button--secondary {
  background-color: transparent;
  border-color: var(--gc-line-strong);
  color: var(--gc-fg);
}

.gc-button--secondary:hover {
  border-color: var(--gc-accent);
  color: var(--gc-accent);
}

.gc-button--secondary:active {
  background-color: var(--gc-accent-wash);
  border-color: var(--gc-accent-strong);
  color: var(--gc-accent);
}

.gc-button--text {
  background-color: transparent;
  border-color: transparent;
  color: var(--gc-accent);
  min-height: 0;
  padding: var(--gc-space-2);
}

.gc-button--text:hover {
  color: var(--gc-fg);
  text-decoration: underline;
  text-decoration-color: var(--gc-accent);
  text-underline-offset: 0.32em;
}

.gc-button--text:active {
  color: var(--gc-accent-strong);
}

.gc-button--icon {
  border-color: var(--gc-line);
  color: var(--gc-fg);
  min-height: 0;
  min-width: 36px;
  padding: var(--gc-space-2);
}

.gc-button--icon:hover {
  border-color: var(--gc-accent);
  color: var(--gc-accent);
}

.gc-button--icon:active {
  background-color: var(--gc-accent-wash);
}

.gc-button--sm {
  font-size: 0.62rem;
  min-height: 32px;
  padding: var(--gc-space-2) var(--gc-space-4);
}

.gc-button--lg {
  font-size: 0.74rem;
  min-height: 52px;
  padding: var(--gc-space-4) var(--gc-space-6);
}

.gc-button:disabled,
.gc-button[aria-disabled="true"] {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
  color: var(--gc-fg-quiet);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

/* -------- Link ----------------------------------------------------------- */

.gc-link {
  color: var(--gc-fg);
  text-decoration: underline;
  text-decoration-color: var(--gc-line-strong);
  text-decoration-thickness: var(--gc-hairline-width, 1px);
  text-underline-offset: 0.24em;
  transition:
    color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    text-decoration-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-link:hover {
  color: var(--gc-accent);
  text-decoration-color: var(--gc-accent);
}

.gc-link:active {
  color: var(--gc-accent-strong);
}

.gc-link:focus-visible {
  border-radius: var(--gc-radius-sm, 2px);
  outline: 2px solid var(--gc-focus);
  outline-offset: 3px;
}

.gc-link--quiet {
  color: var(--gc-fg-muted);
  text-decoration-color: transparent;
}

.gc-link--quiet:hover {
  color: var(--gc-accent);
  text-decoration-color: var(--gc-accent);
}

.gc-link--external::after {
  content: " \2197";
  font-size: 0.85em;
  letter-spacing: 0;
}

.gc-link[aria-disabled="true"] {
  color: var(--gc-fg-quiet);
  pointer-events: none;
  text-decoration-color: transparent;
}

/* -------- Card ----------------------------------------------------------- */

.gc-card {
  background-color: var(--gc-surface-panel);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  display: block;
  padding: var(--gc-space-5);
  transition: border-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease);
}

.gc-card--sunken {
  background-color: var(--gc-surface-deep);
}

.gc-card--accent {
  border-left: var(--gc-hairline-accent-width, 2px) solid var(--gc-accent);
}

.gc-card__header {
  display: block;
  margin-bottom: var(--gc-space-3);
}

.gc-card__title {
  color: var(--gc-accent);
  display: block;
  font-family: var(--gc-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gc-card__description {
  color: var(--gc-fg-quiet);
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin-top: var(--gc-space-2);
}

.gc-card__content {
  color: var(--gc-fg-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.gc-card__footer {
  align-items: center;
  border-top: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-3);
  margin-top: var(--gc-space-5);
  padding-top: var(--gc-space-4);
}

/* -------- QuoteCard ------------------------------------------------------ */

.gc-quote {
  border-left: var(--gc-hairline-accent-width, 2px) solid var(--gc-accent);
  display: block;
  padding-left: var(--gc-space-5);
}

.gc-quote__body {
  color: var(--gc-fg);
  font-family: var(--gc-font-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 400;
  line-height: 1.42;
  max-width: 68ch;
  text-wrap: balance;
}

.gc-quote__attribution {
  color: var(--gc-fg);
  display: block;
  font-family: var(--gc-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: var(--gc-space-4);
  text-transform: uppercase;
}

.gc-quote__role {
  color: var(--gc-fg-quiet);
  display: block;
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  margin-top: var(--gc-space-1);
  text-transform: uppercase;
}

.gc-quote--large .gc-quote__body {
  font-size: var(--gc-type-quote-size, clamp(1.4rem, 2.6vw, 2rem));
  line-height: var(--gc-type-quote-line, 1.25);
  max-width: 30ch;
}


/* ==========================================================================
   04 Inputs
   The field wrapper is a four row grid: label, control, hint, error. Empty
   rows collapse to nothing, which lets the select chevron share the control
   row without any extra wrapper element.
   ========================================================================== */

.gc-field {
  display: grid;
  grid-template-areas:
    "label"
    "control"
    "hint"
    "error";
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.gc-field__label {
  color: var(--gc-fg-muted);
  font-family: var(--gc-type-label-font, var(--gc-font-mono));
  font-size: var(--gc-type-label-size, 0.68rem);
  font-weight: var(--gc-type-label-weight, 700);
  grid-area: label;
  letter-spacing: var(--gc-type-label-tracking, 0.12em);
  line-height: 1.2;
  margin-bottom: var(--gc-space-2);
  text-transform: uppercase;
}

.gc-field__control {
  appearance: none;
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  color: var(--gc-fg);
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-size, 0.9375rem);
  grid-area: control;
  line-height: var(--gc-type-ui-line, 1.5);
  min-height: var(--gc-layout-grid-unit, 44px);
  padding: var(--gc-space-3) var(--gc-space-4);
  transition:
    background-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease);
  width: 100%;
}

.gc-field__control::placeholder {
  color: var(--gc-fg-quiet);
}

.gc-field__control:hover {
  border-color: var(--gc-line-strong);
}

.gc-field__control:focus-visible {
  border-color: var(--gc-focus);
  outline: 2px solid var(--gc-focus);
  outline-offset: 1px;
}

.gc-field__control:active {
  background-color: var(--gc-surface);
}

.gc-field__control:disabled {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
  color: var(--gc-fg-quiet);
  cursor: not-allowed;
}

.gc-field__hint {
  color: var(--gc-fg-quiet);
  font-family: var(--gc-font-mono);
  font-size: 0.72rem;
  grid-area: hint;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin-top: var(--gc-space-2);
}

.gc-field__error {
  color: var(--gc-bad);
  font-family: var(--gc-font-mono);
  font-size: 0.72rem;
  grid-area: error;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin-top: var(--gc-space-2);
}

.gc-field--invalid .gc-field__control,
.gc-field__control[aria-invalid="true"] {
  border-color: var(--gc-bad);
}

.gc-field--invalid .gc-field__label {
  color: var(--gc-bad);
}

.gc-field--disabled .gc-field__label,
.gc-field--disabled .gc-field__hint {
  color: var(--gc-fg-ghost);
}

.gc-field--disabled .gc-field__control {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
  color: var(--gc-fg-quiet);
  cursor: not-allowed;
}

/* -------- TextareaField -------------------------------------------------- */

.gc-field--textarea .gc-field__control {
  line-height: 1.6;
  min-height: 132px;
  resize: vertical;
}

/* -------- SelectField ---------------------------------------------------- */

.gc-field--select .gc-field__control {
  cursor: pointer;
  padding-right: var(--gc-space-7);
}

.gc-field__chevron {
  align-self: center;
  color: var(--gc-fg-quiet);
  grid-area: control;
  justify-self: end;
  line-height: 1;
  margin-right: var(--gc-space-4);
  pointer-events: none;
}

.gc-field--select .gc-field__control:hover + .gc-field__chevron,
.gc-field--select .gc-field__control:focus-visible + .gc-field__chevron {
  color: var(--gc-accent);
}

/* -------- Checkbox ------------------------------------------------------- */

.gc-checkbox {
  align-items: flex-start;
  cursor: pointer;
  display: inline-flex;
  gap: var(--gc-space-3);
  min-height: 24px;
}

.gc-checkbox input,
.gc-radio input,
.gc-switch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.gc-checkbox__box {
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-radius: var(--gc-radius-sm, 2px);
  display: inline-block;
  flex: none;
  height: 18px;
  margin-top: 2px;
  position: relative;
  transition:
    background-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
  width: 18px;
}

.gc-checkbox__box::after {
  border: 2px solid var(--gc-surface);
  border-left-width: 0;
  border-top-width: 0;
  content: "";
  height: 9px;
  left: 5px;
  opacity: 0;
  position: absolute;
  top: 1px;
  transform: rotate(45deg);
  transition: opacity var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
  width: 5px;
}

.gc-checkbox:hover .gc-checkbox__box {
  border-color: var(--gc-accent);
}

.gc-checkbox input:checked + .gc-checkbox__box {
  background-color: var(--gc-accent);
  border-color: var(--gc-accent);
}

.gc-checkbox input:checked + .gc-checkbox__box::after {
  opacity: 1;
}

.gc-checkbox input:focus-visible + .gc-checkbox__box {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-checkbox input:active + .gc-checkbox__box {
  background-color: var(--gc-accent-wash);
}

.gc-checkbox input:disabled + .gc-checkbox__box {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
}

.gc-checkbox input:disabled ~ .gc-checkbox__label {
  color: var(--gc-fg-quiet);
}

.gc-checkbox:has(input:disabled) {
  cursor: not-allowed;
}

.gc-checkbox__label {
  color: var(--gc-fg-muted);
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-small-size, 0.8125rem);
  line-height: 1.45;
}

/* -------- Radio and RadioGroup ------------------------------------------- */

.gc-radio-group {
  display: grid;
  gap: var(--gc-space-3);
}

.gc-radio {
  align-items: flex-start;
  cursor: pointer;
  display: inline-flex;
  gap: var(--gc-space-3);
  min-height: 24px;
}

.gc-radio__dot {
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-radius: 50%;
  display: inline-block;
  flex: none;
  height: 18px;
  margin-top: 2px;
  position: relative;
  transition: border-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
  width: 18px;
}

.gc-radio__dot::after {
  background-color: var(--gc-accent);
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 4px;
  opacity: 0;
  position: absolute;
  top: 4px;
  transition: opacity var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
  width: 8px;
}

.gc-radio:hover .gc-radio__dot {
  border-color: var(--gc-accent);
}

.gc-radio input:checked + .gc-radio__dot {
  border-color: var(--gc-accent);
}

.gc-radio input:checked + .gc-radio__dot::after {
  opacity: 1;
}

.gc-radio input:focus-visible + .gc-radio__dot {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-radio input:active + .gc-radio__dot {
  background-color: var(--gc-accent-wash);
}

.gc-radio input:disabled + .gc-radio__dot {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
}

.gc-radio input:disabled ~ .gc-radio__label {
  color: var(--gc-fg-quiet);
}

.gc-radio:has(input:disabled) {
  cursor: not-allowed;
}

.gc-radio__label {
  color: var(--gc-fg-muted);
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-small-size, 0.8125rem);
  line-height: 1.45;
}

/* -------- Switch --------------------------------------------------------- */
/* The track is a rectangle with a 2px radius. Nothing in this system is a
   pill, a switch included. */

.gc-switch {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: var(--gc-space-3);
  position: relative;
}

.gc-switch__track {
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-radius: var(--gc-radius-sm, 2px);
  display: inline-block;
  flex: none;
  height: 24px;
  transition:
    background-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease);
  width: 44px;
}

.gc-switch__thumb {
  background-color: var(--gc-fg-muted);
  border-radius: var(--gc-radius-sm, 2px);
  height: 16px;
  left: 4px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition:
    background-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease),
    transform var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease);
  width: 16px;
}

.gc-switch:hover .gc-switch__track {
  border-color: var(--gc-accent);
}

.gc-switch input:checked ~ .gc-switch__track {
  background-color: var(--gc-accent-wash);
  border-color: var(--gc-accent);
}

.gc-switch input:checked ~ .gc-switch__thumb {
  background-color: var(--gc-accent);
  transform: translate(20px, -50%);
}

.gc-switch input:focus-visible ~ .gc-switch__track {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-switch input:active ~ .gc-switch__thumb {
  background-color: var(--gc-accent-strong);
}

.gc-switch input:disabled ~ .gc-switch__track {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
}

.gc-switch input:disabled ~ .gc-switch__thumb {
  background-color: var(--gc-fg-quiet);
}

.gc-switch:has(input:disabled) {
  cursor: not-allowed;
}

/* -------- SearchField ---------------------------------------------------- */

.gc-search {
  align-items: center;
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  display: flex;
  gap: var(--gc-space-3);
  min-height: var(--gc-layout-grid-unit, 44px);
  padding: 0 var(--gc-space-4);
  transition: border-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease);
  width: 100%;
}

.gc-search:hover {
  border-color: var(--gc-line-strong);
}

.gc-search:focus-within {
  border-color: var(--gc-focus);
}

.gc-search__icon {
  color: var(--gc-fg-quiet);
  display: inline-flex;
  flex: none;
  line-height: 1;
}

.gc-search__input {
  appearance: none;
  background: none;
  border: 0;
  color: var(--gc-fg);
  flex: 1;
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-size, 0.9375rem);
  min-width: 0;
  outline: none;
  padding: var(--gc-space-3) 0;
}

.gc-search__input::placeholder {
  color: var(--gc-fg-quiet);
}

.gc-search__clear {
  background: none;
  border: 0;
  border-radius: var(--gc-radius-sm, 2px);
  color: var(--gc-fg-quiet);
  cursor: pointer;
  flex: none;
  line-height: 1;
  padding: var(--gc-space-1);
  transition: color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-search__clear:hover {
  color: var(--gc-accent);
}

.gc-search__clear:active {
  color: var(--gc-accent-strong);
}

.gc-search__clear:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-search__clear:disabled {
  color: var(--gc-fg-ghost);
  cursor: not-allowed;
}

.gc-search--disabled,
.gc-search:has(.gc-search__input:disabled) {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
}

/* -------- ChipGroup and Chip --------------------------------------------- */

.gc-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-2);
}

.gc-chip {
  align-items: center;
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-sm, 2px);
  color: var(--gc-fg-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 1;
  min-height: 32px;
  padding: var(--gc-space-2) var(--gc-space-3);
  text-transform: uppercase;
  transition:
    background-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-chip:hover {
  border-color: var(--gc-accent);
  color: var(--gc-accent);
}

.gc-chip:active {
  background-color: var(--gc-accent-wash);
}

.gc-chip:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-chip--selected,
.gc-chip[aria-pressed="true"] {
  background-color: var(--gc-accent-wash);
  border-color: var(--gc-accent);
  color: var(--gc-accent);
}

.gc-chip:disabled,
.gc-chip[aria-disabled="true"] {
  background-color: transparent;
  border-color: var(--gc-line-faint);
  color: var(--gc-fg-quiet);
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   05 Navigation
   ========================================================================== */

/* -------- TopNav --------------------------------------------------------- */

.gc-topnav {
  align-items: center;
  background-color: var(--gc-surface-panel);
  backdrop-filter: blur(10px);
  border-bottom: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: flex;
  gap: var(--gc-space-5);
  min-height: var(--gc-layout-header-height, 64px);
  padding: 0 var(--gc-space-5);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: var(--gc-z-header, 20);
}

.gc-topnav__brand {
  color: var(--gc-fg);
  flex: none;
  font-family: var(--gc-font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
}

.gc-topnav__brand:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 4px;
}

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

.gc-topnav__link {
  border-bottom: var(--gc-hairline-accent-width, 2px) solid transparent;
  color: var(--gc-fg-muted);
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: var(--gc-space-2) 0;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    border-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-topnav__link:hover {
  color: var(--gc-accent);
}

.gc-topnav__link:active {
  color: var(--gc-accent-strong);
}

.gc-topnav__link:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 4px;
}

.gc-topnav__link[aria-current="page"] {
  border-bottom-color: var(--gc-accent);
  color: var(--gc-fg);
}

.gc-topnav__link[aria-disabled="true"] {
  color: var(--gc-fg-quiet);
  pointer-events: none;
}

.gc-topnav__cta {
  align-items: center;
  background-color: var(--gc-fg);
  border: var(--gc-hairline-width, 1px) solid var(--gc-fg);
  border-radius: var(--gc-radius-md, 4px);
  color: var(--gc-surface);
  display: inline-flex;
  flex: none;
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  min-height: 36px;
  padding: var(--gc-space-2) var(--gc-space-4);
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-base, 160ms) var(--gc-easing-standard, ease);
}

.gc-topnav__cta:hover {
  background-color: var(--gc-accent);
  border-color: var(--gc-accent);
}

.gc-topnav__cta:active {
  background-color: var(--gc-accent-strong);
  border-color: var(--gc-accent-strong);
}

.gc-topnav__cta:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-topnav__cta[aria-disabled="true"] {
  background-color: var(--gc-fg-ghost);
  border-color: transparent;
  color: var(--gc-fg-quiet);
  pointer-events: none;
}

/* -------- Tabs ----------------------------------------------------------- */

.gc-tabs {
  display: block;
  width: 100%;
}

.gc-tabs__list {
  border-bottom: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-5);
}

.gc-tabs__tab {
  background: none;
  border: 0;
  border-bottom: var(--gc-hairline-accent-width, 2px) solid transparent;
  color: var(--gc-fg-muted);
  cursor: pointer;
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: calc(-1 * var(--gc-hairline-width, 1px));
  padding: var(--gc-space-3) 0;
  text-transform: uppercase;
  transition:
    border-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-tabs__tab:hover {
  color: var(--gc-accent);
}

.gc-tabs__tab:active {
  color: var(--gc-accent-strong);
}

.gc-tabs__tab:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 3px;
}

.gc-tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--gc-accent);
  color: var(--gc-fg);
}

.gc-tabs__tab:disabled,
.gc-tabs__tab[aria-disabled="true"] {
  color: var(--gc-fg-quiet);
  cursor: not-allowed;
  pointer-events: none;
}

.gc-tabs__panel {
  color: var(--gc-fg-muted);
  padding-top: var(--gc-space-5);
}

/* -------- Breadcrumbs ---------------------------------------------------- */

.gc-breadcrumbs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  gap: var(--gc-space-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gc-breadcrumbs__item {
  color: var(--gc-fg-muted);
  text-decoration: none;
  transition: color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-breadcrumbs__item:hover {
  color: var(--gc-accent);
}

.gc-breadcrumbs__item:active {
  color: var(--gc-accent-strong);
}

.gc-breadcrumbs__item:focus-visible {
  border-radius: var(--gc-radius-sm, 2px);
  outline: 2px solid var(--gc-focus);
  outline-offset: 3px;
}

.gc-breadcrumbs__item[aria-current="page"] {
  color: var(--gc-fg);
  pointer-events: none;
}

.gc-breadcrumbs__sep {
  color: var(--gc-accent);
  user-select: none;
}

/* -------- Pagination ----------------------------------------------------- */

.gc-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-2);
}

.gc-pagination__page,
.gc-pagination__prev,
.gc-pagination__next {
  align-items: center;
  background: none;
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  color: var(--gc-fg-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--gc-font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  letter-spacing: 0.08em;
  min-height: 36px;
  min-width: 36px;
  padding: 0 var(--gc-space-3);
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-pagination__page:hover,
.gc-pagination__prev:hover,
.gc-pagination__next:hover {
  border-color: var(--gc-accent);
  color: var(--gc-accent);
}

.gc-pagination__page:active,
.gc-pagination__prev:active,
.gc-pagination__next:active {
  background-color: var(--gc-accent-wash);
}

.gc-pagination__page:focus-visible,
.gc-pagination__prev:focus-visible,
.gc-pagination__next:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-pagination__page--current,
.gc-pagination__page[aria-current="page"] {
  background-color: var(--gc-accent-wash);
  border-color: var(--gc-accent);
  color: var(--gc-accent);
}

.gc-pagination__page:disabled,
.gc-pagination__prev:disabled,
.gc-pagination__next:disabled,
.gc-pagination__page[aria-disabled="true"],
.gc-pagination__prev[aria-disabled="true"],
.gc-pagination__next[aria-disabled="true"] {
  border-color: var(--gc-line-faint);
  color: var(--gc-fg-quiet);
  cursor: not-allowed;
  pointer-events: none;
}

/* -------- ListItem ------------------------------------------------------- */

.gc-listitem {
  align-items: center;
  border-bottom: var(--gc-hairline-width, 1px) solid var(--gc-line);
  color: inherit;
  display: grid;
  gap: var(--gc-space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--gc-space-4) var(--gc-space-2);
  text-decoration: none;
  transition:
    background-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    padding-left var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
  width: 100%;
}

.gc-listitem:hover {
  background-color: var(--gc-accent-wash);
  padding-left: var(--gc-space-4);
}

.gc-listitem:active {
  background-color: var(--gc-surface-raised);
}

.gc-listitem:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: -2px;
}

.gc-listitem[aria-disabled="true"] {
  color: var(--gc-fg-quiet);
  pointer-events: none;
}

.gc-listitem__leading {
  color: var(--gc-accent);
  display: inline-flex;
  flex: none;
}

.gc-listitem__body {
  min-width: 0;
}

.gc-listitem__title {
  color: var(--gc-fg);
  display: block;
  font-family: var(--gc-font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.2;
}

.gc-listitem__meta {
  color: var(--gc-fg-quiet);
  display: block;
  font-family: var(--gc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  margin-top: var(--gc-space-1);
  text-transform: uppercase;
}

.gc-listitem__trailing {
  color: var(--gc-fg-quiet);
  font-family: var(--gc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}

/* -------- Sidebar -------------------------------------------------------- */

.gc-sidebar {
  background-color: var(--gc-surface-deep);
  border-right: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: flex;
  flex-direction: column;
  gap: var(--gc-space-6);
  padding: var(--gc-space-5) var(--gc-space-4);
  transition: width var(--gc-duration-slow, 200ms) var(--gc-easing-standard, ease);
  width: var(--gc-layout-sidebar-width, 240px);
}

.gc-sidebar__group {
  display: grid;
  gap: var(--gc-space-1);
}

.gc-sidebar__label {
  color: var(--gc-fg-quiet);
  font-family: var(--gc-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: var(--gc-space-2);
  padding: 0 var(--gc-space-2);
  text-transform: uppercase;
}

.gc-sidebar__item {
  align-items: center;
  border-left: var(--gc-hairline-accent-width, 2px) solid transparent;
  border-radius: 0 var(--gc-radius-md, 4px) var(--gc-radius-md, 4px) 0;
  color: var(--gc-fg-muted);
  display: flex;
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-small-size, 0.8125rem);
  gap: var(--gc-space-3);
  min-height: 36px;
  padding: var(--gc-space-2) var(--gc-space-3);
  text-decoration: none;
  transition:
    background-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    border-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-sidebar__item:hover {
  background-color: var(--gc-accent-wash);
  color: var(--gc-fg);
}

.gc-sidebar__item:active {
  background-color: var(--gc-surface-raised);
}

.gc-sidebar__item:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: -2px;
}

.gc-sidebar__item[aria-current="page"] {
  background-color: var(--gc-accent-wash);
  border-left-color: var(--gc-accent);
  color: var(--gc-accent);
}

.gc-sidebar__item[aria-disabled="true"] {
  color: var(--gc-fg-quiet);
  pointer-events: none;
}

.gc-sidebar--collapsed {
  align-items: center;
  padding-left: var(--gc-space-2);
  padding-right: var(--gc-space-2);
  width: 64px;
}

.gc-sidebar--collapsed .gc-sidebar__label {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
}

.gc-sidebar--collapsed .gc-sidebar__item {
  justify-content: center;
  padding: var(--gc-space-2);
}


/* ==========================================================================
   06 Feedback
   Status colour appears only on the element that carries the status: the
   left rule and the title. The surface stays neutral.
   ========================================================================== */

/* -------- Alert ---------------------------------------------------------- */

.gc-alert {
  background-color: var(--gc-surface-panel);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-left: var(--gc-hairline-accent-width, 2px) solid var(--gc-accent);
  border-radius: var(--gc-radius-md, 4px);
  display: grid;
  gap: var(--gc-space-1) var(--gc-space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--gc-space-4) var(--gc-space-5);
}

.gc-alert__title {
  color: var(--gc-accent);
  font-family: var(--gc-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gc-alert__body {
  color: var(--gc-fg-muted);
  font-size: 0.82rem;
  grid-column: 1;
  line-height: 1.55;
  max-width: var(--gc-container-prose, 62ch);
}

.gc-alert__close {
  align-self: start;
  background: none;
  border: 0;
  border-radius: var(--gc-radius-sm, 2px);
  color: var(--gc-fg-quiet);
  cursor: pointer;
  grid-column: 2;
  grid-row: 1;
  line-height: 1;
  padding: var(--gc-space-1);
  transition: color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-alert__close:hover {
  color: var(--gc-fg);
}

.gc-alert__close:active {
  color: var(--gc-accent);
}

.gc-alert__close:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-alert__close:disabled {
  color: var(--gc-fg-ghost);
  cursor: not-allowed;
}

.gc-alert--info {
  border-left-color: var(--gc-accent);
}

.gc-alert--info .gc-alert__title {
  color: var(--gc-accent);
}

.gc-alert--good {
  border-left-color: var(--gc-good);
}

.gc-alert--good .gc-alert__title {
  color: var(--gc-good);
}

.gc-alert--warn {
  border-left-color: var(--gc-warn);
}

.gc-alert--warn .gc-alert__title {
  color: var(--gc-warn);
}

.gc-alert--bad {
  border-left-color: var(--gc-bad);
}

.gc-alert--bad .gc-alert__title {
  color: var(--gc-bad);
}

/* -------- StatusBadge ---------------------------------------------------- */

.gc-badge {
  align-items: center;
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-sm, 2px);
  color: var(--gc-fg-muted);
  display: inline-flex;
  font-family: var(--gc-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: var(--gc-space-1) var(--gc-space-2);
  text-transform: uppercase;
  white-space: nowrap;
}

.gc-badge--neutral {
  border-color: var(--gc-line);
  color: var(--gc-fg-muted);
}

.gc-badge--good {
  border-color: var(--gc-good);
  color: var(--gc-good);
}

.gc-badge--warn {
  border-color: var(--gc-warn);
  color: var(--gc-warn);
}

.gc-badge--bad {
  border-color: var(--gc-bad);
  color: var(--gc-bad);
}

.gc-badge--draft {
  border-color: var(--gc-line-strong);
  color: var(--gc-accent);
}

.gc-badge--hold {
  border-color: var(--gc-line-faint);
  color: var(--gc-fg-quiet);
}

/* -------- Progress ------------------------------------------------------- */

.gc-progress {
  background-color: var(--gc-fg-ghost);
  border-radius: var(--gc-radius-sm, 2px);
  display: block;
  height: 4px;
  overflow: hidden;
  width: 100%;
}

.gc-progress__bar {
  background-color: var(--gc-accent);
  display: block;
  height: 100%;
  transition: width var(--gc-duration-slow, 200ms) var(--gc-easing-standard, ease);
  width: var(--gc-progress-value, 0%);
}

.gc-progress--indeterminate .gc-progress__bar {
  animation: gc-progress-slide 1.2s var(--gc-easing-standard, ease) infinite;
  width: 36%;
}

@keyframes gc-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* -------- Spinner -------------------------------------------------------- */

.gc-spinner {
  animation: gc-spin 700ms linear infinite;
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: 50%;
  border-top-color: var(--gc-accent);
  display: inline-block;
  height: 20px;
  width: 20px;
}

.gc-spinner--sm {
  height: 14px;
  width: 14px;
}

.gc-spinner--lg {
  border-width: 2px;
  height: 28px;
  width: 28px;
}

@keyframes gc-spin {
  to { transform: rotate(360deg); }
}

/* -------- Skeleton ------------------------------------------------------- */

.gc-skeleton {
  animation: gc-skeleton-pulse 1.4s var(--gc-easing-standard, ease) infinite;
  background-color: var(--gc-fg-ghost);
  border-radius: var(--gc-radius-md, 4px);
  display: block;
}

.gc-skeleton--text {
  border-radius: var(--gc-radius-sm, 2px);
  height: 0.82em;
  margin: 0.36em 0;
  width: 100%;
}

.gc-skeleton--block {
  border-radius: var(--gc-radius-md, 4px);
  height: 120px;
  width: 100%;
}

.gc-skeleton--circle {
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

@keyframes gc-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* -------- Toast and ToastRegion ------------------------------------------ */

.gc-toast-region {
  display: grid;
  gap: var(--gc-space-3);
  justify-items: end;
  max-width: 420px;
  width: 100%;
  z-index: var(--gc-z-toast, 60);
}

.gc-toast {
  background-color: var(--gc-surface-raised);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-left: var(--gc-hairline-accent-width, 2px) solid var(--gc-accent);
  border-radius: var(--gc-radius-md, 4px);
  display: grid;
  gap: var(--gc-space-1) var(--gc-space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--gc-space-3) var(--gc-space-4);
  width: 100%;
}

.gc-toast__title {
  color: var(--gc-accent);
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gc-toast__body {
  color: var(--gc-fg-muted);
  font-size: 0.8rem;
  grid-column: 1;
  line-height: 1.5;
}

.gc-toast__close {
  background: none;
  border: 0;
  border-radius: var(--gc-radius-sm, 2px);
  color: var(--gc-fg-quiet);
  cursor: pointer;
  grid-column: 2;
  grid-row: 1;
  line-height: 1;
  padding: var(--gc-space-1);
  transition: color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-toast__close:hover {
  color: var(--gc-fg);
}

.gc-toast__close:active {
  color: var(--gc-accent);
}

.gc-toast__close:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
}

.gc-toast__close:disabled {
  color: var(--gc-fg-ghost);
  cursor: not-allowed;
}

.gc-toast--info { border-left-color: var(--gc-accent); }
.gc-toast--info .gc-toast__title { color: var(--gc-accent); }
.gc-toast--good { border-left-color: var(--gc-good); }
.gc-toast--good .gc-toast__title { color: var(--gc-good); }
.gc-toast--warn { border-left-color: var(--gc-warn); }
.gc-toast--warn .gc-toast__title { color: var(--gc-warn); }
.gc-toast--bad { border-left-color: var(--gc-bad); }
.gc-toast--bad .gc-toast__title { color: var(--gc-bad); }

/* -------- EmptyState ----------------------------------------------------- */

.gc-empty {
  align-items: center;
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  display: grid;
  gap: var(--gc-space-3);
  justify-items: center;
  padding: var(--gc-space-8) var(--gc-space-5);
  text-align: center;
}

.gc-empty__title {
  color: var(--gc-fg);
  font-family: var(--gc-font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.15;
}

.gc-empty__body {
  color: var(--gc-fg-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 44ch;
}

.gc-empty__action {
  margin-top: var(--gc-space-2);
}


/* ==========================================================================
   07 Overlays
   The only four surfaces allowed to use the overlay shadow token, because
   they float free of the page.
   ========================================================================== */

/* -------- Dialog --------------------------------------------------------- */

.gc-dialog {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: var(--gc-space-5);
  position: fixed;
  z-index: var(--gc-z-dialog, 50);
}

.gc-dialog__backdrop {
  backdrop-filter: blur(3px);
  background-color: rgba(12, 18, 34, 0.62);
  inset: 0;
  position: fixed;
  z-index: var(--gc-z-overlay, 40);
}

.gc-dialog__panel {
  background-color: var(--gc-surface-raised);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-radius: var(--gc-radius-lg, 6px);
  box-shadow: var(--gc-shadow-overlay);
  display: flex;
  flex-direction: column;
  max-height: 84vh;
  max-width: 520px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: var(--gc-z-dialog, 50);
}

.gc-dialog--form .gc-dialog__panel {
  max-width: 720px;
}

.gc-dialog__header {
  border-bottom: var(--gc-hairline-width, 1px) solid var(--gc-line);
  color: var(--gc-fg);
  font-family: var(--gc-font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.15;
  padding: var(--gc-space-5);
}

.gc-dialog__body {
  color: var(--gc-fg-muted);
  font-size: 0.86rem;
  line-height: 1.6;
  overflow-y: auto;
  padding: var(--gc-space-5);
}

.gc-dialog__footer {
  align-items: center;
  border-top: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-3);
  justify-content: flex-end;
  padding: var(--gc-space-4) var(--gc-space-5);
}

/* -------- Tooltip -------------------------------------------------------- */

.gc-tooltip {
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-radius: var(--gc-radius-md, 4px);
  color: var(--gc-fg);
  display: inline-block;
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  max-width: 28ch;
  padding: var(--gc-space-2) var(--gc-space-3);
  z-index: var(--gc-z-tooltip, 70);
}

/* -------- Popover -------------------------------------------------------- */

.gc-popover {
  background-color: var(--gc-surface-raised);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-radius: var(--gc-radius-md, 4px);
  box-shadow: var(--gc-shadow-overlay);
  color: var(--gc-fg-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 320px;
  padding: var(--gc-space-4);
  z-index: var(--gc-z-overlay, 40);
}

/* -------- DropdownMenu and MenuItem -------------------------------------- */

.gc-menu {
  background-color: var(--gc-surface-raised);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  border-radius: var(--gc-radius-md, 4px);
  box-shadow: var(--gc-shadow-overlay);
  display: grid;
  min-width: 200px;
  padding: var(--gc-space-1);
  z-index: var(--gc-z-overlay, 40);
}

.gc-menu__item {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--gc-radius-sm, 2px);
  color: var(--gc-fg-muted);
  cursor: pointer;
  display: flex;
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-small-size, 0.8125rem);
  gap: var(--gc-space-3);
  min-height: 34px;
  padding: var(--gc-space-2) var(--gc-space-3);
  text-align: left;
  text-decoration: none;
  transition:
    background-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease),
    color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
  width: 100%;
}

.gc-menu__item:hover {
  background-color: var(--gc-accent-wash);
  color: var(--gc-fg);
}

.gc-menu__item:active {
  background-color: var(--gc-surface-deep);
}

.gc-menu__item:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: -2px;
}

.gc-menu__item:disabled,
.gc-menu__item[aria-disabled="true"] {
  color: var(--gc-fg-quiet);
  cursor: not-allowed;
  pointer-events: none;
}

.gc-menu__item--danger {
  color: var(--gc-bad);
}

.gc-menu__item--danger:hover {
  background-color: var(--gc-accent-wash);
  color: var(--gc-bad);
}

/* -------- Sheet ---------------------------------------------------------- */

.gc-sheet {
  background-color: var(--gc-surface-raised);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line-strong);
  box-shadow: var(--gc-shadow-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--gc-space-4);
  padding: var(--gc-space-5);
  position: fixed;
  z-index: var(--gc-z-dialog, 50);
}

.gc-sheet--right {
  border-radius: var(--gc-radius-lg, 6px) 0 0 var(--gc-radius-lg, 6px);
  bottom: 0;
  right: 0;
  top: 0;
  width: min(420px, 92vw);
}

.gc-sheet--bottom {
  border-radius: var(--gc-radius-lg, 6px) var(--gc-radius-lg, 6px) 0 0;
  bottom: 0;
  left: 0;
  max-height: 80vh;
  right: 0;
}


/* ==========================================================================
   08 Data
   ========================================================================== */

/* -------- Avatar --------------------------------------------------------- */

.gc-avatar {
  align-items: center;
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: 50%;
  color: var(--gc-accent);
  display: inline-flex;
  flex: none;
  font-family: var(--gc-font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  width: 40px;
}

.gc-avatar--sm {
  font-size: 0.8rem;
  height: 28px;
  width: 28px;
}

.gc-avatar--lg {
  font-size: 1.6rem;
  height: 64px;
  width: 64px;
}

.gc-avatar--duotone img {
  filter: grayscale(1) contrast(1.06) sepia(0.32) saturate(0.7);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* -------- Table ---------------------------------------------------------- */

.gc-tablewrap {
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  overflow-x: auto;
  width: 100%;
}

.gc-table {
  border-collapse: collapse;
  font-family: var(--gc-type-ui-font, var(--gc-font-sans));
  font-size: var(--gc-type-ui-small-size, 0.8125rem);
  min-width: 520px;
  width: 100%;
}

.gc-table__head {
  background-color: var(--gc-accent-wash);
}

.gc-table__th {
  color: var(--gc-accent);
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: var(--gc-space-3) var(--gc-space-4);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.gc-table__body .gc-table__row {
  transition: background-color var(--gc-duration-fast, 120ms) var(--gc-easing-standard, ease);
}

.gc-table__body .gc-table__row:hover {
  background-color: var(--gc-accent-wash);
}

.gc-table__td {
  border-top: var(--gc-hairline-width, 1px) solid var(--gc-line);
  color: var(--gc-fg-muted);
  padding: var(--gc-space-3) var(--gc-space-4);
  vertical-align: top;
}

.gc-table__td:first-child {
  color: var(--gc-fg);
  white-space: nowrap;
}

.gc-table__th--numeric,
.gc-table__td--numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* -------- Metric and MetricGrid ------------------------------------------ */

.gc-metric-grid {
  display: grid;
  gap: var(--gc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gc-metric {
  background-color: var(--gc-surface-panel);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  display: block;
  padding: var(--gc-space-4) var(--gc-space-5);
}

.gc-metric__value {
  color: var(--gc-fg);
  display: block;
  font-family: var(--gc-font-serif);
  font-size: var(--gc-type-numeral-size, clamp(1.9rem, 3.4vw, 2.6rem));
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1;
}

.gc-metric__label {
  color: var(--gc-fg-quiet);
  display: block;
  font-family: var(--gc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-top: var(--gc-space-2);
  text-transform: uppercase;
}

.gc-metric__delta {
  color: var(--gc-good);
  display: inline-block;
  font-family: var(--gc-font-mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  margin-top: var(--gc-space-2);
  text-transform: uppercase;
}

.gc-metric__delta--good {
  color: var(--gc-good);
}

.gc-metric__delta--bad {
  color: var(--gc-bad);
}

.gc-metric__delta--flat {
  color: var(--gc-fg-quiet);
}

/* -------- BarChart ------------------------------------------------------- */

.gc-barchart {
  display: grid;
  gap: var(--gc-space-3);
  width: 100%;
}

.gc-barchart__label {
  color: var(--gc-fg-muted);
  font-family: var(--gc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gc-barchart__bar {
  background-image: linear-gradient(
    to right,
    var(--gc-accent) var(--gc-bar-value, 0%),
    var(--gc-line-faint) var(--gc-bar-value, 0%)
  );
  border-radius: var(--gc-radius-sm, 2px);
  display: block;
  height: 10px;
  margin-top: var(--gc-space-2);
  width: 100%;
}

.gc-barchart__value {
  color: var(--gc-fg);
  float: right;
  font-family: var(--gc-font-mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* -------- Testimonial ---------------------------------------------------- */

.gc-testimonial {
  background-color: var(--gc-surface-panel);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-left: var(--gc-hairline-accent-width, 2px) solid var(--gc-accent);
  border-radius: var(--gc-radius-md, 4px);
  display: block;
  padding: var(--gc-space-5);
}

.gc-testimonial__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-3);
  margin-bottom: var(--gc-space-4);
}

.gc-testimonial__who {
  color: var(--gc-fg);
  font-family: var(--gc-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gc-testimonial__badge {
  margin-left: auto;
}

.gc-testimonial__body {
  color: var(--gc-fg);
  font-family: var(--gc-font-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 400;
  line-height: 1.42;
  max-width: 68ch;
}

.gc-testimonial--written .gc-testimonial__body {
  text-wrap: pretty;
}

.gc-testimonial--video .gc-testimonial__body {
  aspect-ratio: 9 / 16;
  background-color: var(--gc-surface-deep);
  border: var(--gc-hairline-width, 1px) solid var(--gc-line);
  border-radius: var(--gc-radius-md, 4px);
  max-width: 280px;
  overflow: hidden;
}

.gc-testimonial--video .gc-testimonial__body video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}


/* ==========================================================================
   09 Structures
   ========================================================================== */

/* -------- Section -------------------------------------------------------- */

.gc-section {
  border-top: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: block;
  padding: var(--gc-layout-section-padding, clamp(3.2rem, 9vh, 6rem)) var(--gc-layout-page-padding, clamp(1.2rem, 4vw, 4.5rem));
}

.gc-section--band {
  background-color: var(--gc-surface);
  border-top: 0;
  color: var(--gc-fg);
}

.gc-section--hero {
  border-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92vh;
}

/* -------- PageHeader ----------------------------------------------------- */

.gc-pageheader {
  align-items: flex-end;
  border-bottom: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-4);
  justify-content: space-between;
  padding-bottom: var(--gc-space-4);
  width: 100%;
}

.gc-pageheader__eyebrow {
  color: var(--gc-accent);
  display: block;
  font-family: var(--gc-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: var(--gc-space-2);
  text-transform: uppercase;
}

.gc-pageheader__title {
  color: var(--gc-fg);
  font-family: var(--gc-font-serif);
  font-size: var(--gc-type-h2-size, clamp(1.7rem, 3.2vw, 2.6rem));
  font-weight: 400;
  line-height: 1.05;
}

.gc-pageheader__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-3);
  margin-left: auto;
}

/* -------- AppShell ------------------------------------------------------- */

.gc-shell {
  display: grid;
  grid-template-areas:
    "nav nav"
    "side main";
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 480px;
  width: 100%;
}

.gc-shell__nav {
  grid-area: nav;
}

.gc-shell__side {
  grid-area: side;
}

.gc-shell__main {
  grid-area: main;
  min-width: 0;
  padding: var(--gc-space-5);
}

@media (max-width: 768px) {
  .gc-shell {
    grid-template-areas:
      "nav"
      "side"
      "main";
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------- DashboardLayout ------------------------------------------------ */

.gc-dashboard {
  display: grid;
  gap: var(--gc-space-5);
  width: 100%;
}

.gc-dashboard__header {
  display: block;
}

.gc-dashboard__grid {
  display: grid;
  gap: var(--gc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* -------- SettingsLayout ------------------------------------------------- */

.gc-settings {
  display: grid;
  gap: var(--gc-space-6);
  grid-template-columns: 200px minmax(0, 1fr);
  width: 100%;
}

.gc-settings__nav {
  border-right: var(--gc-hairline-width, 1px) solid var(--gc-line);
  display: grid;
  gap: var(--gc-space-1);
  padding-right: var(--gc-space-4);
}

.gc-settings__content {
  display: grid;
  gap: var(--gc-space-5);
  min-width: 0;
}

@media (max-width: 768px) {
  .gc-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .gc-settings__nav {
    border-right: 0;
    border-bottom: var(--gc-hairline-width, 1px) solid var(--gc-line);
    padding-bottom: var(--gc-space-4);
    padding-right: 0;
  }
}


/* ==========================================================================
   10 Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gc-root *,
  .gc-root *::before,
  .gc-root *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .gc-progress--indeterminate .gc-progress__bar {
    animation: none;
    width: 100%;
  }

  .gc-skeleton {
    animation: none;
  }

  .gc-spinner {
    animation: none;
    border-top-color: var(--gc-accent);
  }
}


/* ==========================================================================
   11 Print
   Navy ground does not print. On paper the system falls back to ink on
   white, hairlines stay, overlays and chrome are dropped.
   ========================================================================== */

@media print {
  .gc-root,
  .gc-root [data-theme] {
    background: none !important;
    color: #10182C !important;
  }

  .gc-root--grid {
    background-image: none;
  }

  .gc-card,
  .gc-metric,
  .gc-testimonial,
  .gc-alert,
  .gc-toast {
    background: none !important;
    break-inside: avoid;
    box-shadow: none !important;
  }

  .gc-dialog,
  .gc-dialog__backdrop,
  .gc-sheet,
  .gc-tooltip,
  .gc-popover,
  .gc-menu,
  .gc-toast-region,
  .gc-topnav,
  .gc-sidebar,
  .gc-pagination {
    display: none !important;
  }

  .gc-section {
    break-inside: avoid;
    padding: 1.5rem 0;
  }

  .gc-link,
  .gc-link--external::after {
    color: inherit;
    text-decoration: underline;
  }

  .gc-table__th {
    background: none;
    color: #77622F;
  }
}