/* Economy Pulse screen. Everything shared (colors, type, buttons, tables) comes from
 * kit/; this file only maps Pulse's own states onto kit tokens. */

/* Verdict names come straight from the server (EP.Verdict). */
.pill.hot     { --status: var(--danger);  --i: var(--icon-warning); }
.pill.warm    { --status: var(--warning); --i: var(--icon-up); }
.pill.healthy { --status: var(--success); --i: var(--icon-check); }
.pill.cold    { --status: var(--info);    --i: var(--icon-down); }
.pill.quiet   { --status: var(--neutral); --i: var(--icon-quiet); }


#prices td:last-child { text-align: right; white-space: nowrap; }
.frozen { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--info); font-size: var(--fs-sm); margin-right: var(--sp-2); }

/* Items and shops: thousands of rows, paged from the server, with a search, filters,
 * and a detail row under each item listing every shop that sells it. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.card-head h2 { margin: 0; }
.catalog-line { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); }
.notice { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); }
.view-tabs { margin-bottom: var(--sp-4); }
.price-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.price-tools .field { margin: 0; flex: 0 1 16rem; }
.price-tools .field:nth-child(2) { flex-basis: 10rem; }
.tabs .count { margin-left: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table-wrap { max-height: 30rem; overflow: auto; }
.table-wrap > table > thead th { position: sticky; top: 0; background: var(--surface-1); z-index: 1; }
#prices td small, #shops td small { display: block; font-size: var(--fs-sm); }
.item-name { font-weight: 600; }
#prices .tier .guess { margin-left: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); }
#prices tr.is-out td { color: var(--muted); }
.where-btn {
    display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0; border: 0; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.where-btn .i { flex: none; width: .9rem; height: .9rem; color: var(--muted); }
.where-btn:hover .i, .where-btn[aria-expanded="true"] .i { color: var(--ink); }
.where-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius); }
tbody tr.detail > td, tbody tr.detail:hover > td { background: var(--surface-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
#prices tr.detail > td, #shops tr.detail > td { text-align: left; white-space: normal; }
tr.detail p { margin: 0 0 var(--sp-2); color: var(--ink-2); }
table.where { margin-top: var(--sp-1); }
table.where th { position: static; background: none; text-align: left; }
table.where td { text-align: left; }
table.where .r { text-align: right; }
table.where td, table.where tbody tr:nth-child(even) td, table.where tbody tr:hover td { background: none; padding: var(--sp-1) var(--sp-3); }
.stock { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.stock span { white-space: nowrap; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); }
.table-foot p { margin: 0; font-size: var(--fs-sm); }