/* Zicky components. Built only from tokens.css. Prefix: zk-. See DESIGN.md. */

/* Frame: the hairline column box every section sits in. */
.zk-frame { max-width: var(--frame); margin: 0 auto; border-inline: 1px solid var(--hair); }
.zk-night { background: var(--night); color: var(--on-night); }
.zk-night .zk-frame { border-color: var(--night-line); }

/* Label: mono, uppercase, "// " prefix written in the markup. */
.zk-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.zk-night .zk-label { color: var(--on-night-muted); }

/* Square: the cobalt full stop from the wordmark, used as a marker. */
.zk-sq { display: block; width: 8px; height: 8px; background: var(--cobalt); }

/* Wordmark */
.zk-wordmark { display: block; height: 22px; width: auto; }

/* Buttons: square-ish, black on paper, white on night. */
.zk-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; padding: 0 18px;
  border-radius: var(--radius-sm); font: 500 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  background: var(--ink); color: var(--paper); transition: background .15s, color .15s; }
.zk-btn:hover { background: var(--cobalt); color: #fff; }
.zk-night .zk-btn { background: var(--on-night); color: var(--night); }
.zk-night .zk-btn:hover { background: var(--cobalt); color: #fff; }
.zk-btn--sm { min-height: 40px; padding: 0 16px; gap: 16px; }
.zk-link { display: inline-flex; gap: 8px; color: inherit; text-decoration: none; font: 500 15px/1 var(--font-sans);
  border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.zk-link:hover { color: var(--cobalt); }
.zk-night .zk-link:hover { color: var(--cobalt-on-night); }
:where(a, button):focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
/* Cobalt is 2.9:1 on night; the lighter cobalt keeps the focus ring above 3:1 (7.6:1) on dark bands. */
.zk-night :where(a, button):focus-visible { outline-color: var(--cobalt-on-night); }

/* Code block: header bar with a label, mono body. */
.zk-code { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-md); overflow: hidden; min-width: 0; }
.zk-code__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.zk-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13px/1.6 var(--font-mono); color: var(--ink); }

/* Status chip */
.zk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-sm);
  font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.zk-chip::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.zk-chip--written { background: var(--written-soft); color: var(--written); }
.zk-chip--review { background: var(--review-soft); color: var(--review); }
.zk-chip--manual { background: var(--manual-soft); color: var(--manual); }

/* Confidence bar */
.zk-conf { display: inline-flex; align-items: center; gap: 8px; font: 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.zk-conf__bar { width: 56px; height: 3px; background: var(--hair); position: relative; }
.zk-conf__bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.zk-conf--low .zk-conf__bar i { background: var(--review); }