/* sandscript.run site stylesheet.
 *
 * Star Taker home style (star-taker/docs/design/home-style.md):
 * one IBM Plex Mono voice at one size, two functional colours and their
 * inversion, flat sharp surfaces, a type-derived grid, the Urania chroma
 * shell (top bar, two equal sidebars around one outlined work surface,
 * three-line footer), text over iconography.
 *
 * Project colours: field oklch(0.16 0.02 265), ink oklch(0.97 0.005 265).
 * The code field colour is the programme syntax palette field; code text
 * stays normal ink without token classification.
 */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/IBMPlexMono-Regular.woff2") format("woff2"),
    url("./fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --field: oklch(0.16 0.02 265);
  --ink: oklch(0.97 0.005 265);
  --code-field: oklch(0.351237 0.076218 272.479);
  font-size: 14px;
}

html {
  background: var(--field);
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--field);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

/* Shell: top bar, body, footer. Top bar and footer are three lines tall. */

header.top-bar,
footer.bottom-bar {
  flex: none;
  height: 4.5rem;
  display: flex;
  align-items: center;
}

header.top-bar .slot,
footer.bottom-bar .slot {
  flex: 1 1 0;
  padding: 0 2ch;
  white-space: nowrap;
}

header.top-bar .title {
  flex: none;
  text-transform: uppercase;
  letter-spacing: 0.35ch;
}

header.top-bar .slot.leading { text-align: left; }
header.top-bar .slot.trailing { text-align: right; }
footer.bottom-bar .slot.center { text-align: center; }
footer.bottom-bar .slot.trailing { text-align: right; }

main.shell-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.sidebar {
  flex: 0 0 26ch;
  min-width: 0;
  padding: 1.5rem 2ch;
  overflow-y: auto;
}

.work-surface {
  flex: 1 1 auto;
  min-width: 0;
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  overflow-y: auto;
  padding: 1.5rem 3ch 3rem;
}

/* Text hierarchy through placement and case, never size or weight. */

h1, h2, h3 {
  margin: 3rem 0 1.5rem;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.25ch;
}

h1 { margin-top: 0; }

p, ul, ol, table {
  margin: 0 0 1.5rem;
  max-width: 76ch;
}

ul, ol { padding-left: 4ch; }
li { margin: 0; }

a {
  color: var(--ink);
  text-underline-offset: 0.2em;
}

a:hover, a:focus-visible {
  background: var(--ink);
  color: var(--field);
  text-decoration: none;
  outline: none;
}

nav.chapters ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.chapters a {
  display: block;
  padding: 0 1ch;
  text-decoration: none;
}

nav.chapters a[aria-current="page"] {
  background: var(--ink);
  color: var(--field);
}

/* Code: the programme code field, normal ink, no token colours. */

pre, code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
}

code {
  background: var(--code-field);
  padding: 0 0.5ch;
}

pre {
  margin: 0 0 1.5rem;
  padding: 1.5rem 2ch;
  background: var(--code-field);
  overflow-x: auto;
  max-width: 76ch;
  box-sizing: border-box;
}

pre code { background: none; padding: 0; }

table { border-collapse: collapse; }

th, td {
  padding: 0 2ch 0 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}

th { text-transform: uppercase; letter-spacing: 0.15ch; }

/* Buttons: primary / secondary / tertiary hierarchy. */

button {
  font: inherit;
  line-height: 1.5rem;
  padding: 0.75rem 3ch;
  cursor: pointer;
  border: none;
  background: var(--ink);
  color: var(--field);
}

button.secondary {
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--ink);
}

button.tertiary {
  background: var(--field);
  color: var(--ink);
  border: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

button:hover,
button:focus-visible,
button.secondary:hover,
button.secondary:focus-visible,
button.tertiary:hover,
button.tertiary:focus-visible {
  background: var(--ink);
  color: var(--field);
}

button:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

input[type="checkbox"] {
  appearance: none;
  width: 1.5ch;
  height: 1.5ch;
  margin: 0 1ch 0 0;
  border: 1px solid var(--ink);
  background: var(--field);
  cursor: pointer;
  vertical-align: baseline;
}

input[type="checkbox"]:checked {
  background: var(--ink);
}

input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

/* Narrow viewport: sidebars move into one field-opaque drawer opened by a
 * three-line menu control — the permitted narrow exception to the no-icon
 * rule. The page still does not scroll; the work surface scrolls inside. */

.menu-toggle { display: none; }

@media (max-width: 96ch) {
  .sidebar { display: none; }

  .menu-toggle {
    display: block;
    background: var(--field);
    color: var(--ink);
    border: none;
    padding: 0.75rem 1ch;
  }

  .menu-toggle::before {
    content: "\2261"; /* three-line mark */
  }

  body.drawer-open .sidebar.leading {
    display: block;
    position: fixed;
    top: 4.5rem;
    bottom: 4.5rem;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--field);
  }
}