/* Home ----------------------------------------------------------------- */

.hero { padding: clamp(28px, 6vw, 72px) 0 0; }
.hero__k {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
  font-family: var(--face-data); font-size: var(--t-xs); letter-spacing: .24em;
  text-transform: uppercase; color: var(--grey-dim);
}
.hero__k::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.hero__sigil { width: 86px; height: 86px; border-radius: 50%; margin-bottom: 26px; box-shadow: 0 0 0 1px var(--brass-deep), 0 0 40px rgba(168,31,45,.22); }
.hero__t { font-family: var(--face-display); font-size: var(--t-mast); line-height: 1.02; margin-bottom: 8px; }
.hero__s {
  font-family: var(--face-sc); font-size: clamp(12px, 2vw, 15px);
  letter-spacing: .3em; text-transform: uppercase; color: var(--brass); margin-bottom: 26px;
}
.hero__d { font-size: var(--t-lede); color: var(--bone-dim); max-width: 60ch; }

.scale { margin: 40px 0 0; }
.scale__h {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--grey-dim);
}
.scale__bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.scale__seg { padding: 12px 10px; border-left: 3px solid var(--rank); background: var(--panel); }
.scale__seg b { display: block; font-family: var(--face-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rank); }
.scale__seg span { display: block; margin-top: 3px; font-family: var(--face-data); font-size: 10px; color: var(--grey-dim); }
.scale__foot { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--face-data); font-size: 10px; color: var(--grey-dim); }

.doors { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); margin: 34px 0 0; }
.door {
  display: block; padding: 20px; text-align: left; cursor: pointer; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px; color: var(--bone);
  transition: border-color .2s, transform .2s, background .2s;
}
.door:hover { border-color: var(--brass-deep); background: var(--panel-2); transform: translateY(-2px); }
.door__k { display: block; margin-bottom: 9px; font-family: var(--face-data); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--verd); }
.door__t { display: block; margin-bottom: 6px; font-family: var(--face-display); font-size: 20px; }
.door__d { display: block; color: var(--grey); font-size: 14.5px; line-height: 1.55; }
.door--lead { background: linear-gradient(150deg, var(--brass-wash), var(--panel) 60%); border-color: var(--brass-deep); }

.panels { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 40px 0 0; }
.panel { padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; }
.panel__t { font-family: var(--face-display); font-size: 20px; margin-bottom: 12px; }
.panel__d { color: var(--grey); font-size: 15px; }
.flux { list-style: none; margin: 0; padding: 0; }
.flux li { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 7px 0; font-size: 14.5px; color: var(--grey); }
.flux li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; margin-top: .6em; background: var(--st, var(--brass)); }
.flux b { color: var(--bone-dim); font-weight: 400; }

/* Atlas ---------------------------------------------------------------- */

.atlas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: calc(100vh - var(--mast-h)); }
.atlas__stage {
  position: relative; overflow: hidden; background: #8fb6dd;
  cursor: grab; touch-action: none;
}
.atlas__stage.is-drag { cursor: grabbing; }
.atlas__world {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  width: 4500px; height: 3000px;
}
/* max-width from base.css must not apply here: the plate is positioned in
   its own pixel space and scaled by the transform. */
.atlas__plate {
  display: block; width: 4500px; height: 3000px;
  max-width: none; user-select: none;
}
.atlas__svg { position: absolute; inset: 0; width: 4500px; height: 3000px; }
.atlas__svg path {
  fill: transparent; stroke: transparent; stroke-width: 6;
  transition: fill .18s, stroke .18s; cursor: pointer;
}
.atlas__svg path:hover { fill: rgba(200,162,74,.26); stroke: #C8A24A; }
.atlas__svg path.is-sel { fill: rgba(168,31,45,.28); stroke: var(--sigil); stroke-width: 8; }
.atlas__svg .pin { fill: transparent; stroke: transparent; cursor: pointer; }
.atlas__svg .pin:hover { fill: rgba(200,162,74,.3); }

.atlas__hud {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  display: flex; gap: 6px; align-items: center;
  padding: 6px; border-radius: 2px;
  background: rgba(12,18,28,.86); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.atlas__hud button {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--bone-dim); font-family: var(--face-data); font-size: 14px;
}
.atlas__hud button:hover { color: var(--brass); border-color: var(--brass-deep); }
.atlas__hud .z { padding: 0 10px; font-family: var(--face-data); font-size: 10px; letter-spacing: .1em; color: var(--grey); }

.atlas__tip {
  position: absolute; z-index: 6; pointer-events: none; opacity: 0;
  padding: 6px 10px; border-radius: 2px; transform: translate(-50%, -140%);
  background: rgba(12,18,28,.94); border: 1px solid var(--brass-deep); color: var(--bone);
  font-family: var(--face-sc); font-size: 13px; letter-spacing: .04em; white-space: nowrap;
  transition: opacity .14s;
}
.atlas__tip.is-on { opacity: 1; }

.atlas__side {
  overflow-y: auto; border-left: 1px solid var(--line-soft); background: var(--ink);
  padding: 22px 22px 60px;
}
.atlas__side h2 { font-family: var(--face-display); font-size: 27px; line-height: 1.15; margin-bottom: 6px; }
.atlas__kind {
  display: block; margin-bottom: 16px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
}
.atlas__lore { color: var(--bone-dim); font-size: 15.5px; }
.atlas__lore p { margin-bottom: 14px; }
.atlas__stub {
  padding: 14px 16px; border: 1px dashed var(--line); border-radius: 2px;
  color: var(--grey); font-size: 14.5px; line-height: 1.6;
}
.atlas__places { list-style: none; margin: 18px 0 0; padding: 0; }
.atlas__places li { border-bottom: 1px solid var(--line-hair); }
.atlas__places button {
  width: 100%; padding: 10px 0; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--bone-dim); font-size: 15px;
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.atlas__places button:hover { color: var(--brass); }
.atlas__places small { font-family: var(--face-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-dim); }

.atlas__find { margin-bottom: 18px; }
.atlas__index { list-style: none; margin: 0; padding: 0; }
.atlas__index li { padding: 2px 0; }
.atlas__index button {
  width: 100%; padding: 7px 0; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line-hair);
  color: var(--bone-dim); font-size: 15px;
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.atlas__index button:hover { color: var(--brass); }
.atlas__index small { font-family: var(--face-data); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-dim); }

@media (max-width: 900px) {
  .atlas { grid-template-columns: 1fr; height: auto; }
  .atlas__stage { height: 58vh; }
  .atlas__side { border-left: 0; border-top: 1px solid var(--line-soft); max-height: none; }
}

/* Off-screen copy of the map outlines, used to tell land from water on
   pages that do not show the map. */
svg.geometry {
  position: absolute; left: -9999px; top: 0;
  width: 10px; height: 10px; opacity: 0; pointer-events: none;
}

/* Print ---------------------------------------------------------------- */

@media print {
  .masthead, .rail, .veil, .gate, .close, .finder, .toast, .tool, .atlas__hud, .doors { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .grain::after { display: none; }
  body { background: #fff; color: #111; }
  .step { display: block !important; border-color: #ccc; }
  .wrap { max-width: none; }
  .chead__title, .step__h, .hero__t { color: #000; }
  p, tbody td, .lede, .step__lede { color: #222; }
  thead th { color: #000; border-bottom-color: #666; }
  .callout { background: none; border: 1px solid #999; }
  a { color: #111; border: 0; }
}

/* Story nodes ---------------------------------------------------------- */

.nodeindex { display: grid; gap: 1px; margin: 0 0 46px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.nodeindex a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 16px; background: var(--panel); border: 0; color: var(--bone);
}
.nodeindex a:hover { background: var(--panel-2); color: var(--brass); }
.nodeindex__t { font-family: var(--face-display); font-size: 18px; }
.nodeindex__w { font-family: var(--face-data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dim); }

.node { padding: 34px 0; border-top: 1px solid var(--line-soft); scroll-margin-top: 80px; }
.node:first-of-type { border-top: 0; }
.node__k {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grey-dim);
}
.node__t { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; margin-bottom: 10px; }
.node__s { font-size: var(--t-lede); color: var(--bone-dim); margin-bottom: 14px; }
.node__tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.node__tags span {
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey);
}
.node__sec { margin-top: 22px; }
.node__foot { margin-top: 22px; }

/* Nodes shown inside the atlas panel */
.atlas__nodes { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--sigil); border-radius: 2px; background: rgba(168,31,45,.06); }
.atlas__nodes .k {
  display: block; margin-bottom: 8px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sigil);
}
.atlas__nodes a { display: block; padding: 4px 0; border: 0; color: var(--bone); font-size: 15.5px; }
.atlas__nodes a:hover { color: var(--brass); }
.atlas__nodes small { display: block; color: var(--grey-dim); font-size: 13.5px; }

/* Measuring on the map */
.atlas__measure { stroke: var(--brass); stroke-width: 6; stroke-dasharray: 18 12; fill: none; }
.atlas__mpin { fill: var(--brass); stroke: var(--ink); stroke-width: 3; }
.atlas__hud button[aria-pressed="true"] { color: var(--ink); background: var(--brass); border-color: var(--brass); }

/* Map layers ----------------------------------------------------------- */

.atlas__layers {
  position: absolute; left: 14px; top: 14px; z-index: 5; display: flex; gap: 4px;
  padding: 5px; border-radius: 2px;
  background: rgba(12,18,28,.86); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.atlas__layers button {
  padding: 7px 12px; cursor: pointer; border-radius: 2px;
  background: transparent; border: 1px solid transparent; color: var(--grey);
  font-family: var(--face-data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.atlas__layers button:hover { color: var(--bone); }
.atlas__layers button[aria-pressed="true"] { background: var(--brass); color: var(--ink); }

/* Choropleth bands, used by the trade and standing layers */
.atlas__svg path.lay-none { fill: rgba(12,18,28,.55); }
.atlas__svg path.lay-low  { fill: rgba(98,172,151,.28); }
.atlas__svg path.lay-mid  { fill: rgba(200,162,74,.30); }
.atlas__svg path.lay-high { fill: rgba(203,107,65,.34); }
.atlas__svg path.lay-peak { fill: rgba(168,31,45,.42); }

.atlas__trade { pointer-events: none; }
.atlas__trade .route { pointer-events: stroke; fill: none; }
.route--road { stroke: #2b1d10; stroke-width: 7; }
.route--sea  { stroke: #16405e; stroke-width: 6; stroke-dasharray: 26 18; }
.route--gate { stroke: var(--brass); stroke-width: 5; stroke-dasharray: 6 22; stroke-linecap: round; }
.danger--unsettled { stroke: #7a5a1e; }
.danger--dangerous { stroke: #8c3a1c; }
.danger--extreme   { stroke: #8f1526; stroke-width: 9; }
.routenode { fill: #10161f; stroke: var(--bone-dim); stroke-width: 3; }
.routenode--gate { fill: var(--brass); stroke: var(--ink); }

.atlas__market {
  margin: 20px 0 0; padding: 14px 16px; border-radius: 2px;
  border: 1px solid var(--line); border-left: 2px solid var(--verd);
  background: var(--verd-wash); font-size: 15px; color: var(--bone-dim);
}
.atlas__market .k {
  display: block; margin-bottom: 8px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--verd);
}
.atlas__market p { margin: 0 0 10px; }
.atlas__market b { font-weight: 400; color: var(--bone); font-size: 13px; }

@media (max-width: 900px) {
  .atlas__layers { top: auto; bottom: 62px; left: 14px; }
}

/* The plate steps back when a data layer is on top of it. */
.atlas__world.is-data .atlas__plate { filter: grayscale(.9) brightness(.5) contrast(.85); }
.atlas__world.is-data .atlas__svg path { stroke: rgba(234,228,214,.22); stroke-width: 4; }

/* Distance key, told in Travel Beats ------------------------------------ */

.atlas__key {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  padding: 9px 11px; border-radius: 2px;
  background: rgba(12,18,28,.88); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.key__row { display: flex; align-items: center; gap: 10px; }
.key__bar {
  height: 6px; width: 120px; background: linear-gradient(90deg, var(--brass), var(--brass-deep));
  border-left: 2px solid var(--brass); border-right: 2px solid var(--brass);
  transition: width .18s;
}
.key__n {
  font-family: var(--face-data); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone); white-space: nowrap;
}
.key__modes { display: flex; gap: 3px; margin-top: 7px; }
.key__modes button {
  padding: 4px 8px; cursor: pointer; border-radius: 2px;
  background: transparent; border: 1px solid transparent; color: var(--grey-dim);
  font-family: var(--face-data); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
}
.key__modes button:hover { color: var(--bone); }
.key__modes button[aria-pressed="true"] { border-color: var(--brass-deep); color: var(--brass); }

.atlas__stage.is-planning { cursor: crosshair; }
.planleg { stroke: var(--brass); stroke-width: 9; stroke-linecap: round; opacity: .9; fill: none; }
.planleg.danger--dangerous { stroke: var(--ember); }
.planleg.danger--extreme { stroke: var(--sigil); }

.atlas__legs { list-style: none; margin: 0; padding: 0; }
.atlas__legs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line-hair); font-size: 14.5px; color: var(--bone-dim);
}
.atlas__legs small {
  font-family: var(--face-data); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey-dim); white-space: nowrap;
}
.atlas__legs small.danger--dangerous { color: var(--ember); }
.atlas__legs small.danger--extreme { color: var(--sigil); }

/* Abundance pips in the territory panel */
.atlas__market .ab {
  display: inline-block; width: 26px; height: 5px; margin: 0 5px; vertical-align: middle;
  background: var(--line); border-radius: 3px;
}
.atlas__market .ab--1 { background: linear-gradient(90deg, var(--verd) 33%, var(--line) 33%); }
.atlas__market .ab--2 { background: linear-gradient(90deg, var(--verd) 66%, var(--line) 66%); }
.atlas__market .ab--3 { background: var(--verd); }
.atlas__market i { font-style: normal; color: var(--grey-dim); font-size: 12.5px; }

/* The board -------------------------------------------------------------- */

.atlas__board {
  margin: 20px 0 0; padding: 14px 16px; border-radius: 2px;
  border: 1px solid var(--line); border-left: 2px solid var(--brass); background: var(--brass-wash);
}
.atlas__board .k {
  display: block; margin-bottom: 8px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
}
.atlas__board a { display: block; padding: 6px 0; border: 0; color: var(--bone); font-size: 15px; }
.atlas__board a:hover { color: var(--brass); }
.atlas__board small { display: block; color: var(--grey-dim); font-size: 12.5px; }

.q-rank {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 1px solid currentColor; border-radius: 50%; margin-right: 9px;
  font-family: var(--face-data); font-size: 11px; color: var(--grey);
}
.q-rank--f, .q-rank--e { color: var(--r-ordinary); }
.q-rank--d { color: var(--r-trained); }
.q-rank--c { color: var(--r-exceptional); }
.q-rank--b { color: var(--r-superhuman); }
.q-rank--a { color: var(--r-legendary); }
.q-rank--s { color: var(--r-mythic); }

.boardbar {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
  flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.boardbar .field { min-width: 200px; }

.quest { padding: 30px 0; border-top: 1px solid var(--line-soft); scroll-margin-top: 80px; }
.quest:first-of-type { border-top: 0; }
.quest[hidden] { display: none; }
.quest__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.quest__kind, .quest__where {
  font-family: var(--face-data); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-dim);
}
.quest__kind { color: var(--verd); }
.quest__t { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.16; margin-bottom: 6px; }
.quest__poster { font-family: var(--face-data); font-size: 11px; color: var(--grey-dim); margin-bottom: 14px; }
.quest__s { font-size: 17.5px; color: var(--bone-dim); }
.quest__d { color: var(--grey); font-size: 15.5px; }
.quest__foot {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px; align-items: start;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-hair);
}
.quest__foot .list li { margin-bottom: 6px; font-size: 15px; }
.quest__acts { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 620px) {
  .quest__foot { grid-template-columns: 1fr; }
  .quest__acts { flex-direction: row; flex-wrap: wrap; }
  .atlas__key { right: 8px; bottom: 62px; }
}

/* Market spheres --------------------------------------------------------- */

.sphere {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: 20px;
}
.sphere__cell { background: var(--panel); padding: 13px 15px; }
.sphere__cell .k {
  display: block; margin-bottom: 5px;
  font-family: var(--face-data); font-size: 9.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--grey-dim);
}
.sphere__cell b { font-weight: 400; font-family: var(--face-display); font-size: 19px; color: var(--bone); }
.sphere__cell i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; color: var(--grey); }

.src {
  font-family: var(--face-data); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 2px; margin-right: 6px;
  border: 1px solid currentColor; white-space: nowrap;
}
.src--local  { color: var(--verd); }
.src--sphere { color: var(--brass); }
.src--import { color: var(--grey); }

.ab { display: inline-block; width: 24px; height: 5px; background: var(--line); border-radius: 3px; vertical-align: middle; }
.ab--1 { background: linear-gradient(90deg, var(--verd) 33%, var(--line) 33%); }
.ab--2 { background: linear-gradient(90deg, var(--verd) 66%, var(--line) 66%); }
.ab--3 { background: var(--verd); }

/* Market access ramp. More is better, so this runs the opposite way to the
   trade layer: connected is green, cut off is dark. */
.atlas__svg path.acc-0 { fill: rgba(12,18,28,.72); }
.atlas__svg path.acc-1 { fill: rgba(168,31,45,.42); }
.atlas__svg path.acc-2 { fill: rgba(203,107,65,.38); }
.atlas__svg path.acc-3 { fill: rgba(200,162,74,.34); }
.atlas__svg path.acc-4 { fill: rgba(98,172,151,.30); }
.atlas__svg path.acc-5 { fill: rgba(98,172,151,.52); }

/* The trade workbench ---------------------------------------------------- */

.tradetabs { display: flex; gap: 2px; margin-left: 18px; }
.tradetabs button {
  padding: 8px 14px; cursor: pointer; border-radius: 2px;
  background: transparent; border: 1px solid transparent; color: var(--grey);
  font-family: var(--face-data); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.tradetabs button:hover { color: var(--bone); }
.tradetabs button[aria-current="true"] { color: var(--brass); border-color: var(--brass-deep); background: var(--brass-wash); }

body[data-page="trade"] main { padding: 0; }
.tradeview[hidden] { display: none !important; }
.tradeview:not(.atlas) { padding: 0 var(--gutter) 120px; }
/* The trade tables carry seven columns; the reading measure is too narrow. */
.tradeview:not(.atlas) .wrap { max-width: 1120px; }
.tradeview.atlas { height: calc(100vh - var(--mast-h)); }

.gd { font-family: var(--face-data); font-size: 10px; color: var(--grey-dim); letter-spacing: .06em; }
.gap-flag {
  font-family: var(--face-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--ember); border-radius: 2px; padding: 2px 7px;
}

.gapblock {
  margin: 0 0 12px; padding: 13px 16px; border-radius: 2px;
  border: 1px solid var(--line); border-left: 2px solid var(--ember); background: var(--ember-wash);
}
.gapblock.is-ok { border-left-color: var(--verd); background: var(--verd-wash); }
.gapblock .k {
  display: block; margin-bottom: 6px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ember);
}
.gapblock.is-ok .k { color: var(--verd); }
.gapblock p { margin: 0; font-size: 14.5px; color: var(--bone-dim); line-height: 1.7; }

td .danger--safe { color: var(--verd); }
td .danger--low { color: var(--bone-dim); }
td .danger--unsettled { color: var(--brass); }
td .danger--dangerous { color: var(--ember); }
td .danger--extreme { color: var(--sigil); }

@media (max-width: 760px) {
  .tradetabs { margin-left: 0; overflow-x: auto; }
  .tradetabs button { padding: 8px 10px; font-size: 10px; }
}

/* Whose world are you looking at ---------------------------------------- */

.pubbar {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 2px;
  border: 1px solid var(--line); border-left: 2px solid var(--verd);
  background: var(--verd-wash);
}
.pubbar .k {
  display: block; margin-bottom: 5px;
  font-family: var(--face-data); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--verd);
}
.pubbar p { margin: 0; font-size: 14.5px; color: var(--bone-dim); line-height: 1.6; }
.pubbar code {
  font-family: var(--face-data); font-size: 12.5px;
  background: var(--ink); padding: 1px 5px; border-radius: 2px; color: var(--brass);
}
.pubbar--local { border-left-color: var(--brass); background: var(--brass-wash); }
.pubbar--local .k { color: var(--brass); }
.pubbar--none { border-left-color: var(--ember); background: var(--ember-wash); }
.pubbar--none .k { color: var(--ember); }

/* Economy simulator ---------------------------------------------------- */
.simbar {
  display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:0 0 22px;
  padding:14px; border:1px solid var(--line); background:rgba(10,14,20,.58);
}
.simbar .field { min-width:170px; margin:0; }
.simbar .field.grow { flex:1 1 240px; }
.simbar select, .simbar input,
.sim-form select, .sim-form input {
  width:100%; min-height:38px; padding:8px 10px;
  border:1px solid var(--line); border-radius:2px;
  background:var(--panel); color:var(--bone); font:12px var(--face-data);
}
.simbtn {
  min-height:38px; padding:8px 13px; cursor:pointer;
  border:1px solid var(--brass-deep); border-radius:2px;
  background:var(--brass-wash); color:var(--brass);
  font:10px var(--face-data); letter-spacing:.12em; text-transform:uppercase;
}
.simbtn:hover { border-color:var(--brass); color:var(--bone); }
.simbtn--danger { border-color:var(--ember); color:var(--ember); background:var(--ember-wash); }
.simbtn--good { border-color:var(--verd-deep); color:var(--verd); background:var(--verd-wash); }

.simgrid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; margin:0 0 24px; }
.simcard {
  grid-column:span 3; min-width:0; padding:15px;
  border:1px solid var(--line); background:var(--panel);
}
.simcard.wide { grid-column:span 6; }
.simcard.full { grid-column:1/-1; }
.simcard__k {
  display:block; margin-bottom:7px; color:var(--grey-dim);
  font:9.5px var(--face-data); letter-spacing:.16em; text-transform:uppercase;
}
.simcard__v { display:block; color:var(--bone); font:23px var(--face-display); line-height:1.1; }
.simcard__s { display:block; margin-top:6px; color:var(--grey); font-size:12px; line-height:1.45; }

.simtabs { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 18px; }
.simtabs button {
  padding:7px 10px; cursor:pointer; border:1px solid var(--line); border-radius:2px;
  background:transparent; color:var(--grey); font:10px var(--face-data);
  letter-spacing:.1em; text-transform:uppercase;
}
.simtabs button[aria-pressed="true"] { color:var(--brass); border-color:var(--brass-deep); background:var(--brass-wash); }

.econ-table td, .econ-table th { vertical-align:top; }
.econ-table .goodname { min-width:180px; }
.goodfam, .meta-note {
  display:block; margin-top:3px; color:var(--grey-dim);
  font:10px var(--face-data); letter-spacing:.04em; line-height:1.35;
}
.stockbar {
  width:100%; min-width:86px; height:5px; margin-top:5px;
  border-radius:4px; overflow:hidden; background:var(--line-soft);
}
.stockbar i { display:block; height:100%; background:var(--verd); }
.stockbar.is-low i { background:var(--ember); }
.stockbar.is-high i { background:var(--brass); }

.trend-up { color:var(--ember); }
.trend-down { color:var(--verd); }
.trend-flat { color:var(--grey); }

.whybox {
  margin:14px 0 22px; padding:16px 18px;
  border:1px solid var(--line); border-left:2px solid var(--brass);
  background:var(--brass-wash);
}
.whybox h3 { margin:0 0 10px; font:19px var(--face-display); color:var(--bone); }
.whyrow {
  display:grid; grid-template-columns:minmax(150px,1fr) auto; gap:14px;
  padding:6px 0; border-bottom:1px solid var(--line-soft);
  font-size:13px; color:var(--bone-dim);
}
.whyrow:last-child { border-bottom:0; }
.whyrow b { color:var(--bone); font-family:var(--face-data); font-weight:400; }

.chain {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:5px 0;
  font:11px var(--face-data); color:var(--bone-dim);
}
.chain__good { padding:4px 7px; border:1px solid var(--line); background:var(--ink-soft); }
.chain__arr { color:var(--brass); }

.freight {
  display:inline-block; min-width:52px; text-align:center; padding:2px 6px;
  border:1px solid var(--line); border-radius:2px; color:var(--grey);
  font:9px var(--face-data); letter-spacing:.08em; text-transform:uppercase;
}
.freight--light { color:var(--verd); }
.freight--heavy, .freight--very-heavy { color:var(--ember); }

.eventcard {
  padding:14px 16px; border:1px solid var(--line); border-left:2px solid var(--ember);
  background:var(--ember-wash); margin:0 0 10px;
}
.eventcard.is-off { opacity:.56; border-left-color:var(--line); background:var(--panel); }
.eventcard__h { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.eventcard h3 { margin:0; font:18px var(--face-display); color:var(--bone); }
.eventcard p { margin:7px 0 0; color:var(--bone-dim); font-size:13px; line-height:1.55; }
.eventcard small { font:9px var(--face-data); color:var(--grey); text-transform:uppercase; letter-spacing:.1em; }

.ledgerline {
  display:grid; grid-template-columns:82px 100px 110px minmax(180px,1fr) 130px;
  gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft);
  font-size:12.5px;
}
.ledgerline .amt { font-family:var(--face-data); text-align:right; }
.ledgerline .credit { color:var(--verd); }
.ledgerline .debit { color:var(--ember); }

.chartbox { position:relative; min-height:180px; padding:10px; border:1px solid var(--line); background:rgba(8,12,18,.45); }
.chartbox svg { display:block; width:100%; height:180px; overflow:visible; }
.chartbox path { fill:none; stroke:var(--brass); stroke-width:2; vector-effect:non-scaling-stroke; }
.chartbox .gridline { stroke:var(--line-soft); stroke-width:1; }
.chartbox text { fill:var(--grey-dim); font:10px var(--face-data); }

.orderrow, .debtable {
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr auto; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.orderrow:last-child, .debtable:last-child { border-bottom:0; }

.hook {
  margin:0 0 10px; padding:13px 15px; border:1px solid var(--line); background:var(--panel);
}
.hook b { display:block; color:var(--bone); font-family:var(--face-display); font-size:17px; font-weight:400; }
.hook p { margin:5px 0 0; color:var(--bone-dim); font-size:13px; line-height:1.5; }

.inline-note { color:var(--grey-dim); font-size:12px; line-height:1.55; }
.local-only {
  display:inline-block; padding:3px 7px; border:1px solid var(--brass-deep);
  color:var(--brass); font:9px var(--face-data); letter-spacing:.12em; text-transform:uppercase;
}

@media (max-width:980px) {
  .simcard, .simcard.wide { grid-column:span 6; }
}
@media (max-width:620px) {
  .simcard, .simcard.wide { grid-column:1/-1; }
  .ledgerline { grid-template-columns:70px 1fr auto; }
  .ledgerline span:nth-child(3), .ledgerline span:nth-child(4) { grid-column:2/-1; }
  .orderrow, .debtable { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  .tradetabs { margin-left: 0; overflow-x: auto; }
  .tradetabs button { padding: 8px 10px; font-size: 10px; }
}


/* Workbench tables ------------------------------------------------------
   Seven columns of numbers do not belong in a reading measure. The
   workbench takes the full window, and the table is allowed to be wider
   than the screen and scroll rather than squeezing every word onto two
   lines. */

body.is-workbench .shell { grid-template-columns: 1fr; }
body.is-workbench #navToggle { display: inline-flex; }
body.is-workbench .rail {
  position: fixed; top: var(--mast-h); left: 0; z-index: 80;
  width: min(84vw, 320px); background: var(--panel);
  transform: translateX(-102%); transition: transform .3s var(--ease);
  box-shadow: 22px 0 60px rgba(0,0,0,.5);
}
body.is-workbench .rail.is-open { transform: none; }
body.is-workbench .veil { position: fixed; inset: var(--mast-h) 0 0; z-index: 79; display: none; }
body.is-workbench .veil.is-on { display: block; }

.tradeview:not(.atlas) .wrap { max-width: 1400px; }

.econ-table { min-width: 940px; }
.econ-table td, .econ-table th { white-space: nowrap; }
.econ-table td[data-key] { white-space: normal; min-width: 190px; }
.econ-table td[data-key] .goodfam { white-space: nowrap; }

/* A scrollable table should look scrollable. */
.tablewrap .scroll { position: relative; }
.tablewrap .scroll::-webkit-scrollbar { height: 10px; }
.tablewrap .scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.tablewrap .scroll::-webkit-scrollbar-track { background: var(--line-hair); }