/* cd_AI at the caret: the one look every platform draws (docs/design/design.md). The demo and the
   design lab (design.html) use it as is; the native input methods match it, skin by skin, to the
   pixel. A skin sets only the tokens: type, colours, shape, and the key names. */

/* The reference skin: the demo's own palette. Muted text is at least 4.5:1 on the surface, the
   suggestion at least 3:1 on the page. */
.kit{
  --k-font:system-ui,-apple-system,'Segoe UI',sans-serif;--k-size:15px;--k-small:12.5px;--k-line:1.4;
  --k-surface:#fbfaf6;--k-text:#141413;--k-muted:#6b6a64;--k-ghost:#8c8a83;--k-sel-mix:7%;
  --k-accent:#d97757;--k-select:#d97757;--k-error:#b3261e;--k-border:#d6d3c8;--k-shadow:0 8px 24px rgba(20,20,19,.12),0 1px 3px rgba(20,20,19,.08);
  --k-radius:10px;--k-row-radius:6px;--k-pad:4px;--k-row-x:9px;--k-row-y:5px;--k-gap:10px;--k-backdrop:none;
  --k-min:240px;--k-max:440px;--k-cap-border:1px solid #8f8c84;--k-cap-pad:1px 5px;--k-cap-size:var(--k-small);
}
:root[data-theme="dark"] .kit,.kit.dark{
  --k-surface:#262522;--k-text:#faf9f5;--k-muted:#b0aea5;--k-ghost:#8a887f;--k-sel-mix:11%;--k-error:#f2b8b5;
  --k-border:#4d4a43;--k-shadow:0 10px 28px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4);--k-cap-border:1px solid #87857e;
}

/* Your words and the machine's never look alike, by means every platform has. The composition is
   the platform's own: one plain underline (macOS cannot colour it; Wayland cannot style it at all).
   The suggestion is cd_AI's own text after the caret, in its UI font at the caret's height (only
   macOS reports the app's font), and only at the end of a line, so it never covers your text. */
.k-ghost{color:var(--k-ghost);font-family:var(--k-font)}
.k-comp{text-decoration:underline solid currentColor;text-decoration-thickness:1px;text-underline-offset:.2em}

/* The panel next to the caret, one anatomy for every state: an optional header (a small label for
   who asks or what this is, then the content as is), the rows (the highlighted one tinted, with
   an accent bar and the key that takes it, so it never depends on colour alone), and one footer:
   the AI tile, then each key with its verb. Sized to its content. */
.k-panel{position:absolute;z-index:3;box-sizing:border-box;min-width:min(var(--k-min),calc(100% - 24px));max-width:min(var(--k-max),calc(100% - 24px));width:max-content;
  padding:var(--k-pad);background:var(--k-surface);color:var(--k-text);border:1px solid var(--k-border);
  border-radius:var(--k-radius);box-shadow:var(--k-shadow);-webkit-backdrop-filter:var(--k-backdrop);backdrop-filter:var(--k-backdrop);
  font-family:var(--k-font);font-size:var(--k-size);line-height:var(--k-line);text-align:left;font-synthesis:none}
.k-panel.bare{min-width:0}
.k-head{padding:calc(var(--k-row-y) + 1px) var(--k-row-x) var(--k-row-y)}
/* While you type a reply (at the caret), the choices fade: muted, still readable (4.5:1). */
.k-panel.replying .k-row .k-text{color:var(--k-muted)}
/* The exchange so far: your earlier turns, one line each. Your words at full size and colour,
   underlined as they were at the caret (your composition, moved into the panel); the label is the
   muted part. The current turn below. */
.k-turn .k-label{display:inline;margin-right:6px}
.k-turn .k-body{display:inline;color:var(--k-text);text-decoration:underline solid color-mix(in srgb,var(--k-text) 45%,transparent);text-decoration-thickness:1px;text-underline-offset:.2em}
.k-turn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-turn .k-body,.k-turn .k-label{text-wrap:nowrap}  /* one line: text-wrap would wrap it again */
.k-turn+.k-turn{padding-top:0}
.k-turn+.k-head:not(.k-turn){padding-top:calc(var(--k-row-y) + 3px)}
.k-label{display:block;font-size:var(--k-small);font-weight:600;color:var(--k-muted);margin-bottom:2px}
.k-body{display:block;text-wrap:pretty}
.k-body.code{font-family:var(--k-mono,ui-monospace,SFMono-Regular,Consolas,monospace);font-size:.93em;overflow-wrap:anywhere}
.k-row{position:relative;display:flex;align-items:baseline;gap:var(--k-gap);padding:var(--k-row-y) var(--k-row-x);border-radius:var(--k-row-radius)}
.k-row:hover{background:color-mix(in srgb,var(--k-text) 5%,transparent)}
.k-row.on{background:color-mix(in srgb,var(--k-text) var(--k-sel-mix),var(--k-surface))}
.k-row.on::before{content:"";position:absolute;left:2px;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--k-select)}
/* A list with a highlight keeps a trailing column for its key on every row: the key never
   touches the text, and every row wraps at the same width. */
.k-panel.takes .k-row{padding-right:calc(var(--k-row-x) + var(--k-take-w,3.6em))}
.k-text{min-width:0;flex:1;text-wrap:pretty;overflow-wrap:anywhere}
.k-legend{color:var(--k-muted)}
.k-take{position:absolute;right:var(--k-row-x);top:50%;transform:translateY(-50%);font-size:var(--k-small);color:var(--k-muted)}
.k-take .k-cap{margin-right:0}
.k-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:var(--k-row-y) var(--k-row-x) calc(var(--k-row-y) - 1px);font-size:var(--k-small);color:var(--k-muted)}
.k-head+.k-foot,.k-row+.k-foot{margin-top:2px}
.k-hint{white-space:nowrap}
.k-cap{display:inline-block;font-size:var(--k-cap-size);font-weight:var(--k-cap-weight,inherit);line-height:1.25;padding:var(--k-cap-pad);margin-right:5px;border:var(--k-cap-border);border-radius:4px;color:var(--k-text)}
/* Enter on a draft: the row's Tab, lit until the next key (no animation; the footer is not lit). */
.k-cap.lit{background:var(--k-lit-bg,color-mix(in srgb,var(--k-select) 20%,var(--k-surface)));border:var(--k-lit-border,1px solid var(--k-select));
  color:var(--k-lit-color,var(--k-text));padding:var(--k-lit-pad,1px 5px);font-weight:var(--k-lit-weight,inherit)}
.k-mark{margin-left:auto;white-space:nowrap}
.k-status{color:var(--k-text)}
.k-status.failed{color:var(--k-error)}
.k-warn{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--k-error);color:var(--k-surface);font-size:12px;font-weight:700;line-height:1}
/* Working: a small ring before the words (the platform's own spinner where it has one). */
.k-spin{display:inline-block;width:.8em;height:.8em;margin-right:6px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--k-muted) 45%,transparent);border-top-color:var(--k-muted);vertical-align:-.1em;animation:k-spin .9s linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.k-spin{animation:none}}

/* A mode switch: the mode's tile and name, briefly, at the caret, in the panel's shape. */
.k-toast{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;background:var(--k-surface);color:var(--k-text);
  border:1px solid var(--k-border);border-radius:var(--k-radius);box-shadow:var(--k-shadow);font-family:var(--k-font);font-size:var(--k-small);white-space:nowrap}
.k-tile{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:4px;font-size:10px;font-weight:700;line-height:1}
.k-tile.ai,.k-tile.cd{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.k-tile.ai{background:#d97757;color:#fff}
.k-tile.cd{background:color-mix(in srgb,var(--k-text) 12%,var(--k-surface));color:var(--k-text)}

/* High contrast: the system's colours; the highlight keeps its bar and its key. */
@media (forced-colors:active){
  .k-panel,.k-toast{border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}
  .k-row.on{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .k-row.on .k-take,.k-row.on .k-legend{color:HighlightText}
  .k-row.on::before{background:HighlightText}
  .k-ghost{color:GrayText}
  .k-cap{border-color:CanvasText}
  .k-cap.lit{background:CanvasText;color:Canvas;forced-color-adjust:none}
  .k-row.on .k-cap.lit{background:HighlightText;color:Highlight}
}