/* Unlabeled design tokens — graph paper theme.
   Light is the default palette; dark is selected, not inverted.
   Import once; style components through these variables only. */

:root {
  color-scheme: light;

  --bg: #F2F7FA;
  --gridline: #D6E5EE;
  --card: #FFFFFF;
  --ink: #22303B;
  --ink2: #5F7282;
  --ink3: #93A4B2;
  --line: #D5E0E8;
  --grid: #EAF0F4;
  --mark: #E8694A;
  --mark-soft: #E8694A2E;
  --tile: #FFFFFF;
  --tile-sel: #FDEDE7;
  --good: #2F9E63;
  --good-bg: #E2F5EA;
  --bad: #D9483F;
  --bad-bg: #FCE6E4;
  --scrim: #22303B99;
  --shadow: 0 6px 18px #22303B14;

  /* type */
  --font: "Nunito", system-ui, sans-serif;
  --fs-title: 26px;
  --fs-h2: 18px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-eyebrow: 11px;
  --fs-tick: 10px;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.06em;

  /* shape and space */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-sheet: 20px;
  --gap: 10px;
  --gutter: 16px;
  --control-h: 46px;
  --grid-cell: 24px;

  /* motion */
  --shake: 350ms;
  --settle: 280ms;
  --rise: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141C24;
    --gridline: #1F2B36;
    --card: #1D2732;
    --ink: #EAF0F5;
    --ink2: #A9B8C5;
    --ink3: #6E8090;
    --line: #2F3D4A;
    --grid: #27333F;
    --mark: #F5906F;
    --mark-soft: #F5906F33;
    --tile: #26323E;
    --tile-sel: #4A3128;
    --good: #6FD39A;
    --good-bg: #1E3A2B;
    --bad: #F28B83;
    --bad-bg: #472925;
    --scrim: #000000AA;
    --shadow: 0 6px 18px #00000040;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141C24;
  --gridline: #1F2B36;
  --card: #1D2732;
  --ink: #EAF0F5;
  --ink2: #A9B8C5;
  --ink3: #6E8090;
  --line: #2F3D4A;
  --grid: #27333F;
  --mark: #F5906F;
  --mark-soft: #F5906F33;
  --tile: #26323E;
  --tile-sel: #4A3128;
  --good: #6FD39A;
  --good-bg: #1E3A2B;
  --bad: #F28B83;
  --bad-bg: #472925;
  --scrim: #000000AA;
  --shadow: 0 6px 18px #00000040;
}

/* Page ground: graph paper */
body {
  margin: 0;
  color: var(--ink);
  font: var(--fs-body)/1.4 var(--font);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}

@media (prefers-reduced-motion: reduce) {
  :root { --shake: 0ms; --settle: 0ms; --rise: 0ms; }
}

/* The chart library's pages (server/library.py, templates/library/). The
   server serves tokens.css first and this file after it as one stylesheet,
   and writes the hashed addresses of the fonts into the url()s below.
   Colors come from the tokens only. The look is the game's (app/src/styles)
   and the prototype's (app/prototypes/library/src/library.css). */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 400 600;
  src: url("/charts/static/Nunito-SemiBold-d29510adc270.ttf") format("truetype");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/charts/static/Nunito-Bold-90c26d39cc0a.ttf") format("truetype");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 800 1000;
  src: url("/charts/static/Nunito-ExtraBold-7aa263c1fce7.ttf") format("truetype");
}

:root {
  --on-mark: #FFFFFF;
  /* The drawings come from render.py in the light palette, so they sit on
     paper of their own in both palettes. */
  --paper: #FFFFFF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

:focus {
  outline: none;
}

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

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink3);
}

/* ---------- Buttons (the game's) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  min-width: 128px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--mark);
  color: var(--on-mark);
  box-shadow: var(--shadow);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-ghost {
  background: var(--card);
  color: var(--ink);
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Page ---------- */

.lib-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100vh;
  padding: max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
    calc(40px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}

.lib-page > * {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  flex: none;
}

.lib-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* ---------- Masthead ---------- */

.lib-mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  min-height: 44px;
}

/* The wordmark: the mark, then the name. The mark's geometry is render.py's
   (MARK_BARS and the rest); tools/tests/test_brand.py keeps them equal. */
.lib-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.lib-mark {
  width: 30px;
  height: 30px;
  flex: none;
}

.lib-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 -8px;
}

.lib-nav a {
  padding: 8px 10px;
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  font-weight: 800;
  text-decoration: none;
  color: var(--ink2);
}

.lib-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
}

/* ---------- Type ---------- */

.lib-h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.lib-h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
}

.lib-copy {
  max-width: 64ch;
  color: var(--ink2);
}

.lib-lead {
  max-width: 64ch;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

/* The drawings' own ground: white in both palettes (see --paper). */
.lib-paper {
  display: block;
  background: var(--paper);
  border-radius: 10px;
  overflow: hidden;
}

.lib-paper img,
.lib-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Hero ---------- */

.lib-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

@media (min-width: 760px) {
  .lib-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 36px;
  }
}

.lib-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.lib-hero-actions {
  margin-top: 6px;
}

.lib-hero-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lib-hero-charts li {
  padding: 6px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

/* ---------- Strip of ways in ---------- */

.lib-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 760px) {
  .lib-strip {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

.lib-strip-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  min-width: 0;
}

.lib-strip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-small);
}

.lib-strip-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.lib-strip-list a {
  text-decoration: none;
  font-weight: 700;
}

.lib-strip-list a:hover {
  text-decoration: underline;
}

.lib-strip-num {
  flex: none;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.lib-strip-foot {
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--ink2);
}

.lib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--tile);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
}

.lib-chip[aria-pressed="true"] {
  border-color: var(--mark);
  background: var(--tile-sel);
}

/* ---------- Wall ---------- */

.lib-wall {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 12px;
}

.lib-wall-head,
.lib-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lib-search input {
  width: 100%;
  max-width: 420px;
  height: 40px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 12px;
}

.lib-tile a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 10px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.lib-tile a:hover {
  outline: 2px solid var(--mark);
}

.lib-tile-title {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.lib-tile-axes {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--ink2);
}

.lib-tile-meta {
  margin-top: auto;
  padding-top: 4px;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink3);
}

.lib-wall-count {
  font-size: var(--fs-small);
}

/* ---------- The owner's sections ---------- */

.lib-prose {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 68ch;
  line-height: 1.55;
}

.lib-prose h2 {
  margin-top: 8px;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
}

.lib-prose h3 {
  font-size: 16px;
  font-weight: 800;
}

.lib-prose ul,
.lib-prose ol {
  padding-left: 1.4em;
}

.lib-prose ul {
  list-style: disc;
}

.lib-prose ol {
  list-style: decimal;
}

.lib-prose blockquote {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--line);
  color: var(--ink2);
}

.lib-prose img {
  max-width: 100%;
  height: auto;
}

/* Another drawing of the chart placed in the prose (server/views.py): on
   its own paper like the chart, drawn wide and narrow like the chart. */
.lib-view {
  width: 100%;
  max-width: 760px;
  margin-block: 10px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.lib-view .lib-figure {
  overflow: hidden;
}

.lib-prose code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.lib-prose pre {
  overflow-x: auto;
}

.lib-prose table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.lib-prose th,
.lib-prose td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* ---------- Chart page ---------- */

.lib-chart-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.lib-crumbs a {
  text-decoration: none;
}

.lib-crumbs a:hover {
  text-decoration: underline;
}

.lib-chart-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  max-width: 760px;
  padding: 12px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.slot {
  width: 100%;
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 2px dashed var(--ink3);
  border-radius: var(--radius-control);
  color: var(--ink3);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
}

.slot-eyebrow {
  flex: none;
  min-width: 26px;
  white-space: nowrap;
}

.slot-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lib-slot[data-state="revealed"] {
  border-style: solid;
  border-color: var(--line);
  color: var(--ink);
}

.lib-figure {
  position: relative;
  touch-action: pan-y;
  background: var(--paper);
  border-radius: 10px;
}

.lib-svg-wide {
  display: none;
}

@media (min-width: 720px) {
  .lib-svg-wide {
    display: block;
  }

  .lib-svg-narrow {
    display: none;
  }
}

.lib-cross {
  stroke: #93A4B2;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.lib-ring {
  fill: none;
  stroke: #22303B;
  stroke-width: 1.5;
}

.lib-tip {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 2px 10px;
  align-items: baseline;
  max-width: 70vw;
  padding: 8px 10px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow);
  font-size: var(--fs-small);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(14px, -50%);
}

.lib-tip[data-side="left"] {
  transform: translate(calc(-100% - 14px), -50%);
}

.lib-tip-label {
  color: var(--ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

.lib-tip strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Reveal: a <details> that works without a script. With one, the labels go
   into the slots and the list under the button is not needed. */
.lib-reveal summary {
  list-style: none;
  width: max-content;
}

.lib-reveal summary::-webkit-details-marker {
  display: none;
}

.lib-reveal[open] summary {
  background: var(--card);
  color: var(--ink);
}

.lib-reveal [data-open],
.lib-reveal[open] [data-closed] {
  display: none;
}

.lib-reveal[open] [data-open] {
  display: inline;
}

.lib-reveal-body {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin-top: 12px;
  font-weight: 700;
}

.lib-reveal-body dt {
  color: var(--ink3);
}

.lib-js .lib-reveal-body {
  display: none;
}

/* The story, the data and the source: closed until opened or revealed. The
   spoiler warning is an icon beside the control with a tip on hover or
   focus. */
.lib-spoiler > summary {
  cursor: pointer;
  font-weight: 800;
  width: max-content;
  max-width: 100%;
}

.lib-spoiler-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border: 1.5px solid var(--ink3);
  border-radius: 50%;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: 2px;
  cursor: help;
}

.lib-spoiler-icon:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}

.lib-spoiler-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(320px, 80vw);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  z-index: 2;
}

.lib-spoiler-icon:hover .lib-spoiler-tip,
.lib-spoiler-icon:focus-visible .lib-spoiler-tip,
.lib-spoiler-icon--shown .lib-spoiler-tip {
  opacity: 1;
}

/* On a narrow screen the tip hangs from the icon's right edge, so it stays
   inside the page whatever the line the icon lands on. */
@media (max-width: 600px) {
  .lib-spoiler-tip {
    left: auto;
    right: -8px;
    transform: none;
    max-width: calc(100vw - 48px);
  }
}

.lib-spoiler [data-open],
.lib-spoiler[open] > summary [data-closed] {
  display: none;
}

.lib-spoiler[open] > summary [data-open] {
  display: inline;
}

.lib-spoiler-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 8px;
}

/* The data table */
.lib-data summary {
  cursor: pointer;
  font-weight: 800;
}

.lib-table-wrap {
  margin-top: 10px;
  max-width: 100%;
  overflow-x: auto;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.lib-table {
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.lib-table th,
.lib-table td {
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.lib-table th {
  font-weight: 800;
  text-align: right;
  vertical-align: bottom;
  min-width: 8ch;
}

.lib-table tr:last-child td {
  border-bottom: 0;
}

.lib-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  max-width: 72ch;
  font-size: var(--fs-small);
  color: var(--ink2);
  overflow-wrap: anywhere;
}

.lib-meta dt {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--fs-eyebrow);
  color: var(--ink3);
  padding-top: 2px;
}

.lib-runs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
}

.lib-runs a {
  color: var(--mark);
  font-weight: 800;
}

.lib-related {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

/* ---------- About ---------- */

.lib-about {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink2);
  scroll-margin-top: 12px;
}