/* learn-predict capture widget. Self-contained (var() fallbacks so it works with
   or without the lane palette). AA contrast on the dark theme; visible focus;
   24px+ targets; reduced-motion safe. See learn-capture-component-spec.md. */

/* SevIQ design tokens — "field journal" edition. Identical values to /lane.css;
   repeated here so this stylesheet also works standalone. */
:root {
  color-scheme: dark;
  --bg: #14110d;
  --panel: #1d1812;
  --panel-soft: rgba(236, 229, 216, 0.055);
  --border: rgba(236, 229, 216, 0.15);
  --border-strong: rgba(236, 229, 216, 0.32);
  --text: #ece5d8;
  --muted: rgba(236, 229, 216, 0.70);
  --faint: rgba(236, 229, 216, 0.48);
  --accent: #d9a441;
  --accent-soft: rgba(217, 164, 65, 0.12);
  --accent-border: rgba(217, 164, 65, 0.45);
  --verm: #c9502e;
  --warn: #e0b35c;
  --ok: #8ab86f;
  --wave: #ece5d8;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f2ede3;
  --panel: #faf7ee;
  --panel-soft: rgba(26, 23, 20, 0.045);
  --border: rgba(26, 23, 20, 0.16);
  --border-strong: rgba(26, 23, 20, 0.34);
  --text: #1a1714;
  --muted: rgba(26, 23, 20, 0.72);
  --faint: rgba(26, 23, 20, 0.52);
  --accent: #b02e1b;
  --accent-soft: rgba(176, 46, 27, 0.09);
  --accent-border: rgba(176, 46, 27, 0.42);
  --verm: #b02e1b;
  --warn: #9a6a12;
  --ok: #4e7d3a;
  --wave: #1a1714;
}

.predict-form {
  display: grid;
  gap: 14px;
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--border, rgba(236, 229, 216, 0.15));
  border-radius: 3px;
  background: var(--panel, #1d1812);
  color: var(--text, #ece5d8);
}

.predict-field {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.predict-field > legend {
  padding: 0;
  font-weight: 600;
  color: var(--text, #ece5d8);
}

.predict-value-line { display: flex; align-items: center; gap: 8px; }
.predict-value {
  min-width: 8ch;
  min-height: 40px;
  padding: 6px 10px;
  font-size: 1rem;
  color: var(--text, #ece5d8);
  background: var(--panel-soft, rgba(236, 229, 216, 0.055));
  border: 1px solid var(--border-strong, rgba(236, 229, 216, 0.32));
  border-radius: 3px;
}
.predict-unit { font-weight: 600; color: var(--muted, rgba(236, 229, 216, 0.70)); }

.predict-reason {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 32px;
  padding: 8px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.predict-reason:hover { background: var(--panel-soft, rgba(236, 229, 216, 0.055)); }
.predict-reason input { min-width: 20px; min-height: 20px; margin-top: 2px; flex: 0 0 auto; }

.predict-conf-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.predict-conf { min-width: 180px; min-height: 24px; flex: 1 1 160px; accent-color: var(--accent, #d9a441); }
.predict-conf-out { min-width: 4ch; font-variant-numeric: tabular-nums; color: var(--accent, #d9a441); font-weight: 600; }

.predict-submit { justify-self: start; min-height: 40px; }
.predict-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Visible keyboard focus (AA 2.4.7). */
.predict-form :focus-visible {
  outline: 2px solid var(--accent, #d9a441);
  outline-offset: 2px;
}

.predict-reveal {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 3px;
  border-left: 4px solid var(--muted, rgba(236, 229, 216, 0.70));
  background: var(--panel-soft, rgba(236, 229, 216, 0.055));
}
.predict-reveal.is-correct { border-left-color: var(--ok, #8ab86f); }      /* AA on dark */
.predict-reveal.is-incorrect { border-left-color: var(--verm, #c9502e); }  /* AA on dark */
.predict-reveal:focus-visible { outline: 2px solid var(--accent, #d9a441); outline-offset: 2px; }

.predict-verdict { font-weight: 700; margin: 0; }
.is-correct .predict-verdict { color: var(--ok, #8ab86f); }
.is-incorrect .predict-verdict { color: var(--verm, #c9502e); }
.predict-expected { margin: 0; font-weight: 600; }
.predict-miscon, .predict-revisit, .predict-cal, .predict-result-note {
  margin: 0;
  color: var(--muted, rgba(236, 229, 216, 0.70));
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  .predict-form, .predict-reveal { transition: none; animation: none; }
}