.narrator{--narrator-line: 21px;box-sizing:border-box;height:117px;overflow:hidden;padding:10px 14px;display:grid;grid-template-rows:24px calc(2 * var(--narrator-line)) var(--narrator-line);gap:5px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-elev);box-shadow:var(--shadow-soft);font-size:14px;line-height:var(--narrator-line);color:var(--fg);contain:layout paint}.narrator:empty{background:color-mix(in srgb,var(--bg-elev) 70%,transparent)}.narrator-meta{display:flex;align-items:center;gap:10px;min-width:0;height:24px}.narrator-chip{flex:0 0 auto;font-size:14px;letter-spacing:.02em;padding:2px 10px;line-height:18px}.narrator-office{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-weight:600}.narrator-dots{flex:0 0 auto;display:flex;align-items:center;gap:5px;visibility:hidden}.narrator-dots.is-on{visibility:visible}.narrator-dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--muted) 55%,transparent);background:transparent;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.narrator-dot.is-done{background:var(--brand-primary-fill);border-color:var(--brand-primary-fill)}.narrator-dot.is-now{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 28%,transparent)}.narrator-dot.is-hidden{display:none}.narrator-what,.narrator-now{margin:0;min-width:0;overflow:hidden}.narrator-what{font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.narrator-now{color:var(--muted);white-space:nowrap;text-overflow:ellipsis}.narrator[data-mode=story] .narrator-now,.narrator[data-mode=done] .narrator-now{color:var(--fg)}.narrator[data-mode=done] .narrator-now:before{content:"✓ ";color:var(--ok)}@media (min-width: 601px){.narrator-compact{height:70px;grid-template-rows:24px var(--narrator-line);grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px}.narrator-compact .narrator-meta{display:contents}.narrator-compact .narrator-office{display:none}.narrator-compact .narrator-chip{grid-row:1;grid-column:1;align-self:center}.narrator-compact .narrator-what{grid-row:1;grid-column:2;align-self:center}.narrator-compact .narrator-dots{grid-row:1;grid-column:3;align-self:center}.narrator-compact .narrator-now{grid-row:2;grid-column:1 / -1}}@media (max-width: 600px){.narrator{height:164px;grid-template-rows:24px var(--narrator-line) calc(2 * var(--narrator-line)) calc(2 * var(--narrator-line))}.narrator-meta{flex-wrap:wrap;height:auto;align-content:start;row-gap:5px}.narrator-chip{padding-inline:8px}.narrator-dots{margin-left:auto}.narrator-office{flex:1 0 100%;order:3;height:var(--narrator-line)}.narrator-meta{grid-row:1 / 3}.narrator-now{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}}@media (prefers-reduced-motion: reduce){.narrator-dot{transition:none}}