/* report-extras.css: the plan's own controls on the subscriber's page (report-extras.js; the owner's ask of 27 Sep 2026):
 * "Your searches" inside the ranks chapter, and the packs in "Add to your plan", act two's last card. Drawn in the
 * report's own tokens (report-view.css :root) and the brief's form language (report-brief.css .sb-sfi, .sb-slot-go); this
 * file only lays out what the two parts add. Phone first: everything wraps at 375 px with no sideways scroll, every
 * control is at least 38 px tall, and nothing is reached by a style attribute (the page's CSP drops those). */

/* ── your searches ─────────────────────────────────────────────────────────────────────────────────────────────── */
.rx-search{margin:16px 0 4px;padding:14px 0 0;border-top:1px solid var(--line)}
.rx-h{font:600 .95rem/1.3 var(--body);color:var(--ink);margin:0 0 4px}
.rx-note{font-size:.86rem;line-height:1.5;color:var(--ink2);margin:0 0 10px;max-width:60em}
.rx-chips{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.rx-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 12px;min-height:34px;box-sizing:border-box}
.rx-chip-t{font:500 .86rem/1.3 var(--body);color:var(--ink);overflow-wrap:anywhere}
.rx-chip-none{padding-right:12px;color:var(--ink3);font-size:.84rem}
.rx-chip-x{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--ink3);font:600 16px/1 var(--body);cursor:pointer}
.rx-chip-x:hover,.rx-chip-x:focus-visible{color:var(--bad);background:var(--bad-soft);outline:none}
.rx-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin:0 0 10px}
.rx-lab{flex-basis:100%;font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.rx-in{flex:1 1 220px;min-width:0;font:500 .9rem var(--body);color:var(--ink);background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:38px;box-sizing:border-box}
.rx-in:focus-visible{outline:2px solid var(--mint-soft);outline-offset:1px;border-color:var(--mint)}
.rx-in:disabled{opacity:.55}
.rx-btn{font:600 12px var(--body);color:#10231a;background:var(--mint);border:0;border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap;min-height:38px}
.rx-btn:hover,.rx-btn:focus-visible{filter:brightness(1.08);outline:2px solid var(--mint-soft);outline-offset:2px}
.rx-btn:disabled{opacity:.45;cursor:default;filter:none}
.rx-btn.is-busy{opacity:.6}
.rx-actions{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.rx-said{font:500 .82rem/1.45 var(--body);color:var(--ink2);margin:6px 0 0;min-height:1em;max-width:60em}
.rx-said.bad{color:var(--bad)}
.rx-said.good{color:var(--mint)}

/* ── add to your plan ──────────────────────────────────────────────────────────────────────────────────────────── */
.rx-card .rep-actline{max-width:60em}
.rx-packs{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line2)}
.rx-pack{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2)}
.rx-pack-main{min-width:0}
.rx-pack-name{font:600 .95rem/1.35 var(--body);color:var(--ink);margin:0}
.rx-pack-adds{font-size:.84rem;line-height:1.5;color:var(--ink2);margin:3px 0 0;max-width:52em}
.rx-pack-held{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mint);margin:6px 0 0}
.rx-pack-buy{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.rx-price{font:700 22px/1 var(--disp);color:var(--gold);white-space:nowrap}
.rx-price small{font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--ink3)}
.rx-why{font-size:.8rem;line-height:1.4;color:var(--ink3);margin:0;max-width:18em}
.rx-pack>.rx-said{grid-column:1 / -1;margin:0}
.rx-pack>.rx-said:empty{display:none}
.rx-loading{color:var(--ink3)}
/* a plan set to end: its one line leads the card, where the buttons would be (round 2, 27 Sep) */
.rx-card .rep-actline.rx-ending{color:var(--ink);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:8px;padding:9px 12px}
/* the map's points are sold on the map card: its row here says where, in one line (27 Sep) */
.rx-where a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
/* a pack's button is an outline (the review of 27 Sep, rule 7: the page keeps one gold button a screen) */
.rx-card .rx-buy{color:var(--gold);background:transparent;border:1px solid var(--gold-line)}
.rx-card .rx-buy:hover,.rx-card .rx-buy:focus-visible{border-color:var(--gold);background:var(--gold-soft);filter:none;outline:none}
.rx-packsbox>.rep-actline:first-child{margin-top:0}
/* the sign-in the till asks for, in the buy button's place: the quieter outline, since it moves no money */
.rx-signin{color:var(--mint);background:transparent;border:1px solid var(--mint)}
.rx-signin:hover,.rx-signin:focus-visible{background:var(--mint-soft);filter:none}

@media (max-width:640px){
  .rx-pack{grid-template-columns:minmax(0,1fr)}
  .rx-pack-buy{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left}
  .rx-why{max-width:none}
  .rx-add .rx-btn{flex:0 0 auto}
  .rx-save{flex:1 1 100%}
}
@media print{
  .rx-add,.rx-actions,.rx-chip-x,.rx-buy,.rx-signin,.rx-said{display:none !important}
  .rx-chip{background:#fff;border-color:#bbb}
  .rx-chip-t,.rx-h,.rx-pack-name{color:#111}
  .rx-price{color:#5a4413}
}