:root {
  --binah-canvas: #f4f5f2;
  --binah-surface: #ffffff;
  --binah-surface-raised: #eef1ed;
  --binah-surface-muted: #e4e8e3;
  --binah-ink: #191d1b;
  --binah-ink-soft: #46504c;
  --binah-muted: #6f7975;
  --binah-faint: #98a19d;
  --binah-line: #dde2de;
  --binah-line-strong: #c6cec9;
  --binah-carbon: #171a19;
  --binah-carbon-raised: #222725;
  --binah-carbon-line: #343b38;
  --binah-brand: #267c6d;
  --binah-brand-strong: #1b6559;
  --binah-brand-soft: #dcece7;
  --binah-coral: #d6604f;
  --binah-coral-soft: #f7e4e0;
  --binah-blue: #4b70bb;
  --binah-blue-soft: #e5ebf7;
  --binah-success: #397b58;
  --binah-success-soft: #e1eee7;
  --binah-warning: #ad7a24;
  --binah-warning-soft: #f5ead7;
  --binah-danger: #b74650;
  --binah-danger-soft: #f6e2e4;
  --binah-sans: "IBM Plex Sans", Inter, system-ui, -apple-system, sans-serif;
  --binah-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --binah-global-rail: 68px;
  --binah-context-rail: 220px;
  --binah-command-height: 52px;
}

html { color-scheme: light; }

body {
  background: var(--binah-canvas);
  color: var(--binah-ink);
  font-family: var(--binah-sans);
  letter-spacing: 0;
}

body:has(.binah-productbar) {
  padding-top: var(--binah-command-height);
  padding-left: var(--binah-global-rail);
}

body:has(.binah-contextbar) {
  padding-left: calc(var(--binah-global-rail) + var(--binah-context-rail));
}

button, input, select, textarea {
  font-family: inherit;
  letter-spacing: 0;
}

.binah-productbar { display: contents; }

.binah-global-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: var(--binah-global-rail);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--binah-carbon);
  border-right: 1px solid var(--binah-carbon-line);
  color: #dbe4e0;
}

.binah-global-rail a { text-decoration: none; }

.binah-rail-home {
  height: var(--binah-command-height);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--binah-carbon-line);
}

.binah-glyph {
  width: 30px;
  height: 30px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid #48534f;
  border-radius: 7px;
  background: #202522;
}

.binah-glyph span {
  display: block;
  height: 2px;
  border-radius: 2px;
}

.binah-glyph span:nth-child(1) { width: 100%; background: #77cabb; }
.binah-glyph span:nth-child(2) { width: 70%; background: #ef7966; }
.binah-glyph span:nth-child(3) { width: 42%; background: #dfb555; }

.binah-products {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 7px;
}

.binah-product-link {
  position: relative;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 7px;
  color: #89958f !important;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1;
  transition: color .14s ease, background .14s ease;
}

.binah-product-link:hover {
  color: #eef3f1 !important;
  background: #242a27;
}

.binah-product-link.is-active {
  color: #ffffff !important;
  background: #29312e;
}

.binah-product-link.is-active::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #70cabb;
}

.binah-product-link svg,
.binah-product-link i {
  width: 17px;
  height: 17px;
  color: #74817b;
}

.binah-product-link.is-active svg,
.binah-product-link.is-active i { color: #7bd0c1; }

.binah-rail-action {
  width: 42px;
  height: 42px;
  margin: auto auto 10px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #78857f;
}

.binah-rail-action:hover { background: #242a27; color: #fff; }
.binah-rail-action svg { width: 17px; height: 17px; }

.binah-commandbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--binah-global-rail);
  z-index: 90;
  height: var(--binah-command-height);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--binah-line);
  color: var(--binah-ink);
}

body:has(.binah-contextbar) .binah-commandbar {
  left: calc(var(--binah-global-rail) + var(--binah-context-rail));
}

.binah-command-context {
  min-width: 170px;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.binah-command-product { font-size: 12px; font-weight: 600; }
.binah-command-detail { margin-top: 3px; color: var(--binah-muted); font-size: 9.5px; }

.binah-command-trigger {
  width: min(390px, 40vw);
  min-width: 220px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 0 9px;
  color: var(--binah-muted);
  background: var(--binah-surface-raised);
  border: 1px solid var(--binah-line);
  border-radius: 6px;
  font-size: 11px;
  text-align: left;
}

.binah-command-trigger:hover { border-color: var(--binah-line-strong); color: var(--binah-ink); }
.binah-command-trigger svg { width: 14px; height: 14px; }
.binah-command-trigger kbd {
  margin-left: auto;
  color: var(--binah-faint);
  font: 9px/1 var(--binah-mono);
}

.binah-command-actions {
  min-width: 170px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.binah-icon-button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--binah-muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.binah-icon-button:hover { background: var(--binah-surface-raised); color: var(--binah-ink); }
.binah-icon-button svg { width: 15px; height: 15px; }

.binah-environment {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--binah-muted);
  font: 9px/1 var(--binah-mono);
  text-transform: uppercase;
}

.binah-environment > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55b59c;
  box-shadow: 0 0 0 3px rgba(85, 181, 156, .12);
}

.binah-organization {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--binah-ink-soft);
  font-size: 10.5px;
  text-decoration: none;
}

.binah-org-mark {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--binah-carbon);
  color: #fff;
  font: 8.5px/1 var(--binah-mono);
}

.binah-contextbar {
  position: fixed;
  inset: var(--binah-command-height) auto 0 var(--binah-global-rail);
  z-index: 80;
  width: var(--binah-context-rail);
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #ecefeb;
  border-right: 1px solid var(--binah-line);
  color: var(--binah-ink-soft);
  overflow: hidden;
}

.binah-context-head {
  padding: 21px 17px 18px;
  border-bottom: 1px solid var(--binah-line);
}

.binah-context-kicker,
.binah-context-section,
.binah-page-kicker {
  color: var(--binah-faint);
  font: 8.5px/1.2 var(--binah-mono);
  text-transform: uppercase;
}

.binah-context-head strong {
  display: block;
  margin-top: 6px;
  color: var(--binah-ink);
  font-size: 16px;
  line-height: 1.2;
}

.binah-context-head small {
  display: block;
  margin-top: 4px;
  color: var(--binah-muted);
  font-size: 10.5px;
}

.binah-context-links {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 9px;
  overflow-y: auto;
}

.binah-context-section {
  padding: 12px 9px 5px;
}

.binah-context-link {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 6px;
  color: var(--binah-ink-soft);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
}

.binah-context-link:hover {
  color: var(--binah-ink);
  background: rgba(255, 255, 255, .62);
}

.binah-context-link.is-active {
  color: var(--binah-ink);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 28, 25, .06);
}

.binah-context-link.is-active::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--binah-brand);
}

.binah-context-link svg,
.binah-context-link i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--binah-faint);
}

.binah-context-link.is-active svg,
.binah-context-link.is-active i { color: var(--binah-brand); }

.binah-context-foot {
  margin-top: auto;
  padding: 9px;
  border-top: 1px solid var(--binah-line);
}

.binah-context-health {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 9px;
}

.binah-context-health > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--binah-success);
}

.binah-context-health strong,
.binah-context-health small { display: block; }
.binah-context-health strong { color: var(--binah-ink-soft); font-size: 10.5px; }
.binah-context-health small { margin-top: 2px; color: var(--binah-faint); font-size: 9px; }

.binah-tool-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 28px 30px 64px;
}

.binah-tool-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--binah-line);
}

.binah-tool-head-copy { min-width: 0; max-width: 680px; }
.binah-tool-head h1 {
  margin: 5px 0 0;
  color: var(--binah-ink);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.binah-tool-head p {
  margin: 7px 0 0;
  color: var(--binah-muted);
  font-size: 12px;
  line-height: 1.55;
}
.binah-tool-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.binah-work-panel { background: var(--binah-surface); border: 1px solid var(--binah-line); border-radius: 6px; }

.binah-file-input { width: 100%; color: var(--binah-muted); font-size: 12px; }
.binah-file-input::file-selector-button {
  margin-right: 12px;
  padding: 7px 11px;
  color: var(--binah-ink);
  background: var(--binah-surface-raised);
  border: 1px solid var(--binah-line-strong);
  border-radius: 4px;
  font: 500 11.5px/1 var(--binah-sans);
  cursor: pointer;
}
.binah-file-input::file-selector-button:hover { border-color: var(--binah-brand); color: var(--binah-brand); }

@media (max-width: 900px) {
  body:has(.binah-productbar),
  body:has(.binah-contextbar) {
    padding-top: 96px;
    padding-right: 0;
    padding-bottom: 58px;
    padding-left: 0;
  }
  .binah-global-rail {
    inset: auto 0 0;
    width: 100%;
    height: 58px;
    flex-direction: row;
    border-top: 1px solid var(--binah-carbon-line);
    border-right: 0;
  }
  .binah-rail-home { width: 54px; height: 58px; border-right: 1px solid var(--binah-carbon-line); border-bottom: 0; }
  .binah-glyph { width: 28px; height: 28px; }
  .binah-products { flex: 1; flex-direction: row; justify-content: space-around; padding: 4px 6px; }
  .binah-product-link { width: min(78px, 21vw); height: 49px; }
  .binah-product-link.is-active::before {
    top: auto; right: 13px; bottom: -4px; left: 13px; width: auto; height: 3px;
    border-radius: 3px 3px 0 0;
  }
  .binah-rail-action { display: none; }
  .binah-commandbar,
  body:has(.binah-contextbar) .binah-commandbar {
    left: 0;
    padding: 0 12px;
  }
  .binah-command-context { min-width: 0; }
  .binah-command-detail, .binah-command-trigger, .binah-environment, .binah-organization > span:last-child { display: none; }
  .binah-command-actions { min-width: 0; margin-left: auto; }
  .binah-contextbar {
    inset: 52px 0 auto;
    width: 100%;
    height: 44px;
    display: block;
    padding: 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--binah-line);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .binah-contextbar::-webkit-scrollbar { display: none; }
  .binah-context-head, .binah-context-section, .binah-context-foot { display: none; }
  .binah-context-links { display: inline-flex; flex-direction: row; padding: 0; overflow: visible; }
  .binah-context-link {
    min-height: 44px;
    display: inline-flex;
    padding: 0 10px;
    border-radius: 0;
    font-size: 10.5px;
  }
  .binah-context-link.is-active { background: transparent; box-shadow: inset 0 -2px var(--binah-brand); }
  .binah-context-link.is-active::after { display: none; }
  .binah-context-link svg, .binah-context-link i { display: none; }
  .binah-tool-shell { padding: 22px 16px 48px; }
  .binah-tool-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .binah-tool-actions { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .binah-icon-button { display: none; }
  .binah-tool-head h1 { font-size: 21px; }
}