:root {
  --bg: #fbf3e4;        /* warm cream page */
  --panel: #fffdf7;     /* card */
  --panel-2: #f4ead7;   /* inset / code blocks */
  --sky: #c6e3eb;       /* light-blue accent (login backdrop) */
  --navy: #16394c;      /* primary ink + dark buttons */
  --coral: #e8714c;     /* primary accent */
  --coral-700: #d65f3c;
  --gold: #f2a836;
  --muted: #5e7682;
  --border: #e7dcc6;
  --ok: #2fa36b;
  --bad: #d8543a;

  --font-display: 'Gasoek One', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Make the `hidden` attribute reliable even against author display rules. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; }
.accent { color: var(--coral); }
.muted { color: var(--muted); }
.sub { color: var(--muted); margin: 0 0 28px; }

.wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 96px; }

/* Wordmark */
.wordmark { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; }
.wordmark .wm-a { color: var(--navy); }
.wordmark .wm-b { color: var(--coral); }

/* App shell: left sidebar + content */
#app { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 26px 18px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}
.content { flex: 1 1 auto; min-width: 0; }

/* Nav (vertical, in the sidebar) */
.nav { display: flex; flex-direction: column; gap: 8px; }
.nav-btn {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.nav-btn:hover { background: var(--bg); color: var(--navy); }
.nav-btn.active { background: var(--navy); color: var(--bg); border-color: var(--navy); }

@media (max-width: 760px) {
  #app { flex-direction: column; }
  .sidebar {
    flex: none;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .nav { flex-direction: row; }
  .nav-btn { width: auto; }
}

.page-title { font-size: 40px; margin: 10px 0 6px; }

/* Buttons — primary coral with navy ink */
button {
  padding: 12px 20px;
  background: var(--coral);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: var(--coral-700); color: #fff; }
button:disabled { opacity: 0.55; cursor: progress; }

/* Inputs */
.search { display: grid; gap: 12px; margin-bottom: 28px; }
.search input,
.login-card input,
.projects-search {
  width: 100%;
  padding: 13px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--navy);
  font-size: 16px;
  font-family: var(--font-body);
}
.search input::placeholder,
.login-card input::placeholder,
.projects-search::placeholder { color: #9aa9af; }
.search input:focus,
.login-card input:focus,
.projects-search:focus { outline: none; border-color: var(--coral); }

/* Research hero (centered entry) */
.hero { text-align: center; padding: 20px 0 4px; }
.hero-art { width: 150px; height: auto; margin: 0 auto 14px; display: block; }
.hero-title { font-size: 54px; margin: 0 0 10px; }
.hero-sub { color: var(--muted); margin: 0 auto 26px; max-width: 540px; }
.hero-search { display: flex; gap: 10px; max-width: 540px; margin: 0 auto 28px; }
.hero-search input { flex: 1 1 auto; }
.hero-search button { flex: 0 0 auto; }

@media (max-width: 560px) {
  .hero-title { font-size: 38px; }
  .hero-search { flex-direction: column; }
}

/* Status */
.status {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}
.status.error { color: var(--bad); border-color: var(--bad); }

/* Report */
.report {
  padding: 6px 26px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 20px;
}
/* Report content stays on the readable system font, not the Gasoek display. */
.report h1, .report h2, .report h3 { font-family: var(--font-body); font-weight: 700; }
.report h1 { font-size: 24px; }
.report h2 { font-size: 19px; margin-top: 26px; }
.report h3 { font-size: 16px; }
.report a { color: var(--coral); }
.report code {
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.9em;
}
.report ul { padding-left: 22px; }

/* Go deeper */
.deepen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.deepen-note { color: var(--muted); font-size: 14px; }

/* Evidence / trace */
.evidence { margin-bottom: 24px; }
.evidence summary { cursor: pointer; color: var(--muted); font-weight: 600; }
#trace { list-style: none; padding: 12px 0 0; margin: 0; display: grid; gap: 8px; }
#trace li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
#trace .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
#trace .dot.ok { background: var(--ok); }
#trace .dot.bad { background: var(--bad); }
#trace .dot.skip { background: var(--muted); }
#trace .err { color: var(--bad); }
#trace .muted { color: var(--muted); }
.src-detail { margin-top: 6px; }
.src-detail summary { color: var(--coral); cursor: pointer; font-size: 12px; }
.src-detail pre {
  margin: 8px 0 0;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-height: 280px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
}

/* Projects */
.projects-search { margin-bottom: 16px; }
.projects-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.projects-list li {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.projects-list li.err { color: var(--bad); }
.project-group-title { font-weight: 700; }
.project-count { color: var(--muted); font-weight: 500; font-size: 13px; margin-left: 8px; }
.project-runs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.project-runs .project-run {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.project-runs .project-run:hover { border-color: var(--coral); color: var(--navy); }

/* Login gate */
.login {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--sky);
}
.login-card {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: 14px;
  padding: 30px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 14px 44px rgba(22, 57, 76, 0.14);
}
.login-art { width: 150px; height: auto; margin: 0 auto; }
.login-card .wordmark { font-size: 26px; }
.login-card input { text-align: left; }
.login-error { color: var(--bad); margin: 0; font-size: 14px; }

@media (max-width: 560px) {
  .page-title { font-size: 32px; }
}