/* uw-library.css — "SAME PAGE, DIFFERENT READER" persona chooser.
   Companion to js/uw-library.js for #library.

   Two jobs:
   1) Style the RAW grouped articles (.uwl-group / .uwl-case) as an
      editorial catalog — the genuine no-JS / forced-colors fallback.
   2) Style the live chooser + shared cinematic stage the JS appends.
      State classes written by JS on .uwl-main:
        uwl-bar-on   request bar visible / typing
        uwl-send     enter flash on the bar
        uwl-after    reshaped page (drives every <=900ms morph)
        uwl-req-on   sentence docked as an active-request chip
        uwl-seal-on / uwl-hot / uwl-ok / uwl-swap (soft scene morph)
        uwl-static   settled reduced-motion frame (chrome carries the
                     typed sentence in full, since the bar never plays)
      .uwl-stage gets uwl-compact under 42.5 root ems; below 300px the JS
      removes .uwl-live from the host and the catalog returns.

   Light section; all visible text >= 13px; rust = the request acting,
   jade = verified links only; unverified reads UNAVAILABLE, dashed,
   never active. */

/* ==========================================================
   FALLBACK CATALOG (no JS — also the forced-colors view)
   ========================================================== */

/* The #library band. Without this the section is the only transparent
   content band on the page and the paper / paper-2 alternation goes flat
   across #examples -> #library -> #direction. */
.uwl-section { background: var(--ua3-paper-2, #ebe7dd); }

.uwl-host { display: block; }

.uwl-group {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) repeat(3, minmax(0, 1fr));
    gap: 1.2rem 1.8rem;
    border-top: 2px solid var(--ua3-ink, #191917);
    padding-top: 1.1rem;
}
.uwl-group + .uwl-group { margin-top: 2.2rem; }

.uwl-group h3 {
    grid-column: 1;
    margin: 0;
    max-width: 11ch;
    color: var(--ua3-ink, #191917);
    font-size: 1.1rem;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.uwl-case { min-width: 0; border-left: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18)); padding-left: 1.1rem; }

.uwl-case h4 {
    margin: 0 0 0.45rem;
    color: var(--ua3-ink, #191917);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.uwl-case .uwl-moment {
    margin: 0 0 0.7rem;
    color: var(--ua3-muted, #57534b);
    font-size: 0.9rem;
    line-height: 1.45;
}

.uwl-case .uwl-type {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--ua3-rust, #a73a1e);
    background: var(--ua3-white, #fffdf8);
    color: var(--ua3-rust, #a73a1e);
    font-family: var(--ua3-mono, "Geist Mono", "SFMono-Regular", Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.uwl-case .uwl-get {
    margin: 0;
    color: var(--ua3-ink, #191917);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.4;
}
.uwl-case .uwl-get::before { content: "→ "; color: var(--ua3-rust, #a73a1e); }

@media (max-width: 56rem) {
    .uwl-group { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
    .uwl-group h3 { grid-column: auto; max-width: none; }
}

/* ==========================================================
   LIVE MODE SWITCH
   ========================================================== */

.uwl-host.uwl-live > :not(.uwl-stage) { display: none; }
.uwl-host:not(.uwl-live) > .uwl-stage { display: none; }

/* ==========================================================
   STAGE SHELL — chooser rail + shared frame
   ========================================================== */

.uwl-stage {
    display: grid;
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    gap: 1.4rem 2.4rem;
    align-items: start;
    font-family: var(--ua3-mono, "Geist Mono", "SFMono-Regular", Consolas, monospace);
}

/* ---------- chooser rail ---------- */

.uwl-nav { display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; }

.uwl-nav-g { min-width: 0; }

.uwl-nav-l {
    display: block;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* the taxonomy is the point of the rail — wrap, never ellipsise */
    white-space: normal;
    text-wrap: balance;
}

.uwl-stage .uwl-chip {
    display: block;
    width: 100%;
    margin: 0 0 2px;
    padding: 0.42rem 0.55rem 0.42rem 0.7rem;
    border: 1px solid transparent;
    border-left: 3px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
    background: transparent;
    color: var(--ua3-ink-2, #2b2a26);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.uwl-stage .uwl-chip:hover {
    border-left-color: var(--ua3-rust-bright, #d4512e);
    color: var(--ua3-ink, #191917);
}
.uwl-stage .uwl-chip[aria-pressed="true"] {
    border-color: var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    border-left: 3px solid var(--ua3-rust, #a73a1e);
    background: var(--ua3-white, #fffdf8);
    color: var(--ua3-ink, #191917);
    font-weight: 650;
    box-shadow: 3px 3px 0 rgba(25, 25, 23, 0.08);
}
.uwl-stage .uwl-chip:focus-visible {
    outline: 3px solid var(--ua3-focus, #df5b34);
    outline-offset: 2px;
}

/* ---------- main column ---------- */

.uwl-main { min-width: 0; max-width: 58rem; }

.uwl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin-bottom: 0.7rem;
}
.uwl-kicker {
    color: var(--ua3-rust, #a73a1e);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.08em;
}
.uwl-title {
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: opacity 0.24s ease;
}
.uwl-steps { display: flex; gap: 0.9rem; margin-left: auto; }
.uwl-steps i {
    font-style: normal;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    /* dim by weight/rule, not by washing the text out: the inactive beats
       are persistent state and must clear 4.5:1 at 13px */
    opacity: 0.9;
    transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.uwl-steps i.uwl-son {
    color: var(--ua3-ink, #191917);
    border-color: var(--ua3-rust-bright, #d4512e);
    opacity: 1;
}

/* ---------- story strip: moment → payoff ---------- */

.uwl-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0 1rem;
    align-items: start;
    margin-bottom: 0.85rem;
}
.uwl-story-cell {
    border-top: 2px solid var(--ua3-rule, rgba(25, 25, 23, 0.18));
    padding-top: 0.45rem;
    /* the un-lit cell is a PERSISTENT state (one of the two always is),
       so it is dimmed by ink weight + rule colour, not by an opacity
       wash that would push 13-15px copy under 4.5:1 */
    opacity: 0.9;
    transition: opacity 0.35s ease, border-color 0.35s ease;
}
.uwl-story-cell.uwl-on {
    opacity: 1;
    border-color: var(--ua3-rust-bright, #d4512e);
}
.uwl-story-cell small {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.09em;
}
.uwl-story-cell span {
    display: block;
    /* two-line floor: the vignette below must not hop when a persona's
       moment line wraps (13 of 15 fit one line, two need two) */
    min-height: 2.84em;
    color: var(--ua3-muted, #57534b);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.95rem;
    line-height: 1.42;
    transition: color 0.35s ease, opacity 0.24s ease;
}
.uwl-story-cell.uwl-on span { color: var(--ua3-ink, #191917); }
.uwl-story-arrow {
    padding-top: 0.5rem;
    color: var(--ua3-muted, #57534b);
    font-size: 0.9375rem;
}

/* ---------- browser frame ---------- */

.uwl-frame {
    border: 1px solid var(--ua3-ink, #191917);
    background: var(--ua3-white, #fffdf8);
}

.uwl-chrome {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    background: var(--ua3-paper-2, #ebe7dd);
}
.uwl-dots { display: flex; gap: 4px; flex: 0 0 auto; }
.uwl-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--ua3-muted, #57534b);
}
.uwl-url {
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
    transition: opacity 0.24s ease;
}
.uwl-req {
    margin-left: auto;
    max-width: 46%;
    min-width: 0;
    padding: 0.08rem 0.45rem;
    border: 1px solid var(--ua3-rust, #a73a1e);
    color: var(--ua3-rust, #a73a1e);
    background: var(--ua3-white, #fffdf8);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.uwl-main.uwl-req-on .uwl-req { opacity: 1; transform: translateY(0); }

/* Reduced motion never plays the request bar, so the chrome chip is the
   ONLY surface the typed sentence has — drop it onto its own full-width
   wrapping row so it is never ellipsised. */
.uwl-main.uwl-static .uwl-chrome { flex-wrap: wrap; }
.uwl-main.uwl-static .uwl-app { margin-left: auto; }
.uwl-main.uwl-static .uwl-req {
    order: 9;
    flex: 1 0 100%;
    margin-left: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.uwl-app {
    flex: 0 0 auto;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.uwl-main.uwl-hot .uwl-app {
    background: var(--ua3-rust, #a73a1e);
    border-color: var(--ua3-rust, #a73a1e);
    color: var(--ua3-white, #fffdf8);
}
.uwl-main.uwl-ok .uwl-app {
    background: var(--ua3-jade, #28543f);
    border-color: var(--ua3-jade, #28543f);
    color: var(--ua3-white, #fffdf8);
}

/* ---------- viewport ---------- */

.uwl-view {
    position: relative;
    height: 17.25rem;
    overflow: hidden;
    background: var(--ua3-white, #fffdf8);
    pointer-events: none;
    transition: opacity 0.24s ease;
}
.uwl-main[data-uwl-kind="reflow"] .uwl-view { height: 21.5rem; }
.uwl-scene { position: absolute; inset: 0; }

/* verified dot — jade, kept links only */
.uwl-vdot {
    flex: 0 0 auto;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ua3-jade, #28543f);
}

/* ---------- request bar ---------- */

.uwl-bar {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 46%;
    max-width: 92%;
    padding: 0.45rem 0.75rem;
    background: var(--ua3-ink, #191917);
    color: var(--ua3-paper, #f4f1e9);
    box-shadow: 0 6px 18px rgba(25, 25, 23, 0.28);
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.2s ease;
}
.uwl-main.uwl-bar-on .uwl-bar { opacity: 1; transform: translate(-50%, 0); }
.uwl-main.uwl-send .uwl-bar {
    box-shadow: 0 0 0 2px var(--ua3-rust-bright, #d4512e), 0 6px 18px rgba(25, 25, 23, 0.28);
}
.uwl-bar-ic {
    color: var(--ua3-rust-bright, #d4512e);
    font-size: 0.9375rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.uwl-bar-tx {
    font-size: 0.8125rem;
    line-height: 1.3;
    min-height: 1.05rem;
    letter-spacing: 0.01em;
}
.uwl-caret {
    flex: 0 0 auto;
    width: 7px;
    height: 14px;
    background: var(--ua3-rust-bright, #d4512e);
}

/* ---------- trust seal ---------- */

.uwl-seal {
    position: absolute;
    z-index: 5;
    right: 0.6rem;
    bottom: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.14rem 0.5rem;
    border: 1px solid var(--ua3-jade, #28543f);
    background: var(--ua3-jade-pale, #cfe0d6);
    color: var(--ua3-jade, #28543f);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.uwl-main.uwl-seal-on .uwl-seal { opacity: 1; transform: translateY(0); }
.uwl-seal i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ua3-jade, #28543f);
}

/* ---------- register note + live region ---------- */

.uwl-note {
    margin: 0.7rem 0 0;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.uwl-vh {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================
   ARCHETYPE 01 · REFLOW — swimming justified text holds still
   ========================================================== */

.uwl-rf {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 28px 4rem;
    background: var(--ua3-white, #fffdf8);
}
.uwl-rf-t {
    flex: 0 0 auto;
    margin-bottom: 12px;
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}
.uwl-rf-p {
    flex: 0 0 auto;
    margin: 0 0 10px;
    max-width: 56ch;
    color: var(--ua3-ink-2, #2b2a26);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.875rem;
    line-height: 1.24;
    letter-spacing: 0;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: 0.32em;
    transition: line-height 0.85s cubic-bezier(0.2, 0.75, 0.2, 1),
        word-spacing 0.85s cubic-bezier(0.2, 0.75, 0.2, 1),
        letter-spacing 0.85s cubic-bezier(0.2, 0.75, 0.2, 1),
        max-width 0.85s cubic-bezier(0.2, 0.75, 0.2, 1),
        font-size 0.85s ease;
}
.uwl-rf-p2 { transition-delay: 0.08s; }
.uwl-after .uwl-rf-p {
    max-width: 38ch;
    font-size: 0.9375rem;
    line-height: 1.8;
    letter-spacing: 0.055em;
    word-spacing: 0.02em;
    text-align: left;
}
.uwl-rf-meta {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: 0.08em;
    color: var(--ua3-muted, #57534b);
    transition: opacity 0.18s ease 0.36s;
}
.uwl-main.uwl-bar-on .uwl-rf-meta {
    opacity: 0;
    transition-delay: 0s;
    transition-duration: 0s;
}
.uwl-rf-ma { display: none; color: var(--ua3-rust, #a73a1e); }
.uwl-after .uwl-rf-mb { display: none; }
.uwl-after .uwl-rf-ma { display: inline; }

/* ==========================================================
   ARCHETYPE 02 · CALM — a twitching bright page goes dark and still
   ========================================================== */

.uwl-cm {
    position: absolute;
    inset: 0;
    padding: 14px 18px;
    background: #ffffff;
    transition: background 0.7s ease;
}
.uwl-after .uwl-cm { background: var(--ua3-dark, #171714); }

.uwl-cm-h {
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 1.1rem;
    font-weight: 750;
    transition: opacity 0.4s ease;
}
.uwl-after .uwl-cm-h { opacity: 0; }

.uwl-cm-vid {
    position: absolute;
    left: 18px;
    top: 50px;
    width: 36%;
    height: 44%;
    display: grid;
    place-items: center;
    background: var(--ua3-dark, #171714);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.uwl-cm-vid span {
    position: absolute;
    left: 8px;
    bottom: 6px;
    color: #cfcabe;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
}
.uwl-cm-play {
    width: 0;
    height: 0;
    border-left: 16px solid #fffdf8;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.uwl-after .uwl-cm-vid { opacity: 0; transform: scale(0.96); }

.uwl-cm-flash {
    position: absolute;
    right: 18px;
    top: 50px;
    width: 30%;
    height: 27%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--ua3-rust, #a73a1e);
    background: var(--ua3-rust-pale, #f0c3b3);
    color: var(--ua3-rust, #a73a1e);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    transition: opacity 0.45s ease 0.06s, transform 0.45s ease 0.06s;
}
.uwl-cm-fx { position: absolute; inset: 0; background: var(--ua3-rust-bright, #d4512e); opacity: 0; }
.uwl-cm-flash span { position: relative; z-index: 1; }
.uwl-after .uwl-cm-flash { opacity: 0; transform: scale(0.96); }

.uwl-cm-l {
    position: absolute;
    left: 18px;
    height: 8px;
    background: var(--ua3-paper-3, #ddd7ca);
    transition: opacity 0.4s ease 0.1s;
}
.uwl-cm-l1 { top: 67%; width: 56%; }
.uwl-cm-l2 { top: 73%; width: 50%; }
.uwl-cm-l3 { top: 79%; width: 38%; }
.uwl-after .uwl-cm-l { opacity: 0; }

.uwl-cm-tick {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    overflow: hidden;
    border-top: 1px solid var(--ua3-amber, #6d4a00);
    background: var(--ua3-amber-pale, #ead9a7);
    transition: opacity 0.4s ease 0.12s;
}
.uwl-cm-tin { position: absolute; left: 0; top: 8px; width: 200%; display: flex; gap: 18px; }
.uwl-cm-tin i { flex: 0 0 auto; width: 90px; height: 8px; background: var(--ua3-amber, #6d4a00); opacity: 0.5; }
.uwl-after .uwl-cm-tick { opacity: 0; }

.uwl-cm-af {
    position: absolute;
    inset: 0;
    padding: 30px 34px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease 0.25s, transform 0.55s ease 0.25s;
}
.uwl-after .uwl-cm-af { opacity: 1; transform: translateY(0); }
.uwl-cm-ah {
    margin-bottom: 16px;
    color: #e8e4da;
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.uwl-cm-al { display: block; width: 78%; height: 10px; margin-bottom: 13px; background: #3b3a35; }
.uwl-cm-a2 { width: 64%; }
.uwl-cm-a3 { width: 42%; }
.uwl-cm-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 12px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(207, 224, 214, 0.5);
    color: #cfe0d6;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}
.uwl-cm-link .uwl-vdot { background: #7fbfa0; }

/* ==========================================================
   ARCHETYPE 03 · TARGETS — a cramped bar becomes one forgiving column
   ========================================================== */

.uwl-tg { position: absolute; inset: 0; background: var(--ua3-white, #fffdf8); }

.uwl-tg-bf {
    position: absolute;
    inset: 0;
    padding: 12px 16px;
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.uwl-after .uwl-tg-bf { opacity: 0; transform: scale(0.98); }

.uwl-tg-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding: 4px 7px;
    border: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    background: var(--ua3-paper-2, #ebe7dd);
}
.uwl-tg-bar span {
    color: var(--ua3-ink-2, #2b2a26);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.uwl-tg-body i {
    display: block;
    height: 9px;
    margin-top: 12px;
    background: var(--ua3-paper-3, #ddd7ca);
}
.uwl-tg-body i:nth-of-type(1) { width: 92%; }
.uwl-tg-body i:nth-of-type(2) { width: 100%; }
.uwl-tg-body i:nth-of-type(3) { width: 84%; }
.uwl-tg-body i:nth-of-type(4) { width: 56%; margin-bottom: 22px; }
.uwl-tg-body i:nth-of-type(5) { width: 96%; }
.uwl-tg-body i:nth-of-type(6) { width: 88%; }
.uwl-tg-body i:nth-of-type(7) { width: 64%; }
.uwl-tg-ring {
    position: absolute;
    left: 30%;
    top: 8%;
    width: 26px;
    height: 26px;
    border: 2px solid var(--ua3-rust-bright, #d4512e);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.uwl-tg-col {
    position: absolute;
    inset: 16px 16px 12px;
    /* keep the last row — including its UNAVAILABLE pill — clear of the seal */
    padding-bottom: 26px;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.uwl-tg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--ua3-ink, #191917);
    background: var(--ua3-white, #fffdf8);
    box-shadow: 3px 3px 0 rgba(25, 25, 23, 0.1);
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 1rem;
    font-weight: 650;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.uwl-after .uwl-tg-row { opacity: 1; transform: translateY(0); }
.uwl-after .uwl-tg-row:nth-of-type(1) { transition-delay: 0.1s; }
.uwl-after .uwl-tg-row:nth-of-type(2) { transition-delay: 0.18s; }
.uwl-after .uwl-tg-row:nth-of-type(3) { transition-delay: 0.26s; }
.uwl-after .uwl-tg-row:nth-of-type(4) { transition-delay: 0.34s; }
.uwl-after .uwl-tg-row:nth-of-type(5) { transition-delay: 0.42s; }

/* unmatched control: dashed, muted, never active */
.uwl-tg-un {
    border-style: dashed;
    border-color: var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    box-shadow: none;
    color: var(--ua3-muted, #57534b);
    font-weight: 500;
}
.uwl-tg-un em {
    font-style: normal;
    padding: 1px 6px;
    border: 1px dashed var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    font-family: var(--ua3-mono, "Geist Mono", Consolas, monospace);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

/* ==========================================================
   ARCHETYPE 04 · TABLE — mixed cards collapse into aligned data
   ========================================================== */

.uwl-tb { position: absolute; inset: 0; background: var(--ua3-white, #fffdf8); }

.uwl-tb-cards {
    position: absolute;
    inset: 14px 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.uwl-after .uwl-tb-cards { opacity: 0.07; transform: scale(0.985); }
.uwl-tb-card { border: 1px solid var(--ua3-rule, rgba(25, 25, 23, 0.18)); background: var(--ua3-white, #fffdf8); padding: 8px; }
.uwl-tb-ph {
    display: block;
    height: 54px;
    margin-bottom: 3px;
    background: linear-gradient(120deg, var(--ua3-paper-2, #ebe7dd) 55%, var(--ua3-paper-3, #ddd7ca) 55%);
}
.uwl-tb-k1 .uwl-tb-ph { height: 34px; }
.uwl-tb-k4 .uwl-tb-ph { height: 44px; }
.uwl-tb-k5 .uwl-tb-ph { height: 28px; }
.uwl-tb-x1, .uwl-tb-x2 { display: block; height: 7px; margin-top: 6px; background: var(--ua3-paper-3, #ddd7ca); }
.uwl-tb-x2 { width: 62%; }

.uwl-tb-tab {
    position: absolute;
    inset: 30px 16px 14px;
    max-width: 44rem;
    margin: 0 auto;
    background: var(--ua3-white, #fffdf8);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}
.uwl-after .uwl-tb-tab { opacity: 1; transform: translateY(0); }

.uwl-tb-hd {
    display: grid;
    grid-template-columns: var(--uwl-tc);
    gap: 0 1rem;
    padding: 0 6px 6px;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.uwl-tb-hd span {
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.uwl-after .uwl-tb-hd span { opacity: 1; transform: translateX(0); }
.uwl-after .uwl-tb-hd span:nth-of-type(1) { transition-delay: 0.16s; }
.uwl-after .uwl-tb-hd span:nth-of-type(2) { transition-delay: 0.23s; }
.uwl-after .uwl-tb-hd span:nth-of-type(3) { transition-delay: 0.3s; }
.uwl-after .uwl-tb-hd span:nth-of-type(4) { transition-delay: 0.37s; }

.uwl-tb-rule {
    display: block;
    height: 2px;
    background: var(--ua3-ink, #191917);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1) 0.12s;
}
.uwl-after .uwl-tb-rule { transform: scaleX(1); }

.uwl-tb-row {
    display: grid;
    grid-template-columns: var(--uwl-tc);
    gap: 0 1rem;
    align-items: center;
    min-height: 32px;
    padding: 0 6px;
    border-bottom: 1px dotted var(--ua3-rule, rgba(25, 25, 23, 0.18));
    color: var(--ua3-ink-2, #2b2a26);
    font-size: 0.8125rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.uwl-after .uwl-tb-row { opacity: 1; transform: translateY(0); }
.uwl-after .uwl-tb-row:nth-of-type(1) { transition-delay: 0.26s; }
.uwl-after .uwl-tb-row:nth-of-type(2) { transition-delay: 0.33s; }
.uwl-after .uwl-tb-row:nth-of-type(3) { transition-delay: 0.4s; }
.uwl-after .uwl-tb-row:nth-of-type(4) { transition-delay: 0.47s; }
.uwl-after .uwl-tb-row:nth-of-type(5) { transition-delay: 0.54s; }
.uwl-tb-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.uwl-tb-c0 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ua3-ink, #191917);
    font-weight: 650;
}

/* ==========================================================
   ARCHETYPE 05 · SHORTLIST — a huge list thins to survivors
   ========================================================== */

.uwl-sl { position: absolute; inset: 0; background: var(--ua3-white, #fffdf8); }

.uwl-sl-count {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 16px;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    transition: color 0.4s ease;
}
.uwl-after .uwl-sl-count { color: var(--ua3-rust, #a73a1e); }

.uwl-sl-wall {
    position: absolute;
    inset: 34px 16px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 16px;
    align-content: start;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.uwl-sl-wall i { display: block; height: 7px; background: var(--ua3-paper-3, #ddd7ca); }
.uwl-sl-wall i:nth-of-type(3n) { width: 88%; }
.uwl-sl-wall i:nth-of-type(4n) { width: 96%; }
.uwl-sl-wall i:nth-of-type(7n) { width: 74%; }
.uwl-after .uwl-sl-wall { opacity: 0.07; transform: scale(0.99); }

.uwl-sl-glint {
    position: absolute;
    z-index: 2;
    top: 34px;
    bottom: 12px;
    left: -10%;
    width: 38px;
    background: linear-gradient(100deg, rgba(255, 253, 248, 0) 0%, rgba(255, 253, 248, 0.8) 50%, rgba(255, 253, 248, 0) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.uwl-after .uwl-sl-glint { opacity: 0; }

.uwl-sl-list {
    position: absolute;
    inset: 34px 16px 12px;
    /* keep the last row clear of the trust seal (bottom-right, z 5) */
    padding-bottom: 26px;
    max-width: 42rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.uwl-sl-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 29px;
    border-bottom: 1px dotted var(--ua3-rule, rgba(25, 25, 23, 0.18));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.uwl-after .uwl-sl-row { opacity: 1; transform: translateY(0); }
.uwl-after .uwl-sl-row:nth-of-type(1) { transition-delay: 0.18s; }
.uwl-after .uwl-sl-row:nth-of-type(2) { transition-delay: 0.24s; }
.uwl-after .uwl-sl-row:nth-of-type(3) { transition-delay: 0.3s; }
.uwl-after .uwl-sl-row:nth-of-type(4) { transition-delay: 0.36s; }
.uwl-after .uwl-sl-row:nth-of-type(5) { transition-delay: 0.42s; }
.uwl-after .uwl-sl-row:nth-of-type(6) { transition-delay: 0.48s; }
.uwl-after .uwl-sl-row:nth-of-type(7) { transition-delay: 0.54s; }
.uwl-sl-ti {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.9375rem;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(167, 58, 30, 0.45);
}
.uwl-sl-me {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ==========================================================
   ARCHETYPE 06 · GROUPED — a flat list re-sorts into clusters
   ========================================================== */

.uwl-gp { position: absolute; inset: 0; background: var(--ua3-white, #fffdf8); }

.uwl-gp-flat {
    position: absolute;
    inset: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.uwl-after .uwl-gp-flat { opacity: 0; transform: scale(0.985); }
.uwl-gp-fr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 16px;
    color: var(--ua3-ink-2, #2b2a26);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.uwl-gp-fr > span { overflow: hidden; text-overflow: ellipsis; }
.uwl-gp-fr i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ua3-paper-3, #ddd7ca);
}
.uwl-gp-fr.uwl-gp-x i { background: var(--ua3-rust, #a73a1e); }
.uwl-gp-fr em {
    margin-left: auto;
    font-style: normal;
    color: var(--ua3-muted, #57534b);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}

.uwl-gp-cl {
    position: absolute;
    inset: 22px 16px 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}
.uwl-after .uwl-gp-cl { opacity: 1; transform: translateY(0); }
.uwl-gp-c { min-width: 0; border-top: 2px solid var(--ua3-ink, #191917); padding-top: 8px; }
.uwl-gp-ch {
    display: block;
    margin-bottom: 8px;
    color: var(--ua3-rust, #a73a1e);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.uwl-gp-r {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 30px;
    border-bottom: 1px dotted var(--ua3-rule, rgba(25, 25, 23, 0.18));
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.uwl-after .uwl-gp-r { opacity: 1; }
.uwl-after .uwl-gp-c:nth-of-type(1) .uwl-gp-r { transition-delay: 0.22s; }
.uwl-after .uwl-gp-c:nth-of-type(2) .uwl-gp-r { transition-delay: 0.32s; }
.uwl-after .uwl-gp-c:nth-of-type(3) .uwl-gp-r { transition-delay: 0.42s; }
.uwl-gp-r i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ua3-rust, #a73a1e);
}

/* ==========================================================
   ARCHETYPE 07 · MENU — a long menu distills to safe dishes
   ========================================================== */

.uwl-mn { position: absolute; inset: 0; overflow: hidden; background: var(--ua3-white, #fffdf8); }

.uwl-mn-long {
    position: absolute;
    inset: 16px 22px;
    columns: 2;
    column-gap: 30px;
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.uwl-after .uwl-mn-long { opacity: 0; transform: scale(0.985); }
.uwl-mn-s {
    display: block;
    margin: 7px 0 4px;
    color: var(--ua3-rust, #a73a1e);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    break-inside: avoid;
}
.uwl-mn-r {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 2px 0;
    color: var(--ua3-ink-2, #2b2a26);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.8125rem;
    break-inside: avoid;
}
.uwl-mn-r > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uwl-mn-r b { margin-left: auto; color: var(--ua3-muted, #57534b); font-weight: 500; }
.uwl-mn-r em, .uwl-mn-b em {
    flex: 0 0 auto;
    font-style: normal;
    padding: 0 4px;
    border: 1px solid var(--ua3-ink, #191917);
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-mono, "Geist Mono", Consolas, monospace);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}

.uwl-mn-big {
    position: absolute;
    inset: 20px 24px 14px;
    max-width: 34rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}
.uwl-after .uwl-mn-big { opacity: 1; transform: translateY(0); }
.uwl-mn-b {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 50px;
    border-bottom: 1px solid var(--ua3-rule-strong, rgba(25, 25, 23, 0.35));
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 1.15rem;
    font-weight: 650;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.uwl-mn-b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uwl-mn-b b { margin-left: auto; flex: 0 0 auto; font-size: 1.05rem; font-weight: 650; }
.uwl-after .uwl-mn-b { opacity: 1; transform: translateY(0); }
.uwl-after .uwl-mn-b:nth-of-type(1) { transition-delay: 0.16s; }
.uwl-after .uwl-mn-b:nth-of-type(2) { transition-delay: 0.26s; }
.uwl-after .uwl-mn-b:nth-of-type(3) { transition-delay: 0.36s; }
.uwl-after .uwl-mn-b:nth-of-type(4) { transition-delay: 0.46s; }

/* ==========================================================
   ARCHETYPE 08 · GRID — an endless wall thins to a decisive set
   ========================================================== */

.uwl-gd { position: absolute; inset: 0; background: var(--ua3-dark, #171714); }

.uwl-gd-wall { position: absolute; inset: 0; overflow: hidden; transition: opacity 0.5s ease; }
.uwl-after .uwl-gd-wall { opacity: 0.12; }
.uwl-gd-in {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 52px;
    gap: 6px;
}
.uwl-gd-in i { display: block; background: #2e2d29; border: 1px solid #3a3934; }
.uwl-gd-in i:nth-of-type(2n) { background: #34332e; }

.uwl-gd-pick {
    position: absolute;
    inset: 24px 18px 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease 0.12s, transform 0.5s ease 0.12s;
}
.uwl-after .uwl-gd-pick { opacity: 1; transform: translateY(0); }
.uwl-gd-p {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.uwl-after .uwl-gd-p { opacity: 1; transform: translateY(0); }
.uwl-after .uwl-gd-p:nth-of-type(1) { transition-delay: 0.18s; }
.uwl-after .uwl-gd-p:nth-of-type(2) { transition-delay: 0.28s; }
.uwl-after .uwl-gd-p:nth-of-type(3) { transition-delay: 0.38s; }
.uwl-after .uwl-gd-p:nth-of-type(4) { transition-delay: 0.48s; }
.uwl-gd-pi { display: block; height: 108px; border: 1px solid #4a4841; }
.uwl-gd-g0 { background: linear-gradient(140deg, #3d4a44, #23231f); }
.uwl-gd-g1 { background: linear-gradient(140deg, #4a3d3a, #23231f); }
.uwl-gd-g2 { background: linear-gradient(140deg, #3d434a, #23231f); }
.uwl-gd-g3 { background: linear-gradient(140deg, #46453a, #23231f); }
.uwl-gd-n {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    color: #ece8de;
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 0.9375rem;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.uwl-gd-n .uwl-vdot { background: #7fbfa0; }
.uwl-gd-p em {
    font-style: normal;
    color: #b8b3a6;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

/* ==========================================================
   ARCHETYPE 09 · CODE — prose gives way to signatures, code first
   ========================================================== */

.uwl-cd { position: absolute; inset: 0; background: var(--ua3-white, #fffdf8); }

.uwl-cd-bf {
    position: absolute;
    inset: 0;
    padding: 22px 28px;
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.uwl-after .uwl-cd-bf { opacity: 0; transform: translateY(-8px); }
.uwl-cd-hero {
    margin-bottom: 12px;
    color: var(--ua3-ink, #191917);
    font-family: var(--ua3-font, "Geist", Arial, sans-serif);
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}
.uwl-cd-pill {
    display: inline-block;
    padding: 6px 14px;
    background: var(--ua3-rust, #a73a1e);
    color: var(--ua3-white, #fffdf8);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.uwl-cd-pr i { display: block; height: 8px; margin-top: 11px; background: var(--ua3-paper-3, #ddd7ca); }
.uwl-cd-pr i:nth-of-type(1) { width: 94%; }
.uwl-cd-pr i:nth-of-type(2) { width: 100%; }
.uwl-cd-pr i:nth-of-type(3) { width: 88%; }
.uwl-cd-pr i:nth-of-type(4) { width: 96%; }
.uwl-cd-pr i:nth-of-type(5) { width: 52%; }

.uwl-cd-af {
    position: absolute;
    inset: 12px 20px 10px;
    max-width: 44rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s;
}
.uwl-after .uwl-cd-af { opacity: 1; transform: translateY(0); }
.uwl-cd-lab {
    display: block;
    color: var(--ua3-rust, #a73a1e);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.uwl-cd-va .uwl-cd-lab { color: var(--ua3-jade, #28543f); }
.uwl-cd-b {
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid #3a3934;
    background: var(--ua3-dark, #171714);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.uwl-after .uwl-cd-b { opacity: 1; transform: translateY(0); }
.uwl-after .uwl-cd-b:nth-of-type(1) { transition-delay: 0.16s; }
.uwl-after .uwl-cd-b:nth-of-type(2) { transition-delay: 0.28s; }
.uwl-after .uwl-cd-b:nth-of-type(3) { transition-delay: 0.4s; }
.uwl-cd-sig { display: block; color: #ece8de; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.01em; }
.uwl-cd-pa { display: block; margin-top: 4px; color: #a09a8c; font-size: 0.8125rem; }
.uwl-cd-ln { display: block; color: #dcd7cb; font-size: 0.8125rem; line-height: 1.55; white-space: pre; }
.uwl-cd-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 12px;
    color: var(--ua3-jade, #28543f);
    font-size: 0.8125rem;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.uwl-cd-caret {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 14px;
    background: var(--ua3-rust-bright, #d4512e);
    opacity: 0;
}

/* ==========================================================
   SOFT SCENE MORPH (persona switch — never a hard cut)
   ========================================================== */

.uwl-main.uwl-swap .uwl-view,
.uwl-main.uwl-swap .uwl-title,
.uwl-main.uwl-swap .uwl-url,
.uwl-main.uwl-swap .uwl-req,
.uwl-main.uwl-swap .uwl-story-cell span { opacity: 0; }
.uwl-main.uwl-swap .uwl-view * { transition: none !important; }

/* ==========================================================
   COMPACT (host < 42.5 root ems)
   ========================================================== */

.uwl-stage.uwl-compact { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }

.uwl-stage.uwl-compact .uwl-nav {
    flex-direction: row;
    gap: 1.2rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    /* the rail is 2-3x wider than the viewport here and overlay scrollbars
       stay hidden until you scroll — fade the edges so it reads as a strip
       that continues, not as a hard cut */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
}
.uwl-stage.uwl-compact .uwl-nav-g { flex: 0 0 auto; width: 13rem; }
/* two-line floor so the group rules line up across the scrolling row */
.uwl-stage.uwl-compact .uwl-nav-l { min-height: 2.2em; }
.uwl-stage.uwl-compact .uwl-steps { margin-left: 0; width: 100%; }
/* never display:none — the sentence is the premise of the section and must
   stay in the accessibility tree (and visible) at every width */
.uwl-stage.uwl-compact .uwl-chrome { flex-wrap: wrap; }
.uwl-stage.uwl-compact .uwl-app { margin-left: auto; }
.uwl-stage.uwl-compact .uwl-req {
    order: 9;
    flex: 1 0 100%;
    margin-left: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.uwl-stage.uwl-compact .uwl-bar { min-width: 74%; }
/* taller than the old 16.25rem: every scene has to fit its rows AND leave
   the trust seal its own space at the bottom-right */
.uwl-stage.uwl-compact .uwl-view { height: 19rem; }

.uwl-stage.uwl-compact .uwl-story { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.uwl-stage.uwl-compact .uwl-story-arrow { display: none; }

.uwl-stage.uwl-compact .uwl-rf { padding: 14px 16px 38px; }
.uwl-stage.uwl-compact .uwl-rf-t { font-size: 1.05rem; margin-bottom: 8px; }
.uwl-stage.uwl-compact .uwl-rf-p { max-width: 100%; font-size: 0.8125rem; }
.uwl-stage.uwl-compact .uwl-after .uwl-rf-p {
    max-width: 100%;
    font-size: 0.875rem;
    line-height: 1.62;
}
.uwl-stage.uwl-compact .uwl-rf-meta { display: none; }

.uwl-stage.uwl-compact .uwl-cm-af { padding: 22px 20px; }
.uwl-stage.uwl-compact .uwl-cm-flash { display: none; }
.uwl-stage.uwl-compact .uwl-cm-vid { width: 46%; }

.uwl-stage.uwl-compact .uwl-tg-col { inset: 12px 12px 10px; }
.uwl-stage.uwl-compact .uwl-tg-row { min-height: 38px; font-size: 0.9375rem; }

.uwl-stage.uwl-compact .uwl-tb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uwl-stage.uwl-compact .uwl-tb-card:nth-of-type(n+5) { display: none; }
.uwl-stage.uwl-compact .uwl-tb-hd,
.uwl-stage.uwl-compact .uwl-tb-row { grid-template-columns: var(--uwl-tcs); gap: 0 0.6rem; }
.uwl-stage.uwl-compact .uwl-tb-last { display: none; }

.uwl-stage.uwl-compact .uwl-sl-wall { grid-template-columns: minmax(0, 1fr); }
.uwl-stage.uwl-compact .uwl-sl-wall i:nth-of-type(n+23) { display: none; }
.uwl-stage.uwl-compact .uwl-sl-me { font-size: 0.8125rem; }

.uwl-stage.uwl-compact .uwl-gp-fr em { display: none; }
.uwl-stage.uwl-compact .uwl-gp-cl { grid-template-columns: minmax(0, 1fr); gap: 8px; inset: 14px 16px 10px; }
.uwl-stage.uwl-compact .uwl-gp-c { padding-top: 5px; }
.uwl-stage.uwl-compact .uwl-gp-ch { margin-bottom: 3px; }
.uwl-stage.uwl-compact .uwl-gp-r { min-height: 24px; }

.uwl-stage.uwl-compact .uwl-mn-long { columns: 1; }
.uwl-stage.uwl-compact .uwl-mn-r:nth-of-type(n+10) { display: none; }
.uwl-stage.uwl-compact .uwl-mn-b { min-height: 46px; font-size: 1.02rem; }

.uwl-stage.uwl-compact .uwl-gd-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uwl-stage.uwl-compact .uwl-gd-in i:nth-of-type(n+37) { display: none; }
.uwl-stage.uwl-compact .uwl-gd-pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    /* keep the second row of picks clear of the seal */
    padding-bottom: 26px;
}
.uwl-stage.uwl-compact .uwl-gd-pi { height: 50px; }

.uwl-stage.uwl-compact .uwl-cd-bf { padding: 16px 18px; }
.uwl-stage.uwl-compact .uwl-cd-hero { font-size: 1.2rem; }
.uwl-stage.uwl-compact .uwl-cd-pa { display: none; }

/* ==========================================================
   WIDE (>= 78rem) — the rail folds into two columns

   At one column the 15-chip rail is ~780px tall against a ~450px
   vignette, leaving a third of the stage empty under the browser frame.
   Two columns bring the rail down to roughly the height of the frame and
   hand the reclaimed width back to the vignette.
   ========================================================== */

/* single-column rail band: give the vignette more of the height instead */
@media (min-width: 45rem) and (max-width: 63.99rem) {
    .uwl-stage:not(.uwl-compact) .uwl-view { height: 22rem; }
}

@media (min-width: 64rem) {
    .uwl-stage:not(.uwl-compact) {
        grid-template-columns: minmax(21rem, 25rem) minmax(0, 1fr);
        column-gap: 2rem;
    }
    .uwl-stage:not(.uwl-compact) .uwl-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem 1.4rem;
        align-content: start;
    }
    /* two-line floor so both columns' group rules line up */
    .uwl-stage:not(.uwl-compact) .uwl-nav-l { min-height: 2.2em; }
}

@media (min-width: 78rem) {
    .uwl-stage:not(.uwl-compact) {
        grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
        column-gap: 2.6rem;
    }
    .uwl-stage:not(.uwl-compact) .uwl-nav { gap: 1.15rem 1.6rem; }
}

/* ==========================================================
   ACCESSIBILITY / FALLBACK MODES
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .uwl-stage *,
    .uwl-stage *::before,
    .uwl-stage *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    /* drop the decorative stage; the editorial catalog returns with
       explicit display values */
    .uwl-host.uwl-live > .uwl-stage { display: none; }
    .uwl-host.uwl-live > .uwl-group { display: grid; }
}