/* The multiverse family look, verbatim where it can be: system fonts, one
   accent, dark mode via media query, the same header/nav/footer bones as
   nixmultiverse.com and omniflake. grail adds the query box, its token
   colors, the suggestion dropdown and the plan graph. */
:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6a6a6a;
  --line: #e0e0e0;
  --accent: #4f6bed;
  --code-bg: #f4f4f4;
  /* token colors for the query highlighter; --tk-coexist is the ^ sigil */
  --tk-version: #1f7a4d;
  --tk-coexist: #c25218;
  --tk-error: #c0342b;
  /* the plan graph, matching the blog figures */
  --plan-node: #f7f6f2;
  --plan-border: #b5b1a9;
  --plan-accent: #cf5d28;
  --plan-accent-fill: #fdeee6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d;
    --fg: #e6e6e6;
    --muted: #9a9a9a;
    --line: #33363d;
    --accent: #8fa3ff;
    --code-bg: #22252c;
    --tk-version: #58c08a;
    --tk-coexist: #e08a45;
    --tk-error: #ef7268;
    --plan-node: #22252c;
    --plan-border: #4a4e57;
    --plan-accent: #e08a45;
    --plan-accent-fill: #33261c;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  padding: 1rem;
  max-width: 60rem;
  background: var(--bg);
  color: var(--fg);
  font:
    15px/1.5 system-ui,
    sans-serif;
}
h1 {
  font-size: 1.3rem;
  margin: 0.2rem 0;
}
h1 a {
  color: inherit;
  text-decoration: none;
}
h2 {
  font-size: 1.1rem;
  margin: 1.4rem 0 0.3rem;
}
.muted {
  color: var(--muted);
}
a {
  color: var(--accent);
}
code,
pre {
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  background: var(--code-bg);
  border-radius: 4px;
}
code {
  padding: 0.05rem 0.3rem;
}

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin: 0.2rem 0 0.6rem;
}
nav.site {
  margin: 0;
  border: 0;
  display: flex;
  gap: 1rem;
  font-size: 14px;
}
nav.site a {
  color: var(--accent);
  text-decoration: none;
}
nav.site a:hover {
  text-decoration: underline;
}

.tagline {
  margin: 0.4rem 0 1rem;
}

/* ---------- the query box ----------
   An input with transparent text over a <pre> mirror that carries the
   colored tokens; both share font, size and padding exactly, so the caret
   rides on top of the highlighted text. */
.query-wrap {
  display: flex;
  gap: 0.5rem;
}
.query-box {
  position: relative;
  flex: 1;
}
.query-box pre,
.query-box input {
  font: 15px/1.4 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  padding: 0.55rem 0.7rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
}
.query-box pre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: pre;
  background: var(--code-bg);
  border-color: transparent;
  pointer-events: none;
}
.query-box input {
  position: relative;
  background: transparent;
  color: transparent;
  caret-color: var(--fg);
}
.query-box input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.query-box input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
/* token colors */
.tk-attr {
  color: var(--fg);
}
.tk-at,
.tk-cmp,
.tk-dots,
.tk-comma,
.tk-pipes {
  color: var(--accent);
}
.tk-version {
  color: var(--tk-version);
}
.tk-caret {
  color: var(--tk-coexist);
  font-weight: 700;
}
.tk-error {
  color: var(--tk-error);
  text-decoration: underline wavy;
}

button#solve {
  font: inherit;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
}

/* ---------- autocomplete ---------- */
#suggest,
#one-suggest {
  position: absolute;
  z-index: 10;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.2rem;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  max-height: 16rem;
  overflow-y: auto;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 14px;
}
#suggest li,
#one-suggest li {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
#suggest li:hover,
#suggest li.selected,
#one-suggest li:hover,
#one-suggest li.selected {
  background: var(--code-bg);
}

/* ---------- examples ---------- */
.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  font-size: 14px;
}
.examples .ex-size {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.examples a {
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.examples a:hover {
  border-bottom-style: solid;
}

/* ---------- results ---------- */
.plan-text {
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  font-size: 14px;
}
.plan-text.unsat {
  border-left: 3px solid var(--tk-coexist);
}
.error {
  color: var(--tk-error);
}
.plan-graph {
  margin: 0.8rem 0;
  overflow-x: auto;
}
.plan-graph svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}
svg.plan .pin rect {
  fill: var(--plan-node);
  stroke: var(--plan-border);
}
svg.plan .rev rect {
  fill: var(--plan-accent-fill);
  stroke: var(--plan-accent);
}
svg.plan text {
  fill: var(--fg);
}
svg.plan .edge {
  stroke: var(--muted);
  fill: none;
}
svg.plan .edge.arrow {
  fill: var(--muted);
}
details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  margin: 0.4rem 0;
}

/* ---------- help table ---------- */
.help table {
  border-collapse: collapse;
  font-size: 14px;
}
.help td {
  padding: 0.25rem 0.9rem 0.25rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* ---------- footer, the family signature ---------- */
footer {
  margin-top: 2rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  text-align: center;
}
/* A store path is a single 68-character token — broken across lines it is
   unreadable and awkward to select. Hold it on one line and let the font
   shrink instead. */
#store {
  margin-top: 0.3rem;
}
#store code {
  font-size: min(12px, 2.1vw);
  white-space: nowrap;
  background: none;
  padding: 0;
}

/* ---------- the --one box ---------- */
/* the wrapper anchors the box's own autocomplete dropdown */
.one-box {
  position: relative;
  display: inline-block;
}
label.opt {
  display: block;
  margin: 0.4rem 0 0;
  font-size: 14px;
  cursor: pointer;
}
label.opt input {
  accent-color: var(--accent);
  margin-right: 0.3rem;
}
svg.plan .lib rect {
  fill: var(--code-bg);
  stroke: var(--line);
  stroke-dasharray: 4 3;
}

/* ---------- links into the multiverse ----------
   Pins, revisions and eras in the plan link to their nixmultiverse.com
   pages. Subdued on purpose: they keep the text color and wear a dotted
   muted underline that turns solid on hover. */
.plan-text a {
  color: inherit;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
}
.plan-text a:hover {
  text-decoration: underline solid var(--accent);
}
/* graph nodes are already button-shaped, so no underline there; hover
   answers with the accent stroke */
svg.plan a {
  cursor: pointer;
}
svg.plan a:hover rect {
  stroke: var(--accent);
}
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
}
label.opt input[type="text"] {
  font: 13px ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  width: 11rem;
}