/* teach.css - the "teach the parser this format" wizard panel (p11-5).
 * Variables first, one dark block (A12 rule for every module stylesheet). */

:root {
  --teach-bg: #f4f6f0;
  --teach-border: #ccd4c2;
  --teach-text: #262b22;
  --teach-muted: #66705c;
  --teach-accent: #3e6b2f;
  --teach-field-bg: #fcfdf9;
  --teach-error: #a03232;
}

body.dark {
  --teach-bg: #20241d;
  --teach-border: #38402f;
  --teach-text: #e2e6dc;
  --teach-muted: #9aa48d;
  --teach-accent: #94c07d;
  --teach-field-bg: #282d23;
  --teach-error: #e08484;
}

#teach-panel {
  border: 1px solid var(--teach-border);
  background: var(--teach-bg);
  color: var(--teach-text);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 8px;
  font-size: 12.5px;
  max-height: 55%;
  overflow-y: auto;
}
#teach-panel[hidden] { display: none !important; }

.teach-head { display: flex; align-items: baseline; gap: 8px; }
.teach-title { font-weight: 600; }
.teach-close { margin-left: auto; }
.teach-note { color: var(--teach-muted); line-height: 1.45; margin: 4px 0 6px; }

.teach-sample {
  background: var(--teach-field-bg);
  border: 1px solid var(--teach-border);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0 0 8px;
  max-height: 90px;
  overflow: auto;
  white-space: pre;
  font-size: 11.5px;
}

.teach-form { display: flex; flex-direction: column; gap: 6px; }
.teach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teach-row[hidden] { display: none; }
.teach-lab { display: inline-flex; align-items: center; gap: 6px; }
.teach-lab-text { color: var(--teach-muted); }

.teach-name, .teach-spans, .teach-section, .teach-field-name {
  background: var(--teach-field-bg);
  color: var(--teach-text);
  border: 1px solid var(--teach-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}

.teach-fields { margin-top: 4px; }
.teach-fields-title { color: var(--teach-muted); margin-bottom: 4px; }
.teach-field-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.teach-field-sample {
  color: var(--teach-muted);
  background: var(--teach-field-bg);
  border: 1px dashed var(--teach-border);
  border-radius: 3px;
  padding: 1px 5px;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.teach-errors { margin: 6px 0 0; }
.teach-error { color: var(--teach-error); margin: 2px 0; }

.teach-preview-head { color: var(--teach-accent); margin: 8px 0 4px; }
.teach-preview {
  background: var(--teach-field-bg);
  border: 1px solid var(--teach-border);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0;
  max-height: 160px;
  overflow: auto;
  font-size: 11.5px;
}
.teach-preview:empty { display: none; }

.teach-buttons { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.teach-download {
  color: var(--teach-accent);
  text-decoration: underline;
  cursor: pointer;
}
.teach-download-off { opacity: 0.45; pointer-events: none; text-decoration: none; }