:root {
  --header-bg: #1f2937;
  --panel: #374151;
  --panel-hover: #4b5563;
  --link: #93c5fd;
  --divider: #9ba7b9;
  --muted: #9ca3af;
  --label: #6b7280;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --surface: #fff;
  --surface-alt: #f9fafb;
  --page-bg: #f3f4f6;
  --code-bg: #111827;
  --code-fg: #e5e7eb;
  --text-soft: #cbd5e1;
  /* Logo row, description row, control row, two row gaps and padding, plus a
     little slack. In rem, so a larger default font size grows it with
     everything else. */
  --header-height: 8rem;
}

html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }

#header {
  display: flex; flex-direction: column; gap: 0.3rem; flex-shrink: 0;
  box-sizing: border-box; height: var(--header-height); overflow: hidden;
  padding: 0.6rem 1rem; background: var(--header-bg); color: white;
}
#header a { color: var(--link); text-decoration: none; font-size: 0.9rem; }
#header h1 { font-size: 1rem; margin: 0; }
#header a[aria-current="page"] { color: white; font-weight: 600; }
#header .divider { width: 1px; height: 20px; background: var(--divider); }
#header label { font-size: 0.85rem; }
#header input[type="date"],
#header input[type="text"],
#header button { font-size: 0.9rem; padding: 0.3rem 0.5rem; }

/* First header row: brand and the other pages on the left, extract badge on
   the right. */
.header-nav {
  display: flex; align-items: center; gap: 0.75rem;
  min-width: 0; flex: 1 1 auto;
}
#header .brand { display: flex; align-items: center; gap: 0.5rem; color: white; font-size: 1rem; }
#header .brand:hover { opacity: 0.85; }

/* Extract name and last update date and time, filled from manifest.json; collapsed
   until it has something to show. It is the one row-1 item allowed to
   shrink, and its title carries the full text. */
.extract-info {
  flex: 0 1 auto; min-width: 0; margin-left: auto;
  font-size: 0.85rem; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.extract-info:empty { display: none; }

/* Second header row: what the page is, its own options, then the status.
   The sentence truncates; the guide link after it never does. */
.header-row { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; min-height: 0; }
.header-row:last-child { flex: 1 1 auto; }
.page-desc { display: flex; align-items: center; gap: 0.4rem; flex: 0 1 auto; min-width: 0; margin: 0; font-size: 0.85rem; color: var(--text-soft); }
.page-desc-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-desc a { color: var(--link); text-decoration: none; white-space: nowrap; }
.page-desc a:hover { text-decoration: underline; }
.page-options { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
#status {
  flex: 0 1 auto; margin-left: auto; min-width: 0; text-align: right;
  font-size: 0.85rem; opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}