/* dial (bean 4360c2): a reading view for dialogues, phone first.
   Shared colours (--fg, --bg, --bar …) and light/dark come from the kit's theme.css. */
:root {
    --es: light-dark(#fff6e8, #2b2418); --en: light-dark(#eef6f5, #15262a);
    --easy: #3c8d5a; --exam: #2f6ea3; --hard: #9b4a2c;
}
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 system-ui, sans-serif; }
header { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; background: var(--bar); color: var(--bar-fg); }
header a { color: var(--bar-fg); text-decoration: none; }
header .site { font-weight: 700; font-size: 1.15rem; margin-right: auto; }
header .signout { margin: 0; }
header .signout button { background: none; color: var(--bar-fg); border: 1px solid currentColor; border-radius: .3rem; padding: .15rem .6rem; font: inherit; font-size: .9rem; cursor: pointer; }
main { max-width: 46rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; margin: .2rem 0 .4rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
form label { display: block; margin: .6rem 0; }
form input { display: block; width: 100%; padding: .5rem; font: inherit; }
main form button { margin-top: .6rem; padding: .5rem 1.2rem; font: inherit; background: var(--accent); color: #fff; border: 0; border-radius: 6px; }
.error { color: var(--danger); }
.list { list-style: none; padding: 0; margin: 0; }
.list li a { display: flex; align-items: baseline; gap: .6rem; padding: .7rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.list .meta { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.level { font-size: .75rem; text-transform: uppercase; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; color: #fff; min-width: 3.2rem; text-align: center; }
.level-easy { background: var(--easy); } .level-exam { background: var(--exam); } .level-hard { background: var(--hard); }
.back { margin: 0 0 .5rem; font-size: .9rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.tags span { font-size: .8rem; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: .1rem .45rem; }
.tags .draft { background: var(--warn); }
.scenario, .note { color: var(--muted); font-style: italic; }
.segments { list-style: none; padding: 0; counter-reset: seg; }
.seg { counter-increment: seg; margin: .7rem 0; padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--line); }
.seg.lang-es { background: var(--es); } .seg.lang-en { background: var(--en); }
.seg .who { margin: 0; font-size: .85rem; font-weight: 600; color: var(--muted); }
.seg .who::before { content: counter(seg) ". "; }
.seg .lang { text-transform: uppercase; font-size: .7rem; border: 1px solid var(--muted); border-radius: 3px; padding: 0 .25rem; }
.seg .count { font-weight: 400; float: right; }
.seg .text { margin: .3rem 0; }
details summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
details p { margin: .3rem 0 0; color: var(--muted); }