/* The home page: a price list and a three-question quote. Base rules first, media queries last. */
.hq-layout { display: grid; gap: 1.25rem; align-items: start; }
.hq-layout > * { min-width: 0; }
.hq-card { display: grid; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-box); background: var(--color-base-100);
           border: 2px solid var(--color-base-300); }
.hq-lead { border-color: var(--color-primary); }
.hq-field { display: grid; gap: .35rem; position: relative; }
.hq-input { display: flex; gap: .4rem; }
.hq-input .input { flex: 1 1 auto; min-width: 0; }
.hq-here { flex: none; border: 2px solid var(--color-base-300); }
.hq-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: .25rem; padding: .3rem; list-style: none;
           background: var(--color-base-100); border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
           box-shadow: 0 8px 24px rgb(0 0 0 / .14); max-height: 18rem; overflow-y: auto; }
.hq-list li { padding: .6rem .75rem; border-radius: .5rem; cursor: pointer; font-size: 1.05rem; line-height: 1.3; }
.hq-list li[aria-selected="true"], .hq-list li:hover { background: var(--color-base-200); }
.hq-list li small { display: block; opacity: .7; font-size: .85rem; }
.hq-msg { font-size: .95rem; min-height: 0; }
.hq-msg.is-ok { color: var(--color-success); font-weight: 700; }
.hq-msg.is-bad { color: var(--color-error); font-weight: 700; }
.hq-when { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.hq-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 999px; cursor: pointer;
           border: 2px solid var(--color-base-300); font-weight: 700; font-size: 1.05rem; }
.hq-pill:has(input:checked) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, transparent); }
.hq-pill input { accent-color: var(--color-primary); width: 1.1rem; height: 1.1rem; }
.hq-prices { display: grid; gap: 0; }
.hq-prices > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline;
                   padding: .75rem 0; border-bottom: 2px solid var(--color-base-200); }
.hq-prices dt { display: grid; gap: .15rem; font-size: 1.15rem; }
.hq-note { font-size: .95rem; opacity: .75; }
.hq-prices dd { font-size: 1.7rem; font-weight: 800; white-space: nowrap; }
.hq-prices dd small { font-size: .95rem; font-weight: 700; opacity: .75; }
.hq-accounts { font-size: 1.05rem; }
.hq-quote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.25rem;
            padding: 1rem 1.25rem; border-radius: var(--radius-box); border: 2px dashed var(--color-base-300); font-size: 1.2rem;
            color: inherit; text-decoration: none; }
.hq-quote:hover { border-color: var(--color-primary); background: var(--color-base-200); }
.hq-foot { display: grid; gap: .75rem; margin-top: 1.25rem; }
.hq-links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: 1.1rem; }

@media (min-width: 900px) {
    .hq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hq-card { padding: 1.5rem; }
}

/* The promo space near the bottom of the home page (Website ▸ Home page promo). */
.hq-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
            margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--radius-box); border: 2px solid var(--color-accent);
            background: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100)); }
.hq-promo-text { flex: 1 1 22rem; display: grid; gap: .4rem; }
.hq-promo-body { font-size: 1.1rem; line-height: 1.5; }
.hq-promo-body p + p { margin-top: .5rem; }

/* The Saturday Costco run card (site/_costco_home.html); the game's own styles are in costco.css */
.hq-col { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.hq-costco { min-width: 0; }
.hq-costco-in { display: grid; justify-items: end; line-height: 1.1; }
.hq-costco-in b { font-size: 2rem; font-weight: 900; color: var(--color-success); }
.hq-costco-in span { font-weight: 700; opacity: .75; white-space: nowrap; }

/* Location, asked in words first (partials/spot_fields.html) */
.hq-ask { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; margin-bottom: .75rem;
          border: 2px solid var(--color-primary); border-radius: var(--radius-box);
          background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100)); }
.hq-ask[hidden] { display: none; }
.hq-ask > i { font-size: 1.8rem; color: var(--color-primary); line-height: 1; margin-top: .1rem; }
.hq-ask-body { display: grid; gap: .45rem; min-width: 0; }
.hq-ask-do { display: flex; flex-wrap: wrap; gap: .5rem; }
.hq-list li.is-none { border-top: 1px solid var(--color-base-300); border-radius: 0 0 .5rem .5rem; font-weight: 700; }

/* Book your delivery: the price, live as the addresses are picked */
.hq-live { transition: opacity .2s; }
.hq-live.is-working { opacity: .55; }
.hq-live-sub { font-size: 1.05rem; }
@media (min-width: 64rem) { .hq-layout.hq-solo { grid-template-columns: minmax(0, 40rem); } }