/* style — the rate card behind the price tag beside Daily spend.

   Simon's page (https://claude.ai/artifact/WJ9tCdUE1pe6M2AiC939Lm), scoped
   under #price-modal so it cannot reach the rest of the app. Its own
   stylesheet already drew on the panel's tokens, which is why so little
   changed on the way in: the cost ramp, the mono figures and the two bars
   are as they were. The renderer is js/panel/11d-rate-card.js. */

/* The card is a page, so its box is the page's width rather than the
   list's 720. */
#price-modal .rc-box { max-width: 1240px; max-height: none; height: 100%; }

#price-modal .rc {
  --namecol: 252px;
  --c1: rgba(var(--accent-rgb), .07);
  --c2: rgba(var(--accent-rgb), .15);
  --c3: rgba(var(--accent-rgb), .28);
  --c4: rgba(var(--accent-rgb), .46);
  --c5: rgba(var(--accent-rgb), .72);
  --c1t: #b6b6bf; --c2t: #d3ccd0; --c3t: #f1e7eb; --c4t: #fff; --c5t: #fff;
  --rc-blue: #5aa2ff;
  --rc-warn: #ffd35a;
  font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--text);
  padding: 4px 20px 26px;
}
#price-modal .rc * { box-sizing: border-box; }
#price-modal .rc-micro {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--text-faint);
}

/* ---- masthead ---- */
#price-modal .rc-mast { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
#price-modal .rc-top { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; }
#price-modal .rc-ttl { flex: 1 1 320px; }
#price-modal .rc h1 {
  font-weight: 800; font-size: clamp(22px, 3vw, 34px); line-height: 1.02;
  letter-spacing: -.02em; margin: 6px 0 0; text-wrap: balance;
}
#price-modal .rc h1 em { font-style: normal; color: var(--accent); }
#price-modal .rc-stamp {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  line-height: 1.8; text-align: right; letter-spacing: .02em;
}
#price-modal .rc-lede { max-width: 70ch; margin: 14px 0 0; color: var(--text-dim); font-size: 13px; }
#price-modal .rc-lede b { color: var(--text); font-weight: 600; }

#price-modal .rc-controls { margin: 18px 0 0; display: grid; gap: 12px; }
#price-modal .rc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#price-modal .rc-ctl > .rc-micro { min-width: 92px; }
#price-modal .rc-ctl > .rc-sortk { min-width: auto; margin-left: 8px; }
#price-modal .rc-pills { display: flex; gap: 4px; flex-wrap: wrap; }
#price-modal .rc-pills button {
  appearance: none; cursor: pointer; font: inherit; height: 34px; padding: 0 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-dim); font-size: 12px; font-weight: 700; letter-spacing: .3px;
  font-variant-numeric: tabular-nums; transition: color .12s, background .12s;
}
#price-modal .rc-pills button:hover { color: var(--text); background: var(--card-hover); }
#price-modal .rc-pills button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#price-modal .rc-pills.sm button { height: 26px; padding: 0 11px; font-size: 11px; font-weight: 600; }
#price-modal .rc-hint { font-size: 11px; color: var(--text-faint); }

/* ---- the chart: two magnitude bars on one shared row order ---- */
#price-modal .rc-chart {
  margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}
#price-modal .rc-chhead {
  display: grid; grid-template-columns: var(--namecol) 1fr 1fr;
  background: var(--surface-sunk); border-bottom: 1px solid var(--border);
}
#price-modal .rc-chhead > div {
  padding: 12px 14px 11px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-faint);
}
#price-modal .rc-chhead .u { text-transform: none; letter-spacing: .3px; font-weight: 500; opacity: .8; margin-left: 6px; }
#price-modal .rc-crow {
  display: grid; grid-template-columns: var(--namecol) 1fr 1fr;
  border-bottom: 1px solid var(--border); align-items: stretch;
}
#price-modal .rc-crow:last-child { border-bottom: 0; }
#price-modal .rc-crow:hover { background: var(--card-hover); }
#price-modal .rc-cname { padding: 15px 14px; min-width: 0; }
#price-modal .rc-cname b { display: block; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#price-modal .rc-cname i {
  display: block; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
}
#price-modal .rc-cname i.t { color: var(--accent); }
#price-modal .rc-bwrap { padding: 15px 14px; display: flex; align-items: center; gap: 13px; min-width: 0; }
#price-modal .rc-btrack {
  flex: 1 1 auto; min-width: 20px; height: 10px; border-radius: 2px;
  background: rgba(255,255,255,.045); overflow: hidden;
}
#price-modal .rc-btrack > span { display: block; height: 100%; border-radius: 2px 4px 4px 2px; }
#price-modal .rc-cost .rc-btrack > span { background: var(--accent); }
#price-modal .rc-time .rc-btrack > span { background: var(--rc-blue); }
#price-modal .rc-time.est .rc-btrack > span { background: var(--rc-blue); opacity: .8; }
#price-modal .rc-bval {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: #fff; min-width: 86px; text-align: left;
  letter-spacing: -.02em; line-height: 1.15;
}
#price-modal .rc-bval small { display: block; font-size: 9.5px; font-weight: 500; color: var(--text-faint); letter-spacing: .02em; }
#price-modal .rc-chfoot {
  padding: 9px 14px; font-size: 11px; color: var(--text-faint);
  border-top: 1px solid var(--border); background: var(--surface-sunk);
}
#price-modal .rc-csec {
  padding: 15px 14px 13px; background: var(--surface-deep);
  border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
#price-modal .rc-csec b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
#price-modal .rc-csec span { font-size: 11px; color: var(--text-faint); }
#price-modal .rc-csec em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: .08em; }

/* WHAT IS NOT HERE ANY MORE.

   Simon: "it appears to have a second version of the pricing table where
   it's got individual prices for all the tiers visible all the time. Let's
   lose that. We only want that main top section." And then: "lose all the
   text at the bottom where it says things like where these numbers come
   from."

   So the per-tier tables and the closing notes are gone from the renderer,
   and their rules are gone from here rather than left behind to be read as
   something the card still does. What the tables carried that was worth
   keeping did not need a table: a row that caps at a duration says so on
   the row, and a row the app prices differently says so on the row. */
#price-modal .rc-cname i.c { color: var(--rc-warn); }
#price-modal .rc-cname i.w { color: var(--rc-warn); }
#price-modal .rc-chfoot b { color: var(--text-dim); font-weight: 600; }

#price-modal .rc-empty { padding: 40px; text-align: center; color: var(--text-faint); }

@media (max-width: 860px) {
  #price-modal .rc-chhead, #price-modal .rc-crow { grid-template-columns: 1fr 1fr; }
  #price-modal .rc-chhead > div:first-child { display: none; }
  #price-modal .rc-crow .rc-cname { grid-column: 1 / -1; padding-bottom: 0; }
  #price-modal .rc-stamp { text-align: left; }
}