/*
 * Speci-AI — the advisor's desk.
 *
 * Three panes: the subject and its conversations on the left, the conversation in the middle,
 * the evidence on the right. The centre reads like a ledger, not a chat app: every answer sits
 * under a mono label, figures use tabular numerals, and a number the validator could not find in
 * the data is hatched — the same --hatch the ratio grid uses for "not applicable".
 */
@layer spec.components {
    .guru-desk {
        display: grid;
        grid-template-columns: var(--rail-w) minmax(0, 1fr) 320px;
        gap: var(--sp-4);
        align-items: start;
    }

    @media (max-width: 1180px) {
        .guru-desk {
            grid-template-columns: var(--rail-w) minmax(0, 1fr);
        }

        .guru-evidence {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 820px) {
        .guru-desk {
            grid-template-columns: 1fr;
        }
    }

    .guru-rail,
    .guru-evidence {
        border: 1px solid var(--spec-line);
        background: var(--spec-surface);
        padding: var(--sp-3);
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        min-width: 0;
    }

    .guru-rail__title,
    .guru-evidence__title {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--spec-ink-soft);
        margin: 0;
    }

    .guru-rail__section,
    .guru-evidence__section {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
    }

    /* A flex gap alone reads as one undifferentiated wall of text; a rule between sections gives
       the eye a place to stop scanning one topic and start the next. */
    .guru-evidence__section + .guru-evidence__section {
        border-top: 1px solid var(--spec-line);
        padding-top: var(--sp-3);
    }

    .guru-evidence__toggle {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--spec-ink-soft);
        cursor: pointer;
        list-style: none;
    }

    .guru-evidence__toggle::-webkit-details-marker {
        display: none;
    }

    .guru-evidence__toggle::before {
        content: "▸ ";
    }

    details[open] > .guru-evidence__toggle::before {
        content: "▾ ";
    }

    .guru-evidence__toggle:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 2px;
    }

    .guru-conv-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .guru-conv {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--sp-2);
        border-left: 3px solid transparent;
        text-decoration: none;
        color: inherit;
        font-size: var(--text-xs);
        background: none;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid var(--color-divider);
        text-align: left;
        width: 100%;
        cursor: pointer;
        font-family: inherit;
    }

    .guru-conv:hover {
        background: var(--wash-ink-4);
    }

    .guru-conv:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -2px;
    }

    .guru-conv.is-current {
        border-left-color: var(--spec-accent);
        background: var(--spec-accent-tint);
    }

    .guru-conv__meta {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        color: var(--spec-ink-soft);
        font-variant-numeric: tabular-nums;
        display: flex;
        gap: var(--sp-2);
    }

    .guru-chat {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--spec-line);
        background: var(--spec-surface);
        min-height: 560px;
        max-height: calc(100vh - 200px);
        min-width: 0;
    }

    .guru-chat__head {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-2) var(--sp-4);
        border-bottom: 1px solid var(--spec-line);
        font-size: var(--text-xs);
    }

    .guru-chat__head-title {
        font-weight: var(--weight-medium);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Column-reverse keeps the newest message in view without a script: the thread grows
       upward, and the browser anchors the scroll position to the bottom edge. */
    .guru-thread {
        flex: 1 1 auto;
        overflow: auto;
        display: flex;
        flex-direction: column-reverse;
        gap: var(--sp-4);
        padding: var(--sp-4);
    }

    .guru-msg {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: var(--sp-3);
    }

    .guru-msg__who {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        color: var(--spec-ink-soft);
        padding-top: 3px;
    }

    .guru-msg--user .guru-msg__who {
        color: var(--spec-accent-ink);
    }

    .guru-msg__body {
        border-left: 2px solid var(--spec-line);
        padding-left: var(--sp-3);
        min-width: 0;
    }

    .guru-msg--user .guru-msg__body {
        border-left-color: var(--spec-accent);
    }

    .guru-msg--opening .guru-msg__body {
        border-left-style: double;
        border-left-width: 3px;
    }

    .guru-msg__text {
        overflow-wrap: anywhere;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
        font-variant-numeric: tabular-nums;
    }

    .guru-msg__text p {
        margin: 0 0 var(--sp-2);
    }

    .guru-msg__text p:last-child {
        margin-bottom: 0;
    }

    .guru-msg__text h2,
    .guru-msg__text h3 {
        font-family: var(--font-ui);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        margin: var(--sp-3) 0 var(--sp-1);
    }

    .guru-msg__text h2:first-child,
    .guru-msg__text h3:first-child {
        margin-top: 0;
    }

    .guru-msg__text h2 {
        font-size: var(--text-md);
    }

    .guru-msg__text h3 {
        font-size: var(--text-base);
    }

    .guru-msg__text ul {
        margin: 0 0 var(--sp-2);
        padding-left: 1.2em;
    }

    .guru-msg__text li {
        margin-bottom: 2px;
    }

    .guru-msg__text strong {
        font-weight: var(--weight-semibold);
    }

    .guru-unverified {
        background: var(--hatch);
        text-decoration: underline dotted var(--warn);
        text-underline-offset: 3px;
        color: inherit;
    }

    .guru-msg__footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        align-items: center;
        margin-top: var(--sp-2);
    }

    .guru-note-list--live li {
        display: flex;
        gap: var(--sp-2);
        align-items: baseline;
    }

    .guru-note-list--live li > span:first-child {
        flex: 1;
    }

    .guru-note-input {
        width: 100%;
        font: inherit;
        font-size: var(--text-sm);
        border: 1px solid var(--spec-line);
        background: var(--spec-surface);
        color: inherit;
        padding: var(--sp-1) var(--sp-2);
        resize: vertical;
        margin-bottom: var(--sp-2);
    }

    .guru-note-input:focus-visible {
        outline: 2px solid var(--spec-accent);
        outline-offset: 1px;
    }

    .guru-msg__downloads {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        align-items: center;
        margin-top: var(--sp-2);
        padding-top: var(--sp-2);
        border-top: 1px solid var(--spec-line);
    }

    .guru-chip {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        border: 1px solid var(--spec-line);
        padding: 1px 6px;
        color: var(--spec-ink-soft);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Text sits on the BASE tone (~0.50 lightness), never the -t tint (~0.95, built for fills) —
       the tint used as text color is why these read as near-invisible on white. */
    .guru-chip--error {
        border-color: var(--stop-b);
        background: var(--stop-t);
        color: var(--stop);
    }

    .guru-chip--ok {
        border-color: var(--ok-b);
        background: var(--ok-t);
        color: var(--ok);
    }

    .guru-chip--warn {
        border-color: var(--warn-b);
        background: var(--warn-t);
        color: var(--warn);
    }

    .guru-composer__price .guru-chip {
        margin-left: var(--sp-2);
    }

    .guru-linkbtn {
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        font-size: var(--text-2xs);
        color: var(--spec-accent-ink);
        text-decoration: underline;
        cursor: pointer;
        min-height: 24px;
    }

    .guru-linkbtn:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 2px;
    }

    .guru-numbers {
        margin-top: var(--sp-2);
        border-top: 1px dashed var(--spec-line);
        padding-top: var(--sp-2);
        font-size: var(--text-xs);
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
    }

    .guru-numbers pre {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        max-height: 240px;
        overflow: auto;
        background: var(--spec-canvas);
        padding: var(--sp-2);
        margin: 0;
        border: 1px solid var(--color-divider);
    }

    .guru-numbers details > summary {
        cursor: pointer;
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
    }

    .guru-kv {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 2px var(--sp-3);
        font-size: var(--text-xs);
        margin: 0;
    }

    .guru-kv dt {
        color: var(--spec-ink-soft);
    }

    .guru-kv dd {
        margin: 0;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

    .guru-kv--mono dd {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
    }

    .guru-provider-card {
        border: 1px solid var(--spec-line);
        padding: var(--sp-2) var(--sp-3);
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
    }

    .guru-provider-card__model {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
    }

    .guru-provider-card__usage {
        display: flex;
        gap: var(--sp-2);
        align-items: baseline;
        font-size: var(--text-2xs);
        color: var(--spec-ink-soft);
        font-variant-numeric: tabular-nums;
    }

    .guru-phase {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        font-size: var(--text-xs);
        color: var(--spec-ink-soft);
        min-height: var(--control-h);
    }

    /* pre-line, not a single clamped block: the provider's thinking arrives with its own line
       breaks and reads as a list of steps, not one run-on sentence. Scrolls once it outgrows the
       window instead of clipping mid-line. */
    .guru-thinking {
        font-size: var(--text-xs);
        color: var(--spec-ink-faint);
        font-style: italic;
        white-space: pre-line;
        max-height: 7.5em;
        overflow: auto;
        margin: var(--sp-1) 0;
    }

    .guru-composer {
        border-top: 1px solid var(--spec-line);
        padding: var(--sp-3) var(--sp-4);
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
    }

    /* Report mode changes what the send does, so the box itself carries the state: an accent edge
       and a tinted ground, visible before the operator reads a word of it. */
    .guru-composer.is-report {
        border-top-color: var(--spec-accent);
        border-top-width: 2px;
        background: var(--spec-accent-tint);
    }

    .guru-composer.is-report textarea {
        border-color: var(--spec-accent);
    }

    .guru-composer__label {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        color: var(--spec-ink-soft);
    }

    .guru-composer textarea {
        width: 100%;
        min-height: 72px;
        max-height: 240px;
        font: inherit;
        font-size: var(--text-sm);
        padding: var(--sp-2);
        border: 1px solid var(--spec-line-strong);
        background: var(--spec-field);
        color: var(--spec-ink);
        resize: vertical;
        border-radius: 0;
        /* Native auto-grow; browsers without support keep the manual resize handle above. */
        field-sizing: content;
    }

    .guru-composer textarea:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 1px;
    }

    .guru-composer textarea:disabled {
        background: var(--wash-ink-4);
        color: var(--spec-ink-soft);
    }

    .guru-composer__row {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        flex-wrap: wrap;
    }

    .guru-composer__hint {
        font-size: var(--text-2xs);
        color: var(--spec-ink-faint);
    }

    .guru-composer__count {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        color: var(--spec-ink-faint);
        font-variant-numeric: tabular-nums;
        margin-left: auto;
    }

    .guru-composer__count.is-near-limit {
        color: var(--warn);
    }

    /* The cursor is the only sign a streamed line is still live rather than finished mid-sentence. */
    .guru-msg__text--live::after {
        content: "▍";
        color: var(--spec-accent);
        animation: guru-caret 1s steps(1) infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .guru-msg__text--live::after {
            animation: none;
        }
    }

    @keyframes guru-caret {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
    }

    .guru-composer__price {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        margin-left: auto;
    }

    .guru-progress {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    .guru-progress li::before {
        content: "○ ";
        color: var(--spec-ink-faint);
    }

    .guru-progress li.is-done::before {
        content: "● ";
        color: var(--ok);
    }

    .guru-progress li.is-current::before {
        content: "◐ ";
        color: var(--spec-accent);
    }

    .guru-progress__ms {
        color: var(--spec-ink-faint);
        margin-left: var(--sp-2);
    }

    .guru-finding {
        border-left: 3px solid var(--tone, var(--spec-line));
        padding: var(--sp-2) var(--sp-2) var(--sp-2) 9px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        border-bottom: 1px solid var(--color-divider);
    }

    .guru-finding--stop {
        --tone: var(--stop);
    }

    .guru-finding--warn {
        --tone: var(--warn);
    }

    .guru-finding--ok {
        --tone: var(--ok);
    }

    .guru-finding__kicker {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        color: var(--spec-ink-soft);
    }

    .guru-finding__title {
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
    }

    .guru-finding__detail {
        font-size: var(--text-xs);
        color: var(--spec-ink-soft);
        font-variant-numeric: tabular-nums;
    }

    .guru-years {
        list-style: none;
        padding: 0;
        margin: 0;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .guru-years li {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-2);
    }

    .guru-years__flag {
        color: var(--stop-t);
    }

    .guru-note-list {
        margin: 0;
        padding-left: 1.1em;
        font-size: var(--text-xs);
        color: var(--spec-ink-soft);
    }

    .guru-afm {
        flex: 1 1 120px;
        min-width: 0;
        height: var(--control-h);
        font: inherit;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        padding: 0 var(--sp-2);
        border: 1px solid var(--spec-line-strong);
        background: var(--spec-field);
        color: var(--spec-ink);
        border-radius: 0;
    }

    .guru-afm:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 1px;
    }

    /* ——— bake-off ——— */
    .guru-bakeoff {
        max-height: none;
    }

    /* The rail carries four decisions here, not one: give it room and let it scroll on its own
       so the grid beside it never has to. */
    .guru-bakeoff-desk {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }

    .guru-bakeoff-desk > .guru-rail {
        max-height: calc(100vh - 180px);
        overflow: auto;
    }

    @media (max-width: 820px) {
        .guru-bakeoff-desk {
            grid-template-columns: 1fr;
        }

        .guru-bakeoff-desk > .guru-rail {
            max-height: none;
        }
    }

    .guru-bakeoff__totals td,
    .guru-bakeoff__totals th {
        background: var(--spec-accent-tint);
        border-bottom: 2px solid var(--spec-line-strong);
        vertical-align: top;
    }

    .guru-bakeoff__totals .guru-chip {
        font-weight: var(--weight-semibold);
        color: var(--spec-ink);
        background: var(--spec-surface);
    }

    .guru-bakeoff__models,
    .guru-bakeoff__questions {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .guru-bakeoff__model {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
    }

    .guru-bakeoff__model > :first-child {
        flex: 1;
        min-width: 0;
    }

    /* A provider without a key stays legible: the row is quieter, never invisible. */
    .guru-bakeoff__model.is-muted {
        color: var(--spec-ink-faint);
    }

    .guru-bakeoff__picker {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        padding-top: var(--sp-2);
        border-top: 1px solid var(--spec-line);
    }

    .guru-bakeoff__questions li {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-1);
    }

    .guru-bakeoff__questions li > :first-child {
        flex: 1;
        min-width: 0;
    }

    .guru-bakeoff__question-actions {
        display: flex;
        gap: var(--sp-3);
    }

    .guru-bakeoff__group {
        border: 1px solid var(--spec-line);
        padding: var(--sp-2);
    }

    .guru-bakeoff__group[open] {
        background: var(--spec-surface);
    }

    .guru-bakeoff__group-title {
        cursor: pointer;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--spec-ink);
    }

    .guru-bakeoff__company {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .guru-bakeoff__run {
        position: sticky;
        bottom: 0;
        background: var(--spec-surface);
        border-top: 1px solid var(--spec-line-strong);
        padding-top: var(--sp-2);
    }

    .guru-bakeoff__add-model {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
    }

    .guru-bakeoff__scroll {
        overflow-x: auto;
        padding: var(--sp-3);
    }

    .guru-bakeoff__table {
        border-collapse: collapse;
        width: 100%;
        min-width: 720px;
        font-size: var(--text-xs);
    }

    .guru-bakeoff__table th,
    .guru-bakeoff__table td {
        border: 1px solid var(--color-divider);
        padding: var(--sp-2);
        vertical-align: top;
        text-align: left;
    }

    /* The model header stays visible while the grid scrolls: thirty rows of chips are unreadable
       once the column names are gone. */
    .guru-bakeoff__table th {
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        background: var(--spec-canvas);
        color: var(--spec-ink);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .guru-bakeoff__totals th,
    .guru-bakeoff__totals td {
        position: sticky;
        top: 2.2rem;
        z-index: 1;
    }

    .guru-bakeoff__table tbody tr:nth-child(even) td {
        background: var(--wash-ink-4);
    }

    .guru-bakeoff__table tbody tr:hover td {
        background: var(--spec-accent-tint);
    }

    .guru-bakeoff__question {
        width: 220px;
        position: sticky;
        left: 0;
        background: var(--spec-surface);
        z-index: 2;
        border-right: 2px solid var(--spec-line-strong);
    }

    .guru-bakeoff__cell {
        min-width: 260px;
    }

    .guru-bakeoff__summary {
        cursor: pointer;
        font-size: var(--text-xs);
        margin: var(--sp-2) 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        .guru-msg {
            animation: guru-in var(--dur-fast) var(--ease-standard);
        }

        @keyframes guru-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }
}