/* keymaps.whitehatnetizen.com: Showroom (Everything design wardrobe, use case 10) around the
   Keymap Image Generator. SPEC: Everything/_system/design-system/systems/showroom.md.

   Colour meanings (Showroom's, unchanged):
     --bg/--bg-2 page ground and control tracks; --surface panels and buttons; --text/--muted/--faint
     text levels; --border edges; --stage-a/-b the lit stage; --accent the chosen image style.
   The accent is not fixed: site.js sets --style-acc from the chosen style's own palette (the most
   colourful of its colours), so the page says which style is chosen. "I feel lucky" paints the whole
   page in a style's palette through the generator's own tokens (--ground, --ink, --sig ...); under
   [data-lucky] the Showroom tokens are mapped onto those.

   The generator's element names and classes are its own (docs/page.js relies on them); this file
   only restyles them. Its functional rules (locked sections, live/local, lightbox) are kept. */

@font-face { font-family:"JetBrains Mono"; src:url("fonts/JetBrainsMono-variable-normal.woff2") format("woff2"); font-weight:100 800; }

:root {
  --bg:#f6f7f9; --bg-2:#eef0f4; --surface:#ffffff;
  --text:#0f172a; --muted:#5b6475; --faint:#8a93a3; --border:#e3e6ec;
  --stage-a:#e9ecf2; --stage-b:#f8f9fb;
  --accent:var(--style-acc, #e0661f); --accent-ink:var(--style-acc-ink, #ffffff);
  --accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06), 0 24px 60px -12px rgba(15,23,42,.28);
  --radius:14px; --radius-sm:10px;
  --sans:"General Sans", "Hanken Grotesk", system-ui, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", Consolas, "Cascadia Mono", Menlo, monospace;
  color-scheme:light;
}
:root[data-theme=dark] {
  --bg:#0b0d12; --bg-2:#12151c; --surface:#151922;
  --text:#e8ebf1; --muted:#9aa3b2; --faint:#6b7483; --border:#252a35;
  --stage-a:#161a23; --stage-b:#0f1218;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 30px 70px -10px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* I feel lucky: the generator sets its own tokens inline on <html>; take the page from them. */
:root[data-lucky] {
  --bg:var(--ground); --bg-2:var(--ground-deep); --surface:var(--paper);
  --text:var(--ink); --muted:var(--dim); --faint:var(--dim); --border:var(--grid-major);
  --stage-a:var(--ground-deep); --stage-b:var(--ground);
  --accent:var(--sig); --accent-ink:var(--paper);
}

* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font:400 15px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
p { margin:0 0 .8em; max-width:72ch; }
code { font-family:var(--mono); font-size:.9em; background:var(--bg-2); padding:1px 5px; border-radius:5px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hidden { display:none !important; }

.sheet { max-width:1320px; margin:0 auto; padding:0 28px; }

/* ---------- top bar ---------- */
.bar { position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center; gap:22px;
  margin:0 -28px; padding:0 28px; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; white-space:nowrap; }
.brand svg { width:34px; height:34px; color:var(--text); flex:none; }
.brand b { font-weight:600; letter-spacing:-.01em; }
.brand .by { color:var(--muted); font-size:14px; }
.links { display:flex; gap:20px; font-size:14px; color:var(--muted); margin-left:8px; }
.links a { text-decoration:none; } .links a:hover { color:var(--text); }
/* the generator's theme and language controls, as pill switches in one row */
.corner { margin-left:auto; display:flex; flex-direction:row; align-items:center; gap:14px; }
.corner .row { display:inline-flex; align-items:center; gap:8px; }
.corner .cap { display:none; }
.themes { position:relative; display:flex; }
.themes .luckyname { position:absolute; right:10px; top:100%; margin-top:2px; font:400 11px var(--mono); color:var(--faint); white-space:nowrap; }
.seg, .langs, .os { display:inline-flex; gap:2px; padding:3px; background:var(--bg-2); border-radius:999px; }
.seg button, .langs button, .os button { border:0; background:none; box-shadow:none; color:var(--muted); font:500 12.5px var(--sans);
  min-height:28px; padding:0 11px; border-radius:999px; cursor:pointer; }
.seg button:hover, .langs button:hover, .os button:hover { color:var(--text); background:none; }
.seg button.on, .langs button.on, .os button.on { background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
#lucky.on { background:var(--accent); color:var(--accent-ink); }

/* ---------- title block ---------- */
.title { display:grid; grid-template-columns:1.15fr 1fr; gap:24px 56px; align-items:end; padding:56px 0 26px; }
.eyebrow { display:inline-block; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px;
  background:var(--accent-soft); color:var(--text); text-decoration:none; margin-bottom:16px; }
.eyebrow:hover { background:color-mix(in srgb, var(--accent) 24%, transparent); }
h1 { margin:0; font-weight:600; font-size:clamp(34px, 5vw, 56px); line-height:1.04; letter-spacing:-.03em; }
h1 .acc { background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c5cff));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.title-r p { font-size:16.5px; color:var(--muted); max-width:52ch; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.btn { display:inline-flex; align-items:center; min-height:42px; padding:0 20px; border-radius:999px; font-weight:600; font-size:14.5px;
  text-decoration:none; cursor:pointer; background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow); }
.btn:hover { border-color:var(--faint); }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn.primary:hover { filter:brightness(1.06); }
/* live or local: the generator writes one line here */
.mode { font-size:13.5px; color:var(--muted); margin:0 0 22px; }
.mode.local { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; }
.lamp { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:8px; vertical-align:1px; animation:lamp 2.4s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
html[data-mode=live] .localonly { display:none !important; }
html[data-mode=local] .liveonly { display:none !important; }

.desktopnote { display:none; }

/* ---------- workspace: the steps at the left, the stage at the right ---------- */
.work { display:grid; grid-template-columns:minmax(420px, 500px) 1fr; gap:24px; align-items:start; }
.steps { display:flex; flex-direction:column; gap:14px; min-width:0; }
.steps > section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px 16px; }
.steps h2 { margin:0 0 8px; font-size:18px; font-weight:600; letter-spacing:-.015em; }
.note { font-size:13.5px; color:var(--muted); }
.stepsec.locked > :not(h2):not(.locknote) { display:none; }
.stepsec.locked { box-shadow:none; background:transparent; border-style:dashed; padding:14px 20px; }
.stepsec.locked h2 { color:var(--faint); margin:0; }
.locknote { display:none; font-size:13px; color:var(--faint); margin:2px 0 0; }
.stepsec.locked .locknote { display:block; }
@media (prefers-reduced-motion:no-preference) {
  @keyframes appear { from { opacity:0; } to { opacity:1; } }
  .stepsec:not(.locked) > :not(h2):not(.locknote) { animation:appear 200ms ease-out; }
  #live { transition:opacity 200ms ease-out; }
}

/* controls */
button { font:inherit; font-size:13.5px; font-weight:500; min-height:34px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--text); }
button:hover { border-color:var(--faint); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:transparent; color:var(--accent-ink); font-weight:600; }
button.primary:hover:not(:disabled) { filter:brightness(1.06); }
input[type=text], input[type=search], select { font:inherit; font-size:14px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text); width:100%; max-width:420px; }
input[type=text], input[type=search] { font-family:var(--mono); font-size:13.5px; }
select { width:auto; max-width:100%; }
select:disabled { opacity:.45; cursor:not-allowed; }
::placeholder { color:var(--faint); opacity:1; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); width:16px; height:16px; margin:0 6px 0 0; vertical-align:-3px; }
label { display:block; }
label.indent { margin-left:22px; }
label.off { color:var(--faint); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.row label { display:inline; }
input[type=file] { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.filebtn { display:inline-flex; align-items:center; min-height:36px; padding:0 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; box-shadow:var(--shadow); }
.filebtn:hover { border-color:var(--faint); }
input[type=file]:focus-visible + .filebtn { outline:2px solid var(--accent); outline-offset:2px; }
#filename { display:block; margin-top:8px; font-family:var(--mono); font-size:12.5px; }
.drop { border:1.5px dashed var(--border); border-radius:var(--radius); padding:22px; text-align:center; background:var(--bg); cursor:pointer; }
.drop.over { border-color:var(--accent); background:var(--accent-soft); }
.drop .pick { position:relative; display:inline-block; text-align:center; }
#samplelinks a { color:var(--text); text-decoration-color:var(--accent); text-underline-offset:3px; display:inline-block; padding:4px 1px; margin:-4px 0; }
.either { display:flex; align-items:center; gap:14px; margin:14px 0 4px; font-size:13px; color:var(--faint); }
.either::before, .either::after { content:""; flex:1; border-top:1px solid var(--border); }
.usbwhy, #usbnote { margin:6px 0; }
.summary { font-size:13.5px; margin-top:8px; line-height:1.6; }
.summary .f, .summary .d { font-family:var(--mono); font-size:12.5px; }
.summary .d { color:var(--faint); }
.summary a { color:var(--text); text-decoration-color:var(--accent); }
.summary.err { color:#c2410c; }
.panel { background:var(--bg); border-radius:var(--radius-sm); padding:12px 14px; margin:8px 0; }
.panel > label { display:flex; align-items:center; gap:6px; min-height:28px; }

/* keyboard search results */
.results { list-style:none; margin:8px 0 0; padding:4px; max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); }
.results:empty { display:none; }
.results li { padding:6px 10px; border-radius:7px; cursor:pointer; font-family:var(--mono); font-size:12.5px; }
.results li:hover { background:var(--bg-2); }
.results li.sel { background:var(--accent); color:var(--accent-ink); }
.results li.info { cursor:default; color:var(--faint); font-family:var(--sans); }
.results li.info:hover { background:transparent; }
.results li .d { color:inherit; opacity:.8; }
#layoutrow #layouts button { min-height:28px; font-size:12px; margin:2px; }

/* layers */
.layers { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; }
.layers label { display:flex; align-items:center; gap:8px; white-space:nowrap; min-height:28px; }
.layers label.empty { grid-column:1 / -1; }
.layers input[type=text] { max-width:none; font-family:var(--sans); font-size:14px; padding:6px 10px; }
.layers .empty { color:var(--faint); }

/* image styles: one list, the picture is on the stage */
.stylepick { display:block; }
.stylefilter { margin-bottom:8px; }
.stylelist { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); overflow-y:auto; padding:4px; }
.stylelist .srow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 6px 4px 12px; border-radius:8px; cursor:pointer; }
.stylelist .srow:hover { background:var(--bg-2); }
.stylelist .srow.sel { background:var(--surface); box-shadow:inset 0 0 0 2px var(--accent), var(--shadow); }
.stylelist .sname { font-family:var(--mono); font-size:13px; font-weight:400; border:0; background:transparent; padding:0; min-height:30px; text-align:left; color:inherit; flex:1; border-radius:0; }
.stylelist .sname:hover { background:transparent; }
.stylelist .sdefault { color:var(--faint); font-size:12px; font-family:var(--sans); }
.stylelist .variants { display:flex; gap:4px; flex:none; }
.stylelist .variants button { padding:0 10px; min-height:26px; font-size:11.5px; }
.stylelist .variants button.on { background:var(--accent); border-color:transparent; color:var(--accent-ink); }

details { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); padding:6px 14px; margin:10px 0; }
details summary { cursor:pointer; font-size:13.5px; color:var(--muted); padding:6px 0; }
details summary:hover, details[open] > summary { color:var(--text); }
details p, details ul { font-size:14px; }
details ul { padding-left:20px; }
details li { margin:4px 0; }
pre.cmd { font-family:var(--mono); font-size:13px; background:var(--bg-2); border-radius:var(--radius-sm); padding:12px 14px; white-space:pre-wrap; word-break:break-all; margin:8px 0; }
#gridbtn.on { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
#copy { min-width:150px; } #usbcopy { min-width:160px; }
.linkbtn { padding:0 10px; min-height:26px; font-size:11px; margin-left:8px; vertical-align:middle; }
html[lang=de] p, html[lang=de] li, html[lang=de] label, html[lang=de] summary { hyphens:auto; -webkit-hyphens:auto; }

/* ---------- the stage (Showroom's signature): the keymap, drawn ---------- */
.stagecol { position:sticky; top:80px; min-width:0; }
.stage { border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);
  background:radial-gradient(120% 90% at 50% 0%, var(--stage-b), var(--stage-a)); padding:26px; }
.idle { margin:0; }
.idle img { display:block; width:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
.idle figcaption { margin-top:12px; font-size:13px; color:var(--faint); text-align:center; }
/* until a keymap is read the stage shows the chosen style's sample; after that, the generator's own picture */
body:has(#sec04.locked) #preview { display:none; }
body:has(#sec04:not(.locked)) #stageidle { display:none; }
.preview { border:0; background:none; padding:0; }
.preview .plabel { font-size:12px; color:var(--faint); margin:0 0 8px; }
.preview img { width:100%; display:block; border-radius:var(--radius-sm); cursor:zoom-in; box-shadow:var(--shadow-lg); }
#livewrap { position:relative; overflow:hidden; border-radius:var(--radius-sm); background:#888; box-shadow:var(--shadow-lg); }
#live { position:absolute; left:0; top:0; border:0; transform-origin:0 0; pointer-events:none; background:#fff; }
#livewrap[data-stale="1"] #live { opacity:.35; }
.preview .pcap { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.preview .pcap .zoom { font-family:var(--sans); font-size:13px; font-weight:600; min-height:30px; }
.preview .pcap .zoom:disabled { opacity:.4; cursor:default; }
#livenote { font-size:12.5px; color:var(--faint); margin-top:6px; min-height:1.2em; }
.stagetools { padding:14px 4px 0; }
.stagetools .row { margin:0 0 6px; }
.stagetools .row button { min-height:40px; padding:0 18px; }
.stagetools .note { font-size:12.5px; color:var(--faint); max-width:none; }

/* ---------- detail tabs ---------- */
.tabs { margin:44px 0 0; }
.tablist { display:flex; gap:26px; border-bottom:1px solid var(--border); }
.tablist button { border:0; border-radius:0; background:none; min-height:44px; padding:0; font-size:14.5px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.tablist button:hover { color:var(--text); border-color:transparent; }
.tablist button[aria-selected=true] { color:var(--text); border-bottom-color:var(--accent); }
.tabpanel { padding:20px 0 0; }
.tabpanel > section, .tabpanel > details { background:none; border:0; padding:0; margin:0; }
.tabpanel h2 { display:none; }
.tabpanel .stepsec.locked .locknote { display:block; font-size:14px; }
#tinker > summary { display:none; }
#cmdfold { border:0; padding:0; margin:0; background:transparent; }
#cmdfold > summary { margin:0 0 10px; }
html[data-mode=local] #cmdfold > summary { display:none; }
#cmdfold details { background:var(--surface); }

/* ---------- footer ---------- */
.foot { margin:56px 0 0; padding:22px 0 40px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.foot p { margin:0; font-size:13.5px; color:var(--muted); max-width:62ch; }
.tb { display:flex; flex-wrap:wrap; gap:4px 18px; font:400 11.5px var(--mono); color:var(--faint); }
.tb span b { font-weight:500; color:var(--muted); margin-left:6px; }

/* ---------- full size ---------- */
#lightbox { position:fixed; inset:0; background:rgba(11,13,18,.9); z-index:50; display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
#lightbox.on { display:flex; }
#lightbox img { max-width:100%; max-height:100%; border-radius:8px; background:#fff; }
#lightbox.live img { display:none; }
#lightwrap { display:none; position:relative; overflow:hidden; border-radius:8px; background:#fff; }
#lightbox.live #lightwrap { display:block; }
#lightframe { position:absolute; left:0; top:0; border:0; transform-origin:0 0; pointer-events:none; background:#fff; }
#lightbox .cap { position:absolute; left:0; right:0; bottom:10px; text-align:center; color:#fff; font-size:13px; }

/* ---------- smaller screens ---------- */
@media (max-width:1060px) {
  .work { grid-template-columns:minmax(380px, 440px) 1fr; }
  .links { display:none; }
}
/* phones and narrow windows: the outer page reflows; the generator keeps its desktop layout
   inside a panel that scrolls sideways (desktop-only by decision, keymap-imgen 0.9.5) */
@media (max-width:860px) {
  .sheet { padding:0 16px; }
  .bar { margin:0 -16px; padding:0 16px; gap:12px; height:60px; }
  .brand .by { display:none; }
  #lucky, .themes .luckyname { display:none; }
  .corner { gap:8px; }
  .title { grid-template-columns:1fr; padding:36px 0 18px; }
  .desktopnote { display:block; font-size:13.5px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
  .work-scroll { overflow-x:auto; margin:0 -16px; padding:0 16px 8px; }
  .work { width:960px; }
  .stagecol { position:static; }
  .tablist { gap:18px; overflow-x:auto; }
  .foot { flex-direction:column; }
}
@media (max-width:420px) {
  .corner .langs button, .corner .seg button { padding:0 8px; }
}
@media (prefers-reduced-motion:reduce) { *, .lamp { animation:none !important; transition:none !important; } }