/*
 * Palworld-inspired technology workspace.
 * Geometry and palette are derived from the installed game's UI vocabulary;
 * no packaged Palworld UI texture is redistributed here.
 */

body {
  background: #07161b;
  line-height: 1.45;
}

body::before {
  display: none;
}

main {
  position: relative;
  z-index: 1;
}

main {
  width: min(calc(100% - 2rem), 1680px);
}

.command-brand {
  min-width: 0;
  display: grid;
  gap: .18rem;
}

.command-brand h1 {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 650;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.command-brand h1 em {
  color: var(--pal-cyan);
  font-style: normal;
}

.command-snapshot {
  margin: 0;
  color: #aabcbf;
  font-size: .62rem;
  white-space: nowrap;
}

.command-snapshot .results-kicker {
  margin: 0 .25rem 0 0;
  font-size: .52rem;
}

.command-snapshot strong {
  color: #f0f8f9;
}

.command-snapshot .snapshot-ancient {
  color: #df79f0;
}

.tree-workspace {
  --technology-lane-heading-height: 2.8rem;
  --technology-sticky-command-top: calc(var(--app-chrome-header-height, 5.25rem) + var(--app-chrome-sticky-gap, .5rem));
  --technology-sticky-headings-top: calc(var(--technology-sticky-command-top) + var(--technology-command-sticky-height, 0px) + .25rem);
  --technology-sticky-content-top: calc(var(--technology-sticky-headings-top) + var(--technology-lane-heading-height) + .25rem);
  padding: 0 0 5rem;
  gap: .65rem;
}

.tree-command {
  position: sticky;
  z-index: 130;
  top: var(--technology-sticky-command-top);
  margin-top: .8rem;
  padding: .5rem .8rem .6rem;
  background:
    linear-gradient(180deg, rgba(9, 24, 30, .9), rgba(5, 16, 21, .92)),
    url("../../../Image/Background/technology-info-header-bg.png") top left / auto repeat,
    #0d232c;
  border: 1px solid rgba(181, 205, 213, .28);
  border-left: 3px solid var(--pal-cyan);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
}

.tree-command::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pal-cyan), #00636a 38%, #6a287c 72%, var(--pal-ancient-bright));
  content: "";
}



.technology-lane-headings {
  display: grid;
  margin-top: .45rem;
  margin-left: 6.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 22%);
  gap: 4px;
}

.technology-lane-headings span {
  min-height: 2.05rem;
  display: flex;
  padding: 0 .85rem;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 0 0 / 5rem 5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 2.5rem 0 / 5rem 5rem,
    var(--pal-teal);
  font-size: .9rem;
  font-weight: 650;
  border-bottom: 2px solid rgba(255, 255, 255, .18);
}

.technology-lane-headings span:last-child {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 0 0 / 5rem 5rem,
    linear-gradient(240deg, rgba(255, 255, 255, .06) 50%, transparent 50%) 2.5rem 0 / 5rem 5rem,
    var(--pal-ancient);
}

.technology-levels {
  background: rgba(6, 16, 19, .73);
  border-inline: 1px solid rgba(186, 216, 219, .18);
}

.level-section {
  padding: 0;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: .25rem;
  background: linear-gradient(90deg, rgba(9, 23, 27, .94), rgba(9, 20, 23, .88));
  border-color: rgba(191, 218, 221, .45);
}

.level-section:nth-child(even) {
  background: linear-gradient(90deg, rgba(8, 18, 21, .96), rgba(6, 15, 17, .92));
}

.level-rail {
  min-height: 12rem;
  border-right: 1px solid rgba(197, 223, 226, .16);
}

.level-rail::before {
  display: none;
}

.level-marker {
  top: calc(var(--technology-sticky-headings-top) + .5rem);
  width: 3.2rem;
  height: 3.2rem;
  margin-top: 4.15rem;
  color: var(--pal-muted);
  background: #0a161a;
  border-color: rgba(190, 210, 212, .56);
  font-size: 1.05rem;
  box-shadow: none;
}

.level-section:first-child .level-marker,
.level-section:target .level-marker {
  color: var(--pal-cyan);
  border-color: var(--pal-cyan);
  box-shadow: 0 0 16px rgba(0, 232, 248, .28), inset 0 0 18px rgba(0, 232, 248, .08);
}

.level-marker::before {
  inset: .25rem;
  border-color: rgba(0, 232, 248, .14);
}

.level-marker::after {
  color: inherit;
  text-shadow: none;
}

.level-content {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
}

.level-meta {
  min-height: 2rem;
  padding: .25rem .65rem;
  margin: 0;
  background: rgba(15, 39, 46, .7);
  border-bottom: 1px solid rgba(193, 222, 225, .24);
}

.level-meta h3,
.level-total {
  font-size: .58rem;
  letter-spacing: .06em;
}

.technology-columns {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 22%);
  gap: 4px;
}

.level-section--regular-only .technology-columns {
  grid-template-columns: 1fr;
}

.level-section--ancient-only .technology-columns {
  grid-template-columns: minmax(12.5rem, 23rem);
  justify-content: end;
}

.technology-lane {
  position: relative;
  min-width: 0;
  min-height: 10rem;
  padding: .5rem;
  background:
    repeating-linear-gradient(120deg, transparent 0 100px, rgba(164, 208, 214, .035) 100px 145px),
    rgba(10, 39, 49, .85);
}

.technology-lane--ancient {
  background:
    repeating-linear-gradient(120deg, transparent 0 100px, rgba(213, 166, 224, .035) 100px 145px),
    var(--pal-ancient-deep);
  border-left: 1px solid rgba(195, 128, 211, .36);
}

.technology-lane[data-empty="true"]::after {
  position: absolute;
  inset: .75rem;
  border: 1px solid rgba(194, 218, 220, .055);
  content: "";
  pointer-events: none;
}

.technology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.05rem, 5.35rem));
  gap: .35rem;
}

.technology-grid--ancient {
  grid-template-columns: repeat(auto-fill, minmax(5.05rem, 5.35rem));
}

/* Technology Tree composes the same Atlas command and inline-filter primitives as the catalogs. */
.tree-command.catalog-command--atlas {
  width: 100%;
  padding: .55rem .8rem .65rem;
}

.tree-command .command-brand { margin-bottom: .55rem; }

.tree-command .catalog-controls--atlas {
  --catalog-toolbar-height: 2.75rem;
  grid-template-columns: minmax(18rem, 1fr) minmax(17rem, 21rem);
  align-items: stretch;
  gap: .65rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(104, 169, 176, .16);
}

.tree-command .catalog-search-form,
.tree-command .atlas-search-control,
.tree-command .atlas-search-control input,
.tree-command .technology-level-control,
.tree-command .level-picker-trigger,
.tree-command .atlas-reset {
  min-height: var(--catalog-toolbar-height);
  height: var(--catalog-toolbar-height);
  box-sizing: border-box;
}

.tree-command .atlas-search-control {
  border: 1px solid rgba(76, 140, 149, .38);
  border-bottom: 2px solid rgba(81, 232, 242, .75);
  background: linear-gradient(102deg, rgba(6, 25, 32, .84), rgba(4, 16, 22, .78));
}

.tree-command .atlas-search-control input {
  color: #eef8f9;
  border: 0;
  background: transparent;
  clip-path: none;
}

.tree-command .technology-level-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem;
}

.tree-command .level-picker-trigger {
  width: 100%;
  min-width: 0;
  padding: .35rem .7rem;
  justify-content: flex-start;
  color: #e7f8fa;
  border: 1px solid rgba(76, 140, 149, .38);
  border-bottom: 2px solid rgba(81, 232, 242, .75);
  background: linear-gradient(102deg, rgba(6, 25, 32, .84), rgba(4, 16, 22, .78));
}

.tree-command .level-picker-trigger .atlas-sort-copy { min-width: 0; display: grid; flex: 1; gap: 1px; text-align: left; }
.tree-command .level-picker-trigger .atlas-sort-copy small { color: #67bdc4; font-size: .46rem; letter-spacing: .11em; text-transform: uppercase; }
.tree-command .level-picker-trigger > svg { width: 1rem; height: 1rem; fill: none; stroke: #78a8ae; stroke-width: 1.7; }

.tree-command .atlas-reset {
  position: static;
  padding: 0 .68rem;
  color: #a9c0c3;
  border: 1px solid rgba(76, 140, 149, .38);
  border-bottom: 2px solid rgba(81, 232, 242, .52);
  background: linear-gradient(102deg, rgba(6, 25, 32, .76), rgba(4, 15, 20, .68));
}

.tree-command .inline-filter-groups { grid-template-columns: minmax(12rem, .55fr) minmax(26rem, 1.45fr); }
.tree-command .filter-section-title { margin-bottom: .3rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tree-command .filter-section-title h3 { margin: 0; color: #d9e7e9; font-size: .65rem; }
.tree-command .filter-section-title span { color: #6f969c; font-size: .48rem; text-transform: uppercase; letter-spacing: .08em; }
.tree-command .technology-type-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.tree-command .technology-level-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.tree-command .technology-filter--ancient { --filter-accent: #df79f0; }
.tree-command .inline-filter-section:nth-child(2) {
  display: grid;
  grid-template-columns: minmax(20rem, 1.55fr) minmax(12rem, .75fr);
  align-items: end;
  column-gap: .45rem;
}
.tree-command .inline-filter-section:nth-child(2) .filter-section-title { grid-column: 1 / -1; }
.tree-command .technology-range-fields { margin-top: 0; display: grid; grid-template-columns: minmax(5rem, 1fr) auto minmax(5rem, 1fr); align-items: end; gap: .4rem; }
.tree-command .technology-range-fields label { color: #7ba3a8; font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tree-command .technology-range-fields input { width: 100%; min-height: 2rem; margin-top: .15rem; padding: .25rem .5rem; color: #eaf8f9; border: 1px solid rgba(54, 89, 102, .5); background: rgba(5, 18, 24, .82); font: inherit; }
.tree-command .technology-range-fields > span { padding-bottom: .42rem; color: var(--pal-cyan); }

/* Canonical Pal Explorer command surface: no legacy framed/texture panel. */
.tree-command.catalog-command--atlas {
  padding: .55rem 0 .45rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.tree-command.catalog-command--atlas::after {
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(80 215 224 / 55%), rgb(80 215 224 / 10%) 38%, transparent 82%);
}
.tree-command .command-brand { display: none; }
.tree-command .inline-filter-groups {
  grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
  align-items: end;
}
.tree-command .inline-filter-section:nth-child(2) {
  grid-template-columns: minmax(31rem, 1.65fr) minmax(15rem, .6fr);
}
.tree-command .technology-type-filters,
.tree-command .technology-level-filters,
.tree-command .technology-range-fields { align-self: end; }