/* ============================================================
   QontraKey — embed stylesheet
   Same brand variables and keyboard-component styling as
   qontrakey.css, but WITHOUT the page-level rules (html/body/.wrap/
   demo chrome) that qontrakey.css includes for the standalone demo.
   Use this one when dropping QontraKey into an existing app (like
   QOSE Lab) that already has its own page layout — this only styles
   the #dock keyboard itself, nothing else on the page.
   ============================================================ */
:root{
  --qk-bg: #070B14;            /* QOSE --nb */
  --qk-panel: #0A1931;         /* QOSE --navy */
  --qk-line: rgba(0,212,255,0.16);   /* QOSE --bdr */
  --qk-text: #F2F5FA;          /* QOSE --sw */
  --qk-dim: #8A94A8;           /* QOSE --muted */
  --qk-accent: #00D4FF;        /* QOSE --cyan */
  --qk-accent-dim: rgba(0,212,255,0.16);
  --qk-armed: #8B5CF6;         /* QOSE --purple */
  --qk-armed-dim: rgba(139,92,246,0.16);
  --qk-lock: #FBBF24;          /* QOSE --amber */
  --qk-lock-dim: rgba(251,191,36,0.16);
  --qk-key: #2C3142;           /* QOSE --graph */
  --qk-key-active: #3a4056;
  --qk-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

#dock{ width:100%; background:var(--qk-panel); border:1px solid var(--qk-line); border-radius:10px; display:none; overflow:hidden; user-select:none; -webkit-user-select:none; }
#dock.show{ display:block; }
.dock-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--qk-line); cursor:pointer; }
.dock-head .tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--qk-accent); font-family:var(--qk-mono); }
.dock-head .hint{ font-size:11px; color:var(--qk-dim); font-family:var(--qk-mono); }
#kbBody{ padding:12px; }
#kbBody.collapsed{ display:none; }

#dock .row{ display:flex; gap:5px; margin-bottom:5px; }
#dock .key{ flex:1; height:38px; display:flex; align-items:center; justify-content:center; background:var(--qk-key); border:1px solid var(--qk-line); border-radius:6px; color:var(--qk-text); font-size:13px; font-family:var(--qk-mono); cursor:pointer; position:relative; }
#dock .key:active{ background:var(--qk-key-active); }
#dock .key.wide{ flex:1.6; font-size:11px; color:var(--qk-dim); }
#dock .key.space{ flex:8; }
#dock .key.accent{ color:var(--qk-accent); }
#dock .key.sym{ color:var(--qk-lock); }
#dock .key.mod{ color:var(--qk-dim); font-weight:600; }
#dock .key.mod.armed{ background:var(--qk-armed-dim); border-color:var(--qk-armed); color:var(--qk-armed); box-shadow:0 0 8px rgba(139,92,246,.35); }
#dock .key.lockable.locked{ background:var(--qk-lock-dim); border-color:var(--qk-lock); color:var(--qk-lock); }
#dock .key.fire-flash{ background:var(--qk-armed); color:var(--qk-bg); }
#dock .row.fkeys .key{ height:30px; font-size:11px; color:var(--qk-dim); }
#dock .row.spacer{ height:6px; margin:0; }
#dock .key.small{ height:38px; }
#dock .key.small[data-key="PrtScn"],
#dock .key.small[data-key="ScrLk"],
#dock .key.small[data-key="Pause"]{ font-size:10px; }

@media (max-width:900px){ #dock .key{ height:34px; font-size:12px; } }

/* Clipboard panel — sits below the keyboard, inside #dock */
#clipboardPanel{
  padding:10px 12px; border-top:1px solid var(--qk-line);
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
}
#clipboardPanel .cb-label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--qk-accent); font-family:var(--qk-mono); flex:none; padding-top:6px; }
#cbChips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.cb-chip{
  font-size:12px; font-family:var(--qk-mono); color:var(--qk-text);
  background:var(--qk-key); border:1px solid var(--qk-line); border-radius:14px;
  padding:5px 12px; cursor:pointer; max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cb-chip:active{ background:var(--qk-key-active); border-color:var(--qk-accent-dim); }
.cb-chip.empty{ color:var(--qk-dim); font-style:italic; cursor:default; border-style:dashed; }
#clipboardPanel .cb-clear{ font-size:11px; font-family:var(--qk-mono); color:var(--qk-dim); background:var(--qk-key); border:1px solid var(--qk-line); border-radius:6px; padding:4px 10px; cursor:pointer; flex:none; }
#clipboardPanel .cb-clear:hover{ color:var(--qk-text); }

/* Paste zone — a real editable box so native device paste (long-press
   → Paste, or Ctrl+V) always works regardless of Clipboard API
   permissions. Sits below the clipboard panel, hidden until opened. */
#pasteZoneBtn{ font-size:11px; font-family:var(--qk-mono); color:var(--qk-dim); background:var(--qk-key); border:1px solid var(--qk-line); border-radius:6px; padding:4px 10px; cursor:pointer; flex:none; }
#pasteZoneBtn:hover{ color:var(--qk-accent); border-color:var(--qk-accent-dim); }
#pasteZoneWrap{ display:none; padding:0 12px 12px; }
#pasteZoneWrap.show{ display:block; }
#pasteZone{
  width:100%; min-height:44px; background:var(--qk-key); color:var(--qk-text);
  border:1px dashed var(--qk-accent-dim); border-radius:8px; padding:10px;
  font-size:13px; font-family:var(--qk-mono); outline:none; resize:none;
  box-sizing:border-box;
}
#pasteZone:focus{ border-color:var(--qk-accent); border-style:solid; }
#pasteZoneHint{ font-size:10px; color:var(--qk-dim); font-family:var(--qk-mono); margin-top:4px; }

/* Prevent iOS Safari's auto-zoom-on-focus. That zoom only triggers when
   a focused input renders under ~16px font — CodeMirror's hidden input
   (used to capture real focus/selection) defaults to whatever the
   editor's own code font-size is, which is often smaller. This applies
   regardless of QontraKey being on, since the same input is what native
   tap-to-select relies on. Purely a font-size fix — the input itself
   stays invisible, no visual change to the rendered code. */
.CodeMirror textarea{ font-size:16px !important; }