/* ---------------------------------------------------------------------------
   Jetbooks stylesheet.

   Rules this file follows, so edits stay consistent:
   1. Every color, space, radius, and font size is a token in :root.
      Do not write a raw hex value or pixel space below the token block.
   2. Spacing uses the --s1..--s6 scale only.
   3. A card (.card) wraps a bounded object or an actionable group.
      It is not a wrapper around every section.
   4. State is never carried by color alone: every badge also carries a word.
   5. Anything that makes something new lives behind a button and opens in a
      <dialog>. A page you are reading does not carry the controls for creating
      what you have not asked to create.
   6. Interactive targets are at least 36px tall.
   7. One <h1> per page, matching the nav destination.
   8. The house style is paper: warm ground, cloth spines, a serif for
      anything that names a thing, sans for anything that measures one.
--------------------------------------------------------------------------- */

:root {
  --bg: #f4f1ec;
  --surface: #ffffff;
  --surface-sunken: #faf8f4;
  --border: #e3ddd3;
  --border-strong: #cec6b8;
  --ink: #221f1b;
  --ink-muted: #675f54;
  --ink-faint: #938a7d;
  --accent: #7c5230;
  --accent-soft: #f3e9df;
  --accent-edge: #e0cdb9;
  --cloth: #2f4858;
  --cloth-deep: #1f303b;
  --cloth-soft: #e9eef1;
  --cloth-edge: #cbd8e0;
  --alert: #9b2c2c;
  --alert-soft: #fbeaea;
  --good: #2f6b4f;
  --good-soft: #e8f1ec;
  --link: #1d4ed8;         /* words linked to the Resource Center */
  --link-soft: rgba(29, 78, 216, .12);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 32px; --s6: 48px;
  --r1: 4px; --r2: 8px; --r3: 12px; --round: 50%;
  --f0: 12px; --f1: 13px; --f2: 15px; --f3: 18px; --f4: 24px; --f5: 30px;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --control-h: 36px;
  --shadow: 0 1px 2px rgba(34, 31, 27, .07);
  --shadow-lift: 0 6px 18px rgba(34, 31, 27, .13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--f2)/1.5 var(--sans);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ layout */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -3px 0 var(--accent-soft);
  padding: 0 var(--s4);
  display: flex; align-items: center; gap: var(--s5);
}
.brand {
  font: 600 var(--f3)/1 var(--serif); color: var(--ink);
  padding: var(--s3) 0; white-space: nowrap; letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; color: var(--accent); }
.nav { display: flex; gap: var(--s1); flex: 1; flex-wrap: wrap; }
.nav a {
  color: var(--ink-muted); padding: var(--s3);
  border-bottom: 2px solid transparent; font-size: var(--f1);
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.whoami { display: flex; align-items: center; gap: var(--s3); font-size: var(--f0); }
.whoami select {
  width: auto; min-height: 28px; padding: 0 var(--s2);
  font-size: var(--f0); background: var(--surface-sunken);
}
.whoami a { color: var(--ink-muted); white-space: nowrap; }

/* On a phone the bar becomes two rows: the name and the way out, then the
   places to go, which scroll sideways rather than stacking into a column. */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 0 var(--s3); padding: 0 var(--s3); }
  .brand { order: 1; flex: 1; }
  .whoami { order: 2; }
  .nav {
    order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto;
    border-top: 1px solid var(--border); scrollbar-width: none;
  }
  .nav a { white-space: nowrap; }
}

.page { max-width: 1100px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s6); }
/* A packet is read at something near its printed width, so a reading screen
   gets the room a 1100px column was never going to give it. */
.page-reader { max-width: 1560px; }

h1 { font: 600 var(--f5)/1.15 var(--serif); margin: 0 0 var(--s1); letter-spacing: -.015em; }
h2 {
  font-size: var(--f1); margin: 0 0 var(--s3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  border-bottom: 1px solid var(--border); padding-bottom: var(--s2);
}
h2 .count {
  font-weight: 400; color: var(--ink-faint); font-size: var(--f0);
  text-transform: none; letter-spacing: 0;
}
.eyebrow {
  font-size: var(--f0); text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); font-weight: 600;
}
.crumbs { font-size: var(--f0); color: var(--ink-faint); margin-bottom: var(--s3); }
.crumbs a { color: var(--ink-muted); }

.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.tight { gap: var(--s2); }
.spread {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 2px solid var(--border-strong);
}
.cols { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 880px) { .cols { grid-template-columns: 1fr; } }

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--f0); }
.inline { display: inline; }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); box-shadow: var(--shadow);
  padding: var(--s4); margin-bottom: var(--s4);
}
.card.sheet { padding: var(--s5); }

.empty {
  color: var(--ink-muted); font-size: var(--f1); background: var(--surface-sunken);
  border: 1px dashed var(--border-strong); border-radius: var(--r1);
  padding: var(--s3); margin: 0;
}

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-block; font-size: var(--f0); line-height: 1.4;
  padding: 1px var(--s2); border-radius: var(--r1);
  border: 1px solid var(--border-strong); color: var(--ink-muted);
  background: var(--surface-sunken); white-space: nowrap;
}
.badge.accent { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent); }
.badge.good   { background: var(--good-soft); border-color: #c9dfd3; color: var(--good); }
.badge.alert  { background: var(--alert-soft); border-color: #edc9c9; color: var(--alert); }

/* ------------------------------------------------------------------- shelf */

.shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s3); align-items: start;
}

.book {
  display: flex; align-items: stretch; color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r1) var(--r2) var(--r2) var(--r1);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease;
}
.book:hover { text-decoration: none; box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.book .spine {
  flex: none; width: 34px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.05) 2px 4px),
    linear-gradient(120deg, var(--cloth), var(--cloth-deep));
  border-right: 1px solid var(--cloth-deep);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--s2);
}
.book .spine span {
  color: var(--cloth-soft); font-size: var(--f0); font-weight: 700;
  letter-spacing: .08em; opacity: .85;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.book-body { padding: var(--s3) var(--s4) var(--s3) var(--s3); min-width: 0; }
.book-title {
  font: 600 var(--f3)/1.25 var(--serif); color: var(--ink);
  margin: var(--s1) 0 var(--s2);
}

/* --------------------------------------------------------------- contents */

table { width: 100%; border-collapse: collapse; font-size: var(--f1); }

table.contents td { padding: var(--s3) var(--s2); border-bottom: 1px dotted var(--border-strong); }
table.contents tr:last-child td { border-bottom: 0; }
table.contents tr:hover td { background: var(--surface-sunken); }
td.no {
  width: 40px; color: var(--ink-faint); font-size: var(--f0);
  font-weight: 700; letter-spacing: .06em; vertical-align: top; padding-top: 15px;
}
td.what a { font: 600 var(--f2) var(--serif); color: var(--ink); }
td.what a:hover { color: var(--accent); }
td.what .sub { font-size: var(--f0); color: var(--ink-faint); margin-top: 2px; }
td.ctrl { text-align: right; white-space: nowrap; vertical-align: middle; width: 1%; }

table.log th {
  text-align: left; font-size: var(--f0); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint); font-weight: 700;
  padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--border);
}
table.log td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--border); }
table.log tr:last-child td { border-bottom: 0; }
table.log .when { color: var(--ink-faint); font-size: var(--f0); white-space: nowrap; }
table.log .what { font-weight: 600; }

/* ------------------------------------------------------------------ lists */

.entry { padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.entry:first-of-type { padding-top: 0; }
.entry:last-child { border-bottom: 0; padding-bottom: 0; }
.entry .head { display: flex; gap: var(--s2); align-items: baseline; justify-content: space-between; }
.entry .what { font-weight: 600; font-size: var(--f1); }
.entry .when { font-size: var(--f0); color: var(--ink-faint); white-space: nowrap; }
.entry .sub { font-size: var(--f0); color: var(--ink-muted); margin-top: 2px; }
.entry .meta { font-size: var(--f0); color: var(--ink-faint); margin-top: 2px; }

.kv { display: grid; grid-template-columns: 112px 1fr; gap: var(--s2) var(--s3); font-size: var(--f1); margin: 0; }
.kv dt { color: var(--ink-faint); font-size: var(--f0); padding-top: 2px; }
.kv dd { margin: 0; }

/* ------------------------------------------------------------------- forms */

label { display: block; font-size: var(--f0); color: var(--ink-muted); margin-bottom: var(--s1); }
input[type=text], input[type=date], input[type=password], input[type=email],
input[type=tel], input[type=number], input[type=time], input:not([type]),
select, textarea {
  width: 100%; font: var(--f1)/1.4 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r1); padding: var(--s2); min-height: var(--control-h);
}
textarea { min-height: 84px; resize: vertical; }
input[type=file] { font-size: var(--f0); padding: var(--s2) 0; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field { margin-bottom: var(--s3); }

button, .button {
  font: 600 var(--f1)/1 var(--sans); min-height: var(--control-h);
  padding: 0 var(--s3); border-radius: var(--r1); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
}
button:hover, .button:hover { background: var(--surface-sunken); text-decoration: none; }
button.primary, .button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
button.primary:hover, .button.primary:hover { background: #6a4527; }
button.wide {
  width: 100%; margin-bottom: var(--s2);
  height: auto; padding: var(--s3); line-height: 1.35;
}
.button { display: inline-flex; align-items: center; }
a:focus-visible, button:focus-visible, .button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.mini {
  min-height: 28px; padding: 0 var(--s2); margin-left: var(--s1);
  font-size: var(--f0); font-weight: 400; color: var(--ink-muted);
  background: var(--surface); border-radius: var(--r1);
}
.mini:hover { color: var(--ink); border-color: var(--ink-faint); }
.mini.danger:hover { color: var(--alert); border-color: #edc9c9; }

.search { display: flex; gap: var(--s2); align-items: center; }
.search input { min-width: 220px; }

details.editor { margin-top: var(--s3); border-top: 1px solid var(--border); padding-top: var(--s3); }
details.editor > summary {
  font-size: var(--f1); color: var(--accent); cursor: pointer; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 28px;
}
details.editor > summary::before { content: "+"; font-size: var(--f2); }
details[open].editor > summary::before { content: "\2212"; }
details.editor > summary::-webkit-details-marker { display: none; }
details.editor .body { padding-top: var(--s3); }
details.editor.tight { border-top: 0; padding-top: var(--s2); margin-top: var(--s3); }
details.editor.tight > summary { font-size: var(--f0); font-weight: 400; }

/* ------------------------------------------------------------------- login */

.login-wrap {
  max-width: 420px; margin: 0 auto; padding: var(--s6) var(--s4);
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
.login-mark {
  font-size: var(--f0); text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); font-weight: 600;
}
.login-title { font-size: var(--f4); margin: var(--s1) 0 var(--s4); }
.login-wrap .card { margin-bottom: 0; }
.login-wrap .card { padding: var(--s5); border-top: 3px solid var(--cloth); }
.login-wrap button:last-child { margin-bottom: 0; }

.book-contents {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  border-top: 1px dotted var(--border-strong);
}
.book-contents li {
  font-size: var(--f0); color: var(--ink-muted);
  padding: var(--s1) 0 0 var(--s3); position: relative;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book-contents li::before {
  content: "\00B7"; position: absolute; left: 2px; color: var(--ink-faint);
}
.book-foot { margin-top: var(--s2); }

/* ------------------------------------------------------------- messages */

.flash {
  background: var(--accent-soft); border: 1px solid var(--accent-edge);
  border-left: 3px solid var(--accent); border-radius: var(--r1);
  padding: var(--s3); margin: 0 0 var(--s3); font-size: var(--f1);
  color: #5f3e22;
}
.flash.alert-flash {
  background: var(--alert-soft); border-color: #edc9c9;
  border-left-color: var(--alert); color: var(--alert);
}
.notice {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--cloth); border-radius: var(--r2);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4); font-size: var(--f1);
}
.notice code.copyable {
  display: block; margin-top: var(--s2); padding: var(--s2);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--r1); font-size: var(--f0); word-break: break-all;
  user-select: all;
}
.lead { font-size: var(--f2); margin: 0 0 var(--s4); }

/* --------------------------------------------------------------- forms 2 */

fieldset.chips {
  border: 0; padding: 0; margin: 0 0 var(--s3);
}
fieldset.chips legend {
  font-size: var(--f0); color: var(--ink-muted); padding: 0; margin-bottom: var(--s1);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  margin: 0 var(--s1) var(--s1) 0; padding: var(--s1) var(--s2);
  border: 1px solid var(--border-strong); border-radius: var(--r1);
  background: var(--surface-sunken); font-size: var(--f0); cursor: pointer;
  min-height: 30px;
}
.chip input { width: auto; min-height: 0; margin: 0; }
.chip:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent);
  font-weight: 600;
}
label.check {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--f1); color: var(--ink); margin-bottom: var(--s2);
}
label.check input { width: auto; min-height: 0; margin: 0; }

.actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.actions form { margin: 0; }
.actions button { width: 100%; }

button.link {
  border: 0; background: none; color: var(--accent); padding: 0; min-height: 28px;
  font-weight: 400; text-decoration: underline; font-size: var(--f1);
}
button.link.danger { color: var(--alert); }
.topbar button.link { color: var(--ink-muted); font-size: var(--f0); }

ul.plain { list-style: none; margin: 0 0 var(--s3); padding: 0; font-size: var(--f1); }
ul.plain li { padding: var(--s1) 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ print rule */

/* PRD D-6: no print path for members. A deterrent, not a guarantee. */
@media print {
  .packet, .packet-scroll, .rail, .topbar, .bookhead-acts, dialog {
    display: none !important;
  }
  body::after {
    content: "Printing is not available. Ask the Board Office if you need a copy.";
    font: 14px/1.6 sans-serif;
  }
}

.aside .kv { grid-template-columns: 1fr; gap: 0; }
.aside .kv dt { margin-top: var(--s2); }
.aside .kv dt:first-child { margin-top: 0; }
.aside .kv dd { margin-bottom: var(--s1); }

.empty code {
  display: block; margin: var(--s2) 0; padding: var(--s2);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r1); font-size: var(--f0); text-align: left;
  user-select: all; word-break: break-all;
}

.mini[disabled] { opacity: .35; cursor: default; }
.mini[disabled]:hover { border-color: var(--border-strong); color: var(--ink-muted); }


/* ---------------------------------------------------------- notes panel */

#notes-list .note {
  border-bottom: 1px solid var(--border); padding: var(--s3) 0;
}
#notes-list .note:first-child { padding-top: 0; }
#notes-list .note:last-child { border-bottom: 0; }
#notes-list .note.on { background: var(--accent-soft); }
#notes-list .head {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
#notes-list blockquote {
  margin: var(--s1) 0; padding-left: var(--s2);
  border-left: 2px solid var(--accent-edge);
  font: italic var(--f0)/1.5 var(--serif); color: var(--ink-muted);
}
#notes-list .comment { margin: var(--s1) 0; font-size: var(--f1); }


/* ------------------------------------------------------------ book header */

.bookhead {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 2px solid var(--border-strong);
}
.bookhead-name { min-width: 0; }
.bookhead-name h1 { margin-bottom: var(--s2); }
.bookhead-acts { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.spread .row.tight { align-items: baseline; }

.wide { display: block; }
.wide > div { min-width: 0; }

/* ----------------------------------------------------------------- reader */

/* Three columns that hold their own scroll: the contents, the packet, and
   whatever you have written down. Only the packet moves under the reader. */
.reader {
  display: grid; gap: var(--s4); align-items: start;
  grid-template-columns: 240px minmax(0, 1fr) 260px;
}
@media (max-width: 1180px) {
  .reader { grid-template-columns: 220px minmax(0, 1fr); }
  .reader .aside { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .reader { grid-template-columns: 1fr; }
}

.rail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); box-shadow: var(--shadow);
  position: sticky; top: var(--s3);
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--s6));
}
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding: var(--s3) var(--s3) var(--s2) var(--s4);
  border-bottom: 1px solid var(--border);
}
.rail-head h2 { margin: 0; border: 0; padding: 0; }
.rail-body {
  overflow-y: auto; padding: var(--s2) var(--s2) var(--s4);
  flex: 1; min-height: 120px;
}
.rail-body.over { background: var(--accent-soft); outline: 2px dashed var(--accent-edge); }
.rail-body.working { opacity: .55; pointer-events: none; }

.rail-tree, .rail-tree ol { list-style: none; margin: 0; padding: 0; }
.rail-tree ol { margin-left: var(--s3); }
.rail-row {
  display: flex; align-items: center; gap: 2px;
  border-radius: var(--r1); padding-right: 2px;
}
.rail-row:hover { background: var(--surface-sunken); }
.rail-link {
  display: flex; gap: var(--s2); align-items: baseline; flex: 1; min-width: 0;
  padding: 7px var(--s2); color: var(--ink-muted); font-size: var(--f1);
  line-height: 1.35;
}
.rail-link:hover { color: var(--ink); text-decoration: none; }
.rail-link .n {
  color: var(--ink-faint); font-size: var(--f0); min-width: 24px;
  font-variant-numeric: tabular-nums; flex: none;
}
.rail-link .t { overflow-wrap: anywhere; }
.rail-item.is-section > .rail-row > .rail-link .t {
  font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint);
}
.rail-item.is-section > .rail-row { margin-top: var(--s2); }
.rail-link.on, .rail-row.on .rail-link { color: var(--accent); font-weight: 600; }
.rail-item.on > .rail-row { background: var(--accent-soft); border-radius: var(--r1); }

.grip {
  cursor: grab; color: var(--border-strong); font-size: 11px;
  padding: 0 2px; flex: none; user-select: none;
}
.rail-item.dragging { opacity: .4; }
.rail-item.drop-before > .rail-row { box-shadow: inset 0 2px 0 var(--accent); }
.rail-item.drop-after > .rail-row { box-shadow: inset 0 -2px 0 var(--accent); }

.grip-menu {
  border: 0; background: none; color: var(--ink-faint); cursor: pointer;
  min-height: 24px; min-width: 24px; padding: 0; border-radius: var(--r1);
  line-height: 1; font-size: var(--f2); flex: none; opacity: 0;
}
.rail-row:hover .grip-menu, .grip-menu:focus { opacity: 1; }
.grip-menu:hover { background: var(--border); color: var(--ink); }

.popmenu {
  position: absolute; z-index: 40; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r2);
  box-shadow: var(--shadow-lift); padding: var(--s1); min-width: 160px;
  display: flex; flex-direction: column;
}
.popmenu button {
  border: 0; background: none; text-align: left; padding: var(--s2) var(--s3);
  font-size: var(--f1); color: var(--ink); border-radius: var(--r1);
  min-height: 32px; cursor: pointer; width: 100%;
}
.popmenu button:hover { background: var(--surface-sunken); }
.popmenu button.danger { color: var(--alert); }

/* ----------------------------------------------------------------- packet */

.packet {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--r2);
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.packet-bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.vb-group { display: flex; align-items: center; gap: var(--s1); }
.vb-ind {
  font-size: var(--f0); color: var(--ink-muted); min-width: 60px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.packet-scroll {
  height: calc(100vh - 230px); min-height: 480px; overflow-y: auto;
  background: var(--surface-sunken);
  padding: var(--s4) 0 var(--s6);
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  scroll-behavior: smooth;
}
.packet-scroll .empty { margin: var(--s5) var(--s4); line-height: 1.5; }

.sheet {
  position: relative; background: #fff;
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 10px rgba(34, 31, 27, .12);
  line-height: 0; flex: none;
}
.sheet canvas { position: relative; z-index: 0; display: block; }
.sheet.is-blank { background: repeating-linear-gradient(
  135deg, #fff, #fff 12px, var(--surface-sunken) 12px, var(--surface-sunken) 24px); }
.sheet-fail {
  position: absolute; inset: auto 0 var(--s4); text-align: center;
  font: var(--f0) var(--sans); color: var(--ink-faint); line-height: 1.5;
}
.folio {
  position: absolute; right: var(--s3); bottom: var(--s2); z-index: 3;
  font: var(--f0) var(--sans); color: var(--ink-faint);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.sheet.is-divider .divider-body {
  position: absolute; left: 12%; right: 12%; top: 44%; line-height: 1.2;
}
.sheet.is-divider .n {
  font: 700 var(--f1) var(--sans); color: var(--ink-faint);
  letter-spacing: .06em; margin-bottom: var(--s2);
}
.sheet.is-divider .t {
  font: 600 var(--f4) var(--serif); color: var(--ink);
  border-bottom: 2px solid var(--accent-edge); padding-bottom: var(--s3);
}

/* The agenda page (PRD C-11). Drawn in the page's proportions and sized in em
   against the page width, so it zooms with the pages after it. */
.sheet.is-agenda { line-height: 1.35; height: auto; }
.agenda-body { padding: 7.5% 9% 6%; font-family: var(--sans); color: var(--ink); }
.agenda-eyebrow {
  font-size: .72em; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.agenda-title {
  font: 700 1.9em/1.2 var(--serif); margin: .35em 0 .25em; padding: 0 0 .3em;
  border: 0; border-bottom: 1px solid var(--border-strong); color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.agenda-meta { font-size: .82em; color: var(--ink-faint); margin-bottom: 1.3em; }
.agenda-rows { list-style: none; margin: 0; padding: 0; }
.agenda-row.top { margin-top: .5em; }
.agenda-row:first-child { margin-top: 0; }
.agenda-item {
  display: grid; grid-template-columns: 1fr auto 9.5em; gap: 1em;
  align-items: baseline; padding: .28em .3em; border-radius: 3px;
  color: var(--ink); text-decoration: none;
}
.agenda-item:hover { background: var(--accent-soft); text-decoration: none; }
.agenda-item .what { display: flex; gap: .7em; min-width: 0; }
.agenda-item .n {
  flex: none; min-width: 1.6em; font-weight: 700; font-size: .82em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
/* An unnumbered line still needs a baseline, or its title floats above its time. */
.agenda-item .n:empty::before { content: "\00a0"; }
.agenda-item .t { font: 1.02em var(--serif); overflow-wrap: anywhere; }
.agenda-row.top .t { font-weight: 700; font-size: 1.1em; }
.agenda-item .who { font-size: .82em; color: var(--ink-faint); text-align: right; }
.agenda-item .when {
  font-size: .82em; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A section that is not taking a page of its own still needs to be visible in
   the scroll, so it becomes a rule across the packet rather than a blank leaf. */
.packet-band {
  width: min(100%, 1000px); display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4); line-height: 1.4;
}
.packet-band::after {
  content: ""; flex: 1; height: 1px; background: var(--accent-edge);
}
.packet-band .n {
  font: 700 var(--f0) var(--sans); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.packet-band .t {
  font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
}
.packet-missing {
  width: min(100%, 1000px); padding: var(--s4); line-height: 1.5;
  background: var(--alert-soft); border: 1px solid var(--border-strong);
  border-radius: var(--r2); font-size: var(--f1); color: var(--ink-muted);
}
.packet-missing .t { font: 600 var(--f2) var(--serif); color: var(--ink); }
.packet-missing p { margin: var(--s1) 0 0; }

/* -------------------------------------------------------- text and marks */

.marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mark {
  position: absolute; background: rgba(214, 168, 58, .38);
  mix-blend-mode: multiply; border-radius: 1px; pointer-events: auto;
  cursor: pointer;
}
.mark:hover { background: rgba(214, 168, 58, .55); }
.mark.stale { background: rgba(155, 44, 44, .22); }

/* Links that were already in the file keep working, and one that leaves the
   application says so before it is followed rather than after. */
/* The layer sits above the text so a link is clickable, which means it must
   not take the pointer itself: a transparent sheet over the whole page
   swallows the drag that selects words, and selecting words is how a note is
   made. Only the link rectangles take the pointer. */
.links { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.linkmark {
  position: absolute; display: block; border-bottom: 1px solid transparent;
  border-radius: 1px; pointer-events: auto;
}
.linkmark:hover { background: rgba(47, 72, 88, .16); border-bottom-color: var(--cloth); }
.linkmark.out:hover { background: rgba(124, 82, 48, .16); border-bottom-color: var(--accent); }

/* Words linked to the Resource Center (PRD R-5). The tint turns dark type the
   link colour and leaves the white page white, because "lighten" keeps the
   lighter of the two. It blends with the canvas only while it shares the
   canvas's stacking context, so .tints takes no z-index and no opacity. */
.tints { position: absolute; inset: 0; pointer-events: none; }
.tint { position: absolute; background: var(--link); mix-blend-mode: lighten; }
.linkmark.res { border-bottom: 2px solid var(--link); cursor: pointer; }
.linkmark.res:hover { background: var(--link-soft); border-bottom-color: var(--link); }
.linkmark.res.closed { border-bottom-color: var(--ink-faint); pointer-events: none; }
a.linkmark.res.closed { pointer-events: auto; }
.link-popover { width: auto; max-width: 320px; }
.link-popover .link-to {
  font-size: var(--f0); color: var(--ink-muted); line-height: 1.4;
  margin-bottom: var(--s2);
}
blockquote.link-quote {
  margin: 0 0 var(--s3); padding: var(--s2) var(--s3);
  border-left: 3px solid var(--link); background: var(--surface-sunken);
  font: italic var(--f1)/1.4 var(--serif); color: var(--ink-muted);
}
blockquote.link-quote:empty { display: none; }

.textLayer {
  position: absolute; inset: 0; overflow: hidden; z-index: 2;
  opacity: .22; line-height: 1;
}
.textLayer span, .textLayer br {
  color: transparent; position: absolute; white-space: pre;
  cursor: text; transform-origin: 0 0;
}
.textLayer ::selection { background: rgba(124, 82, 48, .45); }

.note-popover {
  position: absolute; z-index: 5; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r2);
  box-shadow: var(--shadow-lift); padding: var(--s2); width: 260px;
}
.note-popover textarea { margin-bottom: var(--s2); }
#notes-list .head .in {
  font-size: var(--f0); color: var(--ink-faint); overflow-wrap: anywhere;
}

/* A member reading when changes are published is offered them (PRD B-10). */
.packet-update {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s2) var(--s3);
  background: var(--cloth-soft); border-bottom: 1px solid var(--cloth-edge);
  font-size: var(--f1); color: var(--cloth-deep);
}
.packet-update[hidden] { display: none; }
.publish-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.rail-agenda .rail-link .t { font-weight: 600; }
.backto { margin: 0 0 var(--s3); }

/* ---------------------------------------------------------------- pop-outs */

dialog.pane {
  border: 1px solid var(--border-strong); border-radius: var(--r3);
  box-shadow: var(--shadow-lift); background: var(--surface);
  padding: var(--s4) var(--s5) var(--s5); width: min(560px, calc(100vw - var(--s4)));
  color: var(--ink); font: var(--f2)/1.5 var(--sans);
}
dialog.pane::backdrop { background: rgba(34, 31, 27, .38); }
dialog.pane h2 { border: 0; font-size: var(--f0); margin-bottom: var(--s4); }
.pane-x { position: absolute; top: var(--s3); right: var(--s3); }
.pane-x button {
  border: 0; background: none; font-size: var(--f4); line-height: 1;
  color: var(--ink-faint); cursor: pointer; min-height: 28px; padding: 0 var(--s2);
}
.pane-x button:hover { color: var(--ink); }
.pane-body > form + .pane-foot { margin-top: var(--s4); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
fieldset.duration { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.duration legend {
  font-size: var(--f0); color: var(--ink-muted); padding: 0; margin-bottom: var(--s1);
}
fieldset.duration .pair { margin-top: 0; }
fieldset.duration label { color: var(--ink-faint); }
.pane-foot {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: var(--s3);
}

.tabs { display: flex; gap: var(--s1); margin-bottom: var(--s4); flex-wrap: wrap; }
.tabs button {
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: var(--f1); color: var(--ink-muted); padding: var(--s2) var(--s3);
  border-radius: var(--r1); min-height: 32px;
}
.tabs button:hover { background: var(--surface-sunken); color: var(--ink); }
.tabs button.on {
  background: var(--accent-soft); border-color: var(--accent-edge);
  color: var(--accent); font-weight: 600;
}

/* Dropping files where the eye expects to drop them. The real input is still
   in there, so the picker and the gesture end up at the same place. */
.drop {
  display: block; border: 2px dashed var(--border-strong); border-radius: var(--r2);
  background: var(--surface-sunken); padding: var(--s5) var(--s4);
  text-align: center; cursor: pointer; margin-bottom: var(--s4);
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.drop-face { display: block; font-size: var(--f1); color: var(--ink-muted); }
.drop-face strong { display: block; font-size: var(--f2); color: var(--ink); }
.drop-list { display: block; margin-top: var(--s2); color: var(--accent); }

/* Without scripting a dialog cannot be opened, so it is simply always open and
   the button that would have opened it is not shown. */
.no-js dialog.pane { display: block; position: static; margin: var(--s4) 0; }
.no-js [data-open] { display: none; }
.no-js .pane-body[hidden] { display: block; }

/* ------------------------------------------------------------------ tiles */

.tiles {
  display: grid; gap: var(--s3); margin-bottom: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); box-shadow: var(--shadow);
  padding: var(--s3) var(--s4); font-size: var(--f0);
  color: var(--ink-muted); text-transform: uppercase; letter-spacing: .07em;
}
.tile .n {
  display: block; font: 600 var(--f5)/1.1 var(--serif); color: var(--ink);
  letter-spacing: -.02em; text-transform: none; font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- second factor */

.enrol {
  display: grid; gap: var(--s4); align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
}
@media (max-width: 620px) { .enrol { grid-template-columns: 1fr; } }
.qr {
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--r2); padding: var(--s3); line-height: 0;
}
.qr svg { width: 180px; height: 180px; display: block; }

input.narrow { width: 10em; }

.recovery { border-top: 3px solid var(--accent); }
.codes {
  display: grid; gap: var(--s2) var(--s4); margin: var(--s3) 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  list-style: none; padding: 0;
}
.codes li {
  font: var(--f2) ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--r1); padding: var(--s2) var(--s3);
  letter-spacing: .06em; user-select: all;
}

/* A page opened from the home screen has no browser chrome to sit under, so
   it needs the inset the notch and the home indicator would otherwise cover. */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
  .page { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom)); }
}

/* ----------------------------------------------------------------- people */

/* The directory. A card per person, because a person is a bounded object:
   a face, a name, and the two ways to reach them. */
.people-group { margin-bottom: var(--s5); }
.people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s3); align-items: start;
}
.person {
  display: flex; gap: var(--s3); align-items: flex-start; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); box-shadow: var(--shadow); padding: var(--s3) var(--s4);
}
.person.is-me { border-color: var(--accent-edge); }
.person-body { flex: 1; min-width: 0; }
.person-name { font: 600 var(--f3)/1.25 var(--serif); margin: 0; color: var(--ink); }
.person-name a { color: inherit; }
.person-name a:hover { color: var(--accent); }
.person-co { font-size: var(--f1); color: var(--ink-muted); margin-top: var(--s1); }
.person-contact { list-style: none; margin: var(--s2) 0 0; padding: 0; font-size: var(--f1); }
.person-contact li { overflow-wrap: anywhere; line-height: 1.6; }
.person-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.person-tags:not(:has(*)) { display: none; }
.person-meta { font-size: var(--f0); color: var(--ink-faint); margin-top: var(--s2); }

/* A photo where there is one; the initials, on cloth, where there is not. */
.face {
  flex: none; width: 56px; height: 56px; border-radius: var(--round);
  object-fit: cover; background: var(--cloth-soft); color: var(--cloth);
  border: 1px solid var(--cloth-edge);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--f2)/1 var(--sans); letter-spacing: .04em;
}
.face.large { width: 96px; height: 96px; font-size: var(--f4); }

.photo-pick { display: flex; gap: var(--s4); align-items: center; margin-bottom: var(--s4); }
.photo-face { margin: 0; cursor: pointer; }
.photo-controls {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
}
/* The real input stays in the form and in the tab order; the button beside it
   is what people see, and it shows the focus the input has. */
.photo-controls input[type=file] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.photo-controls input[type=file]:focus-visible + label.button {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.photo-controls label.button { margin: 0; color: var(--ink); font-size: var(--f1); }
.photo-controls label.check { flex-basis: 100%; margin: 0; }
.photo-name { font-size: var(--f0); color: var(--ink-muted); overflow-wrap: anywhere; }