/*
 * workbench-rebuild.css
 *
 * Composition rebuild for the visual layer. The application is deliberately
 * split into a dark navigation rail and a warm, paper-like working field. It
 * makes the product feel like a specialist studio rather than a dark generic
 * dashboard, while preserving every existing class, control, and behaviour.
 */

/* The work surface remaps legacy semantic variables locally. This lets the
   established editor CSS inherit the new visual language without touching its
   behavioural JavaScript or replacing its markup. */
.app-content {
  --bg-base: var(--wb-canvas);
  --bg-surface: var(--wb-panel);
  --bg-surface-2: var(--wb-panel-raised);
  --bg-surface-3: var(--wb-panel-raised);
  --bg-inset: var(--wb-inset);
  --bg-hover: color-mix(in srgb, var(--wb-field) 8%, var(--wb-panel));
  --bg-active: color-mix(in srgb, var(--wb-signal) 10%, var(--wb-panel-raised));
  --border-subtle: var(--wb-rule-soft);
  --border-strong: var(--wb-rule);
  --text-primary: var(--wb-ink);
  --text-secondary: var(--wb-ink-soft);
  --text-muted: var(--wb-ink-muted);
  --accent: var(--wb-signal);
  --accent-copper: var(--wb-signal);
  --accent-copper-bright: var(--wb-signal-strong);
  --accent-teal: var(--wb-field);
  --accent-teal-bright: var(--wb-field-strong);
  --accent-warning: var(--wb-note);
  --accent-danger: var(--wb-danger);
  --btn-primary-bg: var(--wb-signal);
  --btn-primary-fg: var(--wb-panel);
  --shadow-sm: none;
  --shadow-elevated: 0 10px 28px var(--wb-shadow);
  --shadow-lg: 0 20px 54px var(--wb-shadow);
  background: var(--wb-canvas);
}

/* ── Rail: persistent identity and navigation ──────────────────────── */

.toolbar,
.sidebar,
.statusbar {
  --bg-base: var(--wb-rail);
  --bg-surface: var(--wb-rail);
  --bg-surface-2: var(--wb-rail-raised);
  --bg-surface-3: var(--wb-rail-raised);
  --bg-inset: var(--wb-rail);
  --bg-hover: var(--wb-rail-raised);
  --bg-active: var(--wb-rail-raised);
  --border-subtle: var(--wb-rail-rule);
  --border-strong: var(--wb-rail-rule);
  --text-primary: var(--wb-rail-ink);
  --text-secondary: var(--wb-rail-soft);
  --text-muted: var(--wb-rail-muted);
  --accent: var(--wb-signal);
  --accent-copper: var(--wb-signal);
  --accent-copper-bright: var(--wb-signal-strong);
  --accent-teal: var(--wb-field);
  --accent-teal-bright: var(--wb-field-strong);
  --btn-primary-bg: var(--wb-signal);
  --btn-primary-fg: var(--wb-rail);
  background: var(--wb-rail);
}

.toolbar {
  min-height: 72px;
  height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid var(--wb-rail-rule);
}

.toolbar__title {
  color: var(--wb-rail-ink);
  font-size: 14px;
  letter-spacing: 0.11em;
}

.toolbar__project {
  color: var(--wb-rail-muted);
  border-left-color: var(--wb-rail-rule);
}

.toolbar__mark,
.sidebar__brand-mark {
  border-color: var(--wb-signal);
}

.toolbar__mark::after,
.sidebar__brand-mark::after {
  background: var(--wb-signal);
}

.toolbar .btn--primary {
  color: var(--wb-rail);
}

.toolbar .btn--secondary,
.toolbar .btn--quiet {
  color: var(--wb-rail-soft);
  border-color: var(--wb-rail-rule);
}

.toolbar .btn--secondary:hover,
.toolbar .btn--quiet:hover {
  color: var(--wb-rail-ink);
  background: var(--wb-rail-raised);
  border-color: var(--wb-rail-soft);
}

.sidebar {
  width: 272px;
  padding: 0 14px 30px;
  border-right: 1px solid var(--wb-rail-rule);
  background: var(--wb-rail);
}

.sidebar__brand {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas:
    "mark name"
    "mark meta";
  column-gap: 11px;
  row-gap: 1px;
  padding: 26px 8px 24px;
  margin: 0;
  border-bottom: 1px solid var(--wb-rail-rule);
}

.sidebar__brand-mark { grid-area: mark; }
.sidebar__brand-text {
  grid-area: name;
  color: var(--wb-rail-ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sidebar__brand-meta {
  grid-area: meta;
  color: var(--wb-rail-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.sidebar__home {
  display: grid;
  gap: 2px;
  padding: 16px 0 6px;
}

.sidebar__section {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.sidebar__group-label {
  padding: 23px 8px 7px;
  color: var(--wb-rail-muted);
  font-size: 8px;
  letter-spacing: 0.18em;
}

.sidebar__list {
  display: grid;
  gap: 2px;
}

.sidebar__item {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--wb-rail-soft);
  border-left: 2px solid transparent;
}

.sidebar__item:hover {
  color: var(--wb-rail-ink);
  background: var(--wb-rail-raised);
}

.sidebar__item--active {
  color: var(--wb-rail-ink);
  background: color-mix(in srgb, var(--wb-signal) 16%, var(--wb-rail));
  border-left-color: var(--wb-signal);
}

.sidebar__item--active .sidebar-icon {
  color: var(--wb-signal-strong);
}

.statusbar {
  border-top-color: var(--wb-rail-rule);
  color: var(--wb-rail-muted);
}

/* ── Dashboard: product orientation + numbered tool catalogue ─────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(250px, 0.72fr);
  gap: clamp(44px, 9vw, 160px);
  align-items: end;
  width: min(100%, var(--wb-page-max));
  min-height: 426px;
  margin: 0 auto;
  padding: clamp(60px, 10vw, 132px) var(--wb-gutter) 54px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wb-rule);
}

.hero::before,
.hero::after {
  content: none;
}

.hero__content {
  position: relative;
  padding-left: 22px;
  border-left: 3px solid var(--wb-signal);
}

.hero__eyebrow {
  margin: 0 0 16px;
  color: var(--wb-field-strong);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.hero__eyebrow::before { display: none; }

.hero__title {
  max-width: 11ch;
  color: var(--wb-ink);
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.hero__subtitle {
  max-width: 47ch;
  margin: 22px 0 0;
  color: var(--wb-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

.hero__ledger {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 1px solid var(--wb-rule);
  border-bottom: 1px solid var(--wb-rule);
}

.hero__ledger-title {
  margin: 0;
  padding: 13px 0;
  color: var(--wb-ink-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.17em;
}

.hero__ledger-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--wb-rule-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.hero__ledger-label { color: var(--wb-ink-muted); }
.hero__ledger-value {
  color: var(--wb-ink);
  text-align: right;
}

.tool-grid-section {
  max-width: var(--wb-page-max);
  padding-top: 46px;
}

.tool-grid__heading {
  margin: 50px 0 16px;
  color: var(--wb-ink-muted);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.tool-grid__heading:first-child { margin-top: 0; }
.tool-grid__heading::after { background: var(--wb-rule); }

.tool-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 0;
}

.tool-grid .card {
  display: grid;
  grid-template-columns: 48px minmax(190px, 0.78fr) minmax(220px, 1.22fr) minmax(150px, auto);
  grid-template-areas: "index title description meta";
  align-items: center;
  min-height: 82px;
  gap: 22px;
  padding: 16px 12px 16px 0;
  border: 0;
  border-top: 1px solid var(--wb-rule);
  border-radius: 0;
  color: var(--wb-ink);
  background: transparent;
}

.tool-grid .card:last-child { border-bottom: 1px solid var(--wb-rule); }
.tool-grid .card:nth-child(n) { background: transparent; }

.tool-grid .card--clickable:hover {
  padding-left: 12px;
  background: color-mix(in srgb, var(--wb-field) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--card-accent, var(--wb-signal));
}

.tool-card__index {
  grid-area: index;
  color: var(--wb-ink-muted);
  font-size: 11px;
  text-align: center;
}

.tool-card__row {
  grid-area: title;
  gap: 10px;
}

.tool-grid .tag-chip {
  flex-shrink: 0;
  min-width: 28px;
  height: 22px;
}

.card__title {
  color: var(--wb-ink);
  font-size: 16px;
  font-weight: 600;
}

.card__desc {
  grid-area: description;
  max-width: 52ch;
  margin: 0;
  color: var(--wb-ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.card__project-meta {
  grid-area: meta;
  margin: 0;
  color: var(--wb-ink-muted);
  font-size: 10px;
  text-align: right;
}

.card__badge {
  position: static;
  grid-area: meta;
  justify-self: end;
  margin: 0;
  color: var(--wb-note);
  border-color: color-mix(in srgb, var(--wb-note) 48%, var(--wb-rule));
}

/* ── Workspace sheets ─────────────────────────────────────────────── */

.item-editor,
.container-editor,
.spawner-editor,
.entity-editor,
.trade-editor,
.npc-editor,
.nbt-editor,
.inspector,
.converter,
.settings,
.project-manager,
.studio {
  padding-top: 46px;
}

.item-editor__header,
.entity-editor__header,
.te-header,
.ne-header,
.container-editor > .setup-card,
.spawner-editor > .setup-card,
.nbt-editor > .setup-card,
.converter__source,
.inspector > .setup-card:first-child {
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom-color: var(--wb-rule);
}

.item-editor__header::before,
.entity-editor__header::before,
.te-header::before,
.ne-header::before,
.container-editor > .setup-card::before,
.spawner-editor > .setup-card::before {
  color: var(--wb-field-strong);
}

.item-editor__title,
.entity-editor__title,
.te-title,
.ne-title,
.container-editor > .setup-card h1,
.spawner-editor > .setup-card h1,
.nbt-editor > .setup-card h1,
.converter__source h1,
.inspector > .setup-card:first-child h1,
.settings > h1,
.project-manager__heading {
  color: var(--wb-ink);
}

/* Neutral sheets intentionally have no floating corner or heavy shadow. */
.ee-card,
.te-card,
.ne-card,
.ie-card,
.field-section,
.grid-section,
.export-section,
.container-props-section,
.spawner-identity,
.spawner-fields,
.nbt-editor__tree-section,
.nbt-editor__panel,
.nbt-search,
.nbt-schema,
.nbt-diff,
.nbt-archive,
.nbt-format,
.inspector__section,
.converter__setup,
.converter__output,
.settings__group,
.studio__section,
.studio .setup-card {
  border-color: var(--wb-rule);
  background: var(--wb-panel);
}

.ee-card__head,
.ee-card__title,
.te-card__head,
.ne-card__head,
.field-section__heading,
.grid-section__header,
.studio__manifest-head,
.studio__report-head,
.studio__slice-head,
.studio__guide-head,
.studio__diff-head,
.studio__command-head {
  border-bottom-color: var(--wb-rule-soft);
}

/* Primary actions only use the terracotta signal. */
.app-content .btn--primary,
.app-content .ie-chip--on,
.app-content .studio__zoom-btn.is-active,
.app-content .studio__transform-btn.is-active {
  color: var(--wb-panel);
  background: var(--wb-signal);
  border-color: var(--wb-signal);
}

.app-content .btn--primary:hover,
.app-content .ie-chip--on:hover,
.app-content .studio__zoom-btn.is-active:hover,
.app-content .studio__transform-btn.is-active:hover {
  color: var(--wb-panel);
  background: var(--wb-signal-strong);
  border-color: var(--wb-signal-strong);
}

.app-content .btn--secondary,
.app-content .btn--quiet {
  color: var(--wb-ink-soft);
  border-color: var(--wb-rule);
  background: transparent;
}

.app-content .btn--secondary:hover,
.app-content .btn--quiet:hover {
  color: var(--wb-ink);
  border-color: var(--wb-ink-muted);
  background: var(--wb-panel-raised);
}

/* NBT remains a data-first instrument; separators aid long scan paths. */
.nbt-tree {
  background: var(--wb-inset);
  border-color: var(--wb-rule);
}

.nbt-tree__row {
  border-bottom-color: var(--wb-rule-soft);
}

.nbt-tree__row--selected {
  color: var(--wb-ink);
  background: color-mix(in srgb, var(--wb-signal) 11%, var(--wb-panel-raised));
  box-shadow: inset 3px 0 0 var(--wb-signal);
}

.nbt-file-tabs,
.nbt-editor__tabs {
  border-bottom-color: var(--wb-rule);
}

.nbt-file-tabs__tab--active,
.nbt-editor__tab--active {
  color: var(--wb-ink);
  background: var(--wb-panel);
  box-shadow: inset 0 2px 0 var(--wb-signal);
}

/* Structure Studio has one dark surface on purpose: the scene itself. */
.studio__stage,
.studio__stage-3d {
  background: var(--canvas-bg);
  border-color: var(--wb-rule);
}

.studio__overlay,
.studio__card,
.studio__measure,
.studio__clip,
.studio__mode,
.studio__zoom {
  color: var(--wb-rail-ink);
  background: color-mix(in srgb, var(--wb-rail) 94%, transparent);
  border-color: var(--wb-rail-rule);
  box-shadow: none;
}

.studio__card-name,
.studio__item-name,
.studio__guide-name,
.studio__row-name { color: var(--wb-ink); }

.studio__card-id,
.studio__card-coords,
.studio__item-id,
.studio__row-state,
.studio__row-stacks,
.studio__guide-progress { color: var(--wb-ink-muted); }

/* ── Narrow contexts ───────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .sidebar { width: 236px; }

  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: 0;
  }

  .hero__ledger {
    max-width: 620px;
  }

  .tool-grid .card {
    grid-template-columns: 42px minmax(170px, 0.72fr) minmax(180px, 1.1fr) minmax(130px, auto);
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .toolbar {
    min-height: 60px;
    height: auto;
    padding: 10px 14px;
  }

  .sidebar {
    width: min(88vw, 330px);
    padding: 0 14px 28px;
    box-shadow: 18px 0 42px var(--wb-shadow);
  }

  .hero {
    padding-top: 58px;
    padding-bottom: 40px;
  }

  .hero__title {
    font-size: clamp(40px, 12vw, 62px);
  }

  .tool-grid-section { padding-top: 30px; }

  .tool-grid .card {
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "index title"
      ". description"
      ". meta";
    align-items: start;
    gap: 7px 12px;
    min-height: 0;
    padding: 18px 0;
  }

  .tool-grid .card--clickable:hover { padding-left: 8px; }
  .card__project-meta { text-align: left; }
  .card__badge { justify-self: start; }

  .item-editor,
  .container-editor,
  .spawner-editor,
  .entity-editor,
  .trade-editor,
  .npc-editor,
  .nbt-editor,
  .inspector,
  .converter,
  .settings,
  .project-manager,
  .studio {
    padding-top: 30px;
  }
}

@media (max-width: 460px) {
  .toolbar__title { font-size: 12px; }
  .toolbar .btn { font-size: 11px; }
  .hero__content { padding-left: 16px; }
  .hero__ledger-row { font-size: 9px; }
}