/* Frame material changes with the era. This leaves the game's geometry intact. */
[data-ui-frames="off"] .object-frame { display: none !important; }
:root[data-ui-frames="quiet"] .object-frame .fr-art { display: none !important; }
:root:not([data-ui-frames="quiet"]) .object-frame .fr-plain { display: none !important; }
.object-frame .fr-rail { display: none; }
:root[data-ui-era="rail"] .object-frame .fr-rail { display: inline; }
:root[data-ui-era="rail"] .object-frame .fr-cart { display: none; }
.fr-portrait-outer {
  fill: color-mix(in srgb,var(--panel2) 83%,var(--pc));
  stroke: color-mix(in srgb,var(--pc) 64%,var(--muted));
  stroke-width: 1.05;
}
.fr-portrait-hairline { fill: none; stroke: var(--muted); stroke-width: .58; opacity: .81; }
.fr-portrait-metal {
  fill: color-mix(in srgb,var(--panel2) 77%,var(--line));
  stroke: color-mix(in srgb,var(--pc) 59%,var(--muted));
  stroke-width: 1.35;
}
.fr-portrait-ink { fill: none; stroke: color-mix(in srgb,var(--pc) 56%,var(--muted)); stroke-width: .85; stroke-linecap: round; }
.fr-portrait-leaf { fill: color-mix(in srgb,var(--pc) 65%,var(--muted)); opacity: .78; }
.fr-portrait-bevel { fill: none; stroke: color-mix(in srgb,var(--pc) 42%,var(--line)); stroke-width: .95; }
.fr-bolt-slot { fill: none; stroke: var(--panel); stroke-width: .54; stroke-linecap: round; opacity: .85; }
.b-pl.now :is(.fr-portrait-outer,.fr-portrait-metal) { stroke: var(--accent-text); }
.fr-rivet { fill: color-mix(in srgb,var(--muted) 73%,var(--panel)); stroke: var(--panel2); stroke-width: .48; }
.fr-city-inset { fill: none; stroke: var(--town-line); stroke-width: .8; opacity: .6; }
.fr-city-rule { fill: none; stroke: var(--town-line); stroke-width: .65; opacity: .53; }
.fr-city-cartouche {
  fill: color-mix(in srgb,var(--town) 81%,var(--accent));
  stroke: color-mix(in srgb,var(--town-line) 69%,var(--accent-text));
  stroke-width: .82;
}
.fr-city-nameplate {
  fill: color-mix(in srgb,var(--town) 83%,var(--river));
  stroke: color-mix(in srgb,var(--town-line) 65%,var(--river));
  stroke-width: 1.05;
}
.fr-city-engrave {
  fill: none;
  stroke: color-mix(in srgb,var(--town-line) 78%,var(--muted));
  stroke-width: .85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .88;
}
.fr-city-bevel { fill: none; stroke: var(--panel); stroke-width: 1; opacity: .82; }
.b-town > .city-title { font-size: 12px; font-weight: 700; }
:root[data-ui-era="rail"] .fr-city-inset { stroke-width: 1.1; }
:root[data-ui-era="rail"] .fr-city-rule { stroke-width: 1; }
.b-town:is(.hl-town,.drop-hot,.pop-town) .fr-city-inset { opacity: .34; }
.b-town:is(.hl-town,.drop-hot,.pop-town) :is(.fr-city-cartouche,.fr-city-nameplate) { fill: color-mix(in srgb,var(--town) 79%,var(--accent)); }

:root:not([data-ui-frames="off"]) .frame-market .gauge {
  position: relative;
  padding: 10px 10px 8px;
  font-variant-numeric: tabular-nums;
}
:root:not([data-ui-frames="off"]) .frame-market .gauge::after {
  content: '';
  pointer-events: none;
  position: absolute;
}

/* Cart era: a printed ledger with the quote types in adjacent columns. */
:root:not([data-ui-era="rail"],[data-ui-frames="off"]) .frame-market .gauge {
  --ledger-rule: color-mix(in srgb,var(--line) 72%,var(--muted));
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-content: start;
  border-radius: 2px;
  border-color: var(--ledger-rule);
  background:
    repeating-linear-gradient(to bottom,transparent 0 15px,color-mix(in srgb,var(--ledger-rule) 24%,transparent) 15px 16px),
    var(--panel2);
  box-shadow: inset 0 0 0 3px var(--panel2), inset 0 0 0 4px var(--ledger-rule);
}
:root:not([data-ui-era="rail"],[data-ui-frames="off"]) .frame-market .gauge::after {
  inset: 3px;
  background:
    radial-gradient(circle,var(--muted) 0 1px,transparent 1.6px) left top/7px 7px no-repeat,
    radial-gradient(circle,var(--muted) 0 1px,transparent 1.6px) right bottom/7px 7px no-repeat;
}
:root:not([data-ui-era="rail"],[data-ui-frames="off"]) .frame-market .gauge > svg {
  grid-column: 1 / -1;
  font-family: var(--f-title,Georgia,serif);
}
:root:not([data-ui-era="rail"],[data-ui-frames="off"]) .frame-market :is(.g-buy,.g-sell) {
  margin: 0;
  padding: 5px 3px 2px;
  border-top: 3px double var(--ledger-rule);
  font-family: var(--f-title,Georgia,serif);
  font-size: .88rem;
}
:root:not([data-ui-era="rail"],[data-ui-frames="off"]) .frame-market .g-buy {
  border-inline-end: 1px solid var(--ledger-rule);
}

/* Rail era: enamel dials and a separate inset for the current purchase quote. */
:root[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .gauge {
  --ink: #f5ead2;
  --muted: #c8c7b9;
  --panel2: #263238;
  --g-track: #53636a;
  --g-coal: #b4afa1;
  --g-steel: #8dc2d9;
  --g-bezel: #737e80;
  color: var(--ink);
  border-radius: 9px;
  border-color: #172025;
  background: linear-gradient(#4d5a5e,#242e33);
  box-shadow: inset 0 0 0 1px #9aa4a6, inset 0 0 0 4px #354247, 0 2px 0 #141c2160;
}
:root[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .gauge::after {
  inset: 3px;
  --fr-market-bolt: radial-gradient(circle,#4a565b 0 1px,#acb7b9 1px 2px,#182326 2px 2.7px,transparent 3px);
  background: var(--fr-market-bolt) left top/9px 9px no-repeat,
              var(--fr-market-bolt) right top/9px 9px no-repeat,
              var(--fr-market-bolt) left bottom/9px 9px no-repeat,
              var(--fr-market-bolt) right bottom/9px 9px no-repeat;
}
:root[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .gauge > svg {
  box-sizing: border-box;
  padding: 4px 6px 2px;
  background: var(--panel2);
  border-radius: 50% 50% 11px 11px / 28% 28% 11px 11px;
  border: 1px solid var(--g-bezel);
  box-shadow: 0 1px 0 #141e24, inset 0 2px 4px #142128;
}
:root[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .g-coal > svg > use { color: var(--g-coal); }
:root[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .g-steel > svg > use { color: var(--g-steel); }
:root[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .g-buy {
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 2px;
  padding: 2px 8px;
  border: 1px solid var(--g-bezel);
  border-radius: 3px;
  background: #17242b;
  color: #ffe1a0;
  font-size: .88rem;
}
/* (the light theme: the same steel dials, with white enamel faces) */
:root:not([data-theme="dark"])[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .gauge {
  --ink: #222b30;
  --muted: #5f6b71;
  --panel2: #f7f8f5;
  --g-track: #dce1e0;
  --g-coal: #3d403e;
  --g-steel: #3e6d86;
  --g-bezel: #929da0;
  border-color: #76838a;
  background: linear-gradient(#eef2f2,#cdd5d7);
  box-shadow: inset 0 0 0 1px #fbfdfd, inset 0 0 0 4px #d9e0e1, 0 2px 0 #34424a2e;
}
:root:not([data-theme="dark"])[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .gauge::after {
  --fr-market-bolt: radial-gradient(circle,#e3e8e9 0 1px,#7f8b8f 1px 2px,#56636a 2px 2.7px,transparent 3px);
}
:root:not([data-theme="dark"])[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .gauge > svg {
  box-shadow: 0 1px 0 #ffffff, inset 0 2px 4px #6f7d8340;
}
:root:not([data-theme="dark"])[data-ui-era="rail"]:not([data-ui-frames="off"]) .frame-market .g-buy {
  background: #fffdf7;
  color: #6b4b12;
}