/* =============================================================================
 * notion-style.css — Notion-inspired theme for Survey by AI reports
 * Scope: all rules live under .notion-page to avoid fighting per-file <body> rules
 * Design tokens: CSS custom properties, light + dark (prefers-color-scheme)
 * ============================================================================ */

/* --------------------------------------------------------------------------- */
/* Design tokens                                                                */
/* --------------------------------------------------------------------------- */
:root {
  /* Surface & background */
  --notion-bg: #ffffff;
  --notion-bg-surface: #f7f6f3;
  --notion-bg-cancel: #f1f1ee;

  /* Text */
  --notion-text: #37352f;
  --notion-text-light: #6b7280;
  --notion-text-muted: #9b9a97;

  /* Accent & semantic colors */
  --notion-blue: #2383e2;       --notion-blue-bg: #e8f0fe;
  --notion-red: #eb5757;        --notion-red-bg: #fbe4e4;
  --notion-green: #0f7b6c;      --notion-green-bg: #dbeddb;
  --notion-yellow: #d9730d;     --notion-yellow-bg: #fdecce;
  --notion-purple: #6940a5;     --notion-purple-bg: #e8deee;
  --notion-orange: #d9730d;     --notion-orange-bg: #fbecdc;

  /* Borders */
  --notion-border: #e9e9e7;
  --notion-border-strong: #d4d4d0;

  /* Typography */
  --notion-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --notion-mono: "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout */
  --notion-max-width: 720px;
  --notion-line-height: 1.7;
}

/* --------------------------------------------------------------------------- */
/* Dark mode (auto via system preference)                                       */
/* --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --notion-bg: #191919;
    --notion-bg-surface: #202020;
    --notion-bg-cancel: #2f2f2f;
    --notion-text: #e8e8e5;
    --notion-text-light: #9b9a97;
    --notion-text-muted: #6b6b68;
    --notion-blue: #529cca;       --notion-blue-bg: #1d2a32;
    --notion-red: #ff7b72;        --notion-red-bg: #3a2525;
    --notion-green: #7ee787;      --notion-green-bg: #1d2a1d;
    --notion-yellow: #fbbc04;     --notion-yellow-bg: #3a301e;
    --notion-purple: #d2a8ff;     --notion-purple-bg: #2d2340;
    --notion-orange: #fbbc04;     --notion-orange-bg: #36281e;
    --notion-border: #373737;
    --notion-border-strong: #4a4a4a;
  }
}

/* --------------------------------------------------------------------------- */
/* Body reset — ensure page edges match Notion light theme                     */
/* --------------------------------------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  background: var(--notion-bg);
  color: var(--notion-text);
  font-family: var(--notion-font);
  line-height: var(--notion-line-height);
  transition: background-color 0.2s, color 0.2s;
}

/* --------------------------------------------------------------------------- */
/* Page container — the single wrapper every report body gets                   */
/* --------------------------------------------------------------------------- */
.notion-page {
  max-width: var(--notion-max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: var(--notion-font);
  font-size: 16px;
  line-height: var(--notion-line-height);
  color: var(--notion-text);
  background: var(--notion-bg);
}

/* --------------------------------------------------------------------------- */
/* Typography — headings                                                        */
/* --------------------------------------------------------------------------- */
.notion-page h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 1.4em 0 0.4em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--notion-border);
}

.notion-page h1:first-child {
  margin-top: 0.3em;
}

.notion-page h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 1.4em 0 0.3em;
  padding-top: 0.3em;
}

.notion-page h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.2em 0 0.25em;
}

.notion-page h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 1em 0 0.2em;
  color: var(--notion-text);
}

/* --------------------------------------------------------------------------- */
/* Paragraph & inline                                                           */
/* --------------------------------------------------------------------------- */
.notion-page p {
  margin: 0.5em 0;
}

.notion-page a {
  color: var(--notion-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.notion-page a:hover {
  border-bottom-color: var(--notion-blue);
}

.notion-page strong {
  font-weight: 600;
}

.notion-page em {
  font-style: italic;
}

/* --------------------------------------------------------------------------- */
/* Inline code                                                                  */
/* --------------------------------------------------------------------------- */
.notion-page :not(pre) > code {
  font-family: var(--notion-mono);
  font-size: 0.88em;
  background: var(--notion-bg-surface);
  color: var(--notion-red);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--notion-border);
}

/* --------------------------------------------------------------------------- */
/* Code blocks                                                                  */
/* --------------------------------------------------------------------------- */
.notion-page pre {
  background: var(--notion-bg-surface);
  border: 1px solid var(--notion-border);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 1em 0;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.6;
}

.notion-page pre code {
  font-family: var(--notion-mono);
  color: var(--notion-text);
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* --------------------------------------------------------------------------- */
/* Blockquote                                                                   */
/* --------------------------------------------------------------------------- */
.notion-page blockquote {
  border-left: 3px solid var(--notion-border-strong);
  background: var(--notion-bg-surface);
  padding: 0.6em 1em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
  color: var(--notion-text-light);
  font-style: normal;
}

.notion-page blockquote p {
  margin: 0.3em 0;
}

/* --------------------------------------------------------------------------- */
/* Lists                                                                        */
/* --------------------------------------------------------------------------- */
.notion-page ul {
  list-style-type: disc;
  padding-left: 1.6em;
  margin: 0.5em 0;
}

.notion-page ol {
  list-style-type: decimal;
  padding-left: 1.6em;
  margin: 0.5em 0;
}

.notion-page li {
  margin: 0.25em 0;
  padding-left: 0.2em;
}

.notion-page ul ul {
  list-style-type: circle;
}

.notion-page ul ul ul {
  list-style-type: square;
}

/* --------------------------------------------------------------------------- */
/* Tables                                                                       */
/* --------------------------------------------------------------------------- */
.notion-page table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1em 0;
  font-size: 0.92em;
  display: block;
  overflow-x: auto;
}

.notion-page th,
.notion-page td {
  padding: 7px 10px;
  border: 1px solid var(--notion-border);
  text-align: left;
  vertical-align: top;
}

.notion-page th {
  font-weight: 600;
  background: var(--notion-bg-surface);
  white-space: nowrap;
}

.notion-page tbody tr:nth-child(even) {
  background: rgba(135, 131, 120, 0.04);
}

.notion-page tbody tr:hover {
  background: rgba(135, 131, 120, 0.07);
}

/* --------------------------------------------------------------------------- */
/* Dividers                                                                     */
/* --------------------------------------------------------------------------- */
.notion-page hr {
  border: none;
  border-top: 1px solid var(--notion-border);
  margin: 2em 0;
}

/* --------------------------------------------------------------------------- */
/* Images                                                                       */
/* --------------------------------------------------------------------------- */
.notion-page img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2em auto;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------- */
/* Callout blocks (Notion-style icon + content)                                 */
/* --------------------------------------------------------------------------- */
.notion-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 1em 0;
  background: var(--notion-bg-surface);
  border: 1px solid var(--notion-border);
  font-size: 0.95em;
}

.notion-callout .callout-icon {
  flex-shrink: 0;
  font-size: 1.2em;
  line-height: 1.5;
}

.notion-callout.tip   { background: var(--notion-blue-bg); }
.notion-callout.warn  { background: var(--notion-red-bg); }
.notion-callout.info  { background: var(--notion-yellow-bg); }
.notion-callout.note  { background: var(--notion-purple-bg); }

/* --------------------------------------------------------------------------- */
/* Table of Contents (auto-generated, collapsible)                              */
/* --------------------------------------------------------------------------- */
.notion-toc {
  background: var(--notion-bg-surface);
  border: 1px solid var(--notion-border);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 1.5em 0;
  font-size: 0.9em;
}

.notion-toc summary {
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  list-style: none;
}

.notion-toc summary::-webkit-details-marker {
  display: none;
}

.notion-toc summary::before {
  content: "▸ ";
  font-size: 0.8em;
}

.notion-toc[open] summary::before {
  content: "▾ ";
}

.notion-toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0.6em 0 0;
}

.notion-toc li {
  margin: 0.3em 0;
}

.notion-toc a {
  color: var(--notion-text-light);
  text-decoration: none;
}

.notion-toc a:hover {
  color: var(--notion-text);
}

.notion-toc .toc-h3 {
  padding-left: 1.2em;
  font-size: 0.92em;
}

/* --------------------------------------------------------------------------- */
/* Page navigation (prev / next / return)                                       */
/* --------------------------------------------------------------------------- */
.notion-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--notion-border);
  font-size: 0.9em;
  gap: 1em;
  flex-wrap: wrap;
}

.notion-nav a {
  color: var(--notion-text-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.notion-nav a:hover {
  color: var(--notion-blue);
  border-bottom-color: var(--notion-blue);
}

/* --------------------------------------------------------------------------- */
/* Mermaid diagram container                                                    */
/* --------------------------------------------------------------------------- */
.notion-page .mermaid {
  background: var(--notion-bg);
  border: 1px solid var(--notion-border);
  border-radius: 6px;
  padding: 20px;
  margin: 1.2em 0;
  overflow-x: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------- */
/* Class aliasing — bridge existing per-file class names to Notion look          */
/* --------------------------------------------------------------------------- */
/* Highlight / insight boxes → blue left border */
.exec-summary, .thesis, .conclusion, .lead, .key-insight, .data-box, .insight,
.tldr, .summary-box {
  border-left: 3px solid var(--notion-blue);
  background: var(--notion-blue-bg);
  padding: 14px 16px;
  border-radius: 0 6px 6px 0;
  margin: 1em 0;
}

/* Generic cards */
.card, .kbox {
  background: var(--notion-bg-surface);
  border: 1px solid var(--notion-border);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 1em 0;
}

/* Warning / danger boxes */
.warn, .danger, .card-warn {
  border-left: 3px solid var(--notion-red);
  background: var(--notion-red-bg);
  padding: 14px 16px;
  border-radius: 0 6px 6px 0;
  margin: 1em 0;
}

/* Tech / accent boxes */
.card-tech {
  border-left: 3px solid var(--notion-blue);
  background: var(--notion-blue-bg);
  padding: 14px 16px;
  border-radius: 0 6px 6px 0;
  margin: 1em 0;
}

/* Green insight */
.card-insight, .consensus {
  border-left: 3px solid var(--notion-green);
  background: var(--notion-green-bg);
  padding: 14px 16px;
  border-radius: 0 6px 6px 0;
  margin: 1em 0;
}

/* Orange divergence */
.divergence {
  border-left: 3px solid var(--notion-orange);
  background: var(--notion-orange-bg);
  padding: 14px 16px;
  border-radius: 0 6px 6px 0;
  margin: 1em 0;
}

/* Highlight mark */
.notion-page mark,
.notion-page .hlight,
.notion-page .highlight {
  background: var(--notion-yellow-bg);
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

/* Tags / chips / pills */
.tag, .chip, .pill, .cat {
  display: inline-block;
  font-size: 0.82em;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--notion-bg-surface);
  border: 1px solid var(--notion-border);
  color: var(--notion-text-light);
  margin: 2px 3px 2px 0;
}

/* KPI / metric grids */
.kpi-grid, .stat-grid, .metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1em 0;
}

.kpi {
  flex: 1 1 140px;
  background: var(--notion-bg-surface);
  border: 1px solid var(--notion-border);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
}

/* --------------------------------------------------------------------------- */
/* Responsive — mobile                                                          */
/* --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .notion-page {
    padding: 24px 16px 60px;
    font-size: 15px;
  }

  .notion-page h1 {
    font-size: 1.6rem;
  }

  .notion-page h2 {
    font-size: 1.3rem;
  }

  .notion-page h3 {
    font-size: 1.1rem;
  }

  .notion-page pre {
    padding: 12px 14px;
    font-size: 0.82em;
  }

  .kpi-grid, .stat-grid, .metrics {
    gap: 8px;
  }

  .kpi {
    flex: 1 1 120px;
    padding: 10px;
  }
}