/* Gallopify wiki — shared stylesheet.
   Token block vendored verbatim from the Lavish skin
   (gallopify-playground/.lavish-shared/lavish-skin.css, theme-name: gallopify;
   token source of truth: new-landing-page/src/gallopify/gallopify.css).
   Do not invent brand colors here; adjust the skin upstream and re-vendor. */

[data-theme="gallopify"] {
  color-scheme: light;
  background-color: #fffefc;
  --color-base-100: #fffefc;        /* canvas */
  --color-base-200: #fafaf7;        /* tint */
  --color-base-300: #e7e5e0;        /* rule-strong on canvas */
  --color-base-content: #191c1a;    /* ink */
  --color-primary: #027168;         /* brand */
  --color-primary-content: #fffefc;
  --color-secondary: #013a34;       /* brand-dark */
  --color-secondary-content: #fffefc;
  --color-accent: #257d4d;          /* support / terra */
  --color-accent-content: #fffefc;
  --color-neutral: #191c1a;
  --color-neutral-content: #fffefc;
  --color-info: #1d6d94;
  --color-info-content: #fffefc;
  --color-success: #257d4d;
  --color-success-content: #fffefc;
  --color-warning: #a97b2f;
  --color-warning-content: #191c1a;
  --color-error: #a03e2e;
  --color-error-content: #fffefc;
  --radius-selector: 0.5rem;
  --radius-field: 0.4rem;
  --radius-box: 0.5rem;
  --border: 1px;

  --color-rule: rgba(25, 28, 26, 0.09);
  --font-sans: "Diatype", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Base ---- */

* { box-sizing: border-box; }

html { background-color: var(--color-base-100); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

main.wide { max-width: 62rem; }

h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0.5rem 0 0.25rem;
}

h2 {
  font-weight: 600;
  font-size: 1.25rem;
  margin: 2.2rem 0 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-rule);
}

h3 { font-weight: 600; font-size: 1.02rem; margin: 1.5rem 0 0.4rem; }

p { margin: 0.55rem 0; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0.5rem 0; padding-left: 1.4rem; }
li { margin: 0.25rem 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--color-base-200);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: 0.08em 0.35em;
}

pre {
  background: var(--color-base-200);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-box);
  padding: 0.8rem 1rem;
  overflow-x: auto;
  font-size: 0.84rem;
  line-height: 1.5;
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }

/* ---- Header / nav / footer ---- */

.crumbs {
  font-size: 0.82rem;
  color: rgba(25, 28, 26, 0.55);
  margin-bottom: 0.25rem;
}
.crumbs a { color: var(--color-primary); }

.subtitle {
  color: rgba(25, 28, 26, 0.62);
  font-size: 0.95rem;
  margin: 0.2rem 0 1.2rem;
}

footer {
  margin-top: 3rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-rule);
  font-size: 0.8rem;
  color: rgba(25, 28, 26, 0.5);
}

/* ---- Tables ---- */

.table-scroll { overflow-x: auto; margin: 0.8rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(25, 28, 26, 0.6);
  background: var(--color-base-200);
  border-bottom: 1px solid var(--color-base-300);
  padding: 0.45rem 0.7rem;
}

td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

/* ---- Badges ---- */

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.12rem 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
}
.badge.live      { background: rgba(37, 125, 77, 0.12);  color: var(--color-success); }
.badge.inactive  { background: rgba(169, 123, 47, 0.14); color: var(--color-warning); }
.badge.stub      { background: rgba(160, 62, 46, 0.10);  color: var(--color-error); }
.badge.info      { background: rgba(29, 109, 148, 0.10); color: var(--color-info); }
.badge.neutral   { background: rgba(25, 28, 26, 0.07);   color: rgba(25, 28, 26, 0.7); }

/* ---- Callouts ---- */

.callout {
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 0.7rem 1rem;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.callout.reality { border-left-color: var(--color-warning); }
.callout.danger  { border-left-color: var(--color-error); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

.never-public-banner {
  background: var(--color-error);
  color: var(--color-error-content);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.45rem 1rem;
}

/* ---- Index map cards ---- */

.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}

.map-card {
  background: #ffffff;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-box);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0.85rem 1rem;
  min-width: 0;
}
.map-card h3 { margin: 0 0 0.3rem; font-size: 0.98rem; }
.map-card p { margin: 0.3rem 0; font-size: 0.88rem; }
.map-card .flags { margin-top: 0.45rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }

.moc-list { list-style: none; padding-left: 0; }
.moc-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 0.92rem;
}
.moc-list .desc { color: rgba(25, 28, 26, 0.62); }

.muted { color: rgba(25, 28, 26, 0.55); }

/* ---- Diagram kit (inline SVG figures — see STYLE.md) ---- */

figure.diagram {
  margin: 1.2rem 0;
  padding: 0;
}
figure.diagram svg { width: 100%; height: auto; display: block; }
figure.diagram figcaption {
  font-size: 0.8rem;
  color: rgba(25, 28, 26, 0.55);
  margin-top: 0.45rem;
}

/* Boxes — fills/strokes derive from the vendored theme tokens only */
.dg-box        { fill: #ffffff; stroke: var(--color-base-300); stroke-width: 1; }
.dg-box-accent { fill: rgba(2, 113, 104, 0.07);  stroke: var(--color-primary); stroke-width: 1; }
.dg-box-info   { fill: rgba(29, 109, 148, 0.07); stroke: var(--color-info);    stroke-width: 1; }
.dg-box-warn   { fill: rgba(169, 123, 47, 0.10); stroke: var(--color-warning); stroke-width: 1; }
.dg-box-err    { fill: rgba(160, 62, 46, 0.08);  stroke: var(--color-error);   stroke-width: 1; }
.dg-box-muted  { fill: var(--color-base-200);    stroke: var(--color-rule);    stroke-width: 1; }
.dg-group      { fill: none; stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 4 3; }

/* Connectors */
.dg-arrow  { stroke: rgba(25, 28, 26, 0.45); stroke-width: 1.2; fill: none; }
.dg-arrow-accent { stroke: var(--color-primary); stroke-width: 1.4; fill: none; }
.dg-arrow-dash { stroke: rgba(25, 28, 26, 0.45); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; }
.dg-head   { fill: rgba(25, 28, 26, 0.45); }
.dg-head-accent { fill: var(--color-primary); }

/* Text */
.dg-label { font: 600 12.5px var(--font-sans); fill: var(--color-base-content); }
.dg-sub   { font: 400 11px var(--font-sans);   fill: rgba(25, 28, 26, 0.62); }
.dg-tag   { font: 600 10.5px var(--font-sans); fill: var(--color-primary); }
.dg-tag-warn { font: 600 10.5px var(--font-sans); fill: var(--color-warning); }
.dg-tag-err  { font: 600 10.5px var(--font-sans); fill: var(--color-error); }
.dg-mono  { font: 500 11px var(--font-mono);   fill: var(--color-base-content); }