/* ---------------------------------------------------------------------
   Ward Bulletin: shared bulletin rendering and print imposition.
   Used by index.html (public view) and edit.html (moderator editor),
   so the two can never drift apart. Editor chrome lives in edit.html.
   --------------------------------------------------------------------- */

/* ---------- Tokens ---------- */
:root {
  --paper: #ffffff;
  --ink: #1d2433;
  --muted: #5b6472;
  --rule: #c9ced6;
  --accent: #2b5f46;   /* digital only; print stays grayscale-safe.
                          Matches the stake site's Evergreen. */
  --desk: #e6e9ed;
  --warn: #b3261e;
  --ok: #2f6b4f;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171b22; --ink: #e7eaf0; --muted: #a3abb8; --rule: #394150;
    --accent: #7db894; --desk: #0f1217; --warn: #f2b8b5; --ok: #7fc0a0;
  }
}
:root[data-theme="dark"] {
  --paper: #171b22; --ink: #e7eaf0; --muted: #a3abb8; --rule: #394150;
  --accent: #7db894; --desk: #0f1217; --warn: #f2b8b5; --ok: #7fc0a0;
}

/* ---------- Page ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font-family: var(--serif); font-size: 17px; line-height: 1.55;
}

/* ---------- Toolbar (chrome, never printed) ---------- */
.toolbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .6rem 1rem; background: var(--paper); border-bottom: 1px solid var(--rule);
  font-size: .95rem;
}
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.seg button, .btn {
  font: inherit; color: var(--ink); background: transparent; border: 0;
  padding: .35rem .9rem; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.btn { border: 1px solid var(--rule); border-radius: 999px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status { flex-basis: 100%; margin: 0; color: var(--muted); font-style: italic; font-size: .9rem; }
.status.bad { color: var(--warn); font-style: normal; }

/* ---------- Shared panel typography ---------- */
.panel h2 { font-weight: 500; font-size: 1.3em; margin: 0 0 .9em; line-height: 1.2; }
.panel h3 { font-weight: 400; font-style: italic; font-size: 1em; color: var(--muted); margin: 1.4em 0 .5em; }
.panel p { margin: 0 0 .6em; }

/* Cover */
.p-cover { display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.ward { font-size: 1.45em; font-weight: 500; margin: 0; }
.stake { margin: .15em 0 0; color: var(--muted); font-style: italic; }
.cover-date { display: flex; flex-direction: column; align-items: center; line-height: 1; margin: 1.5em 0; }
.cover-date .month { font-style: italic; font-weight: 300; font-size: 2.1em; }
.cover-date .day { font-weight: 300; font-size: 9em; letter-spacing: -.03em; line-height: .92; }
.cover-date .year { color: var(--muted); letter-spacing: .25em; margin-top: .5em; }
.meeting { margin: 0 0 1.6em; }
.quote { margin: 0 auto; max-width: 21em; font-style: italic; font-weight: 300; font-size: 1.05em; }
.quote cite { display: block; margin-top: .4em; font-style: normal; font-size: .9em; color: var(--muted); }

/* Program: dot leaders read as the traditional printed order of meeting */
.officers { margin-bottom: 1.2em; padding-bottom: .9em; border-bottom: 1px solid var(--rule); }
.row { display: flex; align-items: baseline; gap: .4em; margin: 0 0 .42em; }
.row .lbl { white-space: nowrap; }
.row .dots { flex: 1; min-width: 1.2em; border-bottom: 1px dotted var(--muted); transform: translateY(-.28em); opacity: .7; }
.row .val { text-align: right; max-width: 66%; }
.row .val em { font-style: italic; }
.row .num { font-variant-numeric: oldstyle-nums; margin-right: .2em; }
.row .note { display: block; font-size: .85em; color: var(--muted); font-style: italic; }
.interlude { text-align: center; font-style: italic; color: var(--muted); margin: .9em 0; }

/* Announcements */
.ann { margin: 0 0 1em; }
.ann strong { font-weight: 600; display: block; }

/* Back panel */
.cal { list-style: none; margin: 0; padding: 0; }
.cal li { display: grid; grid-template-columns: 4.2em 1fr; gap: .6em; margin: 0 0 .55em; }
.cal .d { font-variant-numeric: oldstyle-nums; }
.cal .d span { display: block; color: var(--muted); font-size: .85em; font-style: italic; }
.cal .where { display: block; color: var(--muted); font-size: .9em; }
.leaders { list-style: none; margin: 0; padding: 0; }
.leaders li { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 .3em; }
.leaders .who { text-align: right; }
.leaders .phone { display: block; color: var(--muted); font-size: .9em; }
.online { display: flex; align-items: center; gap: 1em; margin-top: 1.4em; padding-top: 1em; border-top: 1px solid var(--rule); }
.qr { width: .95in; height: .95in; flex: none; }
.qr img, .qr canvas { width: 100% !important; height: 100% !important; }
.online p { margin: 0; font-size: .9em; }
.online a { color: inherit; word-break: break-all; }

/* ---------- Digital view: same panels, stacked, one column ---------- */
.digital { max-width: 36rem; margin: 1.5rem auto; background: var(--paper); }
.digital .panel { padding: 2.2rem 1.6rem; border-bottom: 1px solid var(--rule); }
.digital .panel:last-child { border-bottom: 0; }
.digital .cover-date .day { font-size: 7em; color: var(--accent); }
.digital .print-only, .digital .qr { display: none; }
.digital .online { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 40rem) { .digital { margin: 0; } }

/* ---------- Print sheets: letter landscape, two 5.5x8.5 panels per side ---------- */
.sheets { padding: 1.5rem 1rem 3rem; overflow-x: auto; }
.sheets.offscreen { position: absolute; left: -10000px; top: 0; }
.caption { max-width: 11in; margin: 0 auto .5rem; color: var(--muted); font-style: italic; font-size: .9rem; }
.sheet-wrap { margin: 0 auto 2rem; }
.sheet {
  --paper: #ffffff; --ink: #1d2433; --muted: #555d6b; --rule: #c4c9d1;
  width: 11in; height: 8.5in; transform-origin: top left;
  display: grid; grid-template-columns: 5.5in 5.5in;
  background: var(--paper); color: var(--ink); position: relative;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .18), 0 8px 24px rgba(20, 30, 50, .10);
}
.sheet::after { /* fold line, screen only */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  border-left: 1px dashed #c4c9d1;
}
.sheet .panel {
  height: 8.5in; padding: .5in .55in; overflow: hidden;
  font-size: 10.5pt; line-height: 1.45; position: relative;
}
.sheet .p-cover { padding-block: .75in .6in; }
.sheet .panel.overflow { box-shadow: inset 0 -4px 0 var(--warn); }
.sheet .panel.overflow::after {
  content: "Too long to fit"; position: absolute; right: .3in; bottom: .15in;
  background: #b3261e; color: #fff; font-size: 8pt; padding: .1em .6em; border-radius: 3px;
}

/* ---------- Print ---------- */
@page { size: letter landscape; margin: 0; }
@media print {
  :root { padding: 0; }
  body { background: #fff; }
  .toolbar, .digital, .caption, .no-print { display: none !important; }
  .sheets, .sheets.offscreen { position: static; padding: 0; overflow: visible; }
  .sheet-wrap { width: auto !important; height: auto !important; margin: 0; }
  .sheet { transform: none !important; box-shadow: none; break-after: page; }
  .sheet-wrap:last-child .sheet { break-after: auto; }
  .sheet::after, .sheet .panel.overflow::after { display: none; }
  .sheet .panel.overflow { box-shadow: none; }
}