/* Geomatic Design System v3.0.0 – generated from src/css/geomatic.css. Do not edit by hand. */
/*
 * Geomatic Design System – components
 * Requires geomatic-tokens.css (and geomatic-fonts.css for Lato).
 * All classes are prefixed .gm- so they can live next to any existing CSS
 * (Bootstrap, MudBlazor, Tailwind, Webflow …) without collisions.
 *
 * Contents
 *   1. Layout        .gm-container .gm-section .gm-stack .gm-grid
 *   2. Typography    .gm-h1…h4 .gm-lead .gm-eyebrow .gm-title-bar .gm-underline-bar
 *   3. Buttons       .gm-btn (+ --primary --secondary --ghost --inverse --sm --lg)
 *   4. Cards         .gm-card (+ --inset --brand --dark)
 *   5. Tables        .gm-table (+ --first-col --compact --numeric)
 *   6. Feedback      .gm-alert .gm-badge
 *   7. Forms         .gm-field .gm-label .gm-input .gm-select .gm-textarea .gm-help .gm-check
 *   8. Data          .gm-stat .gm-legend
 *   9. Brand         .gm-logo .gm-icon .gm-ornament .gm-header .gm-footer
 *  10. Utilities
 */

/* ----------------------------------------------------------------- 1. Layout */
.gm-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--gm-size-container) + 2 * var(--gm-space-5));
  margin-inline: auto;
  padding-inline: var(--gm-space-5);
}
.gm-container--narrow { max-width: calc(var(--gm-size-container-narrow) + 2 * var(--gm-space-5)); }

.gm-section { padding-block: var(--gm-space-8); }
.gm-section--subtle { background: var(--gm-color-surface-subtle); }
.gm-section--brand-subtle { background: var(--gm-color-surface-brand-subtle); }
.gm-section--brand { background: var(--gm-color-surface-brand); color: var(--gm-color-text-inverse); }
.gm-section--dark { background: var(--gm-color-surface-dark); color: var(--gm-color-text-inverse); }
:where(.gm-section--brand, .gm-section--dark, .gm-card--brand) a:not([class]) { color: inherit; }
:where(.gm-section--dark, .gm-card--dark) a:not([class]) { color: var(--gm-color-text-link-on-dark); }
@media (max-width: 767px) { .gm-section { padding-block: var(--gm-space-7); } }

.gm-stack > * + * { margin-top: var(--gm-stack-gap, var(--gm-space-4)); }
.gm-stack > * { margin-bottom: 0; }

.gm-grid {
  display: grid;
  gap: var(--gm-grid-gap, var(--gm-space-5));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gm-grid-min, 16rem)), 1fr));
}

/* ------------------------------------------------------------- 2. Typography */
.gm-h1 { font: var(--gm-typography-web-h1); font-size: clamp(2.25rem, 1.6rem + 2.4vw, var(--gm-typography-web-h1-font-size)); margin: 0 0 var(--gm-space-4); }
.gm-h2 { font: var(--gm-typography-web-h2); font-size: clamp(1.5rem, 1.25rem + 1vw, var(--gm-typography-web-h2-font-size)); margin: 0 0 var(--gm-space-4); }
.gm-h3 { font: var(--gm-typography-web-h3); margin: 0 0 var(--gm-space-3); }
.gm-h4 { font: var(--gm-typography-web-h4); margin: 0 0 var(--gm-space-2); }
.gm-uppercase { text-transform: uppercase; letter-spacing: 0.02em; }

.gm-body { font: var(--gm-typography-web-body); }
.gm-body-sm { font: var(--gm-typography-web-body-sm); }
.gm-caption { font: var(--gm-typography-web-caption); color: var(--gm-color-text-muted); }
.gm-lead { font-family: var(--gm-font-family-web); font-weight: var(--gm-font-weight-light); font-size: 1.375rem; line-height: 1.45; }

.gm-eyebrow {
  font: var(--gm-typography-web-eyebrow);
  letter-spacing: var(--gm-typography-web-eyebrow-letter-spacing);
  text-transform: uppercase;
  color: var(--gm-color-text-default);
  margin: 0 0 var(--gm-space-2);
}

/* The short blue bar above page and section titles (as used throughout the manual). */
.gm-title-bar::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: var(--gm-border-width-bar);
  margin-bottom: var(--gm-space-3);
  background: var(--gm-color-brand-royal-trust);
}
/* The Tableau/dashboard headline underline – never longer than the word itself. */
.gm-underline-bar {
  display: inline-block;
  padding-bottom: var(--gm-space-1);
  border-bottom: var(--gm-border-width-bar) solid var(--gm-color-brand-royal-trust);
}

.gm-text-brand { color: var(--gm-color-text-brand); }   /* ≥ 24px text only */
.gm-text-muted { color: var(--gm-color-text-muted); }
.gm-text-inverse { color: var(--gm-color-text-inverse); }

.gm-link {
  color: var(--gm-color-text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--gm-motion-duration-base) var(--gm-motion-easing-float);
}
.gm-link:hover { color: var(--gm-color-text-link-hover); }
.gm-section--dark .gm-link, .gm-card--dark .gm-link { color: var(--gm-color-text-link-on-dark); }

/* ---------------------------------------------------------------- 3. Buttons */
.gm-btn {
  --_bg: transparent;
  --_fg: var(--gm-color-text-default);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gm-space-2);
  box-sizing: border-box;
  min-height: 2.75rem;                 /* 44px touch target */
  padding: var(--gm-space-2) var(--gm-space-5);
  border: var(--gm-border-width-strong) solid var(--_bd);
  border-radius: var(--gm-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--gm-font-family-web);
  font-size: 1rem;
  font-weight: var(--gm-font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gm-motion-duration-base) var(--gm-motion-easing-float),
              border-color var(--gm-motion-duration-base) var(--gm-motion-easing-float),
              color var(--gm-motion-duration-base) var(--gm-motion-easing-float),
              box-shadow var(--gm-motion-duration-base) var(--gm-motion-easing-float);
}
.gm-btn:focus-visible { outline: var(--gm-border-width-focus) solid var(--gm-color-border-focus); outline-offset: 2px; }
.gm-btn:disabled, .gm-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.gm-btn svg { width: 1.25em; height: 1.25em; flex: none; }

.gm-btn--primary { --_bg: var(--gm-color-action-primary); --_bd: var(--gm-color-action-primary); --_fg: var(--gm-color-text-inverse); }
.gm-btn--primary:hover:not(:disabled) { --_bg: var(--gm-color-action-primary-hover); --_bd: var(--gm-color-action-primary-hover); box-shadow: var(--gm-shadow-raised-sm); }

.gm-btn--secondary { --_bd: var(--gm-color-action-secondary); --_fg: var(--gm-color-action-secondary); }
.gm-btn--secondary:hover:not(:disabled) { --_bg: var(--gm-color-action-secondary); --_fg: var(--gm-color-text-inverse); }

.gm-btn--ghost { --_fg: var(--gm-color-text-link); padding-inline: var(--gm-space-3); }
.gm-btn--ghost:hover:not(:disabled) { --_bg: var(--gm-color-surface-brand-subtle); --_fg: var(--gm-color-text-link-hover); }

/* On Royal Trust or Dark Grey surfaces */
.gm-btn--inverse { --_bg: var(--gm-color-brand-white); --_bd: var(--gm-color-brand-white); --_fg: var(--gm-color-brand-dark-grey); }
.gm-btn--inverse:hover:not(:disabled) { --_bg: transparent; --_fg: var(--gm-color-brand-white); }

.gm-btn--sm { min-height: 2.25rem; padding: var(--gm-space-1) var(--gm-space-4); font-size: 0.875rem; }
.gm-btn--lg { min-height: 3.25rem; padding: var(--gm-space-3) var(--gm-space-6); font-size: 1.1875rem; } /* 19px bold = WCAG "large text" */
.gm-btn--block { display: flex; width: 100%; }

/* ------------------------------------------------------------------ 4. Cards */
.gm-card {
  box-sizing: border-box;
  padding: var(--gm-space-5);
  background: var(--gm-color-surface-default);
  border-radius: var(--gm-radius-md);
  box-shadow: var(--gm-shadow-raised);
  color: var(--gm-color-text-default);
}
.gm-card > :last-child { margin-bottom: 0; }
.gm-card__title { font: var(--gm-typography-web-h4); margin: 0 0 var(--gm-space-2); }
.gm-card__media { display: block; width: calc(100% + 2 * var(--gm-space-5)); margin: calc(-1 * var(--gm-space-5)) calc(-1 * var(--gm-space-5)) var(--gm-space-4); border-radius: var(--gm-radius-md) var(--gm-radius-md) 0 0; object-fit: cover; }
.gm-card--flat { box-shadow: none; border: var(--gm-border-width-default) solid var(--gm-color-border-default); }
.gm-card--inset { background: var(--gm-color-surface-subtle); box-shadow: var(--gm-shadow-inset); }
.gm-card--brand { background: var(--gm-color-surface-brand); color: var(--gm-color-text-inverse); }
.gm-card--dark { background: var(--gm-color-surface-dark); color: var(--gm-color-text-inverse); }
a.gm-card { display: block; text-decoration: none; transition: box-shadow var(--gm-motion-duration-base) var(--gm-motion-easing-float), transform var(--gm-motion-duration-base) var(--gm-motion-easing-float); }
a.gm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #3E3E3E2E; }

/* ----------------------------------------------------------------- 5. Tables */
/* Manual: white header, banded rows (white / Grey 50), 1/2 pt black rule under header,
   after a special first column and above the total, white vertical borders. */
.gm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--gm-font-family-web);
  font-size: var(--gm-typography-web-body-sm-font-size);
  font-weight: var(--gm-font-weight-regular);
  line-height: 1.4;
  color: var(--gm-color-text-default);
  font-variant-numeric: tabular-nums;
}
.gm-table caption { caption-side: top; text-align: left; font: var(--gm-typography-web-h4); padding-bottom: var(--gm-space-2); }
.gm-table th, .gm-table td {
  padding: var(--gm-space-2) var(--gm-space-3);
  text-align: left;
  vertical-align: top;
  border-left: var(--gm-border-width-hairline) solid var(--gm-color-brand-white);
}
.gm-table th:first-child, .gm-table td:first-child { border-left: 0; }
.gm-table thead th {
  background: var(--gm-color-surface-default);
  font-weight: var(--gm-font-weight-bold);
  border-bottom: var(--gm-border-width-hairline) solid var(--gm-color-border-table);
  vertical-align: bottom;
}
.gm-table tbody tr:nth-child(odd) { background: var(--gm-color-surface-default); }
.gm-table tbody tr:nth-child(even) { background: var(--gm-color-surface-subtle); }
.gm-table tfoot td, .gm-table tfoot th, .gm-table tr.gm-table__total > * {
  font-weight: var(--gm-font-weight-bold);
  border-top: var(--gm-border-width-hairline) solid var(--gm-color-border-table);
  background: var(--gm-color-surface-default);
}
.gm-table--first-col tbody th, .gm-table--first-col tbody td:first-child { font-weight: var(--gm-font-weight-bold); border-right: var(--gm-border-width-hairline) solid var(--gm-color-border-table); }
.gm-table--compact th, .gm-table--compact td { padding: var(--gm-space-1) var(--gm-space-2); }
.gm-table .gm-num, .gm-table--numeric td:not(:first-child), .gm-table--numeric th:not(:first-child) { text-align: right; }
.gm-table tbody tr:hover { background: var(--gm-color-surface-brand-subtle); }

/* -------------------------------------------------------------- 6. Feedback */
.gm-alert {
  --_accent: var(--gm-color-brand-royal-trust);
  --_surface: var(--gm-color-status-info-surface);
  --_fg: var(--gm-color-status-info);
  display: flex;
  gap: var(--gm-space-3);
  box-sizing: border-box;
  padding: var(--gm-space-3) var(--gm-space-4);
  border-left: var(--gm-border-width-bar) solid var(--_accent);
  border-radius: var(--gm-radius-sm);
  background: var(--_surface);
  color: var(--gm-color-text-default);
  font-size: var(--gm-typography-web-body-sm-font-size);
  font-weight: var(--gm-font-weight-regular);
}
.gm-alert__title { display: block; margin-bottom: var(--gm-space-1); color: var(--_fg); font-weight: var(--gm-font-weight-bold); }
.gm-alert > :last-child { margin-bottom: 0; }
.gm-alert--success { --_accent: var(--gm-color-status-success-accent); --_surface: var(--gm-color-status-success-surface); --_fg: var(--gm-color-status-success); }
.gm-alert--warning { --_accent: var(--gm-color-status-warning-accent); --_surface: var(--gm-color-status-warning-surface); --_fg: var(--gm-color-status-warning); }
.gm-alert--danger  { --_accent: var(--gm-color-status-danger-accent);  --_surface: var(--gm-color-status-danger-surface);  --_fg: var(--gm-color-status-danger); }

.gm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-1);
  padding: 0.15em 0.7em;
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-surface-brand-subtle);
  color: var(--gm-color-status-info);
  font-family: var(--gm-font-family-web);
  font-size: 0.8125rem;
  font-weight: var(--gm-font-weight-bold);
  line-height: 1.5;
  white-space: nowrap;
}
.gm-badge--neutral { background: var(--gm-color-surface-subtle); color: var(--gm-color-text-default); }
.gm-badge--brand   { background: var(--gm-color-action-primary); color: var(--gm-color-text-inverse); }
.gm-badge--success { background: var(--gm-color-status-success-surface); color: var(--gm-color-status-success); }
.gm-badge--warning { background: var(--gm-color-status-warning-surface); color: var(--gm-color-status-warning); }
.gm-badge--danger  { background: var(--gm-color-status-danger-surface);  color: var(--gm-color-status-danger); }

/* ----------------------------------------------------------------- 7. Forms */
.gm-field { display: grid; gap: var(--gm-space-1); margin-bottom: var(--gm-space-4); }
.gm-label { font-family: var(--gm-font-family-web); font-size: 1rem; font-weight: var(--gm-font-weight-bold); color: var(--gm-color-text-default); }
.gm-help { font-size: var(--gm-typography-web-caption-font-size); color: var(--gm-color-text-muted); }
.gm-input, .gm-select, .gm-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--gm-space-2) var(--gm-space-3);
  border: var(--gm-border-width-default) solid var(--gm-color-neutral-dark-smoke);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-color-surface-default);
  color: var(--gm-color-text-default);
  font-family: var(--gm-font-family-web);
  font-size: 1rem;
  font-weight: var(--gm-font-weight-regular);
  line-height: 1.4;
  transition: border-color var(--gm-motion-duration-base) var(--gm-motion-easing-float), box-shadow var(--gm-motion-duration-base) var(--gm-motion-easing-float);
}
.gm-textarea { min-height: 7rem; resize: vertical; }
.gm-input::placeholder, .gm-textarea::placeholder { color: var(--gm-color-text-muted); opacity: 1; }
.gm-input:hover, .gm-select:hover, .gm-textarea:hover { border-color: var(--gm-color-brand-dark-grey); }
.gm-input:focus, .gm-select:focus, .gm-textarea:focus { outline: none; border-color: var(--gm-color-border-focus); box-shadow: 0 0 0 3px var(--gm-color-blue-200); }
.gm-input:disabled, .gm-select:disabled, .gm-textarea:disabled { background: var(--gm-color-surface-subtle); color: var(--gm-color-text-disabled); cursor: not-allowed; }
.gm-field--error .gm-input, .gm-field--error .gm-select, .gm-field--error .gm-textarea, .gm-input[aria-invalid="true"] { border-color: var(--gm-color-status-danger); }
.gm-field--error .gm-help { color: var(--gm-color-status-danger); }
.gm-select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233E3E3E' stroke-width='2' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}
.gm-check { display: inline-flex; align-items: flex-start; gap: var(--gm-space-2); font-size: 1rem; font-weight: var(--gm-font-weight-regular); cursor: pointer; }
.gm-check input { width: 1.125rem; height: 1.125rem; margin: 0.15em 0 0; accent-color: var(--gm-color-action-primary); }

/* ------------------------------------------------------------------ 8. Data */
.gm-stat { display: grid; gap: var(--gm-space-1); }
.gm-stat__value { font-family: var(--gm-font-family-web); font-weight: var(--gm-font-weight-bold); font-size: 2.5rem; line-height: 1.05; color: var(--gm-color-text-brand); font-variant-numeric: tabular-nums; }
.gm-stat__label { font: var(--gm-typography-web-eyebrow); letter-spacing: var(--gm-typography-web-eyebrow-letter-spacing); text-transform: uppercase; color: var(--gm-color-text-default); }
.gm-stat__delta { font-size: var(--gm-typography-web-caption-font-size); font-weight: var(--gm-font-weight-bold); color: var(--gm-color-text-muted); }
.gm-stat__delta--up { color: var(--gm-color-status-success); }
.gm-stat__delta--down { color: var(--gm-color-status-danger); }

.gm-legend { display: flex; flex-wrap: wrap; gap: var(--gm-space-2) var(--gm-space-4); padding: 0; margin: 0; list-style: none; font-size: var(--gm-typography-web-caption-font-size); }
.gm-legend li { display: inline-flex; align-items: center; gap: var(--gm-space-2); margin: 0; }
.gm-legend i { width: 0.75rem; height: 0.75rem; border-radius: var(--gm-radius-circle); background: var(--c, var(--gm-chart-sequence-10-1)); }

/* ----------------------------------------------------------------- 9. Brand */
.gm-logo { display: inline-block; height: var(--gm-logo-height, 2rem); width: auto; min-width: var(--gm-size-logo-min-screen); vertical-align: middle; }
.gm-logo--vertical { height: auto; width: var(--gm-logo-width, 2.5rem); min-width: 0; }

.gm-icon { display: inline-block; width: var(--gm-icon-size, 1.5rem); height: var(--gm-icon-size, 1.5rem); flex: none; vertical-align: middle; fill: currentColor; color: var(--gm-icon-color, currentColor); }
/* For <span class="gm-icon gm-icon--mask" style="--gm-icon:url(icons/house.svg)"> when inline SVG is not possible */
.gm-icon--mask { background: currentColor; -webkit-mask: var(--gm-icon) center / contain no-repeat; mask: var(--gm-icon) center / contain no-repeat; }
.gm-icon--brand { color: var(--gm-color-brand-royal-trust); }
.gm-icon--muted { color: var(--gm-color-neutral-dark-smoke); }

/* Data ornamentation as a decorative background layer (always the backmost layer). */
.gm-ornament { position: relative; isolation: isolate; overflow: hidden; }
.gm-ornament::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10%;
  width: min(55%, 42rem);
  transform: translateY(-50%);
  aspect-ratio: 336 / 137;
  background: var(--gm-ornament-image, url("../graphics/data-ornamentation.svg")) center / contain no-repeat;
  opacity: var(--gm-ornament-opacity, 1);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 767px) { .gm-ornament::before { width: 90%; right: -30%; opacity: calc(var(--gm-ornament-opacity, 1) * 0.35); } }

.gm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-space-5);
  min-height: 4.5rem;
  background: var(--gm-color-surface-default);
  box-shadow: var(--gm-shadow-raised-sm);
}
.gm-header__nav { display: flex; flex-wrap: wrap; gap: var(--gm-space-5); margin: 0; padding: 0; list-style: none; }
.gm-header__nav a { color: var(--gm-color-text-default); font-weight: var(--gm-font-weight-regular); font-size: 1rem; text-decoration: none; padding-block: var(--gm-space-2); border-bottom: 3px solid transparent; }
.gm-header__nav a:hover, .gm-header__nav a[aria-current="page"] { border-bottom-color: var(--gm-color-brand-royal-trust); }

.gm-footer { background: var(--gm-color-surface-dark); color: var(--gm-color-text-inverse); padding-block: var(--gm-space-7); font-size: var(--gm-typography-web-body-sm-font-size); font-weight: var(--gm-font-weight-regular); }
.gm-footer a { color: var(--gm-color-text-link-on-dark); }
.gm-footer__legal { margin-top: var(--gm-space-5); padding-top: var(--gm-space-4); border-top: 1px solid var(--gm-color-neutral-grey-600); color: var(--gm-color-neutral-pearl-river); font-size: var(--gm-typography-web-caption-font-size); }

/* ------------------------------------------------------------- 10. Utilities */
.gm-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gm-shadow-raised { box-shadow: var(--gm-shadow-raised); }
.gm-shadow-inset { box-shadow: var(--gm-shadow-inset); }
.gm-rounded { border-radius: var(--gm-radius-md); }
.gm-rounded-lg { border-radius: var(--gm-radius-lg); }
.gm-circle { border-radius: var(--gm-radius-circle); aspect-ratio: 1; object-fit: cover; }
.gm-photo-bw { filter: grayscale(1); }  /* employee portraits are black & white */

@media print {
  .gm-header, .gm-footer, .gm-btn { display: none !important; }
  .gm-card { box-shadow: none; border: 0.5pt solid var(--gm-color-border-default); }
  .gm-section--brand, .gm-section--dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}