/* Ted, everywhere he speaks (11-Oct-2026; mockup docs/mockups/discovery/decide-screens.html, approved): the answer
   cards ted-answer.js builds, the two Ask Ted drawers (Discovery's #askTedDrawer and the shared #tdxAskDrawer) and the
   chat panel's parts. Linked once by _Layout.cshtml after site.css. Prefix tdx-ted-. Built to DESIGN.md: green only as
   a fill with charcoal on top or as an edge, never a letterform; the question is the dark bubble, the answer a card. */

/* ── A conversation ─────────────────────────────────────────────────────────────────────────────────────────── */
.tdx-ted-conv { display: flex; flex-direction: column; gap: 12px; }

.tdx-ted-q {
    align-self: flex-end;
    max-width: 85%;
    background: var(--mv-ink);
    color: #FFFFFF;
    border-radius: 14px 14px 4px 14px;
    padding: 9px 13px;
    font-size: .9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.tdx-ted-q-t { white-space: pre-wrap; }
.tdx-ted-q small { display: block; text-align: right; color: rgba(255, 255, 255, .6); font-size: .7rem; margin-top: 3px; }

.tdx-ted-a {
    align-self: stretch;
    border: 1px solid var(--mv-silver);
    border-radius: 14px;
    padding: 14px 16px;
    background: #FFFFFF;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--mv-ink);
    box-shadow: var(--ttp-elev-1);
    overflow-wrap: anywhere;
}
.tdx-ted-who { display: flex; gap: 8px; align-items: center; font-size: .76rem; font-weight: 700; color: var(--mv-graphite); margin-bottom: 6px; }
.tdx-ted-who small { margin-left: auto; font-weight: 500; color: var(--mv-iron); font-size: .7rem; }
.tdx-ted-av {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mv-blue);
    color: var(--mv-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
}

/* The laid-out answer: headings, paragraphs, lists, tables, code */
.tdx-ted-md > :first-child { margin-top: 0; }
.tdx-ted-md > :last-child { margin-bottom: 0; }
.tdx-ted-md h5, .tdx-ted-md h6 { font-size: .92rem; font-weight: 700; margin: 12px 0 4px; color: var(--mv-ink); line-height: 1.35; }
.tdx-ted-md h6 { font-size: .86rem; }
.tdx-ted-md p { margin: 0 0 8px; }
.tdx-ted-md ul, .tdx-ted-md ol { margin: 0 0 8px; padding-left: 20px; }
.tdx-ted-md li { margin: 2px 0; }
.tdx-ted-md strong { font-weight: 700; }
.tdx-ted-md code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .82em;
    background: var(--mv-fog);
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--mv-ink);
}
.tdx-ted-md pre {
    margin: 6px 0 10px;
    padding: 10px 12px;
    background: var(--mv-snow);
    border: 1px solid var(--mv-silver);
    border-radius: 10px;
    overflow-x: auto;
    font-size: .8rem;
}
.tdx-ted-md pre code { background: none; padding: 0; font-size: inherit; }
.tdx-ted-md blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 2px solid var(--mv-silver); color: var(--mv-graphite); }
.tdx-ted-md hr { margin: 10px 0; border: 0; border-top: 1px dashed var(--mv-silver); opacity: 1; }
.tdx-ted-md a { color: var(--mv-ink); text-decoration: underline; text-decoration-color: var(--mv-blue); text-underline-offset: 3px; }
.tdx-ted-tw { overflow-x: auto; margin: 6px 0 10px; border: 1px solid var(--mv-silver); border-radius: 10px; }
.tdx-ted-tw table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tdx-ted-tw th {
    text-align: left;
    padding: 7px 10px;
    background: var(--mv-snow);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mv-graphite);
    border-bottom: 1px solid var(--mv-silver);
    white-space: nowrap;
}
.tdx-ted-tw td { padding: 7px 10px; border-top: 1px solid var(--mv-fog); vertical-align: top; }
.tdx-ted-tw tr:first-child td { border-top: 0; }

/* Ted is writing */
.tdx-ted-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.tdx-ted-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--mv-mist); animation: tdx-ted-dot 1.3s ease infinite; }
.tdx-ted-dots span:nth-child(2) { animation-delay: .15s; }
.tdx-ted-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes tdx-ted-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tdx-ted-dots span { animation: none; } }

/* A line Ted shows before there is a conversation */
.tdx-ted-hint { text-align: center; color: var(--mv-graphite); font-size: .86rem; padding: 18px 8px; }

/* Quick questions: green-edged pills */
.tdx-ted-prompts { display: flex; flex-wrap: wrap; gap: 6px; }
.tdx-ted-prompts .btn {
    border: 1.5px solid var(--mv-blue);
    background: #FFFFFF;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mv-ink);
    line-height: 1.3;
}
.tdx-ted-prompts .btn:hover, .tdx-ted-prompts .btn:focus-visible { background: var(--mv-blue-lt); color: var(--mv-ink); border-color: var(--mv-blue); }

/* ── The Ask Ted drawers (both): the house popup's head, what Ted reads, the conversation, one composer ─────── */
/* Doubled class: results-grid.css (linked by the page, after this sheet) gives the shared drawer a grey fill. */
.offcanvas.tdx-ted-drawer.tdx-ted-drawer { display: flex; flex-direction: column; background: var(--mv-white); }
.tdx-ted-dhead { display: flex; gap: 12px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--mv-silver); }
.tdx-ted-dhead .tdx-disc { flex: 0 0 auto; }
.tdx-ted-dhead-t { min-width: 0; flex: 1 1 auto; }
.tdx-ted-kick { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mv-iron); }
.tdx-ted-kick [data-ask-ted-artefact]:not(:empty)::before { content: " \00B7  "; }
.tdx-ted-dhead h5 { margin: 1px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--mv-ink); line-height: 1.3; overflow-wrap: anywhere; }
.tdx-ted-dhead .btn-close { flex: 0 0 auto; }
.tdx-ted-dbody { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.tdx-ted-reads {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 22px 0;
    padding: 10px 12px;
    border: 1px solid var(--mv-silver);
    border-radius: 12px;
    background: var(--mv-snow);
    font-size: .82rem;
    color: var(--mv-graphite);
    line-height: 1.5;
}
.tdx-ted-reads .bi { color: var(--mv-iron); flex: 0 0 auto; margin-top: 1px; }
.tdx-ted-reads b { color: var(--mv-ink); }
.tdx-ted-dbody > .tdx-ted-conv { flex: 1 1 auto; overflow-y: auto; padding: 14px 22px; min-height: 0; }
.tdx-ted-foot { border-top: 1px solid var(--mv-silver); padding: 12px 22px 14px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; }
.tdx-ted-compose { display: flex; gap: 8px; align-items: flex-end; }
.tdx-ted-compose textarea { flex: 1 1 auto; min-height: 64px; resize: vertical; border-radius: 12px; font-size: .9rem; }
.tdx-ted-note { color: var(--mv-iron); font-size: .74rem; }

/* ── Ted in the top bar: what he can see ────────────────────────────────────────────────────────────────────── */
.tdx-ted-sees { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--mv-fog); background: var(--mv-snow); flex-shrink: 0; }
.tdx-ted-sees:empty { display: none; }
.tdx-ted-sees .tdx-pill { font-size: .74rem; }

@media (max-width: 575.98px) {
    .tdx-ted-dhead, .tdx-ted-foot { padding-left: 16px; padding-right: 16px; }
    .tdx-ted-reads { margin-left: 16px; margin-right: 16px; }
    .tdx-ted-dbody > .tdx-ted-conv { padding: 12px 16px; }
    .tdx-ted-q { max-width: 92%; }
}