/* Unit Index: graphite hardware catalogue inside the original atlas shell. */
:root,
.hero,
.agent-desk {
  --bg:#111419;
  --panel:#191e25;
  --line:#343b48;
  --ink:#e5e8ee;
  --muted:#8f9aa9;
  --accent:#9a8df5;
  --accent-ink:#111419;
  --accent-tint:#2a263e;
  --chip:#252c35;
  --shadow:0,0,0;
  --signal:#ffc65c;
  --signal-soft:#665536;
  --field-grid:rgba(154,141,245,.045);
  color-scheme:dark;
}
body {background:#111419}
.hero {background:var(--bg)}
.hero[data-light=dusk],
body:has(.hero[data-light=dusk]) .agent-desk,
body:has(.hero[data-light=dusk]) .guide {
  --bg:#090c10;
  --panel:#11161d;
  --line:#2d3541;
  --ink:#e5e8ee;
  --muted:#949eae;
  --accent:#a99bf7;
  --accent-ink:#111419;
  --accent-tint:#262139;
  --chip:#202733;
  --shadow:0,0,0;
  --signal:#ffc65c;
  --signal-soft:#665536;
  --field-grid:rgba(169,155,247,.045);
}
.side {
  background:color-mix(in srgb,var(--bg) 76%,var(--panel));
  border-right-color:var(--line);
}
.brand-logo {image-rendering:pixelated}
.brand small {color:var(--accent)}
.nav button {min-height:38px;transition:background .18s,color .18s}
.nav button:hover {background:var(--chip)}
.nav button[aria-current=page] {background:var(--accent-tint)}
.nav button[aria-current=page]:after {background:var(--signal)}
.feature {background:var(--panel);border-left-color:var(--accent);box-shadow:3px 3px 0 rgba(var(--shadow),.045)}
.feature:before {border-color:var(--line)}
.feature .eyebrow {color:var(--accent)}
.registration {background:var(--panel)}
.collection-header {color:var(--muted)}
.collection-pager button {width:30px;height:30px}
.specimen-tab {background:var(--panel);box-shadow:2px 3px 0 rgba(var(--shadow),.06)}
.specimen-tab:hover {border-color:var(--accent)}
.specimen-tab[aria-selected=true] {border-color:var(--accent);background:color-mix(in srgb,var(--panel) 90%,var(--accent-tint));box-shadow:inset 0 0 0 2px var(--panel),inset 0 0 0 3px var(--line),2px 3px 0 rgba(var(--shadow),.08)}
.specimen-tab[aria-selected=true]:after {background:var(--accent)}
.new-specimen {color:var(--accent)}
.stage {
  background-image:linear-gradient(var(--field-grid) 1px,transparent 1px),linear-gradient(90deg,var(--field-grid) 1px,transparent 1px);
  background-size:40px 40px;
  background-position:center;
}
.plate {background:none}
.stage-id {color:var(--accent)}
.stage-id:before {content:'';display:inline-block;width:4px;height:4px;background:var(--signal);margin:0 7px 1px 0}
.hint {opacity:.75}
.field-cross {color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.coordinate-grid {opacity:.6}
.pixel-dust>i {background:var(--accent);opacity:.3}
.pixel-plant,.pixel-courier-route {visibility:hidden}
.pixel-parcel-stop {background:var(--signal);box-shadow:2px -2px 0 -1px var(--signal-soft)}
.motion-indicator i {background:var(--accent)}
.motion-indicator {color:var(--accent)}
.sprite-label b {color:var(--accent)}
.caption {color:var(--ink)}
.rail button {width:36px;height:36px;background:var(--panel)}
.rail button:hover {background:var(--accent-tint)}
.rail button.on {background:var(--accent);color:var(--accent-ink)}
.turn {background:var(--panel)}
.turn button {min-height:32px;min-width:32px}
.stage-options button {width:32px;height:32px;background:var(--panel);border:1px solid var(--line)}
.stage-options button:hover {background:var(--accent-tint);border-color:var(--accent)}
.stage-options .ico {width:14px;height:14px}
.search {height:36px;background:var(--panel)}
.search input {font-size:9px}
.guide-button {width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);background:var(--panel)}
.guide-button:hover {background:var(--accent-tint);border-color:var(--accent)}
.desk-top-button {height:36px;min-width:36px;justify-content:center}
.info>.top .social-x {width:36px;height:36px;flex-basis:36px}
.search-results {box-shadow:4px 5px 0 rgba(var(--shadow),.1)}
.card {background:var(--panel);box-shadow:inset 0 0 0 4px var(--panel),inset 0 0 0 5px var(--line)}
.detail>.eyebrow {color:var(--accent)}
.detail h1 {color:var(--ink)}
.pixel-specimen-seal {border-color:var(--line)}
.pixel-specimen-seal b {color:var(--accent)}
.tags span {background:var(--bg);border-color:var(--line)}
.tags span:first-child {background:var(--accent-tint);border-color:color-mix(in srgb,var(--accent) 24%,var(--line));color:var(--accent)}
.sequence-bar span.active {background:var(--accent)}
.sequence-bar span.active:before,.sequence-bar span.active:after {background:var(--signal)}
.agent-work-button {min-height:40px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:2px 2px 0 var(--line)}
.agent-work-button:hover {filter:none;box-shadow:3px 3px 0 var(--line);background:color-mix(in srgb,var(--accent) 90%,var(--ink))}
.closeup {min-height:76px;background:var(--panel)}
.closeup .lens {background:var(--bg)}
.closeup:hover,.closeup[aria-pressed=true] {background:var(--accent-tint)}
.specimen-footer button {min-height:32px}
.guide {background:var(--panel);color:var(--ink);box-shadow:8px 8px 0 rgba(var(--shadow),.14)}
.guide::backdrop,.agent-desk::backdrop {background:rgba(3,6,10,.72);backdrop-filter:blur(5px)}
.dialog-close {width:36px;height:36px}
.exit-focus {min-height:38px}
.toast {border-color:var(--accent);background:var(--ink);color:var(--panel)}
.agent-desk {box-shadow:6px 6px 0 rgba(0,0,0,.36)}
.desk-tabs button:hover {background:var(--accent-tint)}
.desk-field input,.desk-field textarea {background:var(--panel);box-shadow:inset 0 2px 0 rgba(var(--shadow),.035)}
.desk-field input:hover,.desk-field textarea:hover {border-color:var(--accent)}
.desk-field input[aria-invalid=true],.desk-field textarea[aria-invalid=true] {border-color:#c77c70;background:#2f2229;color:#ffb4a8}
.desk-primary {background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 color-mix(in srgb,var(--accent) 55%,var(--ink));border-color:var(--accent)}
.desk-primary:hover {background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
.desk-secondary:hover {border-color:var(--accent)}
.desk-primary,.desk-secondary {min-height:40px}
.desk-text-button,.desk-close {min-height:36px}
.desk-portrait {background:var(--bg)}
@media(max-height:800px) and (min-width:761px) {
  .nav button {min-height:36px;padding-top:8px;padding-bottom:8px}
  .agent-work-button {min-height:36px}
}
@media(max-width:760px) {
  .top {gap:6px;padding-top:12px;padding-bottom:10px}
  .search {height:44px}
  .search input {font-size:8px}
  .search-wrap {flex:1 1 auto}
  .guide-button,.desk-top-button {width:44px;height:44px;flex:0 0 44px}
  .info>.top .social-x {width:44px;height:44px;flex-basis:44px}
  .mobile-brand {font-size:23px}
  .mobile-brand sup {display:none}
  .rail button {width:40px;height:40px}
  .rail {gap:6px}
  .rail .ico {width:17px;height:17px}
  .turn {bottom:44px;padding:1px}
  .turn button {height:36px;min-height:36px;min-width:34px;padding:0 5px;font-size:7px}
  .turn #full-turn {min-width:52px;padding:0 5px}
  .scale {bottom:47px}
  .stage-options {bottom:44px;gap:4px}
  .stage-options button {width:34px;height:40px}
  .stage {background-size:32px 32px}
  .card {border-radius:0;box-shadow:none}
  .agent-work-button {min-height:44px}
  .specimen-footer button {min-height:44px}
  .desk-field input {height:44px}
  .desk-primary,.desk-secondary,.desk-text-button,.desk-close {min-height:44px}
  .dialog-close {width:44px;height:44px}
  .exit-focus {min-height:44px}
}
@media(max-width:420px) {
  .mobile-brand {font-size:21px;gap:3px}
  .mobile-brand img {width:25px;height:25px}
  .top {padding-left:12px;padding-right:12px;gap:5px}
  .search {padding:0 6px;gap:4px}
  .search input {font-size:7px}
  .guide-button,.desk-top-button {width:40px;flex-basis:40px;height:44px}
  .stage-options {gap:3px}
  .stage-options button {width:30px}
}