/* ============================================================
   Tradevest Docs — components (brand redesign · Modern)
   Icons are real inline <svg> (.nav-ico) injected by build.js,
   themed via currentColor.
   ============================================================ */

/* ---------- SIDEBAR NAV ---------- */
.sidebar__section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sidebar-text-muted);
  padding: 18px 11px 8px;
}
.sidebar__section-title:first-of-type { padding-top: 4px; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--sidebar-text);
  padding: 7px 12px;
  margin: 1px 0;
  border-radius: 9px;
  line-height: 1.4;
  transition: background 0.13s, color 0.13s;
}
.sidebar__link:hover { background: var(--color-hover); color: var(--sidebar-text); }
.sidebar__link--active { background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 600; }
.sidebar__link .lbl { flex: 1; min-width: 0; }
.sidebar__link .nav-ico { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.78; }
.sidebar__link--active .nav-ico { opacity: 1; }

/* ---------- SIDEBAR: collapsible endpoint groups ---------- */
.sidebar__group { display: flex; flex-direction: column; }
.sidebar__grouprow { display: flex; align-items: center; gap: 2px; }
.sidebar__grouprow .sidebar__link { flex: 1; min-width: 0; }
.sidebar__caret {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sidebar-text-muted);
  border-radius: 6px;
  cursor: pointer;
}
.sidebar__caret:hover { background: var(--color-hover); color: var(--sidebar-text); }
.sidebar__caret svg { width: 14px; height: 14px; transition: transform 0.18s ease; }
.sidebar__caret[aria-expanded="true"] svg { transform: rotate(90deg); }
.sidebar__endpoints {
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px 15px;
  padding-left: 10px;
  border-left: 1px solid var(--color-border);
}
.sidebar__endpoints[hidden] { display: none; }
/* Nested guide pages reuse the endpoint-group container but hold .sidebar__link
   children, so they need the link scale rather than the endpoint scale. */
.sidebar__endpoints--pages .sidebar__link { font-size: 13.5px; padding: 6px 10px; }
.sidebar__endpoints--pages .sidebar__link .nav-ico { width: 14px; height: 14px; }
.sidebar__endpoint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--sidebar-text-secondary);
  text-decoration: none;
  min-width: 0;
}
.sidebar__endpoint:hover { background: var(--color-hover); color: var(--sidebar-text); }
.sidebar__endpoint--active { background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 600; }
.sidebar__endpoint .ep-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-method {
  flex-shrink: 0;
  width: 42px; /* fits "DELETE" at 9.5px mono */
  text-align: right;
  font-family: var(--font-code);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.sidebar__endpoint.m-get .ep-method { color: #16a982; }
.sidebar__endpoint.m-post .ep-method { color: #8b5cf6; }
.sidebar__endpoint.m-put .ep-method { color: #c88413; }
.sidebar__endpoint.m-patch .ep-method { color: #9a63f6; }
.sidebar__endpoint.m-delete .ep-method { color: #d44b5a; }

/* ---------- LANDING PAGE ---------- */
.landing-page__header { margin-bottom: 30px; }
.landing-page__header .landing-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: 14px;
}
.landing-page__header h1 {
  font-family: var(--font-head);
  font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 18px; max-width: 760px;
  background: var(--defi-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-page__header p {
  font-size: 18.5px; line-height: 1.6; color: var(--color-text-secondary);
  margin: 0; max-width: 680px;
}

.landing-section { margin-top: 36px; }
.landing-section h2 {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--color-text-secondary); margin: 0 0 2px;
  border: 0; padding: 0; text-transform: none;
}
.landing-section__grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  margin-top: 14px;
}

.landing-card {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.landing-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  box-shadow: var(--glow);
}
.landing-card__badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-text); order: 1;
}
.landing-card__title { font-family: var(--font-head); font-size: 16.5px; font-weight: 600; order: 2; }
.landing-card__description { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.5; order: 3; }

.landing-card__tile {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: grid; place-items: center;
  margin-bottom: 4px; order: 0;
}
.landing-card__tile .nav-ico { width: 19px; height: 19px; }

/* ---------- SPEC INDEX ---------- */
.spec-index__list { list-style: none; margin: 0; padding: 0; }
.spec-index__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 18px; margin-bottom: 10px;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.spec-index__item:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); box-shadow: var(--glow); }
.spec-index__body { display: grid; gap: 3px; }
.spec-index__name { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.spec-index__file { font-family: var(--font-code); font-size: 12px; color: var(--color-text-muted); }
.spec-index__download {
  font-size: 13px; font-weight: 600; color: var(--color-accent-text);
  background: var(--color-accent-soft);
  padding: 8px 14px; border-radius: 9px; white-space: nowrap;
}
.spec-index__download:hover { filter: brightness(1.05); }

/* ---------- RELEASE NOTES ---------- */
.release-notes-index__list { display: grid; gap: 13px; }
.release-note-card {
  display: grid; gap: 9px;
  padding: 20px 22px; border-radius: 14px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.release-note-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  box-shadow: var(--glow);
}
.release-note-card__title { font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.release-note-card__date { font-size: 13px; color: var(--color-text-muted); }
.release-note-card__meta, .release-note__meta, .release-note__dates {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.release-note-card__meta span,
.release-note__meta span,
.release-note__date {
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--color-border-strong); color: var(--color-text-secondary);
}
.release-note-card__meta span:first-child,
.release-note__meta span:first-child {
  color: var(--color-accent-text);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: var(--color-accent-soft);
}

.release-notes-index__archive {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}
.release-notes-index__archive > summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
  list-style: none;
}
.release-notes-index__archive > summary::-webkit-details-marker { display: none; }
.release-notes-index__archive > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s;
}
.release-notes-index__archive[open] > summary::before { transform: rotate(90deg); }
.release-notes-index__archive[open] > .release-notes-index__list { margin-top: 14px; }

.release-note__header {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 28px;
}
.release-note__header h1 { margin: 14px 0 0; }
.release-note__dates { margin-top: 14px; }

@media (max-width: 640px) {
  .spec-index__item { flex-direction: column; align-items: flex-start; }
}