/* ============================================================
   TabWell document pages (Guide / Release Notes / Privacy) - hosted on
   examinds.com/tabwell/. Styled in the ExaMinds design language (paper/ink/
   copper, IBM Plex, Fraunces logo) for consistency with the main site.

   Design tokens are defined LOCALLY here (not imported from the main site
   styles.css) so these pages - especially the App Store-linked privacy page,
   whose URL must stay stable forever - cannot be broken by future changes to
   the marketing site's stylesheet. Fonts come from the shared, self-hosted
   ../css/fonts.css (with system fallbacks), so text renders even if fonts fail.
   ============================================================ */

:root {
  --paper:#F7F4EE; --paper-deep:#EFEAE0; --ink:#15191E; --ink-deep:#0F1C2E;
  --copper:#BC5327; --copper-deep:#A34620; --muted:#6E6A60; --line:#D9D2C4;
  --serif:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --logo:'Fraunces', Georgia, serif;
  --mono:'SF Mono', ui-monospace, Menlo, Monaco, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--sans); font-size: 16.5px; line-height: 1.7;
  color: var(--ink); background: var(--paper); -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--copper); color: var(--paper); }

/* ---------- Header (matches the main site's register) ---------- */
.doc-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,244,238,0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.doc-header .bar {
  max-width: 860px; margin: 0 auto; padding: 0 24px; height: 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.doc-header .logo {
  font-family: var(--logo); font-weight: 560; font-size: 24px; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.doc-header .logo .x { color: var(--copper); position: relative; top: -0.05em; padding: 0 0.02em; }
.doc-header .product {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--muted);
}
.doc-header .product::before { content: '/ '; color: var(--line); }
.doc-header .product-icon { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }

/* ---------- Sub-nav across the three TabWell docs ---------- */
.doc-tabs {
  max-width: 860px; margin: 0 auto; padding: 16px 24px 0;
  display: flex; gap: 22px; flex-wrap: wrap;
}
.doc-tabs a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none;
  color: var(--muted); padding-bottom: 6px; border-bottom: 2px solid transparent;
}
.doc-tabs a:hover { color: var(--copper-deep); }
.doc-tabs a.active { color: var(--ink); border-bottom-color: var(--copper); }

/* ---------- Prose column ---------- */
.doc {
  max-width: 860px; margin: 0 auto; padding: 40px 24px 96px;
}
.doc h1, .doc h2, .doc h3, .doc h4 { font-family: var(--serif); line-height: 1.2; letter-spacing: -0.01em; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 600; margin: 8px 0 6px; }
.doc h2 {
  font-size: 1.55rem; font-weight: 600; margin: 2.6rem 0 .7rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.doc h3 { font-size: 1.2rem; font-weight: 600; margin: 1.7rem 0 .4rem; }
.doc h4 { font-size: 1.02rem; font-weight: 600; margin: 1.2rem 0 .3rem; color: var(--muted); }
.doc p { margin: 0 0 1rem; }
.doc a { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--copper); }
.doc a:hover { color: var(--ink); }
.doc strong { font-weight: 600; }
.doc ul, .doc ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.doc li { margin: .28rem 0; }
.doc hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* Code, quotes, tables - ExaMinds tokens */
.doc code {
  font-family: var(--mono); font-size: .88em;
  background: var(--paper-deep); padding: .12em .4em; border-radius: 4px;
}
.doc pre { background: var(--paper-deep); padding: 1rem; border-radius: 6px; overflow-x: auto; border: 1px solid var(--line); }
.doc pre code { background: none; padding: 0; font-size: .85em; }
.doc blockquote {
  margin: 1rem 0; padding: .6rem 1rem; background: var(--paper-deep);
  border-left: 3px solid var(--copper); border-radius: 0 4px 4px 0;
}
.doc blockquote p { margin: 0; }
.doc table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95em; }
.doc th, .doc td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.doc th { background: var(--paper-deep); font-weight: 600; font-family: var(--sans); }
.doc tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }

/* First paragraph after h1 reads as a standfirst */
.doc h1 + p { font-size: 1.15rem; color: var(--muted); }

/* ---------- Footer ---------- */
.doc-footer {
  border-top: 1px solid var(--line); background: var(--paper-deep);
}
.doc-footer .inner {
  max-width: 860px; margin: 0 auto; padding: 28px 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13.5px; color: var(--muted);
}
.doc-footer a { color: var(--muted); text-decoration: none; }
.doc-footer a:hover { color: var(--ink); }

@media print {
  .doc-header, .doc-tabs, .doc-footer { display: none; }
  body { background: #fff; }
}