/* ============================================================
   Aurelius — global stylesheet
   Direction: "Lamp". A reading surface for one reader, set
   entirely in IBM Plex Sans, organised by rules and numbers
   rather than chrome. Night is the room it is usually read in;
   day is the same room with the curtains open.

   Drops into site/src/styles/global.css.
   Class names match the Astro templates — see markup-changes.md
   for the three places markup has to move.
   ============================================================ */

/* ---- 1. Fonts ------------------------------------------------
   IBM Plex Sans 400 / 500 (+ 400 italic) and IBM Plex Mono 400 / 500.

   Self-hosted through Fontsource, imported in src/layouts/Base.astro
   so Astro fingerprints and bundles the woff2 files itself. The
   design's prototype loaded these from Google Fonts; that is
   deliberately not carried over, because this site sits behind auth
   and a CDN link would report every note opened to a third party.

   'IBM Plex Sans SC' is still named in --font-sans below as an
   optional second family, so a parenthesised Chinese term does not
   drop to a system face mid-sentence. It is not installed: the CJK
   face is megabytes for occasional use, and the stack degrades
   cleanly without it.
   ------------------------------------------------------------- */

/* ---- 2. Tokens ---------------------------------------------- */
:root {
  /* type */
  --font-sans: 'IBM Plex Sans', 'IBM Plex Sans SC', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-h1:     2.375rem;  /* 38px */
  --size-h3:     1.0625rem; /* 17px */
  --size-lede:   1.1875rem; /* 19px */
  --size-body:   1.125rem;  /* 18px */
  --size-small:  0.9063rem; /* 14.5px — tables */
  --size-meta:   0.8438rem; /* 13.5px — citations, row details */
  --size-h2:     0.9375rem; /* 15px */
  --size-micro:  0.6875rem; /* 11px — badge, section numerals, th */

  --leading-body: 1.74;
  --leading-tight: 1.16;
  --measure: 68ch;

  /* space — 0.25rem base */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3.25rem;  --space-9: 4rem;
  --space-10: 5.5rem;

  /* radius — zero everywhere. Nothing here is a control. */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;

  /* colour — day band (bone) */
  --color-bg:            #fcfbf7;
  --color-surface:       #f4efe3;
  --color-heading:       #131210;
  --color-text:          #1d1b17;
  --color-muted:         #5b564c;
  --color-faint:         #7f786c;
  --color-rule:          #e4dfd2;
  --color-rule-strong:   #d3cbb7;
  --color-accent:        #8a5715;
  --color-accent-quiet:  #b0a898;
  --color-panel-border:  #e0d8c6;
  --color-badge-text:    #fcfbf7;
  --color-selection:     rgba(138, 87, 21, 0.14);
  color-scheme: light dark;
}

/* ---- 3. Night band -----------------------------------------
   Same tokens, different values. Nothing below this line in the
   sheet knows which band it is in. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #15161a;
    --color-surface:      #1c1e23;
    --color-heading:      #f2efe9;
    --color-text:         #e8e5df;
    --color-muted:        #a5a099;
    --color-faint:        #807b73;
    --color-rule:         #2c2f36;
    --color-rule-strong:  #3a3f48;
    --color-accent:       #d9a961;
    --color-accent-quiet: #5e594f;
    --color-panel-border: #33373f;
    --color-badge-text:   #15161a;
    --color-selection:    rgba(217, 169, 97, 0.18);
  }
}

/* ---- 4. Base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* constraint 3: the body never scrolls sideways */
}

::selection { background: var(--color-selection); }

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

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- 5. Page frame ------------------------------------------ */
.shell {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-bottom: var(--space-10);
}

/* ---- 6. Masthead ------------------------------------------- */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 2px solid var(--color-rule);
}

.wordmark {
  font-size: var(--size-h2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-heading);
  text-decoration: none;
}
.wordmark:hover { color: var(--color-accent); }

.masthead nav {
  display: flex;
  gap: 2.6ch;
  font-size: 0.875rem;
  line-height: 1;
}
.masthead nav a { color: var(--color-faint); text-decoration: none; }
.masthead nav a:hover,
.masthead nav a[aria-current='page'] { color: var(--color-accent); }

/* ---- 7. Page intro ----------------------------------------- */
h1 {
  font-size: var(--size-h1);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.022em;
  color: var(--color-heading);
  margin: var(--space-8) 0 var(--space-3);
  text-wrap: balance;
}

.lede {
  font-size: var(--size-lede);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-9);
  text-wrap: pretty;
}

/* ---- 8. Kicker line ---------------------------------------- */
.meta { font-size: var(--size-meta); color: var(--color-faint); }

.kicker {
  display: flex;
  align-items: center;
  gap: 1.6ch;
  margin: var(--space-8) 0 var(--space-4);
  font-variant-numeric: tabular-nums;
}
.kicker + h1 { margin-top: 0; }

.badge {
  font-size: var(--size-micro);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-badge-text);
  background: var(--color-accent);
  padding: 0.45em 0.8em;
}

/* ---- 9. Library group + topic list ------------------------- */
.library { margin: 0 0 var(--space-8); }

.library > h2 {
  display: flex;
  align-items: baseline;
  gap: 1.4ch;
  font-size: var(--size-h2);
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
}

.topic-list { list-style: none; margin: 0; padding: 0; }

.topic-list li {
  display: flex;
  align-items: baseline;
  gap: 2ch;
  padding: 0.72em 0;
  border-bottom: 1px solid var(--color-rule);
}
.topic-list li:last-child { border-bottom: none; }

.topic-list li > a {
  flex: 1 1 auto;
  color: var(--color-text);
  text-decoration: none;
  text-wrap: pretty;
}
.topic-list li > a:hover { color: var(--color-accent); }

.topic-list .detail {
  flex: 0 0 auto;
  font-size: var(--size-meta);
  color: var(--color-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 10. Long-form prose ----------------------------------
   Bare markdown output. No per-element classes available. */
.prose { counter-reset: sec; }

.prose > h1 { margin-top: var(--space-9); }

.prose h2 {
  counter-increment: sec;
  display: flex;
  align-items: baseline;
  gap: 1.4ch;
  font-size: var(--size-h2);
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--color-heading);
  margin: var(--space-8) 0 var(--space-4);
}
.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  transform: translateY(-0.15em);
}

.prose h3 {
  font-size: var(--size-h3);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-heading);
  margin: var(--space-6) 0 var(--space-2);
}

.prose p { margin: 0 0 1.18em; text-wrap: pretty; }

.prose ul,
.prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.prose li { margin: 0 0 0.6em; }
.prose li::marker { color: var(--color-accent); }
.prose li > ul,
.prose li > ol { margin-top: 0.6em; }

/* the italic evidence rating that closes a Protocols item */
.prose li > em:last-child {
  color: var(--color-muted);
  font-size: 0.92em;
}

.prose blockquote {
  margin: 1.7em 0;
  padding: 1.15em 1.6em;
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  color: var(--color-muted);
  font-size: var(--size-h3);
  line-height: 1.64;
}
.prose blockquote > :last-child { margin-bottom: 0; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--color-surface);
  padding: 0.14em 0.38em;
}

.prose pre {
  background: var(--color-surface);
  border: 1px solid var(--color-panel-border);
  padding: var(--space-4);
  overflow-x: auto;
  font-size: var(--size-meta);
  line-height: 1.6;
}
.prose pre code { background: none; padding: 0; font-size: 1em; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-8) 0;
}

.prose strong { font-weight: 500; color: var(--color-heading); }

/* ---- 11. Inline source citations ---------------------------
   Long, ugly and frequent. They keep full weight in the markup
   for search and copy, and recede optically: metadata colour,
   one step down in size, brackets a further step down again,
   and never allowed to break across a line. */
.cite {
  font-size: var(--size-meta);
  color: var(--color-faint);
  white-space: nowrap;
}
.cite::before { content: '['; color: var(--color-accent-quiet); }
.cite::after  { content: ']'; color: var(--color-accent-quiet); }
a.cite { text-decoration: none; }
a.cite:hover { color: var(--color-accent); }

/* ---- 12. Caveats & contradictions -------------------------
   The one section that carries doubt. Inset tint by day,
   raised panel by night — the same token either way.
   Needs the sectionize wrapper; see markup-changes.md #1. */
.caveat {
  background: var(--color-surface);
  border: 1px solid var(--color-panel-border);
  margin: var(--space-7) calc(var(--space-5) * -1) var(--space-6);
  padding: var(--space-1) var(--space-5) var(--space-5);
}
.caveat h2 { color: var(--color-accent); }
.caveat h2::before { color: var(--color-accent); }
.caveat > :last-child { margin-bottom: 0; }

/* ---- 13. Wide table — the finance stance log --------------
   Scrolls inside its own container. The page never does. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 1.6em;
  overscroll-behavior-x: contain;
}
@media (min-width: 60rem) {
  /* let the widest element on the site use the outer padding */
  .table-scroll {
    margin-inline: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
  }
}

.prose table {
  border-collapse: collapse;
  /* A floor, not a fit. Below 40rem the container scrolls at a legible
     column width rather than squeezing every cell to four lines. */
  min-width: max(100%, 40rem);
  font-size: var(--size-small);
  line-height: 1.5;
}
/* the two prose columns get the slack; the short ones stay short */
.prose th:nth-child(2), .prose td:nth-child(2),
.prose th:last-child,  .prose td:last-child { min-width: 13ch; }
.prose th:nth-child(3), .prose td:nth-child(3) { white-space: nowrap; }
.prose th {
  text-align: left;
  font-size: var(--size-micro);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 0 2ch 0.65em 0;
  border-bottom: 1px solid var(--color-rule);
  white-space: nowrap;
}
.prose td {
  padding: 0.85em 2ch 0.85em 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose td:first-child {
  font-variant-numeric: tabular-nums;
  color: var(--color-faint);
  white-space: nowrap;
}

/* ---- 14. Endmatter ---------------------------------------- */
.endmatter {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

.endmatter h2 {
  display: flex;
  align-items: baseline;
  gap: 1.4ch;
  font-size: var(--size-h2);
  font-weight: 500;
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
}
.endmatter + .endmatter { margin-top: var(--space-7); }

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  line-height: 1.8;
  color: var(--color-faint);
}
.source-list a { color: var(--color-faint); text-decoration: none; }
.source-list a:hover { color: var(--color-accent); }

.note {
  font-size: var(--size-meta);
  line-height: 1.6;
  color: var(--color-faint);
  margin: var(--space-4) 0 0;
  max-width: 56ch;
}

/* ---- 15. Search ------------------------------------------- */
.search {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-9);
  max-width: 56ch;
}
.search input[type="search"] {
  font: inherit;
  font-size: var(--size-lede);
  padding: 0.6em 0.7em;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 0;
}
.search input[type="search"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.search button, .login button {
  justify-self: start;
  font: inherit;
  padding: 0.5em 1.2em;
  color: var(--color-bg);
  background: var(--color-accent);
  border: 0;
  cursor: pointer;
}

.search-fallback {
  font-size: var(--size-meta);
  color: var(--color-faint);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
  max-width: 56ch;
}

/* ---- 16. Phone ------------------------------------------- */
@media (max-width: 34rem) {
  :root {
    --size-h1: 1.875rem;   /* 30px */
    --measure: 100%;
  }
  .shell, .masthead { padding-inline: var(--space-4); }
  .caveat {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
  @media (min-width: 0px) {
    .table-scroll { margin-inline: 0; padding-inline: 0; }
  }
  .topic-list li { flex-wrap: wrap; gap: 0 2ch; }
  .topic-list .detail { flex-basis: 100%; }
}

/* ---- 16. App chrome ---------------------------------------- */
/* Everything below this line is the app's own furniture rather than note
   typography: navigation, the index lists, the assembled-block frames, and
   the version stamp. Sections 1-15 above still describe markdown output only. */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: var(--measure-page, 74ch);
  margin: var(--space-5) auto var(--space-7);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  letter-spacing: 0.02em;
}
.site-nav a { color: var(--color-muted); text-decoration: none; }
.site-nav a:hover { color: var(--color-accent); }
.site-nav a[aria-current="page"] { color: var(--color-heading); }

main { padding: 0 var(--space-4) var(--space-9); }
body.wide .prose { max-width: none; }

ul.index { list-style: none; margin: 0 0 var(--space-7); padding: 0; }
ul.index li { margin: 0 0 0.75em; }
ul.index li em {
  display: block;
  font-style: normal;
  font-size: var(--size-small);
  color: var(--color-muted);
}

dl.meta { display: grid; gap: 0.35em 1.5em; margin: 0 0 var(--space-5); font-size: var(--size-small); }
dl.meta div { display: flex; gap: 0.6em; }
dl.meta dt { color: var(--color-muted); min-width: 6.5em; }
dl.meta dd { margin: 0; color: var(--color-text); }
p.topics { margin: 0 0 var(--space-7); }
p.topics a { text-decoration: none; }

/* The computed half. Framed rather than merged into the prose, because these
   blocks are read out of context and the reader has to be able to see where
   each one came from. */
.computed { max-width: var(--measure, 68ch); margin: var(--space-9) auto 0; }
.block {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-left: 2px solid var(--color-rule);
}
.block figcaption {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--color-muted);
}
.block figcaption a { color: var(--color-heading); }
.block > :last-child { margin-bottom: 0; }

.login { max-width: 34ch; }
.login form, .search { display: grid; gap: var(--space-2); }
.login label, .search label {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--color-muted);
}
.login input {
  font: inherit;
  padding: 0.6em 0.7em;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
}
.error { color: var(--color-accent); font-size: var(--size-small); }

/* ---- 17. Version stamp ------------------------------------- */
/* Fixed to the bottom-left of the viewport on anything wide enough to spare
   the room, and folded back into normal flow on a phone, where a fixed label
   would sit on top of the last line of every page. */
.version {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  opacity: 0.7;
  padding: var(--space-4);
}
@media (min-width: 48rem) {
  .version {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    pointer-events: none;
  }
}