/* Vendored verbatim from @fikar/design@0.4.0 by scripts/fetch-design.sh; do not edit. */
/* @fikar/design — Ink component layer. Ported from docs/mockups/fikar.css +
   fikar-components.html (Phase 2 plan §A1); those files now import THIS.
   Requires tokens.css (roles + --fk-* ramp) to be imported first.

   Import order matters: in Tailwind apps, @import this at the TOP of your global
   stylesheet, before the @tailwind directives, so Tailwind utilities win ties by
   source order. Deliberately NOT wrapped in `@layer components` — Tailwind v3's
   PostCSS plugin intercepts that at-rule in any file it processes and errors
   without a matching @tailwind directive.

   Conventions: ramp refs use --fk-*; role refs (--primary, --warning, --destructive…)
   stay unprefixed so .dark overrides apply. Status tints (hsl(var(--warning)/.13))
   MUST stay on role vars. Rules needing an explicit dark variant double-key
   `.dark` and `[data-theme='dark']` like logo.css. */

/* ── utilities ── */
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: hsl(var(--muted-foreground)); }

/* ── buttons ── */
.btn { height: 36px; padding: 0 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; font-family: inherit; display: inline-flex;
  align-items: center; justify-content: center; gap: 7px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--fk-blue700)); }
.btn-ghost { background: hsl(var(--card)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--muted)); }
.btn-secondary { background: hsl(var(--muted)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-secondary:hover { background: hsl(var(--fk-n200)); }
.btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn-link { background: transparent; color: hsl(var(--fk-blue700)); text-decoration: underline; text-underline-offset: 2px; padding: 0 4px; }
.dark .btn-link, [data-theme='dark'] .btn-link { color: hsl(var(--fk-blue400)); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.iconbtn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid hsl(var(--border));
  border-radius: var(--r-sm); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); cursor: pointer; transition: .15s var(--ease); }
.iconbtn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.iconbtn svg { width: 17px; height: 17px; }

/* ── inputs ── */
.field { display: block; }
.field label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; }
.inp { width: 100%; height: 38px; padding: 0 12px; border: 1px solid hsl(var(--input)); border-radius: var(--r-sm); background: hsl(var(--card));
  color: inherit; font-size: 14px; font-family: inherit; outline: none; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.inp::placeholder { color: hsl(var(--fk-n400)); }
.inp:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .18); }
.hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 6px; }

/* ── card ── */
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--r-md); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid hsl(var(--border)); }
.panel-head h2 { font-size: 15px; font-weight: 600; }
.count { font-size: 12px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding: 2px 8px; border-radius: 999px; }

/* ── badges + pills ── */
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 5px; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
/* theme-neutral: light resolves to blue700-on-blue50, dark to the .dark accent pair */
.b-decision { color: hsl(var(--accent-foreground)); background: hsl(var(--accent)); }
.b-risk { color: hsl(var(--warning)); background: hsl(var(--warning) / .13); }
.b-action { color: hsl(var(--success)); background: hsl(var(--success) / .13); }
.b-incident { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .12); }
.pill { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.p-open { color: hsl(var(--warning)); background: hsl(var(--warning) / .13); }
.p-acted, .p-active { color: hsl(var(--success)); background: hsl(var(--success) / .13); }
.p-tracked, .p-pending { color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }

/* ── avatar ── */
.avatar { width: 28px; height: 28px; border-radius: 999px; background: hsl(var(--fk-blue600)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.av { width: 24px; height: 24px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--fk-n600)); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.dark .av, [data-theme='dark'] .av { color: hsl(var(--fk-n300)); }

/* ── switch ── */
.switch { width: 40px; height: 23px; border-radius: 999px; background: hsl(var(--fk-n300)); position: relative; cursor: pointer; border: 0; flex: 0 0 auto; transition: background-color var(--fast) var(--ease); }
.switch.on { background: hsl(var(--primary)); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 999px; background: #fff; transition: left var(--fast) var(--ease); }
.switch.on::after { left: 19px; }

/* ── table (opt-in: class-scoped so it never restyles a host app's tables) ── */
.fk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fk-table thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 11px 18px; border-bottom: 1px solid hsl(var(--border)); }
.fk-table thead th.num, .fk-table td.num { text-align: right; }
.fk-table tbody td { padding: 13px 18px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.fk-table tbody tr:last-child td { border-bottom: 0; }
.fk-table tbody tr { transition: background-color var(--fast) var(--ease); }
.fk-table tbody tr:hover { background: hsl(var(--muted) / .5); }
.who { display: flex; align-items: center; gap: 8px; }

/* ── app shell: sidebar family ── */
.shell { display: grid; grid-template-columns: 248px 1fr; height: 100vh; }
.sidebar { background: hsl(var(--card)); border-right: 1px solid hsl(var(--border)); display: flex; flex-direction: column; padding: 20px 14px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand .word { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.brand img { height: 18px; width: auto; display: block; }
nav.side { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); color: hsl(var(--muted-foreground));
  font-size: 14px; font-weight: 500; cursor: pointer; border: 0; background: none; font-family: inherit; text-align: left; width: 100%; text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.nav-item:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; border-top: 1px solid hsl(var(--border)); }
.side-foot .meta b { font-size: 13px; font-weight: 600; }
.side-foot .meta span { font-size: 11px; color: hsl(var(--muted-foreground)); }
.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 18px 28px; border-bottom: 1px solid hsl(var(--border)); }
.topbar h1 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.topbar .sub { font-size: 13px; color: hsl(var(--muted-foreground)); }
.grow { margin-left: auto; }
.content { padding: 24px 28px; overflow: auto; }
.search { position: relative; width: 280px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }
.search .inp { padding-left: 34px; height: 36px; }

/* ── app shell: responsive (KAN-292) ──
   The shell owns its own collapse. Below 1024px the sidebar becomes an
   off-canvas drawer, opened by toggling .nav-open on .shell (behaviour is
   the host's: click, Escape, scrim click, focus return), and .shell-topbar
   is a sticky bar with the menu button, the brand and the right-hand
   cluster (launcher, avatar). Above 1024px the sidebar shows as before and
   the top bar keeps only the cluster. ── */
.shell-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.shell-topbar .brand { padding: 0; }
.shell-topbar .cluster { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.shell-menu { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm);
  background: none; color: hsl(var(--muted-foreground)); cursor: pointer; }
.shell-menu:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.shell-menu svg { width: 20px; height: 20px; }
.shell-scrim { display: none; position: fixed; inset: 0; z-index: 40; background: hsl(var(--foreground) / .35); }
.shell-close { display: none; }
@media (min-width: 1024px) {
  .shell-topbar .shell-menu, .shell-topbar .brand { display: none; }
  .shell.with-topbar { grid-template-rows: auto 1fr; }
  .shell.with-topbar .sidebar { grid-row: 1 / 3; }
  .shell.with-topbar .shell-topbar { grid-column: 2; }
}
@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; min-height: 100dvh; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(280px, 85vw); border-right: 1px solid hsl(var(--border));
    transform: translateX(-100%); transition: transform var(--fast) var(--ease); overflow-y: auto; }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-md); }
  .shell.nav-open .shell-scrim { display: block; }
  .shell-close { display: inline-flex; margin-left: auto; }
  .main { overflow: visible; }
  .content { padding: 16px; }
  .topbar { padding: 14px 16px; }
  nav.side { flex-direction: column; }
}

/* ── app shell: top app bar ── */
.appbar { display: flex; align-items: center; gap: 24px; height: 58px; padding: 0 28px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.appbar nav { display: flex; gap: 4px; margin-left: 8px; }
.appbar nav a { padding: 7px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); text-decoration: none; }
.appbar nav a.active { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* ── app launcher (KAN-285): the grid button + panel every app renders ──
   Markup and behaviour live in the host (see README "App launcher recipe");
   this layer only styles it, so React apps can wrap their own popover and
   plain-JS hosts can toggle .open. Hidden-not-disabled: an app the person
   cannot use is simply not in the list. ── */
.launcher { position: relative; display: inline-flex; }
.launcher-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0;
  border-radius: var(--r-sm); background: none; color: hsl(var(--muted-foreground)); cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.launcher-btn:hover, .launcher-btn[aria-expanded="true"] { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.launcher-btn svg { width: 18px; height: 18px; }
.launcher-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 260px; padding: 6px;
  border: 1px solid hsl(var(--border)); border-radius: var(--r-md); background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  box-shadow: var(--shadow-md); }
.launcher:not(.open) > .launcher-panel { display: none; }
.launcher-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm);
  color: hsl(var(--foreground)); text-decoration: none; font-size: 14px; font-weight: 500; }
.launcher-item:hover, .launcher-item:focus-visible { background: hsl(var(--muted)); outline: none; }
.launcher-item.current { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.launcher-item .hint { margin: 0; font-size: 12px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.launcher-item.current .hint { color: inherit; opacity: .8; }

/* ── metrics row ── */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.metric { padding: 16px 18px; }
.metric .label { font-size: 12px; color: hsl(var(--muted-foreground)); font-weight: 500; }
.metric .val { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.delta { font-size: 12px; font-weight: 500; margin-top: 4px; }
.delta.up { color: hsl(var(--success)); }
.delta.down { color: hsl(var(--destructive)); }
.delta.flat { color: hsl(var(--muted-foreground)); }

/* ── centered layouts ── */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.page-h { margin-bottom: 18px; }
.page-h h2 { font-size: 16px; font-weight: 600; }
.page-h p { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 2px; }

/* ── empty state: the mark as a quiet illustration + two-beat voice ── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 44px 24px; }
.empty .em-mark { width: 60px; color: hsl(var(--muted-foreground)); opacity: .55; margin-bottom: 10px; line-height: 0; }
.empty .em-mark svg { width: 100%; height: auto; }
.empty h3 { font-size: 16px; font-weight: 600; }
.empty p { font-size: 14px; color: hsl(var(--muted-foreground)); max-width: 340px; line-height: 1.5; }
.empty .btn { margin-top: 14px; }

/* ── brand loader: the C draws in, the dots cascade out, then it reverses
   ("…thinking", ping-pong). Needs the INLINE SVG from brand/fikar-loader.svg —
   an <img> can't be animated by these rules. currentColor, defaults to primary. ── */
.fikar-loader { display: inline-block; width: 64px; line-height: 0; color: hsl(var(--primary)); }
.fikar-loader.xs { width: 18px; }
.fikar-loader.sm { width: 26px; }
.fikar-loader.lg { width: 92px; }
.btn .fikar-loader { color: inherit; }
.fikar-loader svg { width: 100%; height: auto; overflow: visible; }
/* arc easing is a sanctioned brand-motion exception (not --ease): the drawn-in signature */
.fikar-loader .fkl-arc { stroke-dasharray: 100; animation: fkl-draw 1.54s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
.fikar-loader .fkl-d { animation: fkl-pop1 1.54s cubic-bezier(.2, 0, 0, 1) infinite alternate; }
.fikar-loader .fkl-d2 { animation: fkl-pop2 1.54s cubic-bezier(.2, 0, 0, 1) infinite alternate; }
.fikar-loader .fkl-d3 { animation: fkl-pop3 1.54s cubic-bezier(.2, 0, 0, 1) infinite alternate; }
@keyframes fkl-draw { 0% { stroke-dashoffset: 100; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes fkl-pop1 { 0%, 45% { r: 0; opacity: 0; } 60%, 100% { r: 82px; opacity: 1; } }
@keyframes fkl-pop2 { 0%, 60% { r: 0; opacity: 0; } 75%, 100% { r: 69px; opacity: 1; } }
@keyframes fkl-pop3 { 0%, 82% { r: 0; opacity: 0; } 96%, 100% { r: 61px; opacity: 1; } }

/* full-screen brand splash — fades out via CSS so it can never block the page */
.fikar-splash { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: hsl(var(--background)); animation: fkl-splashout .5s var(--ease) 1.3s forwards; }
.fikar-splash .lbl { font-size: 13px; color: hsl(var(--muted-foreground)); letter-spacing: .01em; }
@keyframes fkl-splashout { to { opacity: 0; visibility: hidden; } }

/* scoped reduced-motion: the loader freezes to the fully drawn state */
@media (prefers-reduced-motion: reduce) {
  .fikar-loader .fkl-arc, .fikar-loader .fkl-d, .fikar-loader .fkl-d2, .fikar-loader .fkl-d3 { animation: none; }
  .fikar-loader .fkl-arc { stroke-dashoffset: 0; }
  .fikar-splash { animation-delay: .3s; }
}