/* redbooks house style, shared by every page (taken from the map page).
   Pages link this first and keep only their own layout rules. Full-height pages put
   `class="full"` on body: a column of the header over one flex:1 content area, so a
   header that wraps on a phone doesn't push the content off the bottom. */

:root {
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --line: #ddd;
  --line-soft: #eee;
  --accent: #8b1a1a;
  --bg: #fbfaf7;
  --panel: #fff;
  --warn-ink: #7a4b00;
  --warn-bg: #fff5e0;
  --warn-line: #f0d9a0;
  --err-bg: #fdecec;
  --err-line: #f3b7b7;
  --ok: #2a7d2e;
  --peek: 140px;   /* resting height of a bottom sheet; also read by sheet.js */
}

* { box-sizing: border-box; }
/* `hidden` must win over any layout rule: the phone nav's `display: inline-block` once
   unhid the local-only review link on the public site. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 15px/1.45 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* Header: wordmark, nav (current page bold), page controls pushed right. */
header.site {
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
body.full { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
body.full > header.site { flex: 0 0 auto; }
body.full > .fill { flex: 1 1 auto; min-height: 0; }

header.site h1 { font-size: 18px; margin: 0; }
header.site h1 a { color: var(--accent); text-decoration: none; }
header.site nav a { margin-right: 12px; color: var(--muted); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }
header.site nav a.here { color: var(--ink); font-weight: 600; }
header.site .controls {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-left: auto; font-size: 13px;
}

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

h2 { font-size: 16px; margin: 0 0 4px; }
h3.label, aside h3 {
  font-size: 13px; margin: 14px 0 4px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.muted { color: var(--muted); font-size: 13px; }

/* Controls. */
button {
  font: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 5px;
}
button:hover { border-color: var(--muted); }
button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
button.ok { color: #fff; background: var(--ok); border-color: var(--ok); }
button:disabled { opacity: .55; cursor: progress; }
input[type=text], input[type=number], input[type=search], select {
  font: inherit; font-size: 14px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
}

/* Panels, lists, labels. */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
ul.links { list-style: none; padding: 0; margin: 0; }
ul.links li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.pill {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 9px;
  background: var(--line-soft); color: #444; margin-left: 4px; vertical-align: middle;
}

/* Notices. `.warn` carries the source-criticism copy every page shows. */
.warn {
  font-size: 12px; color: var(--warn-ink); background: var(--warn-bg);
  border: 1px solid var(--warn-line); padding: 6px 8px; border-radius: 6px;
}
.err {
  font-size: 13px; color: var(--accent); background: var(--err-bg);
  border: 1px solid var(--err-line); padding: 8px 10px; border-radius: 6px; margin: 10px 0;
}
.note {
  font-size: 13px; color: #1f5d22; background: #eef6ee;
  border: 1px solid #bfe0bf; padding: 8px 10px; border-radius: 6px; margin: 10px 0;
}

/* Side panel that becomes a bottom sheet on a phone (sheet.js drives it). Markup:
   <… class="sheet-host fill"> <content/> <… class="sheet"> <div class="sheet-head">
   <span class="sheet-title"></span></div> <div class="sheet-body"></div> </…> </…>
   On a wide screen the head is hidden and the page lays the sheet out as a column. */
.sheet { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sheet-head { display: none; }
.chrome-toggle { display: none; }

/* Narrow or short: fold the page's secondary controls (`.chrome`) behind a toggle.
   Keyed on height too, because a phone in landscape is wide but only ~390px tall. */
@media (max-width: 720px), (max-height: 560px) {
  .chrome-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  body:not(.chrome-open) .chrome { display: none !important; }
}

/* Narrow: the panel is a sheet over the bottom of its host, dragged by its head between
   peek / half / full (data-snap). position:absolute (not fixed) keeps it off the iOS
   soft keyboard; height is animated rather than transform so the scroller always ends at
   the sheet's edge. The host reserves the peek height, so the content sits above it. */
@media (max-width: 720px) {
  header.site { gap: 6px 14px; padding: 8px 14px; }
  header.site h1 { font-size: 16px; }
  header.site nav a { display: inline-block; padding: 6px 0; }
  button { min-height: 44px; }
  /* 16px, or iOS zooms the whole page when the field takes focus. */
  input[type=text], input[type=number], input[type=search], input:not([type]) { font-size: 16px; }

  .sheet-host { position: relative; padding-bottom: var(--peek); }
  .sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1001; /* above Leaflet */
    height: var(--peek); max-height: 100%; background: var(--panel);
    border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .14);
    transition: height .22s cubic-bezier(.32, .72, 0, 1);
  }
  .sheet[data-snap="half"] { height: 52%; }
  .sheet[data-snap="full"] { height: 92%; }
  .sheet.dragging { transition: none; }
  /* touch-action:none stays on the head: on the sheet it would kill the body's scrolling,
     and on the content it would kill the graph's / map's pinch. */
  .sheet-head {
    display: flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto;
    min-height: 44px; padding: 16px 16px 8px; border-bottom: 1px solid var(--line-soft);
    touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  }
  .sheet-head::before {
    content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: var(--line);
  }
  .sheet-head::after { content: "▾"; color: var(--muted); font-size: 13px; }
  .sheet[data-snap="peek"] .sheet-head::after { content: "▴"; }
  .sheet-title {
    flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sheet-body { overscroll-behavior: contain; }
}