/* Retailer pages: ONLY what is specific to a retailer page.
 *
 * This used to be a complete second design system — its own :root tokens, its
 * own .wrap, header, footer, h1, h2, h3 and p. The 48 pages generated here load
 * scout.css and then overrode it, which is why they sat at a different measure
 * (20px gutters against 44px), why their titles came out 42px against 52px, and
 * why they were the only pages on the site with no survey plate. They looked
 * like a different site because they were built like one.
 *
 * Everything below is a component that exists nowhere else. If a rule here
 * could apply to another page, it belongs in scout.css instead.
 */

/* the retailer's identity block, inside the shared page head */
.idplate{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.idplate img{height:38px;width:auto;max-width:190px;object-fit:contain}
.idplate h1{margin:0}

/* sections on these pages are cards rather than open page */
main{padding:0 0 10px;display:flex;flex-direction:column;gap:var(--s-4)}
main > section{background:var(--panel);border:1px solid var(--rule);padding:22px 24px;margin:0}
main > section > h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink3);font-weight:400;margin:0 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--rule)}

/* complaint record */
.record{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.recmain{flex:1 1 300px;min-width:0}
.stars{letter-spacing:1px;color:var(--rule2);vertical-align:middle;white-space:nowrap}
.stars .on{color:var(--flare)}
.ct{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:7px}
.verdict{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;
  margin:10px 0 4px;line-height:1.15}
.scale{border-collapse:collapse;font-size:13.5px;flex:0 0 auto}
.scale td{padding:3px 0 3px 11px;color:var(--ink3);white-space:nowrap}
.scale td:first-child{padding-left:0}
.scale tr.here td{color:var(--ink);font-weight:600}

/* facts */
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:15px}
dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);padding-top:3px}
dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* plan tables: they bleed to the card edge, which the shared .scroll does not */
.scroll{overflow-x:auto;margin:0 -24px;padding:0 24px}
table.plans{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
table.plans th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);font-weight:400;text-align:left;padding:0 12px 7px 0;border-bottom:1px solid var(--rule2)}
table.plans td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.plans td:last-child,table.plans th:last-child{padding-right:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pname{font-weight:600}
.flag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:1.5px 6px;border:1px solid var(--rule2);
  color:var(--ink3);margin:2px 4px 0 0;white-space:nowrap}
.flag.warn{border-color:var(--flare);color:var(--flare-ink);background:var(--flarebg)}
.flag.good{border-color:var(--good);color:var(--good);background:var(--trailbg)}

.cta{display:inline-block;background:var(--flare-btn);color:#fff;text-decoration:none;
  font-weight:600;padding:12px 22px;border:1px solid var(--flare-btn)}
.cta:hover{background:var(--flare-ink)}

/* directory */
.filter{margin:0 0 18px;position:relative}
.filter input{width:100%;font:inherit;font-size:16px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--rule2);color:var(--ink)}
.filter input::placeholder{color:var(--ink3)}
.count{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);margin:9px 0 0}
.grid a[hidden]{display:none}
.empty{padding:22px 0;color:var(--ink2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  border:1px solid var(--rule);border-width:1px 0 0 1px}
.grid a{background:var(--panel);padding:14px 16px;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--rule);border-width:0 1px 1px 0}
.grid a:hover{background:var(--canvas2)}
.grid .nm{font-weight:600;line-height:1.25}
.grid .mt{font-size:13px;color:var(--ink3)}

@media (max-width:640px){
  main > section{padding:18px 16px}
  .scroll{margin:0 -16px;padding:0 16px}
  dl{grid-template-columns:1fr;gap:2px 0}
  dt{padding-top:9px}
}