/* Price history: the chart above the listings when one card is picked, and the
   price check beside every listing's price. Loaded only when the feature is on.
   Every colour is a design-system token, so both themes come for free. */

/* ---------- the price check, in the listings table ---------- */

.chk {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600; line-height: 1.5;
  padding: .05rem .5rem .05rem .45rem; border-radius: 999px;
  white-space: nowrap; cursor: help;
}
.chk::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; flex: none; }
.chk-low { color: var(--good); background: var(--good-dim); }
.chk-typical { color: var(--text-2); background: var(--surface-2); }
.chk-high { color: var(--down); background: var(--down-dim); }
.chk-unusual { color: var(--warn); background: var(--warn-dim); }

/* On a phone the row is a card. The check takes the right-hand slot of the
   second line, under the price it describes.

   The model gets the whole first line up to the price: it is what people scan
   for, and "RTX 4070 Ti SUPER" must not end in an ellipsis. Condition gets A
   COLUMN OF ITS OWN at the start of the third line, ahead of the listing title,
   so the variant has the second line to itself beside the check pill. It used to share the model's cell, right-aligned, which looked
   fine until the screen was narrow enough for the two to meet: at 320px
   "RTX 5050" and "New" printed on top of each other. In its own column the
   model can only shorten (with an ellipsis), never collide. The price column
   is fixed so the price, the pill and the condition line up card to card. */
@media (max-width: 62rem) {
  .cat-grid .off-row.has-chk {
    /* 8rem: the widest pill ("Unusually low"), at the brand design's larger
       touch size, plus its cell padding is 124px. Narrower and it reaches into
       the variant beside it (it did at 6.75rem, by 11px). */
    grid-template-columns: auto auto minmax(0,1fr) 8rem;
    grid-template-areas:
      "buy ident ident price"
      "buy meta  meta  chk"
      "buy cond  title title";
  }
  .cat-grid .off-row.has-chk .gc[data-key="check"] { grid-area: chk; justify-self: end; align-self: center; display: block; }
  .cat-grid .off-row.has-chk .gc[data-key="condition"] { grid-area: cond; justify-self: start; white-space: nowrap; font-size: .78rem; font-weight: 600; }
  .cat-grid .off-row.has-chk .gc[data-key="model"],
  .cat-grid .off-row.has-chk .gc[data-key="variant"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* The smallest phones (under 360px: iPhone SE 1st gen, small Androids) have
   about 85px between the button and the price, and "Open box" alone needs 73.
   There the card takes four short lines instead of three crowded ones: model
   and price, condition and the check, variant, title. */
@media (max-width: 22.4rem) {
  .cat-grid .off-row.has-chk {
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-areas:
      "buy ident price"
      "buy cond  chk"
      "buy meta  meta"
      "buy title title";
  }
  .cat-grid .off-row.has-chk .gc[data-key="condition"] { justify-self: start; }
}

/* ---------- the panel ---------- */

.ph {
  border: 1px solid var(--border); border-radius: var(--radius-lg, 10px);
  background: var(--bg-elev); margin: 0 0 1rem; overflow: hidden;
}
.ph-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .7rem 1rem; font-size: .85rem; color: var(--text-2);
}
.ph-bar b { color: var(--text); font-weight: 600; }
.ph-pick {
  font: inherit; font-size: .82rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius, 6px);
  padding: .3rem .5rem; max-width: 100%;
}
.ph-pick:focus-visible, .ph-seg button:focus-visible, .ph-more:focus-visible,
.ph-chart:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

.ph-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: .75rem 1rem; padding: 1rem 1.1rem .25rem;
}
.ph-eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ph-title { font-size: 1.15rem; font-weight: 700; margin: .1rem 0 0; color: var(--text); }
.ph-controls { display: flex; flex-wrap: wrap; gap: .5rem; }

.ph-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius, 6px); overflow: hidden; }
.ph-seg button {
  font: inherit; font-size: .78rem; color: var(--text-2); background: none; border: 0;
  padding: .32rem .7rem; cursor: pointer;
}
.ph-seg button + button { border-left: 1px solid var(--border); }
.ph-seg button:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.ph-seg button[aria-pressed="true"] { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.ph-seg button:disabled { color: var(--text-3); cursor: not-allowed; opacity: .55; }

/* The headline: three facts in a row, each a big number over a small label. */
.ph-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem 1.25rem; padding: .75rem 1.1rem .25rem;
}
.ph-fact { min-width: 0; }
.ph-fact .v { font-size: 1.35rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ph-fact .v.sm { font-size: 1.05rem; }
.ph-fact .k { font-size: .76rem; color: var(--text-3); margin-top: .15rem; line-height: 1.35; }
.ph-verdict { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.ph-verdict::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }
.ph-verdict.low { color: var(--good); }
.ph-verdict.high { color: var(--down); }
.ph-verdict.typical, .ph-verdict.steady { color: var(--text-2); }
.ph-verdict.new, .ph-verdict.none { color: var(--text-3); }
.ph-chg.down { color: var(--good); }
.ph-chg.up { color: var(--down); }

/* ---------- the chart ---------- */

.ph-chartwrap { position: relative; padding: .5rem .6rem 0 .3rem; }
.ph-chart { display: block; width: 100%; touch-action: pan-y; }
.ph-chart text { font: 11px var(--font); fill: var(--text-3); font-variant-numeric: tabular-nums; }
.ph-chart .grid { stroke: var(--border); stroke-width: 1; }
.ph-chart .band { fill: var(--accent-dim); }
.ph-chart .band-edge { fill: none; stroke: var(--accent-line); stroke-width: 1; }
.ph-chart .median { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ph-chart .now-dot { fill: var(--accent); stroke: var(--bg-elev); stroke-width: 2; }
.ph-chart .now-halo { fill: var(--accent-dim); }
.ph-chart .mark { fill: var(--bg-elev); stroke: var(--text-3); stroke-width: 1.5; }
.ph-chart .mark-label { font-size: 10.5px; }
.ph-chart .cursor { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ph-chart .cursor-dot { fill: var(--accent); stroke: var(--bg-elev); stroke-width: 2; }
.ph-tip {
  position: absolute; top: .4rem; pointer-events: none; z-index: 2;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius, 6px);
  box-shadow: var(--shadow); padding: .45rem .6rem; font-size: .78rem; line-height: 1.45;
  color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ph-tip b { color: var(--text); }
.ph-empty { padding: 1.5rem 1.1rem; color: var(--text-3); font-size: .88rem; }

/* ---------- by board ---------- */

.ph-boards { padding: .5rem 1.1rem .25rem; }
.ph-boards h3 { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: .25rem 0 .4rem; }
.ph-boards table { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ph-boards td { padding: .32rem 0; border-top: 1px solid var(--border); color: var(--text-2); }
.ph-boards td:first-child { color: var(--text); padding-right: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 55%; }
.ph-boards td.num { text-align: right; padding-left: .75rem; white-space: nowrap; }
.ph-boards td.cnt { text-align: right; padding-left: .75rem; white-space: nowrap; color: var(--text-3); }
.ph-more { font: inherit; font-size: .8rem; color: var(--accent); background: none; border: 0; padding: .35rem 0; cursor: pointer; }

.ph-note { padding: .6rem 1.1rem .9rem; font-size: .76rem; color: var(--text-3); line-height: 1.5; }

@media (max-width: 62rem) {
  .ph-head { padding: .85rem .85rem .2rem; }
  .ph-facts { padding: .6rem .85rem .2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-boards, .ph-note { padding-left: .85rem; padding-right: .85rem; }
  .ph-boards td:nth-child(2) { display: none; }
}

/* ---------- comparing cards ---------- */

/* One colour per card. Not green, red or orange, which already mean cheap,
   dear and "look here". Each reads at 3:1 or better on the panel, light and
   dark, which is what a line needs. */
.ph { --ph-c0: #1a6dd0; --ph-c1: #7b4fd6; --ph-c2: #0f8484; --ph-c3: #c2407a; --ph-c4: #5a6a80; }
:root[data-mode="dark"] .ph { --ph-c0: #6aabff; --ph-c1: #b197ff; --ph-c2: #3ccfcf; --ph-c3: #ff7ab4; --ph-c4: #a9b7cc; }
.ph-legend { list-style: none; margin: 0; padding: .1rem 1.1rem .4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.ph-key {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .7rem;
  font: inherit; font-size: .84rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.ph-key:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ph-key:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.ph-key-name { font-weight: 600; }
.ph-key-price { font-weight: 700; }
.ph-key-none { color: var(--text-3); font-size: .78rem; }
.ph-key .ph-chg { font-size: .78rem; font-weight: 600; }
.ph-sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.ph-chart .line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ph-chart .end-dot { stroke: var(--bg-elev); stroke-width: 2; }
.ph-tip-row { display: flex; align-items: center; gap: .4rem; white-space: pre; }