/* Fleetless design system — the one stylesheet for the public site.
   Copied from docs/design-system/styles.css (which is lifted from the
   console's main.css). The only edit: fonts are declared here and served from
   /assets/fonts/ instead of imported from Google — no public page loads
   anything from a third-party host (spec D7). Family names match the tokens
   below so nothing else had to change. */

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/public-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/public-sans-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/public-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/public-sans-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/jetbrains-mono-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens — light
   The five surfaces are deliberately cooler and darker than Tailwind zinc.
   They are what makes the design read as it does.
   -------------------------------------------------------------------------- */
:root {
  --fl-canvas:  #ffffff;
  --fl-surface: #fafafa;
  --fl-raised:  #ffffff;
  --fl-well:    #f4f4f5;
  --fl-border:  #e4e4e7;

  /* Strong/heading ink. Flips with the mode, because a colour sitting on a
     surface that flips must flip too — white on the light surface measured
     1.04:1, effectively invisible. */
  --fl-ink: #0e0e10;

  /* Sits on the green accent chip, which does NOT change between modes, so
     this token deliberately has no dark override. 10.6:1 on green-400. */
  --fl-on-accent: #0e0e10;

  /* Terminal ink. Light mode has no glow: a text-shadow on a light ground
     smears rather than glows. */
  --fl-terminal-ok:   var(--fl-green-700);
  --fl-terminal-warn: var(--fl-amber-700);
  --fl-terminal-err:  var(--fl-red-700);
  --fl-terminal-glow-ok:   none;
  --fl-terminal-glow-warn: none;
  --fl-terminal-glow-err:  none;
  --fl-terminal-scanline: rgb(14 14 16 / 0.05);

  /* The accent. Light is DARKER than the mockup's on purpose: green-500 with
     white on it measures 2.38:1, under the 4.5:1 text floor. green-700
     measures 5.10:1 on the accent and 4.88:1 as text on the surface. */
  --fl-accent: var(--fl-green-700);

  /* Secondary text. Flips with the mode; 4.83:1 light / 6.63:1 dark on
     --fl-raised. */
  --fl-muted: #71717a;

  /* The sidebar header row is 56px so the page header lines up with it. */
  --fl-header-height: 3.5rem;

  --fl-radius:    0.375rem;
  --fl-radius-lg: 0.5rem;

  --fl-font-sans: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  /* 324 uses in the mockup: every number, id, slug, duration and unit. */
  --fl-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* The accent ramp, verbatim. */
  --fl-green-50:  #EFFDF5;
  --fl-green-100: #D9FBE8;
  --fl-green-200: #B3F5D1;
  --fl-green-300: #75EDAE;
  --fl-green-400: #00DC82;
  --fl-green-500: #00C16A;
  --fl-green-600: #00A155;
  --fl-green-700: #007F45;
  --fl-green-800: #016538;
  --fl-green-900: #0A5331;
  --fl-green-950: #052E16;

  --fl-amber-400: #fbbf24;
  --fl-amber-700: #b45309;
  --fl-red-400:   #f87171;
  --fl-red-700:   #b91c1c;
}

/* --------------------------------------------------------------------------
   2. Tokens — dark. The console's default look.
   -------------------------------------------------------------------------- */
.dark {
  --fl-canvas:  #0e0e10;
  --fl-surface: #131316;
  --fl-raised:  #1c1c1f;
  --fl-well:    #0a0a0b;
  --fl-border:  #212124;
  --fl-ink:     #ffffff;

  --fl-accent: var(--fl-green-400);
  --fl-muted:  #a1a1aa;

  /* Glow exists only here. Same token names as light, so a terminal line's
     markup never branches on theme. */
  --fl-terminal-ok:   var(--fl-green-400);
  --fl-terminal-warn: var(--fl-amber-400);
  --fl-terminal-err:  var(--fl-red-400);
  --fl-terminal-glow-ok:   0 0 6px color-mix(in oklab, var(--fl-green-400) 55%, transparent);
  --fl-terminal-glow-warn: 0 0 6px color-mix(in oklab, var(--fl-amber-400) 50%, transparent);
  --fl-terminal-glow-err:  0 0 6px color-mix(in oklab, var(--fl-red-400) 55%, transparent);
  --fl-terminal-scanline: rgb(255 255 255 / 0.035);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fl-canvas);
  color: var(--fl-ink);
  font-family: var(--fl-font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 1.375rem; }
h2 { font-size: 1rem; }
h3 { font-size: 0.8125rem; }
p  { margin: 0; }
a  { color: var(--fl-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp, .fl-mono { font-family: var(--fl-font-mono); }

::selection { background: color-mix(in oklab, var(--fl-accent) 30%, transparent); }

:focus-visible {
  outline: 2px solid var(--fl-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Text roles
   -------------------------------------------------------------------------- */
.fl-muted   { color: var(--fl-muted); }
.fl-label   { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fl-muted); }
.fl-num     { font-family: var(--fl-font-mono); font-variant-numeric: tabular-nums; }
.fl-hr      { height: 1px; background: var(--fl-border); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. Surfaces
   -------------------------------------------------------------------------- */
.fl-card {
  background: var(--fl-raised);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  padding: 1rem 1.25rem;
}
.fl-panel { background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg); }
.fl-well  { background: var(--fl-well);   border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg); }

.fl-stat { background: var(--fl-raised); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg); padding: 1rem 1.25rem; }
.fl-stat-label { font-size: 13px; color: var(--fl-muted); }
.fl-stat-value { font-family: var(--fl-font-mono); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 0.375rem; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.fl-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--fl-radius);
  border: 1px solid transparent;
  cursor: pointer;
  background: none; color: inherit;
}
.fl-btn-primary   { background: var(--fl-accent); color: var(--fl-on-accent); }
.fl-btn-primary:hover { background: color-mix(in oklab, var(--fl-accent) 88%, black); }
.fl-btn-secondary { background: var(--fl-raised); border-color: var(--fl-border); color: var(--fl-ink); }
.fl-btn-secondary:hover { background: var(--fl-well); }
.fl-btn-ghost     { color: var(--fl-muted); }
.fl-btn-ghost:hover { background: var(--fl-well); color: var(--fl-ink); }
.fl-btn-danger    { background: var(--fl-raised); border-color: var(--fl-border); color: var(--fl-red-700); }
.dark .fl-btn-danger { color: var(--fl-red-400); }
.fl-btn:disabled  { opacity: 0.45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   7. Tags and status
   -------------------------------------------------------------------------- */
.fl-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--fl-font-mono); font-size: 11px; line-height: 1;
  padding: 0.25rem 0.4rem; border-radius: var(--fl-radius);
  background: var(--fl-well); color: var(--fl-muted);
  border: 1px solid var(--fl-border);
}
.fl-tag-ok   { color: var(--fl-terminal-ok);   border-color: color-mix(in oklab, var(--fl-terminal-ok) 35%, transparent); }
.fl-tag-warn { color: var(--fl-terminal-warn); border-color: color-mix(in oklab, var(--fl-terminal-warn) 35%, transparent); }
.fl-tag-err  { color: var(--fl-terminal-err);  border-color: color-mix(in oklab, var(--fl-terminal-err) 35%, transparent); }

/* The liveness dot. Pulsing means frames are arriving; it is never the only
   carrier of that meaning — always pair it with a text alternative. */
.fl-dot { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; flex: none; }
.fl-dot-ok    { background: var(--fl-terminal-ok);   box-shadow: var(--fl-terminal-glow-ok); }
.fl-dot-warn  { background: var(--fl-terminal-warn); box-shadow: var(--fl-terminal-glow-warn); }
.fl-dot-err   { background: var(--fl-terminal-err);  box-shadow: var(--fl-terminal-glow-err); }
.fl-dot-idle  { background: var(--fl-muted); }
.fl-dot-pulse { animation: fl-pulse 1.6s ease-in-out infinite; }
@keyframes fl-pulse { 50% { opacity: 0.35; } }

.fl-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--fl-raised); border-radius: var(--fl-radius);
  padding: 0.35rem 0.5rem;
  font-family: var(--fl-font-mono); font-size: 11px; line-height: 1; color: var(--fl-muted);
}

/* --------------------------------------------------------------------------
   8. Terminal — the signature surface
   -------------------------------------------------------------------------- */
.fl-terminal {
  overflow: hidden;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  background: var(--fl-well);
  font-family: var(--fl-font-mono);
}
.fl-terminal-head {
  display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid var(--fl-border);
  padding: 0.5rem 0.75rem;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fl-muted);
}
.fl-terminal-body { position: relative; padding: 0.625rem 0.875rem; font-size: 12px; line-height: 1.65; overflow: auto; }
.fl-terminal-line { display: flex; white-space: pre; }
.fl-terminal-time { opacity: 0.55; font-variant-numeric: tabular-nums; }
.fl-terminal-tag  { opacity: 0.55; }

.fl-terminal-ok   { color: var(--fl-terminal-ok);   text-shadow: var(--fl-terminal-glow-ok); }
.fl-terminal-warn { color: var(--fl-terminal-warn); text-shadow: var(--fl-terminal-glow-warn); }
.fl-terminal-err  { color: var(--fl-terminal-err);  text-shadow: var(--fl-terminal-glow-err); }

.fl-terminal-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--fl-green-500); box-shadow: 0 0 6px var(--fl-green-500);
}
.fl-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, var(--fl-terminal-scanline) 2px 3px);
}
.fl-cursor {
  display: inline-block; width: 7px; height: 13px; vertical-align: text-bottom;
  background: currentColor; animation: fl-blink 1.1s steps(1) infinite;
}
@keyframes fl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fl-cursor, .fl-dot-pulse { animation: none; }
}

/* --------------------------------------------------------------------------
   9. Fields
   -------------------------------------------------------------------------- */
.fl-field { display: flex; flex-direction: column; gap: 0.35rem; }
.fl-field > label { font-size: 12px; color: var(--fl-muted); }
.fl-input {
  font: inherit; font-size: 13px;
  background: var(--fl-raised); color: var(--fl-ink);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius);
  padding: 0.4rem 0.6rem; width: 100%;
}
.fl-input::placeholder { color: var(--fl-muted); }
.fl-input:focus-visible { border-color: var(--fl-accent); }
.fl-input-mono { font-family: var(--fl-font-mono); }
.fl-hint { font-size: 12px; color: var(--fl-muted); }

/* --------------------------------------------------------------------------
   10. Table
   -------------------------------------------------------------------------- */
.fl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fl-table th {
  text-align: left; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--fl-muted);
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--fl-border);
}
.fl-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--fl-border); }
.fl-table tr:last-child td { border-bottom: 0; }
.fl-table tbody tr:hover { background: var(--fl-well); }

/* --------------------------------------------------------------------------
   11. Navigation
   -------------------------------------------------------------------------- */
.fl-nav { display: flex; flex-direction: column; gap: 2px; }
.fl-nav-link {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 13.5px; padding: 7px 9px; border-radius: var(--fl-radius);
  color: var(--fl-muted); cursor: pointer;
}
.fl-nav-link:hover { background: var(--fl-well); color: var(--fl-ink); text-decoration: none; }
.fl-nav-link[aria-current] { background: var(--fl-raised); color: var(--fl-ink); }
.fl-nav-badge { margin-left: auto; font-family: var(--fl-font-mono); font-size: 11px; color: var(--fl-muted); }

.fl-header {
  height: var(--fl-header-height);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem; border-bottom: 1px solid var(--fl-border);
}
.fl-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--fl-ink); }
.fl-brand-mark {
  width: 22px; height: 22px; border-radius: var(--fl-radius);
  background: var(--fl-green-400); color: var(--fl-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.fl-org-chip {
  font-family: var(--fl-font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fl-muted);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius);
  padding: 2px 5px;
}

/* --------------------------------------------------------------------------
   12. Dialog
   -------------------------------------------------------------------------- */
.fl-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); display: grid; place-items: center; }
.fl-dialog {
  background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg); width: min(520px, 92vw);
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.35);
}
.fl-dialog-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--fl-border); }
.fl-dialog-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.fl-dialog-foot { padding: 0.875rem 1.25rem; border-top: 1px solid var(--fl-border); display: flex; justify-content: flex-end; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   13. Page scaffolding used by these preview pages
   -------------------------------------------------------------------------- */
.fl-page  { padding: 2rem; display: flex; flex-direction: column; gap: 2rem; max-width: 1100px; }
.fl-row   { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.fl-grid  { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fl-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.fl-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fl-muted); }