/* =============================================================================
   assistant.css — Lab Assistant, the floating agent (labs527)
   =============================================================================
   The launcher pill (bottom right, every page), the desktop hover card that
   grows out of it, the panel it opens — a tall card down the right on a
   desktop, a sheet from the bottom on a phone — and the small guide that
   walks a page. The navbar robot and its ⌘J key are gone (labs527); nothing
   here styles .nav__bot any more.

   ITS OWN TOKENS, --la-*, WITH BOTH SKINS WRITTEN OUT. This sheet ships to
   every page in the building (the root copy, and one per room) and most of
   those define no tokens this panel can lean on — and the ones that do are
   not reliable: the 526 panel took its surfaces from --tint, which the
   homepage's dark edition never sets, so its dark panel was #FAFAFA under
   white ink and unreadable. So paper is the default here and dark is keyed
   on the two attributes the estate sets for it, never on
   prefers-color-scheme: paper and dark are two skins of ONE document.

   SCOPED RESETS. Pages carry bare `button {}` and `p {}` rules (see the 506
   pill-button incident), so every control is reset under its own root
   (.la / .la-dock / .la-guide, one class and a tag) and every component rule
   is two classes deep — it outranks the reset, and a page's bare rule
   outranks neither.

   A 4/8px rhythm; DM Sans (the estate's self-hosted face) through the stack;
   600 for titles, muted for what is secondary; 1px lines; layered shadows;
   motion short and switched off under reduced motion. No :has().
   ========================================================================== */

:root {
    --la-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --la-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --la-ease: cubic-bezier(.22, .61, .36, 1);

    --la-surface: #ffffff;
    --la-raised: #F6F6F4;
    --la-ink: #1E262B;
    --la-ink-2: rgba(30, 38, 43, .80);
    --la-muted: rgba(30, 38, 43, .64);          /* 4.7:1 on white */
    --la-line: rgba(30, 38, 43, .10);
    --la-line-2: rgba(30, 38, 43, .18);
    --la-accent: #C2410C;                        /* 5.2:1 on white */
    --la-accent-ink: #ffffff;
    --la-accent-soft: rgba(194, 65, 12, .08);
    --la-you-bg: #1E262B;
    --la-you-ink: #ffffff;
    --la-danger: #B42318;
    --la-ok-soft: rgba(31, 122, 58, .07);
    --la-ok-line: rgba(31, 122, 58, .30);
    --la-scrim: rgba(17, 22, 28, .36);
    --la-mk-ring: transparent;

    --la-sh-sm: 0 1px 2px rgba(17, 22, 28, .05), 0 2px 8px rgba(17, 22, 28, .05);
    --la-sh-md: 0 1px 2px rgba(17, 22, 28, .06), 0 6px 16px rgba(17, 22, 28, .08), 0 16px 40px rgba(17, 22, 28, .06);
    --la-sh-lg: 0 2px 4px rgba(17, 22, 28, .05), 0 12px 28px rgba(17, 22, 28, .10), 0 28px 64px rgba(17, 22, 28, .10);
    --la-sh-xl: 0 2px 6px rgba(17, 22, 28, .06), 0 20px 48px rgba(17, 22, 28, .14), 0 48px 96px rgba(17, 22, 28, .12);

    --la-edge: max(16px, calc(env(safe-area-inset-right, 0px) + 12px));
    --la-foot: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}
html[data-dark],
html[data-edition="dark"] {
    --la-surface: #121920;
    --la-raised: #1A232C;
    --la-ink: #F2F4F6;
    --la-ink-2: rgba(242, 244, 246, .80);
    --la-muted: rgba(242, 244, 246, .60);
    --la-line: rgba(255, 255, 255, .09);
    --la-line-2: rgba(255, 255, 255, .17);
    --la-accent: #F97316;
    --la-accent-ink: #11161C;
    --la-accent-soft: rgba(249, 115, 22, .14);
    --la-you-bg: #F2F4F6;
    --la-you-ink: #11161C;
    --la-danger: #FF8A7A;
    --la-ok-soft: rgba(74, 222, 128, .07);
    --la-ok-line: rgba(74, 222, 128, .30);
    --la-scrim: rgba(0, 0, 0, .55);
    /* the mark's dark square sits on a dark surface: a hairline keeps its edge */
    --la-mk-ring: rgba(255, 255, 255, .20);

    --la-sh-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .20);
    --la-sh-md: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .25);
    --la-sh-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .45), 0 32px 72px rgba(0, 0, 0, .35);
    --la-sh-xl: 0 2px 6px rgba(0, 0, 0, .40), 0 24px 56px rgba(0, 0, 0, .55), 0 56px 110px rgba(0, 0, 0, .40);
}

/* ------------------------------------------------------------------ resets */
.la, .la-dock, .la-guide {
    font-family: var(--la-font);
    color: var(--la-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    letter-spacing: normal;
    line-height: 1.5;
}
.la *, .la-dock *, .la-guide * { box-sizing: border-box; }
.la button, .la-dock button, .la-guide button {
    margin: 0; min-width: 0; width: auto; height: auto;
    font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none;
    box-shadow: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.la button:disabled, .la-guide button:disabled { cursor: default; }
.la p, .la-dock p, .la-guide p {
    margin: 0; padding: 0; font-size: inherit; line-height: inherit; font-weight: inherit;
    color: inherit; max-width: none; text-transform: none; letter-spacing: inherit;
}
.la a, .la-guide a { color: inherit; }
.la :focus-visible, .la-dock :focus-visible, .la-guide :focus-visible {
    outline: 2px solid var(--la-accent); outline-offset: 2px;
}
/* THE PLATE (labs528) — the tiny LABS plate assistant.js draws on its own
   64 x 22 pixel grid. Always exactly 64 x 22 CSS px: any other size puts its
   edges between pixels again. On a dark surface a 1px ring keeps the dark
   plate's edge (the stroke is centred on the edge, so 2 units = 1px inside). */
.la-logo { display: block; width: 64px; height: 22px; }
.la-logo .la-logo__bg { stroke: var(--la-mk-ring); stroke-width: 2; }
.la-i { display: block; width: 20px; height: 20px; flex: 0 0 auto; }

/* =============================================================================
   THE LAUNCHER
   ========================================================================== */
.la-dock {
    position: fixed; z-index: 940;
    right: 16px; bottom: 16px;
    right: var(--la-edge); bottom: var(--la-foot);
    /* visibility flips at once when the dock comes back (labs528), so the
       launcher can take focus the moment the panel closes; it still fades
       out (html.la-open below delays the flip by the fade) */
    transition: opacity .2s var(--la-ease), visibility 0s;
}
.la-dock .la-pill {
    display: flex; align-items: center; gap: 2px;
    height: 52px; padding: 0 6px 0 0;
    background: var(--la-surface);
    border: 1px solid var(--la-line-2);
    border-radius: 999px;
    box-shadow: var(--la-sh-md);
    transition: transform .18s var(--la-ease), box-shadow .18s var(--la-ease);
}
.la-dock .la-pill:hover,
.la-dock.has-card .la-pill { transform: translateY(-1px); box-shadow: var(--la-sh-lg); }
.la-dock .la-pill__open {
    display: flex; align-items: center; gap: 12px;
    height: 50px; padding: 0 12px 0 14px;
    background: none; border: 0; border-radius: 999px;
    color: var(--la-ink);
    font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1;
    white-space: nowrap;
}
.la-dock .la-pill__open:last-child { padding-right: 18px; }
.la-dock .la-pill__open:focus-visible { outline-offset: -2px; }
.la-dock .la-pill__logo { position: relative; display: block; width: 64px; height: 22px; flex: 0 0 auto; }

/* THE LIVE DOT (labs528). A 9px accent dot on the plate's top-right corner,
   cut out of it by a 2px ring of the pill's own surface. It swells and sends
   one ring out every ten seconds for the first minute on a page — "here, and
   listening" — then stays lit and still: six pulses, never an endless blink,
   and none at all under prefers-reduced-motion. Transform and opacity only,
   so it never repaints the page. */
.la-dock .la-live {
    position: absolute; top: -3px; right: -3px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--la-accent);
    box-shadow: 0 0 0 2px var(--la-surface);
    animation: la-live 10s cubic-bezier(.3, .7, .4, 1) 1.6s 6 both;
}
.la-dock .la-live::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--la-accent); opacity: 0;
    animation: la-live-ring 10s cubic-bezier(.2, .6, .3, 1) 1.6s 6;
}
@keyframes la-live {
    0%, 12%, 100% { transform: none; }
    4% { transform: scale(1.3); }
    8% { transform: scale(.94); }
}
@keyframes la-live-ring {
    0% { opacity: .55; transform: none; }
    16%, 100% { opacity: 0; transform: scale(3.2); }
}
/* A WHOLE-PIXEL WIDTH (labs528). The dock is anchored from the right, so the
   plate's x is the viewport minus everything to its right — and "Ask" set in
   DM Sans is 26.17px, which put the pixel-drawn plate at x.83 and blurred it.
   29px holds "Ask" in DM Sans and in every fallback face with room to spare. */
.la-dock .la-pill__t {
    display: inline-block; overflow: hidden; max-width: 140px; width: 29px;
    transition: max-width .22s var(--la-ease), opacity .18s var(--la-ease), margin .22s var(--la-ease);
}
.la-dock .la-pill__mic {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    background: var(--la-raised); border: 0; border-radius: 999px;
    color: var(--la-ink-2);
    transition: background .15s, color .15s;
}
.la-dock .la-pill__mic:hover { background: var(--la-accent-soft); color: var(--la-accent); }
.la-dock .la-pill__mic.is-live { background: var(--la-accent); color: var(--la-accent-ink); }
.la-dock .la-pill__mic .la-i { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- the card
   Grows up out of the pill, from its corner. The ::after is a bridge over
   the 12px gap so a pointer travelling from pill to card never "leaves". */
.la-dock .la-card {
    position: absolute; right: 0; bottom: calc(100% + 12px);
    width: 336px; padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--la-surface);
    border: 1px solid var(--la-line);
    border-radius: 20px;
    box-shadow: var(--la-sh-lg);
    transform-origin: 100% 100%;
    opacity: 0; transform: translateY(8px) scale(.96);
    transition: opacity .18s var(--la-ease), transform .18s var(--la-ease);
}
.la-dock .la-card.is-in { opacity: 1; transform: none; }
.la-dock .la-card[hidden] { display: none; }
.la-dock .la-card::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.la-dock .la-card__speak {
    display: flex; align-items: center; gap: 10px;
    width: 100%; height: 48px; padding: 0 6px 0 8px;
    background: var(--la-raised); border: 1px solid var(--la-line); border-radius: 999px;
    color: var(--la-ink); font-size: 14.5px; font-weight: 600;
    transition: border-color .15s, background .15s;
}
.la-dock .la-card__speak:hover { border-color: var(--la-line-2); }
.la-dock .la-card__logo { display: block; width: 64px; height: 22px; flex: 0 0 auto; }
.la-dock .la-card__speak-t { flex: 1 1 auto; text-align: left; }
.la-dock .la-card__mic {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
    background: var(--la-accent); color: var(--la-accent-ink);
}
.la-dock .la-card__mic .la-i { width: 18px; height: 18px; }
.la-dock .la-card__hd { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 2px; }
.la-dock .la-card__hdt { display: flex; flex-direction: column; line-height: 1.25; }
.la-dock .la-card__hdt b { font-size: 14.5px; font-weight: 600; }
.la-dock .la-card__hdt span { font-size: 12px; color: var(--la-muted); }
.la-dock .la-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.la-dock .la-card__ask {
    display: flex; align-items: center; gap: 2px;
    height: 48px; padding: 0 4px 0 14px;
    background: var(--la-surface);
    border: 1px solid var(--la-line-2); border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.la-dock .la-card__ask:focus-within { border-color: var(--la-accent); box-shadow: 0 0 0 3px var(--la-accent-soft); }
.la-dock .la-card__q {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0; margin: 0;
    background: transparent; border: 0; outline: 0; box-shadow: none;
    font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.3;
    color: var(--la-ink);
}
.la-dock .la-card__q::placeholder { color: var(--la-muted); opacity: 1; }
.la-dock .la-card__kbd {
    flex: 0 0 auto; margin: 0 6px 0 4px; padding: 0; border: 0; background: none; box-shadow: none;
    font: 600 11px/1 var(--la-font); letter-spacing: .04em; color: var(--la-muted); opacity: .8;
}
.la-dock .la-card__ask:focus-within .la-card__kbd { display: none; }
.la-dock .la-card__mic2,
.la-dock .la-card__go {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 10px; background: none; color: var(--la-muted);
}
.la-dock .la-card__mic2:hover { background: var(--la-raised); color: var(--la-ink); }
.la-dock .la-card__go { background: var(--la-ink); color: var(--la-surface); }
.la-dock .la-card__go:hover { background: var(--la-accent); color: var(--la-accent-ink); }
.la-dock .la-card__mic2 .la-i, .la-dock .la-card__go .la-i { width: 18px; height: 18px; }

/* ------------------------------------------------------------ shared buttons */
.la .la-btn, .la-dock .la-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 14px;
    background: var(--la-surface); color: var(--la-ink);
    border: 1px solid var(--la-line-2); border-radius: 12px;
    font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.la .la-btn:hover, .la-dock .la-btn:hover { background: var(--la-raised); }
.la .la-btn--accent, .la-dock .la-btn--accent { border-color: var(--la-accent); color: var(--la-accent); background: transparent; }
.la .la-btn--accent:hover, .la-dock .la-btn--accent:hover { background: var(--la-accent-soft); }
.la .la-btn--ink { background: var(--la-ink); color: var(--la-surface); border-color: var(--la-ink); }
.la .la-btn--ink:hover { background: var(--la-accent); border-color: var(--la-accent); color: var(--la-accent-ink); }
.la .la-btn--ink:disabled { opacity: .6; }

/* =============================================================================
   THE PANEL
   ========================================================================== */
.la {
    position: fixed; z-index: 950;
    top: 16px; right: 16px; bottom: 16px;
    width: 420px; width: min(420px, calc(100vw - 32px));
    display: flex; flex-direction: column;
    background: var(--la-surface);
    border: 1px solid var(--la-line);
    border-radius: 18px;
    box-shadow: var(--la-sh-xl);
    overflow: hidden;
    opacity: 0; transform: translateX(24px);
    transition: opacity .26s var(--la-ease), transform .26s var(--la-ease);
}
.la.is-in { opacity: 1; transform: none; }
.la[hidden] { display: none; }
.la.is-drag { transition: none; }
.la:focus { outline: 0; }

.la .la__grab { display: none; }

.la .la__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 10px 12px 16px;
    flex: 0 0 auto;
}
.la .la__plate { display: block; flex: 0 0 auto; width: 64px; height: 22px; }
.la .la__t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.la .la__t b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--la-ink); }
.la .la__t span {
    font-size: 12px; color: var(--la-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la .la__icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0;
    background: none; border: 0; border-radius: 10px;
    color: var(--la-muted);
    transition: background .15s, color .15s;
}
.la .la__icon:hover { background: var(--la-raised); color: var(--la-ink); }
.la .la__read .la-i--on { display: none; }
.la .la__read.is-on { color: var(--la-accent); }
.la .la__read.is-on .la-i--on { display: block; }
.la .la__read.is-on .la-i--off { display: none; }

/* THE SPEAK PILL — centred under the header; while the browser listens it
   becomes the live state: accent ring, level bars, "tap to stop". */
.la .la__speakrow { display: flex; justify-content: center; padding: 0 16px 12px; flex: 0 0 auto; }
.la .la__speak {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px 0 12px;
    background: var(--la-raised); color: var(--la-ink);
    border: 1px solid var(--la-line); border-radius: 999px;
    font-size: 13.5px; font-weight: 600; line-height: 1;
    transition: border-color .15s, background .15s, color .15s;
}
.la .la__speak:hover { border-color: var(--la-line-2); }
.la .la__speak-mic { display: grid; place-items: center; color: var(--la-accent); }
.la .la__speak-mic .la-i { width: 18px; height: 18px; }
.la .la__bars { display: none; align-items: center; gap: 2px; height: 16px; }
.la .la__bars i {
    display: block; width: 3px; height: 100%; border-radius: 2px;
    background: currentColor; transform: scaleY(.3); transform-origin: 50% 50%;
    animation: la-bar 1s var(--la-ease) infinite;
}
.la .la__bars i:nth-child(2) { animation-delay: -.8s; }
.la .la__bars i:nth-child(3) { animation-delay: -.55s; }
.la .la__bars i:nth-child(4) { animation-delay: -.3s; }
.la .la__bars i:nth-child(5) { animation-delay: -.15s; }
@keyframes la-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.la .la__speak.is-live { border-color: var(--la-accent); background: var(--la-accent-soft); color: var(--la-accent); }
.la .la__speak.is-live .la__speak-mic { display: none; }
.la .la__speak.is-live .la__bars { display: inline-flex; }

/* ---------------------------------------------------------------- the log */
.la .la__log {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex; flex-direction: column; gap: 16px;
    border-top: 1px solid var(--la-line);
    scrollbar-width: thin;
}
.la .la__m { font-size: 14.5px; line-height: 1.55; color: var(--la-ink-2); overflow-wrap: anywhere; }
/* Plain paragraphs only: a classed one (.la__foot, .la__lead …) carries its
   own spacing, and a `.la__m p` rule would outrank every one of them. */
.la .la__m > p:not([class]) { margin: 0 0 8px; }
.la .la__m > p:not([class]):last-child { margin-bottom: 0; }
.la .la__m--you {
    align-self: flex-end; max-width: 85%;
    padding: 8px 12px;
    background: var(--la-you-bg); color: var(--la-you-ink);
    border-radius: 16px 16px 4px 16px;
    font-weight: 500;
}
.la .la__m--bot { align-self: stretch; }

.la .la__hello { display: flex; flex-direction: column; gap: 8px; }
.la .la__hello .la__chips--in { margin-top: 4px; }
.la .la__hi { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--la-ink); }
.la .la__hi b { font-weight: 600; }
.la .la__hi-sub { font-weight: 500; color: var(--la-muted); }
.la .la__hi-d { color: var(--la-ink-2); }
.la .la__hi-w { font-size: 13px; line-height: 1.5; color: var(--la-muted); }

.la .la__wait { display: flex; align-items: center; gap: 8px; color: var(--la-muted); }
.la .la__dots { display: inline-flex; gap: 4px; }
.la .la__dots i {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .35;
    animation: la-dot 1.1s ease-in-out infinite;
}
.la .la__dots i:nth-child(2) { animation-delay: .15s; }
.la .la__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes la-dot { 0%, 100% { opacity: .25; } 40% { opacity: .9; } }

.la .la__lead {
    margin: 0 0 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--la-muted);
}
/* The quote is the estate's own words, so it is marked as a quotation and
   not dressed up as the assistant's prose. */
.la .la__quote {
    margin: 0; padding: 2px 0 2px 12px;
    border-left: 2px solid var(--la-accent);
    font-size: 14.5px; line-height: 1.6; color: var(--la-ink);
    quotes: none; font-style: normal; background: none;
}
.la .la__ans > p { color: var(--la-ink); }

/* ------------------------------------------------------------ the sources */
.la .la__srcs { display: grid; gap: 8px; margin-top: 12px; }
.la .la__src {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--la-surface); color: var(--la-ink);
    border: 1px solid var(--la-line); border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.la .la__src:hover { border-color: var(--la-line-2); background: var(--la-raised); }
.la .la__src-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 2px; }
.la .la__src-t b {
    font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--la-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la .la__src-t span {
    font-family: var(--la-mono); font-size: 11.5px; line-height: 1.3; color: var(--la-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la .la__src-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--la-accent); white-space: nowrap; }

.la .la__tools { display: flex; gap: 8px; margin-top: 12px; }
.la .la__tool {
    display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
    background: none; color: var(--la-muted);
    border: 1px solid var(--la-line); border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1;
    transition: color .15s, border-color .15s;
}
.la .la__tool:hover { color: var(--la-ink); border-color: var(--la-line-2); }

.la .la__foot {
    margin: 12px 0 0; padding-top: 8px;
    border-top: 1px solid var(--la-line);
    font-size: 12px; line-height: 1.5; color: var(--la-muted);
}
.la .la__next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.la .la__nexth, .la .la__seedh {
    display: block; margin: 0;
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--la-muted);
}
.la .la__seedh { margin-top: 16px; }
.la .la__hint { margin-top: 12px; font-size: 12.5px; color: var(--la-muted); }
.la .la__path {
    margin-top: 8px; font-family: var(--la-mono); font-size: 11.5px; color: var(--la-muted);
    overflow-wrap: anywhere;
}
.la .la__after { margin-top: 12px; color: var(--la-ink-2); }

/* ---------------------------------------------------------------- chips */
.la .la__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.la .la__chips--in { margin-top: 12px; }
.la .la__chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
    background: var(--la-surface); color: var(--la-ink);
    border: 1px solid var(--la-line-2); border-radius: 999px;
    font-size: 13.5px; font-weight: 500; line-height: 1.3; text-align: left;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.la .la__chip:hover { background: var(--la-raised); border-color: var(--la-muted); }
.la .la__chip--accent { border-color: var(--la-accent); color: var(--la-accent); font-weight: 600; background: transparent; }
.la .la__chip--accent:hover { background: var(--la-accent-soft); border-color: var(--la-accent); }

/* ---------------------------------------------------------------- composer */
.la .la__compose {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--la-line);
    background: var(--la-surface);
}
.la.is-fresh .la__compose > .la__chips { display: none; }
.la .la__status { display: none; padding: 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--la-muted); }
.la .la__status.is-on { display: block; }
.la .la__bar {
    display: flex; align-items: center; gap: 4px;
    height: 52px; padding: 0 5px 0 16px;
    background: var(--la-surface);
    border: 1px solid var(--la-line-2); border-radius: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.la .la__bar:focus-within { border-color: var(--la-accent); box-shadow: 0 0 0 3px var(--la-accent-soft); }
.la .la__q {
    flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0;
    background: transparent; border: 0; outline: 0; box-shadow: none; border-radius: 0;
    /* SIXTEEN PIXELS, and four declarations rather than the shorthand: under
       16px iOS zooms the page on focus, and `font: 400 16px/1.3 inherit` is
       INVALID (a CSS-wide keyword is only legal as the whole value) — the 526
       note measured it computing to 13.33px Arial on every property. */
    font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.3;
    color: var(--la-ink);
}
.la .la__q::placeholder { color: var(--la-muted); opacity: 1; }
.la .la__q:focus-visible { outline: 0; }
.la .la__mic,
.la .la__go {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 12px;
    transition: background .15s, color .15s, opacity .15s;
}
.la .la__mic { background: none; color: var(--la-muted); }
.la .la__mic:hover { background: var(--la-raised); color: var(--la-ink); }
.la .la__mic.is-live { background: var(--la-accent-soft); color: var(--la-accent); }
.la .la__go { background: var(--la-ink); color: var(--la-surface); }
.la .la__go:hover { background: var(--la-accent); color: var(--la-accent-ink); }
.la .la__go:disabled { background: var(--la-raised); color: var(--la-muted); opacity: .8; }
.la .la__mic .la-i, .la .la__go .la-i { width: 20px; height: 20px; }

/* =============================================================================
   CARDS IN THE LOG — the demo, a pick, a countdown, the inquiry
   ========================================================================== */
.la .la-demo {
    margin-top: 12px;
    background: var(--la-surface);
    border: 1px solid var(--la-line); border-radius: 16px;
    box-shadow: var(--la-sh-sm);
    overflow: hidden;
}
.la .la-demo__bar, .la-guide .la-guide__bar { display: block; height: 3px; background: var(--la-line); }
.la .la-demo__bar i, .la-guide .la-guide__bar i {
    display: block; height: 100%; width: 0; background: var(--la-accent);
    transition: width .3s var(--la-ease);
}
.la .la-demo__in { padding: 14px 16px 16px; }
.la .la-demo__eye {
    display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--la-muted);
}
.la .la-demo__ch { color: var(--la-accent); text-align: right; }
.la .la-demo__chl { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--la-muted); }
.la .la-demo__chl[hidden] { display: none; }
.la .la-demo__t { margin: 0 0 4px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--la-ink); }
.la .la-demo__d { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--la-ink-2); }
.la .la-demo__open, .la .la-pick__go {
    display: inline-flex; align-items: center; min-height: 24px;
    font-size: 13.5px; font-weight: 600; color: var(--la-accent); text-decoration: none;
}
.la .la-demo__open:hover, .la .la-pick__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.la .la-demo__ctl, .la-guide .la-guide__ctl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.la-guide .la-guide__ctl { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.la .la-dbtn, .la-guide .la-dbtn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 8px;
    background: var(--la-surface); color: var(--la-ink);
    border: 1px solid var(--la-line-2); border-radius: 10px;
    font-size: 13px; font-weight: 600; line-height: 1;
    transition: background .15s, border-color .15s, opacity .15s;
}
.la .la-dbtn:hover, .la-guide .la-dbtn:hover { background: var(--la-raised); }
.la .la-dbtn:disabled, .la-guide .la-dbtn:disabled { opacity: .4; background: var(--la-surface); }
.la .la-dbtn--ink, .la-guide .la-dbtn--ink { background: var(--la-ink); color: var(--la-surface); border-color: var(--la-ink); }
.la .la-dbtn--ink:hover, .la-guide .la-dbtn--ink:hover { background: var(--la-accent); border-color: var(--la-accent); color: var(--la-accent-ink); }
.la .la-dbtn[aria-pressed="true"] { border-color: var(--la-accent); color: var(--la-accent); }
.la .la-demo.is-done { box-shadow: none; }

.la .la-pick {
    padding: 14px 16px;
    background: var(--la-raised);
    border: 1px solid var(--la-line); border-radius: 14px;
}
.la .la-pick__t { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--la-ink); }
.la .la-pick__t span { font-weight: 500; color: var(--la-muted); }
.la .la-pick__d { margin: 4px 0 8px; font-size: 14px; line-height: 1.5; color: var(--la-ink-2); }
.la .la-pick__t + .la-pick__go { margin-top: 8px; }

.la .la-go { padding: 12px 14px; border: 1px solid var(--la-line); border-radius: 14px; }
.la .la-go__t { font-size: 14.5px; color: var(--la-ink); }
.la .la-go__t b { font-weight: 600; }
.la .la-go__p { margin-top: 2px; font-family: var(--la-mono); font-size: 11.5px; color: var(--la-muted); }
.la .la-go__bar { display: block; height: 3px; margin-top: 10px; border-radius: 3px; overflow: hidden; background: var(--la-line); }
.la .la-go__bar i { display: block; height: 100%; width: 0; background: var(--la-accent); }
.la .la-go.is-run .la-go__bar i { width: 100%; transition: width .6s linear; }
.la .la-go.is-off .la-go__bar { display: none; }

/* ------------------------------------------------------------- the inquiry */
.la .la-form {
    display: flex; flex-direction: column; gap: 12px;
    margin: 0; padding: 16px;
    background: var(--la-surface);
    border: 1px solid var(--la-line); border-radius: 16px;
    box-shadow: var(--la-sh-sm);
}
.la .la-form__t { font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--la-ink); }
.la .la-form__d { margin-top: -8px; font-size: 13px; color: var(--la-muted); }
.la .la-form__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.la .la-form__l { display: block; padding: 0; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--la-ink-2); }
.la .la-form__topics .la-form__l { margin-bottom: 6px; }
.la .la-form__i {
    display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px;
    background: var(--la-surface); color: var(--la-ink);
    border: 1px solid var(--la-line-2); border-radius: 10px;
    outline: 0; box-shadow: none;
    font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
.la .la-form__ta { height: auto; min-height: 104px; padding: 10px 12px; resize: vertical; }
.la .la-form__i:focus { border-color: var(--la-accent); box-shadow: 0 0 0 3px var(--la-accent-soft); }
.la .la-form__i[aria-invalid="true"],
.la .la-form__topics[aria-invalid="true"] .la-form__chip span { border-color: var(--la-danger); }
.la .la-form__e { font-size: 12.5px; line-height: 1.4; color: var(--la-danger); }
.la .la-form__e:empty { display: none; }
.la .la-form__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.la .la-form__chip { position: relative; display: inline-flex; margin: 0; }
.la .la-form__chip input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.la .la-form__chip span {
    display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
    border: 1px solid var(--la-line-2); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--la-ink-2);
    transition: background .15s, border-color .15s, color .15s;
}
.la .la-form__chip:hover span { border-color: var(--la-muted); }
.la .la-form__chip input:checked + span { background: var(--la-ink); border-color: var(--la-ink); color: var(--la-surface); }
.la .la-form__chip input:focus-visible + span { box-shadow: 0 0 0 2px var(--la-surface), 0 0 0 4px var(--la-accent); }
.la .la-form__note { font-size: 12px; line-height: 1.5; color: var(--la-muted); }
.la .la-form__msg { font-size: 13px; line-height: 1.5; color: var(--la-ink-2); }
.la .la-form__msg:empty { display: none; }
.la .la-form__msg.is-err { color: var(--la-danger); }
.la .la-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.la .la-form__send { height: 44px; padding: 0 20px; }
.la .la-form__hint { font-size: 12px; color: var(--la-muted); }
.la .la-sent {
    padding: 14px 16px;
    background: var(--la-ok-soft);
    border: 1px solid var(--la-ok-line); border-radius: 14px;
}
.la .la-sent__t { font-size: 14.5px; font-weight: 600; color: var(--la-ink); }
.la .la-sent__t b { font-family: var(--la-mono); font-weight: 600; font-size: 13px; }
.la .la-sent__d { margin-top: 4px; font-size: 13px; color: var(--la-ink-2); }

/* =============================================================================
   THE PAGE GUIDE, THE SCRIM, THE RING
   ========================================================================== */
.la-guide {
    position: fixed; z-index: 948;
    right: 16px; bottom: 16px;
    right: var(--la-edge); bottom: var(--la-foot);
    width: 380px; width: min(380px, calc(100vw - 32px));
    padding: 12px 16px 16px;
    background: var(--la-surface);
    border: 1px solid var(--la-line); border-radius: 18px;
    box-shadow: var(--la-sh-xl);
    opacity: 0; transform: translateY(12px);
    transition: opacity .22s var(--la-ease), transform .22s var(--la-ease);
}
.la-guide.is-in { opacity: 1; transform: none; }
.la-guide[hidden] { display: none; }
.la-guide .la-guide__head { display: flex; align-items: center; gap: 10px; }
.la-guide .la-guide__logo { display: block; width: 64px; height: 22px; flex: 0 0 auto; }
.la-guide .la-guide__n {
    flex: 1 1 auto;
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--la-muted);
}
.la-guide .la__icon {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin-right: -6px;
    background: none; border: 0; border-radius: 10px; color: var(--la-muted);
}
.la-guide .la__icon:hover { background: var(--la-raised); color: var(--la-ink); }
.la-guide .la-guide__bar { margin: 10px -16px 12px; }
.la-guide .la-guide__t { font-size: 16.5px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--la-ink); }
.la-guide .la-guide__d { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--la-ink-2); }
.la-guide .la-guide__d[hidden] { display: none; }

.la-scrim {
    position: fixed; inset: 0; z-index: 945;
    top: 0; right: 0; bottom: 0; left: 0;
    background: var(--la-scrim);
    opacity: 0; transition: opacity .26s var(--la-ease);
}
.la-scrim.is-in { opacity: 1; }
.la-scrim[hidden] { display: none; }

/* "Tour this page" rings the section it is talking about, briefly. An
   outline, so nothing on the page moves by a pixel. */
.la-spot {
    outline: 2px solid var(--la-accent) !important;
    outline-offset: 6px !important;
    transition: outline-color .2s;
}

/* =============================================================================
   COLLISIONS — the corner is shared
   =============================================================================
   While the launcher is on the page (html.la-on) the toast stack and the
   back-to-top disc step up above it: toast.css puts #toast-host at 22px (10px
   at 720 and below) and site.css .to-top at 1.1rem, both bottom right. */
html.la-on #toast-host { bottom: 84px; bottom: calc(var(--la-foot) + 64px); }
html.la-on .to-top { bottom: 84px; bottom: calc(var(--la-foot) + 64px); }
html.la-open .la-dock { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--la-ease), visibility 0s .2s; }
html.la-guiding .la-dock { display: none; }

/* =============================================================================
   NARROWER THAN THE CARD'S DESKTOP, AND PHONES
   ========================================================================== */
@media (max-width: 1040px) {
    .la-dock .la-card { display: none; }
}
@media (pointer: coarse) {
    .la .la__icon { width: 44px; height: 44px; }
}

/* THE SHEET. Below 720 the panel is a bottom sheet with a handle; the page
   behind is dimmed and held (assistant.js), and the composer rides above the
   on-screen keyboard: --la-kb is the keyboard's height and --la-vvh the
   visible viewport, both from window.visualViewport. */
@media (max-width: 719.98px) {
    .la-dock .la-pill { padding-right: 0; }
    .la-dock .la-pill__open { padding: 0 18px 0 14px; }
    .la-dock .la-pill__mic { display: none; }
    .la-dock.is-mini .la-pill .la-pill__open { padding-right: 14px; }
    .la-dock.is-mini .la-pill__t { max-width: 0; opacity: 0; margin-left: -12px; }

    .la {
        top: auto; left: 0; right: 0;
        bottom: 0; bottom: var(--la-kb, 0px);
        width: auto;
        height: 88vh; height: min(88dvh, 720px);
        max-height: calc(var(--la-vvh, 100vh) - 8px);
        border-radius: 20px 20px 0 0; border-bottom: 0;
        transform: translateY(40px);
    }
    .la.is-in { transform: none; }
    .la .la__grab {
        display: flex; align-items: center; justify-content: center;
        height: 22px; flex: 0 0 auto;
        touch-action: none; cursor: grab;
    }
    .la .la__grab span { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--la-line-2); }
    .la .la__head { padding: 2px 6px 10px 16px; gap: 6px; }
    .la .la__icon { width: 44px; height: 44px; }
    .la .la__speakrow { padding-bottom: 10px; }
    .la .la__speak { height: 44px; }
    .la .la__log { padding: 16px; }
    .la .la__compose { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .la.is-kb .la__compose { padding-bottom: 10px; }
    .la .la__chip { min-height: 44px; }
    .la .la__tool { height: 36px; min-height: 36px; padding: 0 14px; }
    .la .la__bar { height: 56px; }
    .la .la__mic, .la .la__go { width: 44px; height: 44px; }
    .la .la-dbtn, .la-guide .la-dbtn { height: 44px; }
    .la .la-demo__ctl { grid-template-columns: repeat(2, 1fr); }
    .la .la-form__chip span { height: 40px; padding: 0 14px; }
    .la .la-form__send { flex: 1 1 auto; }

    .la-guide {
        left: 12px; right: 12px; width: auto;
        bottom: 12px; bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    }
    .la-guide .la__icon { width: 44px; height: 44px; }
    html.la-on #toast-host { bottom: 76px; bottom: calc(var(--la-foot) + 60px); }
}
@media (max-width: 359.98px) {
    .la-dock .la-pill__t { display: none; }
    .la-dock .la-pill .la-pill__open { padding: 0 14px; }
    .la .la__head { padding-left: 12px; }
    .la .la__plate { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .la, .la-dock, .la-dock .la-pill, .la-dock .la-card, .la-dock .la-pill__t,
    .la-guide, .la-scrim, .la .la-demo__bar i, .la-guide .la-guide__bar i, .la-spot { transition: none; }
    .la, .la.is-in, .la-dock .la-card, .la-guide { transform: none; }
    .la-dock .la-pill:hover, .la-dock.has-card .la-pill { transform: none; }
    .la .la__bars i, .la .la__dots i, .la-dock .la-live, .la-dock .la-live::after { animation: none; }
    .la .la__bars i { transform: scaleY(.6); }
    .la .la__bars i:nth-child(2n) { transform: scaleY(.95); }
    .la .la__dots i { opacity: .6; }
    .la .la-go.is-run .la-go__bar i { transition: none; }
}

@media print {
    .la, .la-dock, .la-guide, .la-scrim { display: none !important; }
}

/* =============================================================================
   labs527 — THE CONTROLS TAKE THE LOGO'S SHAPE (owner: "make the shape of these
   buttons match the shape of the logo (button) and compact").
   The LABS plate is a 165 x 56 rectangle with 15.85 corners: a corner of 0.283 of
   the height, not a pill. Every button and chip in the card and the panel now uses
   that ratio at its own height, and is one size smaller:
       32px controls  -> 9px corners      (buttons, chips)
       28px keys      -> 8px              (form topic chips)
       26px tools     -> 7px
       36/44px speak  -> 10 / 12.5px
   On a touch screen the chips and buttons stay 36px tall (10px corners), so a
   thumb still has a target; the shape is the same.
   ============================================================================= */
.la .la-btn, .la-dock .la-btn {
    height: 32px; padding: 0 12px; gap: 5px;
    font-size: 13px; border-radius: 9px;
}
.la .la__chip {
    min-height: 32px; padding: 5px 12px;
    font-size: 13px; border-radius: 9px;
}
.la .la__chips { gap: 6px; }
.la .la__tool { height: 26px; padding: 0 9px; border-radius: 7px; }
.la .la-form__chip span { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.la .la__speak { height: 36px; padding: 0 14px 0 11px; border-radius: 10px; }
.la-dock .la-card__speak { height: 44px; border-radius: 12.5px; }
.la-dock .la-card__mic { width: 32px; height: 32px; border-radius: 9px; }
@media (pointer: coarse) {
    .la .la-btn, .la-dock .la-btn { height: 36px; border-radius: 10px; }
    .la .la__chip { min-height: 36px; border-radius: 10px; }
    .la .la-form__chip span { height: 34px; border-radius: 9.5px; }
    .la .la__speak { height: 40px; border-radius: 11px; }
}

/* =============================================================================
   labs528 — THE PICTURES OF THE PAGES (owner: "include little illustrations of
   the pages"). Photographs of the pages themselves, from labassistant/ (two
   editions, 400x250 and 800x500), in four places: the page card a NAMED page
   is answered with, the source rows, the tiles of a list, and the demo card.
   After the labs527 block, so the 527 control sizes still win where they
   apply; every rule two classes deep, like the rest of the sheet.
   ========================================================================== */

/* THE FRAME. The same box whether the picture has arrived, is on its way, or
   never comes: a fixed proportion plus the <img>'s own width and height, so
   nothing in the log moves when it lands. Under it, a page drawn in three
   greys (assistant.js WIRE, an inline SVG in the panel's tokens) — the
   loading state, and the fallback for a page with no honest picture. */
.la .la-thumb {
    position: relative; display: block; flex: 0 0 auto; overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--la-raised);
    border: 1px solid var(--la-line);
    border-radius: 6px;
    transition: border-color .15s;
}
.la .la-wire { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.la .la-wire .la-wire__a { fill: var(--la-line-2); }
.la .la-wire .la-wire__b { fill: var(--la-line); }
.la .la-wire .la-wire__c { fill: var(--la-surface); stroke: var(--la-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.la .la-thumb img {
    position: absolute; top: 0; left: 0;
    display: block; width: 100%; height: 100%; max-width: none;
    margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    object-fit: cover; object-position: 50% 0;       /* the top of a page is the page */
    opacity: 0; transition: opacity .16s var(--la-ease);
}
.la .la-thumb.is-ok img { opacity: 1; }
.la .la-thumb.is-bad img { display: none; }         /* never the broken-image glyph */
/* the other edition's picture standing in: quieter on a dark page */
html[data-dark] .la .la-thumb.is-other img,
html[data-edition="dark"] .la .la-thumb.is-other img { filter: brightness(.8) contrast(.95); }

/* ---- 1. SOURCE ROWS: a 64 x 40 picture at the row's left edge -------------- */
.la .la__src--pic { padding: 8px 12px 8px 8px; }
.la .la__src--pic .la-thumb { width: 64px; height: 40px; border-radius: 6px; }
.la .la__src--pic .la__src-t b {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.la .la__src:hover .la-thumb { border-color: var(--la-line-2); }
.la .la__src-go.is-here { color: var(--la-muted); font-weight: 500; }

/* ---- 2. THE PAGE CARD: a page named ("newshub", "open chess", "what is RINSE") */
.la .la-page {
    margin-top: 12px;
    background: var(--la-surface);
    border: 1px solid var(--la-line); border-radius: 16px;
    box-shadow: var(--la-sh-sm);
    overflow: hidden;
    transition: border-color .15s;
}
.la .la__m > .la-page:first-child { margin-top: 0; }
.la .la-page:hover { border-color: var(--la-line-2); }
.la .la-page__media { display: block; text-decoration: none; }
.la .la-page .la-thumb {
    width: 100%;
    border: 0; border-bottom: 1px solid var(--la-line); border-radius: 0;
}
.la .la-page__in { padding: 12px 14px 14px; }
.la .la-page__eye {
    margin: 0 0 4px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--la-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la .la-page.is-here .la-page__eye { color: var(--la-accent); }
.la .la-page__t { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--la-ink); }
.la .la-page__t span { font-weight: 500; color: var(--la-muted); }
.la .la-page__d {
    margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--la-ink-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.la .la-page__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.la .la-page__act .la-btn { text-decoration: none; }

/* ---- 3. TILES: a list of pages, two across --------------------------------- */
.la ul.la-tiles, .la .la-tiles > li { margin: 0; padding: 0; list-style: none; }
.la .la-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.la .la-tiles > li { display: flex; min-width: 0; }
.la .la-tile {
    display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
    padding: 6px 6px 10px;
    background: var(--la-surface); color: var(--la-ink);
    border: 1px solid var(--la-line); border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.la .la-tile .la-thumb { width: 100%; border-radius: 7px; margin-bottom: 8px; }
.la .la-tile__t, .la .la-tile__p {
    display: block; padding: 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la .la-tile__t { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.la .la-tile__p { margin-top: 2px; font-family: var(--la-mono); font-size: 11.5px; line-height: 1.3; color: var(--la-muted); }
.la .la-tile.is-here .la-tile__p { font-family: inherit; color: var(--la-accent); }
.la .la-tile:hover { border-color: var(--la-line-2); background: var(--la-raised); }
.la .la-tile:hover .la-thumb { border-color: var(--la-accent); }
.la .la-tiles + .la__srcs { margin-top: 8px; }

/* ---- 4. SIDE BY SIDE: "compare chess and checkers" ------------------------- */
.la .la-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.la .la-cmp__c {
    display: flex; flex-direction: column; min-width: 0;
    padding: 6px 6px 10px;
    background: var(--la-surface); color: var(--la-ink);
    border: 1px solid var(--la-line); border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.la .la-cmp__c:hover { border-color: var(--la-line-2); background: var(--la-raised); }
.la .la-cmp__c:hover .la-thumb { border-color: var(--la-accent); }
.la .la-cmp__c .la-thumb { width: 100%; border-radius: 7px; margin-bottom: 8px; }
.la .la-cmp__g, .la .la-cmp__t, .la .la-cmp__d, .la .la-cmp__p { display: block; padding: 0 4px; }
.la .la-cmp__g {
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--la-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la .la-cmp__t { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.la .la-cmp__d {
    margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--la-ink-2);
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.la .la-cmp__p {
    margin-top: auto; padding-top: 8px;
    font-family: var(--la-mono); font-size: 11.5px; line-height: 1.3; color: var(--la-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 5. THE DEMO CARD: the stop's picture under the progress bar ----------- */
.la .la-demo__media .la-thumb {
    width: 100%; aspect-ratio: 16 / 9;
    border: 0; border-bottom: 1px solid var(--la-line); border-radius: 0;
}

/* ---- the words around them ------------------------------------------------- */
/* "Showing News Hub — you typed neshub" */
.la .la__fix { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--la-muted); }
.la .la__fix b { font-weight: 600; color: var(--la-ink); }
.la .la__lead--gap { margin-top: 16px; }
.la .la-go + .la__chips--in + .la-page { margin-top: 12px; }

/* THE SHEET: shorter pictures, so a card and its buttons fit one screen, and a
   list is one row that scrolls sideways under the thumb. */
@media (max-width: 719.98px) {
    .la .la-page .la-thumb { aspect-ratio: 2 / 1; }
    .la .la-page__d { -webkit-line-clamp: 2; }
    .la .la-demo__media .la-thumb { aspect-ratio: 21 / 9; }
    .la ul.la-tiles {
        display: flex; gap: 8px;
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
        margin: 12px -16px 0; padding: 0 16px 4px; scroll-padding: 0 16px;
        scrollbar-width: none;
    }
    .la .la-tiles::-webkit-scrollbar { display: none; }
    .la .la-tiles > li { flex: 0 0 62%; scroll-snap-align: start; }
}
/* a short phone (360 x 740): the pictures are strips, so the page card and
   its two buttons, and the demo card and its four, fit above the composer */
@media (max-width: 719.98px) and (max-height: 799.98px) {
    .la .la-page .la-thumb { aspect-ratio: 21 / 9; }
    .la .la-demo__media .la-thumb { aspect-ratio: 3 / 1; }
}
/* under 420px of panel the row's "Open →" becomes the arrow: the title needs the width */
@media (max-width: 419.98px) {
    .la .la__src--pic .la__src-go:not(.is-here) { font-size: 0; }
    .la .la__src--pic .la__src-go:not(.is-here)::after { content: "\2192"; font-size: 15px; }
}

/* THE SHEET'S TOUCH SIZES, RESTATED. The sheet block above sets chips and the
   speak pill to 44 and tools to 36; the labs527 block after it, at the same
   specificity, set 32 / 36 / 26 and won — measured 32px chips at 390 and 360.
   Said again here, last, with the plate's corner ratio (0.283 of the height). */
@media (max-width: 719.98px) {
    .la .la__chip { min-height: 44px; border-radius: 12.5px; }
    .la .la__tool { height: 36px; padding: 0 14px; border-radius: 10px; }
    .la .la__speak { height: 44px; border-radius: 12.5px; }
    .la .la-page__act .la-btn { height: 40px; padding: 0 14px; border-radius: 11px; }
}

/* A PAGE'S BUTTON SHADOW, KEPT OUT. The chess page's own button rule ties the
   reset's `.la button` and comes later, so every header key wore a faint
   0 1px 1px shadow — a smudge under each icon at 2x. Two classes deep wins. */
.la .la__icon, .la-guide .la__icon, .la .la__chip, .la .la-btn, .la-dock .la-btn, .la .la-dbtn, .la-guide .la-dbtn,
.la .la__tool, .la .la__mic, .la .la__go, .la .la__speak,
.la-dock .la-pill__open, .la-dock .la-pill__mic, .la-dock .la-card__speak, .la-dock .la-card__mic2, .la-dock .la-card__go { box-shadow: none; }

/* THE LAUNCHER TAKES FOCUS BACK. Pages carry `button { transition: .1s }`
   (that is: all), so the launcher's INHERITED visibility transitioned too,
   and at the moment Escape closed the panel and handed it focus it was still
   hidden — focus stayed in the closing panel and fell to the page (measured
   on chess/, 1280 and both sheets). Its transitions are named here. */
.la-dock .la-pill__open { transition: background .15s, color .15s; }

/* labs528 review fixes ------------------------------------------------------
   THE ADDRESS IN THE EYEBROW is typed as it is: the section stays in small
   capitals, the path is mono and muted like the source rows' (an address is
   case-sensitive, and in capitals it outshouted the title). */
.la .la-page__eye .la-page__path {
    font-family: var(--la-mono); font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--la-muted);
}
/* THE SITE'S NOTICES WAIT BEHIND AN OPEN ASSISTANT. toast.css stacks
   #toast-host at 9999, so stocks/' "TAPE" notice sat on the composer at 360
   and over the panel at 1280; while the panel is open it goes under the
   scrim (945) and the panel (950), and comes back when the panel closes. */
html.la-open #toast-host { z-index: 944; }
/* THE COMPOSER'S CHIPS STEP BACK while the last answer already offers the
   same thing (assistant.js syncCompose: .no-cdemo / .no-cdesk) */
.la.no-cdemo .la__compose > .la__chips [data-la-act="demo"],
.la.no-cdesk .la__compose > .la__chips [data-la-act="contact"] { display: none; }
.la.no-cdemo.no-cdesk .la__compose > .la__chips { display: none; }
/* ON A PHONE THE SPEAK ROW IS THE GREETING'S: after the first message the
   composer's own mic is the way to speak, and the row's 54-70px go to the
   log (the demo card was cut by 3px at 360 x 740). It comes back while the
   browser is listening, which is where its live state is drawn. */
@media (max-width: 719.98px) {
    .la:not(.is-fresh):not(.is-listening) .la__speakrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .la .la-thumb, .la .la-thumb img, .la .la-tile, .la .la-page, .la .la-cmp__c { transition: none; }
}
@media (forced-colors: active) {
    .la .la-thumb { border-color: CanvasText; }
}
@media print {
    .la .la-thumb { display: none; }
}