/* ============================================================
   Synapse — shared design tokens, theming, and app-shell chrome
   Linked by every page in the suite (hub + each tool).
   Dark is the default; [data-theme="light"] flips the chrome.
   The creative stage (--stage) stays dark in both themes because
   the tools' additive / image visuals need a dark backdrop.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#000000; --s1:#0d0d0d; --s2:#1a1a1a; --s3:#2e2e2e;
  --stage:#060608;
  /* ink */
  --text:#f0f0f0; --dim:#666666; --border:rgba(255,255,255,0.09); --hair:rgba(255,255,255,0.06);
  /* accent scale (kept monochrome so per-sense accent can lead) */
  --accent:#e0e0e0; --teal:#a0a0a0; --orange:#c8c8c8; --red:#888888;
  --green:#b0b0b0; --pink:#909090; --mid:#a0a0a0; --lo:#888888;
  /* glass */
  --glass-bg:rgba(10,10,10,0.6); --glass-bg-solid:rgba(10,10,10,0.9);
  --glass-border:rgba(255,255,255,0.08); --glass-highlight:rgba(255,255,255,0.03);
  /* shape + motion */
  --blur:20px; --radius-lg:14px; --radius-md:10px; --radius-sm:7px;
  --shadow:0 8px 32px rgba(0,0,0,0.7); --shadow-elevated:0 8px 32px rgba(0,0,0,0.7);
  --ease:cubic-bezier(0.4,0,0.2,1);
  /* per-sense accent (overridden by [data-sense]); Synapse pink is the
     brand default — reads in both themes */
  --sense-accent:#ff6f9c;
}

:root[data-theme="light"]{
  --bg:#e8e8ea; --s1:#f6f6f7; --s2:#ececef; --s3:#dcdce1;
  /* --stage intentionally stays dark */
  --text:#1b1b1f; --dim:#86868c; --border:rgba(0,0,0,0.12); --hair:rgba(0,0,0,0.05);
  --accent:#2b2b2f; --teal:#5b5b62; --orange:#3a3a40; --red:#7a7a80;
  --green:#4a4a50; --pink:#6a6a70; --mid:#5b5b62; --lo:#7a7a80;
  --glass-bg:rgba(255,255,255,0.72); --glass-bg-solid:rgba(248,248,250,0.97);
  --glass-border:rgba(0,0,0,0.10); --glass-highlight:rgba(0,0,0,0.025);
  --shadow:0 8px 32px rgba(0,0,0,0.16); --shadow-elevated:0 8px 32px rgba(0,0,0,0.16);
}

/* per-sense accent — the one spark of color that gives each tool a personality */
:root[data-sense="sight"]{ --sense-accent:#b9a7ff; }
:root[data-sense="sound"]{ --sense-accent:#6ad0ff; }
:root[data-sense="taste"]{ --sense-accent:#ff9bb0; }
:root[data-sense="smell"]{ --sense-accent:#9be3a6; }
:root[data-sense="touch"]{ --sense-accent:#ffd27a; }

/* ============================================================
   Casing system: the whole suite uses only ALL-CAPS or all-lowercase —
   never mixed / title / camel case. Elements that opt into uppercase keep
   their own text-transform (section eyebrows etc.); everything else renders
   lowercase. Code stays untouched (case-sensitive).
   ============================================================ */
body{ text-transform:lowercase; }
button, input, select, textarea, optgroup{ text-transform:lowercase; }  /* form controls don't inherit it */
textarea.custom-code,
code, pre, kbd{ text-transform:none; }

/* ============================================================
   App shell — shared header furniture (wordmark · sense switcher · theme)
   Namespaced .syn-* so it never collides with a tool's own styles.
   ============================================================ */
.syn-brand{display:flex;align-items:center;gap:10px;min-width:0;font-family:'Inter',system-ui,sans-serif}
.syn-home{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--text);white-space:nowrap;transition:opacity .15s var(--ease)}
.syn-home:hover{opacity:.72}
.syn-home .dot{display:inline-flex;color:var(--sense-accent);line-height:0;transition:color .25s var(--ease)}
.syn-home .dot .syn-mark{width:19px;height:19px;display:block}
.syn-home .wm{font-weight:600;letter-spacing:.12em;font-size:14px}

.syn-switch{position:relative;font-family:'Inter',system-ui,sans-serif}
.syn-sense-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--glass-border);
  border-radius:8px;background:var(--hair);color:var(--text);cursor:pointer;font-size:12px;
  text-transform:lowercase;letter-spacing:.07em;transition:all .15s var(--ease)}
.syn-sense-btn:hover{border-color:var(--sense-accent)}
.syn-sense-btn .car{color:var(--dim);font-size:9px}
.syn-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:240px;background:var(--glass-bg-solid);
  border:1px solid var(--glass-border);border-radius:12px;box-shadow:var(--shadow);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  padding:6px;z-index:300;display:none;flex-direction:column;gap:2px}
.syn-menu.open{display:flex}
.syn-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;text-decoration:none;
  color:var(--text);cursor:pointer;border:none;background:none;text-align:left;width:100%;font-family:inherit}
.syn-item:hover{background:var(--hair)}
.syn-item.cur{background:var(--hair);outline:1px solid var(--glass-border)}
.syn-item[aria-disabled="true"]{opacity:.42;cursor:default}
.syn-item[aria-disabled="true"]:hover{background:none}
.syn-item .g{font-size:16px;width:20px;text-align:center;color:var(--sense-accent);flex-shrink:0}
.syn-item .col{display:flex;flex-direction:column;gap:1px;min-width:0}
.syn-item .nm{font-size:12.5px;font-weight:600;line-height:1.2;text-transform:lowercase;letter-spacing:.04em}
.syn-item .tg{font-size:10.5px;color:var(--dim);line-height:1.25;text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.syn-item .soon{margin-left:auto;font-size:8px;letter-spacing:.1em;text-transform:lowercase;color:var(--dim);
  border:1px solid var(--glass-border);padding:2px 5px;border-radius:20px;flex-shrink:0}

.syn-theme{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;
  border:1px solid var(--glass-border);border-radius:8px;background:var(--hair);color:var(--dim);
  cursor:pointer;font-size:14px;line-height:1;transition:all .15s var(--ease)}
.syn-theme:hover{color:var(--text);border-color:var(--sense-accent)}

/* ============================================================
   Shared control kit (.syn-ctrl · .syn-fps) — one consistent look for every
   tool's header actions: upload · record · save / open · snapshot · fps.
   Token-driven (adapts light/dark) and tinted by --sense-accent.
   Icons are injected by the shell from [data-syn-icon].
   ============================================================ */
.syn-ctrl{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--glass-border);
  border-radius:8px;background:var(--hair);color:var(--text);cursor:pointer;font-size:12px;line-height:1;
  white-space:nowrap;font-family:inherit;transition:all .15s var(--ease)}
.syn-ctrl:hover{border-color:var(--sense-accent)}
.syn-ctrl:disabled,.syn-ctrl.disabled{opacity:.4;cursor:default;pointer-events:none}
.syn-ctrl .syn-ic{width:13px;height:13px;flex-shrink:0;display:block}
.syn-ctrl.primary{background:color-mix(in srgb,var(--sense-accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--sense-accent) 45%,transparent)}
.syn-ctrl.primary:hover{background:color-mix(in srgb,var(--sense-accent) 26%,transparent);border-color:var(--sense-accent)}
.syn-ctrl.rec .syn-ic{color:#ff5a5a}
.syn-ctrl.rec.armed{border-color:#ff5a5a;color:#ff8080}
.syn-ctrl.rec.armed .syn-ic{animation:syn-rec 1s ease-in-out infinite}
@keyframes syn-rec{50%{opacity:.3}}
.syn-fps{display:inline-flex;align-items:center;justify-content:center;font-size:11px;
  font-family:ui-monospace,SFMono-Regular,monospace;color:var(--dim);background:var(--hair);
  border:1px solid var(--glass-border);padding:3px 8px;border-radius:20px;min-width:56px;white-space:nowrap}

/* ============================================================
   Light mode: each tool fully themes its own controls/panels in
   its stylesheet (the dark-assumed surfaces are tool-specific and
   too many to rescue generically here). The shared shell chrome
   above is token-driven, so it adapts to either theme on its own.
   ============================================================ */

/* ============================================================
   Shared scrub / clip timeline (.syn-tl) — scrub a clip and trim an
   export range, consistent across tools. Tinted by --sense-accent.
   Built + driven by Synapse.timeline(host, {onSeek, onTrim}).
   ============================================================ */
.syn-tl{position:relative;flex:1;min-width:80px;height:26px;cursor:pointer;touch-action:none;user-select:none}
.syn-tl::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:3px;background:rgba(128,128,128,.3)}
.syn-tl-clip{position:absolute;top:50%;transform:translateY(-50%);height:12px;border-radius:3px;
  background:color-mix(in srgb,var(--sense-accent) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--sense-accent) 55%,transparent);pointer-events:none}
.syn-tl-played{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;border-radius:3px;background:var(--sense-accent);pointer-events:none}
.syn-tl-head{position:absolute;top:3px;bottom:3px;width:2px;background:var(--text);pointer-events:none}
.syn-tl-h{position:absolute;top:0;bottom:0;width:16px;margin-left:-8px;cursor:ew-resize;display:flex;
  align-items:center;justify-content:center;z-index:2;touch-action:none}
.syn-tl-h::after{content:'';width:4px;height:18px;border-radius:2px;background:var(--sense-accent);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.syn-tl-h:hover::after{height:22px}
.syn-tl.disabled{opacity:.4;pointer-events:none}