/* =============================================================================
   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: 600 .6rem/1 inherit; 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: 600 .62rem/1 inherit; 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: 500 .72rem/1.35 inherit; 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. */
    font: 400 16px/1.3 inherit; 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); }