@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;600;700&display=swap");

/* Shared typography and color for the site. Pages with a theme toggle set
 * [data-theme]; pages without one follow the OS. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --paper:   #faf9f6;
  --raised:  #ffffff;
  --sunken:  #f1efe9;
  --ink:     #24231f;
  --ink-2:   #595750;
  --ink-3:   #74716a;
  --hair:    #d8d5cd;

  --red:     #b34c37;
  --blue:    #315d83;
  --yellow:  #d7ad4a;

  --accent:  var(--blue);
  --on-accent: #ffffff;
  --sel:     #eadcae;

  --display: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:    "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  --bar: 1px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1b18; --raised: #25241f; --sunken: #292824;
    --ink: #f0ede5; --ink-2: #c3bfb5; --ink-3: #aaa59b; --hair: #45423c;
    --red: #db7962; --blue: #94b4d1; --yellow: #e6c475;
    --on-accent: #1c1b18; --sel: #6a5716;
  }
}
[data-theme="dark"] {
  --paper: #1c1b18; --raised: #25241f; --sunken: #292824;
  --ink: #f0ede5; --ink-2: #c3bfb5; --ink-3: #aaa59b; --hair: #45423c;
  --red: #db7962; --blue: #94b4d1; --yellow: #e6c475;
  --on-accent: #1c1b18; --sel: #6a5716;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  margin: 0;
}
h1 { font-size: clamp(36px, 5vw, 50px); line-height: 1.1; }
h2 { font-size: 26px; line-height: 1.22; }
h3 { font-size: 19px; line-height: 1.3; }

code, kbd, pre { font-family: var(--mono); }
code { font-size: 0.86em; background: var(--sunken); padding: 1px 4px; }
pre { background: var(--sunken); padding: 14px 16px; overflow: auto; }
pre code { background: none; padding: 0; }

hr { border: none; border-top: 1px solid var(--hair); margin: 40px 0; }

/* Small labels and the graph mark */
.label {
  font: 13px/1.3 var(--sans);
  color: var(--ink-3);
}

.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* The mark: three nodes on an axis. Every node the renderer draws is a
   rectangle, so the mark is three rectangles — the primaries and the widths do
   the distinguishing, the way a real diagram's labels do. */
.mark { display: block; height: 1em; width: auto; overflow: visible; color: var(--ink); }
.mark .axis  { stroke: currentColor; stroke-width: 2; }
.mark .n-blue   { fill: var(--blue); }
.mark .n-red    { fill: var(--red); }
.mark .n-yellow { fill: var(--yellow); }

/* Wordmark: the mark plus the name, used in every masthead. */
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  color: var(--ink); font-family: var(--display); text-decoration: none;
  font-size: 18px; font-weight: 600;
}
.wordmark:hover { text-decoration: none; }
.wordmark .mark { font-size: 20px; }

/* Navigation */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font: 14px/1.4 var(--sans); }
.site-nav a { white-space: nowrap; color: var(--ink-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.masthead { border-bottom: 1px solid var(--hair); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  max-width: var(--page-w, 880px); margin: 0 auto; padding: 20px 28px;
}
.masthead nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.masthead nav a {
  font: 14px/1.4 var(--sans); color: var(--ink-2); text-decoration: none;
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 620px) {
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; }
}

/* Controls used by example and editor pages */
.btn {
  font: 14px/1.3 var(--sans);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 0;
}
.btn:hover { background: var(--sunken); text-decoration: none; }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn[disabled]:hover { background: var(--paper); color: var(--ink); }
.btn-solid { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Keep embedded diagram frames consistent with the site. The library's
   standalone styles are unchanged. */
.spytial-gdl-device { border: 1px solid var(--hair) !important; border-radius: 0 !important; }
.spytial-gdl-device button,
.spytial-gdl-device input,
.spytial-gdl-device select,
.spytial-gdl-device textarea { border-radius: 0 !important; }
.spytial-gdl-rendered { border-radius: 0 !important; }

/* Example links */
.tiles { list-style: none; margin: 0; padding: 0; }
.tiles > li { border-bottom: 1px solid var(--hair); }
.tiles > li > a {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline;
  gap: 0 20px; padding: 20px 4px; color: var(--ink);
}
.tiles > li > a:hover { text-decoration: none; background: var(--sunken); }
.tiles .tile-num {
  font: 13px/1 var(--sans); color: var(--ink-3);
  align-self: center;
}
.tiles .tile-name { font-family: var(--display); font-size: 22px; }
.tiles .tile-file { font: 11px/1 var(--mono); color: var(--ink-3); margin-left: 10px; }
.tiles .tile-desc { color: var(--ink-2); font-size: 15px; margin: 5px 0 0; max-width: 60ch; }
.tiles .tile-arrow { font-family: var(--display); font-size: 22px; align-self: center; }

@media (max-width: 620px) {
  .tiles > li > a { grid-template-columns: 34px 1fr; gap: 0 12px; }
  .tiles .tile-arrow { display: none; }
  .tiles .tile-name { font-size: 20px; }
}