/* What the feeds send: the download page.
 *
 * Self-contained over performance.css. Same two traps as everywhere here:
 * grid children get min-width:0 so a long field path cannot push the page
 * sideways on a phone, and the table scrolls inside its own box.
 */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- When it was taken ---------- */

.taken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.taken > div { min-width: 0; }

.taken-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.taken-value {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}

.taken-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 74ch;
}

.taken-note code,
.empty-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: var(--page);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- Section furniture ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
}

.section-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }

.section-sub {
  margin: 0;
  flex: 1 1 320px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.download-lead { margin: 0 0 18px; }

.download-lead .btn-primary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--page);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Inventory ---------- */

.inventory-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.inventory-controls select,
.inventory-controls input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 13.5px;
  max-width: 100%;
}

.inventory { min-width: 0; }

.table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 62vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

table.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.inv-table th,
.inv-table td {
  padding: 7px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.inv-table thead th {
  position: sticky;
  top: 0;
  background: var(--page);
  color: var(--text-secondary);
  font-weight: 600;
  z-index: 1;
  /* The cell owns the border, so a sticky header loses it when rows pass
     under; the shadow puts it back. */
  box-shadow: inset 0 -1px 0 var(--border);
}

.inv-table tbody tr:hover td { background: var(--accent-soft); }

.cell-feed { color: var(--text-muted); }

.cell-field,
.cell-example {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Field paths run to sixty characters. Left to themselves they set the
   table's width and push the fill column off the screen, so they are clipped
   here and given in full on the title and in the CSV. */
.cell-field {
  max-width: 330px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-example {
  color: var(--text-muted);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-num { text-align: right; font-variant-numeric: tabular-nums; }

.cell-fill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
}

.fill-bar {
  flex: 1 1 auto;
  min-width: 52px;
  height: 7px;
  border-radius: 999px;
  background: var(--grid);
  overflow: hidden;
}

.fill-bar-inner {
  display: block;
  height: 100%;
  background: var(--status-good);
}

/* Colour is never the only signal here: the percentage is printed beside
   every bar, and the bar's own length says the same thing again. */
.fill-bar-inner.low { background: var(--status-warning); }
.fill-bar-inner.rare { background: var(--fault); }

.fill-pct {
  flex: none;
  width: 46px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.inv-count {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Feed cards ---------- */

.feed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.feed-card {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.feed-badge {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.feed-card h3 {
  margin: 7px 0 4px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.feed-endpoint {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: var(--text-muted);
  word-break: break-all;
}

.feed-what,
.feed-watch {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.feed-watch strong { color: var(--text-primary); }

.feed-count {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
}

.file-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px 0;
  min-width: 0;
}

.file-list a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--series-1);
  word-break: break-all;
}

.file-size {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.file-tag {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ---------- Caveats ---------- */

.caveats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.caveat { min-width: 0; }

.caveat h3 { margin: 0 0 7px; font-size: 14px; color: var(--text-primary); }

.caveat p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.empty-note {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 18px 2px;
}