/* Portal colors and shape. Keep the monitoring state colors distinct from the accent. */
:root,
#entry {
  --portal-orange:#fe6048;
  --ground:#131b24;
  --rail:#1a2531;
  --layer:#202e3c;
  --inset:#17222e;
  --raised:#283a4c;
  --line:#3a4c5d;
  --edge:#61778c;
  --text:#f2efe9;
  --muted:#b5c1ce;
  --ice:var(--portal-orange);
  --copper:var(--portal-orange);
  --active:#253545;
  --radius:24px;
  --radius-inner:16px;
}

html { background-color:var(--ground); }

body {
  background:radial-gradient(ellipse at 85% 0%,#233549 0%,transparent 50%),var(--ground);
}

#entry {
  background:radial-gradient(ellipse at 32% 44%,#26394d,transparent 62%),
    radial-gradient(ellipse at 100% 0%,#1d2c3b,transparent 48%),var(--ground);
}

#entry .entry-grid,
.obsidian-chapter .chapter-grid {
  background-image:linear-gradient(#a9c8e31a 1px,transparent 1px),linear-gradient(90deg,#a9c8e31a 1px,transparent 1px);
}

#entry .entry-glow {
  background:radial-gradient(ellipse at 42% 62%,#597da429,transparent 52%);
}

#entry .brand img,
.command-top > .brand img {
  filter:grayscale(1) sepia(.8) saturate(2.6) hue-rotate(315deg);
}

#entry .entry-secure,
.identity {
  color:var(--copper);
  border-color:var(--line);
  background:var(--active);
}

#entry .entry-secure i,
#entry .eyebrow > span { box-shadow:0 0 12px #fe604888; }
#entry .entry-title > p:last-child,
#entry .access-card label,
#entry .access-card .muted,
#entry .entry-footer { color:var(--muted); }

#entry .access-card {
  border-color:var(--line);
  background:linear-gradient(145deg,var(--layer),var(--inset));
}
#entry .access-card::before { box-shadow:0 0 16px #fe604844; }
#entry .access-card input,
#entry .entry-footer select {
  border-color:var(--edge);
  background:var(--inset);
}
#entry .access-card input::placeholder { color:#aaa0a1; }
#entry .access-card input:hover { border-color:var(--copper); }
#entry .access-card input:focus-visible {
  border-color:var(--ice);
  background:var(--inset);
  box-shadow:0 0 0 3px #fe604830;
}
#entry .access-card .primary,
#entry .access-card .primary span { color:#201719; }
#entry .access-card .primary:hover:not(:disabled) {
  border-color:var(--copper);
  background:var(--copper);
  box-shadow:0 0 22px #fe604838;
}
#entry .entry-footer i { background:linear-gradient(90deg,#fe604866,var(--line)); }

.command,
.command-top > .brand,
.command-tools { background:var(--rail); }
.command-tools button,
#palette .matches button,
kbd {
  background:var(--layer);
  border-color:var(--line);
  color:var(--text);
}
.command-tools button:hover:not(:disabled) {
  background:var(--active);
  border-color:var(--edge);
}

#navigation { background:linear-gradient(165deg,#253648,var(--rail) 48%); }
#navigation::before {
  background:repeating-linear-gradient(90deg,#fe604899 0 4px,transparent 4px 7px) left / 65px 100% no-repeat;
}
#navigation a,
.nav-group-name,
.command-top > .brand small,
.command-tools .desktop-crumb { color:var(--text); }
#navigation a:hover {
  background:var(--raised);
  color:var(--text);
}
#navigation a[aria-current] {
  border-color:var(--edge);
  background:var(--active);
  color:var(--copper);
}
#navigation .nav-icon { color:var(--ice); }
#palette,
#toast p {
  border-color:var(--edge);
  background:var(--layer);
}

#console .obsidian-chapter {
  --scene-color:var(--ice);
  --scene-light:#324a62;
  border-color:var(--line);
  background:linear-gradient(120deg,var(--ground),var(--rail) 60%,#213244);
  box-shadow:0 18px 52px #0005,inset 0 1px #a9c8e324;
}
.obsidian-chapter .chapter-copy > p:last-child,
.obsidian-chapter .scene-id { color:var(--muted); }

#view-body[data-view] {
  --view-accent:var(--ice);
  --view-accent-soft:#fe604814;
  --view-glow:#fe604817;
  --view-amber:var(--copper);
  border-color:var(--line);
  border-top-color:var(--edge);
  background:
    linear-gradient(90deg,#ffa3970d 1px,transparent 1px),
    linear-gradient(#ffa39709 1px,transparent 1px),
    radial-gradient(ellipse at 92% 0%,var(--view-glow),transparent 42%),
    var(--inset);
  background-size:36px 36px,36px 36px,auto,auto;
}
#view-body > .panel,
#view-body .duo > .panel {
  border-color:var(--line);
  border-top-color:color-mix(in srgb,var(--view-accent),transparent 52%);
  background:linear-gradient(118deg,var(--view-accent-soft),transparent 34%),var(--layer);
}

#view-body :is(input,select,textarea) {
  background-color:var(--inset);
  border-color:var(--edge);
  color:var(--text);
}
#view-body button:not(.danger) {
  background:var(--raised);
  border-color:var(--edge);
}
#view-body button:not(.danger):hover:not(:disabled) {
  background:var(--active);
  border-color:var(--copper);
}
#view-body button.primary {
  background:var(--ice);
  border-color:var(--ice);
  color:#201719;
  box-shadow:0 5px 20px #fe604826;
}
#view-body button.primary:hover:not(:disabled) {
  background:var(--copper);
  border-color:var(--copper);
}

#view-body .stat,
#view-body .tunnel,
#view-body .term,
#view-body dialog {
  border-color:var(--line);
  background:var(--inset);
}
#view-body .stat { border-top-color:color-mix(in srgb,var(--view-accent),transparent 37%); }
#view-body .stat strong { color:var(--text); }
#view-body :is(.stat small,.note,.legend,.check-label,td) { color:var(--muted); }
#view-body :is(.table-wrap,.pty-viewport,.wide-frame,.list li) { border-color:var(--line); }
#view-body th {
  color:var(--copper);
  background:var(--raised);
}
#view-body tr:nth-child(even) td { background:#ffa39706; }
#view-body tr:hover td { background:#fe604812; }
#view-body .legend b:first-child { color:var(--ice); }
#view-body .legend b:last-child { color:#ffd1c9; }
#view-body .chart { filter:drop-shadow(0 0 5px #fe60481a); }
#view-body .chart [stroke="#34405c"] { stroke:var(--line); }
#view-body .chart [fill="#b6bfd7"] { fill:var(--muted); }
#view-body .chart [stroke="#ffb084"] { stroke:var(--ice); }
#view-body .chart [fill="#ffb084"] { fill:var(--ice); }
#view-body .chart [stroke="#9dcaff"] { stroke:#ffd1c9; stroke-dasharray:7 4; }
#view-body .chart [fill="#9dcaff"] { fill:#ffd1c9; }

@media (max-width:820px) {
  #view-body[data-view] { background-size:26px 26px,26px 26px,auto,auto; }
  .obsidian-chapter .chapter-copy { background:linear-gradient(0deg,#17222ef8 22%,#17222e00 100%); }
}

/* Large surfaces and compact controls use separate radii. */
#console .obsidian-chapter,
#entry .access-card,
#view-body[data-view],
#view-body > .panel,
#view-body .duo > .panel,
#view-body dialog,
#palette {
  border-radius:var(--radius);
}

#console .obsidian-chapter .scene-corners { display:none; }

#view-body :is(.panel,.stat,.tunnel,.term,.table-wrap,.wide-frame,.pty-viewport),
#toast p,
textarea {
  border-radius:var(--radius-inner);
}

button,
.button,
#entry .access-card :is(input,button,.primary),
#entry .entry-footer select,
.command-tools button,
#palette .matches button,
#view-body .button,
#view-body .state,
#view-body :is(input:not([type=checkbox],[type=radio]),select,button),
select,
#navigation a,
#entry .entry-secure,
.identity {
  border-radius:999px;
}

@media (min-width:1050px) {
  #console { --rail-width:240px; }

  .command-top > .brand,
  .command-tools {
    height:calc(var(--bar-height) - 12px);
    border:1px solid var(--line);
    border-radius:999px;
  }

  .command-top > .brand {
    margin:6px 8px;
    padding-inline:14px;
  }

  .command-tools {
    margin:6px var(--page-gutter);
    padding-inline:16px;
  }

  #navigation {
    width:calc(100% - 16px);
    margin-inline:8px;
    border:1px solid var(--line);
    border-radius:var(--radius);
  }
}

@media (max-width:1049px) {
  .command {
    margin:6px 8px 0;
    border:1px solid var(--line);
    border-radius:var(--radius);
  }

  .command-top,
  .command-tools { border-radius:var(--radius) var(--radius) 0 0; }
  #navigation { border-radius:0 0 var(--radius) var(--radius); }
}




#console,
#stage { background:transparent; }
#view-body[data-view] { background:var(--ground); }
#entry .orbital { filter:none; }

.wire-track::before {
  background:linear-gradient(90deg,transparent,var(--portal-orange),transparent);
}
.wire-track i {
  background:radial-gradient(ellipse 19px 3px at 50% 50%,var(--portal-orange) 24%,transparent);
}

/* Borderless white content cards across all fourteen stations. */
#console #view-body[data-view] {
  --text:#242426; --muted:#59595f; --layer:#fff; --inset:#f4f4f5;
  --raised:#ededee; --line:#dddddf; --edge:#a4a4aa;
  --active:#ffe9e4; --copper:#a63727;
  border:0; box-shadow:none; color:var(--text);
}
#console #view-body .panel,
#console #view-body .panel:hover {
  background:#fff; color:var(--text); border:0; box-shadow:none;
}
#console #view-body .panel::before,
#console #view-body .panel::after { display:none; }
#console #view-body .panel :is(h1,h2,h3,h4,strong,label) { color:var(--text); }
#console #view-body :is(.muted,.note,.legend,.check-label,td,.stat small) { color:var(--muted); }
#console #view-body :is(.stat,.tunnel,.readout .tunnel) {
  background:#f4f4f5; border:0; box-shadow:none; color:var(--text);
}
#console #view-body :is(input,select,textarea) { color:var(--text); background:#f4f4f5; }
#console #view-body :is(button,.button):not(.primary):not(.danger) {
  background:#ededee; color:var(--text); box-shadow:none;
}
#console #view-body :is(button,.button):not(.primary):not(.danger):hover { background:#e2e2e5; }
#console #view-body :is(button,.button).primary { color:#201719; background:var(--portal-orange); }
#console #view-body button.danger { color:#9a2424; background:#ffe7e7; border-color:#e4acac; }
#console #view-body th { background:#eeeeef; color:#343438; }
#console #view-body .table-wrap { border:0; }
#console #view-body tr:nth-child(even) td { background:#f7f7f8; }
#console #view-body tr:hover td { background:#fff0ed; }
#console #view-body .state[data-tone=ok] { color:#176342; background:#e3f4e9; border-color:#b7dac5; }
#console #view-body .state[data-tone=warning] { color:#795000; background:#fff1cc; border-color:#e7d297; }
#console #view-body .state[data-tone=bad] { color:#a02626; background:#ffe4e4; border-color:#e9bbbb; box-shadow:none; }
#console #view-body .legend b:last-child { color:#59595f; }
#console #view-body .chart [stroke="#9dcaff"] { stroke:#59595f; }
#console #view-body .chart [fill="#9dcaff"] { fill:#59595f; }
#console #view-body .term { background:#1e1e20; color:#f2efe9; border:0; }
#console #view-body .term :is(strong,span) { color:inherit; }
#console #view-body dialog { background:#fff; color:var(--text); }
#console #view-body .panel { background:#fff; }
#console #view-body .panel.panel { background:#fff; }
#console #view-body a:not(.button) { color:#a63727; }