/* ============================================================================
   KOSMOGRAPHICA — the atlas in the Oracle shell.

   The lab established a design system: graphite ground, one type family, no
   boxes, headings that carry the hierarchy instead of containers, and a lit orb
   as the mark. This sheet carries it to the atlas pages.

   It is an override sheet on purpose. Each page keeps its own <style> block,
   because each page's layout is genuinely different (a canvas timeline, a
   molecule viewer, a tree, a table). What is shared is the ground, the type,
   the chrome and the rule that surfaces do not get fills or borders. Those
   arrive here, after the page's own rules, so the cascade settles in one place
   rather than in six.

   Loaded after each page's inline style, so equal-specificity rules below win.
   ========================================================================= */

:root {
  /* ground */
  --bg: #0c0c0d;
  --bg2: #101011;
  --panel: #141415;
  --line: #242527;
  --line2: #303133;

  /* ink */
  --text: #e8e8e6;
  --dim: #8d8e91;
  --dim2: #67686b;

  /* marks — the only saturation on the page, and only on data */
  --mint: #a9c0b4;
  --blue: #8aa4be;
  --amber: #c4a373;
  --red: #c28181;
  --violet: #a396b3;

  /* the atlas pages' own names for the same things, remapped */
  --muted: #8d8e91;
  --accent: #9fb8ab;
  --accent2: #c4a373;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

/* ------------------------------------------------------------------- ground */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* The atlas was set in Iowan/Palatino. The lab has one family, so the serif
   becomes an emphasis weight rather than a second typeface. */
.serif {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .01em;
}

a { color: var(--accent); }

/* --------------------------------------------------------------- scrollbars */
* { scrollbar-width: thin; scrollbar-color: #313234 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2c2d2f;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #434447; background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: #56575a; background-clip: content-box; }

/* ------------------------------------------------------------------- chrome */
/* One bar: orb, wordmark, then five labelled groups. The height stays at the
   atlas's 58px because the canvas pages and their sticky table headers are
   positioned against that number; the change is the ground, the type and the
   grouping, not the geometry. */
#navbar {
  height: 58px;
  padding: 0 32px;
  background: var(--bg);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}

#logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  /* The timeline page made its lockup inert because it was decoration. It is a
     link home now, so it has to accept the pointer again. */
  pointer-events: auto;
}
#logo .lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
#logo .names { display: flex; flex-direction: column; justify-content: center; }
#logo .word {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text);
}
#logo .sub {
  margin-top: 1px;
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--dim2);
  opacity: 1;
}
#logo:hover .word { color: var(--mint); }

/* The orb, lifted from the lab. One element and two pseudo-elements: a lit
   sphere, a sheen turning across it, a cooler bounce from below. */
.logo-orb {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 30%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.55) 9%,
      transparent 26%),
    radial-gradient(circle at 38% 34%,
      #eafcf5 0%, #bfeede 16%, #7fceb8 36%, #3f7d70 60%, #1d3630 82%, #0f1c19 100%);
  box-shadow:
    inset 0 0 3px rgba(255,255,255,.45),
    0 0 0 1px rgba(220,255,245,.30),
    0 0 12px rgba(150,240,205,.55),
    0 0 30px rgba(110,220,180,.30),
    0 0 60px rgba(80,190,160,.16);
  animation: orb-halo 5s ease-in-out infinite;
}
.logo-orb::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,255,255,.85) 26deg,
    rgba(255,255,255,.25) 60deg,
    transparent 110deg,
    transparent 230deg,
    rgba(180,255,235,.35) 296deg,
    transparent 330deg);
  mix-blend-mode: screen;
  opacity: .75;
  animation: orb-spin 9s linear infinite;
}
.logo-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 116%, rgba(126,244,208,.65), transparent 64%);
  opacity: .6;
  animation: orb-bounce 5s ease-in-out infinite;
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-halo {
  0%, 100% {
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.40),
      0 0 0 1px rgba(220,255,245,.22),
      0 0 9px rgba(150,240,205,.38),
      0 0 22px rgba(110,220,180,.18),
      0 0 44px rgba(80,190,160,.08);
  }
  50% {
    box-shadow:
      inset 0 0 4px rgba(255,255,255,.60),
      0 0 0 1px rgba(238,255,250,.46),
      0 0 16px rgba(180,255,225,.75),
      0 0 38px rgba(120,240,195,.42),
      0 0 78px rgba(90,210,170,.22);
  }
}
@keyframes orb-bounce { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .logo-orb, .logo-orb::before, .logo-orb::after { animation: none; }
}

/* The menu: five groups with a label each, not ten links in a row. The label
   is a divider, not a heading — it says what the next links have in common. */
#menu {
  display: flex;
  align-items: center;
  gap: 0;
  letter-spacing: 0;
  font-size: 11px;
  text-transform: none;
  flex-wrap: wrap;
}
.navgroup {
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  padding-left: 13px;
}
.navgroup + .navgroup { margin-left: 2px; }
.navgroup::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}
.navgroup:first-child { padding-left: 0; }
.navgroup:first-child::before { display: none; }
.navgroup-label {
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3f4a56;
  white-space: nowrap;
  user-select: none;
}

#menu a {
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim2);
  text-decoration: none;
  white-space: nowrap;
  padding: 3px 0;
  transition: color .14s;
}
#menu a:hover { color: var(--text); }
#menu a.here {
  color: var(--text);
  border-bottom: 0;
  padding-bottom: 3px;
  box-shadow: inset 0 -1px 0 rgba(232, 232, 230, .5);
}

@media (max-width: 1180px) {
  .navgroup-label { display: none; }
  .navgroup { padding-left: 9px; gap: 10px; }
  #navbar { padding: 0 22px; }
}
@media (max-width: 760px) {
  /* Ten links will not fit a phone, and wrapped they cost 164px of a bar that
     sits above a full-screen canvas. One row that scrolls stays at 54px. */
  #navbar { height: 54px; min-height: 0; padding: 0 18px; flex-wrap: nowrap; gap: 12px; }
  #logo .sub { display: none; }
  #logo .word { font-size: 11px; letter-spacing: .22em; }
  #menu { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; min-width: 0; gap: 0;
    scrollbar-width: none; }
  #menu::-webkit-scrollbar { display: none; }
  #menu a { font-size: 10px; padding: 3px 0; }
  .navgroup { gap: 12px; padding-left: 12px; }
  #navbar > span:last-child { flex: none; }
}

/* -------------------------------------------------------------------- type */
h1 {
  font-size: 30px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--text);
}
h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 26px 0 10px;
}
h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 6px;
  color: var(--text);
}
.dim, .muted { color: var(--dim); }
.blurb, .lede { color: var(--dim); }

/* ---------------------------------------------------------------- controls */
/* Buttons are words, not capsules. Every filter row in the atlas was a stack
   of outlined boxes; the lab settled on text with the selected item underlined
   and heavier. Inputs keep one hairline underneath so a field still looks like
   a field, and nothing else. */
input[type=text],
input[type=search],
input[type=number],
select {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
  padding: 7px 2px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
input[type=text]:focus,
input[type=search]:focus,
input[type=number]:focus,
select:focus {
  outline: none;
  border-bottom-color: var(--dim2);
}

button {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  color: var(--dim);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: color .14s;
}
button:hover { color: var(--text); }
button:focus-visible { outline: 1px solid var(--line2); outline-offset: 2px; }
button.on {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

input[type=range] { accent-color: var(--accent); }

kbd {
  background: none;
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 0 5px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
}

/* ------------------------------------------------------------- the no-boxes */
/* Surfaces lose their fills and borders. Marks keep their colour, because the
   colour is the measurement. */

/* Kosmopedia */
.card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.card:hover { border-color: var(--line); }
.card:hover .name { color: var(--mint); }
.card canvas { background: none; }
.pill {
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--amber);
  letter-spacing: .1em;
}
#detail { background: none; border: 0; border-radius: 0; padding: 0; }
#hero { background: none; }

/* University */
.stage { border-radius: 0; }
.stage:hover, .stage.on { background: none; color: var(--text); }
.stage.on { box-shadow: inset 2px 0 0 var(--accent); }
.ladder::before { background: var(--line2); }
.totals div { border: 0; background: none; padding: 8px 0; }
.exam { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 9px 0; }
.pf { background: none; border: 0; border-radius: 0; padding: 1px 0; color: var(--mint); }
.state { border: 0; border-radius: 0; padding: 0; }
.bar { background: #1a1b1d; }
.lesson a { border: 0; color: var(--amber); padding: 0; }
.lesson a:hover { background: none; color: var(--text); }
.tree summary:hover { background: none; color: var(--text); }
.tree .kids { border-left: 1px solid var(--line); }
mark { background: none; color: var(--amber); }

/* Domain tables */
table { border-collapse: collapse; }
th {
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
  color: var(--dim2);
  font-size: 10px;
  letter-spacing: .16em;
}
td { border-bottom: 1px solid var(--line); }
tr.node:hover td { background: none; }
tr.node:hover .lbl { color: var(--text); }
.st { border: 0; border-radius: 0; padding: 0; letter-spacing: .09em; }
/* The status column is 6% wide and its chips do not wrap; without the gutter
   the last one pushes the document 4px wide and the page scrolls sideways. */
td:last-child { padding-right: 0; }
mark { background: none; }

/* The simulator: a full-screen scene with a HUD. The HUD is the one surface
   that still needs a wash, because it floats over a lit 3D scene; it gets
   graphite and no border. Scoped by body.sim because chemistry has its own
   #panel that must stay transparent. */
.sim #panel {
  background: rgba(12, 12, 13, .92);
  border: 0;
  border-radius: 0;
}
.sim #panel h1 {
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.sim #panel h2 { margin: 16px 0 6px; color: var(--dim2); }
.sim #panel .cap { color: var(--dim2); }
.sim #panel .val { color: var(--text); }
.sim #readout,
.sim details {
  background: none;
  border-radius: 0;
  padding: 0;
}
.sim #readout { margin-top: 10px; }
.sim #readout th,
.sim #readout td { border-bottom: 1px solid var(--line); }
.sim #readout th { color: var(--dim2); font-weight: 500; }
.sim .chart { background: none; }
.sim #research-note {
  background: none;
  border-left: 1px solid var(--line2);
  border-radius: 0;
  padding: 0 0 0 10px;
}
.sim #research-note a,
.sim details a { color: var(--mint); }
.sim summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  font-weight: 600;
  color: var(--dim);
}
.sim summary::-webkit-details-marker { display: none; }
.sim summary::after {
  content: '▸';
  color: var(--dim2);
  transition: color .12s, transform .12s;
}
.sim details[open] > summary::after { content: '▾'; color: var(--accent); }
.sim summary:hover { color: var(--text); }
.sim summary:hover::after { color: var(--text); }

/* Chemistry */
#legend { color: var(--dim); text-shadow: none; }
#ptable div:hover { outline-color: var(--text); }

/* Universe timeline */
#drawer {
  background: var(--bg);
  border-left: 1px solid var(--line);
}
.ev { border-radius: 0; }
.ev:hover { background: rgba(255, 255, 255, .03); }
.ev.now { background: none; box-shadow: inset 2px 0 0 var(--mint); }
#folders summary:hover,
#folders .hv:hover { background: rgba(255, 255, 255, .03); }
#folders summary.sel { background: rgba(255, 255, 255, .05); }
#folders .hv.now { background: none; box-shadow: inset 2px 0 0 var(--mint); }

/* --------------------------------------------------------------- the spaces */
/* The atlas packed its content to the edges. The lab gives every column air. */
#navbar + main { margin-top: 0; }
main { padding: 32px 32px 64px; }
@media (max-width: 1180px) {
  main { padding: 24px 22px 56px; }
}

/* Kosmopedia and the University both hold a fixed sidebar column with no
   narrow-width fallback, so their content overflows a phone by 200px. Stack
   them rather than let the card grid run off the screen. */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  aside { position: static; max-height: none; }
}

/* List spacing, where the atlas relied on borders to separate rows. */
#detail td { padding: 4px 14px 4px 0; }