/* Webdock gate: a calm, legible control panel for one person.

   Design plan
   - Job: the owner sees at a glance what is waiting, reads exactly what will run, and decides with one key
     touch. Legibility first; character comes from restraint, not ornament.
   - Colour: a cool grey-green ground with white panels; ink text; one amber lamp means "waiting for you",
     deep teal means "go", brick red means root, removal and danger. No gradients, no shadows.
   - Type: Inter (self-hosted, a sans drawn for screens at small sizes) for all UI text; DejaVu Sans Mono only
     for code, paths, user names, server slugs and hashes. Four sizes only: 13 (meta, code), 15 (body),
     18 (section titles), 24 (page titles). Meta text is never below 13px and meets WCAG AA in both themes.
   - Spacing: one 4px-based scale (4 8 12 16 24 32 48). One content column, 960px wide; panels hold rows
     separated by hairlines; label/value pairs sit in a two-column definition list with a fixed label column.
   - The decision bar at the end of a review is the one strong element: a slim panel the same width as the
     content, stuck to the bottom of the screen while you read.
*/
@font-face { font-family: "GateSans"; src: url("fonts/inter-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GateSans"; src: url("fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "GateMono"; src: url("fonts/dejavu-mono.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GateMono"; src: url("fonts/dejavu-mono-bold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  --bg: #F2F4F3;
  --panel: #FFFFFF;
  --sunk: #F6F8F7;
  --ink: #16232A;
  --muted: #4A5960;
  --line: #DDE3E1;
  --line-2: #C3CDCA;
  --teal: #17594D;
  --on-teal: #FFFFFF;
  --teal-soft: #E1F0EA;
  --amber: #8A5600;
  --lamp-amber: #C98A1A;
  --amber-soft: #FBF1DE;
  --brick: #A12C27;
  --on-brick: #FFFFFF;
  --brick-soft: #FBE9E7;
  --code: #F6F8F7;
  --add: #DFF1E7;
  --del: #FBE4E1;
  --focus: #1F5FA8;
  --sans: "GateSans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "GateMono", "DejaVu Sans Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-meta: 13px; --t-body: 15px; --t-h2: 18px; --t-h1: 24px;
  --lh-meta: 20px; --lh-body: 22px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 8px;
  --wrap: 960px;
  --label: 200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F171B; --panel: #151F24; --sunk: #1A262C; --ink: #E3EAE8; --muted: #A5B3B7; --line: #26343A; --line-2: #3A4A51;
    --teal: #4FB39C; --on-teal: #04130F; --teal-soft: #173A33; --amber: #E6AE52; --lamp-amber: #E6AE52; --amber-soft: #33280F;
    --brick: #F0968C; --on-brick: #1A0B0A; --brick-soft: #3A1F1D; --code: #10191D; --add: #15362A; --del: #3D2220;
    --focus: #8DB8EE; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F171B; --panel: #151F24; --sunk: #1A262C; --ink: #E3EAE8; --muted: #A5B3B7; --line: #26343A; --line-2: #3A4A51;
  --teal: #4FB39C; --on-teal: #04130F; --teal-soft: #173A33; --amber: #E6AE52; --lamp-amber: #E6AE52; --amber-soft: #33280F;
  --brick: #F0968C; --on-brick: #1A0B0A; --brick-soft: #3A1F1D; --code: #10191D; --add: #15362A; --del: #3D2220;
  --focus: #8DB8EE; color-scheme: dark;
}

/* ---- base ---- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/var(--lh-body) var(--sans);
  -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--panel); padding: var(--s2) var(--s3); z-index: 10; }
.skip:focus { left: var(--s2); }
code, .mono { font-family: var(--mono); font-size: var(--t-meta); }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
h1 { font-size: var(--t-h1); line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); line-height: 24px; font-weight: 600; }
h3 { font-size: var(--t-body); line-height: var(--lh-body); font-weight: 600; }
strong { font-weight: 600; }
.muted { color: var(--muted); }
.meta { color: var(--muted); font-size: var(--t-meta); line-height: var(--lh-meta); }
.err { color: var(--brick); }
.err:empty { display: none; }
.root { color: var(--brick); font-weight: 600; }
code.root { color: var(--brick); }

/* ---- frame ---- */
.wrap, #main { max-width: var(--wrap); margin: 0 auto; padding-left: var(--s5); padding-right: var(--s5); }
#top { background: var(--panel); border-bottom: 1px solid var(--line); }
.banner { background: var(--brick); color: var(--on-brick); text-align: center; padding: var(--s1) var(--s4); font-size: var(--t-meta); line-height: var(--lh-meta); }
.bar { display: flex; align-items: center; gap: var(--s5); min-height: 56px; }
.brand { font-weight: 600; text-decoration: none; }
nav.main { display: flex; gap: var(--s1); margin-left: auto; }
nav.main a { text-decoration: none; padding: var(--s2) var(--s3); color: var(--muted); border-radius: 6px; display: inline-flex; align-items: center; gap: var(--s2); }
nav.main a:hover { color: var(--ink); background: var(--sunk); }
nav.main a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--teal); border-radius: 0; }
.count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--lamp-amber); color: #1D1300; font-size: var(--t-meta); line-height: var(--lh-meta); text-align: center; font-weight: 600; }
#main { padding-top: var(--s6); padding-bottom: var(--s7); outline: none; }

/* ---- page structure ---- */
.head { margin-bottom: var(--s5); }
.head .lede { margin-top: var(--s2); color: var(--muted); max-width: 640px; }
.back { display: inline-block; margin-bottom: var(--s3); color: var(--muted); }
.sect { margin-top: var(--s6); }
.sect:first-child { margin-top: 0; }
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); flex-wrap: wrap; }
.sect-head .meta a { color: var(--muted); }
.stack > * + * { margin-top: var(--s3); }
.pad { padding: var(--s4); display: grid; gap: var(--s3); }
.pad ul { padding-left: 18px; }

/* ---- panels and rows ---- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel > * + * { border-top: 1px solid var(--line); }
.item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: start; padding: var(--s3) var(--s4); }
.item.nolamp { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.item > .lamp { margin-top: 6px; }
.item .body { min-width: 0; display: grid; gap: 2px; }
.item .title { font-weight: 600; overflow-wrap: anywhere; }
.item .act { display: flex; gap: var(--s2); align-items: center; }
.item .said { color: var(--ink); }
.empty { padding: var(--s4); color: var(--muted); }
.empty strong { color: var(--ink); }

/* table-like rows: a header row and aligned columns that fold into two lines on a phone */
.rows .r { display: grid; grid-template-columns: var(--cols); gap: var(--s1) var(--s4); align-items: center; padding: var(--s3) var(--s4); }
.rows .r.h { padding-top: var(--s2); padding-bottom: var(--s2); color: var(--muted); font-size: var(--t-meta); line-height: var(--lh-meta); background: var(--sunk); border-radius: var(--radius) var(--radius) 0 0; }
.rows .r > * { min-width: 0; overflow-wrap: anywhere; }
.rows .r .end { justify-self: end; }
.rows .r.open { background: var(--sunk); }
.t-recent { --cols: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1fr) 88px; }
.t-access { --cols: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr); }
.t-servers { --cols: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr) 76px; }
.t-hist { --cols: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.9fr) 120px; }
.ph { display: none; }
.cell-name { display: grid; }
.cell-name .meta { overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; gap: var(--s2); }
.flag { color: var(--brick); font-size: var(--t-meta); line-height: var(--lh-meta); }

/* ---- definition lists: label column + value column ---- */
.kv { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); }
.kv > dt, .kv > dd { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.kv > dt:first-of-type, .kv > dt:first-of-type + dd { border-top: 0; }
.kv > dt { color: var(--muted); padding-right: var(--s4); }
.kv > dd { min-width: 0; overflow-wrap: anywhere; }
.kv.tight > dt, .kv.tight > dd { padding: var(--s1) 0; border-top: 0; }
.panel > .kv { padding: var(--s2) var(--s4); }
code.server { font-weight: 600; }
.kv dd code { font-size: var(--t-body); }
.kv dd code.hash { font-size: var(--t-meta); }

/* ---- lamps: the only status colour device ---- */
.lamp { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.lamp.wait { background: var(--lamp-amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.lamp.go { background: var(--teal); }
.lamp.bad { background: var(--brick); }
.lamp.run { background: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .lamp.run { animation: breathe 1.6s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: 0.35; } }
}

/* ---- notes ---- */
.note { border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 6px; padding: var(--s3) var(--s4); background: var(--panel); }
.note.wait { border-color: var(--amber-soft); border-left-color: var(--lamp-amber); background: var(--amber-soft); }
.note.bad { border-color: var(--brick-soft); border-left-color: var(--brick); background: var(--brick-soft); }
.note .row { margin-top: var(--s2); }
.notes { display: grid; gap: var(--s2); margin-bottom: var(--s5); }

/* ---- buttons ---- */
.btn { font: inherit; font-weight: 600; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); min-height: 36px;
  padding: 6px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); white-space: nowrap; }
.btn:hover { border-color: var(--muted); color: var(--ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.go { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn.go:hover { color: var(--on-teal); }
.btn.danger { color: var(--brick); border-color: var(--brick); background: transparent; }
.btn.danger.solid { background: var(--brick); color: var(--on-brick); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); padding-left: var(--s2); padding-right: var(--s2); }
.btn.quiet:hover { color: var(--ink); background: var(--sunk); }
.btn.link { border: 0; background: none; min-height: 0; padding: 0; font-weight: 400; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.btn.big { min-height: 44px; padding: 10px 20px; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row > input[type="text"], .row > input[type="password"] { flex: 1 1 220px; width: auto; }
.key-icon { width: 18px; height: 18px; flex: none; }

/* ---- forms ---- */
label { display: block; }
.form { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); gap: var(--s4) 0; align-items: start; }
.form > .lbl { padding-top: 7px; color: var(--muted); padding-right: var(--s4); }
.form > .ctl { min-width: 0; display: grid; gap: var(--s2); justify-items: start; }
.form > .ctl.full { grid-column: 2; }
.hint { color: var(--muted); font-size: var(--t-meta); line-height: var(--lh-meta); max-width: 560px; }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px;
  min-height: 36px; padding: 6px 10px; width: 100%; max-width: 360px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input.code, textarea.code { font-family: var(--mono); font-size: var(--t-meta); }
textarea { max-width: 560px; }
input[type="number"] { width: 88px; }
select { width: auto; }
.check { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--teal); flex: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* the "What can Claude do here?" choice: one segmented control */
.choice { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; max-width: 100%; background: var(--panel); }
.choice label { position: relative; padding: 6px 14px; cursor: pointer; border-right: 1px solid var(--line-2); }
.choice label:last-child { border-right: 0; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice label:has(input:checked) { background: var(--ink); color: var(--panel); font-weight: 600; }
.choice label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.choice label:has(input:disabled) { color: var(--muted); cursor: not-allowed; background: var(--sunk); }

/* the inline editor under a server row */
.editor { padding: var(--s4); background: var(--sunk); }
.editor .actions { grid-column: 2; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ---- the review ---- */
.review-head { margin-bottom: var(--s5); }
.review-head h1 { margin-bottom: var(--s4); }
details.more > summary { cursor: pointer; padding: var(--s2) var(--s4); color: var(--muted); }
details.more[open] > summary + * { border-top: 1px solid var(--line); }
details.more > .kv { padding: var(--s2) var(--s4); }
.file { margin-top: var(--s4); overflow: hidden; }
.file > header { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4); background: var(--sunk); }
.file > header h3 { font-family: var(--mono); overflow-wrap: anywhere; margin-right: auto; }
.tags { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--muted); }
.tag.new, .tag.changed { color: var(--amber); font-weight: 600; }
.tag.root { color: var(--brick); font-weight: 600; }
.readstate { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.readstate::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); }
.readstate.done { color: var(--teal); font-weight: 600; }
.readstate.done::before { background: var(--teal); border-color: var(--teal); }
.file .info { padding: var(--s2) var(--s4); display: flex; gap: var(--s1) var(--s4); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.file .info .btn.link { font-size: var(--t-meta); line-height: var(--lh-meta); }
.file > .code { border-radius: 0; }
.file .read { padding: var(--s3) var(--s4); }
.file .read input:checked + span { color: var(--teal); font-weight: 600; }
.file > .note, .file > .warn { margin: var(--s3) var(--s4); }
.warn { border-left: 3px solid var(--brick); background: var(--brick-soft); padding: var(--s3) var(--s4); border-radius: 6px; display: grid; gap: var(--s2); }
.warn ul { padding-left: 18px; }

/* code: every line numbered; markers for hidden characters */
.code { background: var(--code); color: var(--ink); font: 400 var(--t-meta)/var(--lh-meta) var(--mono); padding: var(--s2) 0; overflow: hidden; }
.panel > .code + *, .panel > * + .code { border-top: 1px solid var(--line); }
.code .ln { display: grid; grid-template-columns: 4ch 1.5ch minmax(0, 1fr); gap: 1ch; padding: 0 var(--s4) 0 var(--s2); }
.code .n { color: var(--muted); text-align: right; user-select: none; }
.code .s { color: var(--muted); font-weight: 600; user-select: none; }
.code .t { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.code .ln.gap { color: var(--muted); font-style: italic; }
.code .ctl { color: var(--on-brick); background: var(--brick); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.code .tab { color: var(--amber); }
.code .ws { color: var(--brick); }
.code .add { background: var(--add); }
.code .add .s { color: var(--teal); }
.code .del { background: var(--del); }
.code .del .s { color: var(--brick); }
.code .del .t { text-decoration: line-through; text-decoration-color: var(--brick); }
.code.box { border: 1px solid var(--line); border-radius: var(--radius); }

/* the decision bar: slim, the width of the content, attached to the bottom of the screen */
.decide { position: sticky; bottom: var(--s3); margin: var(--s5) 0 var(--s3); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s5); align-items: center;
  padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 0 0 var(--s3) var(--bg); }
.decide .what { min-width: 0; display: grid; gap: 2px; }
.decide .sentence { font-weight: 600; overflow-wrap: anywhere; }
.decide .progress { color: var(--muted); font-size: var(--t-meta); line-height: var(--lh-meta); }
.decide .progress.done { color: var(--teal); font-weight: 600; }
.decide .err { grid-column: 1 / -1; }
.decide .row { flex-wrap: nowrap; }
.decide .field { grid-column: 1 / -1; display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.where { display: flex; flex-wrap: wrap; gap: 0 var(--s2); font-size: var(--t-meta); line-height: var(--lh-meta); }
.where dt { color: var(--muted); }
.where dd { margin-right: var(--s3); }
.where dd code { font-size: var(--t-meta); }
#main:has(.decide) { padding-bottom: 0; }

/* connector address */
.address { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.address code { background: var(--code); border: 1px solid var(--line); padding: 7px 10px; border-radius: 6px; overflow-wrap: anywhere; min-width: 0; }

/* sign-in, enrolment and consent: one decision in a narrow column */
.solo { max-width: 440px; margin: 10vh auto 0; display: grid; gap: var(--s4); }
.solo .host { font-family: var(--mono); font-size: var(--t-h2); line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.solo ul { padding-left: 18px; }

/* history */
.activity .r { --cols: 136px minmax(0, 1fr); align-items: start; }
.activity time { color: var(--muted); font-size: var(--t-meta); line-height: var(--lh-body); }
.detail { padding: var(--s4); background: var(--sunk); display: grid; gap: var(--s3); }
.detail .kv { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s4); }

/* dialog and toast */
dialog { border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--ink); padding: var(--s5);
  max-width: min(560px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: rgba(10, 18, 22, 0.55); }
dialog > * + * { margin-top: var(--s3); }
dialog .row { margin-top: var(--s4); }
dialog .code { border: 1px solid var(--line); border-radius: 6px; }
#toast { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); background: var(--ink); color: var(--panel);
  padding: 10px var(--s4); border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.2s; max-width: calc(100vw - 32px); z-index: 5; }
#toast.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* ---- phone ---- */
@media (max-width: 640px) {
  .wrap, #main { padding-left: var(--s4); padding-right: var(--s4); }
  #main { padding-top: var(--s5); }
  .bar { gap: 0; flex-wrap: wrap; min-height: 0; padding-top: var(--s3); }
  .brand { width: 100%; }
  nav.main { margin-left: calc(-1 * var(--s3)); }
  .kv { --label: 104px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .dt-only { display: none; }
  .form > .ctl > fieldset { justify-self: stretch; }
  .choice { display: grid; width: 100%; }
  .choice label { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 10px 14px; }
  .choice label:last-child { border-bottom: 0; }
  .form { gap: var(--s1) 0; }
  .form > .lbl { padding-top: var(--s3); }
  .form > .ctl.full, .editor .actions { grid-column: 1; }
  .editor .actions { margin-top: var(--s3); }
  .rows .r.h { display: none; }
  .ph { display: inline; }
  .rows .r { grid-template-columns: minmax(0, 1fr) auto; }
  .rows .r > .sub { grid-column: 1; font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--muted); }
  .rows .r > .sub:empty { display: none; }
  .rows .r > .end { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .activity .r { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .item { grid-template-columns: 12px minmax(0, 1fr); }
  .item.nolamp { grid-template-columns: minmax(0, 1fr); }
  .item .act { grid-column: 2; margin-top: var(--s2); }
  .item.nolamp .act { grid-column: 1; }
  .decide { grid-template-columns: minmax(0, 1fr); bottom: 0; margin: var(--s5) calc(-1 * var(--s4)) 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -8px 16px -10px rgba(15, 23, 27, 0.25); gap: var(--s2); padding: var(--s2) var(--s4) var(--s3); }
  .decide .sentence { display: none; }
  .decide .row .btn { flex: 1; }
  .decide .row .btn.go { flex: 2; }
  .file > header { padding: var(--s2) var(--s3); }
  .file .info, .file .read { padding-left: var(--s3); padding-right: var(--s3); }
  .code .ln { padding-right: var(--s2); padding-left: 0; gap: 0.75ch; grid-template-columns: 3ch 1.25ch minmax(0, 1fr); }
}
.solo .kv { --label: 104px; }
.kv > dt code { color: var(--ink); }