@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Tomorrow";
  src: url("assets/fonts/tomorrow-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Tomorrow";
  src: url("assets/fonts/tomorrow-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Tomorrow";
  src: url("assets/fonts/tomorrow-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Victor Mono";
  src: url("assets/fonts/victor-mono-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Victor Mono";
  src: url("assets/fonts/victor-mono-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Victor Mono";
  src: url("assets/fonts/victor-mono-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --u: calc(100vw / 1920);
  --paper: #013132;
  --nav-ground: #062A2E;
  --ink-panel: #01282D;
  --surface: #0A3439;
  --surface-raised: #0F3E44;
  --text: #E3F0F2;
  --muted: #80B1B0;
  --mint: #B8F2E6;
  --orange: #F77F00;
  --hairline: #2A5558;
  --rule-hairline-width: max(1px, calc(1.1 * var(--u)));
  --rule-panel-width: max(1px, calc(2.3 * var(--u)));
  --rule-soft-width: max(1px, calc(1.3 * var(--u)));
  --rule-double-width: max(1px, calc(1.8 * var(--u)));
  --rule-hairline-color: #2A5558;
  --rule-panel-color: #5D8F8F;
  --rule-card-color: #3D6D6D;
  --rule-input-color: #83A7A9;
  --rule-row-color: #3D7979;
  --rule-copy-color: #C0CECF;
  --rule-active-color: #F77F00;
  --rule-isolation-color: #75B0B2;
  --thin: var(--rule-hairline-width);
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-long: 500ms;
  --motion-route: 140ms;
  --motion-ease: cubic-bezier(.2,.78,.2,1);
}

* { box-sizing: border-box; }

html {
  min-width: 0;
  background: var(--paper);
  color-scheme: dark;
  font-size: max(12px, calc(16 * var(--u)));
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--text);
  font-family: Lexend, sans-serif;
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1.35;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

.page-frame {
  width: calc(100% - calc(107 * var(--u)));
  min-height: calc(100vh - calc(208 * var(--u)));
  margin-right: calc(53 * var(--u));
  margin-left: calc(54 * var(--u));
  padding: 0;
  background: transparent;
}

.page-with-rail {
  display: grid;
  grid-template-columns: calc(264 * var(--u)) minmax(0, 1fr);
  align-items: stretch;
  min-height: inherit;
}

.page-rail { align-self: stretch; min-height: 100%; }

/* Border vocabulary. Route fragments use these classes and never declare borders. */
.rule-panel { border: var(--rule-panel-width) solid var(--rule-panel-color); }
.rule-card { border: var(--rule-panel-width) solid var(--rule-card-color); }
.rule-input { border: var(--rule-panel-width) solid var(--rule-input-color); }
.rule-row { border-bottom: var(--rule-hairline-width) solid var(--rule-row-color); }
.rule-table { border: var(--rule-panel-width) solid var(--rule-row-color); }
.rule-table-rows tbody tr:not(:last-child) > * { border-bottom: var(--rule-hairline-width) solid var(--rule-row-color); }
.rule-table-grid :is(th, td) + :is(th, td) { border-left: var(--rule-hairline-width) solid var(--rule-row-color); }
.rule-copy { border: var(--rule-panel-width) solid var(--rule-copy-color); }
.rule-isolation { border: var(--rule-panel-width) dashed var(--rule-isolation-color); }
.rule-active { border: var(--rule-panel-width) solid var(--rule-active-color); }
.rule-control { border: 0; outline: 0; }
.rule-panel.rule-control {
  border: 0;
  border-top: var(--rule-panel-width) solid var(--rule-panel-color);
}
.rule-control[data-roll-row][data-open="true"] {
  border-bottom: var(--rule-hairline-width) solid var(--rule-row-color);
}
.rule-shadowless { box-shadow: none !important; }
.rule-inset-bottom { position: relative; border-bottom: 0; }
.rule-inset-bottom::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: var(--rule-bottom-inset, 0);
  left: 0;
  border-bottom: var(--rule-panel-width) solid var(--rule-panel-color);
  pointer-events: none;
}
.rule-divider { border-bottom: var(--rule-hairline-width) solid var(--rule-hairline-color); }
.rule-double { border: var(--rule-double-width) double var(--rule-panel-color); }
.rule-stack > .rule-row + .rule-row { border-top: 0; }
.rule-sheet-qlines,
.rule-through-row { position: relative; }
.rule-sheet-qlines::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(71 * var(--u));
  right: 0;
  left: 0;
  height: var(--rule-panel-width);
  background: #255150;
  box-shadow:
    0 calc(132 * var(--u)) 0 #2A5756,
    0 calc(262 * var(--u)) 0 #346060,
    0 calc(395 * var(--u)) 0 #2E5957;
  pointer-events: none;
}
.rule-through-row::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(56 * var(--u));
  right: 0;
  left: 0;
  height: var(--rule-panel-width);
  background: var(--rule-panel-color);
  pointer-events: none;
}
.rule-fill-right-bottom { position: relative; }
.rule-fill-right-bottom::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--rule-panel-width);
  background: var(--rule-panel-color);
  pointer-events: none;
}
.rule-input > :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
}

header[data-chrome="nav"] {
  position: relative;
  z-index: 20;
  width: 100%;
  height: calc(104 * var(--u));
  padding: 0 calc(48 * var(--u));
  display: grid;
  grid-template-columns: calc(324 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(22 * var(--u));
  border-bottom: var(--rule-hairline-width) solid #2F5A5D;
  background: var(--nav-ground);
  font: max(12px, calc(15 * var(--u))) Lexend, sans-serif;
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  color: #E6F1EE;
  text-decoration: none;
  font: 600 max(18px, calc(24 * var(--u))) Tomorrow, sans-serif;
  letter-spacing: .05em;
  white-space: nowrap;
}

.brand img {
  width: calc(74 * var(--u));
  height: calc(54 * var(--u));
  object-fit: contain;
}

.nav-drawer {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.routes,
.actions {
  height: 100%;
  display: flex;
  align-items: center;
}

.routes { justify-content: flex-start; }

.routes a,
.actions a {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 calc(16 * var(--u));
  border-left: var(--rule-hairline-width) solid #2F5A5D;
  color: #8DAAA6;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-fast) linear;
}

.routes a::before,
.actions a::before {
  content: "";
  position: absolute;
  right: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  left: calc(8 * var(--u));
  height: var(--rule-hairline-width);
  background: var(--mint);
  opacity: 0;
  transform: scaleX(.25);
  transition: opacity var(--motion-fast) linear, transform var(--motion-fast) var(--motion-ease);
}

.routes a:hover::before,
.routes a:focus-visible::before,
.actions a:not([aria-disabled="true"]):hover::before,
.actions a:not([aria-disabled="true"]):focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.routes a.is-active { color: #E6F1EE; }

.routes a.is-active::after {
  content: "";
  position: absolute;
  right: calc(12 * var(--u));
  bottom: 0;
  left: calc(12 * var(--u));
  height: calc(3 * var(--u));
  background: var(--orange);
}

[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

.nav-toggle { display: none; }

footer[data-chrome="footer"] {
  width: 100%;
  min-height: calc(104 * var(--u));
  padding: calc(16 * var(--u)) calc(48 * var(--u));
  background: var(--nav-ground);
  border-top: var(--rule-hairline-width) dashed #2F5A5D;
  display: grid;
  grid-template-columns: 1.15fr 1fr auto;
  align-items: center;
  gap: calc(28 * var(--u));
  font: max(12px, calc(13 * var(--u))) Lexend, sans-serif;
}

.footer-brand {
  min-width: 0;
  display: grid;
  grid-template-columns: calc(60 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(14 * var(--u));
}

.footer-brand img {
  width: calc(60 * var(--u));
  height: calc(44 * var(--u));
  object-fit: contain;
}

.boundary { font-size: max(12px, calc(14 * var(--u))); line-height: 1.45; }
.station,
.source { font: max(12px, calc(12 * var(--u)))/1.55 "Victor Mono", monospace; color: #8DAAA6; }
.links { display: flex; align-items: center; gap: calc(18 * var(--u)); white-space: nowrap; }
.links > * { padding-left: calc(18 * var(--u)); border-left: var(--rule-hairline-width) solid #2F5A5D; }
.links a { color: inherit; text-decoration: none; }
.copy { padding-right: 0; border-right: 0; border-top: 0; border-bottom: 0; background: transparent; color: #B8F2E6; cursor: pointer; }
.copy:disabled { cursor: not-allowed; opacity: .55; }
.ca { color: #F77F00; }

/* Quarantine-berth motion: gates close horizontally and traces sweep outward. */
[data-berth-reveal] {
  opacity: .9;
  transform: scaleX(.992);
  transform-origin: center;
  transition: opacity var(--motion-route) linear, transform var(--motion-route) var(--motion-ease);
}
[data-berth-reveal].is-in-view { opacity: 1; transform: scaleX(1); }
[data-trace-grow] { transform: scaleX(0); transform-origin: left; transition: transform var(--motion-long) var(--motion-ease); }
[data-trace-grow].is-in-view { transform: scaleX(1); }
[data-live-tick] { transform-origin: center; transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) linear; }
[data-live-tick].is-ticking { transform: scaleX(.96); opacity: .72; }
main { transform-origin: center top; transition: opacity var(--motion-route) linear, transform var(--motion-route) var(--motion-ease); }
main:focus { outline: 0; }
main.is-leaving { opacity: .9; transform: scaleX(.996); }

@media (min-width: 1280px) and (max-width: 1600px) {
  footer[data-chrome="footer"] { grid-template-columns: .85fr 1.3fr auto; }
}

@media (max-width: 1023px) {
  html,
  body { font-size: 14px; }
  .page-frame {
    width: calc(100% - calc(107 * var(--u)));
    min-height: calc(100vh - 176px);
  }
  header[data-chrome="nav"] {
    height: 72px;
    padding: 0 calc(54 * var(--u));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }
  .brand { gap: 9px; font-size: 18px; }
  .brand img { width: 49px; height: 42px; }
  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    background: transparent;
    color: var(--text);
  }
  .nav-drawer {
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    height: auto;
    display: block;
    padding: 0 calc(54 * var(--u)) 14px;
    border-bottom: var(--rule-panel-width) solid #2F5A5D;
    background: var(--nav-ground);
    opacity: 0;
    pointer-events: none;
    transform: scaleY(.94);
    transform-origin: top;
    transition: opacity var(--motion-base) linear, transform var(--motion-base) var(--motion-ease);
  }
  header[data-open="true"] .nav-drawer { opacity: 1; pointer-events: auto; transform: scaleY(1); }
  .routes,
  .actions { height: auto; display: grid; grid-template-columns: 1fr; }
  .routes a,
  .actions a { min-height: 44px; padding: 0 10px; border-left: 0; border-bottom: var(--rule-hairline-width) solid #2F5A5D; }
  .actions { grid-template-columns: 1fr 1fr; }
  footer[data-chrome="footer"] {
    min-height: 104px;
    padding: 16px calc(54 * var(--u));
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .footer-brand { grid-template-columns: 50px 1fr; }
  .footer-brand img { width: 50px; height: 38px; }
  .links { flex-wrap: wrap; gap: 10px; }
  .links > * { padding-left: 10px; }
  .page-with-rail { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
  [data-berth-reveal],
  [data-trace-grow],
  [data-live-tick],
  main,
  main.is-leaving { opacity: 1 !important; transform: none !important; }
}