/* Costco: the office's pages, the shop screen in the warehouse, and the customer's shopping page.
   Base rules first, media queries last (scripts/check_cascade.py). */

/* ---- Office ------------------------------------------------------------------------------------------ */
.cc-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-tile { padding: .9rem 1rem; border-radius: var(--radius-box); background: var(--color-base-100);
           border: 2px solid var(--color-base-300); display: block; }
a.cc-tile:hover { border-color: var(--color-primary); }
.cc-tile-k { font-size: .85rem; font-weight: 700; opacity: .7; }
.cc-tile-v { font-size: 1.8rem; font-weight: 800; line-height: 1.15; }
.cc-tile-s { font-size: .9rem; opacity: .75; }
.cc-tile.is-warn { border-color: var(--color-warning); }
.cc-tile.is-good { border-color: var(--color-success); }

.cc-switch { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 1rem 1.1rem;
             border-radius: var(--radius-box); border: 2px solid var(--color-base-300); background: var(--color-base-100); }
.cc-switch.is-on { border-color: var(--color-success); }
.cc-switch .ti { font-size: 2rem; }
.cc-switch-text { flex: 1 1 18rem; min-width: 0; }

.cc-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
.cc-filters .input { min-width: 14rem; }
.cc-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }
.cc-dim { opacity: .65; }
.cc-price { font-weight: 800; white-space: nowrap; }
.cc-pill { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 700;
           padding: .05rem .5rem; border-radius: 999px; background: var(--color-base-200); white-space: nowrap; }
.cc-pill.is-cold { background: color-mix(in oklab, var(--color-info) 22%, transparent); }
.cc-pill.is-frozen { background: color-mix(in oklab, var(--color-primary) 22%, transparent); }
.cc-pill.is-fresh { background: color-mix(in oklab, var(--color-success) 25%, transparent); }
.cc-pill.is-stale { background: color-mix(in oklab, var(--color-warning) 30%, transparent); }
.cc-pill.is-bad { background: color-mix(in oklab, var(--color-error) 25%, transparent); }

.cc-spark { width: 100%; max-width: 20rem; height: auto; overflow: visible; }
.cc-spark polyline { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cc-spark circle { fill: var(--color-primary); }

.cc-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.1rem; }
.cc-kv dt { opacity: .7; }
.cc-kv dd { font-weight: 700; overflow-wrap: anywhere; }

.cc-receipt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; min-height: 16rem; }
.cc-receipt.is-raw { min-height: 0; }

/* The gazetteer: the walk through the warehouse, drawn. */
.gz-walk { width: 100%; height: auto; display: block; font-family: inherit; }
.gz-path { fill: none; stroke: var(--color-base-300); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.gz-node circle { stroke: var(--color-base-100); stroke-width: 3; }
.gz-node.is-dry circle { fill: var(--color-neutral); }
.gz-node.is-cold circle { fill: var(--color-info); }
.gz-node.is-frozen circle { fill: var(--color-primary); }
.gz-node.is-off { opacity: .35; }
.gz-code { font-size: 13px; font-weight: 800; fill: var(--color-base-content); }
.gz-name { font-size: 11px; fill: var(--color-base-content); opacity: .7; }
.gz-num { font-size: 12px; font-weight: 800; fill: var(--color-neutral-content); }
.gz-door { font-size: 12px; font-weight: 800; fill: var(--color-base-content); opacity: .6; }
.gz-row { scroll-margin-top: 6rem; }
.gz-row.is-off { opacity: .55; }

/* ---- The shop screen --------------------------------------------------------------------------------- */
.pk-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
          padding: .6rem .75rem; border-radius: var(--radius-box); background: var(--color-base-100);
          border: 2px solid var(--color-base-300); box-shadow: 0 4px 12px rgb(0 0 0 / .08); }
.pk-bar .select { flex: 1 1 12rem; }
.pk-left { font-weight: 800; white-space: nowrap; }
.pk-list { display: grid; gap: .6rem; }
.pk-temp { font-size: 1.1rem; font-weight: 800; margin: 1rem 0 .2rem; display: flex; align-items: center; gap: .4rem; }
.pk-row { padding: .8rem .9rem; border-radius: var(--radius-box); background: var(--color-base-100);
          border: 2px solid var(--color-base-300); display: grid; gap: .5rem; }
.pk-row.is-done { opacity: .55; border-style: dashed; }
.pk-row.is-missing { border-color: var(--color-error); }
.pk-row.is-busy { pointer-events: none; opacity: .6; }
.pk-head { display: flex; gap: .7rem; align-items: flex-start; }
.pk-qty { flex: none; display: grid; place-items: center; min-width: 3rem; height: 3rem; border-radius: .75rem;
          font-size: 1.4rem; font-weight: 800; background: var(--color-primary); color: var(--color-primary-content); }
.pk-row.is-done .pk-qty { background: var(--color-base-300); color: var(--color-base-content); }
.pk-name { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.pk-meta { font-size: .92rem; opacity: .8; display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.pk-crates { display: flex; flex-wrap: wrap; gap: .35rem; }
.pk-crate { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: .5rem;
            font-weight: 800; background: var(--color-base-200); border: 2px solid var(--color-base-300); }
.pk-crate.is-found { border-color: var(--color-success); }
.pk-crate.is-short, .pk-crate.is-subbed { border-color: var(--color-warning); }
.pk-crate.is-missing { border-color: var(--color-error); text-decoration: line-through; }
.pk-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pk-more { display: grid; gap: .6rem; padding-top: .3rem; border-top: 2px dashed var(--color-base-300); }
.pk-split { display: grid; gap: .4rem; }
.pk-split label { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-weight: 700; }
.pk-split .input { width: 5.5rem; text-align: center; }
.pk-msg { font-weight: 700; }
.pk-msg.is-error { color: var(--color-error); }

/* ---- The customer's shopping page -------------------------------------------------------------------- */
.cs-preview { border: 3px dashed var(--color-warning); }
.cs-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: 1.1rem; }
.cs-facts span { display: inline-flex; align-items: center; gap: .4rem; }
.cs-layout { display: grid; gap: 1.5rem; align-items: start; }
.cs-layout > * { min-width: 0; }
.cs-search { display: flex; gap: .5rem; }
.cs-search .input { flex: 1 1 auto; min-width: 0; }
.cs-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .1rem .6rem; scrollbar-width: thin; }
.cs-chip { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 999px;
           font-weight: 700; border: 2px solid var(--color-base-300); background: var(--color-base-100); cursor: pointer;
           font-size: 1rem; }
.cs-chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-content);
                                border-color: var(--color-primary); }
.cs-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(46%, 13rem), 1fr)); }
.cs-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .5rem; padding: .9rem 1rem; border-radius: var(--radius-box);
           background: var(--color-base-100); border: 2px solid var(--color-base-300); }
.cs-card.is-in { border-color: var(--color-primary); }
.cs-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .9rem; }
.cs-card-name { font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
.cs-card-size { opacity: .8; }
.cs-card-note { font-size: .9rem; opacity: .8; }
.cs-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cs-each { font-size: 1.25rem; font-weight: 800; }
.cs-each small { font-size: .85rem; font-weight: 700; opacity: .75; }
.cs-qty { display: inline-flex; align-items: center; border: 2px solid var(--color-primary); border-radius: .75rem; overflow: hidden; }
.cs-qty button { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800;
                 background: var(--color-base-100); color: var(--color-primary); cursor: pointer; }
.cs-qty button:hover { background: var(--color-base-200); }
.cs-qty output { min-width: 2.2rem; text-align: center; font-size: 1.15rem; font-weight: 800; }
.cs-empty { padding: 1.2rem; border: 2px dashed var(--color-base-300); border-radius: var(--radius-box); font-size: 1.1rem; }

.cs-panel { padding: 1.1rem 1.2rem; border-radius: var(--radius-box); background: var(--color-base-100);
            border: 2px solid var(--color-primary); display: grid; gap: .8rem; scroll-margin-top: 1rem; }
.cs-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; }
.cs-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.cs-line-q { font-weight: 800; min-width: 2rem; }
.cs-line-n { overflow-wrap: anywhere; }
.cs-line-c { font-weight: 800; white-space: nowrap; }
.cs-sums { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding-top: .6rem;
           border-top: 2px solid var(--color-base-300); }
.cs-sums dd { text-align: right; font-weight: 700; white-space: nowrap; }
.cs-sums .is-total { font-size: 1.2rem; font-weight: 800; }
.cs-hold { font-size: .95rem; opacity: .85; }
.cs-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
          background: var(--color-base-100); border-top: 2px solid var(--color-base-300); box-shadow: 0 -4px 16px rgb(0 0 0 / .1); }
.cs-bar a { width: 100%; }
.cs-steps { display: grid; gap: .8rem; counter-reset: step; }
.cs-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; align-items: start; list-style: none; }
.cs-steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 2.4rem;
                       height: 2.4rem; border-radius: 50%; font-weight: 800; background: var(--color-primary);
                       color: var(--color-primary-content); }

.co-lines { display: grid; gap: .4rem; }
.co-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .6rem 0;
           border-bottom: 2px solid var(--color-base-200); }
.co-line-s { font-size: .95rem; opacity: .8; }

@media (min-width: 700px) {
    .cc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pk-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .cc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cs-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
    .cs-panel { position: sticky; top: 1rem; }
    .cs-bar { display: none; }
}

/* A tap kept on the phone until there's signal (costco_pick.js). */
.pk-row.is-queued { border-style: dashed; border-color: var(--color-warning); }
.pk-row.is-queued::after { content: "Waiting for signal"; display: block; margin-top: .35rem; font-weight: 700;
                           color: var(--color-warning-content); background: var(--color-warning);
                           border-radius: var(--radius-field); padding: .15rem .5rem; width: fit-content; }

/* The shared run: what each share would be with more neighbors on it */
.cs-more { display: flex; flex-wrap: wrap; gap: .6rem; }
.cs-more li { display: grid; gap: .1rem; padding: .5rem .9rem; border: 2px solid var(--color-base-300); border-radius: .75rem;
    font-size: 1.05rem; min-width: 9rem; }
.cs-more li strong { font-size: 1.4rem; }

/* The shared run, as a game: one big number, a ladder that shrinks as neighbors join */
.run-game { border: 3px solid var(--color-primary); border-radius: var(--radius-box); background: var(--color-base-100);
    padding: 1.1rem 1.2rem; display: grid; gap: .9rem; }
.run-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.run-k { font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.run-clock { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px;
    background: var(--color-warning); color: var(--color-warning-content); white-space: nowrap; }
.run-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.run-big { font-size: clamp(2.8rem, 9vw, 4rem); font-weight: 900; line-height: 1; color: var(--color-primary); }
.run-sub { font-weight: 700; opacity: .75; }
.run-alone { display: grid; text-align: right; font-weight: 700; opacity: .6; }
.run-alone s { font-size: 1.4rem; }
.run-ladder { display: flex; align-items: flex-end; gap: 3px; height: 5.5rem; padding: 0; margin: 0; list-style: none; }
.run-ladder li { flex: 1; height: max(6%, var(--h)); border-radius: 4px 4px 0 0; background: var(--color-base-300); }
.run-ladder li.is-in { background: var(--color-success); }
.run-ladder li.is-you { background: var(--color-primary); outline: 3px solid var(--color-primary); outline-offset: 2px;
    animation: run-pulse 1.6s ease-in-out infinite; }
@keyframes run-pulse { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .run-ladder li.is-you { animation: none; } }
.run-legend { display: flex; justify-content: space-between; gap: .75rem; font-size: 1.1rem; }
.run-next { color: var(--color-success); font-weight: 700; }
.run-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.run-chips li { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px;
    background: var(--color-base-200); font-weight: 700; font-size: .95rem; }
.run-share { justify-self: start; }
.run-said { font-weight: 700; color: var(--color-success); }
.run-why summary { cursor: pointer; font-weight: 700; opacity: .8; }
.run-bar { display: flex; height: .9rem; border-radius: 999px; overflow: hidden; margin-top: .6rem; }
.run-keys { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; font-size: .95rem; }
.run-keys i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; }
.run-seg-1 { background: var(--color-primary); } .run-seg-2 { background: color-mix(in srgb, var(--color-primary) 40%, var(--color-base-100)); }
.run-seg-3 { background: var(--color-warning); } .run-seg-4 { background: var(--color-success); }
.run-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; padding: 0; list-style: none; }
.run-steps li { display: grid; gap: .1rem; justify-items: center; text-align: center; padding: .8rem .5rem;
    border-radius: var(--radius-box); background: var(--color-base-200); }
.run-steps i { font-size: 2rem; color: var(--color-primary); }
.run-steps b { font-size: 1.1rem; }

/* The card, catalog first: our photo, a text badge for where it comes from, a small origin flag */
.cs-card-pic { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: .6rem; background: var(--color-base-200); }
.cs-card-pic.is-none { display: grid; place-items: center; font-size: 2.2rem; aspect-ratio: auto; height: 4.5rem; color: var(--color-base-content); opacity: .3; }
.cs-src { font-weight: 900; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem;
    border-radius: .3rem; color: #fff; background: #c8102e; }
.cs-origin { font-weight: 700; font-size: .8rem; padding: .1rem .45rem; border-radius: .3rem; background: var(--color-base-200); }
.cs-gate { font-weight: 800; font-size: .8rem; white-space: nowrap; padding: .2rem .55rem; border-radius: 999px; color: var(--color-primary);
    border: 2px solid var(--color-primary); }
.cc-photo { max-width: 14rem; border-radius: .6rem; }
@media (max-width: 30rem) {
    .cs-card { padding: .7rem; gap: .4rem; }
    .cs-card-name { font-size: 1rem; }
    .cs-card-foot { flex-direction: column; align-items: stretch; }
    .cs-card-foot .btn { width: 100%; }
}
.pk-cap { font-weight: 900; color: var(--color-error); }
.cs-variants { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.cs-variant { padding: .25rem .65rem; border-radius: 999px; border: 2px solid var(--color-base-300); font-weight: 700; font-size: .9rem; }
.cs-variant[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-content); }
.run-trip { display: inline-flex; align-items: center; font-weight: 800; padding: .25rem .7rem; border-radius: 999px;
            background: var(--color-base-200); margin-left: auto; }