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

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ks-ink:        #111620;   /* text, headings, mark */
  --ks-graphite:   #586274;   /* secondary text, labels */
  --ks-concrete:   #8B95A6;   /* disabled, placeholders */
  --ks-line:       #E2E7EF;   /* hairlines, row dividers, card borders */
  --ks-line-strong:#D2D9E4;   /* input borders, stronger dividers */
  --ks-canvas:     #F5F7FA;   /* page background (cool slate ground) */
  --ks-page:       #F5F7FA;   /* alias - kept for consumers referencing --ks-page */
  --ks-surface:    #FFFFFF;   /* cards, inputs, tables - lift off the canvas */
  --ks-surface-2:  #EDF0F5;   /* row hover, table headers, sunk panels */
  --ks-bone:       #EDF0F5;   /* alias - legacy hover/secondary fill (now cool) */

  --ks-accent:        #3253D9;  /* PRIMARY: actions, active, links, focus */
  --ks-accent-strong: #2A45B8;  /* accent hover / text-on-light */
  --ks-accent-soft:   #E7ECFC;  /* accent fills, selected rows */
  --ks-signal:        #EC6100;  /* ATTENTION only: review, warnings, the cut */
  --ks-signal-soft:   #FCEADD;

  --ks-good:     #1E9E5A;  --ks-good-soft: #E1F3E9;
  --ks-warning:  #B07A12;
  --ks-serious:  #7A3E9C;
  --ks-critical: #D5432F;  --ks-critical-soft: #FBE6E2;

  --ks-cat-1: #3253D9; --ks-cat-2: #EC6100; --ks-cat-3: #1E9E5A;
  --ks-cat-4: #7A3E9C; --ks-cat-5: #0E8F86; --ks-cat-6: #B07A12;
  --ks-cat-d1: #6E8CFF; --ks-cat-d2: #FF7A2E; --ks-cat-d3: #3EB873;
  --ks-cat-d4: #B87FD6; --ks-cat-d5: #37B9AC; --ks-cat-d6: #D6A23A;
  --ks-seq-1: #E7ECFC; --ks-seq-2: #B9C6F0; --ks-seq-3: #8AA0E4;
  --ks-seq-4: #5A78D6; --ks-seq-5: #3253D9; --ks-seq-6: #22347F;

  --ks-font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-font-mono:    'IBM Plex 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: 8px;
  --ks-radius-sm: 6px;
  --ks-radius-lg: 14px;
  --ks-radius-pill: 999px;
  --ks-rule-major: 3px;
  --ks-rule-minor: 1px;
  --ks-control-h: 38px;
  --ks-row-h: 44px;
  --ks-container: 1280px;

  --ks-shadow-sm: 0 1px 2px rgba(17,22,32,.06), 0 1px 1px rgba(17,22,32,.04);
  --ks-shadow-md: 0 1px 3px rgba(17,22,32,.07), 0 10px 24px -14px rgba(17,22,32,.30);
  --ks-shadow-lg: 0 2px 6px rgba(17,22,32,.08), 0 22px 44px -22px rgba(17,22,32,.38);
}

/* --- Base --------------------------------------------------------------- */
.ks, .ks-app {
  font-family: var(--ks-font-body);
  color: var(--ks-ink);
  background: var(--ks-canvas);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ks-display { font-family: var(--ks-font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.ks-h1 { font-family: var(--ks-font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ks-h2 { font-family: var(--ks-font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.ks-h3 { font-family: var(--ks-font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.ks-body { font-size: 15px; line-height: 1.6; }
.ks-small { font-size: 13px; line-height: 1.5; }
.ks-label { font-size: 12px; font-weight: 500; color: var(--ks-graphite); }
.ks-micro {
  font-family: var(--ks-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; 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-line-strong); }
.ks-hairline   { height: 1px; background: var(--ks-line); }

/* --- Focus. Cobalt accent, the primary interface colour ----------------- */
.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-accent);
  outline-offset: 2px;
}

/* --- App header ---------------------------------------------------------
   The rule STARTS at the left edge of the mark. Never before it.
   It stays SIGNAL orange - the retained identity cut - even though cobalt now
   leads the UI. Inverted: set --ks-surface to var(--ks-ink), --ks-fg to bone.
   ------------------------------------------------------------------------ */
.ks-header {
  --ks-mark: 36px;
  --ks-pad-x: 24px;
  --ks-surface-h: var(--ks-canvas);
  --ks-fg: var(--ks-ink);
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ks-surface-h);
  padding: 16px 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-h); 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-h);
  padding: 0 calc(var(--ks-mark) * 0.24);
  font-family: var(--ks-font-display);
  font-size: calc(var(--ks-mark) * 0.5);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  white-space: nowrap; color: var(--ks-fg);
}
.ks-header__spacer { flex-grow: 1; }
.ks-header__nav {
  position: relative; background: var(--ks-surface-h);
  padding-left: calc(var(--ks-mark) * 0.24);
  display: flex; gap: 20px; align-items: center;
  font-size: 13px; font-weight: 500; color: var(--ks-graphite);
}
.ks-header__nav a { color: inherit; text-decoration: none; }
.ks-header__nav a[aria-current] { color: var(--ks-accent); }

/* --- Buttons. A verb and an object. Primary is cobalt ------------------- */
.ks-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: var(--ks-control-h); padding: 0 16px;
  font-family: var(--ks-font-body); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; cursor: pointer; border-radius: var(--ks-radius);
  background: var(--ks-accent); color: #fff; border: 1px solid var(--ks-accent);
  box-shadow: var(--ks-shadow-sm);
}
.ks-btn:hover { background: var(--ks-accent-strong); border-color: var(--ks-accent-strong); }
.ks-btn:active { transform: translateY(0.5px); }
.ks-btn--secondary { background: var(--ks-surface); color: var(--ks-ink); border-color: var(--ks-line-strong); box-shadow: var(--ks-shadow-sm); }
.ks-btn--secondary:hover { background: var(--ks-surface-2); }
.ks-btn[disabled], .ks-btn--disabled {
  background: var(--ks-surface-2); color: var(--ks-concrete);
  border-color: var(--ks-line); cursor: not-allowed; box-shadow: none;
}
.ks-btn svg { width: 16px; height: 16px; }

/* --- Fields. One per row. Label above ----------------------------------- */
.ks-field { display: flex; flex-direction: column; gap: 6px; }
.ks-field__label {
  font-size: 12px; font-weight: 500; color: var(--ks-graphite);
}
.ks-field__control {
  background: var(--ks-surface); border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius-sm);
  height: var(--ks-control-h); padding: 0 12px;
  font-family: var(--ks-font-body); font-size: 14px; color: var(--ks-ink);
  width: 100%; box-sizing: border-box;
}
.ks-field__control::placeholder { color: var(--ks-concrete); }
.ks-field__control:focus-visible { border-color: var(--ks-accent); }
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 ------------------------------------------------------------- */
.ks-switch { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ks-line); }
.ks-switch__track { width: 38px; height: 22px; background: var(--ks-concrete); border-radius: var(--ks-radius-pill); display: flex; align-items: center; flex-shrink: 0; margin-top: 1px; cursor: pointer; transition: background .15s; }
.ks-switch__knob { width: 18px; height: 18px; background: #fff; border-radius: 50%; margin-left: 2px; box-shadow: var(--ks-shadow-sm); transition: margin .15s; }
.ks-switch[aria-checked="true"] .ks-switch__track { background: var(--ks-accent); }
.ks-switch[aria-checked="true"] .ks-switch__knob { margin-left: 18px; }
.ks-switch__label { font-size: 14px; font-weight: 500; }
.ks-switch__desc  { font-size: 12px; color: var(--ks-graphite); margin-top: 2px; }

/* --- Table. Readable headers, roomy rows, elevation --------------------- */
.ks-table { width: 100%; border-collapse: collapse; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); overflow: hidden; background: var(--ks-surface); box-shadow: var(--ks-shadow-sm); }
.ks-table thead th {
  background: var(--ks-surface-2); color: var(--ks-graphite); text-align: left;
  font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 11px 14px;
  border-bottom: 1px solid var(--ks-line);
}
.ks-table tbody td { padding: 0 14px; height: var(--ks-row-h); font-size: 14px; 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-surface-2); }
.ks-table .ks-num { font-family: var(--ks-font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* --- Status. A dot 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: 8px; height: 8px; border-radius: 50%; 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); }

/* --- Badge. Soft fill, pill --------------------------------------------- */
.ks-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--ks-radius-pill); background: var(--ks-surface-2); color: var(--ks-graphite); }
.ks-badge--accent   { background: var(--ks-accent-soft); color: var(--ks-accent-strong); }
.ks-badge--attention{ background: var(--ks-signal-soft); color: var(--ks-signal); }
.ks-badge--good     { background: var(--ks-good-soft); color: var(--ks-good); }
.ks-badge--critical { background: var(--ks-critical-soft); color: var(--ks-critical); }

/* --- Card, stat, empty state, message ----------------------------------- */
.ks-card { background: var(--ks-surface); border: 1px solid var(--ks-line); border-radius: var(--ks-radius); padding: var(--ks-5); box-shadow: var(--ks-shadow-sm); }
.ks-card--raised { box-shadow: var(--ks-shadow-md); }
.ks-grid-hairline { display: grid; gap: 1px; background: var(--ks-line); border: 1px solid var(--ks-line); border-radius: var(--ks-radius); overflow: hidden; }
.ks-grid-hairline > * { background: var(--ks-surface); }

.ks-stat__label { font-size: 12px; font-weight: 500; color: var(--ks-graphite); }
.ks-stat__value { font-family: var(--ks-font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }

.ks-empty { border: 1px dashed var(--ks-line-strong); background: var(--ks-surface); border-radius: var(--ks-radius); padding: var(--ks-5); display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ks-empty__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ks-empty__body { font-size: 13px; color: var(--ks-graphite); max-width: 40ch; }

.ks-message { border: 1px solid var(--ks-line); background: var(--ks-surface); border-radius: var(--ks-radius); padding: 12px 14px; font-size: 13px; display: flex; gap: 11px; align-items: flex-start; box-shadow: var(--ks-shadow-sm); }
.ks-message::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; 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; border-radius: var(--ks-radius-sm); background: var(--ks-surface-2); }

/* --- App shell. Light cool sidebar, elevated main ----------------------- */
.ks-shell { display: flex; min-height: 100vh; background: var(--ks-canvas); }
.ks-shell__side { width: 200px; background: var(--ks-surface-2); border-right: 1px solid var(--ks-line); display: flex; flex-direction: column; padding: 10px 8px; flex-shrink: 0; gap: 2px; }
.ks-shell__nav a { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--ks-radius-sm); color: var(--ks-graphite); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.ks-shell__nav a:hover { color: var(--ks-ink); background: var(--ks-surface); }
.ks-shell__nav a[aria-current] { background: var(--ks-surface); color: var(--ks-ink); font-weight: 600; box-shadow: var(--ks-shadow-sm); }
.ks-shell__main { flex-grow: 1; background: var(--ks-canvas); display: flex; flex-direction: column; }
.ks-page { padding: var(--ks-6); max-width: var(--ks-container); width: 100%; box-sizing: border-box; }
@media (max-width: 720px) { .ks-page { padding: var(--ks-5); } }

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