/* (c) Alpas Made LLC. All rights reserved.
 *
 * KC Tools tokens and components.
 *
 * THREE LAYERS, IN THIS ORDER, AND ONLY THE FIRST IS INHERITED.
 *   1. --kc-*   The store's design system, copied value for value from
 *               prototypes/kc-design-system.html (read 2026-09-25). Never edit a
 *               value here to suit a tool. If the store changes, copy it again.
 *   2. --kt-*   What tools need that the store never did: the shell, access
 *               levels, the workspace, controls. Each one is built only from
 *               layer 1 values. No new hues.
 *   3. .kt-*    Components. Every class carries the kt- prefix because a class
 *               name is not a namespace: the shared chrome ships .kcbar and
 *               .kcfoot, and David's tools ship their own names. kt- is ours.
 *
 * Spacing is on the 4px grid. Anything tapped is at least 44px.
 */

/* ------------------------------------------------------------ 1. store */
:root {
  color-scheme: dark;
  --kc-ground: #171717;
  --kc-card: #1a1a1a;
  --kc-raised: #1f1f1f;
  --kc-border: #2a2a2a;
  --kc-hairline: rgba(255, 255, 255, 0.14);
  --kc-line-ui: rgba(255, 255, 255, 0.16);
  --kc-line-row: rgba(255, 255, 255, 0.12);
  --kc-line-inner: rgba(255, 255, 255, 0.10);
  --kc-line-hover: rgba(255, 255, 255, 0.34);
  --kc-text: #f9f9f9;
  --kc-heading: #f0f0f0;
  --kc-prose: #dcdcdc;
  --kc-muted: #a8a8a8;
  --kc-red: #e83433;
  --kc-red-button: #e02f2e;
  --kc-red-hover: #c92b2a;
  --kc-red-tint: rgba(232, 52, 51, 0.10);
  --kc-red-edge: rgba(232, 52, 51, 0.34);
  --kc-gold: #F5B142;
  --kc-gold-deep: #D4942E;
  --kc-flag: #f59e0b;
  --kc-focus: #69b3ff;
  --kc-ok: #7cb87c;
  --kc-display: Oswald, Impact, "Arial Narrow", sans-serif;
  --kc-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --kc-title-md: clamp(2rem, 3.368vw, 4rem);
  --kc-radius-tag: 4px;
  --kc-radius-control: 6px;
  --kc-radius-callout: 8px;
  --kc-radius-panel: 12px;
  --kc-radius-card: 16px;
  --kc-radius-pill: 999px;
  --kc-hover: 0.12s ease;
}

/* ------------------------------------------------------------ 2. tools */
:root {
  /* shell */
  --kt-gutter: 16px;               /* KC section gutter: 16 phones, 32 tablets, 48 desktop */
  --kt-side-w: 264px;              /* sidebar from 1024 */
  --kt-panel-w: 320px;             /* workspace controls column from 900 */
  --kt-target: 44px;               /* every tapped thing */

  /* access. Gold means membership and nothing else (store rule). */
  --kt-member: var(--kc-gold);
  --kt-member-deep: var(--kc-gold-deep);
  --kt-member-edge: rgba(245, 177, 66, 0.35);
  --kt-member-line: rgba(245, 177, 66, 0.12);
  --kt-member-tint: rgba(245, 177, 66, 0.08);
  --kt-member-glow: 0 0 25px rgba(245, 177, 66, 0.07), 0 0 80px rgba(245, 177, 66, 0.03);
  --kt-open: var(--kc-red);        /* tools anyone can open keep the brand red icon */
  --kt-soon-edge: var(--kc-red-edge);
  --kt-billing: var(--kc-flag);    /* payment needs attention: flag amber, never gold */

  /* workspace */
  --kt-stage-checker-a: #ffffff;   /* transparent preview. Light, from Kinetic Fill: black art must read on it */
  --kt-stage-checker-b: #e2e2e2;
  /* Artwork overlays. Drawn ON the art, never on interface, so they must stay
     visible over any fill a member picks, red included. Values from Kinetic Fill. */
  --kt-cut-line: #ff2bd6;          /* the cut line, dashed 7 4 */
  --kt-select: #f5b445;            /* a selected or hovered line, and the drag box */
  --kt-wire: #3d9bff;              /* every line, when a tool shows its wireframe */
  --kt-float-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  --kt-vector-bone: #ede9e3;       /* Vector's bone colorway (store design system): when a red button sits within about 200px */
  --kt-dim: rgba(0, 0, 0, 0.72);    /* store rule: a dialog or busy state dims with black at 0.72 */
  --kt-select-tint: rgba(245, 180, 69, 0.14); /* inside the drag box, --kt-select at 0.14 */
}
@media (min-width: 768px)  { :root { --kt-gutter: 32px; } }
@media (min-width: 1024px) { :root { --kt-gutter: 48px; } }

/* ------------------------------------------------------------ 3. components */
.kt-root { background: var(--kc-ground); color: var(--kc-text); font: 400 16px/1.6 var(--kc-body); -webkit-font-smoothing: antialiased; }
.kt-root *, .kt-root *::before, .kt-root *::after { box-sizing: border-box; }
.kt-root button, .kt-root input, .kt-root select { font: inherit; color: inherit; }
.kt-root :focus-visible { outline: 2px solid var(--kc-focus); outline-offset: 2px; }
.kt-ic { width: 24px; height: 24px; display: block; flex: none; }
.kt-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* type */
.kt-title { margin: 0; font: 600 var(--kc-title-md)/1 var(--kc-display); letter-spacing: -0.03em; text-transform: uppercase; color: var(--kc-text); text-wrap: balance; }
.kt-title .hl { color: var(--kc-red); }
.kt-sub { margin: 12px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--kc-muted); }
.kt-h3 { margin: 0; font: 600 clamp(20px, 2.2vw, 24px)/1.1 var(--kc-display); letter-spacing: -0.02em; text-transform: uppercase; }
.kt-label { font: 700 11px/1.4 var(--kc-body); letter-spacing: 0.02em; text-transform: uppercase; color: var(--kc-muted); }
.kt-meta { font-size: 13px; line-height: 1.4; color: var(--kc-muted); }

/* buttons, from the store */
.kt-btn-red, .kt-btn-2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--kt-target); border-radius: var(--kc-radius-control); font: 600 15px/1 var(--kc-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--kc-hover); }
.kt-btn-red { padding: 0 20px; border: 0; background: var(--kc-red-button); color: #ffffff; }
.kt-btn-red:hover { background: var(--kc-red-hover); }
.kt-btn-2 { padding: 0 24px; border: 1px solid var(--kc-line-ui); background: var(--kc-card); color: var(--kc-text); font-weight: 500; }
.kt-btn-2:hover { background: var(--kc-raised); }
.kt-btn-red svg, .kt-btn-2 svg { width: 14px; height: 14px; flex: none; }
.kt-btn-red[disabled], .kt-btn-2[disabled] { opacity: 0.6; cursor: not-allowed; }
.kt-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--kt-target); padding: 0; border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--kc-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kt-link svg { width: 16px; height: 16px; }

/* access marks */
.kt-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--kc-radius-pill); font: 600 12px/1 var(--kc-body); white-space: nowrap; }
.kt-pill svg { width: 12px; height: 12px; }
.kt-pill--member { background: linear-gradient(135deg, var(--kt-member), var(--kt-member-deep)); color: #1a1a1a; }
.kt-pill--plain { border: 1px solid var(--kc-line-ui); color: var(--kc-prose); }
.kt-pill--account { border: 1px solid #3a3a3a; color: #d6d6d6; }
.kt-pill--soon { border: 1px solid var(--kt-soon-edge); color: var(--kc-prose); }
.kt-pill--billing { border: 1px solid var(--kt-billing); color: var(--kt-billing); }

/* icon tile: the one mark every tool carries, in its access colour */
.kt-tile { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--kc-radius-panel); background: var(--kc-raised); border: 1px solid var(--kc-border); color: var(--kt-open); }
.kt-tile svg { width: 24px; height: 24px; }
/* A members tool: the icon is gold, the tile stays neutral (no gold ground or edge). Reg, 2026-09-26:
   gold icons mark members tools; a gold tile, border and heading on each was too much yellow. */
.kt-tile.is-member { color: var(--kt-member); }
.kt-tile.is-soon { color: var(--kc-muted); }
.kt-tile--sm { width: 32px; height: 32px; border-radius: var(--kc-radius-callout); }
.kt-tile--sm svg { width: 20px; height: 20px; }

/* ---------------- shell: sidebar beside main. KC Tools is an app: no store header or footer.
   Markup: .kt-shell > nav.kt-side > .kt-side__in > [toggle] ul.kt-side__list [account]
   shell.js adds the back link, the KC Tools name and the policies line.
   Behaviour (collapse, hover to open, height) is design/shell.js.
   Phones: a top bar (back, KC Tools, account) over the chip row. Not sticky:
   two rows held on screen would take a seventh of a phone. */
.kt-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.kt-side { position: relative; z-index: 20; min-width: 0; background: var(--kc-ground); border-bottom: 1px solid var(--kc-hairline); }
.kt-side__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back top acct" "list list list"; align-items: center; gap: 8px; padding: 8px var(--kt-gutter) 12px; }
.kt-side__back { grid-area: back; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-width: var(--kt-target); min-height: var(--kt-target); border-radius: var(--kc-radius-control); color: var(--kc-muted); font: 500 14px/1.35 var(--kc-body); text-decoration: none; white-space: nowrap; transition: background var(--kc-hover), color var(--kc-hover); }
.kt-side__back:hover { background: rgba(255, 255, 255, 0.08); color: var(--kc-text); }
.kt-side__back svg { width: 20px; height: 20px; flex: none; }
.kt-side__top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.kt-side__brand { display: inline-flex; align-items: center; gap: 8px; min-height: var(--kt-target); color: var(--kc-text); font: 600 20px/1 var(--kc-display); letter-spacing: -0.03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-radius: var(--kc-radius-control); }
.kt-side__brand b { color: var(--kc-red); font-weight: 600; }
a.kt-side__brand:hover { color: var(--kc-heading); }
.kt-side__toggle { display: none; }
.kt-side__list { grid-area: list; min-width: 0; list-style: none; margin: 0 calc(-1 * var(--kt-gutter)); padding: 0 var(--kt-gutter); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kt-side__list::-webkit-scrollbar { display: none; }
.kt-side__grp { display: none; }
@media (max-width: 1023px) {
  .kt-side__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* the store's terms, privacy and contact (shell.js), where its footer used to carry them */
.kt-legal { display: flex; flex-wrap: wrap; gap: 0 24px; padding-top: 16px; border-top: 1px solid var(--kc-hairline); font-size: 13px; line-height: 1.45; }
.kt-legal a { display: inline-flex; align-items: center; min-height: var(--kt-target); color: var(--kc-muted); text-underline-offset: 3px; }
.kt-legal a:hover { color: var(--kc-text); }
.kt-main { min-width: 0; padding: 24px var(--kt-gutter) 64px; display: grid; gap: 32px; align-content: start; }
.kt-main.is-tool { gap: 24px; }

.kt-nav { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: var(--kt-target); padding: 0 16px 0 8px; border: 1px solid var(--kc-border); border-radius: var(--kc-radius-pill); background: var(--kc-card); color: var(--kc-muted); font: 500 14px/1.35 var(--kc-body); white-space: nowrap; text-align: left; text-decoration: none; cursor: pointer; transition: background var(--kc-hover), color var(--kc-hover); }
.kt-nav:hover { background: var(--kc-raised); color: var(--kc-text); }
.kt-nav[aria-current="page"] { background: var(--kc-raised); color: var(--kc-text); border-color: var(--kc-red-edge); }
.kt-nav:focus-visible { outline-offset: -4px; }
.kt-nav .kt-tile--sm { width: 28px; height: 28px; border-radius: var(--kc-radius-control); }
.kt-nav .kt-tile--sm svg { width: 16px; height: 16px; }
.kt-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kt-nav__end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--kc-muted); }
.kt-nav__end svg { width: 16px; height: 16px; }
.kt-nav.is-member .kt-nav__end { color: var(--kt-member); }
.kt-nav[aria-disabled="true"] { cursor: default; }

/* Vector (design/vector.js). His face is a state, never decoration: only where
   something is happening. Sizes from his spec: 32 lowest that reports, 40
   default, 88 empty surfaces. Red ink by default; bone near a red button. */
vector-mark { flex: none; }
.kt-vec-row { display: flex; align-items: center; gap: 12px; }
.kt-vec-row > span, .kt-vec-row > b { min-width: 0; }
.kt-vec--bone { --vector-ink: var(--kt-vector-bone); }

/* The feedback button and dialog (each tool's feedback.js) style themselves with
   their own names, and fall back to old values where a page does not define them,
   including a darker focus blue. Mapped here to the design systems, so the dialog
   follows the store on every tool. Its fields also needed border-box: outside
   .kt-root nothing set it, and the email box ran past the dialog's edge. */
.kcfb-btn, .kcfb-overlay {
  --accent: var(--kc-red-button); --panel: var(--kc-card); --raised: var(--kc-raised); --deep: var(--kc-raised);
  --ink: var(--kc-text); --head: var(--kc-heading); --muted: var(--kc-muted); --faint: var(--kc-muted);
  --rule-in: var(--kc-hairline); --rule-hi: var(--kc-line-ui); --focus: var(--kc-focus); --green: var(--kc-ok);
  --display: var(--kc-display); --body: var(--kc-body); --mono: var(--kc-mono);
  --radius: var(--kc-radius-panel); --radius-sm: var(--kc-radius-control);
}
.kcfb-overlay *, .kcfb-overlay *::before, .kcfb-overlay *::after { box-sizing: border-box; }
/* Vector in the dialog only while something is happening (sending, or it failed); set by feedback.js with the words */
.kcfb-overlay #kcfb-vec:not([data-on]) { display: none !important; }

/* staging note (shell.js), only off kineticcarving.com */
.kt-staging { margin: 0; padding: 8px var(--kt-gutter); border-top: 1px solid var(--kc-hairline); border-bottom: 1px solid var(--kt-billing); background: var(--kc-card); color: var(--kc-prose); font: 400 13px/1.45 var(--kc-body); }

/* account: the chip at the end of the phone row, the block at the foot of the sidebar */
.kt-side__acct { grid-area: acct; flex: none; }
.kt-acct { display: flex; align-items: center; gap: 8px; min-height: var(--kt-target); padding: 4px 12px 4px 4px; border: 1px solid var(--kc-border); border-radius: var(--kc-radius-pill); background: var(--kc-card); color: var(--kc-text); text-decoration: none; }
a.kt-acct:hover { background: var(--kc-raised); }
.kt-acct__av { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--kc-radius-pill); background: var(--kc-raised); border: 1px solid var(--kc-line-ui); color: var(--kc-text); font: 600 15px/1 var(--kc-body); position: relative; }
.kt-acct__av svg { width: 20px; height: 20px; color: var(--kc-muted); }
.kt-acct__av.is-member { border: 1.5px solid var(--kt-member-edge); }
.kt-acct__av.is-billing::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: var(--kc-radius-pill); background: var(--kt-billing); border: 2px solid var(--kc-ground); }
.kt-acct__text { display: grid; gap: 0; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--kc-muted); }
.kt-acct__text > b { font-weight: 600; font-size: 14px; color: var(--kc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-acct__text > span:not(.kt-acct__credits) { white-space: nowrap; }
.kt-acct__credits { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kt-acct__credits b { color: var(--kc-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.kt-acct__warn { color: var(--kt-billing); }
.kt-acct__go { color: var(--kc-text); text-decoration: underline; text-underline-offset: 3px; }
.kt-acct__act { min-height: 0; font-size: 13px; justify-self: start; }
.kt-acct--err .kt-acct__av svg { color: var(--kc-red); }
.kt-acct--skel .kt-acct__text i { display: block; width: 72px; height: 10px; margin: 4px 0; border-radius: var(--kc-radius-tag); background: var(--kc-raised); }
.kt-token { display: inline-block; flex: none; vertical-align: -0.15em; }
/* the phone chip keeps the name off: avatar and credits only */
@media (max-width: 1023px) {
  .kt-acct__text > b, .kt-acct__text > span:not(.kt-acct__credits):not(.kt-acct__warn), .kt-acct__go, .kt-acct--signin .kt-acct__text > span { display: none; }
  .kt-acct--signin .kt-acct__text > b { display: block; }
  .kt-acct--err .kt-acct__text > b { display: none; }
}

@media (min-width: 1024px) {
  :root { --kt-rail-w: 72px; }
  .kt-shell { grid-template-columns: var(--kt-side-w) minmax(0, 1fr); transition: grid-template-columns 0.2s ease; }
  .kt-shell.is-collapsed { grid-template-columns: var(--kt-rail-w) minmax(0, 1fr); }
  /* never scrolls: its height is what is left of the window below the shared header (shell.js sets --kt-top) */
  .kt-side { position: sticky; top: 0; height: calc(100vh - var(--kt-top, 0px)); height: calc(100dvh - var(--kt-top, 0px)); border-bottom: 0; background: none; overflow: visible; }
  .kt-side__in { position: absolute; inset: 0 auto 0 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 12px; background: var(--kc-ground); border-right: 1px solid var(--kc-hairline); overflow: hidden; transition: width 0.2s ease, box-shadow 0.2s ease; }
  .kt-side__back { justify-content: flex-start; padding: 0 12px; margin-bottom: 4px; }
  .kt-side__top { margin-bottom: 8px; padding-left: 8px; }
  .kt-side__toggle { width: var(--kt-target); height: var(--kt-target); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--kc-radius-control); background: none; color: var(--kc-muted); cursor: pointer; transition: background var(--kc-hover), color var(--kc-hover); }
  .kt-side__toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--kc-text); }
  .kt-side__toggle svg { width: 20px; height: 20px; }
  .kt-side__list { flex: 1 1 auto; flex-direction: column; overflow: hidden; gap: 4px; margin: 0; padding: 0; }
  /* the break before members tools: a hairline, no title (Reg, 2026-09-26). The words stay for screen readers. */
  .kt-side__grp { display: block; height: 1.5px; margin: 12px 12px 8px; border-radius: var(--kc-radius-pill); background: var(--kc-hairline); }
  .kt-side__grp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kt-nav { border: 0; border-radius: var(--kc-radius-control); background: none; padding: 8px 12px 8px 8px; }
  .kt-nav::before { content: ""; position: absolute; left: -12px; top: 50%; translate: 0 -50%; width: 3px; height: 24px; border-radius: var(--kc-radius-pill); background: transparent; }
  .kt-nav[aria-current="page"] { font-weight: 600; }
  .kt-nav[aria-current="page"]::before { background: var(--kc-red); }
  .kt-side__acct { padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--kc-hairline); }
  .kt-acct { border: 0; border-radius: var(--kc-radius-callout); background: none; padding: 4px; gap: 12px; }
  .kt-main { padding: 48px var(--kt-gutter) 96px; gap: 40px; }
  .kt-main.is-tool { padding-top: 32px; gap: 24px; }

  /* collapsed: icons only. Words are hidden from sight, never from screen readers */
  .kt-shell.is-collapsed .kt-side__in { width: var(--kt-rail-w); }
  .kt-shell.is-collapsed .kt-side__top { justify-content: center; padding-left: 0; }
  .kt-shell.is-collapsed:not(.is-peek) .kt-side__brand { display: none; }
  .kt-shell.is-collapsed:not(.is-peek) .kt-side__back span,
  .kt-shell.is-collapsed:not(.is-peek) .kt-nav__label,
  .kt-shell.is-collapsed:not(.is-peek) .kt-nav__end,
  .kt-shell.is-collapsed:not(.is-peek) .kt-acct__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kt-shell.is-collapsed:not(.is-peek) .kt-nav { justify-content: center; padding: 8px; }
  .kt-shell.is-collapsed:not(.is-peek) .kt-acct { justify-content: center; }
  .kt-shell.is-collapsed:not(.is-peek) .kt-side__back { justify-content: center; padding: 0; }
  /* hover or focus: opens over the page, nothing underneath moves */
  .kt-shell.is-peek .kt-side__in { width: var(--kt-side-w); z-index: 30; box-shadow: var(--kt-float-shadow); }
  .kt-shell.is-peek .kt-side__top { justify-content: space-between; padding-left: 8px; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .kt-shell, .kt-side__in { transition: none; }
}

/* Moving between KC Tools pages. Each tool is its own page (its engine keeps its
   own globals), so the browser carries one page into the next: the old page
   stays on screen until the new one is ready, the sidebar holds still and
   resizes in place (open on the dashboard, a rail on tools), and the main area
   cross-fades. Browsers without it simply navigate. shell.js also loads the
   next page ahead on hover (speculation rules). */
@view-transition { navigation: auto; }
.kt-side__in { view-transition-name: kt-side; }
.kt-main { view-transition-name: kt-main; }
::view-transition-group(kt-side), ::view-transition-group(kt-main) { animation-duration: 0.2s; overflow: clip; }
::view-transition-old(kt-side), ::view-transition-new(kt-side),
::view-transition-old(kt-main), ::view-transition-new(kt-main) { width: 100%; height: 100%; object-fit: none; object-position: left top; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------------- tool card (the store's tools card, access variants) */
.kt-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); gap: 16px; }
.kt-card { position: relative; overflow: clip; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--kc-radius-card); background: var(--kc-card); border: 1px solid var(--kc-border); }
@media (min-width: 768px) { .kt-card { padding: 24px; } }
.kt-card__title { margin: 0; font: 600 17px/1.25 var(--kc-body); text-transform: uppercase; letter-spacing: -0.03em; color: var(--kc-text); }
.kt-card__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--kc-muted); }
.kt-card__copy { display: grid; gap: 8px; }
.kt-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kt-ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--kc-prose); }
.kt-ticks svg { width: 16px; height: 16px; flex: none; transform: translateY(2px); color: var(--kt-open); }
.kt-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--kc-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kt-card__static { display: inline-flex; align-items: center; min-height: var(--kt-target); font-size: 13px; color: var(--kc-muted); }
/* the gold edge, glow and footer line: only for a visitor (the dashboard sets is-member on a card the viewer
   cannot open yet). Members see the ribbon alone, as on the store's own members-only cards. */
.kt-card.is-member { border: 1.5px solid var(--kt-member-edge); box-shadow: var(--kt-member-glow); }
.kt-card.is-member .kt-card__foot { border-top-color: var(--kt-member-line); }
.kt-card.is-soon { border-color: var(--kt-soon-edge); }
.kt-card.is-member .kt-card__copy, .kt-card.is-soon .kt-card__copy { padding-right: 24px; }
.kt-ribbon { position: absolute; top: 0; right: 0; width: 90px; height: 90px; overflow: hidden; pointer-events: none; }
.kt-ribbon span { position: absolute; display: block; width: 140px; padding: 4px 0; right: -35px; top: 22px; transform: rotate(45deg); background: linear-gradient(135deg, var(--kt-member), var(--kt-member-deep)); color: #1a1a1a; font: 800 9px/1.4 var(--kc-body); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.kt-ribbon.is-soon span { background: var(--kc-red-button); color: #ffffff; }

/* ---------------- gates: what a /v1/check refusal shows */
.kt-gate { display: grid; gap: 16px; align-content: start; padding: 24px; border-radius: var(--kc-radius-card); background: var(--kc-card); border: 1px solid var(--kc-border); }
.kt-gate.is-member { border: 1.5px solid var(--kt-member-edge); box-shadow: var(--kt-member-glow); }
.kt-gate.is-billing { border-color: var(--kt-billing); }
.kt-gate p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--kc-prose); max-width: 60ch; }
.kt-gate__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* gate (tool-api.js): while the answer is on its way, or it is a no, the tool's own parts stay out of sight */
.kt-checking [data-kt-tool-body], .kt-gated [data-kt-tool-body] { display: none !important; }
.kt-gate-host { max-width: 640px; }
.kt-gate-skel { display: grid; gap: 8px; }
.kt-gate-skel i { display: block; height: 12px; border-radius: var(--kc-radius-tag); background: var(--kc-raised); }
.kt-gate-skel i:first-child { width: 60%; height: 20px; }
.kt-gate-skel i:last-child { width: 85%; }
@media (prefers-reduced-motion: no-preference) { .kt-gate-skel i { animation: kt-pulse 1.4s ease-in-out infinite; } }

/* ---------------- list states */
.kt-notice { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 12px 16px; border-radius: var(--kc-radius-callout); font-size: 14px; line-height: 1.45; }
.kt-notice > svg { grid-row: span 2; width: 20px; height: 20px; }
.kt-notice b { font-weight: 600; color: var(--kc-text); }
.kt-notice span { color: var(--kc-muted); }
.kt-notice__act { grid-column: 2; margin-top: 8px; }
.kt-notice--err { background: var(--kc-red-tint); border: 1px solid var(--kc-red-edge); }
.kt-notice--err > svg { color: var(--kc-red); }
.kt-notice--vec { grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
.kt-notice--vec > vector-mark { grid-row: span 2; }
.kt-notice--stale { background: var(--kc-raised); border: 1px solid var(--kc-hairline); }
.kt-notice--stale > svg { color: var(--kc-muted); }
.kt-skel { min-height: 240px; display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--kc-radius-card); background: var(--kc-card); border: 1px solid var(--kc-border); }
.kt-skel i, .kt-skel-row i { display: block; height: 12px; border-radius: var(--kc-radius-tag); background: var(--kc-raised); }
.kt-skel i:first-child { width: 44px; height: 44px; border-radius: var(--kc-radius-panel); }
.kt-skel i:nth-child(2) { width: 50%; height: 16px; }
.kt-skel i:nth-child(3) { width: 80%; }
.kt-skel i:nth-child(4) { width: 64%; }
.kt-skel-row { display: flex; align-items: center; gap: 12px; min-height: var(--kt-target); padding: 0 8px; }
.kt-skel-row i:first-child { width: 28px; height: 28px; border-radius: var(--kc-radius-control); }
.kt-skel-row i:last-child { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .kt-skel i, .kt-skel-row i { animation: kt-pulse 1.4s ease-in-out infinite; }
  @keyframes kt-pulse { 50% { opacity: 0.45; } }
}

/* ---------------- workspace: head, preview, controls */
.kt-ws { display: grid; gap: 24px; min-width: 0; }
.kt-ws__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.kt-ws__name { margin: 0; font: 600 clamp(24px, 3vw, 36px)/1 var(--kc-display); letter-spacing: -0.03em; text-transform: uppercase; }
.kt-ws__namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kt-ws__file { margin-top: 4px; }
@media (max-width: 599px) { .kt-ws__head { grid-template-columns: auto minmax(0, 1fr); } .kt-ws__headacts { grid-column: 1 / -1; } }
.kt-ws__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .kt-ws__grid { grid-template-columns: minmax(0, 1fr) var(--kt-panel-w); gap: 24px; } }
.kt-view { min-width: 0; overflow: hidden; border-radius: var(--kc-radius-panel); background: var(--kc-card); border: 1px solid var(--kc-hairline); }
.kt-view__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid var(--kc-hairline); }
.kt-stage { width: 100%; aspect-ratio: 4 / 3; max-height: 64vh; display: grid; place-items: center; padding: 24px; }
.kt-stage svg { width: 100%; height: 100%; max-height: 56vh; }
.kt-stage--white { background: #ffffff; }
.kt-stage--black { background: #000000; }
.kt-checker { background-color: var(--kt-stage-checker-a); background-image: linear-gradient(45deg, var(--kt-stage-checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--kt-stage-checker-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--kt-stage-checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--kt-stage-checker-b) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.kt-view__status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; border-top: 1px solid var(--kc-hairline); font-size: 14px; color: var(--kc-prose); }
.kt-panel { display: grid; border-radius: var(--kc-radius-panel); background: var(--kc-card); border: 1px solid var(--kc-hairline); }
.kt-panel__grp { display: grid; gap: 12px; padding: 16px; }
.kt-panel__grp + .kt-panel__grp { border-top: 1px solid var(--kc-hairline); }
.kt-panel__h { margin: 0; font: 600 16px/1.2 var(--kc-display); letter-spacing: -0.02em; text-transform: uppercase; color: var(--kc-heading); }

/* controls */
.kt-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--kc-radius-callout); background: var(--kc-ground); border: 1px solid var(--kc-hairline); }
.kt-panel .kt-seg { display: flex; }
.kt-panel .kt-seg button { flex: 1 1 0; }
.kt-seg button { position: relative; min-height: 36px; min-width: var(--kt-target); padding: 0 12px; border: 0; border-radius: var(--kc-radius-control); background: none; color: var(--kc-muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.kt-seg button::after { content: ""; position: absolute; inset: -4px 0; } /* 44px hit area on a 36px control */
.kt-seg button:hover { color: var(--kc-text); }
.kt-seg button[aria-pressed="true"] { background: var(--kc-raised); color: var(--kc-text); box-shadow: inset 0 0 0 1px var(--kc-line-ui); }
.kt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-chip { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: var(--kt-target); padding: 8px 12px; border: 1px solid var(--kc-hairline); border-radius: var(--kc-radius-pill); background: var(--kc-raised); color: var(--kc-text); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--kc-hover); }
.kt-chip:hover { border-color: var(--kc-line-hover); }
.kt-chip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.10); border-color: var(--kc-text); box-shadow: inset 0 0 0 1px var(--kc-text); }
.kt-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: var(--kt-target); padding: 0 12px; font-size: 14px; color: var(--kc-prose); cursor: pointer; }
.kt-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--kc-red-button); }
.kt-color { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--kc-prose); }
.kt-color input { width: 56px; height: var(--kt-target); padding: 4px; border-radius: var(--kc-radius-callout); border: 1px solid var(--kc-hairline); background: var(--kc-raised); cursor: pointer; }
.kt-drop { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; text-align: center; border: 1px dashed var(--kc-hairline); border-radius: var(--kc-radius-panel); cursor: pointer; transition: border-color var(--kc-hover), background var(--kc-hover); }
.kt-drop:hover { border-color: var(--kc-line-hover); background: rgba(255, 255, 255, 0.03); }
.kt-drop svg { width: 28px; height: 28px; color: var(--kc-muted); }
.kt-dl { display: grid; gap: 8px; }
.kt-dl > .kt-btn-red, .kt-dl__row .kt-btn-2 { width: 100%; }
.kt-dl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kt-dl__row .kt-btn-2 { padding: 0 12px; }
.kt-result { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: var(--kc-radius-callout); background: var(--kc-raised); border: 1px solid var(--kc-hairline); }
.kt-result__thumb { width: 72px; height: 72px; border-radius: var(--kc-radius-control); overflow: hidden; display: grid; place-items: center; }
.kt-result__thumb img { width: 100%; height: 100%; object-fit: contain; }
.kt-result b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.kt-result span { display: block; font-size: 13px; line-height: 1.45; color: var(--kc-muted); }

/* before and after, for a tool's intro */
.kt-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kt-ba figure { margin: 0; display: grid; gap: 8px; }
.kt-ba__stage { aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; padding: 12px; border-radius: var(--kc-radius-panel); border: 1px solid var(--kc-hairline); }
.kt-ba__stage svg { width: 100%; height: 100%; }
.kt-ba figcaption { font-size: 13px; color: var(--kc-muted); }