/* academic_math_editor.css — live math-notation editor component.
 *
 * Palette-agnostic: every colour resolves through the arm's existing tokens
 * (--bg / --panel / --border / --text / --accent, redefined for A&M in
 * academic.css under html[data-acad-theme="am"]). So the same surface renders
 * in CC-dark by default and in Aggie Maroon on white when the arm palette flips
 * — one component, two palettes, no separate identity (Steven's standing ruling).
 * Load AFTER main.css + academic.css + katex.min.css. */

.me-root {
  --me-gap: 8px;
  --me-error: var(--danger, #d33);
  --me-shared-accent: var(--accent, #58a6ff);
  display: flex;
  flex-direction: column;
  gap: var(--me-gap);
  height: 100%;
  min-height: 0;
  color: var(--text, #e6e6e6);
  font-family: var(--font-sans, system-ui, sans-serif);
}

/* --- toolbar --------------------------------------------------------------- */
.me-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.me-toolbar-spacer { flex: 1 1 auto; }
.me-course-switch {
  background: var(--panel, #161b22);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  max-width: 320px;
}
.me-btn {
  background: var(--panel, #161b22);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.me-btn:hover { border-color: var(--accent, #58a6ff); }
.me-prov-hint {
  font-size: 12px;
  color: var(--acad-warn, #d9a521);
  border: 1px solid var(--acad-warn, #d9a521);
  border-radius: 6px;
  padding: 2px 8px;
}
.me-save-status {
  font-size: 12px;
  color: var(--text-muted, #8b949e);
  font-variant-numeric: tabular-nums;
}
.me-save-status[data-state="saved"] { color: var(--acad-success, #6cbf73); }
.me-save-status[data-state="conflict"] { color: var(--danger, #f85149); font-weight: 600; }
.me-save-status[data-state="dirty"] { color: var(--acad-warn, #d9a521); }

/* Loaded-build stamp: deliberately tiny and faint so it reads only when looked
   for. Ends the "is he running the new code?" ambiguity without competing for
   attention during a live lecture. */
.me-build-stamp {
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted, #8b949e);
  opacity: 0.55;
  margin-left: 6px;
  letter-spacing: 0.2px;
  user-select: all;
}

/* Math-mode indicator: at-a-glance prose vs math so the caret's mode is never
   silent (defect 1). Muted in prose; the accent + a `$` cue when in math. */
.me-mode-indicator {
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--border, #30363d);
  color: var(--text-muted, #8b949e);
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.me-mode-indicator[data-mode="inline"],
.me-mode-indicator[data-mode="display"] {
  color: var(--acad-success, #6cbf73);
  border-color: var(--acad-success, #6cbf73);
  background: color-mix(in srgb, var(--acad-success, #6cbf73) 14%, transparent);
}

/* --- symbol strips --------------------------------------------------------- */
.me-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: var(--acad-radius, 8px);
}
.me-strip-collapsed { display: none; }
.me-strip-tier2 { background: color-mix(in srgb, var(--panel, #161b22) 88%, var(--accent, #58a6ff)); }

/* Docked strip: pinned to the bottom of the viewport as the notes surface
   scrolls, not the top (Bug #665) — a lecture note only grows downward, so a
   legend anchored above the caret gets farther away every minute of class.
   Sticky keeps it within one click of the caret at any scroll depth without
   the "always covers the screen" cost of position:fixed. The strips keep
   their own opaque backgrounds, so the dock itself needs none. */
.me-strip-dock {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.me-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg, #0e1116);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  min-height: 30px;
  font-size: 13px;
}
.me-chip:hover { border-color: var(--accent, #58a6ff); background: var(--acad-row-hover, rgba(255,255,255,0.05)); }
/* Shared-core chips carry a fixed-position marker so the stable prefix reads as
   a distinct, unchanging block across course switches. */
.me-chip-shared { border-left: 3px solid var(--me-shared-accent); }
.me-chip-custom { border-style: dashed; }
.me-chip-glyph { display: inline-flex; align-items: center; min-width: 18px; justify-content: center; }
.me-chip-glyph .katex { font-size: 1em; }
.me-chip-trig {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-muted, #8b949e);
}
/* A symbol with no reliable typed shortcut (click only): fade its trigger so
   the strip still teaches which hints are actually typeable. (Task #953) */
.me-chip-trig-clickonly {
  opacity: 0.45;
  font-style: italic;
}
.me-chip-hide {
  display: none;
  position: absolute;
  top: -7px; right: -7px;
  width: 15px; height: 15px;
  line-height: 13px; text-align: center;
  border-radius: 50%;
  background: var(--danger, #f85149);
  color: #fff;
  font-size: 11px;
}
.me-chip:hover .me-chip-hide { display: block; }
.me-chip-reset { align-self: center; opacity: 0.8; }

/* --- editor panes ---------------------------------------------------------- */
.me-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--me-gap);
  flex: 1 1 auto;
  min-height: 260px;
}
.me-source {
  width: 100%;
  height: 100%;
  min-height: 240px;
  resize: none;
  box-sizing: border-box;
  background: var(--panel, #161b22);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: var(--acad-radius, 8px);
  padding: 12px;
  /* Reserve room for the sticky strip dock below (Bug #665) so its opaque
     background never sits over the line he's actively writing on. */
  padding-bottom: calc(12px + var(--me-strip-dock-h, 0px));
  font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
  font-size: 15px;
  line-height: 1.5;
  tab-size: 2;
}
.me-source:focus { outline: none; border-color: var(--accent, #58a6ff); box-shadow: 0 0 0 3px var(--acad-focus-ring, rgba(88,166,255,0.4)); }
.me-preview {
  overflow: auto;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: var(--acad-radius, 8px);
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--me-strip-dock-h, 0px));
  font-size: 15px;
  line-height: 1.55;
}
.me-preview .me-h { margin: 0.4em 0 0.3em; line-height: 1.25; }
.me-preview p { margin: 0.35em 0; }
.me-preview .me-ul { margin: 0.3em 0; padding-left: 1.4em; }
.me-preview .me-code {
  font-family: var(--font-mono, monospace);
  background: var(--bg, #0e1116);
  border: 1px solid var(--border, #30363d);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.9em;
}
.me-math-raw, .me-math-error { color: var(--me-error); font-family: var(--font-mono, monospace); }
/* Unmatched `$` in the preview: a subtle dashed underline + warn color so an
   unclosed delimiter is visible, never silently rendered as prose (defect 1). */
.me-math-unbalanced {
  color: var(--acad-warn, #d9a521);
  border-bottom: 1px dashed var(--acad-warn, #d9a521);
  cursor: help;
  font-weight: 600;
}
.me-preview .katex-display { margin: 0.4em 0; }

@media (max-width: 720px) {
  .me-panes { grid-template-columns: 1fr; }
  /* Docked strip on phone: keep each row to a single line (scroll sideways
     to see more chips) instead of wrapping, so the sticky dock never grows
     tall enough to eat a meaningful slice of a small screen (Bug #665). */
  .me-strip-dock .me-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- autocomplete dropdown ------------------------------------------------- */
.me-autocomplete {
  position: fixed;
  z-index: 9000;
  min-width: 260px;
  max-width: 380px;
  max-height: 280px;
  overflow: auto;
  background: var(--panel, #161b22);
  border: 1px solid var(--accent, #58a6ff);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  padding: 4px;
}
.me-ac-item, .me-palette-row, .me-legend-item {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.me-ac-item.me-ac-sel, .me-palette-row.me-palette-sel { background: var(--accent, #58a6ff); color: #fff; }
.me-ac-item.me-ac-sel .me-ac-name, .me-ac-item.me-ac-sel .me-ac-trig { color: #fff; }
.me-ac-glyph { display: inline-flex; justify-content: center; align-items: center; }
.me-ac-trig { font-family: var(--font-mono, monospace); font-size: 12px; }
.me-ac-name { font-size: 12px; color: var(--text-muted, #8b949e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-ac-tier { font-size: 10px; padding: 1px 5px; border-radius: 8px; border: 1px solid var(--border, #30363d); }
.me-tier-1 { color: var(--acad-success, #6cbf73); border-color: var(--acad-success, #6cbf73); }
.me-tier-2 { color: var(--acad-warn, #d9a521); border-color: var(--acad-warn, #d9a521); }
.me-tier-3 { color: var(--text-muted, #8b949e); }

/* --- overlays (fuzzy palette + legend) ------------------------------------- */
.me-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8vh;
}
.me-palette, .me-legend {
  width: min(680px, 92vw);
  max-height: 78vh;
  overflow: auto;
  background: var(--panel, #161b22);
  border: 1px solid var(--accent, #58a6ff);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  padding: 12px;
}
.me-palette-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg, #0e1116);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  margin-bottom: 8px;
}
.me-palette-input:focus { outline: none; border-color: var(--accent, #58a6ff); }
.me-legend-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.me-legend-grounded { font-size: 12px; color: var(--text-muted, #8b949e); margin-bottom: 10px; }
.me-legend-label { font-size: 12px; font-weight: 600; margin: 10px 0 6px; color: var(--text-muted, #8b949e); text-transform: uppercase; letter-spacing: 0.04em; }
.me-legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
.me-legend-item {
  grid-template-columns: 28px auto 1fr;
  background: var(--bg, #0e1116);
  border: 1px solid var(--border, #30363d);
  color: var(--text, #e6e6e6);
  text-align: left;
}
.me-legend-item:hover { border-color: var(--accent, #58a6ff); }
.me-legend-cbform { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.me-cb-input {
  background: var(--bg, #0e1116);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}
/* --- rendered (WYSIWYG) surface + mode switch ----------------------------- */
/* Steven operates on the final rendered math, not LaTeX. The surface is a
   contenteditable prose host with embedded MathLive <math-field> islands. Two
   surfaces (source panes / rendered host) share the stack; exactly one shows per
   mode. Palette-agnostic: colours resolve through the arm tokens, so the same
   surface is CC-dark by default and Aggie Maroon on white when the palette flips. */
.me-mode-switch { font-weight: 600; }
.me-mode-switch:disabled { opacity: 0.55; cursor: default; }
.me-root.me-mode-rendered .me-mode-switch { border-color: var(--accent, #58a6ff); }

/* Loud source-mode / load-failure notice. The silent degrade into LaTeX is the
   defect; this banner makes source mode impossible to sit in unknowingly and
   always carries the one-click way back to rendered math. */
.me-mode-notice {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; padding: 8px 11px; border-radius: 8px;
  font-size: 13px; line-height: 1.35;
  border: 1px solid var(--border, #30363d);
  background: var(--panel, #161b22);
}
.me-mode-notice-text { flex: 1 1 auto; }
.me-mode-notice-btn { flex: 0 0 auto; font-weight: 600; }
.me-mode-notice[data-kind="info"] {
  border-color: var(--accent, #58a6ff);
  background: rgba(88, 166, 255, 0.10);
}
.me-mode-notice[data-kind="error"] {
  border-color: var(--danger, #f85149);
  background: rgba(248, 81, 73, 0.12);
  color: var(--danger, #f85149);
}
.me-mode-notice[data-kind="error"] .me-mode-notice-btn { border-color: var(--danger, #f85149); }

.me-surfaces { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 260px; }
.me-wys-mount { display: none; flex: 1 1 auto; min-height: 0; }
.me-root.me-mode-rendered .me-panes { display: none; }
.me-root.me-mode-rendered .me-wys-mount { display: flex; }
.me-root.me-mode-source .me-wys-mount { display: none; }

.me-wys { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.me-wys-host {
  flex: 1 1 auto;
  min-height: 240px;
  overflow: auto;
  box-sizing: border-box;
  background: var(--panel, #161b22);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: var(--acad-radius, 8px);
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--me-strip-dock-h, 0px));
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.9;              /* room for inline math-fields to sit on the line */
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.me-wys-host:focus { outline: none; }
.me-root.me-mode-rendered .me-wys:focus-within .me-wys-host {
  border-color: var(--accent, #58a6ff);
  box-shadow: 0 0 0 3px var(--acad-focus-ring, rgba(88, 166, 255, 0.4));
}
.me-wys-host:empty::before {
  content: 'Type notes. Prose is plain text; press $ or a symbol button for rendered math.';
  color: var(--text-muted, #8b949e);
  pointer-events: none;
}

/* Embedded MathLive fields: rendered math the user edits in place. */
math-field.me-mf {
  display: inline-block;
  vertical-align: middle;
  min-width: 1.1em;
  margin: 0 1px;
  padding: 1px 3px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent, #58a6ff) 8%, transparent);
  color: var(--text, #e6e6e6);
  font-size: 1.02em;
  /* MathLive theming hooks — caret/selection follow the arm accent. */
  --caret-color: var(--accent, #58a6ff);
  --primary-color: var(--accent, #58a6ff);
  --selection-background-color: color-mix(in srgb, var(--accent, #58a6ff) 30%, transparent);
  --contains-highlight-background-color: color-mix(in srgb, var(--accent, #58a6ff) 12%, transparent);
  --placeholder-color: var(--text-muted, #8b949e);
  --smart-fence-color: var(--text, #e6e6e6);
}
math-field.me-mf:hover { border-color: color-mix(in srgb, var(--accent, #58a6ff) 40%, var(--border, #30363d)); }
math-field.me-mf.me-mf-active {
  border-color: var(--accent, #58a6ff);
  background: color-mix(in srgb, var(--accent, #58a6ff) 16%, transparent);
}
math-field.me-mf-display {
  display: block;
  margin: 0.5em auto;
  padding: 6px 10px;
  text-align: center;
  font-size: 1.1em;
}
math-field.me-mf::part(virtual-keyboard-toggle),
math-field.me-mf::part(menu-toggle) { display: none; } /* keyboard-only: no on-screen chrome */

/* --- collapsed LaTeX layer ------------------------------------------------- */
/* "Always hidden, but expandable" — the raw LaTeX for when he needs to hand-edit
   directly. Collapsed by default; edits round-trip back into the rendered view. */
.me-latex-layer {
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: var(--acad-radius, 8px);
  padding: 0;
}
.me-latex-summary {
  cursor: pointer;
  list-style: none;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-muted, #8b949e);
  font-family: var(--font-mono, ui-monospace, monospace);
  user-select: none;
}
.me-latex-summary::-webkit-details-marker { display: none; }
.me-latex-summary::before { content: '▸ '; }
.me-latex-layer[open] .me-latex-summary::before { content: '▾ '; }
.me-latex-layer[open] .me-latex-summary { border-bottom: 1px solid var(--border, #30363d); color: var(--text, #e6e6e6); }
.me-latex-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 0;
}
.me-latex-field-label { font-size: 11px; color: var(--text-muted, #8b949e); white-space: nowrap; }
.me-latex-field-input {
  flex: 1 1 auto;
  background: var(--bg, #0e1116);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
}
.me-latex-field-input:focus { outline: none; border-color: var(--accent, #58a6ff); }
.me-latex-area {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  background: var(--bg, #0e1116);
  color: var(--text, #e6e6e6);
  border: none;
  border-top: 1px solid transparent;
  border-radius: 0 0 var(--acad-radius, 8px) var(--acad-radius, 8px);
  padding: 10px 12px;
  font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
  font-size: 13px;
  line-height: 1.5;
}
.me-latex-area:focus { outline: none; }

.hidden { display: none !important; }