/* The root palette keeps the product UI neutral, dense, and readable. */
:root {
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-alt: #eef3f4;
  --text: #182126;
  --muted: #65727a;
  --line: #d7e0e3;
  --accent: #176b87;
  --accent-strong: #0d5067;
  --good: #1d7a52;
  --shadow: 0 10px 30px rgba(21, 35, 42, 0.08);
}

/* The universal box model prevents padding from breaking fixed panels. */
* {
  box-sizing: border-box;
}

/* The page body fills the viewport and removes browser default spacing. */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

/* The app shell constrains content width while staying full-height. */
.app-shell {
  width: min(1920px, 100%);
  margin: 0 auto;
  padding: 24px;
}

/* The top bar aligns product identity with the global search form. */
.topbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 560px);
  gap: 20px;
  align-items: end;
  margin-bottom: 18px;
}

/* The brand block uses compact typography suitable for a data tool. */
.brand h1 {
  margin: 2px 0 0;
  font-size: 32px;
  line-height: 1.15;
}

/* The eyebrow style supports small section labels across the app. */
.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* The search panel forms one continuous control without decorative nesting. */
.search-panel {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 8px;
}

/* Inputs and buttons share stable heights to avoid toolbar jitter. */
input,
button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

/* The search input prioritizes scanability and high contrast. */
input {
  width: 100%;
  padding: 0 14px;
  background: var(--surface);
  color: var(--text);
}

/* Buttons use the product accent only for actionable controls. */
button {
  padding: 0 14px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* Primary and active buttons get the stronger accent fill. */
.search-panel button,
.tab.is-active,
.result-card.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

/* Disabled buttons remain visible but clearly unavailable. */
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Resource tabs are compact segmented controls for every public data category. */
.resource-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

/* The tab buttons maintain equal dimensions across labels. */
.tab {
  min-width: 0;
  font-weight: 700;
}

/* The workspace creates a dense list/detail layout for repeated browsing. */
.workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* Panels are single-level surfaces and avoid nested card decoration. */
.list-panel,
.detail-panel {
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* The list panel uses padding because result cards sit directly inside it. */
.list-panel {
  padding: 18px;
}

/* The detail panel lets the page scroll so the side inspector can stay visible. */
.detail-panel {
  padding: 22px;
  overflow: visible;
}

/* Panel headers keep titles and counts aligned on one row. */
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

/* List and detail headings are sized for workspace panels. */
.panel-head h2,
.detail-panel h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.25;
}

/* The result count reads as metadata rather than a control. */
.count {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Status text reserves space for loading and error messages. */
.status {
  min-height: 22px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 14px;
}

/* The result list stacks selectable rows with consistent gaps. */
.result-list {
  display: grid;
  gap: 10px;
}

/* Result cards are compact interactive rows rather than marketing cards. */
.result-card {
  width: 100%;
  min-height: 82px;
  padding: 12px;
  text-align: left;
  border-color: var(--line);
  background: var(--surface-alt);
}

/* Active cards keep secondary text readable on the accent background. */
.result-card.is-active .meta,
.result-card.is-active .subline {
  color: rgba(255, 255, 255, 0.82);
}

/* Result titles are clamped by normal wrapping for long ids and names. */
.result-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Metadata rows support compact comparison between entries. */
.meta,
.subline {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* The pager uses stable button widths and centered page state. */
.pager {
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

/* The page label stays centered between paging commands. */
#pageLabel {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* The empty state has enough breathing room without becoming a hero section. */
.detail-empty {
  padding-top: 40px;
  color: var(--muted);
}

/* Detail definition lists show projected fields in a scannable table-like flow. */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 10px 14px;
  margin-top: 18px;
}

/* Detail labels use muted text while values remain primary. */
.detail-grid dt {
  color: var(--muted);
  font-size: 13px;
}

/* Detail values wrap long ids and nested summaries. */
.detail-grid dd {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Chips summarize nested arrays or structured groups in detail view. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* Each chip keeps a stable, compact visual treatment. */
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 12px;
}

/* The detail layout pairs the full data view with a focused related-item inspector. */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}

/* The main detail column owns all structured data sections. */
.detail-main {
  min-width: 0;
}

/* The related panel stays visible while browsing long hardpoint trees. */
.related-panel {
  position: sticky;
  top: 14px;
  min-width: 0;
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid #344149;
  border-radius: 8px;
  padding: 16px;
  background: #20262b;
  color: #e7eef2;
  box-shadow: inset 3px 0 0 #d7871e;
}

/* Related panel headings are compact because the panel is narrow. */
.related-panel h3 {
  margin: 4px 0 8px;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Muted text inside the loadout inspector must stay readable on dark panels. */
.loadout-inspector .subline,
.loadout-inspector .status,
.loadout-inspector .section-count {
  color: #9daab2;
}

/* Definition grids in the inspector use dark separators instead of the page border color. */
.loadout-inspector .detail-grid dt,
.loadout-inspector .data-grid dt {
  color: #9daab2;
}

/* Inspector values use high contrast because item descriptions can be long. */
.loadout-inspector .detail-grid dd,
.loadout-inspector .data-grid dd,
.loadout-inspector .metric-cell strong {
  color: #f4f8fa;
}

/* Generic item sections inside the inspector inherit the loadout-console visual language. */
.loadout-inspector .detail-section {
  border-top-color: #344149;
}

/* Inspector repeated records should not fall back to the light page card style. */
.loadout-inspector .data-card,
.loadout-inspector .metric-cell {
  border-color: #344149;
  background: #171d21;
}

/* Inspector nested groups use low-contrast separators on dark backgrounds. */
.loadout-inspector .nested-group {
  border-top-color: #344149;
}

/* Inspector card headings and scalar text stay readable on the dark panel. */
.loadout-inspector .data-card-head h4,
.loadout-inspector .nested-group h4,
.loadout-inspector .data-scalar,
.loadout-inspector .data-card p {
  color: #dbe5ea;
}

/* Related item grids use narrower labels than the main detail header. */
.related-grid {
  grid-template-columns: minmax(86px, 112px) minmax(0, 1fr);
}

/* The loadout console is the Erkul-style hardpoint workspace for ship details. */
.loadout-console {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
  border: 1px solid #303a40;
  border-radius: 8px;
  padding: 14px;
  background: #1c2226;
  color: #e8eef1;
}

/* The rail acts like a compact equipment-system selector. */
.loadout-rail {
  display: grid;
  align-content: start;
  gap: 8px;
}

/* Rail links are small dashboard tabs rather than normal document links. */
.loadout-rail-item {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  border: 1px solid #3a464d;
  border-radius: 6px;
  padding: 8px 6px;
  background: #242b30;
  color: #dbe5ea;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* Rail items use a stronger accent when users hover or tab through them. */
.loadout-rail-item:hover,
.loadout-rail-item:focus-visible {
  border-color: #d7871e;
  color: #ffffff;
  outline: none;
}

/* The short system code mirrors equipment-category icon blocks in loadout tools. */
.loadout-rail-icon,
.loadout-category-icon,
.slot-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4c5b63;
  border-radius: 4px;
  color: #f0a33a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

/* Rail counters make category density visible without opening each group. */
.loadout-rail-item strong {
  display: inline-flex;
  min-width: 24px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0f7b41;
  color: #ffffff;
  font-size: 11px;
}

/* The main loadout column holds summary totals and system groups. */
.loadout-main {
  min-width: 0;
}

/* The summary row resembles loadout result strips without hiding normal detail fields. */
.loadout-summary {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(260px, 420px);
  gap: 12px;
  align-items: center;
  border: 1px solid #303a40;
  border-radius: 7px;
  padding: 12px;
  background: #252c31;
}

/* Loadout summary headings remain compact because the ship title is already above. */
.loadout-summary h3 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.2;
}

/* Summary totals are stable cells for quick comparison. */
.loadout-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* Each total cell mimics the numeric blocks in fitting calculators. */
.loadout-total {
  border-left: 3px solid #d7871e;
  padding: 4px 8px;
  background: #1b2024;
}

/* Total labels stay subdued so numbers read first. */
.loadout-total span {
  display: block;
  color: #9daab2;
  font-size: 11px;
}

/* Total values can wrap long version strings without pushing the grid wider. */
.loadout-total strong {
  display: block;
  margin-top: 2px;
  color: #f4f8fa;
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Loadout categories stack with clear separation between ship systems. */
.loadout-categories {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Each category is a system band, not a generic info card. */
.loadout-category {
  border: 1px solid #303a40;
  border-radius: 7px;
  background: #22292e;
  overflow: hidden;
}

/* Category headers expose the system name, internal key, and slot count. */
.loadout-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #303a40;
  padding: 10px 12px;
  background: #293238;
}

/* Category title groups the icon with public and internal names. */
.loadout-category-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

/* Category icons keep a fixed footprint for scan alignment. */
.loadout-category-icon {
  width: 34px;
  height: 30px;
  flex: 0 0 auto;
  background: #1b2024;
}

/* Internal category keys are small metadata, not primary content. */
.loadout-category-title p {
  margin: 0;
  color: #8d99a1;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Category names stay readable inside the dense console. */
.loadout-category-title h3 {
  margin: 1px 0 0;
  color: #f4f8fa;
  font-size: 17px;
  line-height: 1.2;
}

/* Structured sections separate major groups without dumping raw JSON. */
.detail-section {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* Section headers align names and counts for fast scanning. */
.detail-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

/* Structured section titles stay smaller than item titles. */
.detail-section-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

/* Section counts read as quiet metadata. */
.section-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Hardpoint slot rows stack like a fitting-list system panel. */
.hardpoint-grid {
  display: grid;
  gap: 8px;
  padding: 10px;
}

/* Each hardpoint node is one equipment slot with size, item, stats, and detail tab. */
.hardpoint-node {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid #3a464d;
  border-radius: 7px;
  background: #1b2024;
  padding: 8px 46px 8px 8px;
  min-width: 0;
}

/* Child nodes indent through spacing and a guide line instead of repeated parent labels. */
.hardpoint-node.depth-1,
.hardpoint-node.depth-2,
.hardpoint-node.depth-3 {
  margin-left: 16px;
  background: #20272c;
}

/* Size badges reproduce the loadout-manager slot marker at row start. */
.slot-size-badge {
  display: inline-flex;
  width: 48px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  align-self: start;
  border: 1px solid #52616a;
  border-radius: 5px;
  background: #253039;
  color: #9ee08e;
  font-size: 13px;
  font-weight: 800;
}

/* Slot bodies hold the actual item content and nested children. */
.slot-body {
  min-width: 0;
}

/* Node headers reserve room for the side detail tag. */
.node-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

/* The slot type marker gives each item row a visible equipment-class cue. */
.slot-type-icon {
  width: 30px;
  height: 30px;
  background: #242b30;
}

/* Node titles wrap long internal ids cleanly. */
.node-title-wrap h4 {
  margin: 0 0 4px;
  color: #f4f8fa;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Node subtitles carry ids and port names with muted styling. */
.node-title-wrap p {
  margin: 0;
  color: #9daab2;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* The node side column anchors the item detail tab to the row edge. */
.node-side {
  position: absolute;
  top: 11px;
  right: -1px;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* Related tags are small side tabs for opening exact item detail records. */
.related-tag {
  display: inline-flex;
  width: 34px;
  min-height: 30px;
  max-width: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: #d7871e;
  border-radius: 6px 0 0 6px;
  padding: 0;
  color: #ffd089;
  background: #2c2418;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The visible button stays tiny while the label remains available to scripts and assistive tech. */
.related-tag-label {
  font-style: normal;
}

/* The small info mark makes the tab read as an inspector action. */
.related-tag span {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d7871e;
  color: #1b2024;
  font-size: 11px;
  font-weight: 900;
}

/* Related tags use a stronger state on hover and keyboard focus. */
.related-tag:hover,
.related-tag:focus-visible {
  border-color: #ffb85a;
  background: #4b3418;
  color: #ffffff;
}

/* Node tags summarize count, size, type, and lock state. */
.node-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Individual node tag dimensions are fixed enough to avoid layout jumps. */
.node-tag {
  border: 1px solid #3f4c54;
  border-radius: 999px;
  padding: 3px 8px;
  background: #252c31;
  color: #bac6cc;
  font-size: 11px;
  font-weight: 700;
}

/* Metric grids expose key stats without forcing users into raw JSON. */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 10px;
}

/* Metric cells are compact comparison units. */
.metric-cell {
  border: 1px solid #303a40;
  border-radius: 6px;
  padding: 6px 8px;
  background: #111619;
}

/* Metric labels and values stay distinct but compact. */
.metric-cell span {
  display: block;
  color: #8d99a1;
  font-size: 11px;
}

/* Metric values can wrap long summarized text. */
.metric-cell strong {
  display: block;
  margin-top: 2px;
  color: #f4f8fa;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Child containers draw a subtle tree guide. */
.node-children {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border-left: 2px solid #4f8a56;
  padding-left: 10px;
}

/* Generic data lists use cards for repeated records only. */
.data-list {
  display: grid;
  gap: 10px;
}

/* Generic data cards frame repeated objects such as recipes, sources, and nested records. */
.data-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-alt);
  padding: 10px;
  min-width: 0;
}

/* Data card headings stay compact inside dense detail panels. */
.data-card-head h4,
.nested-group h4 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Primitive array indexes keep simple values identifiable. */
.data-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* Scalar data paragraphs align with data card spacing. */
.data-scalar,
.data-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Generic object grids use definition-list semantics with compact spacing. */
.data-grid {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  gap: 7px 10px;
}

/* Generic object labels are muted to prioritize values. */
.data-grid dt {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Generic object values wrap long ids and names. */
.data-grid dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Nested groups separate child objects without adding heavy decoration. */
.nested-group {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

/* Compact sections inside the related panel reduce vertical bulk. */
.compact-section {
  margin-top: 14px;
  padding-top: 12px;
}

/* The visually-hidden label remains available to assistive technologies. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Medium screens keep the interface usable with a vertical detail panel. */
@media (max-width: 960px) {
  /* The top bar stacks when horizontal space is constrained. */
  .topbar,
  .workspace {
    grid-template-columns: 1fr;
  }

  /* The detail panel becomes a normal document section on smaller screens. */
  .detail-panel {
    max-height: none;
  }

  /* The detail inspector moves below the main data on medium screens. */
  .detail-layout {
    grid-template-columns: 1fr;
  }

  /* The related panel becomes a normal section once the page is single-column. */
  .related-panel {
    position: static;
    border-left: 1px solid #344149;
    border-top: 1px solid #344149;
  }

  /* The loadout console keeps its system navigation above slots on narrower screens. */
  .loadout-console {
    grid-template-columns: 1fr;
  }

  /* The rail becomes a horizontal category strip on tablets. */
  .loadout-rail {
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  }

  /* Summary totals stack under the heading when the inspector moves below. */
  .loadout-summary {
    grid-template-columns: 1fr;
  }
}

/* Small screens reduce outer padding and keep tabs readable. */
@media (max-width: 560px) {
  /* The app shell uses tighter margins on phones. */
  .app-shell {
    padding: 14px;
  }

  /* The search form stacks to prevent cramped button text. */
  .search-panel {
    grid-template-columns: 1fr 1fr;
  }

  /* The category grid keeps two readable columns on narrow screens. */
  .resource-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Detail fields stack when labels and values would otherwise collide. */
  .detail-grid {
    grid-template-columns: 1fr;
  }

  /* Generic data grids stack to avoid cramped labels on phones. */
  .data-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  /* Phone layout keeps the slot marker above the item text when width is tight. */
  .hardpoint-node {
    grid-template-columns: 1fr;
    padding-right: 8px;
  }

  /* The size badge shrinks to an inline marker on phones. */
  .slot-size-badge {
    width: 42px;
    min-height: 28px;
  }

  /* Slot headers keep the equipment icon but move the detail button below text. */
  .node-head {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  /* Detail tabs become inline buttons on phones to avoid horizontal overflow. */
  .node-side {
    position: static;
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 8px;
  }

  /* Inline detail tabs keep rounded corners after leaving the row edge. */
  .related-tag {
    max-width: 100%;
    border-radius: 6px;
  }

  /* Loadout totals use two columns so long version strings do not squeeze labels. */
  .loadout-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Child hardpoint nodes use smaller indentation on narrow screens. */
  .hardpoint-node.depth-1,
  .hardpoint-node.depth-2,
  .hardpoint-node.depth-3 {
    margin-left: 8px;
  }
}