/* Orokin console: the shared design system for every page. See styleguide.html for each component.
   Page stylesheets (market.css, orders.css, ...) build on these tokens and components.

   Breakpoints (custom properties cannot be used in media queries, so they are written out):
     phone   max-width: 40rem   one column, stacked tables, scrolling nav and tabs
     tablet  max-width: 64rem   narrower gutters, wrapping tool bars */

:root {
  /* Lapis: the page and its surfaces, darkest first */
  --lapis-950: #0d1224;
  --lapis-900: #131a30;
  --lapis-800: #1c2542;
  --lapis-700: #27325a;
  --surface-1: #141b33; /* panels on the page */
  --surface-2: #1b2443; /* raised: inputs, cards inside a panel, dialogs */
  --surface-3: #25305a; /* hover and selected rows, popovers */
  --line: #36426d;
  --line-soft: rgba(54, 66, 109, 0.55);
  --line-hover: #4a5891;
  --hairline: rgba(201, 167, 90, 0.24); /* gold hairline around panels */
  --ivory: #ece6d6;
  --muted: #a9a593;
  --gold: #c9a75a;
  --gold-hi: #ecd497;
  --gold-soft: rgba(201, 167, 90, 0.16);
  --void: #5ed0d6;
  --void-soft: rgba(94, 208, 214, 0.12);
  --up: #7fc99a;
  --down: #e08a7a;

  /* Meaning: success, caution, failure, information */
  --ok: var(--up);
  --warn: #e3b15e;
  --danger: var(--down);
  --info: var(--void);

  /* Chart series: lowest sell order in gold, highest buy order in teal */
  --chart-sell: #b38a36;
  --chart-buy: #16a0b0;
  --chart-surface: var(--surface-2);

  --intact: #b98256;
  --exceptional: #bcc6d0;
  --flawless: #e4c66c;
  --radiant: #f2f3fb;

  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --ui: "Barlow", system-ui, sans-serif;
  --num: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2.125rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.5rem;

  /* Corners are cut, not rounded: radii stay small, chamfered surfaces cut --cut off two corners */
  --r-panel: 4px;
  --r-ctl: 3px;
  --cut: 12px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 160ms;
  --mid: 280ms;

  --surface: linear-gradient(180deg, rgba(39, 50, 90, 0.55), rgba(24, 32, 60, 0.62));
  --edge: inset 0 1px 0 rgba(236, 230, 214, 0.05);
}

* { box-sizing: border-box; }

/* Page-to-page navigation crossfades, and the nav plate slides between pages */
@view-transition { navigation: auto; }
::view-transition-group(nav-ind) { animation-duration: 420ms; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }

html { background: var(--lapis-950); color: var(--ivory); color-scheme: dark; scrollbar-color: var(--line) transparent; }

/* Backdrop: a lapis glow from above over a faint Orokin lattice */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 28rem at 50% -8rem, rgba(201, 167, 90, 0.12), transparent 70%),
    radial-gradient(50rem 40rem at 100% 0, rgba(94, 208, 214, 0.07), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c9a75a' stroke-opacity='.07'%3E%3Cpath d='M36 0 72 36 36 72 0 36Z'/%3E%3Cpath d='M36 14 58 36 36 58 14 36Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--lapis-900), var(--lapis-950) 60rem);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 30rem, rgba(0, 0, 0, 0.35) 70rem);
  mask-image: linear-gradient(180deg, #000 0, #000 30rem, rgba(0, 0, 0, 0.35) 70rem);
}

body {
  margin: 0 auto;
  max-width: 76rem;
  padding: var(--sp-4) clamp(var(--sp-3), 4vw, var(--sp-6)) 4rem;
  font: 400 var(--step-0)/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled):active { transform: scale(0.97); }
img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--void); outline-offset: 2px; }

::selection { background: rgba(201, 167, 90, 0.35); }

a { color: var(--void); }
code { font-size: 0.92em; padding: 0 0.25em; border-radius: 2px; background: rgba(13, 18, 36, 0.6); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.quiet { color: var(--muted); }
.small { font-size: var(--step--1); }
.tnum { font-family: var(--num); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- chamfered surfaces ---------- */

/* Top-left and bottom-right corners cut at --cut, a hairline drawn along each cut. Set --fill for the
   surface (not background), --cut-line for the cut colour. Zero specificity: any rule overrides it. */
:where(.chamfer, .panel, .card, .tiles > div, .totals > div, .empty, #keydlg) {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent calc(50% - 0.75px), var(--cut-line, var(--hairline)) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 0.75px), var(--cut-line, var(--hairline)) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
    var(--fill, var(--surface));
}

/* A panel: the page's main block of content */
.panel, .card {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: var(--edge), inset 0 0 0 1px rgba(13, 18, 36, 0.35);
}
.card { padding: 1.1rem 1.25rem 1rem; }
.panel > :first-child, .card > :first-child { margin-top: 0; }
/* A quieter panel inside another */
.panel.inset { --fill: rgba(13, 18, 36, 0.45); --cut: 8px; border-color: var(--line-soft); }

/* Panel heading: a display title, an optional note, and actions to the right */
.panel-head, .card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-5); margin-bottom: var(--sp-2); }
.panel-head h2, .panel-head h3, .card-head h2, .card-head h3 { margin: 0; font: 400 var(--step-1)/1.3 var(--display); letter-spacing: 0.01em; color: var(--ivory); }
.panel-head p, .card-head p { margin: 0; font-size: var(--step--1); }

/* Page sections: a gold display heading with a fading rule after it */
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-6) 0 var(--sp-3); }
.section-head h2 { margin: 0; font: 400 var(--step-2)/1.2 var(--display); color: var(--gold); }
.section-head::after { content: ""; flex: 1 1 4rem; height: 1px; background: linear-gradient(90deg, var(--hairline), transparent); }
.section-head p { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--muted); }

/* A small uppercase label above a heading or value */
.eyebrow { display: block; margin: 0 0 var(--sp-1); color: var(--gold); font: 600 var(--step--2)/1.3 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- pages ---------- */

/* Every page: <nav class="site"><div class="site-links"><a>…</a></div></nav>; version.js appends the
   version tag after the links. The links wrap onto more rows when they do not fit (narrow or portrait
   screens); on phones they scroll sideways instead and ui.js centres the current one. */
.site {
  position: relative;
  z-index: 20; /* the version popover hangs over the header */
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: 0.3rem 0.3rem 0.3rem var(--sp-3);
  border: 1px solid var(--line-soft);
  border-top-color: var(--hairline);
  border-radius: var(--r-ctl);
  /* Gold brackets on two corners; no clip-path here, so the version popover can hang below */
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 12px 1px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) 0 0 / 1px 12px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 12px 1px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 1px 12px no-repeat border-box,
    linear-gradient(180deg, rgba(27, 36, 67, 0.78), rgba(13, 18, 36, 0.74));
  backdrop-filter: blur(8px);
  box-shadow: var(--edge), 0 12px 30px -20px rgba(0, 0, 0, 0.8);
  font: 600 var(--step--2)/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* The Orokin mark before the links */
.site::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: var(--sp-1);
  rotate: 45deg;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--lapis-900), inset 0 0 0 4px var(--gold-soft), 0 0 8px rgba(201, 167, 90, 0.35);
}
.site-links {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0.15rem;
}
.site-links::-webkit-scrollbar { display: none; }
.site a {
  position: relative;
  flex: none;
  padding: 0.6rem 0.95rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fast) ease;
}
.site a:hover { color: var(--ivory); }
.site a:focus-visible { outline-offset: -2px; }
.site a[aria-current="page"] { color: var(--lapis-950); isolation: isolate; view-transition-name: nav-ind; }
/* The gold plate behind the current page; named so it slides across page loads */
.site a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: inset 0 -2px 0 rgba(13, 18, 36, 0.25);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
/* The running app version, after the page links */
.site-version {
  position: relative;
  flex: none;
  align-self: center;
  margin: 0 var(--sp-2) 0 0;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line-soft);
  color: var(--muted);
  font: 500 var(--step--2) var(--num);
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: nowrap;
}
.site-version[hidden] { display: none; }
.version-trigger { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.version-trigger:hover { color: var(--ivory); }
.version-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 7px var(--gold); }
.version-dot[hidden], .version-popover[hidden] { display: none; }
.version-popover { position: absolute; z-index: 100; top: calc(100% + 0.6rem); right: 0; width: min(27rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; padding: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--surface-2); color: var(--ivory); box-shadow: 0 12px 36px #0008; font: 500 var(--step--1)/1.4 var(--ui); letter-spacing: 0; white-space: normal; }
/* Covers the gap under the version tag, so the pointer stays over the tag on its way to the popover */
.site-version:has(> .version-popover:not([hidden]))::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: calc(0.6rem + 2px); }
.version-changelog { display: block; margin: 0 0 var(--sp-3); padding: 0.55rem 0.8rem; border: 1px solid var(--hairline); border-radius: var(--r-ctl); color: var(--gold-hi); font: 600 var(--step--2)/1.2 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; text-align: center; }
.version-changelog:hover { border-color: var(--gold); background: var(--gold-soft); }
.version-changelog[aria-current="page"] { border-color: var(--gold); background: var(--gold-soft); }
.version-popover strong { font: 400 var(--step-0) var(--display); color: var(--gold); }
.version-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); }
.version-row > span:last-child { text-align: right; font-family: var(--num); }
.version-row small { display: block; color: var(--muted); font-size: 0.68rem; margin-top: 0.25rem; overflow-wrap: anywhere; }
.version-outdated > span:last-child, .version-outdated > span:last-child small { color: var(--gold-hi); }
.version-disconnected > span:last-child { color: var(--danger); }
.version-note { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.68rem; line-height: 1.5; }
.version-note[hidden], .update-banner[hidden] { display: none; }
.update-banner { margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); padding: 0.6rem 0.9rem; border: 1px solid rgba(227, 177, 94, 0.4); border-radius: var(--r-ctl); background: rgba(227, 177, 94, 0.1); color: var(--gold-hi); font-size: var(--step--1); }
.update-banner p { margin: 0; }
.update-banner p + p { margin-top: 0.35rem; }

/* ---------- header ---------- */

/* <header class="top"><div class="who"><h1>Title</h1><p class="quiet status">…</p></div>
   <dl class="totals">…</dl></header>: the title, the connection state, then optional totals */
.top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5) 3rem;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--gold) 0, rgba(201, 167, 90, 0.35) 12rem, var(--line-soft) 40%, transparent) 1;
}
/* A gold diamond where the rule begins */
.top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--gold-hi);
  box-shadow: 0 0 10px rgba(201, 167, 90, 0.7);
}
.who { min-width: 0; }

/* The title is cast in gold: one sheen passes over it when the page opens */
.top h1 {
  margin: 0;
  font: 400 clamp(1.9rem, 4vw, 2.75rem)/1.1 var(--display);
  letter-spacing: 0.02em;
  color: var(--gold);
  background: linear-gradient(100deg, var(--gold) 0 40%, #fff3cf 50%, var(--gold) 60% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.15em; /* room for underscores and descenders inside the clipped fill */
  margin-bottom: -0.15em;
  overflow-wrap: anywhere;
  animation: sheen 1.6s 0.25s var(--ease) both;
}
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

.top p { margin: 0.45rem 0 0; font-size: var(--step--1); }

/* Connection state: a cyan dot that pings while live updates are flowing */
.link { display: inline-flex; align-items: center; gap: 0.45rem; margin-right: 0.5rem; color: var(--ivory); font-weight: 500; transition: color var(--mid) ease; }
.link::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
  transition: background var(--mid) ease, box-shadow var(--mid) ease;
}
.link[data-state="live"]::before { background: var(--void); animation: ping 2.6s ease-out infinite; }
.link[data-state="connecting"]::before { animation: blink 1s ease-in-out infinite alternate; }
.link[data-state="reconnecting"], .link[data-state="locked"] { color: var(--gold); }
.link[data-state="reconnecting"]::before, .link[data-state="locked"]::before { background: var(--gold); }
.link[data-state="reconnecting"]::before { animation: blink 0.7s ease-in-out infinite alternate; }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(94, 208, 214, 0.55), 0 0 6px var(--void); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(94, 208, 214, 0), 0 0 6px var(--void); }
}
@keyframes blink { to { opacity: 0.3; } }

/* Totals: a row of chamfered read-outs */
.totals { display: flex; gap: var(--sp-3); margin: 0; flex-wrap: wrap; }
.totals[hidden] { display: none; }
.totals > div {
  --cut: 9px;
  min-width: 8.5rem;
  padding: 0.6rem 1rem 0.65rem;
  border: 1px solid var(--hairline);
  border-top-color: rgba(201, 167, 90, 0.5);
  box-shadow: var(--edge);
}
.totals dt { font: 600 var(--step--2)/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.totals dd { margin: 0.15rem 0 0; font: 600 var(--step-2)/1.2 var(--num); font-variant-numeric: tabular-nums; border-radius: 4px; }
.totals:not([hidden]) > div { animation: rise 520ms var(--ease) backwards; }
.totals > div:nth-child(2) { animation-delay: 60ms; }
.totals > div:nth-child(3) { animation-delay: 120ms; }

/* ---------- view switcher ---------- */

/* <nav class="views" role="tablist"><button role="tab" aria-selected>Label <span class="n"></span></button>
   Motion.indicator() slides one gold bar under the selected tab; ui.js adds arrow-key navigation */
.views {
  position: relative;
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.views button {
  padding: 0.65rem 1rem 0.6rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--fast) ease, background var(--fast) ease;
}
.views button:hover { color: var(--ivory); background: linear-gradient(0deg, rgba(236, 230, 214, 0.05), transparent); }
.views button:focus-visible { outline-offset: -2px; }
.views button[aria-selected="true"] { color: var(--ivory); border-bottom-color: var(--gold); background: linear-gradient(0deg, rgba(201, 167, 90, 0.12), transparent 75%); }
/* With JS the underline is one bar that slides to the selected tab */
.views.has-ind button[aria-selected="true"] { border-bottom-color: transparent; }
.views.has-ind::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--y) - 2px);
  width: var(--w);
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(201, 167, 90, 0.6);
  transform: translateX(var(--x));
  transition: transform 420ms var(--ease), width 420ms var(--ease);
}
.views .n {
  display: inline-block;
  min-width: 1.5rem;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: 2px;
  background: var(--lapis-800);
  font: 600 var(--step--1)/1.5 var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: center;
  transition: background var(--fast) ease, color var(--fast) ease;
}
.views .n:empty { display: none; }
.views button[aria-selected="true"] .n { background: var(--gold-soft); color: var(--gold-hi); }

/* ---------- tools ---------- */

/* <div class="tools"> holds the page's controls; <div class="tool" data-for="view"> the ones of one view */
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-5);
}

.tool { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); animation: rise 320ms var(--ease); }
.tool[hidden] { display: none; }
.tool label[hidden] { display: none; }
.tool label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); color: var(--muted); }

/* A boxed row of filters */
.filters {
  gap: 0.6rem 1.25rem;
  margin-top: -0.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--hairline);
  border-radius: var(--r-panel);
  background: rgba(13, 18, 36, 0.45);
}
.filters label, .filters legend { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--muted); }
.filters .range { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.filters .range legend { float: left; margin-right: 0.15rem; padding: 0; }
.filters input[type="number"] { width: 5rem; font-size: var(--step--1); }
.filters .dir { min-width: 7.5rem; }

.search { position: relative; }
.search::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  translate: 0 -55%;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color var(--fast) ease;
}
.search::after {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: calc(50% + 0.28rem);
  width: 0.35rem;
  height: 1.5px;
  background: var(--muted);
  rotate: 45deg;
  pointer-events: none;
  transition: background var(--fast) ease;
}
.search:focus-within::before { border-color: var(--void); }
.search:focus-within::after { background: var(--void); }
.search input {
  width: min(20rem, 70vw);
  padding: 0.6rem 0.9rem 0.6rem 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: rgba(13, 18, 36, 0.7);
  transition: border-color var(--fast) ease, box-shadow var(--mid) ease, width var(--mid) var(--ease);
}
.search input:hover { border-color: var(--line-hover); }
.search input:focus { outline: none; border-color: var(--void); box-shadow: 0 0 0 4px var(--void-soft); width: min(24rem, 80vw); }
.search input::placeholder { color: var(--muted); }

/* ---------- inputs ---------- */

/* Text and number boxes look the same everywhere; .input opts any other element in. Zero specificity,
   so a page can still size or recolour its own. Numbers use the condensed tabular figures. */
:where(input:is([type="text"], [type="number"], [type="email"], [type="password"], [type="url"], [type="datetime-local"], [type="date"], :not([type])), textarea, .input) {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: rgba(13, 18, 36, 0.7);
  color: var(--ivory);
  transition: border-color var(--fast) ease, box-shadow var(--mid) ease;
}
:where(input[type="number"], input.num) { font-family: var(--num); font-variant-numeric: tabular-nums; }
:where(input, textarea, .input)::placeholder { color: var(--muted); opacity: 1; }
:where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, .input):hover { border-color: var(--line-hover); }
:where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, .input):focus { outline: none; border-color: var(--void); box-shadow: 0 0 0 4px var(--void-soft); }
:where(input, textarea, select):disabled { opacity: 0.6; cursor: default; }
input.num { width: 5.5rem; text-align: right; }

select {
  -webkit-appearance: none;
  appearance: none;
  padding: 0.4rem 1.9rem 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9a75a' stroke-width='1.5'/%3E%3C/svg%3E") right 0.65rem center / 0.6rem no-repeat, var(--surface-2);
  color: var(--ivory);
  cursor: pointer;
  transition: border-color var(--fast) ease, box-shadow var(--mid) ease;
}
select:hover { border-color: var(--line-hover); }
select:focus-visible { outline: none; border-color: var(--void); box-shadow: 0 0 0 4px var(--void-soft); }
option { background: var(--lapis-900); color: var(--ivory); }
/* List boxes (several values can be picked): no dropdown arrow, rows shown in place */
select[multiple], select[size] { padding: var(--sp-1); background: var(--surface-2); cursor: default; overflow-y: auto; }
select[multiple] option { background: none; }

.check { cursor: pointer; }
.check input, input[type="checkbox"] { accent-color: var(--void); width: 1rem; height: 1rem; cursor: pointer; }

/* ---------- buttons ---------- */

/* .primary: the one main action (gold, chamfered). .ghost: everything else. Modifiers: .small,
   .danger (destructive; add .confirm while it waits for a second click), .spin (working). .save: void
   confirm button inside a row. .toggle: a small show/hide switch button. */
.primary, .ghost, .save, .toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-ctl);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease, box-shadow var(--mid) ease, opacity var(--mid) ease;
}
.primary {
  padding: 0.55rem 1.2rem;
  border: 0;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--lapis-950);
  font-weight: 600;
  letter-spacing: 0.02em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f6e4b0, var(--gold-hi)); box-shadow: 0 4px 18px rgba(201, 167, 90, 0.35); }
/* The cut corners would clip an outside ring: draw it inside */
.primary:focus-visible { outline: 2px solid var(--lapis-950); outline-offset: -4px; }
.primary.danger { background: linear-gradient(180deg, #f0ab9d, var(--danger)); }
.ghost {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  background: rgba(13, 18, 36, 0.45);
  color: var(--ivory);
  font-size: var(--step--1);
}
.ghost:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); }
.small:is(.ghost, .primary, .toggle) { padding: 0.25rem 0.6rem; font-size: var(--step--1); }
.ghost.danger:hover:not(:disabled) { border-color: var(--danger); background: rgba(224, 138, 122, 0.1); color: var(--danger); }
.ghost.danger.confirm { border-color: var(--danger); background: rgba(224, 138, 122, 0.16); color: #f7cbc2; }
.ghost.spin::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.ghost.spin:disabled { cursor: progress; }
.save {
  padding: 0.25rem 0.7rem;
  border: 0;
  background: var(--void);
  color: var(--lapis-950);
  font-size: var(--step--1);
  font-weight: 600;
}
.save:hover:not(:disabled) { box-shadow: 0 0 14px rgba(94, 208, 214, 0.4); }
.toggle {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  background: rgba(13, 18, 36, 0.4);
  font-size: var(--step--1);
}
.toggle:hover:not(:disabled) { border-color: var(--line-hover); color: var(--ivory); }
.toggle[aria-expanded="true"], .toggle[aria-pressed="true"] { border-color: var(--void); color: var(--void); }
:is(.primary, .ghost, .save, .toggle):disabled { opacity: 0.5; cursor: default; }

/* A text button: "Show more" and the like */
.more {
  border: 0;
  border-radius: var(--r-ctl);
  background: none;
  color: var(--void);
  font-size: var(--step--1);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: background var(--fast) ease;
}
.more:hover { background: var(--void-soft); }
.more-row { text-align: center; margin: 1.25rem 0 0; }
.more-row .more { padding: 0.5rem 1.25rem; border: 1px solid rgba(94, 208, 214, 0.35); }

/* "← All items": back to the list */
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border-radius: var(--r-ctl);
  color: var(--void);
  text-decoration: none;
  font-size: var(--step--1);
  transition: background var(--fast) ease;
}
.back::before { content: "\2190"; transition: transform var(--mid) var(--ease); }
.back:hover { background: var(--void-soft); }
.back:hover::before { transform: translateX(-3px); }

/* Copy a whisper to the clipboard */
button.copy {
  padding: 0.15rem 0.5rem;
  border: 0;
  border-radius: var(--r-ctl);
  background: none;
  color: var(--void);
  font-size: var(--step--1);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) ease, color var(--fast) ease;
}
button.copy:hover { background: var(--void-soft); }
button.copy.done { color: var(--lapis-950); background: var(--void); animation: pop 260ms var(--ease); }

/* ---------- chips ---------- */

/* <div class="chips" role="group"><button aria-pressed>: a set of filters, one or several pressed.
   .chip: a static label; colour it with .gold, .ok, .warn, .danger or .info. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips button {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: rgba(13, 18, 36, 0.45);
  color: var(--muted);
  font-size: var(--step--1);
  cursor: pointer;
  transition: color var(--fast) ease, border-color var(--fast) ease, background var(--mid) ease, box-shadow var(--mid) ease, transform var(--fast) ease;
}
.chips button:hover { color: var(--ivory); border-color: var(--line-hover); }
.chips button[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(201, 167, 90, 0.22), rgba(201, 167, 90, 0.1));
  box-shadow: inset 0 -2px 0 var(--gold), 0 0 14px rgba(201, 167, 90, 0.12);
}
.chips.variants { margin-top: 1.25rem; }
.chips.ranges { margin: 1.5rem 0 1rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.45rem;
  border-radius: 2px;
  background: rgba(236, 230, 214, 0.07);
  color: var(--muted);
  font: 600 var(--step--2)/1.6 var(--ui);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.chip.gold { background: var(--gold-soft); color: var(--gold-hi); }
.chip.ok { background: rgba(127, 201, 154, 0.14); color: var(--ok); }
.chip.warn { background: rgba(227, 177, 94, 0.14); color: var(--warn); }
.chip.danger { background: rgba(224, 138, 122, 0.14); color: var(--danger); }
.chip.info { background: var(--void-soft); color: var(--info); }

/* ---------- tiles ---------- */

/* <dl class="tiles"><div><dt>Label</dt><dd>Value</dd><p class="sub">Note</p></div>…</dl>
   The first two carry the sell and buy chart colours as a top edge (override --key per tile) */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 40%), 1fr));
  gap: var(--sp-4);
  margin: 1.25rem 0 0;
}
.tiles > div {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline);
  box-shadow: var(--edge);
}
.tiles > div:nth-child(-n+2)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--key), transparent 80%);
}
.tiles > div:nth-child(1) { --key: var(--chart-sell); }
.tiles > div:nth-child(2) { --key: var(--chart-buy); }
.tiles dt { font: 600 var(--step--2)/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tiles dd { display: inline-block; margin: 0.1rem 0 0; padding: 0 0.15rem; margin-left: -0.15rem; font: 600 var(--step-3)/1.15 var(--num); font-variant-numeric: tabular-nums; }
.tiles .sub { margin: 0.2rem 0 0; font-size: var(--step--1); color: var(--muted); }

/* Price change: ▲ green, ▼ red */
.delta { font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--muted); }

/* ---------- item thumbnails ---------- */

.thumb {
  width: 3rem;
  height: 3rem;
  flex: none;
  object-fit: contain;
  border-radius: var(--r-ctl);
  background: radial-gradient(circle at 50% 35%, var(--lapis-700), var(--lapis-900));
  box-shadow: inset 0 0 0 1px rgba(236, 230, 214, 0.05);
}
.thumb.big {
  width: 5rem;
  height: 5rem;
  padding: 0.35rem;
  border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 1px rgba(201, 167, 90, 0.25), 0 0 30px -6px rgba(201, 167, 90, 0.35);
}
/* Stand-in for an item without artwork: a small diamond */
.no-thumb { flex: none; width: 1.75rem; height: 1.75rem; transform: rotate(45deg) scale(0.6); border: 1px solid var(--line); }

.none { color: var(--muted); }

/* ---------- item page ---------- */

.item-head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.item-head h2 { margin: 0; font: 400 clamp(1.75rem, 3.5vw, 2.5rem)/1.1 var(--display); color: var(--gold); }
.item-head .meta { margin: 0.3rem 0 0; color: var(--muted); font-size: var(--step--1); }
.item-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
#item-view:not([hidden]), #list-view:not([hidden]), #weapon-view:not([hidden]) { animation: rise 360ms var(--ease); }

/* While a new list is on its way, a thin void-cyan bar runs along the top of the table */
#list { position: relative; }
#list::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--void), transparent) 0 0 / 40% 100% no-repeat;
  opacity: 0;
  transition: opacity var(--mid) ease;
  pointer-events: none;
}
#list.loading::before { opacity: 1; animation: scan 1.1s ease-in-out infinite; }
#list.loading table { opacity: 0.6; }
#list table { transition: opacity var(--mid) ease; }
@keyframes scan { from { background-position: -40% 0; } to { background-position: 140% 0; } }

table.market tbody tr { cursor: pointer; }
table.market a.cell-name { color: inherit; text-decoration: none; }
table.market a.cell-name span:first-of-type { transition: color var(--fast) ease; }
table.market tbody tr:hover a.cell-name span:first-of-type { color: var(--gold-hi); }
.variant {
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 2px;
  background: var(--lapis-700);
  color: var(--muted);
  font-size: var(--step--1);
}

/* ---------- charts ---------- */

/* Series keys: <ul class="legend"><li><span class="key" style="background:…"></span>Label</li></ul> */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) 1.25rem; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 0.45rem; }
.legend .key { width: 1rem; height: 2px; border-radius: 1px; }

.chart { min-height: 260px; }
.chart[aria-busy] { opacity: 0.55; transition: opacity 0.2s; }
.chart .empty { margin-top: 0.5rem; }
/* On touch screens a sideways drag scrubs the points; an upright one still scrolls */
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-svg:focus-visible { outline: 2px solid var(--void); outline-offset: 4px; border-radius: 4px; }
.chart-svg .grid line { stroke: rgba(236, 230, 214, 0.07); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-svg text { fill: var(--muted); font: 500 11px var(--num); font-variant-numeric: tabular-nums; }
.chart-svg text.end { fill: var(--ivory); font-size: 12px; font-weight: 600; }
.chart-svg .hair { stroke: rgba(236, 230, 214, 0.35); stroke-width: 1; }
.chart-svg .bar-hl { fill: rgba(236, 230, 214, 0.06); }
.chart-svg .bar { transition: filter var(--fast) ease; }
.chart-svg .line { filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 45%, transparent)); }

/* A chart drawn for a newly opened item, range or variant: lines trace in, bands and columns rise */
.chart-svg.draw .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.1s var(--ease) 80ms forwards; }
.chart-svg.draw .band { animation: fade 700ms ease 500ms backwards; }
.chart-svg.draw .end-mark { animation: pop 360ms var(--ease) 1s backwards; transform-box: fill-box; transform-origin: center; }
.chart-svg.draw .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 560ms var(--ease) backwards; animation-delay: calc(var(--i) * 14ms); }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow { from { transform: scaleY(0); } }

/* The tooltip that follows the pointer over a chart: <div class="tip" id="tip" role="tooltip" hidden> */
.tip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  min-width: 11rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  background: rgba(13, 18, 36, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: var(--step--1);
  transition: left 90ms ease-out, top 90ms ease-out;
}
.tip:not([hidden]) { animation: fade 140ms ease; }
.tip-title { color: var(--muted); margin-bottom: 0.3rem; }
.tip-row { display: flex; align-items: center; gap: 0.5rem; line-height: 1.6; }
.tip-row strong { font: 600 var(--step-0) var(--num); font-variant-numeric: tabular-nums; color: var(--ivory); }
.tip-row span:last-child { color: var(--muted); }
.tip-key { width: 0.8rem; height: 2px; flex: none; }

/* The numbers behind a chart, folded away */
details.data { margin-top: 0.5rem; font-size: var(--step--1); interpolate-size: allow-keywords; }
details.data summary { cursor: pointer; color: var(--muted); width: max-content; max-width: 100%; transition: color var(--fast) ease; }
details.data summary:hover { color: var(--ivory); }
/* A finger-sized target on touch screens */
@media (hover: none) { details.data summary { padding: 0.5rem 0; } }
details.data::details-content { height: 0; overflow: clip; transition: height var(--mid) var(--ease), content-visibility var(--mid) allow-discrete; }
details.data[open]::details-content { height: auto; }
details.data .scroll { max-height: 18rem; overflow: auto; margin-top: 0.5rem; }
details.data thead th { background: var(--surface-2); }

/* Order books side by side */
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
.book table { font-size: var(--step--1); }
.book tbody td { padding: 0.4rem 0.5rem; }
.book thead th { background: rgba(28, 37, 66, 0.95); padding: 0.4rem 0.5rem; }

/* ---------- tables ---------- */

/* Wrap a wide table in <div class="scroll-x"> so it scrolls inside its panel, never the page.
   table.stack turns each row into a card on phones: label each <td data-label="Price">. */
.scroll-x { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.7rem 0.75rem;
  background: rgba(19, 26, 48, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font: 600 var(--step--2)/1.3 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}
th.r, td.r { text-align: right; }
thead button { all: unset; cursor: pointer; transition: color var(--fast) ease; }
thead button:hover { color: var(--ivory); }
thead button:focus-visible { outline: 2px solid var(--void); }
thead th[aria-sort] button { color: var(--gold-hi); }
thead th[aria-sort] button::after { display: inline-block; margin-left: 0.25rem; transition: transform var(--mid) var(--ease); }
thead th[aria-sort="ascending"] button::after { content: "\2193"; transform: rotate(180deg); }
thead th[aria-sort="descending"] button::after { content: "\2193"; }

tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(54, 66, 109, 0.4); transition: background var(--fast) ease; }
tbody td.r { font-family: var(--num); }
tbody tr { position: relative; }
tbody tr:hover td { background: rgba(39, 50, 90, 0.45); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.cell-name { display: flex; align-items: center; gap: 0.6rem; }
.cell-name img { width: 1.75rem; height: 1.75rem; flex: none; object-fit: contain; transition: transform var(--mid) var(--ease); }
tbody tr:hover .cell-name img { transform: scale(1.12); }

@media (max-width: 40rem) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: auto; }
  table.stack tr {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--hairline);
    border-radius: var(--r-ctl);
    background: rgba(13, 18, 36, 0.45);
  }
  table.stack td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 0.2rem 0; border: 0; text-align: right; }
  /* A long label wraps beside a wide value rather than pushing it out of the card */
  table.stack td[data-label]::before { content: attr(data-label); flex: 0 1 auto; min-width: 0; color: var(--muted); font: 600 var(--step--2)/1.6 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
  table.stack td:first-child { display: block; padding-bottom: var(--sp-1); text-align: left; }
  table.stack td:first-child[data-label]::before { content: none; }
  table.stack td:empty { display: none; }
  table.stack tbody tr:hover td { background: none; }
  table.stack td.hide-sm { display: none; }
  table.stack tbody tr:hover td:first-child { box-shadow: none; }
  table.stack tbody tr:hover { border-left-color: var(--gold); }
}

/* A value that just changed: tinted and back, green when it went up, red when down */
.tick-up, .tick-down { border-radius: 4px; }
.tick-up { animation: tick-up 1.6s ease-out; }
.tick-down { animation: tick-down 1.6s ease-out; }
@keyframes tick-up { 0%, 15% { background-color: rgba(127, 201, 154, 0.3); color: #c6f0d4; } 100% { background-color: transparent; } }
@keyframes tick-down { 0%, 15% { background-color: rgba(224, 138, 122, 0.3); color: #f7cbc2; } 100% { background-color: transparent; } }

/* ---------- part chips (Inventory and Mastery) ---------- */

.parts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.part {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-ctl);
  border-left: 3px solid var(--void);
  background: rgba(13, 18, 36, 0.6);
  font-size: var(--step--1);
}
.part .pn { color: var(--ivory); font-weight: 500; }
.part .po, .part .pr { font-family: var(--num); color: var(--muted); }
.part .pp { font-family: var(--num); color: var(--gold-hi); }
.part.have { border-left-color: var(--line); }
.part.have .pn { color: var(--muted); font-weight: 400; }
.part .pk { color: var(--up); }

/* ---------- states ---------- */

/* Nothing to show: <div class="empty"><strong>Title</strong>Explanation</div>.
   A failed load: add .error. Waiting for the first data: <div class="skeleton [cards]"><span>… */
.empty {
  --cut: 14px;
  --fill: rgba(13, 18, 36, 0.4);
  --cut-line: var(--line);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  animation: rise 420ms var(--ease) backwards;
}
.empty::before {
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0 auto var(--sp-3);
  rotate: 45deg;
  border: 1px solid var(--gold);
  box-shadow: 0 0 10px rgba(201, 167, 90, 0.3);
}
.empty strong { display: block; color: var(--ivory); font: 400 var(--step-1) var(--display); margin-bottom: 0.4rem; }
.empty.error { --cut-line: var(--danger); --fill: rgba(224, 138, 122, 0.06); border-color: rgba(224, 138, 122, 0.55); }
.empty.error::before { border-color: var(--danger); box-shadow: 0 0 10px rgba(224, 138, 122, 0.35); }
.empty.error strong { color: #f7cbc2; }

/* Placeholder rows while the first data arrives */
.skeleton { display: grid; gap: 0.35rem; }
.skeleton span {
  height: 2.6rem;
  border-radius: var(--r-ctl);
  background: linear-gradient(90deg, rgba(39, 50, 90, 0.35) 30%, rgba(54, 66, 109, 0.6) 50%, rgba(39, 50, 90, 0.35) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton span:nth-child(odd) { opacity: 0.75; }
.skeleton.cards span { height: 9rem; border-radius: 0; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* A batch of warframe.market changes (batch-progress.js): .batch-head (.batch-title, .batch-count, a
   Dismiss button once over), .batch-bar[role=progressbar] with the saved (.batch-ok) and failed
   (.batch-bad) shares, then .batch-now and, once over, .batch-errors. .running while it runs, .failed
   when anything failed. */
.batch-progress { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-soft); border-left: 2px solid var(--gold); background: rgba(13, 18, 36, 0.45); }
.batch-progress[hidden] { display: none; }
.batch-progress.failed { border-left-color: var(--danger); }
.batch-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.batch-title { flex: 1 1 14rem; min-width: 0; margin: 0; color: var(--ivory); font-size: var(--step--1); overflow-wrap: anywhere; }
.batch-progress:not(.running) .batch-title { color: var(--ok); }
.batch-progress.failed:not(.running) .batch-title { color: #f7cbc2; }
.batch-count { color: var(--gold-hi); font-family: var(--num); }
.batch-bar { display: flex; height: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--lapis-700); box-shadow: inset 0 0 0 1px var(--line-soft); }
.batch-ok, .batch-bad { flex: none; height: 100%; transition: width 420ms var(--ease); }
.batch-ok { background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.batch-progress.running .batch-ok { background: linear-gradient(100deg, var(--gold) 0 40%, #fff3cf 50%, var(--gold) 60% 100%) 100% 0 / 260% 100%; animation: shimmer 1.6s linear infinite; }
.batch-progress:not(.running):not(.failed) .batch-ok { background: var(--ok); }
.batch-bad { background: var(--danger); }
.batch-now { margin: 0; font-size: var(--step--1); overflow-wrap: anywhere; }
.batch-errors { margin: 0; padding-left: 1.1rem; max-height: 8rem; overflow-y: auto; color: #f7cbc2; font-size: var(--step--1); }

/* ---------- dialog ---------- */

/* Dialogs keep near-square corners and a drop shadow; the small #keydlg is chamfered. Wide,
   scrolling dialogs are not cut, so their scrollbar and content stay whole. */
dialog {
  --fill: linear-gradient(180deg, var(--surface-3), var(--surface-2) 6rem);
  --cut: 16px;
  --cut-line: var(--gold);
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-top-color: rgba(201, 167, 90, 0.55);
  border-radius: var(--r-panel);
  color: var(--ivory);
  max-width: min(24rem, calc(100vw - 2rem));
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), var(--edge);
  transition: opacity var(--mid) ease, transform var(--mid) var(--ease), overlay var(--mid) allow-discrete, display var(--mid) allow-discrete;
}
:where(dialog:not(#keydlg)) { background: var(--fill); }
#keydlg { border-radius: 0; }
dialog[open] { opacity: 1; transform: none; }
dialog:not([open]) { opacity: 0; transform: translateY(12px) scale(0.97); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(12px) scale(0.97); } }
dialog::backdrop { background: rgba(10, 14, 28, 0.72); backdrop-filter: blur(4px); transition: opacity var(--mid) ease, overlay var(--mid) allow-discrete, display var(--mid) allow-discrete; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
dialog h2 { margin-top: 0; font: 400 var(--step-2) var(--display); color: var(--gold); }
dialog p { font-size: var(--step--1); color: var(--muted); }
dialog input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--lapis-900);
  transition: border-color var(--fast) ease, box-shadow var(--mid) ease;
}
dialog input:focus { outline: none; border-color: var(--void); box-shadow: 0 0 0 4px var(--void-soft); }
dialog button {
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--lapis-900);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--mid) ease, transform var(--fast) ease;
}
dialog button:hover { box-shadow: 0 4px 18px rgba(201, 167, 90, 0.35); }
dialog button.ghost { border: 1px solid var(--line); background: rgba(13, 18, 36, 0.45); color: var(--ivory); font-weight: 500; }
dialog button.ghost:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); box-shadow: none; }

/* ---------- accounts (accounts.js) ---------- */

/* The account switcher after the version tag, and the banner under the nav */
.site-account { position: relative; flex: none; align-self: center; margin-right: var(--sp-1); padding-left: var(--sp-3); border-left: 1px solid var(--line-soft); text-transform: none; letter-spacing: 0; }
.site-account[hidden], .account-menu[hidden], .account-banner[hidden], .site-links a[hidden] { display: none; }
.account-trigger { display: flex; align-items: center; gap: 0.45rem; max-width: 12rem; padding: 0.4rem 0.2rem; border: 0; background: transparent; color: var(--ivory); font: 600 var(--step--1) var(--ui); cursor: pointer; }
.account-trigger span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); }
.account-dot[data-state="on"] { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.account-dot[data-state="off"] { background: var(--warn); }
.account-dot[data-state="none"] { background: transparent; border: 1px solid var(--muted); }
.account-menu { position: absolute; z-index: 100; top: calc(100% + 0.6rem); right: 0; display: grid; gap: 0.25rem; width: min(20rem, calc(100vw - 2rem)); padding: var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--surface-2); box-shadow: 0 12px 36px #0008; font: 500 var(--step--1)/1.4 var(--ui); }
.account-menu strong { font: 400 var(--step-0) var(--display); color: var(--gold); margin-bottom: 0.25rem; }
.account-item { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.55rem; padding: 0.5rem 0.6rem; border: 1px solid transparent; border-radius: var(--r-ctl); background: transparent; color: var(--ivory); text-align: left; cursor: pointer; }
.account-item small { grid-column: 2; color: var(--muted); font-size: 0.7rem; }
.account-item:hover { border-color: var(--line-hover); }
.account-item[aria-current="true"] { border-color: var(--gold); background: var(--gold-soft); }
.account-note { margin: 0; color: var(--muted); }
.account-links { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); }
.account-links a { padding: 0; color: var(--void); text-decoration: none; }
.account-links a:hover { text-decoration: underline; }
.account-links a[aria-current="page"] { color: var(--gold-hi); }
.account-signout { padding: 0; border: 0; background: none; color: var(--danger); font: inherit; cursor: pointer; }
.account-banner { margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); padding: 0.6rem 0.9rem; border: 1px solid rgba(227, 177, 94, 0.4); border-radius: var(--r-ctl); background: rgba(227, 177, 94, 0.1); color: var(--warn); font-size: var(--step--1); }
.account-install { margin: 0.5rem 0.75rem 0 0; }
.account-install-note { display: inline-block; margin-top: 0.5rem; color: var(--muted); }
.account-install-note code { color: var(--ivory); }
.dialog-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- shared motion ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.9); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .link::before { animation: none !important; }
  .top h1 { animation: none; background-position: 0 0; }
  @view-transition { navigation: none; }
}

/* ---------- tablet and phone ---------- */

@media (max-width: 64rem) {
  .tools, .tool { gap: var(--sp-3) var(--sp-4); }
  /* Tighter cells, so wide tables still fit their panel */
  thead th, tbody td { padding-left: 0.5rem; padding-right: 0.5rem; }
}

@media (max-width: 40rem) {
  body { padding-top: var(--sp-2); }
  .site { margin-bottom: var(--sp-4); padding-left: var(--sp-2); }
  .site::before { display: none; }
  /* The links scroll sideways under soft edges rather than stacking several rows */
  .site-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.9rem, #000 calc(100% - 0.9rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 0.9rem, #000 calc(100% - 0.9rem), transparent); padding: 0 0.6rem; }
  .site a { padding: 0.6rem 0.75rem; }
  .site-version { margin-right: var(--sp-1); padding-left: var(--sp-2); }
  .top { gap: var(--sp-4); margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); }
  .totals { gap: 0.5rem; width: 100%; }
  .totals > div { flex: 1 1 8rem; min-width: 0; padding: 0.5rem 0.75rem; }
  .totals dd { font-size: var(--step-1); }
  /* Tabs scroll sideways instead of wrapping onto several lines */
  .views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .views::-webkit-scrollbar { display: none; }
  .views button { flex: none; padding: 0.6rem 0.8rem 0.55rem; }
  .search, .search input, .search input:focus { width: 100%; }
  .tools > .search { flex: 1 1 100%; }
  .panel, .card { padding: var(--sp-3) var(--sp-4); }
  .tiles { gap: var(--sp-2); }
  .tiles > div { padding: 0.7rem 0.8rem; }
  .tiles dd { font-size: var(--step-2); }
  .item-actions { margin-left: 0; }
  .hide-sm { display: none; }
}