/* Palette and type follow the landing page (SpiralKnightsLanding/public/style.css). */
:root {
  --bg: #151a1e;
  --panel: #232b32;
  --panel-soft: #1d262e;
  --border: #323e48;
  --border-strong: #496e8b;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
  --highlight: #58a6ff; /* current tab and side panel entry */
  --gold: #ebc94d;
  --green: #5bf85a;
  --red: #ff6b6b;
  --side-w: 264px;
  /* title size: fits the width beside the side panel (the text is about 12.9em wide in Barlow) */
  --title-size: clamp(22px, calc((100vw - var(--side-w) - 48px) / 13.1), 84px);
  --mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-padding-top: 60px;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 14px/1.5 Barlow, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
}

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

code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: #c9d5df;
  overflow-wrap: anywhere;
}

/* ---- side panel ---- */
.side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  background: var(--panel-soft);
  border-right: 1px solid var(--border);
}

/* The market icon, decorative only: its alpha masks a flat muted fill. */
.side-brand {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 14px 16px;
}

.side-mark {
  width: 44px;
  height: 44px;
  background: rgba(76, 102, 116, 0.7);
  -webkit-mask: url("/FaviconArtifact.png") center / contain no-repeat;
  mask: url("/FaviconArtifact.png") center / contain no-repeat;
}

.toc {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden; /* the scaled-up title must not add a horizontal scrollbar */
  padding: 10px 0;
  font-size: 13px;
}

/* One group per tab: a small coloured title, then its entries hanging off a
   thin side line. The open tab's title is scaled up; an entry's side line
   glows in its tab's colour on hover. */
.toc-group { margin-bottom: 18px; }
.tag-overview { --tag-hue: #e6edf3; }
.tag-energy   { --tag-hue: #29d6ff; }
.tag-auction  { --tag-hue: #ffd9a0; }

.toc a.toc-title {
  display: block;
  padding: 0 16px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tag-hue);
  /* a transform, so the bigger title takes no extra room in the list */
  transform-origin: 16px 50%;
  transition: transform 0.1s ease-out;
}

.toc a.toc-title:hover { text-decoration: none; }
.toc a.toc-title.current { transform: scale(1.3); }

.toc a:not(.toc-title) {
  position: relative;
  display: block;
  padding: 3px 16px 3px 26px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* the side line */
.toc a:not(.toc-title)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  transition: background 0.4s ease-out, box-shadow 0.4s ease-out;
}

.toc a.mono { font-family: var(--mono); font-size: 12px; }

/* hover: the muted text, a little brighter and a little more saturated */
.toc a:not(.toc-title):hover {
  color: #a9bcd0;
  text-decoration: none;
}

.toc a:not(.toc-title):hover::before {
  background: var(--tag-hue);
  box-shadow: 0 0 6px var(--tag-hue), 0 0 2px var(--tag-hue);
}

@media (prefers-reduced-motion: reduce) {
  .toc a.toc-title,
  .toc a:not(.toc-title)::before { transition: none; }
}

.side-home {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

/* ---- content ---- */
.content {
  margin-left: var(--side-w);
  min-width: 0;
}

/* Title bar, as on the build planner (SpiralKnightsBuild .header-headline): an
   oversized glyph clipped vertically by the bar through negative em margins.
   The title is longer than "Build Planner", so the size is derived from the
   width left beside the side panel (about 13.5em of text plus the padding). */
.page-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.page-header-clip {
  overflow: hidden;
  padding: 0 24px;
}

.header-headline {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: rgba(76, 102, 116, 0.7);
  text-shadow: 0 0 16px rgba(76, 102, 116, 0.18);
  font-size: var(--title-size);
  /* The bar is exactly as tall as the capitals: the box is trimmed to the cap
     height and the baseline, so the letters touch its top and bottom edges. */
  margin: 0;
  text-box: trim-both cap alphabetic;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 100%);
}

/* Without text-box trimming, approximate it at line-height 1. */
@supports not (text-box: trim-both cap alphabetic) {
  .header-headline { margin: -0.19em 0 -0.11em 0; }
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  padding: 0 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Tabs carry the side panel titles' type (larger) in a square outline whose
   bottom edge is the tab's own colour (.tag-* above). */
.tab {
  /* equal widths, and as tall as the bar: the outline's top and bottom sit on the bar's edges */
  flex: 0 0 150px;
  margin: -1px 0;
  padding: 12px 0 11px;
  text-align: center;
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--tag-hue);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tag-hue);
  opacity: 0.6;
}

.tab:hover { opacity: 1; text-decoration: none; }

.tab.current {
  opacity: 1;
  background: var(--panel);
}

main { padding: 24px 28px 8px; }

.panel[hidden] { display: none; }

section { margin-bottom: 32px; }

h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

p { margin: 0 0 12px; }

/* a short warning or tip, marked by a gold edge */
.note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  background: var(--panel-soft);
}

.note strong { color: var(--gold); font-weight: 600; }

pre.code {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
}

pre.code code { color: var(--text); overflow-wrap: normal; }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

table.grid th,
table.grid td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

table.grid tr:last-child > * { border-bottom: 0; }

table.grid thead th {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* row-header tables (facts, conventions) */
table.grid tbody th {
  width: 150px;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  background: var(--panel-soft);
}

/* parameter tables: the description column takes the spare width */
table.params th:last-child,
table.params td:last-child { width: 100%; }

.p-name { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.p-req { margin-left: 8px; font-size: 11px; color: var(--gold); }
.p-type { color: var(--muted); white-space: nowrap; }

/* ---- endpoints ---- */
.endpoint {
  margin-bottom: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.endpoint:first-child { padding-top: 0; border-top: 0; }

.endpoint-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 16px;
}

.method { color: var(--green); font-weight: 700; }
.endpoint-path { overflow-wrap: anywhere; }

.endpoint-summary {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.sub {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* parameters on the left, the response schema on the right */
.endpoint-io {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 24px;
  align-items: start;
}

@media (max-width: 1200px) {
  .endpoint-io { grid-template-columns: minmax(0, 1fr); }
}

/* response schema: a field list, nested fields behind a side line */
.schema {
  border: 1px solid var(--border);
  padding: 4px 12px;
}

.field { padding: 6px 0; }
.field + .field { border-top: 1px solid var(--border); }

.field-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* a field with nested fields: its head line is the toggle */
button.field-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}

button.field-toggle::before {
  content: "";
  align-self: center;
  width: 0;
  height: 0;
  border-left: 5px solid var(--muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.1s ease-out;
}

button.field-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
button.field-toggle:hover::before { border-left-color: var(--text); }

.fields[hidden] { display: none; }

.field-desc { color: var(--muted); font-size: 13px; }

.field > .fields {
  margin: 6px 0 0 4px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.field > .fields > .field:last-child { padding-bottom: 0; }

.none { color: var(--muted); }

.try { display: flex; gap: 8px; flex-wrap: wrap; }

.try-url {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.try-url:focus-within { border-color: var(--border-strong); }

.try-verb {
  padding-left: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green);
}

.try-url input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
}

button {
  font: inherit;
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

button:hover { border-color: var(--border-strong); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.5; cursor: default; }

button.send {
  background: #1f4f7a;
  border-color: var(--border-strong);
}

button.send:hover { background: #26618f; }

.response { margin-top: 8px; }
.response[hidden] { display: none; }

.response-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.response-status.ok { color: var(--green); }
.response-status.err { color: var(--red); }

.response pre.code {
  max-height: 460px;
  overflow: auto;
  margin: 0;
}

/* JSON colouring */
.j-key { color: #9cdcfe; }
.j-str { color: #ce9178; }
.j-num { color: #b5cea8; }
.j-lit { color: #569cd6; }

.loading { color: var(--muted); }

.disclaimer {
  padding: 12px 28px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.disclaimer p { margin: 0 0 3px; }

/* ---- narrow: the side panel becomes a block above the content ---- */
@media (max-width: 820px) {
  .side {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .toc { max-height: 180px; }
  :root { --title-size: clamp(18px, calc((100vw - 48px) / 13.1), 84px); }
  .content { margin-left: 0; }
  .tabs { padding: 0 12px; }
  .tab { flex: 1 1 0; }
  main { padding: 16px 12px 8px; }
  .disclaimer { padding: 12px; }
  table.grid tbody th { width: auto; white-space: normal; }
}