/* Shared interaction primitives. Load after page-specific CSS. */
:root { color-scheme:dark; }
body { font-family:var(--kb-font); }
.site-back.site-back {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  padding:0;
  position:relative;
  color:var(--kb-purple);
  font:600 11px/1.4 var(--kb-font);
  letter-spacing:.08em;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease;
}
.site-back.site-back:hover { color:var(--kb-fg);text-decoration:none; }
.site-back.site-back svg { display:block;flex:none;width:18px;height:18px; }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline:2px solid var(--kb-focus);
  outline-offset:4px;
}
.site-back.site-back:focus-visible { outline:2px solid var(--kb-focus);outline-offset:4px; }
.tool-navigation { margin-bottom:var(--kb-space-3);border-bottom:1px solid var(--kb-rule); }
.lab-page .subpage-hero { margin-top:var(--kb-hero-gap); }
.lab-page .cosmicfly-mini { margin-bottom:var(--kb-space-3); }
.contact-page #contact-form select {
  width:100%;min-height:44px;margin:0;padding:10px 0;
  border:0;border-bottom:1px solid var(--kb-rule);border-radius:0;
  background:var(--kb-bg);color:var(--kb-fg);font:400 14px/1.4 var(--kb-font);
}
@media(prefers-reduced-motion:reduce) { .site-back.site-back { transition:none; } }

/* Tools share control styling; their canvas and panel layout stays local. */
body.tool-page :is(.kb-button,.button,.icon-button,.pill,.help-button,.sheet-close,.dialog-close) {
  box-sizing:border-box;
  border:1px solid var(--kb-control-border);
  border-radius:var(--kb-control-radius);
  background:var(--kb-surface);
  color:var(--kb-fg);
  font-family:var(--kb-font);
  font-weight:600;
  font-size:var(--kb-control-font);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
body.tool-page :is(.kb-button,.button,.icon-button,.pill):hover {
  background:var(--kb-control-hover);border-color:var(--kb-accent);
}
body.tool-page :is(.kb-button--primary,.button.accent,.btn.primary,button.primary) {
  background:var(--kb-purple);border-color:var(--kb-purple);color:var(--kb-bg);
}
body.tool-page :is(.kb-button--primary,.button.accent,.btn.primary,button.primary):hover {
  background:var(--kb-fg);border-color:var(--kb-fg);
}
body.tool-page .browser-categories .kb-button.active,
body.tool-page :is(.kb-button,.button,.pill)[aria-pressed="true"],
body.tool-page :is(.kb-button,.button,.pill)[aria-selected="true"] {
  background:var(--kb-control-active);border-color:var(--kb-purple);color:var(--kb-fg);
}
body.tool-page :is(.kb-button--icon,.icon-button,.help-button,.sheet-close,.dialog-close) {
  font-size:18px;
  align-items:center;justify-content:center;
}
body.tool-page :is(button,input,select,textarea) { accent-color:var(--kb-accent); }
body.tool-page button:disabled { opacity:.45;cursor:not-allowed; }
body.tool-page :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
.playground-gallery .pg-card:focus-visible {
  outline:2px solid var(--kb-focus);outline-offset:4px;
}
body.tool-page .style-choice input:focus-visible + span {
  outline:2px solid var(--kb-focus);outline-offset:4px;
}
.site-back.site-back span { color:inherit; }
@media(max-width:690px) {
  .shader-lab-page .site-back span { display:none; }
  .shader-lab-page .site-back { min-width:24px;justify-content:center; }
}
@media(prefers-reduced-motion:reduce) {
  body.tool-page :is(.kb-button,.button,.icon-button,.pill) { transition:none; }
}

/* Composition cards and toolbar icons are explicit control variants. */
body.tool-page .export-tile-grid .kb-button {
  min-height:105px;padding:20px;text-align:left;
}
body.tool-page .preset.kb-button,
body.tool-page .browser-card.kb-button { padding:0;overflow:hidden;text-align:left; }
body.tool-page .layer-actions .kb-button--compact {
  min-height:32px;min-width:32px;padding:4px;font-size:18px;
}
body.tool-page .mobile-dock .kb-button { min-height:54px;padding:6px 2px;font-size:10px; }
body.tool-page .help-button { border-radius:50%; }
@media(max-width:690px) {
  body.tool-page .layer-actions .kb-button--compact { min-height:44px;min-width:36px; }
}

/* Navigation hit area grows without changing header geometry. */
.site-back.site-back::after { content:"";position:absolute;inset:-10px 0; }
.shader-lab-page .topbar .site-back { flex-shrink:0; }
@media(max-width:690px) {
  .shader-lab-page .topbar { min-height:60px;flex-wrap:nowrap; }
  .shader-lab-page .topbar .identity { min-width:0;flex-wrap:nowrap; }
  .shader-lab-page .topbar .top-actions { flex-shrink:0;flex-wrap:nowrap; }
  body.shader-lab-page .top-actions .icon-button { min-height:34px;min-width:29px;width:auto;padding:4px 6px; }
  body.shader-lab-page .top-actions .button.accent { min-height:35px;padding:8px 11px; }
  body.shader-lab-page .workspace-tools .pill { min-height:31px;padding:5px 8px; }
}
@media(max-width:360px) {
  body.shader-lab-page .top-actions .icon-button { min-width:25px;padding:4px; }
}