/* Small additions in the core's tokens. Everything else comes from /static/app.css. */
.quota { margin: 0 0 20px; padding: 10px; }
.quota .small { font-size: .8125rem; white-space: nowrap; }
.quota p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
/* Nobody should take two photos just to be refused, so a closed day swaps the scanner for the way forward. */
.quota.closed ~ #scan-app .scan > :not(h1, .lede, .closed-panel),
.quota.closed ~ #scan-app .help details:last-child { display: none; }
.scan-terms { margin: 12px 0 0; }
.closed-panel { margin: 0; }
.closed-panel h2 { margin: 0 0 4px; }
.closed-panel p { margin: 0 0 10px; }
.closed-panel .small:not(.soft) { margin-top: 14px; }
.example .section-head { margin-bottom: 0; }
.example-answer { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; }
.example-answer img { width: 100%; height: auto; display: block; border-radius: 4px; }
.example-answer .card-name { margin: 0; font-weight: 700; }
.example-answer .verdict { justify-content: flex-start; font-size: 2rem; font-weight: 800; margin: 4px 0 8px; }
.example-answer .facts { gap: 4px 8px; }
.example-answer .facts div { background: none; padding: 0; align-items: flex-start; text-align: left; }
.example-answer .facts dd { font-size: 1rem; }
.example-answer .facts dt { font-size: .75rem; line-height: 1.2; }
.example-why { margin: 0 0 8px; padding-left: 18px; }
.example-why li { margin: 2px 0; }
.example > p { margin: 0; }
@media (max-width: 379px) { .example-answer { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; } }
@media (max-width: 259px) { .example-answer { grid-template-columns: minmax(0, 1fr); } .example-answer img { max-width: 96px; } }
@media (min-width: 900px) {
  .example { grid-column: 2; grid-row: 1; padding-top: 18px; }
  .quota { max-width: 420px; }
}
.page { max-width: 58ch; }
.page h2 { margin-top: 24px; }
.page form { margin-top: 12px; }
.pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pack + .pack { margin-top: 12px; }
.pack form { margin: 0; flex: none; }
.pack p { margin: 0; }
.balance { font-size: 1.3rem; font-weight: 800; }
.ledger td { padding: 6px 0; }
.check-foot { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.check-foot p { margin: 0; }
.check-foot form { margin: 0; }
.text-btn { background: none; border: 0; padding: 0; min-height: 44px; color: var(--soft); text-decoration: underline; font: inherit; font-size: .875rem; cursor: pointer; }
/* Turnstile runs unseen and only shows itself when it needs a click, so the gap belongs to its frame. */
.turnstile iframe { margin-top: 10px; }
header.top nav a { white-space: nowrap; }
@media (max-width: 400px) { header.top nav a { padding-left: 6px; padding-right: 6px; } }
.page input[type=email] { width: 100%; padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--soft); background: var(--bg); color: var(--ink); font: inherit; }
.page form button { margin-top: 12px; }
.pack form button { margin-top: 0; }
.panel .balance { margin: 0 0 4px; }
.panel .balance + .small { margin: 0; }
.page details.panel summary h2 { margin: 0; }
.page > form + details { margin-top: 16px; }

/* Members' shortlist: check-list rows, a segmented filter and a funnel of bar tracks */
.page.shortlist { max-width: 680px; }
.shortlist .facts { margin: 16px 0 20px; }
.seg-fill { display: flex; width: 100%; }
.seg-fill button { flex: 1; padding: 8px 6px; }
.shortlist .era-tip { margin: 0 0 4px; min-height: 2.6em; }
.picks a { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; }
.picks .c-main { gap: 2px; }
.picks .c-end { gap: 6px; }
.picks .chip.pays { margin: 0; font-weight: 600; }
.picks .sold { display: inline-flex; align-items: center; gap: 4px; color: var(--link); }
.picks a:hover .sold { text-decoration: underline; }
.picks li[hidden] { display: none; }
.funnel { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 10px; }
.funnel li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.funnel .f-n { font-weight: 700; text-align: right; }
.funnel .track { background: var(--surface-2); height: 10px; border-radius: 999px; overflow: hidden; }
.funnel .fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.funnel .f-t { grid-column: 2; }
.shortlist .closed-panel { margin-top: 20px; }
.shortlist > .btn.wide { margin-top: 16px; }
.shortlist-link { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.shortlist-link strong { color: var(--link); }