/* owned by the pro-themes builder (docs/pro-contract.md): themes gallery + builder, command palette,
   Pro settings page. Colours only through variables. */

/* Pro variables for the default look (themes override them inline on :root). */
:root {
  --caret: var(--primary);
  --sub: var(--muted);
  --error-extra: color-mix(in srgb, var(--bad) 70%, var(--text));
  /* text on filled keys/fills; the default look keeps style.css's white */
  --on-bad: #fff; --on-good: #fff; --on-hint: #fff; --on-target: #fff; --on-wrong: #fff;
}
/* Use the theme's readable text colour on filled surfaces (style.css hard-codes white). */
.ch.error, .ch.error.current { color: var(--on-bad); }
.btn-good { color: var(--on-good); }
.kb-key.kb-hint { color: var(--on-hint); }
.kb-key.kb-target { color: var(--on-target); }
.kb-key.kb-wrong { color: var(--on-wrong); }

/* ---------- shared toolbar ---------- */
.kt-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.kt-search {
  flex: 1 1 220px; min-width: 0; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
}
.kt-search:focus-visible, .kt-io:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.kt-filters { display: flex; gap: 4px; }
.kt-filter[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.kt-count { margin: 4px 0 10px; }

/* ---------- gallery ---------- */
.kt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kt-card {
  position: relative; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: transform 0.12s;
}
.kt-card:hover { transform: translateY(-2px); }
.kt-card.kt-current { outline: 3px solid var(--primary); outline-offset: 2px; }
.kt-apply {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; text-align: left;
  background: transparent; color: var(--text); border: 0; font: inherit; cursor: pointer;
}
.kt-apply:focus-visible, .kt-fav:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.kt-name { font-weight: 700; padding-right: 28px; }
.kt-kind { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kt-fav {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 1rem;
}
.kt-fav[aria-pressed="true"] { color: var(--warn); border-color: var(--warn); }
.kt-prev { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: calc(var(--radius) * 0.7); padding: 10px; border: 1px solid var(--border); }
.kt-line { font: 0.95rem/1.4 var(--mono); white-space: nowrap; overflow: hidden; }
.kt-ok { color: var(--text); }
.kt-err { color: var(--bad); text-decoration: underline; }
.kt-extra { color: var(--error-extra); }
.kt-sub { color: var(--sub); }
.kt-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.2em; background: var(--caret); margin: 0 1px; }
.kt-keys { display: flex; gap: 3px; }
.kt-key {
  flex: 1; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 4px;
  font: 600 0.72rem var(--mono); color: var(--text); border: 1px solid var(--border);
}
.kz-L5 { background: var(--f-L5); } .kz-L4 { background: var(--f-L4); } .kz-L3 { background: var(--f-L3); } .kz-L2 { background: var(--f-L2); }
.kz-R2 { background: var(--f-R2); } .kz-R3 { background: var(--f-R3); } .kz-R4 { background: var(--f-R4); } .kz-R5 { background: var(--f-R5); }
.kt-key.kt-target { background: var(--key-target); color: var(--on-target); }
.kt-dots { display: flex; gap: 5px; }
.kt-dot { width: 12px; height: 12px; border-radius: 50%; }
.kd-primary { background: var(--primary); } .kd-good { background: var(--good); } .kd-warn { background: var(--warn); } .kd-bad { background: var(--bad); }

/* ---------- builder ---------- */
.kt-status { min-height: 1.5em; color: var(--muted); }
.kt-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.kt-controls { display: flex; flex-direction: column; gap: 12px; }
.kt-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.kt-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 8px 12px 12px; margin: 0; }
.kt-group legend { font-weight: 700; padding: 0 6px; }
.kt-var { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.88rem; }
.kt-vname { font-family: var(--mono); color: var(--muted); }
.kt-pick { display: inline-flex; align-items: center; gap: 6px; }
.kt-pick input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.kt-hex { width: 8.5em; font: 0.85rem var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.kt-wide { width: 14em; }
.kt-bside { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 12px; }
.kt-bpreview { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow: hidden; }
.kt-bpreview .typing-area { margin-top: 10px; }
.kt-bpreview .typing-text { font-size: 1.15rem; }
.kt-bpreview .typing-area:not(:focus-within) .typing-text::after { content: none; }
.kt-bbar { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; }
.kt-bnav { display: flex; gap: 10px; }
.kt-bnav a { color: var(--muted); text-decoration: none; }
.kt-bnav a.active { color: var(--primary); }
.kt-bcaret { display: inline-block; width: 3px; height: 1.2em; vertical-align: -0.25em; background: var(--caret); }
.kt-bsub { color: var(--sub); }
.kt-bextra { color: var(--error-extra); }
.kt-bgood { color: var(--good); } .kt-bwarn { color: var(--warn); } .kt-bbad { color: var(--bad); }
.kt-bgame { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--game-bg); font-weight: 700; }
.kt-bgfg { color: var(--game-fg); } .kt-bgacc { color: var(--game-accent); } .kt-bgdanger { color: var(--game-danger); } .kt-bggood { color: var(--game-good); }
.kt-audit { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; max-height: 420px; overflow: auto; }
.kt-audit h3 { margin: 0 0 8px; font-size: 1rem; }
.kt-audit-table { font-size: 0.82rem; }
.kt-audit-table td, .kt-audit-table th { padding: 4px 6px; }
.kt-fail td { color: var(--bad); font-weight: 600; }
.kt-io { width: 100%; margin-top: 12px; font: 0.82rem var(--mono); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
@media (max-width: 860px) {
  .kt-builder { grid-template-columns: 1fr; }
  .kt-bside { position: static; }
}

/* ---------- command palette ---------- */
.cp-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start;
  padding: 10vh 16px 16px; background: color-mix(in srgb, var(--bg) 75%, transparent);
}
.cp-backdrop[hidden] { display: none; }
.cp-panel {
  width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--text) 25%, transparent);
}
.cp-title { padding: 10px 14px 0; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cp-input {
  margin: 8px 12px; padding: 10px 12px; font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.cp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.cp-list { overflow-y: auto; padding: 0 6px 6px; }
.cp-group { padding: 8px 10px 2px; font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cp-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.cp-item[aria-selected="true"] { background: var(--primary); color: var(--primary-text); }
.cp-item[aria-selected="true"] .cp-hint, .cp-item[aria-selected="true"] .cp-badge { color: var(--primary-text); border-color: var(--primary-text); }
.cp-check { width: 1em; flex: none; color: inherit; }
.cp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-hint { color: var(--muted); font-size: 0.82rem; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-badge { font-size: 0.8rem; color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: 0 6px; white-space: nowrap; }
.cp-empty { padding: 14px; color: var(--muted); }
.cp-help { padding: 6px 12px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--muted); }

/* ---------- Pro settings ---------- */
.ks-settings .ks-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px 12px; margin: 16px 0; scroll-margin-top: 70px; }
.ks-settings .ks-group > h2 { margin-top: 14px; }
.ks-jump { display: flex; flex-wrap: wrap; gap: 4px; }
.ks-jump a { font-size: 0.85rem; padding: 3px 8px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.ks-jump a:hover { background: var(--surface-2); color: var(--text); }
.ks-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.ks-text { flex: 1 1 260px; min-width: 0; }
.ks-label { font-weight: 600; }
.ks-desc { margin: 2px 0 0; font-size: 0.88rem; }
.ks-key { font-family: var(--mono); }
.ks-control { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; flex: 0 1 auto; }
.ks-control input[type="text"], .ks-control input[type="number"], .ks-control textarea, .ks-settings .actions input[type="text"] {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
}
.ks-control input[type="number"] { width: 7em; }
.ks-control textarea { width: min(420px, 80vw); }
.ks-switch { width: 1.2em; height: 1.2em; accent-color: var(--primary); }
.ks-control input[type="range"] { accent-color: var(--primary); }
.ks-multi { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 520px; justify-content: flex-end; }
.ks-presets { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ks-presets li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ks-status { min-height: 1.5em; color: var(--muted); }