/* Scoped tokens + layout for the formula editor (no Tailwind). */
#editor-root {
  --background: oklch(0.985 0.002 264);
  --foreground: oklch(0.22 0.02 264);
  --card: oklch(1 0 0);
  --muted: oklch(0.95 0.008 264);
  --muted-foreground: oklch(0.48 0.02 264);
  --border: oklch(0.88 0.01 264);
  --primary: oklch(0.45 0.12 250);
  --ring: oklch(0.55 0.1 250);
  --editor-workspace-bg: oklch(0.965 0.004 264);
  --editor-surface-bg: oklch(1 0 0);
  color: var(--foreground);
  background: var(--background);
  height: 100%;
  min-height: 100vh;
}

#editor-root .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

#editor-root .icon--sm {
  width: 0.875rem;
  height: 0.875rem;
}

#editor-root .icon--xs {
  width: 0.875rem;
  height: 0.875rem;
}

/* —— Shell —— */
#editor-root .editor-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

#editor-root .editor-main {
  display: flex;
  min-height: 0;
  flex: 1;
}

#editor-root .editor-library {
  width: 22%;
  min-width: 12rem;
  max-width: 20rem;
  border-right: 1px solid var(--border);
}

#editor-root .editor-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

#editor-root .editor-canvas-wrap {
  min-height: 0;
  flex: 1;
}

#editor-root .editor-latex-wrap {
  height: 18%;
  min-height: 6rem;
  max-height: 40%;
  border-top: 1px solid var(--border);
}

/* —— Formula library —— */
#editor-root .formula-library {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--card);
}

#editor-root .formula-library__header {
  flex-shrink: 0;
  padding: 0.375rem 0.5rem;
}

#editor-root .formula-library__title {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
}

#editor-root .formula-library__cats {
  flex-shrink: 0;
  margin: 0.375rem 0.5rem 0;
}

#editor-root .formula-library__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-inline: 0.125rem;
}

#editor-root .formula-library__items {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.25rem;
}

#editor-root .formula-library__empty {
  margin: 0;
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

#editor-root .formula-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  min-height: 4.25rem;
  padding: 0.5rem;
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in oklch, var(--muted) 45%, transparent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#editor-root .formula-card:hover {
  background: color-mix(in oklch, var(--muted) 70%, transparent);
}

#editor-root .formula-card.is-selected {
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 25%, transparent);
}

#editor-root .formula-card__name {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

#editor-root .formula-preview {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: left;
  color: var(--foreground);
}

#editor-root .formula-preview .katex {
  font-size: 1.45rem !important;
  line-height: normal;
  text-align: left;
}

#editor-root .formula-preview .katex-display {
  margin-block: 0;
  overflow: visible;
}

/* —— Math ribbon (toolbar chrome) —— */
#editor-root .math-ribbon {
  flex-shrink: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
}

#editor-root .math-ribbon__row {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0;
}

#editor-root .math-ribbon__row .app-launcher {
  align-self: center;
  margin-right: 0.125rem;
}

#editor-root .math-ribbon__tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: flex-end;
  gap: 0.125rem;
  overflow-x: auto;
}

#editor-root .math-ribbon__search {
  flex-shrink: 0;
  width: 11rem;
  margin-bottom: 0.25rem;
}

#editor-root .math-ribbon__search.is-searching {
  margin-left: auto;
}

#editor-root .math-ribbon__panel {
  padding: 0 0.5rem 0.375rem;
}

#editor-root .math-ribbon__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  min-width: 4.25rem;
  padding: 0.25rem 0.625rem 0.375rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 0.375rem 0.375rem 0 0;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 70%, transparent);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

#editor-root .math-ribbon__tab:hover {
  background: color-mix(in oklch, var(--card) 50%, transparent);
  color: var(--foreground);
}

#editor-root .math-ribbon__tab.is-active {
  z-index: 1;
  margin-bottom: -1px;
  border-color: color-mix(in oklch, var(--border) 70%, transparent);
  background: var(--ribbon-card-bg, var(--card));
  color: var(--foreground);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

#editor-root .math-ribbon__tab-label {
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#editor-root .math-ribbon__panel-card {
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.625rem;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  border-radius: 0.375rem;
  background: var(--ribbon-card-bg, var(--card));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

#editor-root .math-ribbon__empty {
  margin: 0;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

#editor-root .math-ribbon__stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#editor-root .math-ribbon__stack--tight {
  gap: 0.25rem;
}

#editor-root .math-ribbon__group {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 2rem;
}

#editor-root .math-ribbon__group-label {
  width: 2.75rem;
  flex-shrink: 0;
  padding-top: 0.75rem;
  color: var(--muted-foreground);
}

#editor-root .math-ribbon__section-label {
  display: block;
  width: auto;
  margin: 0 0 0.25rem;
  padding-top: 0;
  font-weight: 500;
}

#editor-root .math-ribbon__group-items {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#editor-root .math-ribbon__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  border-radius: 0.25rem;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#editor-root .math-ribbon__item:hover {
  background: color-mix(in oklch, var(--muted) 50%, transparent);
}

#editor-root .math-ribbon__item--glyph {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1rem;
}

#editor-root .math-ribbon__item--glyph.is-compact {
  width: 2rem;
  height: 2rem;
}

#editor-root .math-ribbon__item--preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 3rem;
  min-width: 3rem;
  padding: 0 0.375rem;
}

#editor-root .math-ribbon__item--preview.is-spacious {
  height: 3.5rem;
  min-width: 3.5rem;
}

#editor-root .math-ribbon__katex-scale {
  display: inline-flex;
  transform-origin: center;
}

/* —— Canvas / welcome —— */
#editor-root .editor-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--editor-workspace-bg);
}

#editor-root .editor-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
}

#editor-root .editor-viewport__center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  margin: 0 auto;
}

#editor-root .editor-formula-host {
  position: relative;
  flex-shrink: 0;
}

#editor-root .editor-formula-host.is-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#editor-root .editor-surface {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  padding: 1.5rem 2rem;
  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
  border-radius: 0.5rem;
  background: var(--editor-surface-bg);
}

#editor-root .editor-surface.is-empty {
  min-width: 12rem;
  min-height: 3rem;
}

#editor-root .novamath-mathfield.is-centered {
  text-align: center;
}

#editor-root .editor-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 2rem;
}

#editor-root .editor-welcome__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 28rem;
  text-align: center;
}

#editor-root .editor-welcome__logo {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  object-fit: cover;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

#editor-root .editor-welcome__title {
  margin: 1.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

#editor-root .editor-welcome__desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

#editor-root .editor-welcome__hints {
  width: 100%;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

#editor-root .editor-welcome__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

#editor-root .editor-welcome__hint:first-child {
  margin-top: 0;
}

#editor-root .editor-welcome__hint-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--primary);
}

#editor-root .editor-welcome__cta {
  margin-top: 2rem;
}

/* —— LaTeX input —— */
#editor-root .latex-bar {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fffbeb;
}

#editor-root .latex-bar__gutter {
  flex-shrink: 0;
  min-width: 2.25rem;
  overflow: hidden;
  padding: 0.5rem;
  border-right: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
  background: rgb(254 243 199 / 0.7);
  color: var(--muted-foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.625;
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

#editor-root .latex-bar__gutter.is-wide {
  min-width: 2.75rem;
}

#editor-root .latex-bar__input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  resize: none;
  outline: none;
  background: transparent;
  color: var(--foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.625;
  overflow: auto;
}

#editor-root .latex-bar__input:focus {
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ring) 35%, transparent);
}

/* —— Bottom bar —— */
#editor-root .editor-bottom-bar {
  flex-shrink: 0;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  background: var(--card);
}

#editor-root .editor-bottom-bar__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  min-width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
}

#editor-root .bar-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
  border-radius: 0.375rem;
  background: color-mix(in oklch, var(--muted) 40%, transparent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

#editor-root .bar-group__title {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
  padding-right: 0.5rem;
  border-right: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}

#editor-root .bar-check {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
}

#editor-root .bar-check input {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.25rem;
  accent-color: var(--primary);
}

#editor-root .bar-fontsize {
  width: 2.75rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  outline: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

#editor-root .bar-color {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  cursor: pointer;
}

#editor-root .bar-status {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted-foreground);
}

#editor-root .bar-zoom {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  padding-left: 0.5rem;
}

#editor-root .bar-zoom__slider {
  width: 7rem;
}

#editor-root .bar-zoom__value {
  width: 2.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

/* —— Error —— */
#editor-root .editor-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem;
}

#editor-root .editor-error__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

#editor-root .editor-error__detail {
  max-width: 36rem;
  margin: 0;
  overflow: auto;
  padding: 1rem;
  border-radius: 0.375rem;
  background: var(--muted);
  font-size: 0.75rem;
}

#editor-root .app-logo {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  object-fit: cover;
}

#editor-root .novamath-mathfield__input {
  --primary: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
}

#editor-root .novamath-mathfield__input:focus-within {
  --primary: color-mix(in oklch, var(--muted-foreground) 65%, transparent);
  border-color: color-mix(in oklch, var(--ring) 35%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 15%, transparent);
}