/* ===========================================================================
 * The bridge between the site and the tool. Written by tools/build-elite.py
 * in the HyperNode repo; it belongs to neither stylesheet it joins.
 *
 * The site's stylesheet is pulled in as a cascade layer while the tool's is
 * left unlayered, so wherever the two disagree the tool wins inside its own
 * workspace and neither file has to be edited. What a layer cannot settle is
 * a declaration the other side never makes: the site's .hero is a full
 * viewport landing section and the tool's is the panel beside the itinerary,
 * and min-height:100vh has nothing to disagree with. Those are undone in the
 * `fixups` layer, which sits above the site and below the tool, so the tool's
 * own rules still have the last word. Rules that must beat the tool - the
 * page's typeface, the tool's palette - are unlayered, at the end.
 * ======================================================================== */
@import url('/styles.css?v=7ca1c4a9') layer(site);
@layer site, fixups;

@layer fixups{
  /* .hero and .dot are the only class names the two stylesheets share. */
  .cockpit .hero{min-height:0; display:block; text-align:left; overflow:visible}
  .cockpit .hero h1{font-size:15px; font-weight:600; line-height:1.55;
    letter-spacing:0; margin-bottom:0}
  .cockpit .hero p{font-size:15px; color:inherit; max-width:none;
    margin:0 0 .8em; line-height:1.55}
  .cockpit .dot{cursor:default; transition:none}

  /* styles.css zeroes every margin with a `*` reset; the tool leaves plain
     prose to the browser's own spacing. */
  .cockpit p{margin:0 0 .8em}
  .cockpit p:last-child{margin-bottom:0}
  .cockpit li{margin-left:1.1em}

  /* The site styles bare `footer` for its own, which otherwise reaches the
     disclaimer under the itinerary. (The reverse - the tool's footer rules
     reaching the site's - is settled in the build, which scopes them.) */
  .cockpit footer{padding:0; background:none}
}

/* --- unlayered: the rest has to beat the tool ---------------------------- */

/* Both stylesheets use the names --text, --text-muted and --border. Setting
   --text on .cockpit from var(--text) would be a cycle, so the site's values
   are copied onto names the tool does not use and inherited from there. That
   is also what makes the tool follow body.light-mode without knowing that
   class exists. */
body{
  --hn-bg: var(--bg);
  --hn-surface: var(--bg-surface);
  --hn-text: var(--text);
  --hn-muted: var(--text-muted);
  --hn-border: var(--border);
  --hn-accent: var(--accent);

  /* The tool's own body rule would otherwise take the page out from under
     the navbar and the footer. */
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

.cockpit{
  --page: var(--hn-bg);
  --rail: var(--hn-surface);
  --panel: color-mix(in srgb, var(--hn-text) 4%, var(--hn-bg));
  --panel-raised: color-mix(in srgb, var(--hn-text) 8%, var(--hn-bg));
  --sunken: color-mix(in srgb, var(--hn-text) 2%, var(--hn-bg));
  --border: var(--hn-border);
  --line-strong: color-mix(in srgb, var(--hn-text) 22%, transparent);
  --text: var(--hn-text);
  --text-muted: var(--hn-muted);
  --ink-3: var(--hn-muted);
  --blue: var(--hn-accent);
  --jade-soft: color-mix(in srgb, var(--hn-accent) 14%, transparent);
  /* Accent text sits on that tint, so it is pulled toward the page's own text
     colour: lighter on the dark theme, darker on the light one. */
  --jade-ink: color-mix(in srgb, var(--hn-accent) 70%, var(--hn-text));
  --on-jade: #ffffff;

  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* Signal colours are read at a glance, so they are given per theme rather
   than derived: the dark set is far too light to read on the light ground. */
.cockpit{--green:#35d783; --amber:#ffc247; --danger:#ff6b6b}
body.light-mode .cockpit{--green:#0f7a43; --amber:#a15c10; --danger:#c02626}

/* The tier metals are colour-only classes tuned for a dark ground: platinum
   and silver are all but white, which the light theme turns into nothing. The
   light set keeps each metal recognisable and brings it up to readable
   contrast; the pill takes its ground and edge from whichever is in force. */
.cockpit{--gold:#c9a25c}
body.light-mode .cockpit{
  --gold:#8a6a1f;
}
body.light-mode .cockpit .tm-base{color:#5b6b7a}
body.light-mode .cockpit .tm-bronze{color:#8a5629}
body.light-mode .cockpit .tm-silver{color:#657079}
body.light-mode .cockpit .tm-gold{color:#8a6a1f}
body.light-mode .cockpit .tm-platinum{color:#46566a}
body.light-mode .cockpit .tm-diamond{color:#0e6d87}
body.light-mode .cockpit .tm-sapphire{color:#2a55b8}
body.light-mode .cockpit .tm-crystal{color:#2b7180}
body.light-mode .cockpit .tm-titanium{color:#5b4f7a}
body.light-mode .cockpit .tier{
  background:color-mix(in srgb, currentColor 10%, transparent);
  border-color:color-mix(in srgb, currentColor 34%, transparent);
}

/* The site's sans has no tabular figures, so columns of numbers would not
   line up; the mono is the tool's own and is already here. */
.cockpit .num{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace}
.navrail-prog .act{font-size:12.5px}

/* How to use. The page is built from this repo's words inside the tool's
   shell, so it borrows the tool's type and panels and only needs the two
   shapes the tool has no use for: a numbered step, and a label paired with
   what it means. The labels are the tool's own chips, so they cannot drift
   from what the calculator actually shows. */
.cockpit .help-steps{list-style:none; margin:22px 0 0; padding:0;
  display:grid; gap:18px; counter-reset:step}
.cockpit .help-steps li{margin:0; padding-left:42px; position:relative;
  counter-increment:step; max-width:68ch}
.cockpit .help-steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--jade-soft); color:var(--jade-ink);
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums}
.cockpit .help-steps b{display:block; margin-bottom:3px; font-size:14.5px}
.cockpit .help-defs{margin:18px 0 0; max-width:80ch;
  display:grid; grid-template-columns:auto 1fr; gap:13px 20px;
  align-items:baseline}
.cockpit .help-defs dt{margin:0}
.cockpit .help-defs dd{margin:0; color:var(--text-muted)}
@media (max-width:620px){
  /* Two columns stop being two columns long before the label wraps. */
  .cockpit .help-defs{grid-template-columns:1fr; gap:5px 0}
  .cockpit .help-defs dd{margin-bottom:14px}
}
.cockpit section p{max-width:72ch}

/* Room for the site's fixed 70px navbar. */
.cockpit{margin-top:70px; min-height:calc(100vh - 70px)}
.navrail{top:70px; height:calc(100vh - 70px)}
@media (max-width:1179px){
  /* Below this the rail is static and folds away behind its own Menu button. */
  .navrail{height:auto}
}