/* Site-wide look, loaded on every page (ours and Datasette's own) through the
   extra_css_urls hook in serve.py. Plain, monospace, paper and ink, dashed
   rules. Widgets consume these tokens rather than defining their own. */

:root {
  --paper: #faf9f5;
  --paper-raised: #f3f2ec;
  --ink: #32332f;
  --ink-strong: #11120f;
  --muted: #72736b;
  --line: #cbc9be;
  --line-bright: #a9a79c;
  --accent: #006fe6;
  --neg: #b4233b;
  --mono: ui-monospace, "Geist Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151513;
    --paper-raised: #1d1d1a;
    --ink: #d8d7cf;
    --ink-strong: #f2f1ea;
    --muted: #8f8e85;
    --line: #3a3a35;
    --line-bright: #55554e;
    --accent: #6ea8ff;
    --neg: #e0667c;
  }
}

/* ---- base, overriding Datasette's app.css ---- */
html { color-scheme: light dark; }
body {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}
a:link, a:visited { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
::selection { color: var(--paper); background: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, .header1, .header2, .header3 { color: var(--ink-strong); font-weight: 600; }
h1, .header1 { font-size: 1.25rem; }
h2, .header2 { font-size: 1.1rem; }
h3, .header3 { font-size: 1rem; }
code, pre { font-family: var(--mono); }
input, select, textarea, button { font-family: var(--mono); }

/* Datasette's header and footer: drop the blue gradient bar */
header.hd, footer.ft {
  background: none;
  color: var(--muted);
  padding: 1rem 1.5rem 0.75rem;
  border-bottom: 1px dashed var(--line);
}
footer.ft { border-bottom: 0; border-top: 1px dashed var(--line); font-size: 0.75rem; }
header.hd a:link, header.hd a:visited, footer.ft a:link, footer.ft a:visited { color: var(--ink); }
header.hd a:hover, footer.ft a:hover { color: var(--accent); }
header.hd .crumbs { font-size: 0.8125rem; }
header.hd .nav-menu summary { color: var(--muted); }
.page-header { border-left: 4px solid var(--line-bright); padding-left: 0.75rem; }
.page-header h1 { font-size: 1.25rem; }
section.content { padding: 0 1.5rem; }

/* Datasette tables */
table.rows-and-columns th { border-bottom: 1px solid var(--ink); background: none; color: var(--ink-strong); }
table.rows-and-columns td { border-bottom: 1px dashed var(--line); }
table.rows-and-columns th a:link, table.rows-and-columns th a:visited { color: var(--ink-strong); }

/* ---- our own pages ---- */
.bx-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em; font-size: 0.8125rem; }
.bx-nav a:link, .bx-nav a:visited { color: var(--ink); }
.bx-nav a:hover { color: var(--accent); text-decoration: none; }
.bx-sep { color: var(--line-bright); }
.bx-here { color: var(--accent); }

.bx-post { max-width: 100ch; margin: 2.5rem 0 3rem; }
.bx-post h1 { margin: 0 0 1rem; color: var(--accent); }
.bx-post p, .bx-post ul, .bx-post ol { margin: 0 0 1rem; }
.bx-post ul, .bx-post ol { padding-left: 1.4em; }
.bx-post ul { list-style: disc; }
.bx-post ol { list-style: decimal; }
.bx-post li { margin-bottom: 0.25rem; }
.bx-post a:link, .bx-post a:visited { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--line-bright); text-underline-offset: 0.25em; }
.bx-post a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.bx-post code { font-size: 0.9em; padding: 0.1em 0.3em; background: var(--paper-raised); }
.bx-post pre { padding: 1rem; border: 1px dashed var(--line); background: var(--paper-raised); overflow-x: auto; }
.bx-post blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--line); color: var(--muted); }
.bx-post table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
.bx-post th, .bx-post td { text-align: left; padding: 0.3rem 0.5rem 0.3rem 0; border-bottom: 1px dashed var(--line); }
.bx-post th { border-bottom: 1px solid var(--ink); font-weight: 600; }

.bx-list { list-style: none; padding: 0; margin: 0; border-top: 1px dashed var(--line); }
.bx-list li { padding: 0.75rem 0; border-bottom: 1px dashed var(--line); }
.bx-list li > a:first-child { display: block; color: var(--ink-strong); font-weight: 600; text-decoration: none; margin-bottom: 0.2rem; }
.bx-list li > a:first-child:hover { color: var(--accent); }
.bx-muted { color: var(--muted); }
a.bx-muted:link, a.bx-muted:visited { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-bright); text-underline-offset: 0.25em; margin-left: 0.5em; }
a.bx-muted:hover { color: var(--accent); }
.bx-widget { margin: 0 0 3rem; }