/* =============================================================================
   assistant.css — Lab Assistant
   =============================================================================
   The navbar mark, and the panel it opens.

   TOKENS ONLY, WITH FALLBACKS, like search.css beside it: this sheet ships to
   every page in the building and most of them define no site tokens of their
   own. Every var() carries a literal behind it so the panel is legible on a
   page that has none.

   IT IS A PAIR WITH THE SEARCH. Same 17px icon, same 1.7 stroke, same kbd chip,
   same hover colour — because the two things this estate can be asked sit next
   to each other and must read as one control with two doors, not as two
   unrelated buttons that ended up adjacent.
   ========================================================================== */

/* ------------------------------------------------------------- the navbar mark */
.nav__bot {
    display: inline-flex; align-items: center; gap: .34rem;
    width: auto; height: 34px; padding: 0 .5rem;
    background: none; border: 0; border-radius: 8px;
    color: var(--ink-55, #6b7280);
    cursor: pointer; font: inherit;
    transition: color .18s ease, transform .18s ease;
}
.nav__bot:hover { color: var(--accent, #C2410C); }
.nav__bot:active { transform: scale(.92); }
.nav__bot[aria-expanded="true"] { color: var(--accent, #C2410C); }
.nav__bot:focus-visible {
    outline: 2px solid var(--accent, #C2410C); outline-offset: 2px; border-radius: 8px;
}
.nav__bot svg { display: block; width: 17px; height: 17px; flex: 0 0 auto; }
/* THE KEYCAP IS UNRINGED, AND IT IS COPIED RATHER THAN INVENTED. This had a
   border, a radius, padding and a monospace face — a little boxed key beside a
   ⌘K that has none, so the two controls that are meant to read as a pair read as
   a pair of different things. These are search.css's own declarations for
   .nav__find kbd, to the value, including the breakpoint that shows it: there is
   ONE design for a keycap in this navbar and this is it. */
.nav__bot kbd {
    display: none; margin-left: .3rem;
    font: inherit; font-size: .62rem; font-weight: 600; letter-spacing: .04em;
    color: var(--muted, #6b7280); border: 0; padding: 0; line-height: 1;
}
@media (min-width: 1041px) {
    .nav__bot { width: auto; gap: 0; padding: 0 .5rem; border-radius: 8px; }
    .nav__bot kbd { display: inline-block; }
}
@media (max-width: 640px) { .nav__bot { width: 44px; height: 44px; padding: 0; justify-content: center; } }

/* -------------------------------------------------------------------- the panel
   Anchored to the bar rather than floating in a corner, because it belongs to
   the button that opened it. On a phone it becomes a full sheet — a 380px panel
   on a 375px screen is a panel with no page around it. */
.la {
    position: fixed; z-index: 940;
    top: 62px; right: 14px; width: 384px; max-width: calc(100vw - 28px);
    height: min(560px, calc(100vh - 96px));
    display: flex; flex-direction: column;
    background: var(--paper, #fff);
    border: 1px solid var(--line, rgba(30,38,43,.14));
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
}
.la[hidden] { display: none; }
@media (max-width: 620px) {
    .la {
        top: auto; right: 0; bottom: 0; width: 100%; max-width: none;
        height: min(86vh, 640px); border-radius: 14px 14px 0 0; border-bottom: 0;
    }
}

.la__head {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .7rem .6rem .8rem;
    border-bottom: 1px solid var(--line, rgba(30,38,43,.12));
    background: var(--tint, #FAFAF8);
    flex: 0 0 auto;
}
.la__ico { display: flex; color: var(--accent, #C2410C); }
.la__ico svg { width: 18px; height: 18px; }
.la__t { margin: 0; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.la__t b { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink, #1E262B); }
.la__t span {
    font-size: .58rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink-55, #6b7280); margin-top: .12rem;
}
.la__mini {
    margin-left: auto; flex: 0 0 auto;
    font-family: inherit; font-weight: 600; font-size: .6rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-55, #6b7280);
    background: none; border: 1px solid var(--line, rgba(30,38,43,.16));
    border-radius: 999px; padding: .3rem .5rem; cursor: pointer;
}
.la__mini:hover { color: var(--accent, #C2410C); border-color: var(--accent, #C2410C); }
.la__x {
    flex: 0 0 auto; width: 26px; height: 26px; line-height: 1;
    font-size: 1.15rem; color: var(--ink-55, #6b7280);
    background: none; border: 0; cursor: pointer; border-radius: 6px;
}
.la__x:hover { color: var(--ink, #1E262B); }

/* ---------------------------------------------------------------------- the log */
.la__log {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: .8rem; display: flex; flex-direction: column; gap: .7rem;
    scrollbar-width: thin;
}
.la__m { font-size: .82rem; line-height: 1.6; color: var(--ink-77, #374151); }
.la__m p { margin: 0 0 .5rem; }
.la__m p:last-child { margin-bottom: 0; }
.la__m--you {
    align-self: flex-end; max-width: 86%;
    background: var(--ink, #1E262B); color: var(--paper, #fff);
    padding: .5rem .7rem; border-radius: 12px 12px 3px 12px;
    font-weight: 500;
}
.la__m--bot {
    align-self: stretch;
    background: var(--tint, #FAFAF8);
    border: 1px solid var(--line-soft, rgba(30,38,43,.09));
    padding: .7rem .75rem; border-radius: 12px 12px 12px 3px;
}
.la__wait { color: var(--ink-55, #6b7280); font-style: italic; }
.la__lead { font-size: .68rem; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: var(--ink-55, #6b7280); }
/* 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__quote {
    margin: 0 0 .55rem; padding: 0 0 0 .65rem;
    border-left: 2px solid var(--accent, #C2410C);
    font-size: .82rem; line-height: 1.62; color: var(--ink, #1E262B);
}

/* ------------------------------------------------------------------- the sources */
.la__srcs { display: grid; gap: .3rem; margin-top: .5rem; }
.la__src {
    display: flex; flex-direction: column; gap: .06rem;
    padding: .38rem .5rem; text-decoration: none; color: inherit;
    border: 1px solid var(--line, rgba(30,38,43,.13)); border-radius: 6px;
    background: var(--paper, #fff);
}
.la__src:hover { border-color: var(--accent, #C2410C); }
.la__src b { font-size: .74rem; font-weight: 700; }
.la__src span {
    font: .62rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink-55, #6b7280);
}

.la__tools { display: flex; gap: .35rem; margin-top: .55rem; }
.la__tool {
    font-family: inherit; font-weight: 600; font-size: .62rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-55, #6b7280); background: none;
    border: 1px solid var(--line, rgba(30,38,43,.14));
    border-radius: 999px; padding: .28rem .5rem; cursor: pointer;
}
.la__tool:hover { color: var(--accent, #C2410C); border-color: var(--accent, #C2410C); }

.la__foot {
    margin-top: .5rem !important; padding-top: .45rem;
    border-top: 1px solid var(--line-soft, rgba(30,38,43,.08));
    font-size: .66rem; line-height: 1.55; color: var(--ink-55, #6b7280);
}

.la__seedh, .la__nexth {
    display: block; margin: .5rem 0 .35rem;
    font-size: .6rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-55, #6b7280);
}
.la__seeds, .la__next { display: flex; flex-wrap: wrap; gap: .3rem; }
.la__next { margin-top: .55rem; }
.la__seed {
    font-family: inherit; font-weight: 500; font-size: .72rem; line-height: 1.35; text-align: left;
    color: var(--ink-77, #374151); background: var(--paper, #fff);
    border: 1px solid var(--line, rgba(30,38,43,.14));
    border-radius: 999px; padding: .3rem .6rem; cursor: pointer;
}
.la__seed:hover { border-color: var(--accent, #C2410C); color: var(--accent, #C2410C); }

/* ---------------------------------------------------------------------- the bar */
.la__bar {
    flex: 0 0 auto; display: flex; gap: .4rem; padding: .6rem;
    border-top: 1px solid var(--line, rgba(30,38,43,.12));
    background: var(--paper, #fff);
}
.la__q {
    flex: 1 1 auto; min-width: 0;
    /* SIXTEEN PIXELS. Under it, iOS Safari zooms the page on focus and carries
       the panel off the screen — the estate's own rule; see the note in site.css.

       AND IT IS FOUR DECLARATIONS, NOT THE SHORTHAND, because the shorthand did
       not work. `font: 400 16px/1.3 inherit` looks reasonable and is INVALID:
       inside the font shorthand the family slot must be a real family, and a
       CSS-wide keyword there is only legal as the WHOLE value. The parser threw
       the entire declaration away — measured, this input computed to 13.33px in
       Arial, not 16px in the house face — so the rule the comment above is
       about had never once applied on any of the eighty-four properties that
       ship this file, and every assistant panel on the estate zoomed iOS on
       focus. `font: inherit` alone is fine and is still used as the button
       reset; it is only the mixed form that is a trap. */
    font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--ink, #1E262B);
    background: var(--tint, #FAFAF8);
    border: 1px solid var(--line, rgba(30,38,43,.16));
    border-radius: 8px; padding: .5rem .6rem;
}
.la__q:focus { outline: 2px solid var(--accent, #C2410C); outline-offset: -1px; }
.la__go {
    flex: 0 0 auto; width: 36px; border-radius: 8px; cursor: pointer;
    background: var(--ink, #1E262B); color: var(--paper, #fff);
    border: 0; font-size: 1rem; line-height: 1;
}
.la__go:hover { background: var(--accent, #C2410C); }

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

/* THE TOUR — a numbered walk that fills in on its own. The stops are a list
   rather than a paragraph so the reader can see how far through it is. */
.la__tour .la__stops { list-style: decimal; margin: .5rem 0 .3rem; padding-left: 1.4rem;
                       display: grid; gap: .3rem; }
.la__stop { font-size: .86rem; line-height: 1.45; }
.la__stop a { font-weight: 600; }
.la__stop span { color: var(--ink-55, #666); }
.la__tstop { margin-top: .2rem; }

/* A CHAPTER HEADS THE ROOMS UNDER IT and is not one of them — no number, no
   link, set apart so the long road reads as a grouped walk rather than a
   longer list. */
.la__chapter { list-style: none; margin-left: -1.4rem; margin-top: .5rem;
               font-size: .84rem; line-height: 1.45; }
.la__chapter:first-child { margin-top: 0; }
.la__chapter b { display: block; font-size: .64rem; font-weight: 700;
                 letter-spacing: .13em; text-transform: uppercase;
                 color: var(--accent, #C2410C); }
.la__chapter span { color: var(--ink-55, #666); }