/* SPDX-License-Identifier: Apache-2.0 */
/*
  OpenMath visual refresh (dev branch).
  Incremental presentation layer: no DOM/API contract changes, no external assets.
  Loaded after the base stylesheets and usability layer.
*/

:root {
  --om-radius-xs: 10px;
  --om-radius-sm: 14px;
  --om-radius-md: 18px;
  --om-radius-lg: 22px;
  --om-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #0f766e 100%);
  --om-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, .12), rgba(15, 118, 110, .10));
  --om-shadow-panel: 0 18px 44px rgba(15, 23, 42, .09), 0 2px 8px rgba(15, 23, 42, .05);
  --om-shadow-float: 0 10px 26px rgba(15, 23, 42, .12);
  --om-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .72);
}

/* Manual theme overrides. Without a data-theme the base OS preference applies. */
:root[data-theme="light"] {
  color-scheme: light;
  --fc-bg-canvas: #F6F6F6;
  --fc-bg-surface: #FCFCFC;
  --fc-bg-sunken: #EEEEEE;
  --fc-bg-hover: #EEEEEE;
  --fc-bg-selected: #E5E0F4;
  --fc-line-subtle: #D1D1D1;
  --fc-line-strong: #868686;
  --fc-text-primary: #303030;
  --fc-text-secondary: #555555;
  --fc-text-tertiary: #6D6D6D;
  --fc-text-disabled: #A0A0A0;
  --fc-text-on-brand: #FFFFFF;
  --fc-text-brand: #2F46E5;
  --fc-brand-solid: #5F5EF0;
  --fc-brand-hover: #2F46E5;
  --fc-focus-ring: #1B2B95;
  --fc-danger: #DA2742;
  --fc-warning: #9A6815;
  --fc-success: #20824A;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fc-bg-canvas: #222222;
  --fc-bg-surface: #303030;
  --fc-bg-sunken: #181818;
  --fc-bg-hover: #3E3E3E;
  --fc-bg-selected: #38347E;
  --fc-line-subtle: #3E3E3E;
  --fc-line-strong: #868686;
  --fc-text-primary: #F6F6F6;
  --fc-text-secondary: #E2E2E2;
  --fc-text-tertiary: #A0A0A0;
  --fc-text-disabled: #6D6D6D;
  --fc-text-on-brand: #FFFFFF;
  --fc-text-brand: #CBBFF9;
  --fc-brand-solid: #5F5EF0;
  --fc-brand-hover: #2F46E5;
  --fc-focus-ring: #AEA0F7;
  --fc-danger: #F88D8B;
  --fc-warning: #E59D25;
  --fc-success: #35C36D;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--fc-bg-canvas);
  background-image:
    radial-gradient(1100px 460px at 8% -12%, rgba(79, 70, 229, .13), transparent 62%),
    radial-gradient(860px 420px at 100% 0%, rgba(15, 118, 110, .09), transparent 58%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- top bar */
#topbar {
  gap: 10px 18px;
  padding: 12px clamp(16px, 2.4vw, 32px);
  background: var(--fc-bg-surface);
  background: color-mix(in srgb, var(--fc-bg-surface) 88%, transparent);
  border-bottom: 1px solid var(--fc-line-subtle);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .04);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

#app-title,
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.1;
}
#app-title::before,
.brand::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--om-gradient);
  box-shadow: 0 6px 16px rgba(79, 70, 229, .28), var(--om-shadow-inset);
}

#selectors { gap: 10px 14px; }

.field {
  gap: 7px;
  font-size: 13px;
  font-weight: 550;
}
.field__label { color: var(--fc-text-tertiary); letter-spacing: .01em; }

select,
input[type="text"],
input[type="search"],
textarea {
  border-radius: var(--om-radius-xs);
  transition: border-color var(--fc-motion-fast) var(--fc-ease-standard),
              box-shadow var(--fc-motion-fast) var(--fc-ease-standard),
              background var(--fc-motion-fast) var(--fc-ease-standard);
}
select:hover { background: var(--fc-bg-hover); }
select:focus-visible,
input[type="text"]:focus-visible,
textarea:focus-visible {
  border-color: var(--fc-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-focus-ring) 16%, transparent);
}

#theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fc-hit-min);
  min-width: var(--fc-hit-min);
  height: var(--fc-hit-min);
  min-height: var(--fc-hit-min);
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--fc-line-subtle);
  background: var(--fc-bg-sunken);
  color: var(--fc-text-primary);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--fc-motion-fast) var(--fc-ease-standard),
              background var(--fc-motion-fast) var(--fc-ease-standard);
}
#theme-toggle:hover { background: var(--fc-bg-hover); transform: translateY(-1px); }
#theme-toggle:active { transform: translateY(0); }

.dev-badge[hidden] { display: none !important; }
.dev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b45309, #b91c1c);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .14em;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .22);
}
.dev-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
/* Source-run dev has no deployed version archive: do not expose raw backend
   diagnostics in the top bar. The DEV badge already identifies the preview. */
html[data-env="dev"] #version-banner,
html[data-env="dev"] #version-picker > span[role="status"] { display: none !important; }

/* ---------------------------------------------------------------- workspace */
#workspace {
  gap: clamp(12px, 1.5vw, 20px);
  padding: clamp(12px, 1.8vw, 24px);
  background: transparent;
}

#workspace > .pane,
#workspace #input-pane,
#workspace #steps-pane,
#workspace #render-pane,
#workspace [data-pane] {
  border: 1px solid var(--fc-line-subtle);
  border-radius: var(--om-radius-lg);
  background: var(--fc-bg-surface);
  box-shadow: var(--om-shadow-panel);
  overflow: hidden;
}

#workspace .pane__title,
#workspace .pane > h2,
#workspace [data-pane] > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  background: var(--fc-bg-surface);
  border-bottom: 1px solid var(--fc-line-subtle);
  color: var(--fc-text-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#workspace .pane__title::before,
#workspace .pane > h2::before,
#workspace [data-pane] > h2::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--om-gradient);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc-brand-solid) 12%, transparent);
}

#workspace .pane__body {
  padding: clamp(16px, 1.7vw, 24px);
  scrollbar-gutter: stable;
}

#workspace .formula-help {
  color: var(--fc-text-tertiary);
  font-size: 12px;
  line-height: 1.65;
}

#workspace .formula-paper {
  padding: clamp(16px, 1.7vw, 22px);
  border: 1px solid var(--fc-line-subtle);
  border-radius: var(--om-radius-md);
  background:
    radial-gradient(circle at 18% 15%, rgba(99, 102, 241, .08), transparent 42%),
    linear-gradient(145deg, var(--fc-bg-surface), var(--fc-bg-sunken));
  box-shadow: var(--om-shadow-inset), 0 8px 24px rgba(15, 23, 42, .05);
  transition: border-color var(--fc-motion-fast) var(--fc-ease-standard),
              box-shadow var(--fc-motion-fast) var(--fc-ease-standard);
}
#workspace .formula-paper:focus-within {
  border-color: var(--fc-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-focus-ring) 15%, transparent),
              var(--om-shadow-inset);
}

#formula-toolbar {
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--fc-line-subtle);
  border-radius: var(--om-radius-sm);
  background: var(--fc-bg-sunken);
}
#formula-toolbar button {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  transition: background var(--fc-motion-fast) var(--fc-ease-standard),
              border-color var(--fc-motion-fast) var(--fc-ease-standard);
}
#formula-toolbar button[aria-pressed="true"] {
  border-color: var(--fc-focus-ring);
  background: var(--fc-bg-selected);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--fc-focus-ring) 12%, transparent);
}

#workspace .action {
  border-radius: 11px;
  font-weight: 650;
  letter-spacing: .01em;
  transition: transform var(--fc-motion-fast) var(--fc-ease-standard),
              box-shadow var(--fc-motion-fast) var(--fc-ease-standard),
              background var(--fc-motion-fast) var(--fc-ease-standard);
}
#workspace .action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .10);
}
#workspace .action:active { transform: translateY(0); }
#workspace .action--primary {
  background: var(--om-gradient);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .24);
}
#workspace .action--primary:hover { background: var(--om-gradient); }

#workspace #op-bar,
#workspace #latex-actions,
#workspace .input-actions {
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--fc-line-subtle);
  background: var(--fc-bg-surface);
  background: color-mix(in srgb, var(--fc-bg-surface) 92%, transparent);
  box-shadow: 0 -8px 18px rgba(15, 23, 42, .035);
}

.examples li,
#examples li {
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--fc-bg-sunken);
  color: var(--fc-text-secondary);
  font-size: 13px;
  transition: border-color var(--fc-motion-fast), background var(--fc-motion-fast);
}
.examples li:hover,
#examples li:hover {
  border-color: var(--fc-line-subtle);
  background: var(--fc-bg-surface);
}

/* ---------------------------------------------------------------- steps/result */
#steps > li.step,
#steps > li {
  border-radius: var(--om-radius-sm);
  border-left-width: 3px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .045);
  transition: transform var(--fc-motion-fast) var(--fc-ease-standard),
              box-shadow var(--fc-motion-fast), background var(--fc-motion-fast);
}
#steps > li.step:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
#steps > li.step[data-active="1"] {
  border-left-color: var(--fc-brand-solid);
  background: var(--fc-bg-selected);
  box-shadow: 0 8px 22px rgba(79, 70, 229, .12);
}

#result {
  min-height: 152px;
  padding: 22px;
  border: 1px dashed var(--fc-line-subtle);
  border-radius: var(--om-radius-md);
  background: var(--fc-bg-sunken);
  transition: border-color var(--fc-motion-fast), background var(--fc-motion-fast);
}
#result:not(:empty) {
  border-style: solid;
  background: var(--fc-bg-surface);
  box-shadow: var(--om-shadow-inset);
}
.empty {
  padding: 18px;
  border: 1px dashed var(--fc-line-subtle);
  border-radius: var(--om-radius-sm);
  color: var(--fc-text-tertiary);
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* UX guidance from the 2026-10-14 GUI review: next-step hint, result freshness */
#action-guide {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--fc-line-subtle);
  background: color-mix(in srgb, var(--fc-bg-surface) 94%, var(--fc-brand-solid));
  color: var(--fc-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
#action-guide::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fc-brand-solid);
}
#action-guide[data-state="ready"]::before { background: var(--fc-success); }
#action-guide[data-state="calculating"]::before { background: var(--fc-text-brand); animation: omPulse 1.2s ease-in-out infinite; }
#action-guide[data-state="stale"] { color: var(--fc-warning); }
#action-guide[data-state="stale"]::before { background: var(--fc-warning); }
#action-guide[data-state="error"] { color: var(--fc-danger); }
#action-guide[data-state="error"]::before { background: var(--fc-danger); }

.result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--fc-line-subtle);
  border-radius: var(--om-radius-xs);
  background: var(--fc-bg-sunken);
  color: var(--fc-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.result-meta__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fc-text-tertiary);
}
.result-meta[data-state="fresh"] .result-meta__dot { background: var(--fc-brand-solid); }
.result-meta[data-state="calculating"] .result-meta__dot { background: var(--fc-text-brand); animation: omPulse 1.2s ease-in-out infinite; }
.result-meta[data-state="stale"] { color: var(--fc-warning); border-color: color-mix(in srgb, var(--fc-warning) 38%, var(--fc-line-subtle)); }
.result-meta[data-state="stale"] .result-meta__dot { background: var(--fc-warning); }
.result-meta[data-state="error"] { color: var(--fc-danger); border-color: color-mix(in srgb, var(--fc-danger) 38%, var(--fc-line-subtle)); }
.result-meta[data-state="error"] .result-meta__dot { background: var(--fc-danger); }
@keyframes omPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

#formula-error:not([hidden]) {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--fc-danger) 42%, var(--fc-line-subtle));
  border-left: 4px solid var(--fc-danger);
  border-radius: var(--om-radius-xs);
  background: color-mix(in srgb, var(--fc-danger) 7%, var(--fc-bg-surface));
  color: var(--fc-danger);
  line-height: 1.6;
}
#calculation-feedback:not(:empty) {
  margin: 8px 0;
  min-height: 0;
  color: var(--fc-text-secondary);
  font-size: 12px;
}

@media (max-width: 560px) {
  #action-guide { padding: 6px 12px; font-size: 11px; }
  .result-meta { margin-bottom: 8px; padding: 7px 10px; font-size: 11px; }
}

/* ---------------------------------------------------------------- footer */
#bottom,
.bottombar {
  padding: 10px clamp(16px, 2.4vw, 32px);
  background: var(--fc-bg-surface);
  background: color-mix(in srgb, var(--fc-bg-surface) 90%, transparent);
  border-top: 1px solid var(--fc-line-subtle);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.status { gap: 14px; }
.seg { padding-inline: 2px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  #workspace { padding: 14px; gap: 14px; }
}
@media (max-width: 760px) {
  #topbar { padding: 10px 12px; gap: 8px 10px; }
  #app-title, .brand { font-size: 20px; gap: 9px; }
  #app-title::before, .brand::before { width: 28px; height: 28px; border-radius: 9px; }
  #workspace { padding: 10px; gap: 12px; }
  #workspace > .pane,
  #workspace #input-pane,
  #workspace #steps-pane,
  #workspace #render-pane,
  #workspace [data-pane] { border-radius: var(--om-radius-md); }
  #workspace .pane__body { padding: 14px; }
}
@media (max-width: 560px) {
  .dev-badge { font-size: 9px; padding: 3px 8px; }
  #workspace .pane__title,
  #workspace .pane > h2,
  #workspace [data-pane] > h2 { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  #theme-toggle, .dev-badge { display: none !important; }
  body { background: #fff; }
  #workspace > .pane { box-shadow: none; }
}