/* The model picker both pages share (ADR-016 step 3): the palette, the rate lines and the
   row list. Served by BOTH web apps at /picker.css; user.css and the panel build on it. */
:root { color-scheme: light dark; --bg: #f5f6f8; --card: #fff; --ink: #1c1f24; --muted: #5f6672; --line: #d9dde3; --accent: #3b5bdb; --err: #b3261e; }
/* ADR-028 phase 0: the spacing rhythm and type scale both pages may build on (the panel does). */
:root { --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --fs-title: 1.5rem; --fs-group: 1.1rem; --fs-help: .9rem; }
@media (prefers-color-scheme: dark) { :root { --bg: #14161a; --card: #1e2127; --ink: #e8eaed; --muted: #9aa3ad; --line: #343941; --accent: #7b93ff; --err: #ff8a80; } }
.rate { margin: .35rem 0 0; font-size: .9rem; color: var(--ink); }
.rate:empty { display: none; }
.rate.na { color: var(--muted); font-style: italic; }   /* "rate unavailable" / "pending" -- never mistakable for a price */
.rate.off { color: var(--accent); }                     /* the discount label (ADR-015) */
.muted { color: var(--muted); } .err { color: var(--err); }
/* ADR-015: the picker -- recently-used chips, a sort bar, and the scrolling row list. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; padding: .25rem .6rem; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .6rem 0 .4rem; }
label.inline { display: inline; margin: 0; font-weight: 500; }
select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.list { max-height: 24rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.mrow { display: block; width: 100%; text-align: left; padding: .5rem .7rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: var(--bg); }
.mrow.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.name { font-weight: 600; }
.id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.mark { font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; }
.cells { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .85rem; margin-top: .15rem; }
.cells .rate { margin: 0; font-size: .85rem; }