/* ===========================================================================
   Use case 4 — notes list to grocery cart.

   The first illustration that visits TWO apps. The notes screen is
   .uc-screen--alt (a mid-run state, kept out of the poster); the store is
   .uc-screen--app, so the poster shows the finished cart. Everything else
   (coordinate system, Sova screen, app header, cart badge, agent pill, cursor,
   playback controls, action bar) lives in kit.css.

   Vertical budget on the 300x650 design grid, both screens:

       header       0 .. 92    (kit on the store; .uc4-note-header on the notes)
       note list  104 .. 296   (4 rows x 48u)
       store grid 104 .. 340   (2 x 2 cards, 113u tall)
       agent pill 350 .. 387   (stage level — it outlives either screen)
       action bar 392 .. 432   (kit)
   Nothing meaningful below y=450 — the playback pill floats there.
   =========================================================================== */

/* The pill sits outside both screens, so it stays put while Sova moves between
   apps. Same slot on either screen: below the list, above the action bar. */
.uc-illo[data-uc-illo="shopping"] .uc-agent-pill { inset-block-start: calc(350 * var(--u)); }

/* ============================== notes app =============================== */

.uc4-notes { background: #fbfaff; }

/* Same geometry as the kit headers (see .uc-sova-header for why the top
   padding rather than bottom alignment), but plain paper — two apps that
   shared the accent header would read as one app. */
.uc4-note-header {
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    height: calc(92 * var(--u));
    padding-inline: calc(15 * var(--u));
    padding-block-start: calc(38 * var(--u));
    border-block-end: 1px solid #ececf5;
}

.uc4-note-back {
    width: calc(17 * var(--u));
    height: calc(17 * var(--u));
    color: #94a3b8;
    flex: none;
}

[dir="rtl"] .uc4-note-back { transform: scaleX(-1); }

.uc4-note-title {
    font-size: calc(16 * var(--u));
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uc4-list {
    list-style: none;
    margin: 0;
    padding: calc(12 * var(--u)) 0 0;
}

.uc4-line {
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    height: calc(48 * var(--u));
    padding-inline: calc(16 * var(--u));
}

/* an unticked checklist box: Sova is reading the note, not editing it */
.uc4-box {
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    border-radius: calc(3.5 * var(--u));
    border: calc(1.6 * var(--u)) solid #cbd5e1;
    flex: none;
}

.uc4-line-text {
    flex: 1;
    min-width: 0;
    font-size: calc(13.5 * var(--u));
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* what the scan bar leaves behind: the items Sova has taken off the list */
.uc4-line.is-read .uc4-line-text {
    color: var(--uc-accent, #7c3aed);
    font-weight: 600;
}

.uc4-line.is-read .uc4-box { border-color: var(--uc-accent, #7c3aed); }

/* The reading bar. One row tall, travelling the list top to bottom — this is
   the beat the whole section is about, so it is a solid moving object rather
   than the per-row blink the single-app use cases use. */
.uc4-scan {
    position: absolute;
    inset-inline: calc(8 * var(--u));
    inset-block-start: calc(104 * var(--u));
    height: calc(48 * var(--u));
    border-radius: calc(12 * var(--u));
    background: var(--uc-accent, #7c3aed);
    opacity: 0;
    pointer-events: none;
}

/* ============================== store app =============================== */

.uc4-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(10 * var(--u)) calc(12 * var(--u));
    padding: calc(12 * var(--u)) calc(14 * var(--u)) 0;
}

.uc4-card {
    height: calc(113 * var(--u));
    border: 1px solid #eceaf6;
    border-radius: calc(14 * var(--u));
    padding: calc(7 * var(--u));
    display: flex;
    flex-direction: column;
    position: relative;
}

.uc4-tile {
    height: calc(54 * var(--u));
    border-radius: calc(11 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.uc4-tile svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }

.uc4-tile--1 { background: #eef3ff; }
.uc4-tile--2 { background: #fff7e6; }
.uc4-tile--3 { background: #fdf6d5; }
.uc4-tile--4 { background: #f7eddf; }

.uc4-name {
    margin-block-start: calc(6 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uc4-foot {
    margin-block-start: auto;
    display: flex;
    align-items: center;
}

/* stands in for the price line: text-free, so nothing to translate and no
   currency to get wrong */
.uc4-foot .uc-bar { width: calc(34 * var(--u)); }

.uc4-plus {
    margin-inline-start: auto;
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
    border-radius: 50%;
    background: var(--uc-accent, #7c3aed);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

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

/* added state: the button becomes a tick and the card picks up the accent */
.uc4-check { display: none; }

.uc4-card.is-added { border-color: var(--uc-accent, #7c3aed); }
.uc4-card.is-added .uc4-check { display: block; }
.uc4-card.is-added .uc4-glyph { display: none; }