/* Website-only illustrative workspace and capacity example. */
#try,#impact { scroll-margin-top:90px; }
.capacity { border-block:1px solid #28384d; background:#101b2b; }
.capacity .head { max-width:800px; }
.workspace-example { color:#17283d; background:#f2f5f9; border:1px solid #c4ceda; border-radius:14px; overflow:hidden; text-align:left; }
.workspace-top { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#17283d; color:#fff; padding:18px 22px; }
.workspace-top strong { font-size:17px; }
.workspace-top span { font-size:12px; color:#d4deeb; }
.workspace-layout { display:grid; grid-template-columns:155px minmax(0,1fr); }
.workspace-nav { padding:22px 14px; background:#e6edf5; font-size:13px; line-height:2.5; }
.workspace-nav b { display:block; color:#b33b20; }
.workspace-nav .compose-label { display:block; padding:3px 12px; margin-bottom:14px; color:#fff; background:#b63a20; border-radius:6px; }
.workspace-main { min-width:0; padding:24px; }
.workspace-title { margin:0 0 8px; color:#17283d; font-size:22px; font-weight:750; }
.workspace-metrics { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.workspace-metrics span { padding:10px 14px; background:#fff; border:1px solid #ccd6e2; border-radius:7px; font-size:12px; }
.workspace-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 10px; }
.workspace-tabs button,.workspace-back { font:inherit; font-size:13px; padding:10px 14px; border-radius:6px; border:1px solid #7b8ca3; background:#fff; color:#17283d; cursor:pointer; }
.workspace-tabs button[aria-pressed=true] { background:#17283d; color:#fff; }
.workspace-example :focus-visible,.capacity :focus-visible { outline:3px solid #ff7658; outline-offset:3px; }
.workspace-coverage { color:#52627a; font-size:12px; line-height:1.6; margin-bottom:18px; }
.workspace-reader { display:grid; grid-template-columns:minmax(175px,.9fr) minmax(0,1.4fr); gap:18px; }
.workspace-queue { display:grid; align-content:start; gap:8px; }
.workspace-mail { display:block; width:100%; background:#fff; text-align:left; color:#17283d; border:1px solid #ccd6e2; border-radius:8px; padding:14px; font:inherit; cursor:pointer; }
.workspace-mail[aria-pressed=true] { border:2px solid #b63a20; padding:13px; }
.workspace-mail strong { display:block; font-size:13px; margin:7px 0; line-height:1.4; }
.workspace-mail small { display:block; color:#52627a; font-size:11px; line-height:1.6; }
.workspace-detail { min-width:0; padding:22px; background:#fff; border:1px solid #ccd6e2; border-radius:9px; font-size:14px; line-height:1.7; }
.workspace-subject { font-size:19px; font-weight:750; line-height:1.4; margin-bottom:10px; }
.workspace-meta { color:#52627a; font-size:12px; margin-bottom:18px; }
.workspace-detail details { border-block:1px solid #ccd6e2; padding:14px 0; margin-bottom:16px; }
.workspace-detail summary { cursor:pointer; color:#17283d; font-weight:700; }
.workspace-detail p { margin-top:10px; }
.workspace-tag { display:inline-block; background:#fce9df; color:#8b321d; padding:3px 8px; border-radius:5px; font-size:11px; margin:0 5px 10px 0; }
.workspace-task { border-left:3px solid #b63a20; padding-left:12px; margin-top:18px; color:#17283d; }
.workspace-back { display:none; margin-bottom:14px; }
.workspace-caption { color:#b5c3d6; font-size:14px; line-height:1.7; margin-top:18px; }
@media(max-width:760px) {
 .workspace-layout { grid-template-columns:1fr; }
 .workspace-nav { display:none; }
 .workspace-main { padding:16px; }
 .workspace-reader { grid-template-columns:1fr; }
 .workspace-top { padding:16px; flex-wrap:wrap; }
 .workspace-example[data-reading=true] .workspace-queue { display:none; }
 .workspace-example:not([data-reading=true]) .workspace-detail { display:none; }
 .workspace-back { display:inline-block; }
}
/* Revised local demo controls and compact comparison. */
.workspace-nav button{display:block;width:100%;margin-bottom:8px;padding:9px 8px;background:transparent;border:1px solid transparent;border-radius:6px;text-align:left;color:#17283d;cursor:pointer;font:inherit}
.workspace-nav button[aria-pressed=true]{background:#fff;border-color:#a6b6c9;font-weight:700}
.workspace-main button:not(.workspace-mail),.day-controls button{padding:10px 14px;margin:4px 6px 4px 0;border:1px solid #7b8ca3;border-radius:6px;background:#fff;color:#17283d;cursor:pointer;font:inherit;font-size:13px}
.workspace-cards{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.workspace-cards button{flex:1;min-width:140px;min-height:70px}
.workspace-feedback{margin-top:20px!important;padding:12px;border-radius:6px;background:#e1edf9;color:#17283d;font-size:13px}
.workspace-owner,.workspace-draft{display:block;margin:14px 0;font-size:13px;color:#17283d}
.workspace-owner select,.workspace-draft input,.workspace-draft textarea{display:block;width:100%;max-width:100%;margin-top:7px;padding:10px;border:1px solid #8a9bb1;border-radius:6px;background:white;color:#17283d;font:inherit}
.workspace-actions{margin-top:14px}.workspace-main .workspace-task{padding:14px;margin-top:14px;background:#fff}
#day.day-loop{height:auto;padding:40px 0}
#day.day-loop .stage{position:relative;height:auto;overflow:visible;display:block;padding-top:32px}
#day.day-loop .panes{align-items:start;padding-bottom:24px}
#day.day-loop .raw{height:330px}
#day.day-loop .smart{min-height:330px}
.day-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.day-controls span{color:#b5c3d6;font-size:13px}
@media(max-width:760px){.workspace-nav{display:flex;flex-wrap:wrap;gap:4px;padding:10px}.workspace-nav button{width:auto;flex:1 0 auto;font-size:12px}.workspace-layout{display:block}#day.day-loop .raw{height:260px}#day.day-loop .smart{min-height:0}.workspace-cards{display:grid;grid-template-columns:1fr}.workspace-cards button{min-height:55px}}

.workspace-main .workspace-tabs button[aria-pressed=true]{background:#17283d;color:#fff}