/* 06-components/ff — the FiniteFrontier city pages (economy, market, burghers,
   deliveries): stat rows, fact lists and the day charts. Tables are c-ledger,
   numbers c-stat, headers c-boot + c-group, navigation c-tag. */
.c-ff__stats { --o-grid-gap: var(--space-md); margin-block: var(--space-md); }
.c-ff__stats .c-stat__n { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

.c-ff__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
}
.c-ff__facts dt { color: var(--ink-dim); }
.c-ff__facts dd { margin: 0; color: var(--ink); }
.c-ff__money { color: var(--value); font-variant-numeric: tabular-nums; }
.c-ff__player { color: var(--link); }

/* A day chart: one series, 2px line in the brand colour, recessive axes, a
   crosshair + tooltip on hover (ff_chart_controller.js). */
.c-ff-chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.c-ff-chart__title {
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-dim);
}
.c-ff-chart__plot { position: relative; height: 180px; }
.c-ff-chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c-ff-chart__line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-ff-chart__axis { stroke: var(--rule); stroke-width: 1; }
.c-ff-chart__tick { fill: var(--ink-dim); font-family: var(--font-chrome); font-size: 10px; }
.c-ff-chart__cross { stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.c-ff-chart__dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.c-ff-chart__tip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.2rem 0.45rem;
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--ink);
}
.c-ff-chart__table summary {
  cursor: pointer;
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* The city index: a wide map card over a grid of section cards (c-panel + c-world). */
.c-ff__hero .c-world__shot { aspect-ratio: 16 / 9; }
.c-ff__hero .c-world__shot img { image-rendering: pixelated; }
.c-ff__card-title { font-size: var(--text-md); margin: 0; color: var(--link); }

/* Minecraft pictures: item icons, burgher portraits (block-sharp) */
.c-ff__icon { display: inline-block; vertical-align: -3px; image-rendering: pixelated; }
.c-ff__portrait { display: block; image-rendering: pixelated; }
.c-ff__titled { display: flex; align-items: center; gap: var(--space-sm); }
.c-ff__titled h1 { margin: 0; }
.c-ff__who { display: inline-flex; align-items: center; gap: var(--space-xs); }
.c-ff__who .c-ff__portrait { flex: none; }
.c-ff__burgher { display: flex; gap: var(--space-md); align-items: flex-start; flex-wrap: wrap; }
.c-ff__burgher .c-ff__facts { flex: 1 1 14rem; }

/* A small city map on an economy page (ff/shared/_minimap) */
.c-ff-minimap { min-width: 0; }
.c-ff-minimap__frame { position: relative; height: 300px; border: 1px solid var(--rule); background: #050705; }
.c-ff-minimap__canvas { position: absolute; inset: 0; }
.c-ff-minimap.is-unavailable .c-ff-minimap__frame::after { content: "The map isn't available."; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-dim); }
.c-ff-minimap .ol-mouse-position, .c-ff-minimap .ol-attribution, .c-ff-minimap .ol-rotate, .c-ff-minimap .ol-scale-line, .c-ff-minimap .ol-scale-bar, .c-ff-minimap .ol-ctx-menu-container { display: none; }
.c-ff-minimap__tip {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  padding: 2px 6px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
  font-size: var(--text-xs); white-space: nowrap;
}
.c-ff-minimap__legend { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-xs); color: var(--ink-dim); }
.c-ff-minimap__legend li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.c-ff-minimap__key { display: inline-block; width: 12px; height: 12px; background: var(--key, #55FF55); }
.c-ff-minimap__key--here, .c-ff-minimap__key--a, .c-ff-minimap__key--b { border-radius: 50%; }
.c-ff-minimap__key--a, .c-ff-minimap__key--courier { --key: #FFAA00; }
.c-ff-minimap__key--home { --key: #FFE8A0; width: 10px; height: 10px; }
.c-ff-minimap__key--seller { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.c-ff-minimap__key--buyer { --key: #55FFFF; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.c-ff-minimap__key--courier { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.c-ff-minimap__key--claim { background: rgba(85, 255, 85, 0.2); outline: 2px solid #55FF55; outline-offset: -2px; }
.c-ff-minimap__key--job { background: rgba(85, 255, 255, 0.1); outline: 1px dashed #55FFFF; outline-offset: -1px; }

/* Trading from the site (ff/me, ff/market/_trade) */
.c-ff__code { font-size: var(--text-xl); letter-spacing: 0.08em; }
.c-ff__code code { color: var(--value); }
.c-ff__inline-form { align-items: center; }
.c-ff__inline-form .c-field { margin: 0; }
.c-ff__qty { width: 5.5rem; }
.c-ff__price { width: 6.5rem; }
.c-ff__trade h3 { margin: 0; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.c-ff__requests { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.c-ff__request { display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); padding-inline-start: var(--space-xs); border-inline-start: 2px solid var(--rule); }
.c-ff__request-what { color: var(--ink); }
.c-ff__request-state { color: var(--ink-dim); }
.c-ff__request-answer { flex-basis: 100%; }
.c-ff__request--done { border-color: var(--brand); }
.c-ff__request--done .c-ff__request-state { color: var(--brand); }
.c-ff__request--refused, .c-ff__request--expired { border-color: var(--danger); }
.c-ff__request--refused .c-ff__request-state, .c-ff__request--expired .c-ff__request-state { color: var(--danger); }
.c-ff__request--queued .c-ff__request-state, .c-ff__request--sent .c-ff__request-state { color: var(--value); }

/* Counts as bars (ff/deliveries/_bars) */
.c-ff__bars th { font-weight: normal; text-align: start; white-space: nowrap; }
.c-ff__bar-cell { width: 45%; }
.c-ff__bar { display: block; height: 10px; width: var(--share); min-width: 2px; background: var(--brand); border-radius: 0 4px 4px 0; }
.c-ff__stats { margin-block: var(--space-sm); }