/* Lunaa DFS — D-D.6a. LUNAA exec-spreadsheet motif: bordered tables, dark
   header rows, two-tone rows, monospace numbers. Day default, .theme-night toggle. */
:root {
  --bg: #ffffff; --text: #1a1d24; --muted: #5b6270;
  --header: #1e3a5f; --header-text: #ffffff;
  --row-a: #ffffff; --row-b: #f5f5f5; --border: #d0d4da;
  --accent: #c41e3a; --panel: #f8f9fb; --pill: #eef0f3; --gate-error: #c41e3a;
}
html.theme-night {
  --bg: #1a1d24; --text: #e5e7eb; --muted: #9aa3b2;
  --header: #2a3a52; --header-text: #e5e7eb;
  --row-a: #2a2d35; --row-b: #33363f; --border: #3a3f4b;
  --accent: #ff4d6d; --panel: #20232b; --pill: #2a2d35; --gate-error: #ff6b6b;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.mono, td.num, th.num { font-family: 'SF Mono','Monaco','Cascadia Code','Roboto Mono',Consolas,monospace; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 2px solid var(--header); background: var(--panel);
}
.wordmark { font-size: 20px; font-weight: 800; letter-spacing: 0.3px; color: var(--text); }
.hero { display: flex; justify-content: center; padding: 22px 20px 6px; }
.hero-logo { width: 210px; max-width: 60vw; height: auto; }
.icon-btn { background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 5px 8px; cursor: pointer; line-height: 0; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-sun { display: none; } .icon-moon { display: inline; }
html.theme-night .icon-sun { display: inline; } html.theme-night .icon-moon { display: none; }

main { max-width: 1180px; margin: 0 auto; padding: 18px 20px; }
.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.upload-zone { display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--border); border-radius: 8px; padding: 8px 12px; }
.upload-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: 14px; }
#csv-input { font-size: 13px; }
.upload-status { font-size: 13px; color: var(--accent); }
.run-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--accent);
  color: #fff; border: none; border-radius: 7px; padding: 9px 18px; font-weight: 700;
  font-size: 14px; cursor: pointer; }
.run-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.run-btn.running { background: var(--muted); }
.dl-btn { display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 10px; color: var(--text); line-height: 0; }
.dl-btn:hover { border-color: var(--accent); color: var(--accent); }
.salary-status { font-size: 13px; color: var(--muted); font-family: monospace;
  padding: 6px 10px; border: 1px dashed var(--border); border-radius: 7px; }
.slate-clock { display: flex; align-items: baseline; gap: 8px; margin: -6px 0 18px;
  font-size: 13px; color: var(--muted); }
.slate-label { font-weight: 600; color: var(--text); }
.slate-countdown { font-family: monospace; color: var(--accent); }
.slate-countdown.locked { color: var(--muted); }

/* D-H.2 pipeline checklist — 3×3 grid, gray→blinking→white→(red on error) */
.pipeline-progress {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px;
  margin: 4px 0 16px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.gate { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: var(--muted); transition: color 0.25s ease; }
.gate-glyph { font-size: 12px; line-height: 1; width: 1em; text-align: center; }
.gate .gate-glyph::before { content: "\25CB"; }          /* ○ pending */
.gate.running { color: var(--text); animation: gate-pulse 1.2s ease-in-out infinite; }
.gate.running .gate-glyph::before { content: "\25D0"; }  /* ◐ running */
.gate.done { color: var(--text); }
.gate.done .gate-glyph::before { content: "\25CF"; color: var(--accent); } /* ● done */
.gate.error { color: var(--gate-error); animation: none; }
.gate.error .gate-glyph::before { content: "\2715"; }    /* ✕ error */
@keyframes gate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.status-pill { margin-left: auto; font-size: 12px; padding: 4px 10px; border-radius: 12px;
  background: var(--pill); color: var(--muted); font-family: monospace; }
.status-pill.running { color: var(--accent); }
.status-pill.complete { color: #1e7a34; } html.theme-night .status-pill.complete { color: #5fd47e; }
.status-pill.failed { color: var(--accent); }

.layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
@media (max-width: 880px) { .layout { grid-template-columns: 1fr; } }

.lineup-card { margin-bottom: 22px; }
.lineup-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lineup-head h2 { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.lineup-head .agg { font-size: 13px; color: var(--muted); font-family: monospace; }
table { border-collapse: collapse; width: 100%; font-size: 13px; border: 1px solid var(--border); }
th, td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
thead th { background: var(--header); color: var(--header-text); font-weight: 600;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; }
th.num, td.num { text-align: right; }
tbody tr:nth-child(odd) { background: var(--row-a); } tbody tr:nth-child(even) { background: var(--row-b); }
tr.stacked td.team { color: var(--accent); font-weight: 700; }

.slate-meta { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.slate-meta h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; color: var(--muted); }
.slate-meta ul { margin: 0 0 14px; padding-left: 16px; font-size: 13px; }
.slate-meta .meta-line { font-size: 12px; color: var(--muted); margin-bottom: 10px; font-family: monospace; }
.integrity-ok { color: #1e7a34; } html.theme-night .integrity-ok { color: #5fd47e; }
.integrity-bad { color: var(--accent); }
.empty { color: var(--muted); font-style: italic; padding: 20px 0; }