/* ==========================================================================
 * Leonardo — GEOLOG Design System theme
 *
 * Single source of truth for every page. Tokens are vendored from the GEOLOG
 * design system (tokens/{fonts,colors,typography,spacing,shape}.css) and
 * inlined here so the app needs one request and works from the offline cache.
 *
 * Brand rules enforced by this file:
 *   - Blue is the structural ground; orange is the single accent, one per view.
 *   - Red is reserved for critical warnings only.
 *   - No emoji or pictographs as UI icons; status is carried by colour + pills.
 *   - 10px card radius, 6px controls, 50px pills.
 *   - Flat first: hairline borders + soft navy-cast shadows, no glow, no glass.
 * ========================================================================== */

/* --- Brand webfonts (subset to woff2 from the licensed originals) --------- */
@font-face {
  font-family: "Helvetica Neue Condensed";
  src: url("/static/fonts/HelveticaNeueCondensed-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Condensed";
  src: url("/static/fonts/HelveticaNeueCondensed-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Condensed";
  src: url("/static/fonts/HelveticaNeueCondensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Condensed";
  src: url("/static/fonts/HelveticaNeueCondensed-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/static/fonts/MyriadPro-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/static/fonts/MyriadPro-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/static/fonts/MyriadPro-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/static/fonts/MyriadPro-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Colour tokens -------------------------------------------------------- */
:root {
  --geolog-brand:      #004C9C;
  --geolog-brand-deep: #0E2E91;
  --geolog-navy:       #122343;
  --geolog-navy-alt:   #01376D;
  --geolog-slate:      #5070B5;

  --geolog-orange:     #F08904;
  --geolog-orange-ink: #23180A;
  --geolog-sky:        #35BCEE;
  --geolog-alert:      #E41C12;
  --geolog-ok:         #1A8F4A;

  --geolog-ink:        #16202E;
  --geolog-muted:      #5A6B7E;
  --geolog-steel:      #B2B2B2;
  --geolog-line:       #DCE3EC;
  --geolog-code-bg:    #EEF2F7;
  --geolog-field:      #F6F8FB;
  --geolog-surface:    #FFFFFF;
  --geolog-white:      #FFFFFF;
  --geolog-black:      #000000;

  --color-bg:            var(--geolog-field);
  --color-surface:       var(--geolog-surface);
  --color-surface-inset: var(--geolog-code-bg);
  --color-surface-dark:  var(--geolog-navy);
  --text-primary:        var(--geolog-ink);
  --text-secondary:      var(--geolog-muted);
  --text-on-dark:        #FFFFFF;
  --text-on-dark-muted:  #C3CEDE;
  --text-link:           var(--geolog-brand);
  --text-link-hover:     var(--geolog-brand-deep);
  --border-default:      var(--geolog-line);
  --border-strong:       #C3CEDE;
  --action-primary:        var(--geolog-brand);
  --action-primary-hover:  var(--geolog-brand-deep);
  /* Label colour for a filled primary action. It has to flip with the theme,
     because the dark palette lightens the action colour to stay visible on
     navy and can no longer carry white text. */
  --action-primary-ink:    #FFFFFF;
  --action-accent:         var(--geolog-orange);
  --focus-ring:            color-mix(in srgb, var(--geolog-brand) 22%, transparent);
  --status-ok:      var(--geolog-ok);
  --status-warn:    var(--geolog-orange);
  --status-crit:    var(--geolog-alert);
  --status-info:    var(--geolog-sky);

  /* Readable ink for status text and tinted pills, per the Badge specimen.
     Kept separate from the fill colours because --geolog-ok and --geolog-alert
     are shape colours and land at 3.9:1 and 4.4:1 as small text on a light
     surface; these clear AA on every surface in the light palette. */
  --status-ok-ink:   #167B40;
  --status-warn-ink: #9A5A00;
  --status-crit-ink: #D21A11;
  --status-info-ink: #0B6C93;

  /* Status tints need more presence over a dark surface than a light one, so
     the strength is a token rather than a literal in every rule. */
  --tint-weak:   10%;
  --tint:        14%;
  --tint-strong: 20%;
  --tint-hover:  24%;

  /* A categorical colour (KB articles, Tier 3, admin) rather than a status
     one, so it needs its own light-on-dark counterpart. */
  --category-navy:     var(--geolog-navy);
  --category-navy-ink: #FFFFFF;

  --scrim-base: var(--geolog-navy);
}

/* --- Typography tokens ---------------------------------------------------- */
:root {
  --geolog-display: "Helvetica Neue Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --geolog-body:    "Myriad Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --geolog-mono:    "IBM Plex Mono", "SFMono-Regular", "Consolas", ui-monospace, monospace;

  --font-display: var(--geolog-display);
  --font-body:    var(--geolog-body);
  --font-mono:    var(--geolog-mono);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --text-display-1: 3.4rem;
  --text-display-2: 2.4rem;
  --text-display-3: 1.6rem;

  --text-lead: 1.2rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-eyebrow: 0.82rem;

  --lh-display: 0.95;
  --lh-tight: 1.2;
  --lh-body: 1.6;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.22em;
  --ls-caps: 0.08em;
}

/* --- Spacing & shape tokens ----------------------------------------------- */
:root {
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px;

  --layout-max: 1080px;
  --layout-gutter: 28px;
  --section-pad: 56px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 50px;
  --radius-full: 999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  --shadow-sm: 0 1px 2px rgba(18, 35, 67, .06);
  --shadow:    0 1px 2px rgba(18, 35, 67, .06), 0 8px 24px rgba(18, 35, 67, .06);
  --shadow-lg: 0 2px 4px rgba(18, 35, 67, .08), 0 18px 48px rgba(18, 35, 67, .10);

  --bar-height: 9px;
}

/* --- Dark palette ---------------------------------------------------------
 * The brand puts dark sections on solid navy, never black, so the dark theme
 * is built from the navy family. Only the semantic aliases move; the
 * --geolog-* constants stay fixed because they are the brand itself.
 * ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --color-bg:            #0F1B2E;
  --color-surface:       #16263F;
  --color-surface-inset: #1B2E4C;
  --color-surface-dark:  #0A1322;

  --text-primary:   #EAF0F8;
  --text-secondary: #9FB1C9;

  --border-default: #24395C;
  --border-strong:  #33496F;

  /* Brand blue is unreadable on navy, so the action colour lightens and its
     label darkens to keep an accessible pairing. */
  --action-primary:       #4DA3F0;
  --action-primary-hover: #6FB8F7;
  --action-primary-ink:   #071324;
  --text-link:            #4DA3F0;
  --text-link-hover:      #6FB8F7;
  --focus-ring:           color-mix(in srgb, #4DA3F0 35%, transparent);

  --status-ok:   #3FBE73;
  --status-warn: #F5A623;
  --status-crit: #FF6B60;
  --status-info: #56C7F2;
  --status-ok-ink:   var(--status-ok);
  --status-warn-ink: #F5B547;
  --status-crit-ink: var(--status-crit);
  --status-info-ink: #7ED8F7;

  --tint-weak:   16%;
  --tint:        22%;
  --tint-strong: 28%;
  --tint-hover:  34%;

  --category-navy:     #93A9CE;
  --category-navy-ink: #0A1322;

  --scrim-base: #000000;

  /* Navy-cast shadows vanish on a navy ground; these read as depth instead. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .30);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .40), 0 18px 48px rgba(0, 0, 0, .38);
}

/* Theme-paired assets: each is hidden in the theme it is not drawn for. */
:root[data-theme="dark"] .gl-on-light { display: none !important; }
:root:not([data-theme="dark"]) .gl-on-dark { display: none !important; }

/* --- Base ----------------------------------------------------------------- */
html body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--text-primary);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

code, pre, .mono, .gl-mono {
  font-family: var(--font-mono);
}

h1, h2, h3, h4, .gl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}

a {
  color: var(--text-link);
}
a:hover {
  color: var(--text-link-hover);
}

/* Keyboard focus is the one sanctioned second use of orange. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--geolog-orange);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--action-primary) 22%, transparent);
}

.gl-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- App chrome ----------------------------------------------------------- */
/* Sticky navy header with the signature 4px brand-blue bottom rule. */
.gl-appbar {
  background: var(--color-surface-dark);
  border-bottom: 4px solid var(--action-primary);
  color: var(--text-on-dark);
}
/* Headings carry an explicit ink colour in the base rules, so invert them here
   rather than relying on inheritance. */
.gl-appbar h1, .gl-appbar h2, .gl-appbar h3, .gl-appbar h4 { color: var(--text-on-dark); }
.gl-appbar a { color: var(--text-on-dark); }
.gl-appbar .gl-appbar__muted { color: var(--text-on-dark-muted); }
.gl-appbar .gl-appbar__btn:hover { background: rgba(255, 255, 255, .12); }

/* Light page header carrying the signature brand-blue rule. Used where the
   full-colour Leonardo mark sits in the bar and needs a light ground. */
.gl-topbar {
  background: var(--color-surface);
  border-bottom: 4px solid var(--action-primary);
}

/* Navy service rail, matching the wellsite-monitor kit.
   Rather than restyling every descendant, the rail re-points the semantic
   tokens at their on-dark equivalents, so any `var(--text-secondary)` or
   `var(--border-default)` inside it resolves correctly on its own. Sky replaces
   brand blue here because blue-on-navy has too little contrast; the kit uses
   sky for exactly this. */
.gl-rail {
  background: var(--color-surface-dark);
  color: var(--text-on-dark);

  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-on-dark-muted);
  --border-default: rgba(255, 255, 255, .14);
  --border-strong: rgba(255, 255, 255, .24);
  --color-surface: rgba(255, 255, 255, .08);
  --color-surface-inset: rgba(255, 255, 255, .06);
  --action-primary: var(--geolog-sky);
  --action-primary-hover: #6ACFF4;
  --action-primary-ink: var(--geolog-navy);
}
.gl-rail h1, .gl-rail h2, .gl-rail h3, .gl-rail h4 { color: var(--text-on-dark); }
.gl-rail a { color: var(--text-on-dark-muted); }
.gl-rail a:hover { color: var(--geolog-sky); }
.gl-rail .gl-rail__muted { color: var(--text-on-dark-muted); }

/* --- Surfaces ------------------------------------------------------------- */
.gl-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gl-card--flat { box-shadow: none; }

/* --- Buttons -------------------------------------------------------------- */
.gl-btn {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 0.92rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: var(--border-width-strong) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, filter .15s ease, transform .08s ease;
}
.gl-btn:active { transform: translateY(1px); }
.gl-btn:disabled, .gl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.gl-btn--sm { padding: 7px 14px; font-size: 0.85rem; }
.gl-btn--lg { padding: 13px 28px; font-size: 1.02rem; }

.gl-btn--primary { background: var(--action-primary); color: var(--action-primary-ink); }
.gl-btn--primary:hover { background: var(--action-primary-hover); }

/* Reserved for the single most important action on a view. */
.gl-btn--accent { background: var(--action-accent); color: var(--geolog-orange-ink); }
.gl-btn--accent:hover { filter: brightness(1.06); }

.gl-btn--ghost { background: transparent; color: var(--action-primary); border-color: currentColor; }
.gl-btn--ghost:hover { background: color-mix(in srgb, var(--action-primary) var(--tint-weak), transparent); }

.gl-btn--dark { background: #fff; color: var(--geolog-navy); }
.gl-btn--dark:hover { background: var(--color-surface-inset); }

/* Destructive actions are neutral-bordered, not red: red means kick/influx. */
.gl-btn--danger { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.gl-btn--danger:hover { background: var(--color-surface-inset); color: var(--text-primary); }

/* --- Inputs --------------------------------------------------------------- */
.gl-input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: var(--border-width-strong) solid var(--border-default);
  background: var(--color-bg);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.gl-input:focus {
  border-color: var(--action-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.gl-input:disabled { background: var(--color-surface-inset); }
.gl-input::placeholder { color: var(--text-secondary); }

/* --- Badges / status pills ------------------------------------------------ */
/* Status is carried by colour and tint, never by a glyph. */
.gl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.gl-badge--sm { font-size: 0.72rem; padding: 3px 9px; }
.gl-badge--service { background: var(--category-navy); color: var(--category-navy-ink); }
.gl-badge--brand { background: color-mix(in srgb, var(--action-primary) var(--tint), transparent); color: var(--action-primary); }
.gl-badge--ok    { background: color-mix(in srgb, var(--status-ok) var(--tint-strong), transparent);   color: var(--status-ok-ink); }
.gl-badge--warn  { background: color-mix(in srgb, var(--status-warn) var(--tint-strong), transparent); color: var(--status-warn-ink); }
.gl-badge--crit  { background: color-mix(in srgb, var(--status-crit) var(--tint-strong), transparent); color: var(--status-crit-ink); }
.gl-badge--info  { background: color-mix(in srgb, var(--status-info) var(--tint-strong), transparent); color: var(--status-info-ink); }
.gl-badge--muted { background: var(--color-surface-inset); color: var(--text-secondary); }

/* Status dot, the brand-authentic substitute for a status glyph. */
.gl-dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; flex-shrink: 0; }
.gl-dot--ok { background: var(--status-ok); }
.gl-dot--warn { background: var(--status-warn); }
.gl-dot--crit { background: var(--status-crit); }
.gl-dot--info { background: var(--status-info); }
.gl-dot--muted { background: var(--geolog-steel); }

/* --- Semantic text / fill helpers ----------------------------------------
 * These reference the semantic tokens rather than the fixed --geolog-*
 * constants, so every one of them re-colours with the theme. Using
 * --geolog-brand here would leave unreadable dark blue text on navy.
 * ------------------------------------------------------------------------- */
.gl-text-ok { color: var(--status-ok-ink); }
.gl-text-warn { color: var(--status-warn-ink); }
.gl-text-crit { color: var(--status-crit-ink); }
.gl-text-info { color: var(--status-info-ink); }
.gl-text-brand { color: var(--action-primary); }
.gl-text-navy { color: var(--category-navy); }
.gl-text-muted { color: var(--text-secondary); }
.gl-text-accent { color: var(--status-warn); }

.gl-fill-ok { background: var(--status-ok); }
.gl-fill-warn { background: var(--status-warn); }
.gl-fill-crit { background: var(--status-crit); }
.gl-fill-info { background: var(--status-info); }
.gl-fill-brand { background: var(--action-primary); }
.gl-fill-navy { background: var(--category-navy); }
.gl-fill-muted { background: var(--geolog-steel); }

.gl-tint-ok { background: color-mix(in srgb, var(--status-ok) var(--tint-weak), transparent); }
.gl-tint-warn { background: color-mix(in srgb, var(--status-warn) var(--tint), transparent); }
.gl-tint-crit { background: color-mix(in srgb, var(--status-crit) var(--tint-weak), transparent); }
.gl-tint-info { background: color-mix(in srgb, var(--status-info) var(--tint), transparent); }
.gl-tint-brand { background: color-mix(in srgb, var(--action-primary) var(--tint-weak), transparent); }
.gl-tint-navy { background: color-mix(in srgb, var(--category-navy) var(--tint-weak), transparent); }
.gl-tint-muted { background: var(--color-surface-inset); }

/* Border colour only; width still comes from the layout utility. */
.gl-border-ok { border-color: color-mix(in srgb, var(--status-ok) 45%, transparent); }
.gl-border-warn { border-color: color-mix(in srgb, var(--status-warn) 50%, transparent); }
.gl-border-crit { border-color: color-mix(in srgb, var(--status-crit) 45%, transparent); }
.gl-border-info { border-color: color-mix(in srgb, var(--status-info) 55%, transparent); }
.gl-border-brand { border-color: color-mix(in srgb, var(--action-primary) 45%, transparent); }
.gl-border-muted { border-color: var(--border-default); }

/* Hover states. Tailwind's `hover:` variant cannot drive these custom classes,
   so each is a real class carrying its own :hover rule.
   Low-severity destructive actions (logout, delete, thumbs-down) use the muted
   pair, because red is reserved for genuine hazards. */
.gl-hover-muted:hover { background: var(--color-surface-inset); }
.gl-hover-ok:hover    { background: color-mix(in srgb, var(--status-ok) var(--tint-hover), transparent); }
.gl-hover-warn:hover  { background: color-mix(in srgb, var(--status-warn) var(--tint-hover), transparent); }
.gl-hover-crit:hover  { background: color-mix(in srgb, var(--status-crit) var(--tint-hover), transparent); }
.gl-hover-brand:hover { background: color-mix(in srgb, var(--action-primary) var(--tint-strong), transparent); }
.gl-hover-navy:hover  { background: color-mix(in srgb, var(--category-navy) var(--tint-strong), transparent); }

.gl-hover-text-warn:hover  { color: var(--status-warn); }
.gl-hover-text-crit:hover  { color: var(--status-crit); }
.gl-hover-text-brand:hover { color: var(--action-primary); }
.gl-hover-text-muted:hover { color: var(--text-primary); }

.gl-hover-border-crit:hover  { border-color: var(--status-crit); }
.gl-hover-border-warn:hover  { border-color: var(--status-warn); }
.gl-hover-border-brand:hover { border-color: var(--action-primary); }

/* --- Overlays ------------------------------------------------------------- */
/* Modal scrims are navy rather than black, and flat: the brand allows blur only
   for a sticky nav, not as decoration. */
.gl-scrim { background: color-mix(in srgb, var(--scrim-base) 68%, transparent); }
.gl-scrim--light { background: color-mix(in srgb, var(--scrim-base) 45%, transparent); }

/* Media wells sit on navy so cropped artwork reads at any aspect ratio. */
.gl-media-well { background: color-mix(in srgb, var(--geolog-navy) 8%, transparent); }
:root[data-theme="dark"] .gl-media-well { background: rgba(0, 0, 0, .30); }
.gl-media-label { background: color-mix(in srgb, var(--geolog-navy) 88%, transparent); color: var(--text-on-dark); }

/* --- Progress ------------------------------------------------------------- */
.gl-progress {
  background: var(--color-surface-inset);
  border-radius: var(--radius-pill);
  overflow: hidden;
  height: 10px;
}
.gl-progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
  transition: width .4s ease;
}

/* --- Scrollbars ----------------------------------------------------------- */
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--geolog-slate); }

/* --- 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;
  }
}