/* Keystone's stylesheet.
 *
 * Written by hand rather than generated. The TypeScript app painted from
 * Tailwind utility classes, which needs a build step to turn into CSS - and
 * the whole point of this port is an app with no build step, so the classes
 * are named for what they ARE rather than for what they look like, and the
 * looks live here.
 *
 * The colour system is the one the app already had and is worth keeping: a
 * single eleven-step grey ramp, used SEMANTICALLY. The high numbers are
 * backgrounds, the low numbers are text, the middle is borders and muted
 * text. Light mode is the same ramp read backwards, which is why one class on
 * <html> re-themes the entire app and no rule below mentions a theme.
 *
 * --z-500 is the faintest step anything READABLE may use: it is the one that
 * does not move when the theme flips, and it clears 4:1 against both ends.
 * --z-600 and --z-700 sit at 2.6:1 and below in BOTH themes - they are for
 * borders and for decoration like a chevron, never for words.
 *
 * Values are `R G B` triples rather than colours, so a rule can take a
 * fraction of one - `rgb(var(--z-800) / 0.4)` - the way the utility classes
 * used to.
 */

/* ── The ramp ─────────────────────────────────────────────────────────── */

.dark {
  --z-50: 250 250 250;
  --z-100: 244 244 245;
  --z-200: 228 228 231;
  --z-300: 212 212 216;
  --z-400: 161 161 170;
  --z-500: 113 113 122;
  --z-600: 82 82 91;
  --z-700: 63 63 70;
  --z-800: 39 39 42;
  --z-900: 24 24 27;
  --z-950: 9 9 11;

  /* The colours that are not greys, and so cannot be got by reading the ramp
     backwards. On a dark ground the light end of each hue is the readable
     one; the light theme takes the dark end. */
  --accent-ink: var(--accent);
  --good-ink: #34d399;
  --good-soft: #6ee7b7;
  --bad-ink: #fda4af;
  --warn-ink: #fcd34d;
  --violet-ink: #c4b5fd;
  --violet-soft: #ddd6fe;
  --info-ink: #7dd3fc;
  --cyan-ink: #67e8f9;
  color-scheme: dark;
}

.light {
  /* The mirror, with the ends pushed to pure white and near-black. The middle
     step is theme-neutral and stays where it is. */
  --z-50: 9 9 11;
  --z-100: 24 24 27;
  --z-200: 39 39 42;
  --z-300: 63 63 70;
  --z-400: 82 82 91;
  --z-500: 113 113 122;
  --z-600: 161 161 170;
  --z-700: 212 212 216;
  --z-800: 228 228 231;
  --z-900: 244 244 245;
  --z-950: 255 255 255;

  /* `--accent` is set per tile to its family colour, and those were picked to
     sit on black. `var()` inside a custom property resolves where the property
     is USED, so this one mix darkens whichever accent the tile carries. */
  --accent-ink: color-mix(in srgb, var(--accent) 72%, #000);
  --good-ink: #047857;
  --good-soft: #059669;
  --bad-ink: #be123c;
  --warn-ink: #b45309;
  --violet-ink: #6d28d9;
  --violet-soft: #5b21b6;
  --info-ink: #0369a1;
  --cyan-ink: #0e7490;
  color-scheme: light;
}

:root {
  /* The violet scale, named for what each step is FOR rather than by its
     number: the fill on a button or a band, the colour it goes on hover, the
     lighter outline, and the deep one that reads as text on a violet ground.
     Beside it, the fixed greys that do NOT flip with the theme - the
     marketing nav, hero and footer are dark on every page. */
  --accent: #7c3aed;
  --accent-hover: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-deep: #6d28d9;
  --brand: #f2b400;
  --ink-950: #0a0a0a;
  --ink-900: #171717;
  --ink-800: #262626;
  --ink-700: #404040;
  --ink-500: #737373;
  --ink-400: #a3a3a3;
  --ink-300: #d4d4d4;
  --ink-200: #e5e5e5;
  --ink-100: #f5f5f5;

  --font-sans: Manrope, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-brand: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(var(--z-950));
  color: rgb(var(--z-50));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Every app has a scrollbar sometimes and not others, and a page that jumps
   sideways when one appears is a page that feels broken. */
html {
  scrollbar-gutter: stable;
}

/* The canvas is a tool rather than a document: drag-selecting a tile's label
   while trying to move the tile is only ever in the way. Selection is turned
   off globally and turned back on for the things a person types in, and for
   the marketing pages, which ARE documents. */
html {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
  -webkit-user-select: text;
  user-select: text;
}

.ks-marketing,
.ks-marketing * {
  -webkit-user-select: text;
  user-select: text;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
}

/* The spinners on a number field are a hazard on a form full of money: a
   stray scroll over one silently changes the figure. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* The native date picker follows the document's `color-scheme`, which the
   theme class above sets - so the calendar panel matches without any work.
   The icon itself is pulled toward the field's outline in dark mode rather
   than left blazing white. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.55);
}

.ks-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The brand mark ───────────────────────────────────────────────────── */

.ks-brand {
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--brand);
  color: #000;
}

.ks-brand svg {
  height: 20px;
  width: 20px;
}

.ks-brand--sm {
  height: 28px;
  width: 28px;
}

.ks-brand--sm svg {
  height: 16px;
  width: 16px;
}

.ks-wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── The marketing shell ──────────────────────────────────────────────── */

.ks-marketing {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: rgb(var(--z-950));
  color: rgb(var(--z-100));
}

.ks-marketing main {
  flex: 1;
}

.ks-shell {
  margin: 0 auto;
  width: 100%;
  max-width: 1152px;
  padding-left: 20px;
  padding-right: 20px;
}

.ks-shell--narrow {
  max-width: 768px;
}

.ks-shell--reading {
  max-width: 896px;
}

/* The nav and the footer are fixed dark whatever the page below them does. */
.ks-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ink-800);
  background: rgb(10 10 10 / 0.9);
  backdrop-filter: blur(4px);
}

.ks-nav__bar {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.ks-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 18px;
}

.ks-nav__links,
.ks-nav__actions {
  display: none;
  align-items: center;
}

.ks-nav__links {
  gap: 28px;
}

.ks-nav__actions {
  gap: 10px;
}

.ks-nav__link {
  color: var(--ink-300);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.15s;
}

.ks-nav__link:hover {
  color: #fff;
}

.ks-nav__toggle {
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-200);
  cursor: pointer;
  transition: background-color 0.15s;
}

.ks-nav__toggle:hover {
  background: var(--ink-800);
}

.ks-nav__toggle svg {
  height: 24px;
  width: 24px;
}

.ks-nav__panel {
  border-top: 1px solid var(--ink-800);
  background: var(--ink-950);
  padding: 12px 24px 20px;
}

.ks-nav__panel a {
  display: block;
  padding: 12px 0;
  color: var(--ink-200);
  font-size: 17px;
  font-weight: 500;
}

.ks-nav__panel .ks-button {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .ks-nav__links,
  .ks-nav__actions {
    display: flex;
  }

  .ks-nav__toggle,
  .ks-nav__panel {
    display: none;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.ks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 10px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ks-button--primary {
  background: var(--accent);
  color: #fff;
}

.ks-button--primary:hover {
  background: var(--accent-hover);
}

.ks-button--outline {
  border-color: var(--accent-hover);
  background: transparent;
  color: var(--ink-200);
  font-weight: 500;
  padding-left: 16px;
  padding-right: 16px;
}

.ks-button--outline:hover {
  border-color: var(--accent-light);
  color: #fff;
}

.ks-button--onviolet {
  background: #fff;
  color: var(--accent-deep);
  border-radius: var(--radius-lg);
  padding: 16px 36px;
  font-size: 18px;
}

.ks-button--onviolet:hover {
  background: #f5f3ff;
}

.ks-button--wide {
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 16px 32px;
  font-size: 18px;
}

.ks-button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── The hero ─────────────────────────────────────────────────────────── */

.ks-hero {
  overflow: hidden;
  background: #000;
}

.ks-hero__grid {
  margin: 0 auto;
  display: grid;
  max-width: 1152px;
  align-items: center;
  gap: 48px;
  padding: 80px 20px;
}

.ks-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background: var(--accent);
  padding: 4px 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-chip--quiet {
  background: rgb(124 58 237 / 0.15);
  color: var(--violet-ink);
  box-shadow: inset 0 0 0 1px rgb(124 58 237 / 0.3);
  font-size: 12px;
}

.ks-hero h1 {
  margin-top: 20px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.ks-hero__lede {
  margin-top: 24px;
  max-width: 36rem;
  color: var(--ink-300);
  font-size: 18px;
  line-height: 1.6;
}

.ks-hero__cta {
  margin-top: 36px;
}

.ks-hero__note {
  margin-top: 16px;
  color: var(--ink-400);
  font-size: 14px;
}

@media (min-width: 640px) {
  .ks-hero h1 {
    font-size: 48px;
  }

  .ks-hero__lede {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .ks-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .ks-hero h1 {
    font-size: 60px;
  }
}

/* ── Sections, headings and cards ─────────────────────────────────────── */

.ks-section {
  padding: 80px 0;
}

.ks-section--ruled {
  border-top: 1px solid rgb(var(--z-700));
  border-bottom: 1px solid rgb(var(--z-700));
}

.ks-section--topruled {
  border-top: 1px solid rgb(var(--z-700));
}

.ks-section--violet {
  background: var(--accent);
}

.ks-section__title {
  text-align: center;
  color: rgb(var(--z-50));
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ks-section__lede {
  margin: 16px auto 0;
  max-width: 42rem;
  text-align: center;
  color: rgb(var(--z-300));
  font-size: 18px;
}

.ks-section__note {
  margin: 12px auto 0;
  max-width: 42rem;
  text-align: center;
  color: rgb(var(--z-400));
  font-size: 14px;
}

.ks-section--violet .ks-section__title,
.ks-section--violet .ks-section__lede {
  color: #fff;
}

@media (min-width: 640px) {
  .ks-section__title {
    font-size: 36px;
  }
}

.ks-grid {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .ks-grid--2,
  .ks-grid--3,
  .ks-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ks-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ks-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ks-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-xl);
  background: rgb(var(--z-900));
  padding: 24px;
  box-shadow: var(--shadow-xs);
}

.ks-card--accented {
  border-left-width: 3px;
}

.ks-card h3 {
  color: rgb(var(--z-50));
  font-size: 20px;
  font-weight: 600;
}

.ks-card p {
  margin-top: 8px;
  flex: 1;
  color: rgb(var(--z-300));
  font-size: 16px;
  line-height: 1.6;
}

.ks-card__image {
  position: relative;
  margin-top: 20px;
  height: 144px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ks-card__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* ── Why Keystone, on the violet band ─────────────────────────────────── */

.ks-points {
  display: grid;
  gap: 32px 40px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .ks-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ks-points h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.ks-points h3::before {
  content: "";
  height: 6px;
  width: 6px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: #fff;
}

.ks-points p {
  margin-top: 6px;
  padding-left: 14px;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
}

/* ── Testimonials ─────────────────────────────────────────────────────── */

.ks-quote blockquote {
  flex: 1;
  color: rgb(var(--z-300));
  font-size: 16px;
  line-height: 1.6;
}

.ks-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.ks-quote img {
  height: 56px;
  width: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: top;
  box-shadow: 0 0 0 2px rgb(var(--z-700));
}

.ks-quote__name {
  display: block;
  color: rgb(var(--z-50));
  font-size: 16px;
  font-weight: 600;
}

.ks-quote__role {
  display: block;
  color: rgb(var(--z-400));
  font-size: 14px;
}

/* ── The FAQ accordion ────────────────────────────────────────────────── */

.ks-faq {
  margin-top: 40px;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-xl);
  background: rgb(var(--z-900));
  box-shadow: var(--shadow-xs);
}

.ks-faq details {
  padding: 0 24px;
}

.ks-faq details + details {
  border-top: 1px solid rgb(var(--z-700));
}

.ks-faq summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  color: rgb(var(--z-50));
  font-size: 16px;
  font-weight: 600;
}

.ks-faq summary::-webkit-details-marker {
  display: none;
}

.ks-faq summary svg {
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  color: rgb(var(--z-400));
  transition: transform 0.2s;
}

.ks-faq details[open] summary svg {
  transform: rotate(180deg);
}

.ks-faq p {
  padding-bottom: 20px;
  color: rgb(var(--z-300));
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .ks-faq summary {
    font-size: 18px;
  }
}

/* ── The closing call to action ───────────────────────────────────────── */

.ks-cta {
  margin: 0 auto;
  max-width: 768px;
  padding: 96px 20px;
  text-align: center;
}

.ks-cta h2 {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ks-cta p {
  margin: 16px auto 0;
  max-width: 36rem;
  color: #fff;
  font-size: 18px;
}

.ks-cta__actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (min-width: 640px) {
  .ks-cta h2 {
    font-size: 48px;
  }
}

/* ── The footer ───────────────────────────────────────────────────────── */

.ks-footer {
  background: var(--ink-950);
}

.ks-footer__bar {
  margin: 0 auto;
  display: flex;
  max-width: 1152px;
  flex-direction: column;
  gap: 16px;
  padding: 40px 24px;
}

.ks-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-100);
  font-size: 16px;
}

.ks-footer__beta {
  margin-left: 4px;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--ink-400);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  color: var(--ink-400);
  font-size: 14px;
}

.ks-footer__links a {
  transition: color 0.15s;
}

.ks-footer__links a:hover {
  color: var(--ink-200);
}

.ks-footer__fine {
  margin: 0 auto;
  max-width: 1152px;
  padding: 0 24px 40px;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .ks-footer__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── Prose, for the blog ──────────────────────────────────────────────── */

.ks-prose {
  color: rgb(var(--z-300));
  font-size: 17px;
  line-height: 1.75;
}

.ks-prose h2 {
  margin-top: 40px;
  color: rgb(var(--z-50));
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ks-prose h3 {
  margin-top: 28px;
  color: rgb(var(--z-50));
  font-size: 19px;
  font-weight: 600;
}

.ks-prose p,
.ks-prose ul,
.ks-prose ol {
  margin-top: 16px;
}

.ks-prose ul,
.ks-prose ol {
  padding-left: 24px;
}

.ks-prose li + li {
  margin-top: 8px;
}

.ks-prose strong {
  color: rgb(var(--z-100));
}

.ks-prose a {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ── The auth screens ─────────────────────────────────────────────────── */
/*
 * Painted from the RAMP, not from fixed greys. The shell around these pins
 * the light ramp, so `--z-900` here is near-white and the card reads as a
 * pale panel on a white page - which is what it is. The one place fixed
 * colours are right is the two status panels: a green confirmation and a red
 * error mean the same thing in either theme.
 */

.ks-auth__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(var(--z-50));
  font-size: 20px;
}

.ks-auth__card {
  width: 100%;
  max-width: 24rem;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius-xl);
  background: rgb(var(--z-900));
  padding: 32px;
  box-shadow: var(--shadow-xl);
}

.ks-auth__card h1 {
  font-family: var(--font-brand);
  color: rgb(var(--z-100));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ks-auth__card > p {
  margin-top: 8px;
  color: rgb(var(--z-400));
  font-size: 14px;
}

.ks-auth__form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ks-field label {
  display: block;
  color: rgb(var(--z-400));
  font-size: 12px;
  font-weight: 500;
}

.ks-field input {
  margin-top: 4px;
  width: 100%;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-800));
  padding: 8px 12px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.ks-field input:focus {
  border-color: var(--accent-hover);
}

.ks-field__hint {
  margin-top: 4px;
  color: rgb(var(--z-500));
  font-size: 12px;
}

.ks-auth__submit,
.ks-auth__secondary {
  width: 100%;
  border-radius: var(--radius);
  padding: 8px 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.ks-auth__submit {
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.ks-auth__submit:hover:enabled {
  background: var(--accent-hover);
}

.ks-auth__secondary {
  border: 1px solid rgb(var(--z-700));
  background: transparent;
  color: rgb(var(--z-300));
  cursor: pointer;
}

.ks-auth__secondary:hover:enabled {
  background: rgb(var(--z-800));
}

.ks-auth__error {
  color: #fb7185;
  font-size: 14px;
}

.ks-auth__sent {
  margin-top: 24px;
  border: 1px solid #065f46;
  border-radius: var(--radius);
  background: #022c22;
  padding: 12px;
  color: #6ee7b7;
  font-size: 14px;
}

.ks-auth__foot {
  margin-top: 24px;
  color: rgb(var(--z-400));
  font-size: 14px;
}

.ks-auth__foot a {
  color: var(--accent-light);
}

.ks-auth__foot a:hover {
  text-decoration: underline;
}

/* ── Page heads, and the sections the landing page does not use ───────── */

.ks-section--head {
  padding-top: 80px;
  padding-bottom: 40px;
  text-align: center;
}

.ks-section--body {
  padding-bottom: 64px;
}

.ks-section--tinted {
  background: rgb(var(--z-900) / 0.4);
}

.ks-page__title {
  color: rgb(var(--z-50));
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ks-page__title--spaced {
  margin-top: 20px;
}

.ks-section__title--sm {
  font-size: 24px;
}

.ks-subhead {
  color: rgb(var(--z-50));
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ks-subhead__lede {
  margin-top: 12px;
  max-width: 42rem;
  color: rgb(var(--z-300));
  font-size: 16px;
}

.ks-card__title--spaced {
  margin-top: 12px;
}

.ks-chip--sm {
  padding: 4px 10px;
  font-size: 10px;
  align-self: flex-start;
}

.ks-notice {
  margin: 20px auto 0;
  max-width: 36rem;
  border: 1px solid #c4b5fd;
  border-radius: var(--radius-lg);
  background: #ede9fe;
  padding: 10px 16px;
  color: #5b21b6;
  font-size: 14px;
  font-weight: 500;
}

.ks-step {
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .ks-page__title {
    font-size: 48px;
  }

  .ks-subhead,
  .ks-section__title--sm {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .ks-hero__mock {
    margin-top: -24px;
    padding-left: 16px;
    transform: scale(1.32);
    transform-origin: top left;
  }
}

/* ── Pricing ──────────────────────────────────────────────────────────── */

.ks-tiers {
  display: grid;
  align-items: start;
  gap: 24px;
}

@media (min-width: 1024px) {
  .ks-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ks-tier {
  position: relative;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-xl);
  background: rgb(var(--z-900));
  padding: 28px;
  box-shadow: var(--shadow-xs);
}

.ks-tier--popular {
  border: 2px solid var(--accent-hover);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.ks-tier__flag {
  position: absolute;
  top: -12px;
  left: 28px;
}

.ks-tier__name {
  color: rgb(var(--z-50));
  font-size: 20px;
  font-weight: 700;
}

.ks-tier__blurb {
  margin-top: 4px;
  color: rgb(var(--z-300));
  font-size: 14px;
  line-height: 1.6;
}

.ks-tier__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 20px;
}

.ks-tier__amount {
  color: rgb(var(--z-50));
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ks-tier__period {
  color: rgb(var(--z-400));
  font-size: 14px;
}

.ks-tier__cta {
  display: block;
  margin-top: 24px;
  border: 2px solid var(--accent-hover);
  border-radius: var(--radius-lg);
  padding: 12px 24px;
  text-align: center;
  color: var(--accent-deep);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s;
}

.ks-tier__cta:hover {
  background: #f5f3ff;
}

.ks-tier__cta--filled {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

.ks-tier__cta--filled:hover {
  background: var(--accent-hover);
}

.ks-tier__features {
  margin: 24px 0 0;
  border-top: 1px solid rgb(var(--z-700));
  padding: 24px 0 0;
  list-style: none;
}

.ks-tier__features li {
  display: flex;
  gap: 10px;
  color: rgb(var(--z-300));
  font-size: 16px;
  line-height: 1.6;
}

.ks-tier__features li + li {
  margin-top: 10px;
}

.ks-tier__features svg {
  margin-top: 2px;
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  color: var(--accent-hover);
}

/* ── The blog ─────────────────────────────────────────────────────────── */

.ks-posts {
  display: grid;
  gap: 24px;
}

@media (min-width: 640px) {
  .ks-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ks-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-xl);
  background: rgb(var(--z-900));
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s;
}

.ks-post:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.ks-post__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgb(var(--z-800));
}

.ks-post__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.ks-post:hover .ks-post__image img {
  transform: scale(1.03);
}

.ks-post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

.ks-post__audience {
  color: #7c3aed;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-post__body h2 {
  margin-top: 8px;
  color: rgb(var(--z-50));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ks-post__body p {
  margin-top: 8px;
  flex: 1;
  color: rgb(var(--z-300));
  font-size: 16px;
  line-height: 1.6;
}

.ks-post__meta {
  margin-top: 16px;
  color: rgb(var(--z-400));
  font-size: 13px;
}

.ks-article {
  margin: 0 auto;
  max-width: 768px;
  padding: 64px 20px;
}

.ks-article__back {
  color: #7c3aed;
  font-size: 14px;
  font-weight: 500;
}

.ks-article__back:hover {
  color: var(--accent-hover);
}

.ks-article__audience {
  display: block;
  margin-top: 32px;
}

.ks-article__title {
  margin-top: 8px;
  color: rgb(var(--z-50));
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.ks-article__meta {
  margin-top: 12px;
  color: rgb(var(--z-400));
  font-size: 14px;
}

.ks-article__image {
  margin-top: 32px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: rgb(var(--z-800));
}

.ks-article__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ks-article__body {
  margin-top: 32px;
}

.ks-article__body p {
  color: rgb(var(--z-300));
  font-size: 18px;
  line-height: 1.7;
}

.ks-article__body p + p {
  margin-top: 20px;
}

.ks-article__cta {
  margin-top: 48px;
  border-radius: var(--radius-xl);
  background: var(--accent);
  padding: 36px 24px;
  text-align: center;
  color: #fff;
}

.ks-article__cta-title {
  font-size: 20px;
  font-weight: 700;
}

.ks-article__cta p + p {
  margin-top: 4px;
}

.ks-article__cta-button {
  margin-top: 20px;
  padding: 12px 28px;
  font-size: 16px;
}

@media (min-width: 640px) {
  .ks-article__title {
    font-size: 36px;
  }
}

/* ── The budget page's video ──────────────────────────────────────────── */

.ks-video {
  padding-bottom: 24px;
}

.ks-video__frame {
  overflow: hidden;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-2xl);
  background: #000;
  box-shadow: var(--shadow-xl);
}

.ks-video__frame video {
  display: block;
  height: auto;
  width: 100%;
}

.ks-video__caption {
  margin-top: 12px;
  text-align: center;
  color: rgb(var(--z-500));
  font-size: 14px;
}

.ks-cta--tight {
  padding-top: 80px;
  padding-bottom: 80px;
}

.ks-cta__actions--pair {
  flex-wrap: wrap;
  gap: 16px;
}

.ks-button--onviolet-alt {
  border-radius: var(--radius-lg);
  background: var(--accent-deep);
  padding: 16px 36px;
  color: #fff;
  font-size: 18px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}

.ks-button--onviolet-alt:hover {
  background: #5b21b6;
}

.ks-cta__fine {
  margin: 32px auto 0;
  max-width: 36rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 14px;
}

/* ── The auth pages' own shell ────────────────────────────────────────── */

.ks-authpage {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: rgb(var(--z-950));
}

.ks-authpage__head {
  display: flex;
  height: 64px;
  flex-shrink: 0;
  align-items: center;
  border-bottom: 1px solid rgb(var(--z-800));
  padding: 0 16px;
}

.ks-authpage__head a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--z-100));
  font-size: 16px;
  transition: opacity 0.15s;
}

.ks-authpage__head a:hover {
  opacity: 0.8;
}

.ks-authpage__main {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.ks-authpage__foot {
  border-top: 1px solid rgb(var(--z-800));
  padding: 16px;
  text-align: center;
}

.ks-authpage__foot p {
  color: rgb(var(--z-500));
  font-size: 12px;
}

@media (min-width: 640px) {
  .ks-authpage__head,
  .ks-authpage__foot {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* A phone-only heads-up on the auth pages: the canvas is desktop-only, and an
   account made on a phone would otherwise look like a broken product. */
.ks-desktop-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  border: 1px solid #ddd6fe;
  border-radius: var(--radius-lg);
  background: #f5f3ff;
  padding: 20px;
}

.ks-desktop-note__icon {
  display: flex;
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: #ede9fe;
  color: #7c3aed;
}

.ks-desktop-note__icon svg {
  height: 24px;
  width: 24px;
}

.ks-desktop-note__title {
  color: #27272a;
  font-size: 18px;
  font-weight: 600;
}

.ks-desktop-note__body {
  margin-top: 6px;
  color: #52525b;
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .ks-desktop-note {
    display: none;
  }
}

/* ── The reports ──────────────────────────────────────────────────────── */
/*
 * Seven documents that share one look: a heading, a rule under it, and a
 * stack of sections of small dense tables. They are meant to be read closely
 * and printed, so the type is small, the numbers are tabular and lined up on
 * the right, and every section is told not to break across a page.
 */

.ks-panelpage {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: rgb(var(--z-950));
  color: rgb(var(--z-100));
}

.ks-panelpage__head {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgb(var(--z-800));
  padding: 12px 20px;
}

.ks-panelpage__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--z-100));
}

.ks-panelpage__head h1 {
  flex: 1;
  color: rgb(var(--z-200));
  font-size: 16px;
  font-weight: 600;
}

.ks-panelpage__print {
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: transparent;
  padding: 6px 14px;
  color: rgb(var(--z-200));
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ks-panelpage__print:hover {
  background: rgb(var(--z-800));
}

.ks-panelpage__body {
  flex: 1;
  padding: 20px;
}

.ks-reportframe {
  margin: 0 auto;
  max-width: 1000px;
}

.ks-reportpicker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}

.ks-reportpicker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ks-reportpicker span {
  color: rgb(var(--z-400));
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-reportpicker select {
  min-width: 200px;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 7px 10px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 14px;
}

.ks-report {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ks-report__head {
  border-bottom: 1px solid rgb(var(--z-800));
  padding-bottom: 16px;
}

.ks-report__head h1 {
  color: rgb(var(--z-100));
  font-size: 24px;
  font-weight: 600;
}

.ks-report__head p {
  margin-top: 4px;
  color: rgb(var(--z-500));
  font-size: 12px;
}

.ks-report__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.ks-report__section h2 {
  margin-bottom: 12px;
  color: rgb(var(--z-300));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-report__table,
.ks-report__kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ks-report__table thead th {
  border-bottom: 1px solid rgb(var(--z-800));
  padding: 4px 0;
  color: rgb(var(--z-500));
  font-weight: 400;
  text-align: left;
}

.ks-report__table thead th.ks-num,
.ks-report__table td.ks-num,
.ks-report__kv td.ks-num {
  text-align: right;
}

.ks-report__table td,
.ks-report__kv td {
  border-bottom: 1px solid rgb(var(--z-800) / 0.5);
  padding: 4px 0;
  color: rgb(var(--z-200));
  vertical-align: top;
}

/* A gutter between columns. Without one a right-aligned figure ends where the
   next cell's text begins, and "$340,000BDBN binding_lapsing" is not a number
   anybody can read. */
.ks-report__table th + th,
.ks-report__table td + td {
  padding-left: 14px;
}

.ks-report__table tr:last-child td,
.ks-report__kv tr:last-child td {
  border-bottom: 0;
}

.ks-num {
  font-variant-numeric: tabular-nums;
}

.ks-report__label {
  color: rgb(var(--z-400));
}

.ks-report__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ks-report__value--bold {
  color: rgb(var(--z-100));
  font-weight: 600;
}

.ks-report__name {
  color: rgb(var(--z-100));
}

.ks-report__muted {
  color: rgb(var(--z-400));
}

.ks-report__faint {
  color: rgb(var(--z-500));
}

.ks-report__good {
  color: var(--good-ink);
}

.ks-report__warn {
  color: var(--warn-ink);
}

.ks-report__tag {
  color: rgb(var(--z-500));
  font-size: 10px;
}

.ks-report__sub {
  display: block;
  color: rgb(var(--z-500));
  font-size: 10px;
}

.ks-report__note {
  color: rgb(var(--z-500));
  font-size: 10px;
  font-style: italic;
}

.ks-report__aside {
  margin-top: 8px;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-style: italic;
}

.ks-report__empty {
  color: rgb(var(--z-500));
  font-size: 12px;
  font-style: italic;
}

.ks-report__line {
  color: rgb(var(--z-200));
  font-size: 13px;
}

.ks-report__line code {
  border-radius: var(--radius-sm);
  background: rgb(var(--z-800));
  padding: 2px 6px;
  font-family: var(--font-mono);
}

.ks-report__notes {
  margin-top: 4px;
  white-space: pre-wrap;
  color: rgb(var(--z-200));
  font-size: 13px;
}

.ks-report__stack > div + div {
  margin-top: 4px;
}

.ks-report__stack {
  color: rgb(var(--z-200));
  font-size: 13px;
}

.ks-report__list {
  margin: 0;
  padding-left: 20px;
  color: rgb(var(--z-200));
  font-size: 13px;
}

.ks-report__plain {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgb(var(--z-200));
  font-size: 12px;
}

.ks-report__plain li {
  padding: 2px 0;
}

/* A row with a name on the left and a figure on the right, which several
   sections use in place of a two-column table. */
.ks-report__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgb(var(--z-200));
  font-size: 12px;
}

.ks-report__rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgb(var(--z-800) / 0.5);
  padding: 4px 0;
}

.ks-report__rows li:last-child {
  border-bottom: 0;
}

.ks-report__pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
  margin: 0;
  font-size: 12px;
}

.ks-report__pair {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ks-report__pair dt,
.ks-report__pair dd {
  margin: 0;
}

.ks-report__group {
  margin-top: 12px;
}

.ks-report__grouphead {
  color: rgb(var(--z-500));
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-report__unset {
  color: rgb(var(--z-500));
  font-style: italic;
}

.ks-report__net td {
  border-bottom: 0;
  padding-top: 8px;
  color: rgb(var(--z-100));
  font-weight: 600;
}

.ks-report__link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--violet-ink);
  font: inherit;
  cursor: pointer;
  text-underline-offset: 2px;
}

.ks-report__link:hover {
  text-decoration: underline;
}

.ks-report__position {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.ks-report__position .ks-report__kv {
  flex: 1;
  min-width: 260px;
}

.ks-report__diagram {
  display: flex;
  justify-content: center;
}

.ks-badge {
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-badge--reference {
  border-color: rgb(180 83 9 / 0.6);
  background: rgb(120 53 15 / 0.3);
  color: #fde68a;
}

.ks-badge--blood {
  border-color: rgb(190 24 93 / 0.6);
  background: rgb(136 19 55 / 0.3);
  color: #fecdd3;
  font-size: 11px;
}

.ks-badge--donor {
  border-color: rgb(4 120 87 / 0.6);
  background: rgb(6 78 59 / 0.3);
  color: #a7f3d0;
}

.ks-badge--allergy {
  border-color: rgb(180 83 9 / 0.6);
  background: rgb(120 53 15 / 0.3);
  color: #fde68a;
}

/* ── The three drawings ───────────────────────────────────────────────── */

.ks-donut {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ks-donut__empty {
  fill: rgb(var(--z-500));
  font-size: 11px;
}

.ks-donut__caption {
  fill: rgb(var(--z-200));
  font-size: 11px;
  font-weight: 500;
}

.ks-donut__total {
  fill: rgb(var(--z-100));
  font-size: 13px;
  font-weight: 600;
}

.ks-donut__legend {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgb(var(--z-200));
  font-size: 12px;
}

.ks-donut__legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ks-donut__key {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ks-donut__swatch {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 2px;
}

.ks-tree {
  display: block;
  height: auto;
  width: 100%;
}

.ks-tree__root,
.ks-tree__initials {
  fill: rgb(var(--z-100));
  font-size: 9px;
  font-weight: 500;
}

.ks-tree__initials--root {
  font-size: 10px;
  font-weight: 600;
}

.ks-tree__label {
  fill: rgb(var(--z-300));
  font-size: 10px;
}

.ks-tree__relation,
.ks-tree__muted {
  fill: rgb(var(--z-500));
  font-size: 9px;
}

.ks-sankey {
  width: 100%;
}

/* ── Printing ─────────────────────────────────────────────────────────── */
/*
 * Simpler here than in the original, and for a structural reason: there the
 * report was a modal floating over the whole canvas app, so the stylesheet
 * had to hide every other child of <body> and undo the modal's own chrome.
 * Here the report has a page of its own, and printing it means hiding the
 * picker and putting the type on white.
 */

@page {
  margin: 12mm;
}

.ks-print-header {
  display: none;
}

@media print {
  /* The panel sets a dark scheme, which makes the browser paint a black page
     even with every element background forced white. */
  html {
    color-scheme: light !important;
  }

  html,
  body,
  .ks-panelpage,
  .ks-panelpage__body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ks-print-hide {
    display: none !important;
  }

  .ks-print-root {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
  }

  .ks-print-root * {
    background: transparent !important;
    color: #000 !important;
    border-color: #999 !important;
    box-shadow: none !important;
  }

  .ks-print-root .ks-print-header {
    display: block !important;
    margin-bottom: 6mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid #999;
    color: #555 !important;
    font-size: 8pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Keep a section whole where a page break would otherwise land inside it. */
  .ks-report__section,
  .ks-report__head {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .ks-print-root svg text {
    fill: #000 !important;
  }

  .ks-print-root table th,
  .ks-print-root table td {
    border-bottom: 1px solid #ddd !important;
    padding: 3pt 6pt;
  }
}

/* ── The net worth dashboard ──────────────────────────────────────────── */

.ks-panelpage__sub {
  display: block;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-weight: 400;
}

.ks-nw__headline,
.ks-nw__ratios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .ks-nw__headline,
  .ks-nw__ratios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ks-nw__cell {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius-lg);
  background: rgb(var(--z-950) / 0.4);
  padding: 12px 16px;
}

.ks-nw__cell--net {
  border-color: rgb(5 150 105 / 0.4);
}

.ks-nw__caption {
  color: rgb(var(--z-500));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-nw__figure {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ks-nw__figure--assets {
  color: var(--cyan-ink);
}

.ks-nw__figure--debt {
  color: var(--bad-ink);
}

.ks-nw__figure--net {
  color: var(--good-soft);
}

.ks-nw__ratio {
  margin-top: 4px;
  color: rgb(var(--z-100));
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ks-nw__hint {
  margin-top: 4px;
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-nw__panel {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius-lg);
  background: rgb(var(--z-950) / 0.4);
  padding: 12px 16px;
}

.ks-nw__panel h2,
.ks-nw__heading {
  margin-bottom: 8px;
  color: rgb(var(--z-400));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-nw__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .ks-nw__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ks-nw__card {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius-lg);
  background: rgb(var(--z-950) / 0.4);
  padding: 12px 16px;
}

.ks-nw__cardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ks-nw__name {
  color: rgb(var(--z-100));
  font-size: 14px;
  font-weight: 600;
}

.ks-nw__age {
  color: rgb(var(--z-500));
  font-size: 11px;
  font-weight: 400;
}

.ks-nw__subtype {
  color: rgb(var(--z-500));
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-nw__atf {
  color: rgb(var(--z-400));
  text-transform: none;
}

.ks-nw__atf span {
  color: rgb(var(--z-300));
}

.ks-nw__net {
  color: var(--good-soft);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ks-nw__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.ks-nw__row,
.ks-nw__row summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: rgb(var(--z-400));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ks-nw__row summary {
  cursor: pointer;
  list-style: none;
}

.ks-nw__row summary::-webkit-details-marker {
  display: none;
}

.ks-nw__row summary:hover {
  color: rgb(var(--z-200));
}

.ks-nw__caret {
  margin-right: 4px;
  color: rgb(var(--z-500));
}

.ks-nw__row--open[open] .ks-nw__caret {
  display: inline-block;
  transform: rotate(90deg);
}

.ks-nw__count {
  margin-left: 4px;
  color: rgb(var(--z-500));
  font-size: 9px;
}

.ks-nw__neg {
  color: var(--bad-ink);
}

.ks-nw__gross {
  margin-top: 8px;
}

.ks-nw__none {
  margin-top: 8px;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-style: italic;
}

.ks-nw__breakdown {
  margin: 4px 0 0;
  padding: 0 4px 0 12px;
  list-style: none;
}

.ks-nw__breakdown li {
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.ks-nw__breakdown li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ks-nw__breakdown li > div span:first-child {
  color: rgb(var(--z-300));
}

.ks-nw__breakdown li > div span:last-child {
  color: rgb(var(--z-400));
}

.ks-nw__via {
  color: rgb(var(--z-500));
  font-size: 9px;
  font-style: italic;
}

/* ── The estate plan ──────────────────────────────────────────────────── */

.ks-estate__people {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ks-estate__person {
  border-left: 2px solid rgb(var(--z-700));
  padding-left: 12px;
}

.ks-estate__person h3 {
  color: rgb(var(--z-100));
  font-size: 14px;
  font-weight: 600;
}

.ks-estate__age,
.ks-estate__subtype {
  margin-left: 8px;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-weight: 400;
}

.ks-estate__subtype {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-estate__facts {
  margin-top: 8px;
}

.ks-estate__residuary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
}

.ks-estate__uncovered {
  margin-top: 12px;
  border: 1px solid rgb(180 83 9 / 0.4);
  border-radius: var(--radius-sm);
  background: rgb(120 53 15 / 0.1);
  padding: 8px 12px;
  font-size: 12px;
}

.ks-estate__gaps {
  margin-top: 8px;
  color: var(--warn-ink);
  font-size: 11px;
  font-style: italic;
}

.ks-estate__role {
  color: rgb(var(--z-500));
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── The Wizard ───────────────────────────────────────────────────────── */

.ks-wizard {
  margin: 0 auto;
  max-width: 960px;
}

.ks-wizard__step1,
.ks-wizard__step2 {
  margin-bottom: 20px;
  border: 1px solid;
  border-radius: var(--radius);
  padding: 12px 16px;
}

.ks-wizard__step1 {
  border-color: rgb(109 40 217 / 0.4);
  background: rgb(76 29 149 / 0.1);
}

.ks-wizard__step2 {
  border-color: rgb(var(--z-700));
  background: rgb(var(--z-900));
}

/* Dimmed until the snapshot has been copied: the prompts below assume the
   assistant has already seen it, and a prompt sent without it gets an answer
   about nothing. */
.ks-wizard__step2--waiting {
  border-color: rgb(var(--z-800));
  background: rgb(var(--z-900) / 0.5);
  opacity: 0.6;
}

.ks-wizard__stephead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ks-wizard__stephead h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-wizard__step1 h2 {
  color: var(--violet-soft);
}

.ks-wizard__step2 h2 {
  color: rgb(var(--z-200));
}

.ks-wizard__done {
  color: var(--good-soft);
  font-size: 11px;
}

.ks-wizard__hint {
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-wizard__lede {
  margin-bottom: 8px;
  color: rgb(var(--z-300));
  font-size: 13px;
}

.ks-wizard__note {
  margin-top: 8px;
  color: rgb(var(--z-500));
  font-size: 11px;
  line-height: 1.6;
}

.ks-wizard__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ks-wizard__copy {
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: rgb(var(--z-200));
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ks-wizard__copy--exact {
  border-color: var(--accent-hover);
  background: rgb(109 40 217 / 0.3);
}

.ks-wizard__copy--exact:hover {
  background: rgb(109 40 217 / 0.5);
}

.ks-wizard__copy--anon {
  border-color: #f59e0b;
  background: rgb(180 83 9 / 0.2);
}

.ks-wizard__copy--anon:hover {
  background: rgb(180 83 9 / 0.4);
}

.ks-wizard__key {
  margin-top: 12px;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-sm);
  background: rgb(var(--z-900) / 0.6);
  padding: 8px 12px;
}

.ks-wizard__key summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgb(var(--z-200));
  font-size: 12px;
  font-weight: 500;
}

.ks-wizard__keyhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ks-wizard__keyhead button,
.ks-wizard__card button {
  border: 1px solid rgb(var(--z-600));
  border-radius: var(--radius-sm);
  background: rgb(var(--z-800));
  padding: 2px 8px;
  color: rgb(var(--z-200));
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.ks-wizard__keyhead button:hover {
  border-color: rgb(var(--z-400));
}

.ks-wizard__keybody {
  margin-top: 8px;
  max-height: 15rem;
  overflow-y: auto;
  padding-right: 4px;
}

.ks-wizard__keygroup + .ks-wizard__keygroup {
  margin-top: 8px;
}

.ks-wizard__keygroup table {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  font-size: 11px;
}

.ks-wizard__keygroup td {
  border-bottom: 1px solid rgb(var(--z-800) / 0.6);
  padding: 2px 0;
  color: rgb(var(--z-300));
}

.ks-wizard__keygroup tr:last-child td {
  border-bottom: 0;
}

.ks-wizard__arrow {
  padding: 0 12px;
  color: rgb(var(--z-500));
}

.ks-wizard__waiting {
  border: 1px dashed rgb(var(--z-700));
  border-radius: var(--radius-sm);
  padding: 32px 16px;
  text-align: center;
  color: rgb(var(--z-500));
  font-size: 13px;
}

.ks-wizard__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .ks-wizard__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ks-wizard__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius-sm);
  background: rgb(var(--z-900));
  padding: 10px 12px;
  transition: border-color 0.15s;
}

.ks-wizard__card:hover {
  border-color: rgb(var(--z-500));
}

.ks-wizard__card button {
  border-color: rgb(109 40 217 / 0.6);
  background: rgb(76 29 149 / 0.2);
}

.ks-wizard__card button:hover {
  border-color: var(--accent-light);
}

.ks-wizard__cardname {
  color: rgb(var(--z-100));
  font-size: 12px;
  font-weight: 500;
}

.ks-wizard__carddesc {
  margin-top: 4px;
  /* Three lines and then an ellipsis: the descriptions run to a paragraph and
     the grid has to stay scannable. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: rgb(var(--z-400));
  font-size: 12px;
  line-height: 1.4;
}

.ks-wizard__foot {
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-wizard__toast {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgb(4 120 87 / 0.5);
  background: rgb(6 78 59 / 0.9);
  padding: 8px 16px;
  color: #a7f3d0;
  font-size: 12px;
}

/* ── The admin dashboard ──────────────────────────────────────────────── */
/*
 * Pinned light, like the original: a desk to work at rather than a canvas to
 * look at. Everything below paints from the ramp, so "zinc-900" here is the
 * pale panel it looks like on a white page.
 */

.ks-admin {
  min-height: 100vh;
  background: rgb(var(--z-950));
  padding: 32px 24px;
  color: rgb(var(--z-100));
}

.ks-admin__shell {
  margin: 0 auto;
  max-width: 1152px;
}

.ks-admin__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ks-admin__head h1 {
  font-size: 20px;
  font-weight: 600;
}

.ks-admin__head p {
  color: rgb(var(--z-500));
  font-size: 12px;
}

.ks-admin__back {
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  padding: 6px 12px;
  color: rgb(var(--z-300));
  font-size: 14px;
}

.ks-admin__back:hover {
  background: rgb(var(--z-800));
}

.ks-admin__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

@media (min-width: 640px) {
  .ks-admin__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ks-admin__stat,
.ks-admin__chart,
.ks-admin__card,
.ks-admin__item {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius-lg);
  background: rgb(var(--z-900));
}

.ks-admin__stat {
  padding: 16px 20px;
}

.ks-admin__statvalue {
  color: rgb(var(--z-100));
  font-size: 30px;
  font-weight: 600;
}

.ks-admin__statlabel {
  margin-top: 4px;
  color: rgb(var(--z-500));
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-admin__section {
  margin-bottom: 32px;
}

.ks-admin__section h2 {
  margin-bottom: 8px;
  color: rgb(var(--z-300));
  font-size: 14px;
  font-weight: 600;
}

.ks-admin__charts {
  display: grid;
  gap: 12px;
}

@media (min-width: 1024px) {
  .ks-admin__charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ks-admin__chart {
  padding: 16px;
}

.ks-admin__charttitle {
  color: rgb(var(--z-200));
  font-size: 14px;
  font-weight: 500;
}

.ks-admin__chartsub {
  margin-bottom: 12px;
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-admin__bars {
  display: flex;
  height: 128px;
  align-items: flex-end;
  gap: 2px;
}

.ks-admin__barslot {
  display: flex;
  flex: 1;
  height: 100%;
  align-items: flex-end;
}

.ks-admin__bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--accent-hover);
}

.ks-admin__barfoot {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: rgb(var(--z-500));
  font-size: 10px;
}

.ks-admin__hbars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ks-admin__hbar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.ks-admin__hlabel {
  width: 176px;
  flex-shrink: 0;
  overflow: hidden;
  color: rgb(var(--z-400));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-admin__htrack {
  height: 12px;
  flex: 1;
  border-radius: var(--radius-sm);
  background: rgb(var(--z-800));
}

.ks-admin__hfill {
  display: block;
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-hover);
}

.ks-admin__hvalue {
  width: 32px;
  flex-shrink: 0;
  text-align: right;
  color: rgb(var(--z-300));
  font-variant-numeric: tabular-nums;
}

.ks-admin__empty,
.ks-admin__none {
  padding: 24px 16px;
  text-align: center;
  color: rgb(var(--z-500));
  font-size: 13px;
}

.ks-admin__tablewrap {
  overflow-x: auto;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius-lg);
}

.ks-admin__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.ks-admin__table thead {
  background: rgb(var(--z-900));
  color: rgb(var(--z-500));
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-admin__table th,
.ks-admin__table td {
  padding: 8px 12px;
}

.ks-admin__table th {
  font-weight: 500;
}

.ks-admin__table tbody tr {
  border-top: 1px solid rgb(var(--z-800));
}

.ks-admin__table .ks-num {
  text-align: right;
  color: rgb(var(--z-300));
  font-variant-numeric: tabular-nums;
}

.ks-admin__username {
  color: rgb(var(--z-100));
  font-weight: 500;
}

.ks-admin__useremail {
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-admin__usergoal {
  margin-top: 2px;
  max-width: 28rem;
  overflow: hidden;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-admin__muted {
  color: rgb(var(--z-400));
}

.ks-admin__device {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
}

/* Amber for a phone, and not because amber is pretty: that user is stuck on
   the read-only companion and cannot build anything. */
.ks-admin__device--mobile {
  background: #fef3c7;
  color: #92400e;
}

.ks-admin__device--tablet {
  background: #e0f2fe;
  color: #075985;
}

.ks-admin__device--desktop {
  background: #d1fae5;
  color: #065f46;
}

/* ── The feedback inbox ───────────────────────────────────────────────── */

.ks-admin__inboxhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ks-admin__inboxhead h2 {
  margin-bottom: 0;
}

.ks-admin__tabs,
.ks-admin__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ks-admin__filters {
  margin-bottom: 12px;
}

.ks-admin__tabs button,
.ks-admin__filters button {
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 4px 10px;
  color: rgb(var(--z-300));
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.ks-admin__tabs button:hover,
.ks-admin__filters button:hover {
  background: rgb(var(--z-800));
}

.ks-admin__tabs button.is-on {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

.ks-admin__filters button.is-on {
  border-color: var(--accent-hover);
  background: #ede9fe;
  color: #5b21b6;
  font-weight: 500;
}

.ks-admin__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ks-admin__item {
  padding: 12px 16px;
}

.ks-admin__item.is-unread {
  border-color: var(--accent-light);
}

.ks-admin__itemhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}

.ks-admin__unread {
  height: 8px;
  width: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--accent-hover);
}

.ks-admin__badge {
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-admin__badge--bug {
  border-color: rgb(190 18 60 / 0.5);
  color: #be123c;
}

.ks-admin__badge--idea {
  border-color: rgb(180 83 9 / 0.5);
  color: #b45309;
}

.ks-admin__badge--feedback {
  border-color: rgb(3 105 161 / 0.5);
  color: #0369a1;
}

.ks-admin__who {
  color: rgb(var(--z-300));
  font-weight: 500;
}

.ks-admin__faint {
  color: rgb(var(--z-500));
}

.ks-admin__when {
  margin-left: auto;
  color: rgb(var(--z-500));
}

.ks-admin__message {
  white-space: pre-wrap;
  color: rgb(var(--z-200));
  font-size: 13px;
}

.ks-admin__shot {
  display: block;
  margin-top: 8px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.ks-admin__shot img {
  max-height: 12rem;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-sm);
}

.ks-admin__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.ks-admin__actions select,
.ks-admin__actions button {
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-sm);
  background: rgb(var(--z-900));
  padding: 4px 10px;
  color: rgb(var(--z-300));
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.ks-admin__actions select {
  color: rgb(var(--z-200));
}

.ks-admin__actions button:hover {
  background: rgb(var(--z-800));
}

.ks-admin__actions button:disabled,
.ks-admin__actions select:disabled {
  opacity: 0.5;
  cursor: default;
}

.ks-admin__item textarea {
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius-sm);
  background: rgb(var(--z-900));
  padding: 6px 8px;
  color: rgb(var(--z-200));
  font-family: inherit;
  font-size: 12px;
  outline: none;
  resize: vertical;
}

.ks-admin__item textarea:focus {
  border-color: var(--accent-hover);
}

.ks-admin__lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.8);
  padding: 24px;
}

.ks-admin__lightbox img {
  max-height: 100%;
  max-width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xl);
}

/* ── The phone companion ──────────────────────────────────────────────── */
/*
 * Pinned light, so everything below reads from the ramp as a pale surface.
 * Five tabs along the bottom, a scrolling middle, and a top bar carrying the
 * scenario picker: the shape of a phone app rather than of a page.
 */

.ks-m {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: rgb(var(--z-950));
  color: rgb(var(--z-100));
  /* No pinch-zoom: nothing here is a drawing to inspect, and a stray pinch
     while scrolling a list is only ever an accident. */
  touch-action: pan-y;
}

.ks-m__head {
  display: flex;
  height: 56px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-950));
  padding: 0 12px;
}

.ks-m__brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: rgb(var(--z-50));
  font-size: 15px;
}

.ks-m__brand .ks-wordmark {
  display: none;
}

@media (min-width: 380px) {
  .ks-m__brand .ks-wordmark {
    display: inline;
  }
}

.ks-m__scenario {
  min-width: 0;
  max-width: 55%;
}

.ks-m__scenario select {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 6px 8px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.ks-m__scenario select:disabled {
  opacity: 0.7;
}

.ks-m__account {
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  color: rgb(var(--z-200));
}

.ks-m__account svg {
  height: 20px;
  width: 20px;
}

.ks-m__main {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 56px;
}

.ks-m__tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  height: 56px;
  align-items: stretch;
  border-top: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-950));
}

.ks-m__tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgb(var(--z-400));
  font-size: 11px;
}

.ks-m__tab svg {
  height: 20px;
  width: 20px;
}

.ks-m__tab.is-on {
  color: #7c3aed;
  font-weight: 600;
}

/* ── Structure: the list ──────────────────────────────────────────────── */

.ks-m__search {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-950));
  padding: 12px;
}

.ks-m__search svg {
  position: absolute;
  left: 22px;
  top: 50%;
  height: 16px;
  width: 16px;
  transform: translateY(-50%);
  color: rgb(var(--z-500));
  pointer-events: none;
}

.ks-m__search input {
  height: 36px;
  width: 100%;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 0 12px 0 32px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.ks-m__search input:focus {
  border-color: var(--accent-hover);
}

.ks-m__grouphead {
  background: rgb(var(--z-900) / 0.6);
  padding: 6px 16px;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-m__row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgb(var(--z-800) / 0.6);
  padding: 12px 16px;
  text-align: left;
}

.ks-m__row:active {
  background: rgb(var(--z-900));
}

.ks-m__dot {
  height: 10px;
  width: 10px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
}

.ks-m__dot--big {
  height: 12px;
  width: 12px;
}

.ks-m__dot--small {
  height: 8px;
  width: 8px;
}

.ks-m__rowtext {
  min-width: 0;
  flex: 1;
}

.ks-m__rowname,
.ks-m__rowsub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-m__rowname {
  color: rgb(var(--z-100));
  font-size: 14px;
}

.ks-m__rowsub {
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-m__empty {
  padding: 24px;
  color: rgb(var(--z-500));
  font-size: 14px;
}

/* ── Structure: one tile ──────────────────────────────────────────────── */

.ks-m__back {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-950));
  padding: 8px;
}

.ks-m__back a {
  display: flex;
  height: 36px;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius);
  padding: 0 8px;
  color: rgb(var(--z-300));
  font-size: 14px;
}

.ks-m__back svg {
  height: 16px;
  width: 16px;
}

.ks-m__detail {
  padding: 16px;
}

.ks-m__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ks-m__title h1 {
  min-width: 0;
  overflow: hidden;
  color: rgb(var(--z-100));
  font-size: 18px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-m__subtitle {
  margin-top: 2px;
  color: rgb(var(--z-500));
  font-size: 12px;
}

.ks-m__description {
  margin-top: 8px;
  color: rgb(var(--z-400));
  font-size: 12px;
  line-height: 1.6;
}

.ks-m__section {
  margin-top: 20px;
}

.ks-m__sectionhead {
  margin-bottom: 4px;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-m__kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgb(var(--z-800) / 0.6);
  padding: 8px 0;
}

.ks-m__kv:last-child {
  border-bottom: 0;
}

.ks-m__k {
  color: rgb(var(--z-500));
  font-size: 13px;
}

.ks-m__v {
  text-align: right;
  color: rgb(var(--z-100));
  font-size: 13px;
}

.ks-m__linkgroup {
  border-bottom: 1px solid rgb(var(--z-800) / 0.6);
  padding: 8px 0;
}

.ks-m__linkgroup:last-child {
  border-bottom: 0;
}

.ks-m__linklabel {
  color: rgb(var(--z-500));
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-m__tilelink {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: #7c3aed;
  font-size: 14px;
}

.ks-m__tilelink:active {
  opacity: 0.7;
}

.ks-m__notes {
  padding: 4px 0;
  white-space: pre-wrap;
  color: rgb(var(--z-300));
  font-size: 14px;
}

/* ── The empty-canvas screen and the nudge ────────────────────────────── */

.ks-m__hero {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.ks-m__art {
  margin-bottom: 28px;
  width: 100%;
  max-width: 260px;
  color: #7c3aed;
}

.ks-m__art svg {
  height: auto;
  width: 100%;
}

.ks-m__herobrand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: rgb(var(--z-500));
  font-size: 14px;
}

.ks-m__hero h1 {
  max-width: 20ch;
  color: rgb(var(--z-100));
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.ks-m__hero p {
  margin-top: 16px;
  max-width: 34ch;
  color: rgb(var(--z-400));
  font-size: 16px;
  line-height: 1.6;
}

.ks-m__herofoot {
  max-width: 32ch;
  color: rgb(var(--z-500));
  font-size: 13px;
}

.ks-m__copylink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  width: 100%;
  max-width: 20rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--accent);
  padding: 12px 20px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.ks-m__copylink:active {
  background: var(--accent-deep);
}

.ks-m__copylink svg {
  height: 20px;
  width: 20px;
}

.ks-m__copylink--amber {
  margin-top: 0;
  width: auto;
  background: #d97706;
  padding: 8px 16px;
  font-size: 14px;
}

.ks-m__copylink--amber:active {
  background: #b45309;
}

/* The nudge is the one amber thing on the companion, and it is amber for a
   reason: the canvas has tiles but nothing joining them, which is a state the
   user needs to be told about rather than left to notice. */
.ks-m__nudge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #fcd34d;
  background: #fffbeb;
  padding: 12px 16px;
}

.ks-m__nudgeicon {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: #fef3c7;
  color: #b45309;
}

.ks-m__nudgeicon svg {
  height: 16px;
  width: 16px;
}

.ks-m__nudgetitle {
  color: #78350f;
  font-size: 15px;
  font-weight: 600;
}

.ks-m__nudgebody {
  margin-top: 2px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.6;
}

.ks-m__nudgeaction {
  margin-top: 8px;
}

/* ── A panel inside the phone ─────────────────────────────────────────── */

.ks-m__panel {
  padding: 16px;
}

.ks-m__panelhead {
  margin-bottom: 16px;
  color: rgb(var(--z-100));
  font-size: 18px;
  font-weight: 600;
}

.ks-m__picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.ks-m__picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ks-m__picker span {
  color: rgb(var(--z-500));
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-m__picker select {
  width: 100%;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 8px 10px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 14px;
}

/* A report is a wide document on a narrow screen: its tables scroll sideways
   inside their own box rather than making the page do it. */
.ks-m__panel .ks-report__table,
.ks-m__panel .ks-report__kv {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.ks-m__panel .ks-report__pairs {
  grid-template-columns: 1fr;
}

/* ── The account page ─────────────────────────────────────────────────── */

.ks-m__accounthead {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  background: var(--accent);
  padding: 0 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.ks-m__accounthead a {
  display: flex;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.ks-m__accountbody {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 16px;
}

.ks-m__accountbody h2 {
  margin-bottom: 12px;
  color: rgb(var(--z-400));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ks-m__logout {
  border-top: 1px solid rgb(var(--z-800));
  padding-top: 20px;
}

.ks-m__logout button {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  padding: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.ks-m__logout button:hover {
  background: var(--accent-hover);
}

/* ── The two single-record forms ──────────────────────────────────────── */

.ks-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ks-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ks-form__field > span {
  color: rgb(var(--z-400));
  font-size: 12px;
  font-weight: 500;
}

.ks-form__field input,
.ks-form__field textarea {
  width: 100%;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 8px 10px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 14px;
  outline: none;
  resize: vertical;
}

.ks-form__field input:focus,
.ks-form__field textarea:focus {
  border-color: var(--accent-hover);
}

.ks-form__field input::placeholder,
.ks-form__field textarea::placeholder {
  color: rgb(var(--z-500));
}

.ks-form__error {
  border: 1px solid rgb(190 18 60 / 0.5);
  border-radius: var(--radius-sm);
  background: rgb(190 18 60 / 0.1);
  padding: 8px 16px;
  color: #be123c;
  font-size: 12px;
}

.ks-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
}

.ks-form__saved {
  color: #047857;
  font-size: 11px;
}

.ks-form__actions button {
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  padding: 8px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ks-form__actions button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── The canvas ───────────────────────────────────────────────────────────
 *
 * A whole screen with no page scroll: a bar across the top, a palette down
 * the left, and a viewport filling what is left. Everything inside the
 * viewport is positioned in FLOW coordinates - the canvas's own space, the
 * one tile positions are saved in - and one transform on `.ks-canvas__flow`
 * turns those into pixels. Pan and zoom cost one matrix, never a re-layout.
 */

.ks-sprite { display: none; }

.ks-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: rgb(var(--z-950));
  color: rgb(var(--z-100));
}

.ks-app__body { display: flex; flex: 1; min-height: 0; }

.ks-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */

.ks-topbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 24px;
  /* The violet hairline is the only brand colour on the screen and it is the
     first thing the eye lands on. Dropping it cost more than its 3px. */
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-900));
  padding: 0 16px;
  height: 64px;
}

.ks-topbar__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  color: rgb(var(--z-50));
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.ks-topbar__brand svg { width: 40px; height: 40px; }

.ks-topbar__search {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 0 10px;
  /* Grows with the window up to `max-w-sm`, which is what the original does:
     a fixed 260px looks stranded on a wide screen. */
  width: 100%;
  max-width: 384px;
  height: 36px;
  color: rgb(var(--z-500));
}

.ks-topbar__search input {
  border: 0;
  background: none;
  width: 100%;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

/* The hit list hangs below the field rather than making the bar taller. */
.ks-topbar__hits {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 40;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 4px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}

.ks-topbar__hits button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  padding: 6px 8px;
  width: 100%;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ks-topbar__hits button:hover { background: rgb(var(--z-800)); }

.ks-topbar__hitkind {
  color: rgb(var(--z-500));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-topbar__right { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.ks-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: none;
  width: 30px;
  height: 30px;
  color: rgb(var(--z-400));
  cursor: pointer;
}

.ks-iconbtn:hover { background: rgb(var(--z-800)); color: rgb(var(--z-100)); }

/* ── Palette ─────────────────────────────────────────────────────────── */

.ks-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-900));
  padding: 10px 8px;
  width: 232px;
  flex-shrink: 0;
  /* It scrolls: the entity list grows with the canvas, and on a short window
     the last group would otherwise sit below the bottom edge with no way to
     reach it. */
  overflow-y: auto;
  transition: width 0.12s ease;
}

.ks-side.is-narrow { width: 76px; }

.ks-side__toggle {
  align-self: flex-end;
  border: 0;
  border-radius: var(--radius);
  background: none;
  padding: 4px;
  color: rgb(var(--z-500));
  cursor: pointer;
}

.ks-side__group { display: flex; flex-direction: column; gap: 2px; }

.ks-side__heading {
  padding: 0 8px 4px;
  color: rgb(var(--z-500));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-side__item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  padding: 8px;
  width: 100%;
  color: rgb(var(--z-300));
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ks-side__item:hover { background: rgb(var(--z-800)); color: rgb(var(--z-100)); }
.ks-side__item.is-on { background: rgb(var(--z-800)); color: var(--accent-light); }

/* The per-family action strip on a tile's panel: importing and the ledger,
   which belong to the tile in front of you rather than to the whole canvas. */
.ks-panel__strip {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 4px;
  border-bottom: 1px solid rgb(var(--z-800));
  padding: 8px 16px;
}

.ks-panel__act {
  border: 1px solid rgb(var(--z-800));
  border-radius: 6px;
  background: rgb(var(--z-900));
  padding: 4px 10px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ks-panel__act:hover { border-color: rgb(var(--z-500)); background: rgb(var(--z-800)); }

/* Sky, not violet: the original keeps the import action visually distinct
   from the app's own accent so it does not read as the primary action. */
.ks-panel__act--go {
  border-color: #0284c7;
  background: #0284c7;
  color: #fff;
}

.ks-panel__act--go:hover { border-color: #0ea5e9; background: #0ea5e9; }

/* ── The client and account chips ────────────────────────────────────────
 *
 * From `src/components/TopBar.tsx`. Two 36px-high outlined chips: the client
 * whose canvas this is on the left of the search, and the signed-in account
 * on the right. The account chip is the only thing on the right, and it is
 * the way into Settings - which is where sign out lives.
 */

.ks-client {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(var(--z-800));
  border-radius: 6px;
  background: rgb(var(--z-900));
  padding: 0 12px;
  height: 36px;
  cursor: default;
}

.ks-client:hover { background: rgb(var(--z-800)); }
.ks-client__glyph { color: rgb(var(--z-500)); }

.ks-client__text { display: flex; flex-direction: column; line-height: 1.15; }

.ks-client__label {
  color: rgb(var(--z-500));
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-client__name {
  color: rgb(var(--z-50));
  font-size: 13px;
  font-weight: 600;
}

.ks-client__chev { flex-shrink: 0; color: rgb(var(--z-500)); }

.ks-account {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  border: 1px solid rgb(var(--z-800));
  border-radius: 6px;
  background: rgb(var(--z-900));
  padding: 0 8px 0 4px;
  height: 36px;
  color: rgb(var(--z-50));
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ks-account:hover { background: rgb(var(--z-800)); }

.ks-account__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--accent);
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ks-account__name { font-weight: 500; }
.ks-account__chev { flex-shrink: 0; color: rgb(var(--z-500)); }

/* Settings grew two sections when sign out and the phone view moved into it. */
.ks-settings__link,
.ks-settings__signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(var(--z-800));
  border-radius: 6px;
  background: rgb(var(--z-900));
  padding: 0 12px;
  height: 36px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.ks-settings__link:hover,
.ks-settings__signout:hover { background: rgb(var(--z-800)); }

/* ── The rail's three sections ───────────────────────────────────────────
 *
 * Matching `src/components/Sidebar.tsx`: a palette of draggable tile cards
 * at the top, the canvas-wide actions pushed to the bottom, and a utility
 * row under them. The spacer between sections 1 and 2 is what keeps an
 * action's Y position steady whether or not the entity list is long, so
 * collapsing the rail does not move the icons.
 */

.ks-side__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 4px;
}

.ks-side__spacer { flex: 1 1 auto; min-height: 8px; }

/* A tile you drag onto the canvas: accent-tinted badge, name, and what the
   family covers. The description is the half the port dropped, and it is
   what makes seven rows readable rather than seven words. */
.ks-side__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(var(--z-800));
  border-radius: 8px;
  background: rgb(var(--z-900));
  padding: 10px;
  width: 100%;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: grab;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.ks-side__tile:hover {
  border-color: rgb(var(--z-700));
  background: rgb(var(--z-800));
}

.ks-side__tile:active { cursor: grabbing; }
.ks-side__tile.is-on { border-color: var(--accent); background: rgb(var(--z-800)); }

.ks-side__badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  width: 36px;
  height: 36px;
}

.ks-side__tiletext {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.ks-side__tilelabel {
  color: rgb(var(--z-100));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.ks-side__tilehint {
  overflow: hidden;
  color: rgb(var(--z-500));
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-side__chev { flex-shrink: 0; color: rgb(var(--z-700)); }

/* The canvas-wide actions. Fixed 40px rows so an icon sits at the same
   height whether the rail is open or collapsed. */
.ks-side__action {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  padding: 0 10px;
  width: 100%;
  height: 40px;
  color: rgb(var(--z-200));
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ks-side__action:hover { background: rgb(var(--z-800)); color: rgb(var(--z-50)); }

.ks-side__action--primary {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.ks-side__action--primary:hover { background: var(--accent-hover, var(--accent)); color: #fff; }

.ks-side__beta {
  margin-left: auto;
  border-radius: 3px;
  background: #ede9fe;
  padding: 1px 4px;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* The utility row: theme, help, notifications, admin, and Feedback pushed
   to the right. Collapsed, it wraps so the icons stay in one column. */
.ks-side__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 2px;
  padding: 8px 8px 12px;
}

.ks-side__utility.is-narrow { flex-wrap: wrap; justify-content: center; }

.ks-side__util {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: none;
  width: 32px;
  height: 32px;
  color: rgb(var(--z-500));
  cursor: pointer;
}

.ks-side__util:hover { background: rgb(var(--z-800)); color: rgb(var(--z-200)); }

/* Gold, and the only other filled control besides the Wizard. */
.ks-side__feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  border: 0;
  border-radius: 6px;
  background: #f2b400;
  padding: 0 10px;
  height: 32px;
  color: #000;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.ks-side__feedback:hover { background: #e5a800; }
.ks-side__utility.is-narrow .ks-side__feedback { margin-left: 0; padding: 0; width: 32px; justify-content: center; }

/* ── Subtype picker ──────────────────────────────────────────────────── */

.ks-picker {
  position: absolute;
  /* Below the scenario tabs rather than over them: a picker that hides which
     tab you are on is a picker that drops a tile into the wrong canvas. */
  top: 92px;
  left: 244px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--z-800));
  border-radius: 8px;
  background: rgb(var(--z-900));
  width: 340px;
  max-height: calc(100vh - 120px);
  box-shadow: 0 20px 48px rgb(0 0 0 / 0.5);
}

.ks-picker__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid rgb(var(--z-800));
  padding: 12px 14px;
}

.ks-picker__head span { color: rgb(var(--z-500)); font-size: 12px; }

.ks-picker__body { overflow-y: auto; padding: 6px; }

.ks-picker__grouphead {
  padding: 8px 8px 4px;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ks-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  padding: 7px 8px;
  width: 100%;
  color: rgb(var(--z-200));
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: grab;
}

.ks-picker__row:hover { background: rgb(var(--z-800)); }

.ks-picker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ks-picker__icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Scenario tabs ───────────────────────────────────────────────────── */

.ks-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.ks-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-900));
  padding: 0 10px;
  height: 34px;
  flex-shrink: 0;
}

.ks-tabs__tab {
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 6px 12px;
  color: rgb(var(--z-400));
  font-size: 12px;
  text-decoration: none;
}

.ks-tabs__tab.is-on {
  background: rgb(var(--z-950));
  color: rgb(var(--z-100));
  box-shadow: inset 0 -2px 0 var(--accent);
}

.ks-tabs__count { margin-left: auto; color: rgb(var(--z-500)); font-size: 11px; }

/* ── Viewport ────────────────────────────────────────────────────────── */

.ks-canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: rgb(var(--z-950));
  touch-action: none;
  cursor: grab;
}

.ks-canvas.is-panning { cursor: grabbing; }

/* The grid is painted rather than drawn, so a canvas the size of a city
   block costs nothing. It scrolls and scales with the view. */
.ks-canvas__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(var(--z-800)) 1px, transparent 1px);
  pointer-events: none;
}

.ks-canvas__flow {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.ks-canvas__edges {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  width: 1px;
  height: 1px;
}

.ks-canvas__labels { position: absolute; top: 0; left: 0; pointer-events: none; }

.ks-canvas__empty {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ks-canvas__emptycard {
  border: 1px solid rgb(var(--z-800));
  border-radius: 8px;
  background: rgb(var(--z-900) / 0.9);
  padding: 20px 24px;
  max-width: 320px;
  text-align: center;
}

.ks-canvas__emptycard strong { font-size: 15px; }

.ks-canvas__emptycard p {
  margin: 8px 0 0;
  color: rgb(var(--z-500));
  font-size: 13px;
  line-height: 1.5;
}

.ks-canvas__band {
  position: absolute;
  z-index: 20;
  border: 1px solid var(--accent-light);
  background: rgb(124 58 237 / 0.12);
  pointer-events: none;
}

/* Top-right, horizontal, exactly where `Canvas.tsx` puts ReactFlow's
   Controls: "so the -/+/fit/lock/eye cluster reads as one tidy strip rather
   than the default tall column". The port had it bottom-left, which is one of
   the buttons Roland could not find. */
.ks-canvas__controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-900) / 0.92);
  padding: 3px;
}

.ks-canvas__zoom {
  padding: 0 8px;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ks-canvas__saving,
.ks-toast {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 30;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 6px 12px;
  color: rgb(var(--z-300));
  font-size: 12px;
}

.ks-toast { bottom: 48px; }

/* ── Tiles ───────────────────────────────────────────────────────────── */

.ks-tile {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--z-800));
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: rgb(var(--z-900) / 0.9);
  padding: 8px 12px;
  width: 240px;
  box-sizing: border-box;
  cursor: grab;
  user-select: none;
}

.ks-tile.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Kindred: one of this entity's pills is selected. A halo rather than the
   selected border, because the tile itself is NOT selected and must not be
   dragged along when the pill moves. */
.ks-tile.is-kin { box-shadow: 0 0 0 2px rgb(196 181 253 / 0.55); }

.ks-tile.is-ref { opacity: 0.6; }

.ks-tile__todo {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #3f3f46;
  padding: 0 4px;
  min-width: 16px;
  height: 16px;
  color: #fb7185;
  font-size: 9px;
  font-weight: 600;
}

.ks-tile__lint {
  position: absolute;
  right: -4px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 4px;
  min-width: 12px;
  height: 12px;
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
}

.ks-tile__lint.is-error { background: #f43f5e; color: #fff; }
.ks-tile__lint.is-warning { background: #f59e0b; color: #09090b; }
.ks-tile__lint.is-info { background: #0ea5e9; color: #09090b; }

.ks-tile__stamp {
  position: absolute;
  top: -8px;
  left: -4px;
  z-index: 10;
  border-radius: 999px;
  padding: 1px 6px;
  color: #09090b;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-tile__head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }

.ks-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--accent);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.ks-tile__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ks-tile__ident { min-width: 0; flex: 1; }

.ks-tile__name {
  overflow: hidden;
  color: rgb(var(--z-100));
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-tile__sub {
  overflow: hidden;
  color: rgb(var(--z-400));
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-tile__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

.ks-tag {
  border: 1px solid rgb(var(--z-600));
  border-radius: 3px;
  background: rgb(var(--z-800) / 0.6);
  padding: 0 4px;
  color: rgb(var(--z-400));
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-tag--trust {
  border-color: rgb(180 83 9 / 0.6);
  background: rgb(120 53 15 / 0.2);
  color: var(--warn-ink);
  text-transform: none;
  letter-spacing: 0;
}

.ks-tile__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 4px;
  color: rgb(var(--z-300));
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.ks-tile__figures {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
}

.ks-tile__value { color: var(--accent-ink); flex-shrink: 0; }
.ks-tile__second { color: rgb(var(--z-400)); flex-shrink: 0; }

.ks-tile__foot {
  overflow: hidden;
  min-width: 0;
  color: rgb(var(--z-500));
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-tile__calc {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: rgb(var(--z-500));
  font-size: 10px;
}

.ks-tile__calc span:first-child {
  color: rgb(var(--z-500));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.ks-tile__calc span:last-child {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-tile__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* min-width: 0 so the badge's own ellipsis engages. Without it a long
   subtype name pushes the "Updated" stamp off the tile. */
.ks-tile__badges { display: flex; align-items: center; gap: 4px; min-width: 0; }

.ks-tile__badge {
  overflow: hidden;
  border-radius: 3px;
  background: rgb(var(--z-800));
  padding: 1px 4px;
  color: rgb(var(--z-300));
  font-size: 9px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ks-tile__pills {
  border-radius: 999px;
  background: rgb(76 29 149 / 0.4);
  padding: 1px 6px;
  color: var(--violet-soft);
  font-size: 9px;
  font-weight: 500;
  flex-shrink: 0;
}

.ks-tile__when { color: rgb(var(--z-500)); font-size: 9px; flex-shrink: 0; }

/* ── Pills and groups ────────────────────────────────────────────────── */

.ks-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgb(var(--z-900));
  padding: 0 14px;
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  cursor: grab;
  user-select: none;
}

.ks-pill__name {
  overflow: hidden;
  color: rgb(var(--z-100));
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-pill__seq { margin-left: auto; color: rgb(var(--z-500)); font-size: 10px; }

.ks-group {
  position: absolute;
  border: 1px dashed var(--group-color);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.02);
}

.ks-group__label {
  position: absolute;
  top: -9px;
  left: 10px;
  background: rgb(var(--z-950));
  padding: 0 6px;
  color: var(--group-color);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Edges ───────────────────────────────────────────────────────────── */

.ks-edge path { pointer-events: none; }

/* A two-pixel line is not something anybody can click on, so a wide
   invisible one is laid over the top of it. */
.ks-edge__hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

.ks-edge.is-on path:not(.ks-edge__hit) { filter: drop-shadow(0 0 4px #c4b5fd); }

.ks-edge__flow {
  stroke-dasharray: 6 4;
  animation: ks-flow 0.8s linear infinite;
}

@keyframes ks-flow { to { stroke-dashoffset: -10; } }

.ks-edge__label,
.ks-edge__bundle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
  background: rgb(var(--z-900) / 0.9);
  padding: 2px 6px;
  color: rgb(var(--z-200));
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: pre-line;
  pointer-events: none;
}

.ks-edge__label.is-auto { color: rgb(var(--z-400)); font-style: italic; }

.ks-edge__bundle { display: flex; flex-direction: column; gap: 2px; text-align: left; }

.ks-edge__row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: rgb(var(--z-400));
  font-style: italic;
}

.ks-edge__row.is-on { color: rgb(var(--z-100)); font-style: normal; font-weight: 600; }

.ks-edge__dot {
  display: inline-block;
  margin-top: 3px;
  border-radius: 2px;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}

[x-cloak] { display: none !important; }

/* ── The right rail ───────────────────────────────────────────────────────
 *
 * One tile's form. Six columns, and each field says how many it takes - a
 * date and a percentage sit side by side, an address takes the row. The
 * label and the control are separate grid rows so two half-width fields
 * beside each other always line their inputs up, whatever the labels wrap to.
 */

.ks-rail {
  border-left: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-900));
  width: 420px;
  overflow-y: auto;
  flex-shrink: 0;
}

.ks-panel { display: flex; flex-direction: column; padding: 0 14px 20px; }

.ks-panel.htmx-request { opacity: 0.6; }

.ks-panel__head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-900));
  margin: 0 -14px;
  padding: 12px 14px;
}

.ks-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--accent);
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.ks-panel__icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ks-panel__ident { min-width: 0; flex: 1; }

.ks-panel__name {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  padding: 2px 4px;
  width: 100%;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

.ks-panel__name:focus {
  border-color: rgb(var(--z-700));
  background: rgb(var(--z-950));
  outline: none;
}

.ks-panel__kind {
  padding-left: 5px;
  color: rgb(var(--z-500));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-panel__error,
.ks-panel__saved {
  margin: 10px 0 0;
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 12px;
}

.ks-panel__error { background: rgb(136 19 55 / 0.35); color: var(--bad-ink); }
.ks-panel__saved { background: rgb(6 78 59 / 0.35); color: var(--good-soft); }

.ks-panel__tracking {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.ks-panel__tracking label { color: rgb(var(--z-400)); font-size: 12px; }
.ks-panel__tracking select { flex: 1; }

/* ── Fields ──────────────────────────────────────────────────────────── */

.ks-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 14px;
}

/* Two rows per field - label, then control - shared with its neighbours, so
   a pair of half-width fields keep their inputs on the same line however the
   labels wrap. `minmax(0, 1fr)` on the column is what lets a long name in a
   picker ellipsise instead of stretching the cell. */
.ks-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 3px;
  margin-bottom: 10px;
}

.ks-field--2 { grid-column: span 2; }
.ks-field--3 { grid-column: span 3; }
.ks-field--6 { grid-column: span 6; }
/* Notes sits OUTSIDE the field grid, so it cannot use the subgrid rows the
   others share - with nothing to inherit from, the row collapses and the
   textarea renders as a line. */
.ks-field--full {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
}

.ks-field--full textarea { min-height: 120px; }

.ks-field.is-na { opacity: 0.5; }

.ks-field > label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--z-400));
  font-size: 12px;
  font-weight: 500;
}

.ks-field__must { color: #fb7185; }

.ks-field__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--z-700));
  border-radius: 999px;
  width: 13px;
  height: 13px;
  color: rgb(var(--z-500));
  font-size: 9px;
  cursor: help;
}

/* On every field at once, so it recedes until the row is hovered or the
   field is actually marked. Forty-four of these at full strength is a form
   that reads as a checklist of things to dismiss. */
.ks-field__na {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  color: rgb(var(--z-700));
  font-size: 9px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.1s ease;
}

.ks-field:hover .ks-field__na,
.ks-field.is-na .ks-field__na { opacity: 1; }

.ks-field.is-na .ks-field__na { color: var(--accent-light); }

.ks-field__na input {
  margin: 0;
  width: 11px;
  height: 11px;
}

.ks-field__empty,
.ks-field__estimate {
  margin: 2px 0 0;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-style: italic;
}

.ks-field input[type="text"],
.ks-field input[type="date"],
.ks-field input[type="email"],
.ks-field input[type="url"],
.ks-field input[type="tel"],
.ks-field select,
.ks-field textarea,
.ks-panel__tracking select {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 6px 8px;
  width: 100%;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.ks-field textarea { resize: vertical; line-height: 1.4; }

.ks-field input:focus,
.ks-field select:focus,
.ks-field textarea:focus {
  border-color: var(--accent);
  outline: none;
}

/* Roland's rule, and it holds here too: the spinners on a number input are
   a target nobody aims for and a scroll-wheel accident waiting to happen.
   These are text inputs with a numeric keypad hint instead. */
.ks-field input[type="number"] { appearance: textfield; }

.ks-readonly {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-900) / 0.4);
  padding: 6px 8px;
  color: rgb(var(--z-300));
  font-size: 13px;
}

.ks-check { display: flex; align-items: center; height: 30px; }
.ks-check input { cursor: pointer; }

.ks-multi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.ks-multi label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--z-300));
  font-size: 12px;
  cursor: pointer;
}

/* Not `.ks-picker`: the sidebar's subtype picker owns that name and is
   absolutely positioned, so a shared name put every wa_id dropdown in the
   panel on top of the canvas. */
.ks-rows { display: flex; flex-direction: column; gap: 4px; }

.ks-money, .ks-date { display: flex; align-items: center; gap: 4px; }
.ks-money input, .ks-date input { flex: 1; min-width: 0; }

.ks-prefix, .ks-suffix {
  color: rgb(var(--z-500));
  font-size: 12px;
  flex-shrink: 0;
}

.ks-date__today {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  width: 30px;
  height: 30px;
  color: rgb(var(--z-400));
  cursor: pointer;
  flex-shrink: 0;
}

.ks-date__today:hover { border-color: var(--accent); color: rgb(var(--z-100)); }

.ks-pctmap { display: flex; flex-direction: column; gap: 4px; }

.ks-pctmap__row { display: flex; align-items: center; gap: 6px; }

.ks-pctmap__who {
  overflow: hidden;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-900) / 0.6);
  padding: 6px 8px;
  min-width: 0;
  flex: 1;
  color: rgb(var(--z-300));
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-pctmap__row input { width: 80px; flex-shrink: 0; }

.ks-ownership {
  grid-column: span 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid;
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 12px;
}

.ks-ownership.is-over { border-color: rgb(190 18 60 / 0.6); background: rgb(136 19 55 / 0.2); color: #fecdd3; }
.ks-ownership.is-complete { border-color: rgb(4 120 87 / 0.6); background: rgb(6 78 59 / 0.2); color: #a7f3d0; }
.ks-ownership.is-under { border-color: rgb(180 83 9 / 0.6); background: rgb(120 53 15 / 0.2); color: #fde68a; }

.ks-ownership__total { font-variant-numeric: tabular-nums; }

/* ── Sections and relationships ──────────────────────────────────────── */

.ks-collapse {
  margin-top: 14px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950) / 0.4);
}

.ks-collapse > summary {
  padding: 8px 10px;
  color: rgb(var(--z-300));
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ks-collapse > *:not(summary) { padding: 0 10px 10px; }
.ks-collapse .ks-fields { margin-top: 4px; }

.ks-relation { margin-top: 10px; }

.ks-relation__head { color: rgb(var(--z-400)); font-size: 12px; font-weight: 500; }

.ks-relation__rows { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.ks-relation__pill {
  border: 1px solid rgb(109 40 217 / 0.6);
  border-radius: 999px;
  background: rgb(76 29 149 / 0.2);
  padding: 2px 9px;
  color: var(--violet-soft);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.ks-relation__pill:hover { border-color: var(--accent-light); background: rgb(76 29 149 / 0.4); }

.ks-relation__empty {
  margin: 3px 0 0;
  color: rgb(var(--z-500));
  font-size: 11px;
  font-style: italic;
}

.ks-panel__about {
  margin-top: 16px;
  border-top: 1px solid rgb(var(--z-800));
  padding-top: 10px;
  color: rgb(var(--z-500));
  font-size: 11px;
  line-height: 1.45;
}

.ks-panel__abouthead {
  display: block;
  color: rgb(var(--z-500));
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-panel__about p { margin: 4px 0 0; }

.ks-panel__tip {
  margin-top: 8px;
  border-top: 1px solid rgb(var(--z-800) / 0.6);
  padding-top: 8px;
  color: rgb(var(--z-400));
}

.ks-panel__tip span {
  color: var(--accent-light);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-panel__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-900));
  margin: 16px -14px 0;
  padding: 10px 14px;
}

.ks-panel__delete,
.ks-panel__save {
  border: 0;
  border-radius: var(--radius);
  padding: 7px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ks-panel__delete {
  border: 1px solid rgb(190 18 60 / 0.5);
  background: none;
  color: var(--bad-ink);
}

.ks-panel__delete:hover { background: rgb(136 19 55 / 0.3); }

.ks-panel__save { background: var(--accent); color: #fff; }
.ks-panel__save:hover { background: var(--accent-hover); }

/* ── The edge inspector ───────────────────────────────────────────────────
 *
 * Read-only, so it has no form and no save. The amber band is the whole
 * point of the panel: it names the field that made this line.
 */

.ks-panel--edge { padding-bottom: 20px; }

.ks-panel__edgekind {
  color: rgb(var(--z-100));
  font-size: 15px;
  font-weight: 600;
}

/* Amber does not flip with the theme the way the grey ramp does, so the text
   is set explicitly rather than left to a variable. */
.ks-edgepanel__why {
  margin: 12px 0 0;
  border: 1px solid rgb(180 83 9 / 0.5);
  border-radius: var(--radius);
  background: rgb(180 83 9 / 0.12);
  padding: 10px 12px;
  color: #fde68a;
  font-size: 12px;
  line-height: 1.5;
}

.ks-edgepanel__block { margin-top: 16px; }

.ks-edgepanel__head {
  margin-bottom: 6px;
  color: rgb(var(--z-400));
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ks-edgepanel__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}

.ks-edgepanel__rows dt { color: rgb(var(--z-400)); font-size: 11px; }

.ks-edgepanel__rows dd {
  margin: 0;
  color: rgb(var(--z-100));
  font-size: 12px;
}

.ks-edgepanel__tile {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 6px 8px;
  width: 100%;
  color: rgb(var(--z-500));
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ks-edgepanel__tile:hover {
  border-color: rgb(var(--z-500));
  background: rgb(var(--z-900));
}

.ks-edgepanel__stripe {
  border-radius: 2px;
  width: 4px;
  height: 24px;
  flex-shrink: 0;
}

.ks-edgepanel__names { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.ks-edgepanel__name {
  overflow: hidden;
  color: rgb(var(--z-100));
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-edgepanel__family {
  overflow: hidden;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── Sheets ───────────────────────────────────────────────────────────────
 *
 * One overlay, shared. Only one sheet can be open, and none of them exists in
 * the page until it is asked for - which is also why the backdrop closing it
 * is a click on the overlay itself rather than a state flag.
 */

.ks-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.45);
  padding: 16px;
}

.ks-sheet__box {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--z-700));
  border-radius: 8px;
  background: rgb(var(--z-900));
  width: 640px;
  max-width: 100%;
  height: 80vh;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.55);
}

.ks-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgb(var(--z-800));
  padding: 12px 16px;
}

.ks-sheet__title { color: rgb(var(--z-100)); font-size: 15px; font-weight: 600; }

.ks-sheet__counts {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  color: rgb(var(--z-500));
  font-size: 12px;
  font-weight: 600;
}

.ks-sheet__counts .is-error { color: var(--bad-ink); }
.ks-sheet__counts .is-warning { color: var(--warn-ink); }
.ks-sheet__counts .is-info { color: var(--info-ink); }

.ks-sheet__filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(var(--z-800));
  background: rgb(76 29 149 / 0.2);
  padding: 7px 16px;
  color: rgb(var(--z-300));
  font-size: 11px;
}

.ks-sheet__filter strong { color: var(--violet-soft); }

.ks-sheet__filter button {
  border: 1px solid rgb(var(--z-700));
  border-radius: 3px;
  background: rgb(var(--z-900));
  padding: 2px 8px;
  color: rgb(var(--z-300));
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.ks-sheet__filter button:hover { border-color: var(--accent); }

.ks-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.ks-sheet__none {
  padding: 48px 0;
  color: rgb(var(--z-500));
  font-size: 13px;
  text-align: center;
}

.ks-sheet__none div { margin-bottom: 8px; font-size: 22px; }

.ks-sheet__foot {
  border-top: 1px solid rgb(var(--z-800));
  padding: 8px 16px;
  color: rgb(var(--z-500));
  font-size: 10px;
}

/* ── One finding ─────────────────────────────────────────────────────── */

.ks-issue {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid;
  border-radius: var(--radius);
  padding: 9px 12px;
}

/* The card's colour IS the severity, which is why the heading below leads
   with the rule rather than repeating the word. */
.ks-issue.is-error { border-color: rgb(190 18 60 / 0.5); background: rgb(190 18 60 / 0.1); }
.ks-issue.is-warning { border-color: rgb(180 83 9 / 0.5); background: rgb(180 83 9 / 0.1); }
.ks-issue.is-info { border-color: rgb(3 105 161 / 0.5); background: rgb(3 105 161 / 0.1); }

.ks-issue__body { flex: 1; min-width: 0; }

.ks-issue__rule { font-size: 12px; font-weight: 600; }

.ks-issue.is-error .ks-issue__rule { color: var(--bad-ink); }
.ks-issue.is-warning .ks-issue__rule { color: var(--warn-ink); }
.ks-issue.is-info .ks-issue__rule { color: var(--info-ink); }

.ks-issue__message {
  margin-top: 4px;
  color: rgb(var(--z-200));
  font-size: 12px;
  line-height: 1.4;
}

.ks-issue__jump {
  border: 1px solid rgb(var(--z-700));
  border-radius: 3px;
  background: rgb(var(--z-900));
  padding: 3px 9px;
  color: rgb(var(--z-300));
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

.ks-issue__jump:hover { border-color: var(--accent); background: rgb(var(--z-800)); }

/* ── One archived tile ───────────────────────────────────────────────── */

.ks-archived {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 8px 10px;
}

.ks-archived__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.ks-archived__icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ks-archived__names { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.ks-archived__name {
  overflow: hidden;
  color: rgb(var(--z-100));
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-archived__kind {
  overflow: hidden;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ks-archived__restore,
.ks-archived__destroy {
  border: 1px solid rgb(var(--z-700));
  border-radius: 3px;
  background: rgb(var(--z-900));
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

.ks-archived__restore { color: rgb(var(--z-200)); }
.ks-archived__restore:hover { border-color: var(--accent); }

.ks-archived__destroy { border-color: rgb(190 18 60 / 0.5); color: var(--bad-ink); }
.ks-archived__destroy:hover { background: rgb(136 19 55 / 0.3); }

/* A pip on the corner of the bell, not a pill at the end of a row: the row
   it used to align itself in does not exist any more. */
.ks-side__count {
  display: flex;
  position: absolute;
  top: -2px;
  right: -2px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f43f5e;
  padding: 0 4px;
  min-width: 16px;
  height: 16px;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── The transaction queue ────────────────────────────────────────────────
 *
 * A wide sheet, because the row IS the information: a date, an amount, a
 * description long enough to recognise, and the three fields that allocate it.
 * Narrowing it would mean truncating descriptions, and a truncated bank
 * description is unrecognisable.
 */

.ks-sheet__box--wide { width: 1240px; height: 88vh; }

.ks-txns { display: flex; flex: 1; min-height: 0; }

.ks-txns__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.ks-txns__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgb(var(--z-800));
  padding: 8px 14px;
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-txns__bar select {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 5px 8px;
  width: 200px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 12px;
}

.ks-txns__scroll { flex: 1; overflow: auto; }

/* Fixed columns, because the row is read across: the description is the only
   thing that should take the slack, and the allocate controls need enough
   width to sit on one line - wrapping the Save button under them doubles the
   height of every row in the queue. */
.ks-txns__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.ks-txns__table th:nth-child(1), .ks-txns__table td:nth-child(1) { width: 82px; }
.ks-txns__table th:nth-child(2), .ks-txns__table td:nth-child(2) { width: 84px; }
.ks-txns__table th:nth-child(4), .ks-txns__table td:nth-child(4) { width: 90px; }
.ks-txns__table th:nth-child(5), .ks-txns__table td:nth-child(5) { width: 104px; }
.ks-txns__table th:nth-child(6), .ks-txns__table td:nth-child(6) { width: 96px; }

.ks-txns__table td:nth-child(1),
.ks-txns__table td:nth-child(2) { white-space: nowrap; }

.ks-txns__table td:nth-child(3),
.ks-txns__table td:nth-child(4),
.ks-txns__table td:nth-child(5) { overflow-wrap: anywhere; }

.ks-txns__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgb(var(--z-900));
  padding: 6px 8px;
  color: rgb(var(--z-300));
  font-weight: 500;
  text-align: left;
}

.ks-txns__table td {
  border-top: 1px solid rgb(var(--z-800));
  padding: 5px 8px;
  color: rgb(var(--z-200));
  vertical-align: top;
}

.ks-txns__table .is-right { text-align: right; }
.ks-txns__table .is-muted { color: rgb(var(--z-500)); }
/* Money out is the one to notice; money in is the quiet case. */
.ks-txns__table .is-out { color: var(--bad-ink); }
.ks-txns__table .is-in { color: var(--good-soft); }

.ks-txns__none {
  padding: 40px 0 !important;
  color: rgb(var(--z-500));
  text-align: center;
}

.ks-txns__why {
  border: 0;
  background: none;
  padding: 0;
  color: var(--violet-ink);
  font-family: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.ks-txns__why:hover { color: var(--violet-soft); }

.ks-txns__edit { display: flex; align-items: center; gap: 4px; }

.ks-txns__edit input,
.ks-txns__edit select {
  border: 1px solid rgb(var(--z-800));
  border-radius: 3px;
  background: rgb(var(--z-950));
  padding: 3px 6px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 11px;
}

.ks-txns__edit input { min-width: 0; flex: 1; }
.ks-txns__edit select { min-width: 0; flex: 1.2; }

.ks-txns__what {
  overflow: hidden;
  min-width: 0;
  flex: 2;
  color: rgb(var(--z-200));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-txns__edit-open,
.ks-txns__cancel {
  border: 0;
  background: none;
  padding: 0;
  color: var(--violet-ink);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.ks-txns__cancel { color: rgb(var(--z-500)); flex-shrink: 0; }

.ks-txns__table tr.is-editing { background: rgb(var(--z-800) / 0.4); }

.ks-txns__edit button {
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  padding: 4px 9px;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.ks-txns__side {
  border-left: 1px solid rgb(var(--z-800));
  background: rgb(var(--z-950));
  padding: 12px;
  width: 360px;
  overflow-y: auto;
  flex-shrink: 0;
}

.ks-txns__sidehead {
  margin-bottom: 8px;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ks-txns__side .is-muted { color: rgb(var(--z-500)); font-size: 10px; }

.ks-candidates {
  margin-bottom: 16px;
  border: 1px solid rgb(124 58 237 / 0.4);
  border-radius: var(--radius);
  background: rgb(124 58 237 / 0.1);
  padding: 10px;
}

.ks-candidates__head {
  color: var(--violet-soft);
  font-size: 12px;
  font-weight: 500;
}

.ks-candidate {
  margin-top: 8px;
  border: 1px solid rgb(var(--z-700));
  border-radius: 3px;
  background: rgb(var(--z-900));
  padding: 8px;
}

.ks-candidate__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgb(var(--z-100));
  font-size: 11px;
  font-weight: 500;
}

.ks-candidate button {
  margin-top: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  padding: 4px;
  width: 100%;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.ks-candidate button:disabled { opacity: 0.5; cursor: default; }

.ks-cluster {
  margin-bottom: 8px;
  border: 1px solid rgb(var(--z-700));
  border-radius: 3px;
  background: rgb(var(--z-900));
  padding: 8px;
}

.ks-cluster__name { color: rgb(var(--z-100)); font-size: 11px; font-weight: 500; }

/* ── The "why" box ───────────────────────────────────────────────────── */

.ks-why {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.7);
}

.ks-why__box {
  border: 1px solid rgb(var(--z-700));
  border-radius: 8px;
  background: rgb(var(--z-900));
  width: 480px;
  max-width: 100%;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.55);
}

.ks-why__box header { border-bottom: 1px solid rgb(var(--z-800)); padding: 12px 16px; }

.ks-why__title { color: rgb(var(--z-100)); font-size: 13px; font-weight: 500; }

.ks-why__box .is-muted { color: rgb(var(--z-500)); font-size: 11px; }
.ks-why__box .is-muted span { color: var(--violet-ink); }

.ks-why__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }

.ks-why__row {
  border: 1px solid rgb(var(--z-800));
  border-radius: 3px;
  background: rgb(var(--z-950) / 0.4);
  padding: 8px;
}

.ks-why__kind {
  color: rgb(var(--z-500));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ks-why__row code {
  display: inline-block;
  margin-top: 2px;
  border-radius: 3px;
  background: rgb(var(--z-800));
  padding: 1px 5px;
  color: rgb(var(--z-200));
  font-size: 11px;
}

.ks-why__box footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgb(var(--z-800));
  padding: 8px 16px;
}

.ks-why__box footer button {
  border: 0;
  background: none;
  color: rgb(var(--z-400));
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ── The rules editor ─────────────────────────────────────────────────────
 *
 * A list of rules down the left and one of them open on the right. The
 * conditions are the fiddly part: eleven types, each with different fields,
 * and the row shows the ones belonging to whichever type is chosen.
 */

.ks-sheet__box--rules { width: 1080px; }

.ks-rules { display: flex; flex: 1; min-height: 0; }

.ks-rules__list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgb(var(--z-800));
  width: 300px;
  overflow-y: auto;
  flex-shrink: 0;
}

.ks-rules__new {
  border: 0;
  border-bottom: 1px solid rgb(var(--z-800));
  background: none;
  padding: 9px 12px;
  color: var(--violet-ink);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.ks-rules__new:hover { background: rgb(var(--z-800)); }

.ks-rules__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 0;
  border-bottom: 1px solid rgb(var(--z-800));
  background: none;
  padding: 8px 12px;
  color: rgb(var(--z-100));
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ks-rules__row:hover { background: rgb(var(--z-800) / 0.6); }
.ks-rules__row.is-on { background: rgb(var(--z-800)); }

.ks-rules__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.ks-rules__name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-rules__priority {
  border-radius: 3px;
  background: rgb(var(--z-700));
  padding: 1px 6px;
  color: rgb(var(--z-200));
  font-size: 10px;
  flex-shrink: 0;
}

.ks-rules__meta { color: rgb(var(--z-500)); font-size: 11px; }

.ks-rules__lab { display: flex; align-items: center; gap: 5px; }

.ks-rules__empty {
  padding: 16px 12px;
  color: rgb(var(--z-500));
  font-size: 11px;
  line-height: 1.5;
}

.ks-rules__form { flex: 1; overflow-y: auto; padding: 16px; }

.ks-rules__head3 {
  display: grid;
  grid-template-columns: 1fr 140px 120px;
  gap: 12px;
  align-items: end;
}

.ks-rules__form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgb(var(--z-400));
  font-size: 12px;
}

.ks-rules__enabled {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  padding-bottom: 7px;
  color: rgb(var(--z-300)) !important;
}

.ks-rules__form input[type="text"],
.ks-rules__form select {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 6px 8px;
  width: 100%;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.ks-rules__form input:focus,
.ks-rules__form select:focus { border-color: var(--accent); outline: none; }

.ks-rules__label {
  margin: 20px 0 8px;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ks-rules__conds { display: flex; flex-direction: column; gap: 8px; }

.ks-cond {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950) / 0.4);
  padding: 8px;
}

.ks-cond__top { display: flex; align-items: center; gap: 8px; }
.ks-cond__top select { flex: 1; }

.ks-cond__remove {
  border: 0;
  background: none;
  color: rgb(var(--z-500));
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

.ks-cond__remove:hover { color: var(--bad-ink); }

.ks-cond__body { margin-top: 8px; }
.ks-cond__body:empty { margin-top: 0; }

.ks-cond__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ks-rules__add {
  margin-top: 8px;
  border: 1px dashed rgb(var(--z-700));
  border-radius: var(--radius);
  background: none;
  padding: 5px 12px;
  color: rgb(var(--z-400));
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ks-rules__add:hover { background: rgb(var(--z-800)); }

.ks-rules__action { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ks-rules__foot { display: flex; align-items: center; gap: 10px; margin-top: 24px; }

.ks-rules__foot button {
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  padding: 7px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ks-rules__foot button:hover { background: var(--accent-hover); }

.ks-rules__delete {
  border: 1px solid rgb(190 18 60 / 0.5) !important;
  background: none !important;
  color: var(--bad-ink) !important;
}

.ks-rules__delete:hover { background: rgb(136 19 55 / 0.3) !important; }

/* ── The share ledger ─────────────────────────────────────────────────── */

.ks-sheet__box--shares { width: 1100px; height: 88vh; }

/* Nine columns and none of them long, so this one sizes itself rather than
   being pinned the way the transaction table is. */
.ks-shares__table { table-layout: auto; }

.ks-shares__table th.is-sortable { padding: 0; }

.ks-shares__table th.is-sortable button {
  border: 0;
  background: none;
  padding: 6px 8px;
  width: 100%;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.ks-shares__table th.is-sortable button:hover { color: rgb(var(--z-100)); }

.ks-shares__ticker { color: rgb(var(--z-100)); font-weight: 500; }

.ks-shares__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

.ks-shares__edit input,
.ks-shares__edit select {
  border: 1px solid rgb(var(--z-700));
  border-radius: 3px;
  background: rgb(var(--z-900));
  padding: 3px 6px;
  width: 92px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 11px;
}

.ks-shares__edit input[type="date"] { width: 128px; }

.ks-shares__edit button[type="submit"] {
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  padding: 4px 10px;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.ks-shares__act {
  border: 1px solid rgb(var(--z-700));
  border-radius: 3px;
  background: none;
  padding: 2px 8px;
  color: rgb(var(--z-300));
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.ks-shares__act:hover { border-color: var(--accent); }
.ks-shares__act.is-danger { border-color: rgb(159 18 57); color: var(--bad-ink); }
.ks-shares__act.is-danger:hover { background: rgb(136 19 55 / 0.3); }

/* ── Importing ────────────────────────────────────────────────────────── */

.ks-import { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 14px; }

.ks-import__top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ks-import label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgb(var(--z-400));
  font-size: 12px;
}

.ks-import input,
.ks-import select {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 6px 8px;
  width: 100%;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.ks-import__unknown {
  margin: 14px 0 0;
  border: 1px solid rgb(180 83 9 / 0.5);
  border-radius: var(--radius);
  background: rgb(180 83 9 / 0.12);
  padding: 9px 12px;
  color: #fde68a;
  font-size: 12px;
  line-height: 1.5;
}

.ks-import__previewhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 6px;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ks-import__previewhead .is-muted { text-transform: none; letter-spacing: 0; }

/* The last column carries three controls, so it gets a width of its own -
   letting the description take the slack squeezes them to arrows. */
.ks-import__table { table-layout: fixed; }
.ks-import__table th:nth-child(1), .ks-import__table td:nth-child(1) { width: 92px; }
.ks-import__table th:nth-child(2), .ks-import__table td:nth-child(2) { width: 96px; }
.ks-import__table th:nth-child(4), .ks-import__table td:nth-child(4) { width: 330px; }
.ks-import__table td:nth-child(3) { overflow-wrap: anywhere; }

.ks-import__format { margin-top: 12px; max-width: 380px; }

.ks-import__scroll {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  max-height: 420px;
}

/* The row says whose decision it was before it says what the decision is:
   "rule" and "override" are the difference between the app guessing and the
   user telling it. */
.ks-import__says {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-import__says.is-rule { color: var(--violet-ink); }
.ks-import__says.is-override { color: var(--bad-ink); }
.ks-import__says.is-none { color: rgb(var(--z-500)); }

.ks-import__over { display: flex; gap: 4px; margin-top: 3px; }

.ks-import__over input,
.ks-import__over select {
  border: 1px solid rgb(var(--z-800));
  border-radius: 3px;
  background: rgb(var(--z-950));
  padding: 2px 5px;
  min-width: 0;
  flex: 1;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 10px;
}

.ks-import__errors { margin: 8px 0 0; color: var(--bad-ink); font-size: 11px; }

.ks-import__foot { display: flex; justify-content: flex-end; margin-top: 14px; }

.ks-import__go {
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  padding: 8px 18px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ks-import__go:hover { background: var(--accent-hover); }

.ks-import__done { padding: 24px; }

.ks-import__donehead {
  margin-bottom: 12px;
  color: rgb(var(--z-100));
  font-size: 16px;
  font-weight: 500;
}

.ks-import__tally {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 20px;
  justify-content: start;
  margin: 0 0 14px;
}

.ks-import__tally dt { color: rgb(var(--z-400)); font-size: 12px; }
.ks-import__tally dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ks-import__tally .is-in { color: var(--good-soft); }
.ks-import__tally .is-out { color: var(--bad-ink); }
.ks-import__tally .is-muted { color: rgb(var(--z-400)); }

.ks-import__done .is-muted {
  margin: 0 0 18px;
  color: rgb(var(--z-500));
  font-size: 11px;
  line-height: 1.5;
  max-width: 60ch;
}

/* ── The broker mapper ────────────────────────────────────────────────── */

.ks-import__guide {
  margin-top: 12px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-900) / 0.4);
  padding: 12px;
  color: rgb(var(--z-400));
  font-size: 12px;
  line-height: 1.55;
}

.ks-import__guide p { margin: 0 0 8px; }
.ks-import__guide p:last-child { margin-bottom: 0; }
.ks-import__guide strong { color: rgb(var(--z-200)); font-weight: 500; }

.ks-import__guide ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 24px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.ks-import__guide li { display: flex; justify-content: space-between; gap: 8px; }

.ks-import__guide li .is-muted {
  overflow: hidden;
  color: rgb(var(--z-500));
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-mapper {
  margin-top: 14px;
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  padding: 12px;
}

.ks-mapper__head {
  margin-bottom: 8px;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ks-mapper .is-muted {
  margin: 0 0 10px;
  color: rgb(var(--z-500));
  font-size: 11px;
}

.ks-mapper__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }

.ks-mapper__go {
  margin-top: 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  padding: 6px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

/* ── Selecting several ────────────────────────────────────────────────── */

/* A chosen tile is outlined rather than filled: several of them lit at once
   has to stay readable as a set, and the selected-one styling is already
   spoken for by the border. */
.ks-tile.is-chosen,
.ks-pill.is-chosen { box-shadow: 0 0 0 2px var(--accent-light); }

.ks-tools {
  position: absolute;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 3px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
}

.ks-tools button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 3px;
  background: none;
  padding: 5px 9px;
  color: rgb(var(--z-200));
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.ks-tools button:hover { background: rgb(var(--z-800)); }
.ks-tools button:last-child:hover { background: rgb(136 19 55 / 0.4); color: var(--bad-ink); }

/* ── The entity list ─────────────────────────────────────────────────────
 *
 * From `EntitiesPanel.tsx`: a card the same size and shape as a palette tile,
 * and a flyout beside it holding the rows. The flyout is anchored to the card
 * rather than portalled to the body, which the original only does because
 * React had to escape an ancestor's overflow - there is no such ancestor here.
 */

/* The plus turns into a cross when the list is open, the same 45 degrees the
   original rotates it. */
.ks-side__plus { transition: transform 0.15s ease; }
.ks-side__plus.is-open { transform: rotate(45deg); }

.ks-side__entities {
  display: flex;
  position: absolute;
  /* Level with the subtype pickers and clear of the scenario tabs, for the
     same reason they are: a list that covers the tabs hides which canvas the
     row is about to be dropped onto. */
  top: 92px;
  left: 244px;
  z-index: 45;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgb(var(--z-700));
  border-radius: 6px;
  background: rgb(var(--z-900));
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.35);
  padding: 8px;
  width: 240px;
  max-height: 60vh;
  overflow-y: auto;
}

.ks-side__entlead {
  padding: 0 4px 4px;
  color: rgb(var(--z-500));
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ks-side__entity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgb(var(--z-800));
  border-left: 3px solid currentColor;
  border-radius: 2px;
  background: rgb(var(--z-900));
  padding: 6px 8px;
  width: 100%;
  color: rgb(var(--z-50));
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: grab;
}

.ks-side__entity:hover { background: rgb(var(--z-800)); }
.ks-side__entity:active { cursor: grabbing; }

.ks-side__entname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-side__entsub {
  flex-shrink: 0;
  color: rgb(var(--z-500));
  font-size: 9px;
  text-transform: uppercase;
}

/* ── Scenario controls ───────────────────────────────────────────────── */

.ks-tabs { position: relative; }

.ks-tabs__slot { display: flex; align-items: center; }
.ks-tabs__slot form { display: flex; }

.ks-tabs__edit {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 2px;
  color: rgb(var(--z-500));
  cursor: pointer;
}

.ks-tabs__edit:hover { color: rgb(var(--z-200)); }
.ks-tabs__edit .ks-icon { width: 12px; height: 12px; }

.ks-tabs__new { position: relative; margin-left: 4px; }

.ks-tabs__new > button {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 3px;
  background: none;
  padding: 4px;
  color: rgb(var(--z-500));
  cursor: pointer;
}

.ks-tabs__new > button:hover { background: rgb(var(--z-800)); color: rgb(var(--z-100)); }

.ks-tabs__menu {
  position: absolute;
  top: 26px;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 8px;
  width: 250px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
}

.ks-tabs__menu form,
.ks-tabs__rename { display: flex; gap: 4px; }

.ks-tabs__menu input,
.ks-tabs__rename input {
  border: 1px solid rgb(var(--z-800));
  border-radius: 3px;
  background: rgb(var(--z-950));
  padding: 4px 6px;
  min-width: 0;
  flex: 1;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 11px;
}

.ks-tabs__menu button,
.ks-tabs__rename button {
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  padding: 4px 8px;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.ks-tabs__rename {
  position: absolute;
  top: 30px;
  left: 8px;
  z-index: 50;
  border: 1px solid rgb(var(--z-700));
  border-radius: var(--radius);
  background: rgb(var(--z-900));
  padding: 6px;
  width: 250px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
}

/* ── Settings, help, feedback ────────────────────────────────────────── */

.ks-side__group--last { margin-top: auto; padding-bottom: 4px; }

.ks-sheet__box--settings { width: 620px; height: auto; max-height: 85vh; }
.ks-sheet__box--help { width: 640px; max-height: 85vh; }
.ks-sheet__box--feedback { width: 520px; height: auto; }

.ks-settings section { margin-bottom: 24px; }
.ks-settings h2, .ks-help h2 {
  margin: 0 0 4px;
  color: rgb(var(--z-100));
  font-size: 13px;
  font-weight: 600;
}

.ks-settings .is-muted {
  margin: 0 0 10px;
  color: rgb(var(--z-500));
  font-size: 11px;
  line-height: 1.5;
}

.ks-settings__version {
  margin: 0;
  color: rgb(var(--z-500));
  font-size: 10px;
  text-align: right;
}

.ks-help section { margin-bottom: 20px; }

.ks-help p, .ks-help li {
  color: rgb(var(--z-400));
  font-size: 12.5px;
  line-height: 1.6;
}

.ks-help p { margin: 0 0 8px; }
.ks-help ul { margin: 0 0 8px; padding-left: 18px; }
.ks-help strong { color: rgb(var(--z-200)); font-weight: 500; }

.ks-feedback { display: flex; flex-direction: column; gap: 12px; padding: 16px; }

.ks-feedback label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgb(var(--z-400));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ks-feedback select,
.ks-feedback textarea {
  border: 1px solid rgb(var(--z-800));
  border-radius: var(--radius);
  background: rgb(var(--z-950));
  padding: 7px 9px;
  color: rgb(var(--z-100));
  font-family: inherit;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.ks-feedback textarea { resize: vertical; line-height: 1.5; }
.ks-feedback__foot { display: flex; justify-content: flex-end; }

.ks-feedback__thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}

.ks-feedback__thanks > div { color: var(--good-ink); font-size: 30px; }
.ks-feedback__thanks strong { color: rgb(var(--z-100)); font-size: 13px; }

.ks-feedback__thanks p {
  margin: 0;
  max-width: 40ch;
  color: rgb(var(--z-500));
  font-size: 12px;
  line-height: 1.5;
}