/* The Peptide Compounding Ledger. "Legal ledger almanac" skin.
   System fonts only (CSP-safe, no external requests). Light + dark aware. */

:root {
  --paper: #f6f2e9;
  --paper-2: #efe9db;
  --ink: #1a1712;
  --ink-soft: #4b4436;
  --rule: #d8cfb8;
  --rule-strong: #b9ad8e;
  --accent: #6d2b2b;          /* oxblood masthead */
  --link: #2a3b57;            /* ink blue */
  --st-removed: #3a5a40;      /* muted forest */
  --st-review: #8a6d1f;       /* ochre */
  --st-restricted: #8c3a2b;   /* clay */
  --st-approved: #2f4858;     /* ink blue-gray */
  --st-unknown: #5c5c5c;      /* slate */
  --chip-bg: rgba(0,0,0,0.04);
  --provisional: #7a6f57;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1a15; --paper-2: #23201a; --ink: #e8e0cf; --ink-soft: #b3a98f;
    --rule: #3a3428; --rule-strong: #4a4234; --accent: #c98a6a; --link: #8fb0d6;
    --st-removed: #7fae86; --st-review: #d0ab55; --st-restricted: #d78a76;
    --st-approved: #8fb0c4; --st-unknown: #9a9385; --chip-bg: rgba(255,255,255,0.05);
    --provisional: #9a8f74;
  }
}
:root[data-theme="light"] {
  --paper: #f6f2e9; --paper-2: #efe9db; --ink: #1a1712; --ink-soft: #4b4436;
  --rule: #d8cfb8; --rule-strong: #b9ad8e; --accent: #6d2b2b; --link: #2a3b57;
  --st-removed: #3a5a40; --st-review: #8a6d1f; --st-restricted: #8c3a2b;
  --st-approved: #2f4858; --st-unknown: #5c5c5c; --chip-bg: rgba(0,0,0,0.04);
  --provisional: #7a6f57;
}
:root[data-theme="dark"] {
  --paper: #1c1a15; --paper-2: #23201a; --ink: #e8e0cf; --ink-soft: #b3a98f;
  --rule: #3a3428; --rule-strong: #4a4234; --accent: #c98a6a; --link: #8fb0d6;
  --st-removed: #7fae86; --st-review: #d0ab55; --st-restricted: #d78a76;
  --st-approved: #8fb0c4; --st-unknown: #9a9385; --chip-bg: rgba(255,255,255,0.05);
  --provisional: #9a8f74;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 60rem; margin: 0 auto; padding: 1.25rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Masthead */
.masthead { border-bottom: 3px double var(--rule-strong); padding-bottom: 0.75rem; margin-bottom: 0.5rem; }
.masthead-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; }
.title { font-family: var(--serif); font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.01em; margin: 0.4rem 0 0.15rem; color: var(--ink); }
.title .rx { color: var(--accent); }
.subtitle { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin: 0; font-size: 1rem; }
.masthead-rule { height: 1px; background: var(--rule-strong); margin-top: 0.6rem; }

/* Countdown / notice band */
.band { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; margin: 0.9rem 0 0.4rem; font-size: 0.85rem; }
.band .pcac { font-family: var(--mono); color: var(--accent); font-weight: 600; }
.disclaimer-band { font-size: 0.78rem; color: var(--ink-soft); border-left: 3px solid var(--rule-strong); padding: 0.4rem 0.7rem; margin: 0.75rem 0 1.25rem; background: var(--paper-2); }

/* Controls */
.controls { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0 1rem; }
.search { flex: 1 1 12rem; font-family: var(--mono); font-size: 0.85rem; padding: 0.45rem 0.6rem; background: var(--paper); border: 1px solid var(--rule-strong); color: var(--ink); border-radius: 2px; }
.toggle { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-soft); padding: 0.4rem 0.7rem; border-radius: 2px; cursor: pointer; }
.toggle:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Nav */
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin: 0.6rem 0 0.2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule-strong); font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.nav a { color: var(--ink-soft); padding: 0.2rem 0; }
.nav a:hover { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); }
.brand-link { color: var(--ink-soft); }

/* Ordered steps (verify page) */
.steps { margin: 0.6rem 0; padding-left: 1.3rem; max-width: 48rem; }
.steps li { padding: 0.4rem 0; border-bottom: 1px dotted var(--rule); font-size: 0.96rem; }
.print-btn { margin: 0.3rem 0 0.6rem; }

/* Lead + primer (trust guide copy) */
.lead { font-size: 1.02rem; color: var(--ink); margin: 0.4rem 0 0.8rem; max-width: 46rem; }
.primer { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.primer li { position: relative; padding: 0.5rem 0 0.5rem 1.4rem; border-bottom: 1px dotted var(--rule); font-size: 0.95rem; max-width: 48rem; }
.primer li:before { content: "\203A"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Section */
.section { margin: 1.6rem 0 0; }
.section-head { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.3rem; margin-bottom: 0.2rem; }

/* Rows (ledger) */
.row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.row:hover { background: var(--paper-2); }
.c-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.c-aliases { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; }
.c-status { font-size: 0.9rem; color: var(--ink-soft); grid-column: 1 / -1; }
.c-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; margin-top: 0.15rem; font-size: 0.78rem; }
.right { text-align: right; }

/* Status chip */
.chip { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.14rem 0.45rem; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; }
.chip.st-removed { color: var(--st-removed); }
.chip.st-review { color: var(--st-review); }
.chip.st-restricted { color: var(--st-restricted); }
.chip.st-approved { color: var(--st-approved); }
.chip.st-unknown { color: var(--st-unknown); }

.pcac-tag { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.disputed { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--st-restricted); border: 1px dashed var(--st-restricted); padding: 0.1rem 0.35rem; border-radius: 2px; text-transform: uppercase; }
.provisional-tag { font-family: var(--mono); font-size: 0.64rem; color: var(--provisional); text-transform: uppercase; letter-spacing: 0.05em; }
.row[data-provisional="true"] .c-name { color: var(--ink-soft); }

.sources { font-size: 0.76rem; color: var(--ink-soft); }
.sources sup { font-family: var(--mono); }
.components { font-size: 0.78rem; color: var(--ink-soft); }

/* Key dates timeline */
.timeline { margin: 0.5rem 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px dotted var(--rule); font-size: 0.86rem; }
.timeline .d { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); }

/* Signup */
.signup { border: 1px solid var(--rule-strong); background: var(--paper-2); padding: 1rem; border-radius: 2px; margin: 1.5rem 0; }
.signup h3 { font-family: var(--serif); margin: 0 0 0.3rem; }
.signup form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.signup input[type=email] { flex: 1 1 14rem; font-family: var(--mono); font-size: 0.85rem; padding: 0.5rem 0.6rem; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: 2px; }
.signup button { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--accent); color: #f6f2e9; border: none; padding: 0.5rem 1rem; border-radius: 2px; cursor: pointer; }
.signup button:hover { opacity: 0.9; }
.signup .note { font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.4rem; }

footer { margin: 2.5rem 0 1.5rem; padding-top: 1rem; border-top: 3px double var(--rule-strong); font-size: 0.78rem; color: var(--ink-soft); }
footer .legal { margin-bottom: 0.6rem; }
.hidden { display: none !important; }

@media (max-width: 34rem) {
  .row { grid-template-columns: 1fr; }
  .right { text-align: left; }
  .timeline li { grid-template-columns: 5rem 1fr; }
}