@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/marcellus-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-condensed-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-condensed-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-condensed-latin-700-normal.woff2") format("woff2");
}

/* Friz Quadrata has lining figures and Marcellus has not, so a computer with
   Optima draws the digits in words with it, as the addon's previews do. */
@font-face {
  font-family: "Friz digits";
  src: local("Optima Regular"), local("Optima");
  unicode-range: U+0030-0039;
}

/* The game's two faces: Friz Quadrata for words, Marcellus standing in for
   it, and Arial Narrow for figures, Roboto Condensed where it is missing.
   Sizes are the addon window's. The dark theme is the default whatever the
   system prefers; the title bar's button switches it. */
:root {
  color-scheme: light;
  --serif: "Friz digits", "Marcellus", Georgia, serif;
  --sans: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --top: 46px;
  --rail-width: 160px;
  --class-warrior: #8a5f33;
  --class-paladin: #c4135f;
  --class-hunter: #4f6f22;
  --class-rogue: #6e6600;
  --class-priest: #6b6457;
  --class-deathknight: #b81c36;
  --class-shaman: #0065c8;
  --class-mage: #0e6f88;
  --class-warlock: #5557d6;
  --class-monk: #007848;
  --class-druid: #a64e00;
  --class-demonhunter: #942bb7;
  --class-evoker: #277565;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --class-warrior: #c69b6d;
  --class-paladin: #f48cba;
  --class-hunter: #aad372;
  --class-rogue: #fff468;
  --class-priest: #ffffff;
  --class-deathknight: #e44d67;
  --class-shaman: #0081fe;
  --class-mage: #3fc7eb;
  --class-warlock: #8788ee;
  --class-monk: #00ff98;
  --class-druid: #ff7c0a;
  --class-demonhunter: #b95cd8;
  --class-evoker: #33937f;
}

/* The addon's palettes, written by scripts/web-palette.py. Edit UI.lua and run it again. */

:root {
  --page: #ffffff;
  --rail: #ffffce;
  --panel: #ffffff;
  --field: #ffffff;
  --line: #efd6a1;
  --edge: #dac089;
  --ink: #41392d;
  --ink-soft: #60513b;
  --muted: #786850;
  --gold: #c08621;
  --gold-ink: #97691c;
  --gold-edge: #c09945;
  --brand: #b47c26;
  --tint: rgb(192 134 33 / 14%);
  --tint-strong: rgb(192 134 33 / 16%);
  --press: #ffffca;
  --top-1: #ffffd1;
  --top-2: #fff4a5;
  --button-1: #ffffd3;
  --button-2: #fff292;
  --button-ink: #4c3e1f;
  --series-1: #c08621;
  --series-2: #6e6e7a;
  --compare-1: #c08621;
  --compare-2: #1a64dc;
  --compare-3: #2c7c32;
  --compare-4: #963ddc;
  --compare-5: #c5392d;
  --compare-6: #6e6e7a;
  --up: #2c7c32;
  --down: #c5392d;
  --warn: #b4551a;
  --info: #1a64dc;
  --coin-g: #96701a;
  --coin-s: #6e6e7a;
  --coin-c: #b95532;
  --q-poor: #767676;
  --q-common: #41392d;
  --q-uncommon: #2b7c23;
  --q-rare: #1a64dc;
  --q-epic: #963ddc;
  --q-legendary: #b4551a;
  --q-artifact: #836928;
  --q-heirloom: #1a7391;
}

:root[data-theme="dark"] {
  --page: #2f2c27;
  --rail: #38332d;
  --panel: #3d3832;
  --field: #292723;
  --line: #605544;
  --edge: #7f6f52;
  --ink: #ffffff;
  --ink-soft: #fffff5;
  --muted: #e8d9bf;
  --gold: #fff872;
  --gold-ink: #ffffc0;
  --gold-edge: #c09945;
  --brand: #fff873;
  --tint: rgb(255 248 114 / 8%);
  --tint-strong: rgb(255 248 114 / 16%);
  --press: #605032;
  --top-1: #4f4537;
  --top-2: #433b31;
  --button-1: #605032;
  --button-2: #483d29;
  --button-ink: #ffffc0;
  --series-1: #fff872;
  --series-2: #ffffff;
  --compare-1: #fff872;
  --compare-2: #63d4ff;
  --compare-3: #8cff86;
  --compare-4: #ffb0ff;
  --compare-5: #ff9d86;
  --compare-6: #ffffff;
  --up: #8cff86;
  --down: #ff9d86;
  --warn: #ffb41a;
  --info: #63d4ff;
  --coin-g: #ffff76;
  --coin-s: #ffffff;
  --coin-c: #ffe08c;
  --q-poor: #dedede;
  --q-common: #ffffff;
  --q-uncommon: #3eff1a;
  --q-rare: #63d4ff;
  --q-epic: #ffb0ff;
  --q-legendary: #ffb41a;
  --q-artifact: #ffffb4;
  --q-heirloom: #1affff;
}

/* End of the addon's palettes. */

* {
  box-sizing: border-box;
}

/* Panels and grids set display, which would otherwise show what app.js hides. */
[hidden] {
  display: none !important;
}

/* Keeps what scrollIntoView brings up clear of the sticky title bar. */
@media (min-width: 761px) {
  html {
    scroll-padding-top: calc(var(--top) + 8px);
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 14px/1.35 var(--serif);
}

p {
  margin: 0;
}

a {
  color: var(--gold-ink);
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.muted,
.sub {
  color: var(--muted);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
}

h1 {
  font-size: 24px;
  line-height: 1.2;
}

select,
input,
button {
  font: inherit;
  color: var(--ink);
}

input,
select {
  min-width: 0;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--edge);
  border-radius: 0;
  background: var(--field);
}

input::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* The band across the top of the addon's window: gilded along its top edge,
   its crest, name and version, and the account's gold and the theme at the right. */
.titlebar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: var(--top);
  padding: 0 14px;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(var(--top-1), var(--top-2));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--brand);
  font: 24px/1 var(--serif);
  text-decoration: none;
  white-space: nowrap;
}

.crest {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #fff3c4 0, #e9b949 34%, #a8761a 72%, #8a5f10 100%);
  box-shadow: 0 0 0 2px #a8761a, 0 0 6px rgb(233 185 73 / 40%);
}

.version {
  align-self: flex-end;
  margin: 0 6px 12px 0;
  color: var(--muted);
  font-size: 11px;
}

.purse {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid var(--edge);
  background: var(--field);
  white-space: nowrap;
}

.purse-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

#purse-gold {
  font: 15px var(--sans);
}

/* The addon's square buttons in the title bar. */
.icon-button {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--edge);
  background: var(--page);
  color: var(--ink-soft);
  cursor: pointer;
}

.icon-button:hover {
  background: linear-gradient(var(--tint), var(--tint)), var(--page);
}

#theme {
  margin-left: 9px;
}

.purse[hidden] + #theme {
  margin-left: auto;
}

#theme svg {
  width: 14px;
  height: 14px;
}

#theme circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#theme path {
  fill: currentColor;
}

/* A choice framed like the addon's chips, its caret after it. */
.chip {
  position: relative;
  display: inline-block;
}

.chip::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--gold);
  font: 8px var(--sans);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Sized to the choice on show, as the addon sizes a chip, where the browser can. */
.chip select {
  field-sizing: content;
  height: 24px;
  padding: 0 24px 0 9px;
  background: var(--page);
  color: var(--ink-soft);
  font-size: 13px;
  appearance: none;
  cursor: pointer;
}

.chip select:hover,
.chip-button:hover {
  background: linear-gradient(var(--tint), var(--tint)), var(--page);
}

.chip-button {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--edge);
  background: var(--page);
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
}

.realm-picker select {
  max-width: 240px;
}

/* The window right of the rail, as the addon lays it out. */
.shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: calc(100vh - var(--top));
  background: linear-gradient(90deg, var(--rail) calc(var(--rail-width) - 1px), var(--edge) calc(var(--rail-width) - 1px) var(--rail-width), transparent var(--rail-width));
}

.rail {
  position: sticky;
  top: var(--top);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--top));
  padding-top: 10px;
  overflow-y: auto;
  background: var(--rail);
  box-shadow: inset -1px 0 0 var(--edge);
}

.views {
  display: flex;
  flex-direction: column;
}

.views a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 14px;
  color: var(--ink-soft);
  font: 16px var(--serif);
  text-decoration: none;
}

.views a:hover {
  background: var(--tint);
}

.views a[aria-current="page"] {
  color: var(--gold-ink);
  background: linear-gradient(90deg, var(--tint-strong), transparent);
  box-shadow: inset 3px 0 0 var(--gold);
}

.views svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.views a:focus-visible {
  outline-offset: -2px;
}

.views .group {
  margin: 10px 0 0;
  padding: 10px 14px 4px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

/* The rail's foot: the last scan, the account, and a button the width of the
   addon's Reload. */
.rail-foot {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 12px 14px 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.rail-foot strong {
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
}

.rail-foot .button {
  text-align: center;
}

/* The addon's gold button: shaded from its top colour down, in a darker edge. */
.button {
  display: inline-block;
  min-height: 26px;
  padding: 3px 14px;
  border: 1px solid var(--gold-edge);
  background: linear-gradient(var(--button-1), var(--button-2));
  color: var(--button-ink);
  font: 14px/18px var(--serif);
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%)), linear-gradient(var(--tint-strong), var(--tint-strong)), linear-gradient(var(--button-1), var(--button-2));
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--gold);
}

.text-button {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--gold-ink);
  font-size: 13px;
  cursor: pointer;
}

.text-button:hover {
  text-decoration: underline;
}

/* The addon's segmented control: a line around buttons that frame their text. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--edge);
  background: var(--page);
}

.segmented button {
  flex: 1 1 auto;
  min-height: 20px;
  padding: 1px 11px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.segmented button + button {
  border-left: 1px solid var(--edge);
}

.segmented button:hover {
  color: var(--ink);
}

.segmented button[aria-pressed="true"] {
  background: var(--press);
  color: var(--gold-ink);
}

.segmented button:focus-visible {
  outline-offset: -2px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 1680px;
  padding: 6px 16px 16px;
}

/* The tabs of the hub on show, over a rule, as the addon's window has them. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1px;
  border-bottom: 1px solid var(--line);
}

.tabs a {
  margin-bottom: -1px;
  padding: 4px 14px 3px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font: 16px/20px var(--serif);
  text-decoration: none;
}

.tabs a:hover {
  background: var(--tint);
}

.tabs a[aria-current="page"] {
  border-bottom-color: var(--gold);
  color: var(--gold-ink);
}

.tabs a:focus-visible {
  outline-offset: -2px;
}

.tools {
  display: grid;
  gap: 10px;
}

/* The title line: the view's name, a muted line after it, and at its right
   a choice or an aside. */
.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 28px;
}

.pagehead .sub {
  font-size: 12px;
}

.pagehead > :is(.badge, .segmented, .chip, .aside) {
  align-self: center;
  margin-left: auto;
}

.pagehead > :is(.badge, .segmented, .chip, .aside):not([hidden]) ~ :is(.badge, .segmented, .chip, .aside) {
  margin-left: 0;
}

.aside {
  color: var(--muted);
  font-size: 12px;
}

.aside .money {
  color: var(--ink);
}

/* The addon's badge: a label and a value side by side in one frame. */
.badge {
  display: inline-flex;
  border: 1px solid var(--edge);
  background: var(--page);
  font-size: 12px;
  white-space: nowrap;
}

.badge > * {
  padding: 1px 11px;
}

.badge > span:first-child {
  color: var(--muted);
}

.badge .money {
  border-left: 1px solid var(--edge);
  background: var(--press);
  font-size: 14px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 17px;
}

.search input {
  width: 240px;
}

.message {
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--gold);
  background: var(--panel);
}

main {
  display: grid;
  gap: 10px;
  align-items: start;
}

/* A panel: the panel colour inside a line. */
.panel {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.panel h3 {
  color: var(--gold-ink);
  font-size: 16px;
}

/* A heading across the top of a panel, under a rule. */
.panel .heading {
  padding: 5px 9px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--gold-ink);
  font-size: 16px;
}

/* Panels whose tables run edge to edge. */
.list-panel {
  padding: 0;
}

.list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.panel-note {
  margin: 8px 10px;
  font-size: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* The addon's table: headers in narrow capitals over a rule, rows of a fixed
   height between lines, words in Friz and figures narrow. */
th,
td {
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

td {
  height: 25px;
  font-size: 14px;
  white-space: nowrap;
}

th {
  height: 28px;
  border-bottom-color: var(--edge);
  color: var(--muted);
  font: 12px var(--sans);
  text-transform: uppercase;
  white-space: nowrap;
}

.number {
  text-align: right;
  font-family: var(--sans);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.number {
  font-size: 12px;
}

td.item,
td.source,
.trade-list td.character {
  max-width: 0;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.source,
.trade-list td.character {
  width: auto;
}

.spark-column {
  width: 1%;
  text-align: center;
}

th button,
td button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
}

th button {
  color: inherit;
  font: inherit;
  text-transform: inherit;
}

th button:hover {
  color: var(--ink);
}

th[aria-sort="ascending"],
th[aria-sort="descending"] {
  color: var(--gold-ink);
}

th[aria-sort="ascending"]::after {
  content: " ↑";
}

th[aria-sort="descending"]::after {
  content: " ↓";
}

th[aria-sort] button:hover {
  color: inherit;
}

td button:hover,
td button:focus-visible {
  text-decoration: underline;
}

tbody tr:hover td {
  background: var(--tint);
}

tbody tr[aria-selected="true"] td {
  background: var(--tint-strong);
}

tbody tr:is(:hover, [aria-selected="true"]) td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

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

.quality-0 {
  color: var(--q-poor);
}

.quality-1 {
  color: var(--q-common);
}

.quality-2 {
  color: var(--q-uncommon);
}

.quality-3 {
  color: var(--q-rare);
}

.quality-4 {
  color: var(--q-epic);
}

.quality-5 {
  color: var(--q-legendary);
}

.quality-6 {
  color: var(--q-artifact);
}

.quality-7 {
  color: var(--q-heirloom);
}

/* Money as the addon writes it: figures in the text colour, each coin's
   letter in its own. */
.money {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coin.g .unit {
  color: var(--coin-g);
}

.coin.s .unit {
  color: var(--coin-s);
}

.coin.c .unit {
  color: var(--coin-c);
}

.trend {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trend.up {
  color: var(--up);
}

.trend.down {
  color: var(--down);
}

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

/* The addon's sparkline: green for a week that ended at least where it
   started, else red. */
.spark {
  display: inline-block;
  width: 64px;
  height: 16px;
  overflow: visible;
  vertical-align: middle;
}

.spark-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.spark.up .spark-line {
  stroke: var(--up);
}

.spark.down .spark-line {
  stroke: var(--down);
}

/* The addon's status line under a table, with the page buttons at its right. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.pager .range {
  margin-right: auto;
}

.pager button {
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--gold-ink);
  font-size: 12px;
  cursor: pointer;
}

.pager button:hover:not(:disabled) {
  text-decoration: underline;
}

.pager button:disabled {
  color: var(--muted);
  cursor: default;
}

/* The addon's cards: four across, a label, a figure and a line under it. */
.cards,
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
}

.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.stat dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.stat dd {
  margin: 0;
}

.stat .figure {
  margin-top: 3px;
  font: 19px/1.2 var(--sans);
}

/* A sum wider than its card breaks between its coins. */
.stat .money {
  white-space: normal;
}

.stat .note {
  margin-top: 3px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat .note .money {
  white-space: nowrap;
}

.panel .stat .figure {
  font-size: 17px;
}

/* The addon's lines of a side panel: a label at the left, a figure at the right. */
.lines {
  margin: 0;
}

.lines div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
}

.lines dd {
  margin: 0;
  font: 15px var(--sans);
  text-align: right;
}

.lines dd > [class^="quality-"] {
  font: 14px var(--serif);
}

.side-by-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.77fr);
  gap: 8px;
  align-items: start;
}

.chart-panel {
  padding: 4px 6px 0;
}

.chart-panel .chart {
  margin: 0;
}

@media (min-width: 1240px) {
  #prices-view {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  #prices-view:has(> #detail[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  #detail {
    position: sticky;
    top: calc(var(--top) + 10px);
    max-height: calc(100vh - var(--top) - 20px);
    overflow-y: auto;
  }
}

@media (min-width: 1240px) and (max-width: 1399px) {
  #prices-view:has(> #detail:not([hidden])) #prices-table :is(.spark-column, .seen) {
    display: none;
  }
}

.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

#detail-title {
  margin-right: auto;
  font-size: 22px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.external {
  font-size: 13px;
  text-decoration: none;
}

.external::after {
  content: " ↗";
}

.external:hover {
  text-decoration: underline;
}

#detail-subtitle {
  margin-top: 2px;
  font-size: 12px;
}

#detail .summary {
  margin-top: 10px;
}

#history {
  margin-top: 14px;
}

.disclosure {
  margin: 8px 0 4px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--gold-ink);
  font-size: 13px;
  cursor: pointer;
}

.disclosure:hover {
  text-decoration: underline;
}

.disclosure::before {
  content: "▸ ";
}

.disclosure[aria-expanded="true"]::before {
  content: "▾ ";
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.key {
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.chart {
  position: relative;
  margin-top: 8px;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart text {
  fill: var(--muted);
  font: 12px var(--sans);
  font-variant-numeric: tabular-nums;
}

.chart text.value {
  fill: var(--ink);
}

.grid {
  stroke: var(--line);
  stroke-width: 1;
}

.axis {
  stroke: var(--edge);
  stroke-width: 1;
}

.crosshair {
  stroke: var(--muted);
  stroke-width: 1;
}

.line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area {
  stroke: none;
}

.dot {
  stroke: var(--panel);
  stroke-width: 2;
}

.bar {
  fill: color-mix(in srgb, var(--gold) 45%, transparent);
}

.bar.active {
  fill: var(--gold);
}

.key.bar-key {
  width: 8px;
  height: 10px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}

/* The addon's chart tooltip: a dark box in a gold line. */
.tooltip {
  position: absolute;
  top: 0;
  min-width: 140px;
  padding: 6px 9px;
  border: 1px solid var(--gold);
  background: var(--panel);
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
  font-size: 12px;
  pointer-events: none;
}

.tooltip .when {
  margin-bottom: 3px;
  color: var(--gold-ink);
  font-size: 14px;
}

.tooltip .row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tooltip .row .key {
  margin-right: 0;
}

.tooltip strong {
  font: 400 14px var(--sans);
}

.tooltip .name {
  color: var(--muted);
}

.sellers {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sellers h3 {
  font-size: 17px;
}

.sellers p {
  margin-block: 6px;
  font-size: 12px;
}

#summary,
.book-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.book-summary .note {
  overflow-wrap: anywhere;
}

.order-book-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: 12px;
  color: var(--muted);
  font-size: 12px;
}

.order-book-history select {
  max-width: 100%;
}

.depth-chart {
  margin-bottom: 16px;
}

.depth-point {
  fill: var(--gold);
}

.line.earlier {
  stroke: var(--muted);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}

.dot.earlier {
  fill: var(--muted);
}

.key.earlier-key {
  height: 0;
  border-top: 2px dashed var(--muted);
}

.order-book tbody tr.active td {
  background-color: var(--tint-strong);
}

.order-book tbody tr.active td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

.order-book {
  margin-top: 8px;
}

.order-book caption {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}

.order-book .depth-cell {
  background: linear-gradient(to left, color-mix(in srgb, var(--gold) 24%, transparent) var(--depth), transparent var(--depth));
}

.order-book th {
  white-space: normal;
}

.seller-table td:first-child {
  overflow-wrap: anywhere;
}

#comparison {
  grid-column: 1 / -1;
}

#comparison .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#comparison-title {
  margin-right: auto;
  color: var(--gold-ink);
  font-size: 18px;
}

#comparison > .muted {
  margin-top: 4px;
  font-size: 12px;
}

#comparison-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.comparison-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: var(--edge);
  background: var(--page);
  color: var(--ink);
  font-size: 13px;
}

#comparison-status:empty {
  display: none;
}

#comparison-chart {
  max-width: 1000px;
}

.comparison-grid {
  margin-top: 12px;
  overflow-x: auto;
}

.comparison-table {
  min-width: 600px;
}

/* Under Gold's characters: the account's ID, and the form to link another. */
.account-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.account-link .link[open] {
  flex-basis: 100%;
}

.link summary {
  color: var(--gold-ink);
  font-size: 13px;
  text-align: right;
  list-style: none;
  cursor: pointer;
}

.link summary::-webkit-details-marker {
  display: none;
}

.link summary:hover {
  text-decoration: underline;
}

.link .login {
  margin: 10px 0 2px auto;
  font-size: 14px;
}

.trades {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.trades:empty {
  display: none;
}

.login {
  width: 100%;
  max-width: 420px;
}

.login,
.login form {
  display: grid;
  gap: 12px;
}

#login-title {
  font-size: 24px;
}

form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.login .muted {
  font-size: 12px;
}

.code {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  text-transform: none;
}

.secret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.button.primary {
  min-height: 28px;
  font-size: 15px;
}

.alert {
  color: var(--down);
}

.alert:empty {
  display: none;
}

.download {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.download .panel {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.download .lead {
  font-size: 15px;
  line-height: 1.5;
}

.download h2 {
  color: var(--gold-ink);
  font-size: 18px;
}

.download .muted {
  line-height: 1.5;
}

#platforms {
  justify-self: start;
}

#platforms button {
  padding: 4px 14px;
  font-size: 13px;
}

.download-link {
  justify-self: start;
  padding: 6px 20px;
  font-size: 16px;
}

code {
  padding: 1px 4px;
  border: 1px solid var(--line);
  background: var(--field);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

@media (max-width: 1099px) {
  .side-by-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .titlebar {
    position: static;
    padding: 6px 12px;
    gap: 6px 10px;
  }

  .brand {
    font-size: 22px;
  }

  .version {
    margin-bottom: 4px;
  }

  .realm-picker {
    order: 1;
    flex: 1 1 100%;
  }

  .realm-picker select {
    width: 100%;
    max-width: none;
  }

  .shell {
    display: block;
    background: none;
  }

  .rail {
    position: static;
    height: auto;
    padding: 0;
    overflow: visible;
    box-shadow: inset 0 -1px 0 var(--edge);
  }

  .views {
    flex-direction: row;
  }

  /* The hubs share a phone's width, each its icon over its name. */
  .views a {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 2px 7px;
    font-size: 13px;
  }

  .views a[aria-current="page"] {
    background: var(--tint-strong);
    box-shadow: inset 0 -3px 0 var(--gold);
  }

  .views .group {
    display: none;
  }

  .rail-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 6px 12px;
  }

  .rail-foot .button {
    min-height: 24px;
    margin-left: auto;
    padding: 2px 12px;
  }

  .tabs a {
    padding-inline: 10px;
  }

  .content {
    padding: 6px 10px 20px;
  }

  h1 {
    font-size: 22px;
  }

  .search,
  .search input {
    width: 100%;
  }

  .toolbar {
    gap: 8px;
  }

  .toolbar .chip {
    flex: 1 1 140px;
  }

  .toolbar .chip select {
    width: 100%;
  }

  .panel:not(.list-panel) {
    padding: 10px;
  }

  .download .panel {
    padding: 12px;
  }

  .cards,
  .summary,
  #summary,
  .book-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #prices-table :is(.market, .spark-column, .seen),
  #deals-table :is(.sells, .spark-column, .sell-to),
  #movers-table :is(.before, .spark-column),
  #bags-table :is(.vendor, .spark-column, .sell-to),
  #gold-characters .played,
  #history .mode,
  .traded-items .average,
  .trade-list :is(.source, .character) {
    display: none;
  }

  #history td:first-child {
    white-space: nowrap;
  }

  th,
  td {
    padding-inline: 5px;
  }

  :is(th, td):first-child {
    padding-left: 8px;
  }

  :is(th, td):last-child {
    padding-right: 8px;
  }

  /* Names wrap rather than give up their ends to the figures. */
  td:is(.item, .source) {
    max-width: none;
    width: auto;
    white-space: normal;
  }

  .purse-label {
    display: none;
  }

  #comparison-chart .tooltip {
    max-width: 100%;
  }

  #comparison-chart .tooltip .row {
    white-space: normal;
  }
}

/* The desktop app marks the page it embeds and draws its own rail, brand and
   theme switch beside it. */
:root[data-embed="desktop"] .rail,
:root[data-embed="desktop"] .brand,
:root[data-embed="desktop"] .version,
:root[data-embed="desktop"] #theme {
  display: none;
}

:root[data-embed="desktop"] .shell {
  display: block;
  background: none;
}