/* ===========================================================================
   Use case 2 — food ordering specifics.

   Only what is unique to the delivery app: the menu list, the quantity stepper
   and the option rows inside the detail sheet. Everything else (coordinate
   system, Sova screen, app header, cart badge, agent pill, cursor, playback
   controls, the sheet shell and the action bar) lives in kit.css. Accent colour
   comes from --uc-accent on the card.

   Vertical budget on the 300x650 design grid:
       header      0 .. 92     (kit)
       menu       92 .. 332    (3 items x 80u)
       agent pill 340 .. 378
       checkout   392 .. 432
       sheet      170 .. 440   (slides up over the menu)
   Nothing meaningful below y=450 — the playback pill floats there.
   =========================================================================== */

/* --- menu ---------------------------------------------------------------- */

.uc-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uc-item {
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    height: calc(80 * var(--u));
    padding-inline: calc(15 * var(--u));
    position: relative;
}

.uc-item + .uc-item::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(72 * var(--u));
    inset-inline-end: 0;
    border-block-start: 1px solid #f1f2f4;
}

/* highlight used by the tap and by the scan sweep */
.uc-item-hl {
    position: absolute;
    inset: 0;
    background: var(--uc-accent, #d97706);
    opacity: 0;
    pointer-events: none;
}

.uc-item-tile {
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
    border-radius: calc(14 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.uc-item-tile svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }

.uc-item-tile--1 { background: #fdf0d9; }
.uc-item-tile--2 { background: #e8f5e0; }
.uc-item-tile--3 { background: #fdeecd; }

.uc-item-text { flex: 1; min-width: 0; }

.uc-item-name {
    display: block;
    font-size: calc(13.5 * var(--u));
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the dietary tag is the payoff of this illustration — it only appears once
   Sova has actually picked the option in the sheet */
.uc-item-tag {
    display: none;
    margin-block-start: calc(4 * var(--u));
    font-size: calc(10.5 * var(--u));
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border-radius: 999px;
    padding: calc(2 * var(--u)) calc(8 * var(--u));
    width: fit-content;
}

.uc-item-tag.is-on { display: block; }

/* --- quantity stepper ---------------------------------------------------- */

.uc-stepper {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    flex: none;
}

.uc-qty {
    font-size: calc(13 * var(--u));
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
    min-width: calc(10 * var(--u));
    text-align: center;
    opacity: 0;                     /* revealed once the item is in the cart */
}

.uc-qty.is-on { opacity: 1; }

.uc-plus {
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    border-radius: 50%;
    background: var(--uc-accent, #d97706);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.uc-plus svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* the agent pill sits above the action bar in this layout */
.uc-illo[data-uc-illo="food"] .uc-agent-pill { inset-block-start: calc(340 * var(--u)); }

/* --- item detail sheet ---------------------------------------------------
   The sheet shell, its grip, title and CTA are kit.css; only the option rows
   below are specific to ordering. */

.uc-opt {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    height: calc(38 * var(--u));
    font-size: calc(12.5 * var(--u));
    color: #334155;
    border-block-end: 1px solid #f1f2f4;
}

.uc-radio {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    border-radius: 50%;
    border: calc(1.6 * var(--u)) solid #cbd5e1;
    flex: none;
    position: relative;
}

.uc-opt.is-on { color: #111827; font-weight: 600; }

.uc-opt.is-on .uc-radio {
    border-color: var(--uc-accent, #d97706);
    background: var(--uc-accent, #d97706);
    box-shadow: inset 0 0 0 calc(3 * var(--u)) #fff;
}