/* style.css - index.html stylesheet */

/* variables (tokens) */
:root {
  /* Ink / text */
  --ink:        #1a1a2e;
  --ink-2:      #3d3d5c;
  --ink-3:      #6b6b8a;

  /* Structure */
  --rule:       #d4d4e0;
  --rule-light: #eaeaf2;
  --surface:    #f7f7fb;
  --white:      #ffffff;

  /* Accent — navy */
  --accent:     #2a4a8f;
  --accent-2:   #1a3070;
  --accent-bg:  #eef2fc;
  --accent-mid: #4a6abf;

  /* Semantic */
  --green:      #1a6640;
  --green-bg:   #edf7f1;
  --amber:        #7a4a00;
  --amber-bg:     #fef6e4;
  --amber-border: rgba(122, 74, 0, 0.2);
  --red:        #8b1a1a;
  --red-bg:     #fef0f0;

  --mono:       'Courier New', Courier, monospace;

  /* Radius */
  --radius:     4px;
  --radius-lg:  12px;  /* increased from 8px — more Apple */

  /* Glass surfaces — light mode */
  --glass-panel:   rgba(255, 255, 255, 0.65);
  --glass-card:    rgba(255, 255, 255, 0.85);
  --glass-popup:   rgba(255, 255, 255, 0.92);
  --glass-blur:    blur(16px);
  --glass-border:  rgba(255, 255, 255, 0.4);
  --glass-shine:   rgba(255, 255, 255, 0.8);
  --glass-shadow:  rgba(0, 0, 0, 0.06);

  /* Body background — light mode */
  --bg-gradient: linear-gradient(135deg, #eef0f8 0%, #e4e8f5 100%);

  /* Overlay */
  --overlay: rgba(0, 0, 0, 0.15);

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-med:    0.2s ease;
  --t-slow:   0.3s ease;
  --t-spring: cubic-bezier(0.4, 0, 0.2, 1);
}

/* dark theme */
body.dark {
  background: #0f172a;
  color: #e2e8f0;
}
body.dark,
body.dark .site-header,
body.dark .panel-left,
body.dark .panel-right {
  background: #0f172a;
}
body.dark .site-header {
  background: #111827;
  border-bottom-color: #334155;
}
body.dark .panel-left {
  background: #111827;
  border-right-color: #334155;
}
body.dark .panel-right {
  background: #0f172a;
}
body.dark .panel-section {
  border-bottom-color: #1e293b;
}
body.dark .source-tabs {
  border-color: #334155;
}
body.dark .source-tab {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}
body.dark .source-tab.active {
  background: #111827;
  color: #a5b4fc;
}
body.dark textarea,
body.dark input[type="text"],
body.dark input[type="url"] {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}
body.dark .upload-zone {
  border-color: #334155;
}
body.dark .output-option {
  border-color: #334155;
}
body.dark .option-label {
  color: #cbd5e1;
}
body.dark .option-desc {
  color: #64748b;
}
body.dark .toggle-track {
  background: #334155;
}
body.dark .toggle-switch input:checked + .toggle-track {
  background: #a5b4fc;
}
body.dark .btn-generate {
  background: #a5b4fc;
  color: #0f172a;
}
body.dark .btn-generate:hover {
  background: #818cf8;
}
body.dark .btn-secondary {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}
body.dark .header-icon {
  color: #cbd5e1;
  border-color: #334155;
}
body.dark .header-icon:hover {
  background: rgba(148, 163, 184, 0.1);
  border-color: #a5b4fc;
  color: #a5b4fc;
}
body.dark .header-badge {
  background: rgba(165, 180, 252, 0.1);
  color: #a5b4fc;
  border-color: #475569;
}
body.dark .modal-card {
  background: #111827;
}
body.dark .modal-body {
  color: #cbd5e1;
}
body.dark .modal-close {
  color: #94a3b8;
}
body.dark .empty-state {
  color: rgba(226, 232, 240, 0.6);
}
body.dark .empty-title {
  color: #cbd5e1;
}
body.dark .empty-body {
  color: #94a3b8;
}
body.dark .pipeline-status {
  background: #111827;
  border-color: #334155;
}
body.dark .result-card {
  background: #111827;
  border-color: #334155;
}
body.dark .result-card-header {
  border-bottom-color: #1e293b;
}
body.dark .error-box {
  background: rgba(139, 26, 26, 0.2);
  border-color: #7f1d1d;
  color: #fca5a5;
}
body.dark .compliance-note {
  border-top-color: #1e293b;
  color: #94a3b8;
}
body.dark .compliance-note strong {
  color: #cbd5e1;
}
body.dark .share-feedback {
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
}

/* site reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
  transition: background var(--t-slow);
}

/* Smooth colour transitions when the theme toggles — layout/transform
   properties are intentionally excluded; components own those. */
* {
  transition: color var(--t-med),
              background-color var(--t-slow),
              border-color var(--t-med);
}

/* typography (fonts) — Apple system stack for UI chrome */
h1, h2, h3, h4, .label, .eyebrow, nav, button, input, select, textarea, .mono {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', Arial, sans-serif;
}

/* Generated content keeps the scholarly serif */
.result-text,
.flashcard-back,
.quiz-justification {
  font-family: Georgia, 'Times New Roman', serif;
}
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
h2 { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
h3 { font-size: .9rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
p  { color: var(--ink-2); font-size: .95rem; }

/* site layout */
.site-header {  /* logo and nav */
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px var(--glass-shadow),
              inset 0 1px 0 var(--glass-shine);
  padding-right: 1.5rem; /* keep right padding */
  padding-left: 1.5rem; /* align header image with panel item padding */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-height: auto;
  height: auto;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header > * {
  min-width: 0;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.header-sources {
  font-size: .75rem;
  color: var(--ink-3);
  background: var(--white);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.site-header .wordmark {  /* L-OERner logo text */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accent);
  display: flex; align-items: center; gap: 8px;
}
.site-header .wordmark-icon {
  width: 26px; height: 26px;
  background: var(--accent);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.site-header .wordmark-icon svg { color: #fff; }
.header-divider { width: 1px; height: 20px; background: var(--rule); }
.header-tag {
  font-size: .75rem;
  color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .04em;
}
.site-header .wordmark {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0; /* remove internal gap so image sits flush */
  padding: 0; /* no padding around the wordmark */
  margin: 0;
}
.wordmark-img {
  display: block;
  width: 70px;
  height: 60px;
  object-fit: contain;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-right: 0.5rem;
}
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.header-icon:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}
body.dark .header-icon:hover {
  background: rgba(255, 255, 255, 0.08);
}
.header-badge {
  font-size: .68rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid rgba(42, 74, 143, 0.2);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 700;
  letter-spacing: .06em;
}

.main-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}

/* left panel for UI */
.panel-left {
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px var(--glass-shadow),
              inset 0 1px 0 var(--glass-shine);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
}

.panel-section {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule-light);
}
.panel-section:last-child { border-bottom: none; flex: 1; }

.section-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: 6px;
}
.section-eyebrow::before {
  content: '';
  display: block;
  width: 12px; height: 1px;
  background: var(--rule);
}

/* source input tabs — pill style */
.source-tabs {
  display: flex;
  border: none;
  border-radius: 20px;
  overflow: hidden;
  padding: 3px;
  gap: 2px;
  background: var(--rule-light);
  margin-bottom: .75rem;
}
.source-tab {
  flex: 1; padding: 5px 12px;
  font-size: .75rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: transparent;
  border: none;
  border-radius: 16px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  font-weight: 500;
}
.source-tab:last-child { border-right: none; }
.source-tab.active {
  background: var(--glass-card);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 4px var(--glass-shadow);
}
body.dark .source-tab { background: transparent; color: var(--ink-3); border-color: transparent; }
body.dark .source-tab.active { background: var(--glass-card); color: var(--accent); }

.source-pane { display: none; }
.source-pane.active { display: block; }

textarea {
  width: 100%;
  min-height: 140px;
  padding: 10px 12px;
  font-size: .85rem;
  font-family: Georgia, serif;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--glass-card);
  color: var(--ink);
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
input[type="text"], input[type="url"], input[type="number"], select {
  background: var(--glass-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.upload-zone {
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--white);
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--accent-mid); background: var(--accent-bg); }
.upload-zone input { display: none; }
.upload-icon { font-size: 1.4rem; margin-bottom: 6px; opacity: .4; }
.upload-label { font-size: .8rem; color: var(--ink-3); font-family: 'Helvetica Neue', Arial, sans-serif; }
.upload-sub { font-size: .72rem; color: var(--ink-3); margin-top: 2px; opacity: .7; }
.upload-filename { font-size: .8rem; color: var(--green); font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 600; margin-top: 6px; }

/* URL input (source input tab 3) */
.url-row { display: flex; gap: 6px; }
.url-row input {
  flex: 1; padding: 8px 10px;
  font-size: .82rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--glass-card);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.url-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.btn-sm {
  padding: 8px 14px;
  font-size: .78rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast),
              color var(--t-fast),
              transform var(--t-fast),
              box-shadow var(--t-fast);
}
.btn-sm:hover, .btn-copy:hover, .btn-export:hover { transform: translateY(-1px); }
.btn-sm:active, .btn-copy:active, .btn-export:active { transform: translateY(0); }
.btn-sm:hover { background: var(--rule-light); }

/* output type checkboxes */
.output-options { display: flex; flex-direction: column; gap: 6px; }
.output-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--white);
}
.output-option:hover { border-color: var(--glass-border); background: var(--glass-card); }
.output-option.checked {
  border-color: rgba(42, 74, 143, 0.2);
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
}
body.dark .output-option.checked { border-left-color: var(--accent); background: var(--accent-bg); }
.output-option input[type=checkbox] { display: none; }
.option-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
}
.output-option.checked .option-check {
  background: var(--accent);
  border-color: var(--accent);
}
.option-check-tick { display: none; color: #fff; font-size: 10px; font-weight: 900; }
.output-option.checked .option-check-tick { display: block; }
.option-label { font-size: .82rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 500; color: var(--ink-2); }
.option-desc { font-size: .72rem; color: var(--ink-3); margin-top: 1px; }

/* grounding toggles */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.toggle-label { font-size: .82rem; font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--ink-2); font-weight: 500; }
.toggle-desc { font-size: .72rem; color: var(--ink-3); margin-top: 1px; }
.toggle-switch {
  position: relative; width: 34px; height: 19px;
  flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--rule);
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-switch input:checked + .toggle-track {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.toggle-thumb {
  position: absolute;
  width: 13px; height: 13px;
  background: white;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform .2s;
  pointer-events: none;
}
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(15px); }

/* generate buttons */
.btn-generate {
  width: 100%;
  padding: 11px;
  font-size: .9rem;
  font-weight: 700;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #2a4a8f 0%, #1a3070 100%);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: 0 2px 12px rgba(42, 74, 143, 0.35);
  transition: transform var(--t-fast),
              box-shadow var(--t-fast),
              background var(--t-fast),
              opacity var(--t-fast);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-generate:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(42, 74, 143, 0.45);
}
.btn-generate:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 8px rgba(42, 74, 143, 0.3);
}
.btn-generate:disabled { opacity: .5; cursor: not-allowed; }
body.dark .btn-generate {
  background: linear-gradient(135deg, #6b9fff 0%, #5580e0 100%);
  box-shadow: 0 2px 12px rgba(107, 159, 255, 0.3);
  color: #12101a;
}
body.dark .btn-generate:hover:not(:disabled) {
  box-shadow: 0 4px 20px rgba(107, 159, 255, 0.4);
}

/* OER compliance notice */
.compliance-note {
  font-size: .72rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: .75rem;
  border-top: 1px solid var(--rule-light);
  margin-top: .75rem;
}
.compliance-note strong { color: var(--ink-2); font-weight: 600; }

/* right panel (output) */
.panel-right {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem;
  gap: 1.5rem;
}

/* empty state (no input yet)*/
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 4rem 2rem;
  opacity: .5;
}
.empty-icon { font-size: 2.5rem; opacity: .3; filter: grayscale(1); }
.empty-title { font-size: 1rem; font-weight: 600; font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--ink-2); }
.empty-body { font-size: .85rem; color: var(--ink-3); font-family: 'Helvetica Neue', Arial, sans-serif; max-width: 320px; }

/* pipeline status bar (progress indicator) */
.pipeline-status {
  background: var(--glass-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px var(--glass-shadow),
              inset 0 1px 0 var(--glass-shine);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: none;
}
.pipeline-status.visible { display: block; }
.pipeline-steps { display: flex; align-items: center; gap: 0; margin-top: .75rem; }
.pip-step {
  flex: 1; display: flex; align-items: center;
}
.pip-step-inner { flex: 1; }
.pip-label { font-size: .68rem; font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.pip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule);
  margin: 4px 0;
  transition: background .3s;
}
.pip-step.active .pip-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); animation: pulse 1s ease-in-out infinite; }
.pip-step.done .pip-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); animation: none; }
.pip-step.active .pip-label, .pip-step.done .pip-label { color: var(--ink); }
.pip-connector {
  height: 1px; flex: 1;
  background: var(--rule);
  margin: 0 4px;
  transition: background .3s;
}
.pip-connector.done { background: var(--green); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* result: summary cards */
.result-section { display: none; }
.result-section.visible { display: flex; flex-direction: column; gap: 1rem; }

.result-card {
  background: var(--glass-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px var(--glass-shadow),
              inset 0 1px 0 var(--glass-shine);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-med), transform var(--t-med);
}
.result-card:hover {
  box-shadow: 0 8px 32px var(--glass-shadow);
  transform: translateY(-1px);
}
.result-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--rule-light);
  background: transparent;
}
.result-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.result-card-icon {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--accent-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  color: var(--accent);
  font-weight: 900;
}
.btn-copy {
  font-size: .72rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--t-fast),
              color var(--t-fast),
              transform var(--t-fast),
              box-shadow var(--t-fast);
}
.btn-copy:hover { background: var(--white); color: var(--ink); }
.btn-copy.copied { color: var(--green); border-color: #a8ddc0; }

.result-card-body { padding: 1.25rem; }
.result-text {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.75;
  white-space: pre-wrap;
}

/* result: quiz styles */
.quiz-question { margin-bottom: 1.25rem; }
.quiz-q { font-size: .9rem; font-weight: 600; font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--ink); margin-bottom: .5rem; }
.quiz-options { display: flex; flex-direction: column; gap: 5px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-lg);
  font-size: .85rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast),
              border-color var(--t-fast),
              transform var(--t-fast);
  background: var(--white);
}
.quiz-opt:hover { border-color: var(--rule); background: var(--surface); transform: translateX(2px); }
.quiz-opt.correct { border-color: #a8ddc0; background: var(--green-bg); color: var(--green); }
.quiz-opt.incorrect { border-color: #f5b8b8; background: var(--red-bg); color: var(--red); }
.quiz-opt.revealed-correct { border-color: #a8ddc0; background: var(--green-bg); color: var(--green); }
.quiz-letter {
  font-size: .7rem; font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--rule);
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.quiz-opt.correct .quiz-letter, .quiz-opt.revealed-correct .quiz-letter { background: var(--green); color: white; }
.quiz-opt.incorrect .quiz-letter { background: var(--red); color: white; }
.quiz-justification {
  font-size: .8rem;
  font-style: italic;
  color: var(--ink-3);
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 2px solid var(--rule);
  display: none;
}
.quiz-justification.visible { display: block; }

/* result: flashcard styles */
.flashcard-grid { display: flex; flex-direction: column; gap: 8px; }
.flashcard {
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-card);
  transition: box-shadow var(--t-fast);
}
.flashcard:hover { box-shadow: 0 2px 12px var(--glass-shadow); }
.flashcard-front {
  padding: 10px 14px;
  font-size: .88rem;
  font-weight: 600;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: border-color .2s;
}
.flashcard.open .flashcard-front { border-color: var(--rule-light); }
.flashcard-toggle { font-size: .8rem; color: var(--ink-3); transition: transform .2s; }
.flashcard.open .flashcard-toggle { transform: rotate(180deg); }
.flashcard-back {
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--ink-2);
  display: none;
  background: var(--surface);
  line-height: 1.6;
}
.flashcard.open .flashcard-back { display: block; background: transparent; }
.flashcard-tag {
  font-size: .65rem;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 10px;
  padding: 1px 7px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  margin-left: 6px;
}

/* attribution box (for displaying source information) */
.attribution-box {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-lg);
  padding: .75rem 1rem;
  font-size: .78rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--amber);
  display: flex; gap: 8px;
  margin-top: 1rem;
}
.attribution-icon { flex-shrink: 0; font-weight: 900; }
.license-warning-banner { margin-top: 0; margin-bottom: .75rem; }
.license-warning-banner.hidden { display: none; }
.license-warning-text { flex: 1; }
.license-warning-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--amber);
  font-size: .9rem;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

/* neutral info note (e.g. source truncation) */
.info-box {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .78rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-3);
  display: flex;
  gap: 8px;
  margin-bottom: .75rem;
}
.info-box.hidden { display: none; }
.info-box-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  font-size: .9rem;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

/* error (usually for API errors) */
.error-box {
  background: var(--red-bg);
  border: 1px solid rgba(139, 26, 26, 0.2);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  font-size: .85rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--red);
  display: none;
}
.error-box.visible { display: block; }
.error-box.transient {
  background: var(--amber-bg);
  border-color: #f5dba0;
  color: var(--amber);
}
body.dark .error-box.transient {
  background: rgba(120, 74, 0, 0.2);
  border-color: #7a4a00;
  color: #fcd34d;
}

/* skeleton loader */
.skeleton { animation: shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { 0%,100%{opacity:.4} 50%{opacity:.8} }
.skel-line {
  height: 12px; border-radius: 3px;
  background: var(--rule-light);
  margin-bottom: 8px;
}

/* export bar */
.export-bar {
  background: var(--glass-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px var(--glass-shadow),
              inset 0 1px 0 var(--glass-shine);
  border-radius: var(--radius-lg);
  padding: .875rem 1.25rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.export-bar.visible { display: flex; }
.export-label-group { display: flex; align-items: center; gap: .5rem; }
.export-label { font-size: .82rem; font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--ink-3); }
.license-badge {
  font-size: .7rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  color: var(--green);
  background: var(--green-bg);
  padding: 2px 9px;
  border-radius: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.license-badge.hidden { display: none; }
.export-buttons { display: flex; gap: 8px; }
.btn-export {
  padding: 6px 14px;
  font-size: .78rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--t-fast),
              color var(--t-fast),
              transform var(--t-fast),
              box-shadow var(--t-fast);
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink-2);
}
.btn-export:hover { background: var(--accent-bg); border-color: #c5d0f0; color: var(--accent); }
.btn-export.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-export.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* loading spinner */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.spinner.visible { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* utility */
.hidden { display: none !important; }

/* modal overlay */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
}
.modal-card {
  background: var(--glass-popup);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  width: min(420px, 92vw);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-in var(--t-slow) var(--t-spring);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes modal-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.97); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule-light);
}
.modal-title {
  font-size: .9rem; font-weight: 700;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
}
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 1rem; padding: 4px 6px;
  border-radius: var(--radius); transition: color .15s, background .15s;
}
.modal-close:hover { color: var(--ink); background: var(--rule-light); }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-label {
  display: block;
  font-size: .78rem; font-weight: 600;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-2); margin-bottom: .4rem;
}
.modal-input {
  width: 100%; padding: 8px 10px;
  font-size: .85rem; font-family: 'Helvetica Neue', Arial, sans-serif;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
}
.modal-input:focus { outline: none; border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-bg); }
.modal-hint {
  font-size: .72rem; color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-top: .4rem; line-height: 1.5;
}
.modal-value {
  font-size: .82rem; color: var(--ink-2);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-top: .25rem;
}
.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--rule-light);
  display: flex; justify-content: flex-end;
}

/* Mandatory gates (Terms of Use, Attribution confirmation) — sit above
   everything, including the settings modal (z-index 500). */
#terms-modal, #attribution-modal { z-index: 700; }

/* Terms of Use gate keeps the rest of the app visible but inert until
   accepted. #terms-modal / #attribution-modal are siblings of these two
   elements (not descendants), so they're unaffected. */
body.terms-pending > .site-header,
body.terms-pending > .app-shell {
  pointer-events: none;
  opacity: .4;
}

.tnc-body {
  max-height: 320px; overflow-y: auto;
  font-size: .8rem; line-height: 1.6;
  color: var(--ink-2);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
.tnc-body p { margin: 0 0 .6rem; }
.tnc-body ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.tnc-body li { margin-bottom: .3rem; }
.tnc-scroll-hint {
  font-size: .72rem; color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: .5rem;
}
.tnc-checkbox-row {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 1rem; font-size: .82rem; color: var(--ink-2);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer;
}
.tnc-checkbox-row input { margin-top: 3px; flex-shrink: 0; }

.attr-preview {
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  padding: 1rem;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 .75rem;
}
.attr-license-selector { margin-bottom: .75rem; }
.attr-warning-banner {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  font-size: .78rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: .75rem;
}
#attribution-modal .modal-footer { flex-direction: column; align-items: stretch; gap: .5rem; }
.attr-cancel-btn {
  background: none; border: none;
  color: var(--ink-3); font-size: .82rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer; width: 100%; text-align: center; padding: 4px 0;
}
.attr-cancel-btn:hover { color: var(--ink); }

/* share toast */
.share-feedback {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: .82rem; font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 8px 18px; border-radius: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  z-index: 600;
}
.share-feedback.visible { opacity: 1; }

/* app shell (history sidebar + main grid side-by-side) */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 56px);
}
.main-grid { flex: 1; min-width: 0; }

/* history sidebar */
.history-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  transition: width .2s ease;
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  box-shadow: 4px 0 24px var(--glass-shadow);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 56px);
}
.history-panel.open { width: 264px; min-width: 264px; }
.history-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--rule-light);
  flex-shrink: 0;
}
.history-panel-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.history-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: .8rem; padding: 4px 6px;
  border-radius: var(--radius); line-height: 1;
  transition: color .15s, background .15s;
}
.history-panel-close:hover { color: var(--ink); background: var(--rule-light); }
.history-list { flex: 1; overflow-y: auto; padding: .5rem 0; }
.history-empty {
  padding: 2rem 1.25rem; text-align: center;
  font-size: .8rem; color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}
.history-entry {
  padding: .75rem 1.25rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-light);
  position: relative;
  transition: background var(--t-fast), transform var(--t-fast);
}
.history-entry:hover { background: var(--accent-bg); transform: translateX(2px); }
.history-entry.active {
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
  padding-left: calc(1.25rem - 2px);
}
.history-entry-title {
  font-size: .82rem; font-weight: 600;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink); line-height: 1.3; margin-bottom: 4px;
  padding-right: 24px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.history-entry-meta {
  font-size: .72rem; color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif; margin-bottom: 6px;
}
.history-entry-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.history-pill {
  font-size: .65rem; font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600; color: var(--accent); background: var(--accent-bg);
  border-radius: 10px; padding: 1px 7px;
}
.history-delete {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: .85rem; padding: 3px 5px;
  opacity: 0; transition: opacity .15s, color .15s;
  border-radius: var(--radius); line-height: 1;
}
.history-entry:hover .history-delete { opacity: 1; }
.history-delete:hover { color: var(--red); }

/* dark mode — modal */
body.dark .modal-overlay { background: rgba(0,0,0,.6); }
body.dark .modal-footer { border-top-color: #1e293b; }
body.dark .modal-header { border-bottom-color: #1e293b; }
body.dark .modal-input { background: #1e293b; color: #e2e8f0; border-color: #334155; }

/* dark mode — history */
body.dark .history-panel { background: #111827; border-right-color: #334155; }
body.dark .history-panel-header { border-bottom-color: #1e293b; }
body.dark .history-panel-title { color: #64748b; }
body.dark .history-panel-close { color: #94a3b8; }
body.dark .history-panel-close:hover { color: #e2e8f0; background: #1e293b; }
body.dark .history-entry { border-bottom-color: #1e293b; }
body.dark .history-entry:hover { background: rgba(148,163,184,.05); }
body.dark .history-entry.active { background: rgba(165,180,252,.1); border-left-color: #a5b4fc; }
body.dark .history-entry-title { color: #e2e8f0; }
body.dark .history-entry-meta { color: #64748b; }
body.dark .history-pill { background: rgba(165,180,252,.1); color: #a5b4fc; }
body.dark .history-delete { color: #64748b; }
body.dark .history-delete:hover { color: #fca5a5; }
body.dark .history-empty { color: #64748b; }

/* thin, unobtrusive scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }

/* responsive media queries */
@media (max-width: 780px) {
  .main-grid { grid-template-columns: 1fr; }
  .panel-left { max-height: none; position: static; }
  .history-panel.open { width: 220px; min-width: 220px; }
}

/* ── Output type cards ─────────────────────────────────────── */
.output-type-cards { display: flex; flex-direction: column; gap: 6px; }

.output-type-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  user-select: none;
}
.output-type-card:hover {
  border-color: var(--accent-mid);
  background: var(--accent-bg);
  box-shadow: 0 1px 4px rgba(42,74,143,.08);
}
.output-type-card:active { background: #dde6f8; }
.output-type-card.loading {
  opacity: .65;
  pointer-events: none;
}

.output-card-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
}
.output-card-spinner.visible {
  display: block;
  animation: spin .7s linear infinite;
}

.output-type-name {
  flex: 1;
  font-size: .82rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  color: var(--ink-2);
}

.chevron-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  font-size: .88rem;
  padding: 4px 8px;
  line-height: 1;
  border-radius: var(--radius);
  transition: color .15s, background .15s, transform .2s;
}
.chevron-btn:hover { color: var(--ink); background: var(--rule-light); }
.chevron-btn.open  { transform: rotate(90deg); color: var(--accent); }

body.dark .output-type-card { background: #0f172a; border-color: #1e293b; }
body.dark .output-type-card:hover { border-color: #4a6abf; background: #1a2540; }
body.dark .output-type-card:active { background: #1e2d50; }
body.dark .output-card-spinner { border-color: #334155; border-top-color: #a5b4fc; }
body.dark .output-type-name { color: #94a3b8; }
body.dark .chevron-btn { color: #64748b; }
body.dark .chevron-btn:hover { color: #e2e8f0; background: #1e293b; }
body.dark .chevron-btn.open { color: #a5b4fc; }

/* ── Output settings floating popup ──────────────────────────── */
.output-popup {
  position: fixed;
  width: 320px;
  background: var(--glass-popup);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  z-index: 200;
  display: none;
}
.output-popup.open { display: block; animation: popup-in var(--t-med) var(--t-spring); }
@keyframes popup-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem .7rem;
  border-bottom: 1px solid var(--rule-light);
}
.popup-title {
  font-size: .78rem;
  font-weight: 700;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
}
.popup-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  font-size: .78rem;
  padding: 3px 7px;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.popup-close:hover { color: var(--ink); background: var(--rule-light); }

.popup-body {
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.popup-row { display: flex; flex-direction: column; gap: 5px; }
.popup-label {
  font-size: .68rem;
  font-weight: 700;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Button group ────────────────────────────────────────────── */
.btn-group {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.btn-group-opt {
  flex: 1;
  padding: 6px 4px;
  font-size: .74rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  background: var(--surface);
  color: var(--ink-2);
  border: none;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  line-height: 1.3;
}
.btn-group-opt:last-child { border-right: none; }
.btn-group-opt.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(42, 74, 143, 0.3);
}
.btn-group-opt:hover:not(.active) { background: var(--rule-light); }

.popup-textarea {
  width: 100%;
  min-height: 66px;
  padding: 7px 9px;
  font-size: .8rem;
  font-family: Georgia, serif;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--glass-card);
  color: var(--ink);
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.popup-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.popup-input {
  width: 100%;
  padding: 7px 9px;
  font-size: .8rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--glass-card);
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.popup-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* dark mode — popup */
body.dark .output-popup { background: #0f172a; border-color: #1e293b; }
body.dark .popup-header { border-bottom-color: #1e293b; }
body.dark .popup-title  { color: #e2e8f0; }
body.dark .popup-label  { color: #64748b; }
body.dark .popup-close  { color: #64748b; }
body.dark .popup-close:hover { color: #e2e8f0; background: #1e293b; }
body.dark .btn-group    { border-color: #334155; }
body.dark .btn-group-opt { background: #1e293b; color: #94a3b8; border-right-color: #334155; }
body.dark .btn-group-opt.active { background: #6366f1; color: #fff; }
body.dark .btn-group-opt:hover:not(.active) { background: #1e3a5f; }
body.dark .popup-textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark .popup-input    { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* ── Report card content ─────────────────────────────────────── */
.report-body { line-height: 1.65; }

.report-h2 {
  font-size: .95rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 1.25rem 0 .4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule-light);
}
.report-h2:first-child { margin-top: 0; }

.report-h3 {
  font-size: .87rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: var(--ink-2);
  margin: 1rem 0 .3rem;
}

.report-p {
  font-size: .88rem;
  color: var(--ink-2);
  margin: 0 0 .5rem;
  font-family: Georgia, serif;
}

.report-list {
  margin: .25rem 0 .5rem 1.1rem;
  padding: 0;
}
.report-list li {
  font-size: .88rem;
  color: var(--ink-2);
  font-family: Georgia, serif;
  margin-bottom: .3rem;
  line-height: 1.55;
}

.report-body code {
  font-size: .82rem;
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: 3px;
  padding: 0 4px;
  font-family: 'Courier New', monospace;
}

body.dark .report-h2  { color: #e2e8f0; border-bottom-color: #1e293b; }
body.dark .report-h3  { color: #94a3b8; }
body.dark .report-p   { color: #94a3b8; }
body.dark .report-list li { color: #94a3b8; }
body.dark .report-body code { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ── Settings modal sections ────────────────────────────────── */
.modal-section { padding: 1rem 0; }
.modal-section:first-child { padding-top: 0; }
.modal-section + .modal-section { border-top: 1px solid var(--rule-light); }
body.dark .modal-section + .modal-section { border-top-color: #1e293b; }

/* ── Model select ───────────────────────────────────────────── */
.modal-select {
  width: 100%;
  padding: 7px 10px;
  font-size: .82rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: .4rem;
  cursor: default;
}
.modal-select:disabled { opacity: 0.6; cursor: not-allowed; }
body.dark .modal-select { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ── Temperature slider ─────────────────────────────────────── */
.temp-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    #ffffff 0%,
    #4a90d9 25%,
    #a0b8d0 50%,
    #e8a030 75%,
    #e05a00 100%
  );
  cursor: pointer;
  border: 1px solid var(--rule);
  outline: none;
  margin: .4rem 0 .3rem;
  display: block;
}
.temp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer;
}
.temp-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer;
}
.temp-labels {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--ink-3);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: .25rem;
}
body.dark .temp-slider { border-color: #334155; }
body.dark .temp-slider::-webkit-slider-thumb { background: #1e293b; border-color: #a5b4fc; }
body.dark .temp-slider::-moz-range-thumb     { background: #1e293b; border-color: #a5b4fc; }

/* ══════════════════════════════════════════════════════════════
   Glassmorphism overhaul — dark-mode reclaim layer
   The rules above (near the top of this file) hard-code opaque
   slate/navy backgrounds per-selector for body.dark. Those are kept
   intact (nothing removed), but they'd otherwise block the new
   translucent glass system in dark mode since they share the same
   selector specificity and were declared first. These overrides use
   the identical selectors so the cascade (same specificity, later
   source position) lets the glass/gradient treatment win.

   NOTE: the spec for this pass assumed dark mode is toggled via
   `[data-theme="dark"]` on <html>. The app actually toggles a
   `.dark` class on <body> (see toggleTheme() in app.js), so every
   dark rule here targets `body.dark` to actually take effect.
   ══════════════════════════════════════════════════════════════ */

body.dark {
  /* Ink / text */
  --ink:        #e8e8f0;
  --ink-2:      #b0b0c8;
  --ink-3:      #7878a0;

  /* Structure */
  --rule:       rgba(255, 255, 255, 0.12);
  --rule-light: rgba(255, 255, 255, 0.06);
  --surface:    rgba(255, 255, 255, 0.05);
  --white:      #1e1c2a;

  /* Accent — lightened for dark bg, WCAG AA verified */
  --accent:     #6b9fff;
  --accent-2:   #8bb4ff;
  --accent-bg:  rgba(107, 159, 255, 0.12);
  --accent-mid: #5580e0;

  /* Semantic */
  --green:      #4caf7d;
  --green-bg:   rgba(76, 175, 125, 0.12);
  --amber:        #f0a030;
  --amber-bg:     rgba(240, 160, 48, 0.12);
  --amber-border: rgba(240, 160, 48, 0.35);
  --red:        #f07070;
  --red-bg:     rgba(240, 112, 112, 0.12);

  /* Glass surfaces — dark mode */
  --glass-panel:  rgba(255, 255, 255, 0.07);
  --glass-card:   rgba(255, 255, 255, 0.05);
  --glass-popup:  rgba(30, 28, 40, 0.92);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shine:  rgba(255, 255, 255, 0.06);
  --glass-shadow: rgba(0, 0, 0, 0.3);

  /* Body background — dark mode */
  --bg-gradient: linear-gradient(135deg, #12101a 0%, #0f0d16 100%);

  /* Overlay */
  --overlay: rgba(0, 0, 0, 0.4);

  /* Gradient background so glass panels have something to show
     through — overrides the legacy solid `background:#0f172a`. */
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--ink);
}

body.dark .site-header {
  background: var(--glass-panel);
  border-bottom-color: var(--glass-border);
}
body.dark .panel-left {
  background: var(--glass-panel);
  border-right-color: var(--glass-border);
}
body.dark .panel-right {
  background: transparent;
}
body.dark .pipeline-status {
  background: var(--glass-card);
  border-color: var(--glass-border);
}
body.dark .result-card {
  background: var(--glass-card);
  border-color: var(--glass-border);
}
body.dark .export-bar {
  background: var(--glass-card);
  border-color: var(--glass-border);
}
body.dark .modal-card {
  background: var(--glass-popup);
  border-color: var(--glass-border);
}
body.dark .output-popup {
  background: var(--glass-popup);
  border-color: var(--glass-border);
}
body.dark .history-panel {
  background: var(--glass-panel);
  border-right-color: var(--glass-border);
}
body.dark .history-entry:hover {
  background: var(--accent-bg);
}

/* Pill-style source tabs in dark mode */
body.dark .source-tab {
  background: transparent;
  color: var(--ink-3);
  border-color: transparent;
}
body.dark .source-tab.active {
  background: var(--glass-card);
  color: var(--accent);
}

/* Gradient controls need a dark-appropriate variant since the
   accent tokens themselves change under body.dark */
body.dark .toggle-switch input:checked + .toggle-track {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
body.dark .btn-group-opt.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
  box-shadow: 0 1px 4px rgba(107, 159, 255, 0.3);
}

/* Semantic alert boxes keep their tint (not the neutral glass
   background) but pick up the softer dark-mode border colour */
body.dark .attribution-box {
  background: var(--amber-bg);
  border-color: var(--amber-border);
}
body.dark .error-box {
  border-color: rgba(240, 112, 112, 0.2);
}

/* ── Conversation card ────────────────────────────────────────── */

.output-type-card.disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

.badge-en-only {
  font-size: .64rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-en-only.hidden { display: none; }

.settings-pill-disabled {
  display: inline-block;
  align-self: flex-start;
  font-size: .78rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--rule-light);
  border: 1px solid var(--rule);
  padding: 5px 12px;
  border-radius: 8px;
  cursor: not-allowed;
}

.convo-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 1rem 1rem;
}
.convo-waveform-canvas {
  width: 100%;
  height: 120px;
  display: block;
}
.convo-status {
  font-size: .72rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-3);
  text-align: center;
}
.convo-stop-btn {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink-2);
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.convo-stop-btn:hover { background: var(--red-bg); color: var(--red); border-color: rgba(139, 26, 26, 0.2); }
.convo-stop-btn.hidden { display: none; }
.convo-export-row {
  display: flex;
  gap: 8px;
  margin-top: .25rem;
}
.convo-export-row.hidden { display: none; }

body.dark .settings-pill-disabled { background: #1e293b; color: #64748b; border-color: #334155; }
body.dark .convo-stop-btn { background: #0f172a; border-color: #1e293b; color: #94a3b8; }
body.dark .convo-stop-btn:hover { background: rgba(240, 112, 112, 0.15); color: #fca5a5; border-color: rgba(240, 112, 112, 0.3); }
body.dark .badge-en-only { background: rgba(120, 74, 0, 0.2); border-color: #7a4a00; color: #fcd34d; }