/* An email conversation, not a dashboard. The chronology is the visual structure. */
.mail-demo{margin:0 0 88px;max-width:980px}
.mail-demo-heading{margin-bottom:28px}
.mail-demo-heading h3{font-size:var(--fs-h3);letter-spacing:normal}
.mail-demo-heading p{color:var(--faint);font-size:16px;margin-top:8px;max-width:68ch}
.mail-demo button{font:inherit;font-size:15px;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer;min-height:44px;padding:8px 12px;border-radius:var(--radius-control)}
.mail-demo button:disabled{color:var(--faint);opacity:.55;cursor:default}
.mail-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.mail-view-controls{display:flex;gap:16px}
.mail-view-controls button{padding:8px 0;border-radius:0;border-bottom:2px solid transparent}
.mail-view-controls button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--gold)}
.mail-playback{display:flex;align-items:center;gap:6px}
.mail-playback .mail-play{background:var(--gold);color:var(--on-gold);min-width:112px}
.mail-window{background:var(--surface);border-radius:var(--radius);overflow:hidden}
.mail-subject{display:flex;align-items:center;gap:14px;padding:24px 28px;border-bottom:1px solid var(--line)}
.mail-subject>svg{color:var(--gold);flex:none}
.mail-subject h4{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:normal}
.mail-subject p{font-size:14px;color:var(--faint);margin-top:5px}
.mail-scroll{height:auto;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--faint) var(--surface);scrollbar-width:thin;padding:0 28px}
.mail-demo[data-ready] .mail-scroll{height:470px}
.mail-message{padding:0;border-bottom:1px solid var(--line);margin:0}
.mail-message:last-child{border-bottom:0}
.mail-message summary{display:grid;grid-template-columns:120px minmax(0,1fr) 66px 16px;align-items:center;gap:14px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font-size:15px}
.mail-message summary::-webkit-details-marker{display:none}
.mail-sender{font-weight:600;color:var(--text)}
.mail-snippet{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.mail-message time{font-size:13px;text-align:right;color:var(--faint);white-space:nowrap}
.mail-chevron{color:var(--faint);transition:transform 150ms ease}
.mail-message[open] .mail-chevron{transform:rotate(180deg)}
.mail-message[open] .mail-snippet{visibility:hidden}
.mail-message-content{padding:0 0 28px}
.mail-fields{margin:0 0 22px;font-size:14px;line-height:1.65}
.mail-fields>div{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px}
.mail-fields dt{color:var(--faint)}
.mail-fields dd{margin:0;color:var(--muted);overflow-wrap:anywhere}
.mail-fields .mail-cc dt,.mail-fields .mail-bcc dt{color:var(--gold);font-weight:600}
.mail-fields .mail-cc dd,.mail-fields .mail-bcc dd{color:var(--text)}
.mail-body{font-size:17px;line-height:1.65;max-width:66ch;color:var(--text)}
.mail-body p+p{margin-top:15px}
.mail-delivery{font-size:13px;color:var(--gold);margin:0 0 18px}
.mail-attachment{font-size:14px;margin-top:24px;color:var(--muted)}
.mail-attachment span{color:var(--faint)}
.mail-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px 12px 28px;border-top:1px solid var(--line)}
.mail-footer>span{font-size:14px;color:var(--faint)}
.mail-footer>div{display:flex;gap:0;flex-wrap:wrap}
.mail-caption{margin-top:20px;min-height:3.4em;max-width:80ch;font-size:17px;color:var(--text)}
.mail-privacy{margin-top:12px;font-size:14px;line-height:1.65;color:var(--faint);max-width:85ch}
.mail-demo [hidden]{display:none!important}
.mail-demo .mail-arriving{animation:mail-arrive 240ms var(--ease-out) both}
@keyframes mail-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){.mail-demo button:not(:disabled):hover{color:var(--text)}.mail-demo .mail-playback .mail-play:hover{background:var(--gold-hover);color:var(--on-gold)}.mail-message summary:hover .mail-sender{color:var(--gold)}}
@media(max-width:600px){
 .mail-demo{margin-bottom:64px}
 .mail-controls{gap:8px}
 .mail-playback{width:100%;justify-content:flex-start}
 .mail-subject{padding:20px 16px;align-items:flex-start}
 .mail-subject h4{font-size:19px}
 .mail-scroll{padding:0 16px}
 .mail-demo[data-ready] .mail-scroll{height:440px}
 .mail-message summary{grid-template-columns:minmax(0,1fr) 60px 16px;gap:8px;padding:14px 0;min-height:60px}
 .mail-snippet{grid-column:1/-1;grid-row:2;font-size:14px}
 .mail-message time{grid-column:2;grid-row:1}
 .mail-chevron{grid-column:3;grid-row:1}
 .mail-message[open] .mail-snippet{display:none}
 .mail-fields{font-size:13px}
 .mail-body{font-size:16px}
 .mail-footer{padding:10px 12px;flex-wrap:wrap}
 .mail-footer>span{padding-left:4px}
 .mail-footer button{padding-left:8px;padding-right:8px;font-size:14px}
 .mail-caption{min-height:5em;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.mail-demo .mail-arriving{animation:none}.mail-chevron{transition:none}}