.dately-views { flex-wrap:wrap; }
.dately-views button { flex:1 1 200px; }
.dately-email { border:1px solid #49415e;background:var(--panel); }
.dately-planning>.dately-email { margin-top:30px;border-inline:0;border-bottom:0;scroll-margin-top:16px; }
.email-jump { display:inline-block;margin-top:18px;color:var(--cyan);font:11px/1.8 var(--mono);text-decoration:underline;text-underline-offset:5px; }
.email-demo-steps { display:flex;gap:12px 25px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0;color:var(--muted);font:11px/1.8 var(--sans); }
.email-demo-steps b { display:inline-grid;place-items:center;width:25px;height:25px;margin-right:8px;border:1px solid var(--line);color:var(--purple);font:9px var(--mono); }
.email-demo-steps [aria-current=step] { color:var(--text); }
.email-demo-steps [aria-current=step] b,.email-demo-steps .is-complete b { color:var(--cyan);border-color:var(--cyan);background:rgba(169,248,226,.05); }
.email-demo-actions { display:flex;align-items:center;flex-wrap:wrap;gap:10px; }
.email-run { display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 19px;border:1px solid var(--cyan);background:var(--cyan);color:#152023;font:500 14px/1.5 var(--sans); }
.email-run:hover { background:#d3ffef; }
.email-run:disabled { opacity:.65;cursor:wait; }
.email-demo-actions .finance-export:disabled { opacity:.4;cursor:default; }
.email-before { border:1px dashed #514961;padding:24px;background:rgba(188,173,255,.025); }
.email-before>span { color:var(--purple);font:9px/1.8 var(--mono);letter-spacing:.05em; }
.email-before h3 { margin:12px 0;color:var(--text);font:500 21px/1.45 var(--sans);letter-spacing:-.025em; }
.email-before p { margin:0;color:var(--muted);font:13px/1.9 var(--sans); }
.email-body mark.is-current { outline:1px solid currentColor;outline-offset:2px; }
.dately-email[data-phase=revealing] .email-date-card:last-child { animation:email-result-appear .35s ease-out both; }
@keyframes email-result-appear { from { opacity:0;transform:translateY(7px); } to { opacity:1;transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .dately-email[data-phase=revealing] .email-date-card:last-child { animation:none; } }
@media(max-width:560px) { .email-run { width:100%;text-align:left;font-size:13px; }.email-demo-steps { display:grid;gap:10px;font-size:12px; }.email-before { padding:20px; } }
#dately-email-connection { color:var(--muted); }
#dately-email-connection[data-state=online] { color:var(--cyan); }
#dately-email-connection[data-state=offline] { color:#efbc9e; }
.email-demo-grid { display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); }
.email-source-panel,.email-output-panel { padding:28px;min-width:0; }
.email-source-panel { border-right:1px solid var(--line); }
.email-output-panel { background:#171625;scroll-margin-top:16px; }
.email-message { border:1px solid #514961;background:#151421; }
.email-message-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 19px;border-bottom:1px solid var(--line);background:#222033;color:var(--muted);font:8px/1.7 var(--mono);letter-spacing:.05em; }
.email-message-toolbar>span:first-child { display:flex;align-items:center;gap:9px;color:var(--purple); }
.email-message-toolbar svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5; }
.email-message h3 { margin:0;padding:23px 23px 18px;font:500 25px/1.35 var(--sans);letter-spacing:-.035em; }
.email-sender { display:flex;align-items:center;gap:12px;padding:0 23px 20px; }
.email-avatar { display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:50%;background:var(--purple);color:#171625;font:500 12px var(--sans); }
.email-sender strong { display:block;font:500 14px/1.7 var(--sans); }
.email-sender div>span { display:block;color:var(--muted);font:10px/1.7 var(--sans); }
.email-received { margin-left:auto;text-align:right;color:var(--muted);font:8px/1.8 var(--mono); }
.email-envelope { margin:0 23px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.email-envelope>div { display:grid;grid-template-columns:47px minmax(0,1fr);gap:10px;padding:4px 0; }
.email-envelope dt { color:var(--muted);font:11px/1.8 var(--sans); }
.email-envelope dd { margin:0;color:var(--text);font:11px/1.8 var(--sans);overflow-wrap:anywhere; }
.email-envelope dd span { color:var(--muted); }
.email-body { padding:25px 23px 19px;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/2 var(--sans);color:var(--text); }
.email-body mark { padding:2px 3px;border-bottom:1px solid var(--cyan);background:rgba(169,248,226,.12);color:var(--cyan);box-decoration-break:clone;-webkit-box-decoration-break:clone; }
.email-body mark.needs-review { border-color:#efbc9e;background:rgba(239,188,158,.1);color:#efbc9e; }
.email-signature { margin:0 23px 25px;padding-left:13px;border-left:2px solid var(--purple); }
.email-signature strong { display:block;color:var(--text);font:500 13px/1.8 var(--sans); }
.email-signature span { display:block;color:var(--muted);font:11px/1.8 var(--sans); }
.email-highlight-key { display:flex;flex-wrap:wrap;gap:12px;padding:14px 23px;border-top:1px solid var(--line);color:var(--muted);font:9px/1.8 var(--mono); }
.email-highlight-key>span { display:flex;align-items:center;gap:6px; }
.email-highlight-key i { width:6px;height:6px;background:var(--cyan); }
.email-highlight-key i.needs-review { background:#efbc9e; }
.email-editor { margin-top:18px;border:1px solid var(--line); }
.email-editor summary { display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;padding:15px 18px;color:var(--purple);font:11px/1.7 var(--mono); }
.email-editor summary::-webkit-details-marker { display:none; }
.email-editor form { padding:0 18px 18px; }
.email-editor label { display:block;margin-bottom:9px;color:var(--muted);font:10px/1.8 var(--mono); }
.email-editor textarea { width:100%;resize:vertical;min-height:190px;padding:14px;border:1px solid #575069;border-radius:0;background:#11101e;color:var(--text);font:12px/1.9 var(--sans); }
.email-editor p { margin:10px 0 15px;color:var(--muted);font:10px/1.8 var(--sans); }
.email-result-summary { margin:0 0 22px;color:var(--text);font:500 23px/1.4 var(--sans);letter-spacing:-.025em; }
.email-result-summary.is-error { color:#efbc9e; }
.email-reference { padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px; }
.email-reference>span { color:var(--muted);font:8px/1.8 var(--mono);letter-spacing:.04em; }
.email-reference strong { display:block;margin-top:5px;color:var(--cyan);font:11px/1.8 var(--mono);font-weight:400; }
.email-reference p { margin:7px 0 0;color:var(--muted);font:10px/1.8 var(--sans); }
.email-date-cards { display:grid;gap:12px; }
.email-date-card { padding:16px 18px;border:1px solid #49415e;background:#1c1a2c; }
.email-date-card.is-review { border-color:#7a5c5a; }
.email-date-card>span { display:block;color:var(--cyan);font:8px/1.8 var(--mono);letter-spacing:.05em; }
.email-date-card.is-review>span { color:#efbc9e; }
.email-date-card h3 { margin:6px 0 11px;font:500 17px/1.5 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere; }
.email-date-card ul { list-style:none;padding:0;margin:0; }
.email-date-card li { padding:4px 0;color:var(--cyan);font:10px/1.8 var(--mono); }
.email-date-card p { margin:10px 0 0;color:var(--muted);font:11px/1.8 var(--sans); }
.email-calendar-label { margin:24px 0 12px;color:var(--purple);font:9px/1.8 var(--mono); }
#dately-email-runtime { margin:15px 0 0; }
@media(max-width:1050px) { .email-demo-grid { grid-template-columns:1fr; }.email-source-panel { border-right:0;border-bottom:1px solid var(--line); }.email-message { max-width:720px; } }
@media(max-width:560px) { .dately-views button { flex-basis:100%;min-height:42px; }.email-source-panel,.email-output-panel { padding:20px 16px; }.email-message h3 { padding:19px 16px 16px;font-size:23px; }.email-sender { padding:0 16px 18px;gap:9px; }.email-received { display:none; }.email-envelope { margin-inline:16px; }.email-envelope>div { grid-template-columns:37px minmax(0,1fr);gap:7px; }.email-envelope dd span { display:block; }.email-body { padding:22px 16px 18px;font-size:13px; }.email-signature { margin-inline:16px; }.email-message-toolbar,.email-highlight-key { padding-inline:16px; }.email-message-toolbar { font-size:7px; }.email-date-card { padding:15px; }.email-date-card li { font-size:9px; }.email-result-summary { font-size:22px; } }