/* =========================================================================
   Breaker Manual + shared markdown content
   =========================================================================
   Tokenized replacement for the `.manual-*` and `.markdown-content` rules that
   used to live (with a separate light base + dark-override set) in input.css.
   A single token-driven rule set now serves both themes. `.markdown-content`
   is intentionally global (unscoped) — it also styles the news pages and the
   dev markdown-preview panes.
   ========================================================================= */

/* ---- Rendered markdown (news, manual, editor previews) ------------------ */

.markdown-content {
  color: var(--sg-ink);
  line-height: 1.8;
  font-size: 1rem;
}

.markdown-content > * + * { margin-top: 1.75rem; }

.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  color: var(--sg-ink-strong);
  font-weight: 700;
  line-height: 1.2;
}

.markdown-content h2 { margin-bottom: 0.75rem; font-size: 1.75rem; }
.markdown-content h3 { margin-bottom: 0.5rem; font-size: 1.3rem; }

.markdown-content p { margin-top: 0; margin-bottom: 0.5rem; }
.markdown-content p + ul,
.markdown-content p + ol { margin-top: 0.5rem; }

.markdown-content a {
  color: var(--sg-link);
  font-weight: 600;
  text-decoration: none;
}

.markdown-content a:hover { color: var(--sg-accent-strong); }

.markdown-content strong { color: var(--sg-ink-strong); font-weight: 700; }

.markdown-content code {
  background: var(--sg-surface-raised);
  color: var(--sg-accent-strong);
  border-radius: 0.5rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.92em;
}

.markdown-content pre {
  overflow-x: auto;
  border-radius: 1rem;
  background: var(--sg-surface-sunken);
  color: var(--sg-ink);
  padding: 1rem 1.25rem;
}

.markdown-content pre code {
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding: 0;
}

.markdown-content ul,
.markdown-content ol { margin-left: 1.5rem; padding-left: 0.5rem; }
.markdown-content ul { list-style: disc; }
.markdown-content ol { list-style: decimal; }
.markdown-content li + li { margin-top: 0.4rem; }

.markdown-content blockquote {
  border-left: 4px solid var(--sg-accent);
  padding-left: 1rem;
  color: var(--sg-ink-muted);
  font-style: italic;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--sg-edge);
  margin-bottom: 0.75rem;
}

.markdown-content th,
.markdown-content td {
  border-bottom: 1px solid var(--sg-edge);
  padding: 0.75rem 1rem;
  text-align: left;
}

.markdown-content th {
  background: var(--sg-surface-raised);
  color: var(--sg-ink-strong);
  font-weight: 700;
}

.markdown-content tr:last-child td { border-bottom: 0; }

.markdown-content img { border-radius: 1rem; }

/* ---- Manual shell (sidebar + reading pane) ------------------------------ */

.manual-shell {
  display: flex;
  min-height: calc(100dvh - 3.5rem);
  background: var(--sg-bg);
  color: var(--sg-ink);
}

.manual-sidebar {
  width: 18rem;
  flex: none;
  overflow-y: auto;
  padding: 1.25rem 1rem;
  background: var(--sg-surface-raised);
  border-right: 1px solid var(--sg-edge);
}

.manual-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sg-surface);
}

/* ---- Sidebar brand + search --------------------------------------------- */

.manual-brand { margin-bottom: 1rem; }

.manual-brand__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sg-accent-strong);
  text-decoration: none;
}

.manual-brand__title:hover { color: var(--sg-accent); }

.manual-brand__sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sg-ink-muted);
}

.manual-search { position: relative; margin-bottom: 1.25rem; }
.manual-search__box { position: relative; }

.manual-search-input {
  width: 100%;
  border-radius: var(--sg-radius-md);
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  font-size: 0.875rem;
  background: var(--sg-surface-sunken);
  border: 1px solid var(--sg-edge);
  color: var(--sg-ink);
}

.manual-search-input:focus {
  outline: none;
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 3px var(--sg-focus);
}

.manual-search-icon {
  position: absolute;
  left: 0.625rem;
  top: 0.625rem;
  width: 1rem;
  height: 1rem;
  color: var(--sg-ink-faint);
  pointer-events: none;
}

.manual-search-dropdown {
  position: absolute;
  z-index: 20;
  margin-top: 0.25rem;
  width: 100%;
  border-radius: var(--sg-radius-md);
  box-shadow: var(--sg-shadow-2);
  background: var(--sg-surface);
  border: 1px solid var(--sg-edge);
  color: var(--sg-ink);
  overflow: hidden;
}

.manual-search-result {
  display: block;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--sg-edge);
  text-decoration: none;
  transition: background-color var(--sg-transition);
}

.manual-search-result:hover {
  background: var(--sg-surface-hover);
}

.manual-search-result:last-of-type {
  border-bottom: 0;
}

.manual-search-result__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sg-ink-strong);
}

.manual-search-result__path {
  font-size: 0.75rem;
  color: var(--sg-ink-faint);
}

.manual-search-result__snippet {
  font-size: 0.75rem;
  color: var(--sg-ink-muted);
  margin-top: 0.125rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.manual-search-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--sg-ink-muted);
}

.manual-search-more {
  display: block;
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sg-link);
  border-top: 1px solid var(--sg-edge);
  text-decoration: none;
  transition: background-color var(--sg-transition);
}

.manual-search-more:hover {
  background: var(--sg-surface-hover);
}

/* ---- Sidebar navigation ------------------------------------------------- */

.manual-nav { font-size: 0.875rem; }

.manual-nav-link {
  display: block;
  padding: 0.3rem 0.55rem;
  border-radius: var(--sg-radius-sm);
  color: var(--sg-ink);
  text-decoration: none;
  transition: background-color var(--sg-transition), color var(--sg-transition);
}

.manual-nav-link:hover {
  background: var(--sg-surface-hover);
  color: var(--sg-link);
}

.manual-nav-link--active,
.manual-nav-link--active:hover {
  background: var(--sg-accent-soft);
  color: var(--sg-accent-strong);
  font-weight: 600;
}

.manual-nav-link--active-text {
  color: var(--sg-accent-strong) !important;
  font-weight: 700;
}

.manual-nav-section > summary.manual-nav-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.3rem 0.55rem;
  border-radius: var(--sg-radius-sm);
  font-weight: 600;
  color: var(--sg-ink-strong);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: background-color var(--sg-transition), color var(--sg-transition);
}

.manual-nav-section > summary.manual-nav-summary::-webkit-details-marker { display: none; }
.manual-nav-section > summary.manual-nav-summary::marker { content: ""; }
.manual-nav-section > summary.manual-nav-summary:hover { background: var(--sg-surface-hover); }

.manual-nav-chevron {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--sg-ink-faint);
  transition: transform var(--sg-transition);
  flex: 0 0 auto;
}

.manual-nav-section[open] > summary > .manual-nav-chevron { transform: rotate(90deg); }

.manual-nav-section-title { flex: 1 1 auto; color: inherit; text-decoration: none; }
.manual-nav-section-title:hover { color: var(--sg-link); }

.manual-nav-children {
  margin-left: 0.75rem;
  margin-top: 0.25rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--sg-edge);
}

.manual-nav-children > .manual-nav-item + .manual-nav-item { margin-top: 0.15rem; }

/* ---- Section tabs ------------------------------------------------------- */

.manual-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.5rem 0;
  background: var(--sg-surface-raised);
  border-bottom: 1px solid var(--sg-edge);
}

.manual-tab {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--sg-radius-md) var(--sg-radius-md) 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sg-ink-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 0;
  transition: background-color var(--sg-transition), color var(--sg-transition);
}

.manual-tab:hover { color: var(--sg-link); background: var(--sg-surface); }

.manual-tab--active {
  color: var(--sg-accent-strong);
  background: var(--sg-surface);
  border-color: var(--sg-edge);
  border-bottom-color: var(--sg-surface);
}

/* ---- Reading pane ------------------------------------------------------- */

.manual-content {
  flex: 1;
  padding: 1.5rem;
  max-width: 56rem;
}

.manual-page-title { color: var(--sg-ink-strong); }

.manual-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.manual-edit-btn {
  margin-top: 0.25rem;
  flex: none;
  border-radius: var(--sg-radius-sm);
  border: 1px solid var(--sg-accent);
  background: var(--sg-accent-soft);
  color: var(--sg-accent-strong);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--sg-transition);
}

.manual-edit-btn:hover { background: var(--sg-surface-hover); }

/* ---- Breadcrumbs -------------------------------------------------------- */

.manual-breadcrumbs { font-size: 0.75rem; margin-bottom: 0.75rem; }

.manual-breadcrumb-link { color: var(--sg-ink-muted); text-decoration: none; }
.manual-breadcrumb-link:hover { color: var(--sg-link); }
.manual-breadcrumb-sep { color: var(--sg-ink-faint); margin-inline: 0.25rem; }
.manual-breadcrumb-current { color: var(--sg-ink-strong); font-weight: 500; }

/* ---- Article body ------------------------------------------------------- */

.manual-article { color: var(--sg-ink); }
.manual-article a:not(.manual-c) { color: var(--sg-link); }
.manual-article a:not(.manual-c):hover { color: var(--sg-accent-strong); }

/* ---- Prev / next -------------------------------------------------------- */

.manual-prevnext {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sg-edge);
}

@media (min-width: 640px) {
  .manual-prevnext { flex-direction: row; }
}

.manual-prevnext-link {
  flex: 1;
  border-radius: var(--sg-radius-md);
  padding: 0.75rem 1rem;
  text-decoration: none;
  background: var(--sg-surface-raised);
  border: 1px solid var(--sg-edge);
  transition: background-color var(--sg-transition), border-color var(--sg-transition);
}

.manual-prevnext-link:hover { background: var(--sg-surface-hover); border-color: var(--sg-accent); }

.manual-prevnext-link--next { text-align: right; }

.manual-prevnext-spacer { flex: 1; }

.manual-prevnext-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sg-ink-faint);
}

.manual-prevnext-title { margin-top: 0.25rem; font-weight: 600; color: var(--sg-accent-strong); }

/* ---- Search results view ------------------------------------------------ */

.manual-results { display: flex; flex-direction: column; gap: 0.75rem; }

.manual-result {
  border-radius: var(--sg-radius-md);
  padding: 0.75rem 1rem;
  background: var(--sg-surface-raised);
  border: 1px solid var(--sg-edge);
}

.manual-result__title { font-weight: 600; color: var(--sg-accent-strong); text-decoration: none; }
.manual-result__title:hover { color: var(--sg-accent); }
.manual-result__path { font-size: 0.75rem; color: var(--sg-ink-faint); margin-top: 0.125rem; }
.manual-result__snippet { font-size: 0.875rem; color: var(--sg-ink); margin-top: 0.25rem; }

.manual-muted { color: var(--sg-ink-muted); }
.manual-lead { margin-top: 1rem; }
.manual-search-count { font-size: 0.875rem; color: var(--sg-ink-muted); margin-bottom: 0.75rem; }
.manual-search-count strong { color: var(--sg-ink-strong); }

/* ---- In-game color tags -------------------------------------------------
   The manual markdown uses tags like <cPassive>, <cFire>, rewritten by
   ManualContentService into `.manual-c<Tag>` spans. These are game-semantic
   colors, kept literal (not tokenized) so they stay faithful across themes. */
.manual-c             { color: inherit; }
.manual-cPassive      { color: #ffe34d; }
.manual-cGray         { color: #9aa7b4; }
.manual-cWhite        { color: #f1f5f9; }
.manual-cFire         { color: #ff5a3c; }
.manual-cWater        { color: #4fa3ff; }
.manual-cWind         { color: #6ee07a; }
.manual-cPoison       { color: #c084fc; }
.manual-cEarth        { color: #c08457; }
.manual-cLight        { color: #fde68a; }
.manual-cDark         { color: #a78bfa; }
.manual-cGhost        { color: #cbd5e1; }
.manual-cSelfCast     { color: #67e8f9; }
.manual-cEnemyCast    { color: #fb7185; }
.manual-cUnitCast     { color: #fbbf24; }
.manual-cMiscCast     { color: #f59e0b; }
.manual-cBuff         { color: #86efac; }
.manual-cDebuff       { color: #fda4af; }