/* ==========================================================================
   Keel & Straits design system
   Source of truth: github.com/AGVANKU/keel-straits-design
   Version: 2.0.0
   Do not edit this file inside a consuming app. Pull the latest instead.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ks-ink:      #0D1013;   /* text, rules, mark */
  --ks-graphite: #66696C;   /* secondary text, labels */
  --ks-concrete: #A3A5A7;   /* disabled, placeholders */
  --ks-line:     #D2D1CD;   /* hairlines, row dividers, card borders */
  --ks-page:     #FFFFFF;   /* page background */
  --ks-surface:  #FFFFFF;   /* cards, inputs, tables */
  --ks-bone:     #F0EEEA;   /* text ON ink, and row hover / secondary fill */
  --ks-signal:   #EC6100;   /* the cut and the focus ring only */

  --ks-good:     #319751;
  --ks-warning:  #928A07;
  --ks-serious:  #903081;
  --ks-critical: #B3261E;

  --ks-cat-1: #EC6100; --ks-cat-2: #186BC5; --ks-cat-3: #319751;
  --ks-cat-4: #903081; --ks-cat-5: #928A07; --ks-cat-6: #007B9B;
  --ks-cat-d1: #E86518; --ks-cat-d2: #438AE1; --ks-cat-d3: #36A558;
  --ks-cat-d4: #B855A6; --ks-cat-d5: #9D9300; --ks-cat-d6: #0098B7;
  --ks-seq-1: #DEE9F5; --ks-seq-2: #B8CDE4; --ks-seq-3: #88A8C9;
  --ks-seq-4: #557EA8; --ks-seq-5: #2E5072; --ks-seq-6: #142537;

  --ks-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ks-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --ks-1: 4px;  --ks-2: 8px;  --ks-3: 12px; --ks-4: 16px;
  --ks-5: 24px; --ks-6: 32px; --ks-7: 48px; --ks-8: 64px; --ks-9: 96px;

  --ks-radius: 0;
  --ks-rule-major: 3px;
  --ks-rule-minor: 1px;
  --ks-control-h: 36px;
  --ks-row-h: 40px;
  --ks-container: 1280px;
}

/* --- Base --------------------------------------------------------------- */
.ks, .ks-app {
  font-family: var(--ks-font-display);
  color: var(--ks-ink);
  background: var(--ks-page);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ks *, .ks-app * { border-radius: var(--ks-radius); box-shadow: none; }

.ks-display { font-size: 52px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.ks-h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.ks-h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.ks-h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.ks-body { font-size: 15px; line-height: 1.55; }
.ks-small { font-size: 13px; line-height: 1.5; }
.ks-micro {
  font-family: var(--ks-font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ks-graphite);
}
.ks-muted { color: var(--ks-graphite); }

.ks-rule       { height: var(--ks-rule-major); background: var(--ks-ink); border: 0; margin: 0; }
.ks-rule--thin { height: var(--ks-rule-minor); background: var(--ks-ink); }
.ks-hairline   { height: 1px; background: var(--ks-line); }

/* --- Focus. The only interface use of Signal besides the header rule ----- */
.ks a:focus-visible,
.ks button:focus-visible,
.ks input:focus-visible,
.ks select:focus-visible,
.ks textarea:focus-visible,
.ks [tabindex]:focus-visible,
.ks-app a:focus-visible,
.ks-app button:focus-visible,
.ks-app input:focus-visible,
.ks-app select:focus-visible,
.ks-app textarea:focus-visible {
  outline: 2px solid var(--ks-signal);
  outline-offset: 2px;
}

/* --- App header ---------------------------------------------------------
   The rule STARTS at the left edge of the mark. Never before it.
   All values derive from --ks-mark. Never a strikethrough.
   Inverted: set --ks-surface to var(--ks-ink) and --ks-fg to var(--ks-bone).
   ------------------------------------------------------------------------ */
.ks-header {
  --ks-mark: 36px;
  --ks-pad-x: 24px;
  --ks-surface: var(--ks-page);
  --ks-fg: var(--ks-ink);
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ks-surface);
  padding: 18px var(--ks-pad-x);
}
.ks-header__rule {
  position: absolute;
  left: var(--ks-pad-x); right: 0; top: 50%;
  height: calc(var(--ks-mark) * 0.07);
  background: var(--ks-signal);
  transform: translateY(-50%);
}
.ks-header__mark { position: relative; background: var(--ks-surface); display: flex; align-items: center; }
.ks-header__mark svg { display: block; width: var(--ks-mark); height: var(--ks-mark); color: var(--ks-fg); }
.ks-header__gap  { width: calc(var(--ks-mark) * 0.14); flex-shrink: 0; }
.ks-header__name {
  position: relative;
  background: var(--ks-surface);
  padding: 0 calc(var(--ks-mark) * 0.24);
  font-size: calc(var(--ks-mark) * 0.6);
  font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  text-transform: uppercase; white-space: nowrap; color: var(--ks-fg);
}
.ks-header__spacer { flex-grow: 1; }
.ks-header__nav {
  position: relative; background: var(--ks-surface);
  padding-left: calc(var(--ks-mark) * 0.24);
  display: flex; gap: 20px; align-items: center;
  font-family: var(--ks-font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-graphite);
}
.ks-header__nav a { color: inherit; text-decoration: none; }
.ks-header__nav a[aria-current] { color: var(--ks-fg); }

/* --- Buttons. A verb and an object. Never Submit, never OK -------------- */
.ks-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: var(--ks-control-h); padding: 0 18px;
  font-family: var(--ks-font-display); font-size: 13px; font-weight: 500;
  letter-spacing: -0.01em; cursor: pointer;
  background: var(--ks-ink); color: var(--ks-bone); border: 1px solid var(--ks-ink);
}
.ks-btn:hover { background: #252A30; border-color: #252A30; }
.ks-btn:active { background: #000; border-color: #000; }
.ks-btn--secondary { background: var(--ks-surface); color: var(--ks-ink); border-color: var(--ks-ink); }
.ks-btn--secondary:hover { background: var(--ks-bone); }
.ks-btn[disabled], .ks-btn--disabled {
  background: var(--ks-bone); color: var(--ks-concrete);
  border-color: var(--ks-line); cursor: not-allowed;
}
.ks-btn svg { width: 16px; height: 16px; }

/* --- Fields. One per row. Label above. Never indent conditional fields --- */
.ks-field { display: flex; flex-direction: column; gap: 6px; }
.ks-field__label {
  font-family: var(--ks-font-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ks-graphite);
}
.ks-field__control {
  background: var(--ks-surface); border: 1px solid var(--ks-ink);
  height: var(--ks-control-h); padding: 0 12px;
  font-family: var(--ks-font-display); font-size: 13px; color: var(--ks-ink);
  width: 100%; box-sizing: border-box;
}
.ks-field__control::placeholder { color: var(--ks-concrete); }
textarea.ks-field__control { height: auto; padding: 9px 12px; line-height: 1.5; }
.ks-field__help { font-size: 12px; color: var(--ks-graphite); }
.ks-field--error .ks-field__control { border-color: var(--ks-critical); }
.ks-field--error .ks-field__help { color: var(--ks-critical); }

/* --- Switch. Never a checkbox ------------------------------------------- */
.ks-switch { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ks-line); }
.ks-switch__track { width: 36px; height: 20px; background: var(--ks-concrete); display: flex; align-items: center; flex-shrink: 0; margin-top: 1px; cursor: pointer; }
.ks-switch__knob { width: 16px; height: 16px; background: var(--ks-page); margin-left: 2px; }
.ks-switch[aria-checked="true"] .ks-switch__track { background: var(--ks-ink); }
.ks-switch[aria-checked="true"] .ks-switch__knob { margin-left: 18px; }
.ks-switch__label { font-size: 13px; font-weight: 500; }
.ks-switch__desc  { font-size: 12px; color: var(--ks-graphite); margin-top: 2px; }

/* --- Table --------------------------------------------------------------- */
.ks-table { width: 100%; border-collapse: collapse; border: 1px solid var(--ks-ink); background: var(--ks-surface); }
.ks-table thead th {
  background: var(--ks-ink); color: var(--ks-bone); text-align: left;
  font-family: var(--ks-font-mono); font-size: 9px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 12px;
}
.ks-table tbody td { padding: 0 12px; height: var(--ks-row-h); font-size: 13px; border-bottom: 1px solid var(--ks-line); }
.ks-table tbody tr:last-child td { border-bottom: 0; }
.ks-table tbody tr:hover td { background: var(--ks-bone); }
.ks-table .ks-num { font-family: var(--ks-font-mono); font-size: 12px; }

/* --- Status. A square plus a word. Colour is never the only signal ------- */
.ks-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.ks-status::before { content: ""; width: 9px; height: 9px; background: var(--ks-concrete); flex-shrink: 0; }
.ks-status--good::before     { background: var(--ks-good); }
.ks-status--warning::before  { background: var(--ks-warning); }
.ks-status--serious::before  { background: var(--ks-serious); }
.ks-status--critical::before { background: var(--ks-critical); }

/* --- Card, stat, empty state, message ------------------------------------ */
.ks-card { background: var(--ks-surface); border: 1px solid var(--ks-line); padding: var(--ks-4); }
.ks-grid-hairline { display: grid; gap: 1px; background: var(--ks-ink); border: 1px solid var(--ks-ink); }
.ks-grid-hairline > * { background: var(--ks-surface); }

.ks-stat__label { font-family: var(--ks-font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ks-graphite); }
.ks-stat__value { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; margin-top: 6px; }

.ks-empty { border: 1px dashed var(--ks-concrete); background: var(--ks-surface); padding: var(--ks-5); display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ks-empty__title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.ks-empty__body { font-size: 13px; color: var(--ks-graphite); max-width: 36ch; }

.ks-message { border: 1px solid var(--ks-line); background: var(--ks-surface); padding: 12px 14px; font-size: 13px; display: flex; gap: 11px; align-items: flex-start; }
.ks-message::before { content: ""; width: 9px; height: 9px; margin-top: 4px; flex-shrink: 0; background: var(--ks-graphite); }
.ks-message--good     { border-color: var(--ks-good); }
.ks-message--good::before { background: var(--ks-good); }
.ks-message--critical { border-color: var(--ks-critical); }
.ks-message--critical::before { background: var(--ks-critical); }

.ks-skeleton { height: 11px; background: var(--ks-line); }

/* --- App shell ------------------------------------------------------------ */
.ks-shell { display: flex; min-height: 100vh; }
.ks-shell__side { width: 186px; background: var(--ks-ink); display: flex; flex-direction: column; padding: 14px 0; flex-shrink: 0; }
.ks-shell__nav a { display: block; padding: 8px 14px; color: var(--ks-concrete); font-size: 13px; text-decoration: none; }
.ks-shell__nav a[aria-current] { background: #1B2026; color: var(--ks-bone); font-weight: 500; }
.ks-shell__main { flex-grow: 1; background: var(--ks-page); display: flex; flex-direction: column; }
.ks-page { padding: var(--ks-5); max-width: var(--ks-container); width: 100%; box-sizing: border-box; }
@media (max-width: 720px) { .ks-page { padding: var(--ks-5) var(--ks-5); } }

/* --- Icons. 20 grid, 1.5 stroke, no fills, never Signal ------------------- */
.ks-icon { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }
.ks-icon--16 { width: 16px; height: 16px; }
.ks-icon--24 { width: 24px; height: 24px; }