/* pages — document styling and reader-chosen themes.
 *
 * Every theme works by overriding the SAME custom properties base.css already
 * defines (--ink, --plane, --surface, --border, --accent…). Nothing here sets a
 * colour on an element directly, so a theme is a small block of variables
 * rather than a parallel stylesheet, and anything added later inherits it for
 * free.
 *
 * All overrides are scoped under [data-pagetheme]. base.css is shared with
 * vidi, tasks and the hub — an unscoped rule here would repaint the whole
 * estate.
 */

/* ---------------------------------------------------------------- layout */
.container { max-width: 46rem; }          /* ~75ch: a comfortable measure */
body[data-wide] .container { max-width: 72rem; }   /* the editor wants room for two panes */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.page-list { display: grid; gap: .6rem; margin-top: 1rem; }
.page-card {
  display: grid; gap: .2rem; padding: .85rem 1rem; text-decoration: none;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.page-card:hover { border-color: var(--accent); }
.pc-title { font-weight: 600; }
.pc-meta { font-size: .8rem; }

.theme-pick { display: inline-flex; gap: .5rem; align-items: center;
  margin: 1rem 0; font-size: .85rem; color: var(--ink-2); }
.theme-pick select { padding: .3rem .5rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: inherit; }

/* ------------------------------------------------------------- the document
 * Typography is the product here, so it is specified rather than inherited.  */
.doc { line-height: 1.65; }
.doc-meta { margin-top: -.4rem; font-size: .85rem; }
.doc h1 { line-height: 1.2; margin: 0; }
.doc h2 { margin: 2rem 0 .6rem; line-height: 1.25; }
.doc h3 { margin: 1.5rem 0 .4rem; }
.doc p, .doc li { font-size: 1.05rem; }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li + li { margin-top: .3rem; }
.doc blockquote {
  margin: 1.2rem 0; padding: .6rem 1rem; color: var(--ink-2);
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
}
.doc code { font-size: .92em; padding: .1em .35em; border-radius: 5px;
  background: var(--accent-soft); }
.doc pre { padding: .9rem 1rem; overflow-x: auto; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); }
.doc pre code { background: none; padding: 0; }
.doc img { max-width: 100%; height: auto; border-radius: 10px; }
.doc table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.doc th, .doc td { padding: .5rem .6rem; border: 1px solid var(--border); text-align: left; }
.doc thead th { background: var(--surface); }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* ------------------------------------------------------------- comments */
.comments { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.cmt { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.cmt-who { font-size: .85rem; font-weight: 600; }
.cmt-body p { margin: .3rem 0 0; }
.cmt-form { display: grid; gap: .5rem; margin-top: 1rem; }
.cmt-form textarea, .editor textarea, .ed-title {
  width: 100%; padding: .6rem .7rem; border-radius: 10px; font: inherit;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.cmt-form button { justify-self: start; }

/* -------------------------------------------------------------- editor */
.editor { display: grid; gap: 1rem; }
.ed-title { font-size: 1.2rem; font-weight: 600; }
.ed-body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.ed-preview { padding: .8rem 1rem; overflow-y: auto; max-height: 34rem;
  border: 1px dashed var(--border); border-radius: 10px; background: var(--plane); }
.ed-share { border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; }
.ed-share legend { padding: 0 .4rem; font-size: .85rem; color: var(--ink-2); }
.ed-share label { display: block; margin: .25rem 0; }
.who-list { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem;
  padding-left: 1.5rem; }
.who { font-size: .9rem; }
.ed-theme, .ed-comments { display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; font-size: .9rem; }
.empty { color: var(--ink-2); padding: 2rem 0; }

/* ==========================================================================
   THEMES — each is only a variable override.
   ========================================================================== */

/* Light / dark: pin base.css's two looks regardless of the OS setting, so a
   reader who wants light at night gets light. */
:root[data-pagetheme="light"] {
  color-scheme: light;
  --plane:#f7f7f5; --surface:#ffffff; --border:#e2e1dc;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#7b7a75;
  --accent:#2a78d6; --accent-2:#1c5cab; --accent-ink:#fff;
  --accent-soft:rgba(42,120,214,.10);
}
:root[data-pagetheme="dark"] {
  color-scheme: dark;
  --plane:#121212; --surface:#1c1c1c; --border:#333330;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
  --accent:#3987e5; --accent-2:#5598e7; --accent-ink:#fff;
  --accent-soft:rgba(57,135,229,.16);
}

/* Accessible: WCAG-AAA-ish contrast, larger type, a heavier measure and
   visible focus. Not "dark mode with big text" — pure black on white, no grey
   body copy, and underlined links so colour is never the only signal. */
:root[data-pagetheme="accessible"] {
  color-scheme: light;
  --plane:#ffffff; --surface:#ffffff; --border:#000000;
  --ink:#000000; --ink-2:#000000; --muted:#3a3a3a;
  --accent:#0b4fa2; --accent-2:#083a78; --accent-ink:#ffffff;
  --accent-soft:rgba(11,79,162,.12);
}
:root[data-pagetheme="accessible"] .doc { line-height: 1.9; }
:root[data-pagetheme="accessible"] .doc p,
:root[data-pagetheme="accessible"] .doc li { font-size: 1.22rem; }
:root[data-pagetheme="accessible"] .doc a { text-decoration: underline; }
:root[data-pagetheme="accessible"] .container { max-width: 40rem; }
:root[data-pagetheme="accessible"] :focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* Corporate: restrained, serif headings, navy, tighter rhythm. */
:root[data-pagetheme="corporate"] {
  color-scheme: light;
  --plane:#fbfbfc; --surface:#ffffff; --border:#d7dbe0;
  --ink:#16202b; --ink-2:#48566a; --muted:#7b8798;
  --accent:#12395e; --accent-2:#0c2740; --accent-ink:#ffffff;
  --accent-soft:rgba(18,57,94,.07);
}
:root[data-pagetheme="corporate"] .doc h1,
:root[data-pagetheme="corporate"] .doc h2,
:root[data-pagetheme="corporate"] .doc h3 {
  font-family: Georgia, "Times New Roman", serif; letter-spacing: -.01em;
}
:root[data-pagetheme="corporate"] .doc h2 {
  border-bottom: 1px solid var(--border); padding-bottom: .3rem;
}
:root[data-pagetheme="corporate"] .page-card { border-radius: 4px; }

/* Fun: warm, rounded, high-energy. For party plans and the kids' pages. */
:root[data-pagetheme="fun"] {
  color-scheme: light;
  --plane:#fff8ef; --surface:#ffffff; --border:#ffd9a8;
  --ink:#3d2415; --ink-2:#7a5236; --muted:#a07a55;
  --accent:#e4572e; --accent-2:#c8431f; --accent-ink:#ffffff;
  --accent-soft:rgba(228,87,46,.12);
}
:root[data-pagetheme="fun"] .doc h1,
:root[data-pagetheme="fun"] .doc h2 { color: var(--accent); letter-spacing: -.02em; }
:root[data-pagetheme="fun"] .page-card,
:root[data-pagetheme="fun"] .ed-preview { border-radius: 18px; }
:root[data-pagetheme="fun"] .doc blockquote { border-left-width: 5px; border-radius: 0 14px 14px 0; }

/* Print: whatever theme is on screen, paper is black on white. */
@media print {
  .appbar, .theme-pick, .comments, .btn { display: none !important; }
  .container { max-width: none; }
  :root { --ink:#000; --plane:#fff; --surface:#fff; --border:#999; }
}

.who-emails { width: 100%; font: inherit; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.ed-title-row { display: grid; }
.doc li.task { list-style: none; margin-left: -1.2rem; }
.doc li.task input { margin-right: .4rem; accent-color: var(--accent); }