/* Site-wide theme: dark default, light via html[data-theme=light]. Load after the legacy CSS.
   Engine-rendered native-colour output (previews, history snapshots/diffs) stays dark in both themes. */
:root, .prototype-preview, .editor-history-output, .prototype-diff, .olc-native {
  --olc-bg: #111; --olc-fg: #ddd; --olc-head: #ccc; --olc-muted: #aaa;
  --olc-border: #333; --olc-field: #1a1a1a; --olc-panel: #151515; --olc-row: #222;
  --olc-btn: #333; --olc-btn-border: #444; --olc-link: #8cc4ff;
  --olc-ok: #9ad18b; --olc-err: #d98b8b;
}
:root[data-theme=light] {
  --olc-bg: #fff; --olc-fg: #222; --olc-head: #111; --olc-muted: #555;
  --olc-border: #ccc; --olc-field: #fff; --olc-panel: #f4f4f4; --olc-row: #e8e8e8;
  --olc-btn: #e8e8e8; --olc-btn-border: #999; --olc-link: #0645ad;
  --olc-ok: #1e7a2e; --olc-err: #b00020;
}
html, body { background-color: var(--olc-bg); color: var(--olc-fg); }
/* Root-page foreground audit: these literal values alone fall below 4.5:1 on #111.
   Inline literal colours/theme variables already pass; data-driven/native palettes stay intact. */
[data-theme=dark] [color="#000000" i]:not(.olc-native, .olc-native *) { color: var(--olc-fg); }
[data-theme=dark] :is([color="#0000df" i], [color="#0000ff" i], [color="#111177" i], [color="#6666cc" i], [color="6666cc" i]):not(.olc-native, .olc-native *) { color: var(--olc-link); }
h1, h2, h3, h4, legend, summary { color: var(--olc-head); }
a:link, a:visited, a:hover, .dark A:link, .dark A:visited, .dark A:hover { color: var(--olc-link); }
.navbar A:link, .navbar A:visited { color: #fff; }
.navbar A:hover { color: #c33; }
.copy, .dark { color: var(--olc-fg); }
button, input[type=submit] { background: var(--olc-btn); color: var(--olc-fg); border: 1px solid var(--olc-btn-border); padding: 6px 10px; }
input:not([type=checkbox], [type=radio], [type=submit]), select, textarea {
  background: var(--olc-field); color: var(--olc-fg); border: 1px solid var(--olc-border);
}
.olc-toggle { float: right; margin: 2px 8px; padding: 0 6px; }
.olc-native { background: var(--olc-bg); color: var(--olc-fg); padding: 0 4px; }
.olc-zone-list { max-height: 160px; overflow-y: auto; padding: 6px; border: 1px solid var(--olc-border); border-radius: 6px; background: var(--olc-bg); }
.olc-zone-list .zone-option { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.olc-zone-list .olc-native { min-width: 0; overflow-wrap: anywhere; }
/* Shared list pages (fedit, oedit/medit): sticky header row and first column need opaque cells */
.olc-list-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.olc-list-table td, .olc-list-table th { border-bottom: 1px solid var(--olc-border); padding: 8px 12px; vertical-align: top; background: var(--olc-bg); color: var(--olc-fg); }
.olc-list-table th { position: sticky; top: 0; z-index: 10; background: var(--olc-panel); text-align: left; white-space: nowrap; border-bottom: 2px solid var(--olc-btn-border); }
.olc-list-table td:first-child, .olc-list-table th:first-child { position: sticky; left: 0; z-index: 5; border-right: 2px solid var(--olc-border); }
.olc-list-table th:first-child { z-index: 15; background: var(--olc-row); }
.olc-list-table tr:hover td { background: var(--olc-row) !important; }
.olc-list-container { overflow: auto; height: 92vh; border: 1px solid var(--olc-border); margin-bottom: 20px; }
.olc-legend { border: 1px solid var(--olc-border); background: var(--olc-panel); padding: 8px 10px; margin: 10px 0 14px; border-radius: 4px; }
.olc-legend summary { cursor: pointer; user-select: none; }
.olc-legend code { background-color: var(--olc-row); padding: 2px 4px; border-radius: 4px; }
/* Editor sections (fedit edit view, oedit/medit editor) */
.olc-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, 180px); gap: 4px 12px; margin: 6px 0 12px; }
.olc-checkgrid--tight { grid-template-columns: repeat(auto-fill, 140px); margin: 4px 0 10px; }
.olc-editor-group { border-bottom: 1px solid var(--olc-border); padding-bottom: 15px; margin-bottom: 15px; }
.olc-editor-group:last-child { border-bottom: none; }
.olc-check { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.olc-check input { margin: 0; }
.olc-list-table .olc-native { font-weight: normal; }
.olc-note { color: var(--olc-muted); font-size: 11px; }