/* study-plan-card.css — Ask AI's live plan card (public/js/study/study-plan-card.js).
   2026-09-29.

   Colours come from the Ask AI tokens in study-deeptutor-glass.css (--dt-ink,
   --dt-muted, --dt-line, --dt-soft), which already carry their dark twins
   under html[data-theme="dark"] #view-deeptutor. So there is no dark block
   here and no orange anywhere: dark is the graphite ink. Nothing here moves
   and nothing is blue: while a reply thinks, the card's heading is the chat's
   own thinking row (pixel grid, words, timer, drawn by study-deeptutor.js),
   and a step at work is a still grey mark (James 2026-09-29: a blue spinner
   read as the usual thinking animation going missing). The fallbacks are
   the light values, for a card drawn outside #view-deeptutor.

   Phone width: the card is the bubble's width, a source's title shortens
   before its site does, and nothing sets a width of its own, so the iPhone
   app (html.khio-app) needs no rules of its own either. */

.kpc {
    --kpc-ink: var(--dt-ink, #191a1d);
    --kpc-muted: var(--dt-muted, #70747c);
    --kpc-line: var(--dt-line, rgba(22,24,28,.10));
    --kpc-soft: var(--dt-soft, #f1f2f3);
    --kpc-page: var(--dt-glass-bg-color, #f8f8f6);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
    border: 1px solid var(--kpc-line);
    border-radius: 12px;
    color: var(--kpc-ink);
    font: 400 13px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
}
.kpc *, .kpc *::before, .kpc *::after { box-sizing: border-box; }
.kpc svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Folded: one soft line, the way the answer's other tools read. */
details.kpc:not([open]) { border-color: transparent; background: var(--kpc-soft); }

/* ── The heading line ── */
.kpc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 12px;
    font-weight: 550;
}
details.kpc > summary.kpc-head { list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
details.kpc > summary.kpc-head::-webkit-details-marker { display: none; }
details.kpc > summary.kpc-head:focus-visible { outline: 2px solid var(--kpc-ink); outline-offset: -2px; border-radius: 12px; }
.kpc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpc-done-mark { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; color: var(--kpc-ink); }
.kpc-done-mark svg { width: 16px; height: 16px; }
.kpc-icons { display: inline-flex; flex: 0 0 auto; padding-left: 4px; }
.kpc-icons img {
    width: 16px;
    height: 16px;
    margin-left: -4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--kpc-page);
}
.kpc-chev { flex: 0 0 auto; width: 14px; height: 14px; color: var(--kpc-muted); transition: transform .15s ease; }
details.kpc[open] .kpc-chev { transform: rotate(90deg); }

/* ── The steps ── */
.kpc-steps { list-style: none; margin: 0; padding: 0 12px 8px; }
details.kpc[open] .kpc-steps { padding-top: 2px; }
.kpc-step { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.kpc-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: var(--kpc-ink);
}
.kpc-mark svg { width: 14px; height: 14px; }
.kpc-step.is-waiting .kpc-mark { border-radius: 50%; border: 1.5px solid var(--kpc-muted); opacity: .45; }
/* At work: the same ring, full strength, with a still grey dot in it. */
.kpc-step.is-working .kpc-mark {
    border-radius: 50%;
    border: 1.5px solid var(--kpc-muted);
    background: radial-gradient(circle, var(--kpc-muted) 0 2.5px, transparent 3px);
}
.kpc-step.is-skipped .kpc-mark { color: var(--kpc-muted); }
.kpc-step-text { display: flex; flex-direction: column; min-width: 0; }
.kpc-label { overflow-wrap: anywhere; }
.kpc-step.is-waiting .kpc-label,
.kpc-step.is-skipped .kpc-label { color: var(--kpc-muted); }
.kpc-step.is-working .kpc-label { font-weight: 550; }
.kpc-note { font-size: 12px; color: var(--kpc-muted); overflow-wrap: anywhere; }

/* ── The sources ── */
.kpc-sources { padding: 8px 12px 10px; border-top: 1px solid var(--kpc-line); }
.kpc-sub {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kpc-muted);
}
.kpc-src {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 -6px;
    padding: 5px 6px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
a.kpc-src:hover { background: var(--kpc-soft); }
a.kpc-src:focus-visible { outline: 2px solid var(--kpc-ink); outline-offset: -2px; }
.kpc-fav { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 4px; color: var(--kpc-muted); }
.kpc-src-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpc-chip {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--kpc-soft);
    color: var(--kpc-muted);
    font-size: 11.5px;
}

/* Read aloud, never shown: each step's status in words. */
.kpc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}