/* Texel — the site's stylesheet.
 *
 * Every page loads texel.js, which paints the whole window as a grid of
 * character cells and runs the page from the keyboard: that is the site.
 * This stylesheet draws the same look for a browser with scripts off, from
 * the same authored HTML: one column of monospace cells, a tab bar with the
 * active tab in reverse video, label and value rows, key hints in brackets,
 * a footer of hints with a block cursor, links that take the ▸ cursor on
 * focus, everything reachable by Tab. The two share the palette below;
 * texel.js reads these custom properties for its colours.
 *
 * The data-* contract texel.js reads is kept and styled: [data-texel],
 * [data-row] [data-h], [data-col="1".."12"], [data-border] [data-title],
 * [data-fg], [data-bg], [data-bar], [data-status]. New here: [data-tabs] for
 * the header row, and [data-palette] on <html> to pick one of the app's
 * fixed palettes.
 */

/* ── Palettes ──────────────────────────────────────────────────────────────
 * The default follows the app's "terminal" palette: the accent is the
 * terminal's blue, dim its bright black, errors red, pending yellow, and the
 * background whatever the system prefers. The four named palettes are the
 * same 256-colour indices the app paints with, as hex.
 */
:root {
  --bg: #0b0e14;
  --fg: #c7ccd1;
  --label: #8b94a1;
  --dim: #5b6470;
  --muted: #1a202a;
  --accent: #6f9bff;
  --error: #ff6b6b;
  --pending: #f7e26b;
  --border: #3a4350;
  --font: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono",
    "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --cols: 92ch;
  --row: 1.3rem;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-palette]) {
    --bg: #fafafa;
    --fg: #1e2328;
    --label: #4b5563;
    --dim: #6b7480;
    --muted: #eceff3;
    --accent: #1f5fbf;
    --error: #b3261e;
    --pending: #8a6d00;
    --border: #c7ccd1;
    color-scheme: light;
  }
}
[data-palette="cyan"], [data-palette="magenta"], [data-palette="green"], [data-palette="orange"] {
  --bg: #0b0e14;      /* behind 252 text */
  --fg: #d0d0d0;      /* 252 */
  --label: #767676;   /* 243 */
  --dim: #626262;     /* 241 */
  --muted: #444444;   /* 238 */
  --error: #ff0000;   /* 196 */
  --pending: #767676; /* 243 */
  --border: #444444;
  color-scheme: dark;
}
[data-palette="cyan"]    { --accent: #5fffff; } /* 86 */
[data-palette="magenta"] { --accent: #ff5faf; } /* 205 */
[data-palette="green"]   { --accent: #5fd700; } /* 76 */
[data-palette="orange"]  { --accent: #ffaf00; } /* 214 */

/* ── The screen ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}
body {
  font: 16px/1.3 var(--font);
  font-variant-ligatures: none;
  min-height: 100vh;
}
[data-texel] {
  max-width: var(--cols);
  margin: 0 auto;
  padding: 0 1ch var(--row);
}

/* ── Header: the tab bar ───────────────────────────────────────────────────
 * The first tab is the brand, the active tab is reverse video, the right
 * side holds status in dim, like the app's header row.
 */
[data-tabs] {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  margin: 0 0 var(--row);
  overflow: hidden;
}
[data-tabs] a {
  color: var(--label);
  text-decoration: none;
  padding: 0 1ch;
}
[data-tabs] a:first-child { font-weight: 700; color: var(--fg); }
[data-tabs] a[aria-current="page"],
[data-tabs] a:hover,
[data-tabs] a:focus {
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  outline: none;
}
[data-tabs] [data-status] {
  margin-left: auto;
  color: var(--dim);
}

/* ── Content rows ──────────────────────────────────────────────────────────
 * Body content sits at column 2, like every non-cursor row in the app.
 * Headings are the app's section labels: bold, upper case, no size change.
 */
h1, h2, h3 {
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  margin: var(--row) 0 0 2ch;
  color: var(--fg);
}
h1 { color: var(--accent); }
p {
  margin: 0 0 var(--row) 2ch;
  max-width: 80ch;
}
h1 + p, h2 + p, h3 + p { margin-top: 0; }
[data-fg="dim"], small, .dim { color: var(--dim); }
[data-fg="label"]  { color: var(--label); }
[data-fg="accent"] { color: var(--accent); }
[data-fg="error"]  { color: var(--error); }
[data-fg="cyan"]    { color: #5fffff; }
[data-fg="magenta"] { color: #ff5faf; }
[data-fg="green"]   { color: #5fd700; }
[data-fg="orange"]  { color: #ffaf00; }
[data-fg="red"]     { color: var(--error); }
[data-fg="blue"]    { color: var(--accent); }
[data-bg="muted"]   { background: var(--muted); }

/* label / value rows: <dl><dt>label</dt><dd>value</dd></dl> */
dl {
  display: grid;
  grid-template-columns: 9ch 1fr;
  column-gap: 1ch;
  margin: 0 0 var(--row) 2ch;
}
dt { color: var(--label); white-space: nowrap; }
dd { margin: 0; min-width: 0; }

/* key hints: <kbd>d</kbd> renders as [d] in the accent colour */
kbd {
  font: inherit;
  color: var(--accent);
}
kbd::before { content: "["; }
kbd::after  { content: "]"; }

/* links: accent at rest, reverse video under the cursor or focus */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover, a:focus {
  background: var(--fg);
  color: var(--bg);
  outline: none;
}
a:hover kbd, a:focus kbd { color: var(--bg); }

/* lists: no bullets; the row under the cursor takes ▸ at column 0 */
ul, ol {
  list-style: none;
  margin: 0 0 var(--row);
  padding: 0;
}
li {
  position: relative;
  padding-left: 2ch;
}
li:has(> a:hover)::before,
li:has(> a:focus)::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent);
}

code, pre {
  font: inherit;
  background: var(--muted);
}
code { padding: 0 0.5ch; }
pre {
  margin: 0 0 var(--row) 2ch;
  padding: 0.65rem 1ch;
  overflow: auto;
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--row) 0;
}
blockquote {
  margin: 0 0 var(--row) 2ch;
  padding-left: 1ch;
  border-left: 1px solid var(--accent);
  color: var(--label);
}

/* ── Boxes, rows and columns (the texel.js contract) ──────────────────── */
[data-row] {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2ch;
  align-items: stretch;
}
[data-col] { flex: 1 1 100%; min-width: 0; }
@media (min-width: 60ch) {
  [data-col="1"]  { flex-basis: calc(100% * 1 / 12 - 2ch); }
  [data-col="2"]  { flex-basis: calc(100% * 2 / 12 - 2ch); }
  [data-col="3"]  { flex-basis: calc(100% * 3 / 12 - 2ch); }
  [data-col="4"]  { flex-basis: calc(100% * 4 / 12 - 2ch); }
  [data-col="5"]  { flex-basis: calc(100% * 5 / 12 - 2ch); }
  [data-col="6"]  { flex-basis: calc(100% * 6 / 12 - 2ch); }
  [data-col="7"]  { flex-basis: calc(100% * 7 / 12 - 2ch); }
  [data-col="8"]  { flex-basis: calc(100% * 8 / 12 - 2ch); }
  [data-col="9"]  { flex-basis: calc(100% * 9 / 12 - 2ch); }
  [data-col="10"] { flex-basis: calc(100% * 10 / 12 - 2ch); }
  [data-col="11"] { flex-basis: calc(100% * 11 / 12 - 2ch); }
  [data-col="12"] { flex-basis: 100%; }
}
[data-border] {
  position: relative;
  border: 1px solid var(--border);
  padding: 0.65rem 1ch;
  margin: var(--row) 0;
}
[data-border][data-title]::before {
  content: " " attr(data-title) " ";
  position: absolute;
  top: -0.7rem;
  left: 1ch;
  background: var(--bg);
  color: var(--label);
  font-weight: 700;
}

/* ── Footer: the hint bar ──────────────────────────────────────────────────
 * ` d download  g guides ` with the keys in accent, the labels dim, and the
 * block cursor at the right edge.
 */
[data-bar] {
  display: flex;
  column-gap: 2ch;
  margin-top: calc(2 * var(--row));
  padding-left: 1ch;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
}
[data-bar] a { color: var(--dim); }
[data-bar] a:hover, [data-bar] a:focus { color: var(--bg); }
[data-bar]::after {
  content: "█";
  margin-left: auto;
  color: var(--dim);
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-bar]::after { animation: none; }
}

/* ── Forms, for pages that have them ──────────────────────────────────── */
input, button, select, textarea {
  font: inherit;
  background: var(--muted);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0 1ch;
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--accent); }
button, input[type="submit"] {
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  cursor: pointer;
  border: 0;
}

/* ── texel.js mode, when a page loads it ──────────────────────────────── */
html.texel-on, html.texel-on body { overflow: hidden; }
html.texel-on [data-texel] {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0;
  margin: 0;
}
#texel-screen {
  position: fixed;
  inset: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3; /* one cell is one line of the scriptless page's rhythm */
  font-variant-ligatures: none;
  white-space: pre;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pinch-zoom; /* drags scroll the pane; a pinch still zooms */
}
/* A painted link is a real <a>; its cells carry their own colours. */
#texel-screen a,
#texel-screen a:hover,
#texel-screen a:focus {
  color: inherit;
  background: none;
  text-decoration: none;
  outline: none;
}
.texel-row { white-space: pre; overflow: visible; }
.texel-row .b { font-weight: 700; }
.texel-row .i { font-style: italic; }
.texel-row .u { text-decoration: underline; }
.texel-row .st { text-decoration: line-through; }
/* On paper, the authored document. */
@media print {
  #texel-screen { display: none; }
  html.texel-on, html.texel-on body { overflow: visible; }
  html.texel-on [data-texel] {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    padding: 0 1ch;
  }
}