/* One stylesheet, no framework. Readable on a phone in a client's office and
   on a laptop. Light and dark both follow the reader's own setting. */

:root {
  color-scheme: light dark;
  --ink: #1a1a1a;
  --muted: #5b5b5b;
  --rule: #d8d5cf;
  --paper: #fbfaf8;
  --card: #ffffff;
  --link: #1a4d8f;
  --warn-bg: #fff6e5;
  --warn-edge: #d99a2b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e6e3; --muted: #a3a09b; --rule: #3a3835;
    --paper: #171614; --card: #1f1e1c; --link: #8ab4f8;
    --warn-bg: #2c2415; --warn-edge: #b8862a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
a { color: var(--link); }
code { font-size: .9em; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: .1em .35em; border-radius: 3px; }

/* header and nav */
header {
  border-bottom: 1px solid var(--rule);
  padding: 1rem 1.25rem;
  background: var(--card);
}
.wordmark { font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
header nav { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; }
header nav a { text-decoration: none; color: var(--muted); }
header nav a:hover { color: var(--link); text-decoration: underline; }
header nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

main { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 .75rem; letter-spacing: -.015em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
.lede { font-size: 1.05rem; color: var(--muted); }
.crumb { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* flags */
.flag {
  border-left: 4px solid var(--rule);
  padding: .6rem .9rem;
  background: var(--card);
  border-radius: 0 4px 4px 0;
  font-size: .95rem;
}
.flag-current { border-left-color: #2e7d4f; }
.flag-stale, .flag-under { border-left-color: var(--warn-edge); }
.flag-archived, .flag-unconfirmed { border-left-color: #b3492e; }

.legend { margin: 1rem 0; }
.legend dt { font-weight: 600; margin-top: .6rem; }
.legend dd { margin: 0 0 0 0; color: var(--muted); font-size: .95rem; }

.tag { font-size: .72rem; color: var(--muted); margin-left: .5rem; white-space: nowrap; }
.tag-current { display: none; }   /* the common case needs no label */

/* lists of anchors */
ul.anchors { list-style: none; padding: 0; }
ul.anchors li { padding: .35rem 0; border-bottom: 1px solid var(--rule); }
ul.anchors a { text-decoration: none; }
ul.anchors a:hover { text-decoration: underline; }

ul.sources li, ul.effective li { margin-bottom: .5rem; }
.authority, .role { color: var(--muted); font-size: .88rem; }

dl.meta dt { font-weight: 600; font-size: .85rem; color: var(--muted); margin-top: .5rem; }
dl.meta dd { margin: 0; }

/* warnings and banners */
.warn, .banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn-edge);
  border-radius: 5px;
  padding: .8rem 1rem;
  font-size: .95rem;
}
.banner p { margin: 0 0 .6rem; }
.banner p:last-child { margin-bottom: 0; }
.banner .status { font-size: .85rem; color: var(--muted); }
.note, .pending { color: var(--muted); font-size: .95rem; }

.caveats { margin: 1rem 0; border: 1px solid var(--rule); border-radius: 5px; padding: .6rem .9rem; background: var(--card); }
.caveats summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.caveats ul { font-size: .9rem; }

.entry { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.5rem; }
.entry h2 { margin-top: 0; }

/* the mirrored CRA text — narrower measure, plainer */
.mirror { font-size: .95rem; }
.mirror table, table { border-collapse: collapse; width: 100%; font-size: .9rem; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--rule); padding: .4rem .6rem; text-align: left; vertical-align: top; }

.changelog { font-size: .9rem; }

footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 1.25rem 3rem;
  font-size: .82rem;
  color: var(--muted);
  background: var(--card);
}
footer p { max-width: 46rem; margin: 0 auto .6rem; }
footer a { color: var(--link); }

/* Pagefind's own UI, nudged to match */
#search { margin: 1.5rem 0; }
:root { --pagefind-ui-scale: .8; --pagefind-ui-primary: var(--ink); --pagefind-ui-text: var(--ink);
        --pagefind-ui-background: var(--card); --pagefind-ui-border: var(--rule); }