:root {
  --bg: #232629;
  --bg-deep: #1b1e21;
  --card: #2c3034;
  --card-edge: #3d4247;
  --text: #e8e4da;
  --text-dim: #bab6ad;
  --accent: #b08d57;
  --accent-cool: #7d9db5;
  --accent-green: #8fae8b;
  --accent-red: #c08552;
  --bar-track: #1b1e21;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

a { color: var(--accent-cool); }

.site-header {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--card-edge);
  padding: 14px 18px 10px;
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}

.site-header h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.header-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 13px;
}

.build-label { font-variant-numeric: tabular-nums; margin: 0 0 6px; }
.build-label:empty { display: none; }

button {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  padding: 5px 12px;
  min-height: 40px;
  cursor: pointer;
  font-size: 13px;
}
button:hover { border-color: var(--accent); }

.tagline { margin: 2px 0 4px; color: var(--text-dim); font-size: 13px; }

.tab-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background: var(--bg-deep);
  border-bottom: 2px solid var(--card-edge);
  padding: 8px 12px 0;
}

.tab {
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--text-dim);
  padding: 12px 14px;
  min-height: 44px;
  font-size: 14px;
  white-space: nowrap;
}
.tab:hover { color: var(--text); border: none; }
.tab.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: inset 0 2px 0 var(--accent);
}
.tab-refresh { margin-left: auto; align-self: center; flex: none; }

main { padding: 16px; max-width: 1440px; margin: 0 auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  /* Equal-height cards per row: the grid stays aligned instead of
     ragged. A card whose content is shorter than its row shows the
     difference as space — sections that can grow into it (the Void
     Trader inventory, below) do so explicitly. */
  align-items: stretch;
}
@media (min-width: 1100px) {
  .card.span-2 { grid-column: span 2; }
}

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: 14px 16px;
}

.card h2 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
}
.card h3 {
  margin: 14px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 600;
}
.card h3:first-of-type { margin-top: 4px; }
.card h3.sticky-sub {
  position: sticky;
  top: 54px; /* just under the sticky tab bar */
  background: var(--card);
  z-index: 2;
  padding: 4px 0;
}

/* Sections whose content is only an empty state render slim and muted
   instead of carrying a full card's visual weight (class set by the shell). */
.card.is-empty {
  align-self: start;
  background: var(--bg-deep);
  border-style: dashed;
  padding: 10px 16px;
}
.card.is-empty h2 { color: var(--text-dim); margin-bottom: 4px; }
.card.is-empty .empty { margin: 0; }

.empty { color: var(--text-dim); font-style: italic; margin: 4px 0; }
.note { color: var(--text-dim); font-size: 12.5px; margin: 6px 0 0; }
.dt-icon { height: 1em; width: 1em; vertical-align: -0.14em; }
.entry-icon { height: 22px; width: 22px; object-fit: contain; vertical-align: -6px; margin-right: 6px; }
.hl { color: var(--accent); }

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--bar-track);
}
.row:last-child { border-bottom: none; }
.row .label { color: var(--text-dim); }
.row .value { text-align: right; }
.row.stacked { flex-direction: column; align-items: flex-start; gap: 0; }
.row.stacked .label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.row.stacked .value { text-align: left; }

.timer {
  display: inline-block;
  min-width: 14ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--accent-cool);
  white-space: nowrap;
}
.timer.t-soon { color: var(--text); font-weight: 600; }
.timer.t-urgent { color: #e2a15c; font-weight: 700; }
/* Timers keep their natural case inside uppercased headings. */
h3 .timer, .sticky-sub .timer { text-transform: none; }
.nowrap { white-space: nowrap; }

.entry { padding: 8px 0; border-bottom: 1px solid var(--bar-track); }
.entry:last-child { border-bottom: none; }
/* Wide list sections lay their entries out in two columns on large screens,
   so a timer is never ~900px from its title. The wrapper is part of the
   section's own markup and travels with it. */
@media (min-width: 1400px) {
  .entries-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
}
.entry-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pool-toggle { min-height: 36px; padding: 4px 10px; font-size: 12.5px; }
.pool-body { padding: 4px 0 2px; }
.pay-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.bar-line { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.bar-line .bar { flex: 1; margin: 0; }
.bar-line .entry-sub { white-space: nowrap; }
.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}
/* The title shrinks and wraps within its own space; the timer/value slot
   never drops to a second line. */
.entry-head .entry-title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.entry-head > :not(.entry-title) { flex: 0 0 auto; }
.entry-sub { color: var(--text-dim); font-size: 13px; }
.entry p { margin: 4px 0; }
.desc { color: var(--text-dim); font-size: 13.5px; }

.bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.09); /* track must read against the card */
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 2px;
}
.bar > div {
  height: 100%;
  background: var(--accent-cool);
  border-radius: 4px;
}
.bar.fomorian > div { background: var(--accent-red); }
.bar.razorback > div { background: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.chip {
  background: var(--bg-deep);
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 12.5px;
  color: var(--text);
}

/* 1999 calendar (month grid) */
.cal-tabs { display: flex; gap: 6px; margin: 6px 0 8px; }
.cal-tab {
  background: var(--bg-deep); color: var(--text-dim);
  border: 1px solid var(--card-edge); border-radius: 20px;
  padding: 3px 14px; font-size: 13px; cursor: pointer;
}
.cal-tab.active { color: var(--text); border-color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 4px 0 8px; }
.cal-dow { text-align: center; font-size: 11.5px; color: var(--text-dim); padding: 2px 0; }
.cal-cell {
  background: var(--bg-deep); border: 1px solid transparent; border-radius: 6px;
  min-height: 40px; padding: 3px 4px; color: var(--text-dim); font-size: 12.5px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.cal-cell.blank { background: transparent; }
.cal-cell.has-ev { border-color: var(--card-edge); color: var(--text); min-height: 86px; }
.cal-dom { font-size: 12px; color: var(--text-dim); }
.cal-ev { display: flex; gap: 4px; align-items: flex-start; font-size: 11.5px; line-height: 1.3; }
.cal-ev .cal-dot { margin-top: 3px; flex: none; }
.cal-obj { display: block; color: var(--text-dim); font-size: 11px; }
.cal-mk { width: 15px; height: 15px; object-fit: contain; flex: none; margin-top: 1px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); display: inline-block; }
.cal-dot.ch { background: var(--accent-cool); }
.cal-dot.up { background: var(--accent); }
.cal-dot.rw { background: var(--accent-green); }

.reward-line { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.reward-line img, .item-cell img {
  width: 26px; height: 26px;
  object-fit: contain;
  flex: none;
}

/* Tables live in an internally scrolling .table-wrap (see below), so the
   head sticks within that container at top: 0. border-collapse must be
   separate: under collapse, a sticky th loses its border and background
   in several engines, which displaced the header onto the second row. */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
th, td {
  text-align: left;
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid var(--bar-track);
  vertical-align: top;
}
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 3;
  /* The bottom rule travels with the sticky head as a shadow; the th's own
     border stays behind in the flow under separate borders. */
  box-shadow: inset 0 -1px 0 var(--bar-track);
}
th {
  color: var(--text-dim);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-cell { display: flex; align-items: center; gap: 8px; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: end;
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: 13px;
}
.filters label { display: flex; flex-direction: column; gap: 4px; }
.filters label.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
select, input[type="search"] {
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 16px; /* >=16px prevents iOS focus zoom */
  min-height: 40px;
  min-width: 170px;
}

.table-wrap { overflow: auto; max-height: 62vh; -webkit-overflow-scrolling: touch; }
/* Void Trader: the inventory's scroll area is sized to fill the
   card by fitBaroInventory() in app.js — it measures the card's
   row-mates (Prime Resurgence sets the height) and sets the table
   wrap's max-height to match, keeping the internal scrollbar and
   leaving no blank under the table. Pure CSS fill attempts (flex
   column, grid 1fr row) let the table's full height drive the row
   sizing in this browser, so the height is measured instead. The
   62vh cap above is the pre-measure default. */
.card img { max-width: 100%; }

.error-banner {
  margin: 14px 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--accent-red);
  border-radius: 8px;
  background: #38302a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.error-banner[hidden] { display: none; }

details.pool { margin: 4px 0; }
details.pool summary { cursor: pointer; color: var(--accent-cool); font-size: 13px; padding: 8px 0; }
details.pool .chips { margin-top: 6px; }

.flash-toggle { margin-top: 10px; }

.site-footer {
  border-top: 1px solid var(--card-edge);
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 14px 18px 22px;
  max-width: 1440px;
  margin: 0 auto;
}

.news-item { padding: 6px 0; border-bottom: 1px solid var(--bar-track); }
.news-item:last-child { border-bottom: none; }
.news-item .date { color: var(--text-dim); font-size: 12.5px; }

@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr; }
  .pay-cols { grid-template-columns: 1fr; }
  .card h3.sticky-sub { top: 52px; }
  main { padding: 10px; }
  .site-header { padding: 10px 12px 8px; }
  .site-header h1 { font-size: 22px; }
  .header-meta { margin-left: 0; }
  .tab-bar { padding: 6px 6px 0; gap: 2px; }
  .tab { padding: 12px 11px; font-size: 13.5px; }
  .card { padding: 12px; }
  .filters label { flex: 1 1 140px; }
  select, input[type="search"] { min-width: 0; width: 100%; }
  .row { flex-wrap: wrap; }
  td, th { padding-right: 5px; }
  body { font-size: 14.5px; }
}