/* Kapable design language 1.8.0: tokens.
   Source: kv2-launchpad static/next/next.css after D30 (the /next desktop).
   Every custom property name and value below is copied verbatim from that file.
   Only the dark-theme selectors differ: /next keys its own theme on data-kd-theme,
   apps key on data-theme. check-drift.py proves this file and next.css agree.

   Do not change a value here first. Change next.css, then copy it here with
   check-drift.py green (DESIGN.md, "How to change the language").

   The four --accent tokens hold a default (#ab4725). Every app must replace them
   with the org's colour at runtime, in both themes (DESIGN.md, "The org accent"). */

:root {
  --host-top: 0px;
  --host-bottom: 0px;
  --font-sans: 'InterK', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --menubar-h: 36px;
  --dock-h: 74px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --accent: #ab4725;
  --accent-text: #ab4725;
  --accent-soft: rgb(171 71 37 / 0.12);
  --accent-wash: rgb(171 71 37 / 0.12);
  --accent-ring: var(--accent-text);
  --accent-ring-desk: color-mix(in srgb, var(--accent-text) 8%, #000);

  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --hover: rgb(20 24 32 / 0.06);
  --press: rgb(20 24 32 / 0.1);
  --field: rgb(20 24 32 / 0.05);
  --chrome: rgb(250 251 252 / 0.8);
  --w-bg: #ffffff;
  --w-line: rgb(255 255 255 / 0.6);
  --line: rgb(18 22 30 / 0.09);
  --line-strong: rgb(18 22 30 / 0.15);
  --text: #16181d;
  --text-2: #4b515c;
  --text-3: #5f6673;
  --ok: #137b43;
  --ok-fill: #126b37;
  --ok-soft: rgb(23 138 76 / 0.12);
  --warn: #a56a07;
  --bad: #bd3737; /* 4.88:1 on --surface-3/--bg, 5.58:1 on --surface; white on it 5.58:1 (Folio finding, D37) */
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #d5d8de;
  --shadow-pop: 0 0 0 1px rgb(18 22 30 / 0.06), 0 12px 32px -8px rgb(12 16 24 / 0.24), 0 4px 10px -4px rgb(12 16 24 / 0.12);
  --shadow-widget: 0 1px 1px rgb(12 16 24 / 0.06), 0 10px 28px -10px rgb(12 16 24 / 0.32);
  --shadow-win: 0 0 0 1px rgb(18 22 30 / 0.1), 0 26px 56px -14px rgb(8 10 16 / 0.42), 0 10px 20px -8px rgb(8 10 16 / 0.2);
  --shadow-win-idle: 0 0 0 1px rgb(18 22 30 / 0.09), 0 12px 30px -12px rgb(8 10 16 / 0.3);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.35) inset, 0 18px 40px -12px rgb(8 10 16 / 0.4);
  --label: #ffffff;
  --label-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 8px rgb(0 0 0 / 0.32);
  --scroll-thumb: color-mix(in srgb, var(--text) 36%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--text) 52%, transparent);
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* Scrollbars: a transparent track and a quiet text-colour thumb in both themes.
   Firefox and Chromium read scrollbar-color; Safari paints the pseudo-elements. */
*:not(:root):not(body):hover {
  scrollbar-color: var(--scroll-thumb-hover) transparent;
}
*::-webkit-scrollbar {
  background: transparent;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
/* The square where two scrollbars meet is opaque white by default (D56). */
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark: follows the system unless the page sets data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
    --accent-ring-desk: var(--accent-ring);
    --bg: #0e0f12;
    --surface: #17181c;
    --surface-2: #1c1d22;
    --surface-3: #25272d;
    --hover: rgb(255 255 255 / 0.07);
    --press: rgb(255 255 255 / 0.11);
    --field: rgb(255 255 255 / 0.06);
    --chrome: rgb(24 25 30 / 0.76);
    --w-bg: #1a1b20;
    --w-line: rgb(255 255 255 / 0.07);
    --line: rgb(255 255 255 / 0.08);
    --line-strong: rgb(255 255 255 / 0.14);
    --text: #eceef2;
    --text-2: #b4bac4;
    --text-3: #969ca8;
    --ok: #4cc488;
    --ok-fill: #126b37;
    --ok-soft: rgb(76 196 136 / 0.14);
    --warn: #e0a441;
    --bad: #f06a6a;
    --bad-fill: #b52626;
    --neutral-fill: #4b515c;
    --light-idle: #3b3e45;
    --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
    --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
    --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
    --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
    --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
  }
}

/* Dark: chosen explicitly. */
:root[data-theme="dark"] {
  --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
  --accent-ring-desk: var(--accent-ring);
  --bg: #0e0f12;
  --surface: #17181c;
  --surface-2: #1c1d22;
  --surface-3: #25272d;
  --hover: rgb(255 255 255 / 0.07);
  --press: rgb(255 255 255 / 0.11);
  --field: rgb(255 255 255 / 0.06);
  --chrome: rgb(24 25 30 / 0.76);
  --w-bg: #1a1b20;
  --w-line: rgb(255 255 255 / 0.07);
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --text: #eceef2;
  --text-2: #b4bac4;
  --text-3: #969ca8;
  --ok: #4cc488;
  --ok-fill: #126b37;
  --ok-soft: rgb(76 196 136 / 0.14);
  --warn: #e0a441;
  --bad: #f06a6a;
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #3b3e45;
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
  --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
  --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
}

/* Phone: the /next shell's own menu bar and dock grow for touch. */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  :root {
    --menubar-h: 52px;
    --dock-h: 84px;
  }
}

/* Reduced motion: every animation and transition finishes at once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* status.kapable.ai. Loaded after tokens.css (Kapable design language 1.8.0, kapable-ui-assets
   215902a). Everything here is the base page (DESIGN.md section 3), the Document page recipe
   (section 9, D41) and the Uptime strip recipe (design language 1.10.0, D74). No value is new. */

@font-face {
  font-family: 'InterK';
  src: url('/assets/inter-subset.d3b332b.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* The accent (--accent, --accent-text, --accent-soft, --accent-wash) is per site: the Worker serves
   /assets/accent-<site>.<v>.css after this file (SITES in worker/src/index.ts). */

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { color-scheme: dark; } }
:root[data-theme="dark"] body { color-scheme: dark; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); color: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* Document page (1.3.0, D41). */
.ak-page { box-sizing: border-box; max-width: min(720px, 100%); margin: 0 auto; padding: 40px 28px 56px; line-height: 1.6; container-type: inline-size; }
.ak-head { display: grid; gap: 10px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.ak-kind { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.ak-title { margin: 0; font-size: 30px; font-weight: 680; letter-spacing: -0.022em; line-height: 1.2; text-wrap: balance; }
.ak-lede { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.ak-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-3); font-size: 12.5px; }
.ak-page h2 { margin: 30px 0 8px; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.ak-tag { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--neutral-fill); color: #fff; font-size: 11px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.ak-tag.ok { background: var(--ok-fill); }
.ak-tag.bad { background: var(--bad-fill); }
.ak-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ak-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.ak-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.ak-dot.none { background: var(--text-3); box-shadow: 0 0 0 3px var(--field); }
.ak-note { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; }
.ak-note > .ak-dot { transform: translateY(-1px); }
.ak-note p { margin: 0; }
.ak-note strong { color: var(--text); }
.ak-rows { display: grid; margin: 0 0 18px; }
.ak-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ak-row:first-child { border-top: 1px solid var(--line); }
.ak-row strong { font-weight: 600; }
.ak-row .ak-row-sub { grid-column: 1 / -1; color: var(--text-2); font-size: 12.5px; }
.ak-row .ak-row-end { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ak-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.ak-foot p { margin: 0 0 4px; }

/* A service row: name and state on one line, the uptime strip under it. */
.us-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.us-name > span:last-child { min-width: 0; }
.us-about { display: block; color: var(--text-3); font-size: 12.5px; font-weight: 400; }
.us-state { color: var(--text-2); font-size: 12.5px; text-align: right; }
.us-state.bad { color: var(--bad); font-weight: 600; }
.us-state small { display: block; color: var(--text-3); font-size: 12px; font-weight: 400; }

/* Uptime strip (proposed recipe, design language 1.10.0, D74): one bar per day, oldest on the left.
   Built only from status tokens: --ok no downtime, --warn up to 30 minutes down, --bad more,
   --field a day with no data (never green: an unknown day is not a good day, D10/D11d). */
.us-strip { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 6px; }
.us-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 28px; border-radius: 6px; overflow: hidden; }
.us-bars > i { display: block; background: var(--field); }
.us-bars > i.ok { background: var(--ok); }
.us-bars > i.warn { background: var(--warn); }
.us-bars > i.bad { background: var(--bad); }
.us-legend { display: flex; justify-content: space-between; gap: 12px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.us-legend .us-30 { display: none; }

.us-inc { display: grid; gap: 2px; }
.us-inc time { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.us-inc p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }

@container (max-width: 560px) {
  .ak-title { font-size: 26px; }
}
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .ak-page { padding: 28px 16px 40px; }
  /* Phone: the last 30 days, so each bar stays wide enough to see. */
  .us-bars { grid-template-columns: repeat(30, minmax(0, 1fr)); }
  .us-bars > i:nth-child(-n+60) { display: none; }
  .us-legend .us-90 { display: none; }
  .us-legend .us-30 { display: inline; }
}
@media print {
  .us-bars, .ak-dot, .ak-tag { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}