/* ============================================================
   The document ("paper"). Same class names & CSS variables as the
   command-line generator, so the preview matches the PDF exactly.
   All look is driven by CSS variables the app sets on .paper.
   ============================================================ */

.paper {
  /* Defaults — the app overrides these from the active theme + controls. */
  --page-w: 8.5in; --page-h: 11in; --page-pad: 0.7in;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Inter', Helvetica, Arial, sans-serif;
  --font-size: 11pt; --line-height: 1.4;
  --color-text: #222; --color-muted: #666; --color-accent: #8b5e6b; --color-rule: #d8d0ca;
  --name-size: 23pt; --label-size: 11pt; --contact-size: 8.5pt;
  --section-size: 11.5pt; --entry-size: 10.5pt; --meta-size: 8.5pt;
  --section-caps: uppercase; --section-tracking: 0.07em; --section-weight: 700;
  --section-rule: 1px solid var(--color-rule);
  --section-gap: 13pt; --entry-gap: 8pt; --para-gap: 5pt;
  --sidebar-width: 30%; --col-gap: 22pt;

  width: var(--page-w);
  min-height: var(--page-h);
  padding: var(--page-pad);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
.paper, .paper *, .paper *::before, .paper *::after { box-sizing: border-box; }
.paper p { margin: 0 0 var(--para-gap); }
.paper a { color: var(--color-accent); text-decoration: none; }
.paper ul { margin: 0; padding: 0; }
.paper strong { font-weight: 700; }

/* Header */
.paper .doc-header {
  padding-bottom: 8pt;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: var(--section-gap);
}
.paper .name {
  font-family: var(--font-heading); font-size: var(--name-size);
  line-height: 1.05; color: var(--color-accent); margin: 0 0 2pt;
}
.paper .label {
  font-family: var(--font-heading); font-size: var(--label-size);
  color: var(--color-muted); margin: 0 0 4pt;
}
.paper .contact {
  font-family: var(--font-heading); font-size: var(--contact-size);
  color: var(--color-muted); margin: 0;
}
.paper .contact a { color: var(--color-muted); }
.paper .work-auth {
  font-family: var(--font-heading); font-size: var(--contact-size);
  font-weight: 600; color: var(--color-text); margin: 3pt 0 0;
}

/* Sections */
.paper .section { margin-top: var(--section-gap); }
.paper .section:first-child { margin-top: 0; }
.paper .section > h2 {
  font-family: var(--font-heading); font-size: var(--section-size);
  font-weight: var(--section-weight); text-transform: var(--section-caps);
  letter-spacing: var(--section-tracking); color: var(--color-accent);
  margin: 0 0 6pt; padding-bottom: 3pt; border-bottom: var(--section-rule);
  break-after: avoid;
}

/* Entries */
.paper .entry { margin-bottom: var(--entry-gap); break-inside: avoid; }
.paper .entry:last-child { margin-bottom: 0; }
.paper .entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.paper .entry-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--entry-size); }
.paper .entry-meta { font-family: var(--font-heading); font-size: var(--meta-size); color: var(--color-muted); white-space: nowrap; }
.paper .entry-sub { font-style: italic; color: var(--color-muted); }
.paper .entry-summary { margin: 2pt 0 0; }
.paper .highlights { list-style: none; margin: 3pt 0 0; }
.paper .highlights li { position: relative; padding-left: 1.1em; margin-bottom: 2pt; break-inside: avoid; }
.paper .highlights li::before { content: "\2022"; position: absolute; left: 0.15em; color: var(--color-accent); }

/* Tag lists (skills / languages / interests) */
.paper .tag-list { list-style: none; }
.paper .tag-list li { margin-bottom: 4pt; break-inside: avoid; }
.paper .tag-name { font-family: var(--font-heading); font-weight: 600; }
.paper .tag-detail { color: var(--color-muted); }
.paper .tag-list .tag-name + .tag-detail::before { content: ": "; }

/* Two-column arrangement */
.paper[data-layout="two-column"] .columns { display: flex; align-items: flex-start; gap: var(--col-gap); }
.paper[data-layout="two-column"] .sidebar { flex: 0 0 var(--sidebar-width); max-width: var(--sidebar-width); }
.paper[data-layout="two-column"] .main { flex: 1 1 auto; min-width: 0; }
.paper[data-layout="two-column"] .sidebar .section:first-child,
.paper[data-layout="two-column"] .main .section:first-child { margin-top: 0; }

/* Pagination */
.paper h1, .paper h2, .paper h3 { break-after: avoid; }
.paper p, .paper li { orphans: 2; widows: 2; }