/* ===========================================================================
   Use case 5 — "Where was that setting again?".

   FOUR screens, one app: Settings > System > Gestures > Navigation bar. The
   first three are .uc-screen--alt (mid-run states); the Navigation bar page is
   .uc-screen--app, so the poster shows the finished result — gesture
   navigation selected, preview showing the pill. Everything else (coordinate
   system, Sova screen, app header, agent pill, cursor, playback controls)
   lives in kit.css.

   Every row is labelled, unlike the bar-placeholder lists in the other use
   cases. The section's claim is that Sova knows which row leads where, and
   that claim is only visible if the rows Sova does NOT take are readable too.

   The accent is slate rather than a product colour: this is the OS, not an
   app, and neutral chrome is what makes it read as Settings at a glance.

   Vertical budget on the 300x650 design grid:

       header        0 .. 92    (kit, every screen)
       list        112 .. 336   (levels 1-3, 4 rows x 56u)
       preview     106 .. 254   (leaf, 116u wide, centred)
       options     268 .. 368   (leaf, 2 rows x 46u)
       agent pill  392 .. 429   (kit default — no action bar on this one)
   Nothing meaningful below y=450 — the playback pill floats there.
   =========================================================================== */

.uc5-root,
.uc5-level,
.uc5-page { background: #f7f8fa; }

.uc5-head-icon {
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
    flex: none;
}

/* ============================== menu levels ============================= */

.uc5-list {
    position: absolute;
    inset-inline: calc(15 * var(--u));
    inset-block-start: calc(112 * var(--u));
    list-style: none;
    margin: 0;
    padding: 0;
}

.uc5-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    height: calc(56 * var(--u));
}

/* The reading pulse. Sova scans the level before it picks a row — without it
   the tap looks like foreknowledge, which is the one thing this illustration
   must not imply. */
.uc5-hl {
    position: absolute;
    inset-block: calc(4 * var(--u));
    inset-inline: calc(-8 * var(--u));
    border-radius: calc(12 * var(--u));
    background: var(--uc-accent, #475569);
    opacity: 0;
    pointer-events: none;
}

.uc5-ico {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.uc5-ico svg {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    color: #fff;
}

.uc5-ico--1 { background: #6b8afd; }
.uc5-ico--2 { background: #f0a23c; }
.uc5-ico--3 { background: #e2688c; }
.uc5-ico--4 { background: var(--uc-accent, #475569); }

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

/* Levels below the root drop the icons, the way Android's own sub-pages do.
   It also earns its keep here: the plainer each level gets, the further in it
   feels. */
.uc5-level .uc5-label { color: #334155; }

.uc5-chev {
    margin-inline-start: auto;
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    color: #c3cad6;
    flex: none;
    /* the shared glyph points back; a list chevron points onward */
    transform: scaleX(-1);
}

[dir="rtl"] .uc5-chev { transform: scaleX(1); }

/* hairlines between rows, from the second one down */
.uc5-row + .uc5-row::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: #e8ebf0;
}

/* the root's rows are icon-led cards rather than a ruled list */
.uc5-root .uc5-row + .uc5-row::before { display: none; }

/* ========================== navigation bar page ========================= */

/* --- the phone preview -------------------------------------------------- */
/* Android's own nav-bar page ships a preview exactly like this, which is what
   makes the morph legible: the thing that changes is a picture of the phone,
   not a label. It is the money shot, so it gets the whole upper half. */

.uc5-preview {
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    inset-block-start: calc(106 * var(--u));
    width: calc(116 * var(--u));
    height: calc(148 * var(--u));
    border-radius: calc(14 * var(--u));
    border: calc(1.5 * var(--u)) solid #d7dce5;
    background: linear-gradient(160deg, #e8ecf5 0%, #dfe6f2 55%, #d6e0ef 100%);
    overflow: hidden;
}

/* stand-in home screen: enough to say "this is your phone", nothing to read */
.uc5-preview-apps {
    display: grid;
    grid-template-columns: repeat(3, calc(20 * var(--u)));
    justify-content: center;
    gap: calc(10 * var(--u)) calc(12 * var(--u));
    padding-block-start: calc(18 * var(--u));
}

.uc5-preview-apps span {
    height: calc(20 * var(--u));
    border-radius: calc(6 * var(--u));
    background: rgba(255, 255, 255, 0.72);
}

.uc5-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: calc(24 * var(--u));
    background: rgba(255, 255, 255, 0.5);
}

/* Both states are always in the DOM and always laid out — only their opacity
   differs, so GSAP can cross-fade them. The class governs the STATIC state
   (poster, no-JS, reduced motion); inline styles from the animation override
   it and are cleared again by applyPoster. */
.uc5-nav-btns {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(22 * var(--u));
}

.uc5-nav-btn {
    background: #64748b;
    flex: none;
}

/* clip-path rather than a border triangle, and mirrored by re-clipping rather
   than scaleX(-1): GSAP animates `scale` on these during the morph and would
   overwrite a transform-based flip. */
.uc5-nav-btn--back {
    width: calc(7 * var(--u));
    height: calc(9 * var(--u));
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

[dir="rtl"] .uc5-nav-btn--back { clip-path: polygon(0 0, 0 100%, 100% 50%); }

.uc5-nav-btn--home {
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-radius: 50%;
}

.uc5-nav-btn--recent {
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    border-radius: calc(1.5 * var(--u));
}

.uc5-nav-pill {
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    inset-block-start: 50%;
    margin-block-start: calc(-2 * var(--u));
    width: calc(46 * var(--u));
    height: calc(4 * var(--u));
    border-radius: 999px;
    background: #475569;
    opacity: 0;
}

.uc5-preview.is-gesture .uc5-nav-btns { opacity: 0; }
.uc5-preview.is-gesture .uc5-nav-pill { opacity: 1; }

/* --- the two options ---------------------------------------------------- */

.uc5-opts {
    position: absolute;
    inset-inline: calc(15 * var(--u));
    inset-block-start: calc(268 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
}

.uc5-opt {
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    height: calc(46 * var(--u));
    padding-inline: calc(13 * var(--u));
    border-radius: calc(13 * var(--u));
    border: 1px solid #e6e9ef;
    background: #fff;
}

/* The dot pops on a CSS transition rather than a GSAP tween — GSAP cannot
   reach a pseudo-element, and the radio is a class swap either way. */
.uc5-radio {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    border-radius: 50%;
    border: calc(1.8 * var(--u)) solid #c3cad6;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uc5-radio::after {
    content: "";
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    border-radius: 50%;
    background: var(--uc-accent, #475569);
    transform: scale(0);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .uc5-radio::after { transition: none; }
}

.uc5-opt-label {
    font-size: calc(13 * var(--u));
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uc5-opt.is-on { border-color: var(--uc-accent, #475569); }
.uc5-opt.is-on .uc5-radio { border-color: var(--uc-accent, #475569); }
.uc5-opt.is-on .uc5-radio::after { transform: scale(1); }
.uc5-opt.is-on .uc5-opt-label { color: #111827; font-weight: 600; }