/* Typace — the theme studio preview on /guides/custom-keyboard-theme/.

   A keyboard drawn in a custom theme's colours. The four starters are the app's own
   ThemeStarter values from CustomTheme.kt, colour for colour; the photo one stands in for a
   photo you would pick. The theme colours are the *keyboard's* and stay the same whatever the
   site's light/dark choice — only the stage around them follows the site.

   The letter rows keep mock.css's markup (mock-keys / krow / key) so tools/site_i18n.py swaps in
   each language's letters, as on the homepage. Every property used outside the theme classes is
   defined by guide.css, which the page links first. */

:root{--studio-glow:rgb(var(--brand-rgb) / .14)}
:root[data-theme="dark"]{--studio-glow:rgb(var(--brand-rgb) / .22)}

/* ---- the stage ---------------------------------------------------------------------------- */
.studio{margin:34px 0 36px}
.studio-stage{
  position:relative;border-radius:28px;padding:30px 22px 22px;
  background:
    radial-gradient(120% 80% at 50% 0%,var(--studio-glow),transparent 70%),
    var(--surface-2);
  border:1px solid var(--outline);
}
.studio-board{
  position:relative;overflow:hidden;margin:0 auto;max-width:440px;
  border-radius:22px;padding:12px 8px 10px;
  background:linear-gradient(180deg,var(--tb-bg),var(--tb-bg2,var(--tb-bg)));
  font-family:var(--tb-font);
  box-shadow:0 30px 60px -30px rgba(10,6,24,.55),0 2px 0 rgba(255,255,255,.04) inset;
  transition:background .35s ease;
  direction:ltr;
}
.sb-photo{position:absolute;inset:0;width:100%;height:100%;display:none}
.sb-dim{position:absolute;inset:0;background:var(--tb-bg);opacity:var(--tb-dim,0);display:none}
.ts-photo .sb-photo,.ts-photo .sb-dim{display:block}
.ts-photo{background:var(--tb-bg)}
.sb-inner{position:relative}

/* row 1 — undo and three target pills, one selected */
.sb-bar{display:flex;align-items:center;gap:7px;margin:0 2px 12px}
.sb-tool{
  width:36px;height:36px;flex-shrink:0;border-radius:var(--tb-r);
  display:flex;align-items:center;justify-content:center;
  background:var(--tb-fn);color:var(--tb-fn-ink);opacity:var(--tb-op,1);
}
.sb-pill{
  font-size:.8rem;font-weight:700;padding:8px 14px;border-radius:99px;white-space:nowrap;
  background:var(--tb-fn);color:var(--tb-fn-ink);
}
.sb-pill.on{background:linear-gradient(135deg,var(--tb-accent),var(--tb-accent2));color:var(--tb-on-accent)}

/* keys */
.studio-board .mock-keys{display:flex;flex-direction:column;gap:9px}
.studio-board .krow{display:flex;gap:5px;justify-content:center}
.studio-board .key{
  flex:1;min-width:0;max-width:40px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--tb-r);
  background:color-mix(in srgb,var(--tb-key) calc(var(--tb-op,1)*100%),transparent);
  color:var(--tb-key-ink);
  box-shadow:var(--tb-shadow,none);
  font-size:1.12rem;font-weight:500;line-height:1;
  transition:border-radius .3s ease,background-color .3s ease,color .3s ease;
}
.studio-board .key.wide,.studio-board .key.fn{
  background:color-mix(in srgb,var(--tb-fn) calc(var(--tb-op,1)*100%),transparent);
  color:var(--tb-fn-ink);
}
.studio-board .key.wide{max-width:none;flex:1.45;font-size:.9rem;font-weight:600}
.studio-board .key.space{max-width:none;flex:3.2}
.studio-board .key.enhance{
  max-width:none;flex:1.6;
  background:linear-gradient(135deg,var(--tb-accent),var(--tb-accent2));
  color:var(--tb-on-accent);
  box-shadow:0 0 18px -2px color-mix(in srgb,var(--tb-accent) 60%,transparent);
}
.tb-outlines .key:not(.enhance),.tb-outlines .sb-tool{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 55%,transparent);
}

/* ---- the themes: ThemeStarter in CustomTheme.kt, plus a photo -------------------------- */
.ts-midnight{
  --tb-bg:#0B1020;--tb-key:#1E2744;--tb-key-ink:#E8ECFA;--tb-fn:#141B33;--tb-fn-ink:#C9D2F0;
  --tb-accent:#7C9CFF;--tb-accent2:#5A6FE0;--tb-on-accent:#0B1020;
  --tb-r:11px;--tb-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.ts-paper{
  --tb-bg:#F2ECE1;--tb-key:#FFFCF5;--tb-key-ink:#2B2420;--tb-fn:#E3D9C6;--tb-fn-ink:#2B2420;
  --tb-accent:#B5532B;--tb-accent2:#8E3A1C;--tb-on-accent:#FFFFFF;
  --tb-shadow:0 1px 0 rgba(43,36,32,.18);
  --tb-r:7px;--tb-font:Lora,Georgia,"Times New Roman",serif;
}
.ts-paper.is-dark{
  --tb-bg:#1D1915;--tb-key:#2E2822;--tb-key-ink:#F2E9DA;--tb-fn:#25201B;--tb-fn-ink:#E8DCC8;
  --tb-accent:#E07A4F;--tb-accent2:#B85A33;--tb-on-accent:#1D1915;--tb-shadow:none;
}
.ts-neon{
  --tb-bg:#07070C;--tb-key:#14141D;--tb-key-ink:#39FF88;--tb-fn:#0E0E16;--tb-fn-ink:#FF4FD8;
  --tb-accent:#39FF88;--tb-accent2:#1FCB66;--tb-on-accent:#07070C;
  --tb-r:2px;--tb-font:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ts-sunset{
  --tb-bg:#FF9A62;--tb-bg2:#8E3BEF;--tb-key:#FFFFFF;--tb-key-ink:#2A1630;--tb-fn:#FFE1D2;--tb-fn-ink:#2A1630;
  --tb-accent:#FF5470;--tb-accent2:#D92E63;--tb-on-accent:#FFFFFF;--tb-op:.85;
  --tb-r:999px;--tb-font:Nunito,ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
}
.ts-photo{
  --tb-bg:#101826;--tb-dim:.3;--tb-key:#FFFFFF;--tb-key-ink:#14202F;--tb-fn:#DCE6F2;--tb-fn-ink:#14202F;
  --tb-accent:#5CC2FF;--tb-accent2:#2F8BE0;--tb-on-accent:#0B1A2C;--tb-op:.78;
  --tb-r:7px;--tb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.ts-sunset .sb-pill:not(.on),.ts-photo .sb-pill:not(.on){
  background:color-mix(in srgb,var(--tb-fn) 85%,transparent);
}

/* ---- the picker under the board ----------------------------------------------------------- */
.studio-picker{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px auto 0;max-width:640px;
}
.studio-picker button{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--outline);border-radius:99px;
  padding:7px 14px 7px 8px;min-height:40px;
  transition:border-color .2s,color .2s,box-shadow .2s;
}
.studio-picker button:hover{color:var(--text);border-color:var(--violet-light)}
.studio-picker button:focus-visible,.studio-mode button:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
.studio-picker button[aria-pressed="true"]{
  color:var(--text);border-color:var(--violet-light);
  box-shadow:0 0 0 1px var(--violet-light) inset;
}
.sw{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;position:relative;
  background:linear-gradient(160deg,var(--tb-bg),var(--tb-bg2,var(--tb-bg)));
  box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;
}
.sw::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--tb-accent);box-shadow:0 0 0 2px var(--surface);
}
.sw.ts-photo{background:linear-gradient(180deg,#F7B07A 0%,#7FA6D9 55%,#2D4A6B 100%)}

.studio figcaption{
  margin-top:16px;color:var(--text-faint);font-size:.92rem;line-height:1.65;text-align:center;
}

/* Light / Dark — only Paper has dark colours of its own, so only Paper offers the switch */
.studio-mode{display:none;justify-content:center;margin:14px 0 0}
.studio[data-active="paper"] .studio-mode{display:flex}
.studio-mode .seg{display:inline-flex;padding:3px;border-radius:99px;background:var(--surface);border:1px solid var(--outline)}
.studio-mode button{
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;border:0;border-radius:99px;
  padding:6px 16px;background:transparent;color:var(--text-faint);
}
.studio-mode button[aria-pressed="true"]{background:var(--violet);color:#fff}

/* what the shown theme is made of — one line per theme, only the active one visible */
.studio-spec{margin:16px 0 0;text-align:center;font-size:.9rem;color:var(--text-faint)}
.studio-spec span{display:none}
.studio[data-active="midnight"] .spec-midnight,
.studio[data-active="paper"] .spec-paper,
.studio[data-active="neon"] .spec-neon,
.studio[data-active="sunset"] .spec-sunset,
.studio[data-active="photo"] .spec-photo{display:inline}

/* ---- the corner shapes and fonts strips ------------------------------------------------- */
.shape-strip,.font-strip{
  display:grid;gap:10px;margin:22px 0 26px;padding:18px;border-radius:18px;
  background:var(--mock-bg);border:1px solid var(--outline);
}
.shape-strip{grid-template-columns:repeat(4,1fr)}
.shape-strip figure,.font-strip span{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px}
.shape-strip .key{
  width:100%;max-width:74px;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--key-bg);color:var(--key-ink);box-shadow:var(--key-shadow);
  font-size:1.15rem;font-weight:500;
}
.shape-strip figcaption,.font-strip small{font-size:.82rem;font-weight:600;color:var(--text-faint);text-align:center}
.k-square{border-radius:2px}.k-soft{border-radius:8px}.k-round{border-radius:13px}.k-pill{border-radius:999px}

.font-strip{grid-template-columns:repeat(4,1fr)}
.font-strip b{font-size:1.7rem;font-weight:500;line-height:1.1;color:var(--text)}
.f-inter{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.f-lora{font-family:Lora,Georgia,"Times New Roman",serif}
.f-mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.f-round{font-family:Nunito,ui-rounded,"SF Pro Rounded",system-ui,sans-serif}

@media(max-width:520px){
  .studio-stage{padding:20px 10px 16px;border-radius:22px}
  .studio-board{padding:10px 5px 8px;border-radius:18px}
  .studio-board .krow{gap:4px}
  .studio-board .mock-keys{gap:7px}
  .studio-board .key{height:40px;font-size:.98rem}
  .studio-board .key.wide{font-size:.78rem}
  .sb-bar{gap:5px;margin-bottom:10px}
  .sb-tool{width:32px;height:32px}
  .sb-pill{font-size:.72rem;padding:7px 11px}
  .studio-picker button{font-size:.82rem;padding:6px 12px 6px 7px}
  .shape-strip,.font-strip{grid-template-columns:repeat(2,1fr);padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .studio-board,.studio-board .key{transition:none}
}