/* Matches the hosted workspace's shell, column paint, cards and scrapbook paper.
   Reference: alshiauth 8788bebb shell.css and Tasks deedbea56 workspace styles. */
.feature-story{grid-template-columns:minmax(0,1fr);gap:36px;min-height:0}
.feature-intro{position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:center;padding:0}
.feature-intro h2{grid-row:1/3;margin:0}
.feature-intro .brush-link{justify-self:start;margin-top:18px}
.feature-stage.board-demo{--demo-bg:#f7f5ef;--demo-surface:#fffefb;--demo-ink:#26252c;--demo-muted:#615e69;--demo-line:#d9d5df;--demo-tint:16%;--demo-header-tint:25%;--demo-blue:#2464ca;--demo-amber:#996000;--demo-violet:#7942c2;--demo-green:#288044;position:relative;top:auto;max-width:none;width:100%;margin:0;border:1px solid transparent;background:linear-gradient(var(--demo-bg),var(--demo-bg)) padding-box,var(--brand-spectrum) border-box;color:var(--demo-ink);border-radius:0;box-shadow:0 12px 40px #2921370a;isolation:isolate;contain:paint;will-change:transform}
:root[data-theme=dark] .board-demo{--demo-bg:#101014;--demo-surface:#1c1b23;--demo-ink:#f6f3fa;--demo-muted:#b9b3c6;--demo-line:#403a4c;--demo-tint:19%;--demo-header-tint:32%;--demo-blue:#77aaff;--demo-amber:#efbb55;--demo-violet:#be96ff;--demo-green:#7ccc8e}
/* Keep the tall interactive surface opaque and independent of the atlas. The
   spectrum uses background layers, avoiding a full-surface masked overlay.
   One dedicated layer also keeps static card tiles together on Linux/Wayland. */
.board-demo{pointer-events:auto}
.board-demo.spectrum-edge::before{content:none}
.board-demo button{font-family:'Open Sans',Arial,sans-serif}
.board-demo .demo-chrome{padding:18px 24px;border-color:var(--demo-line);background:var(--demo-surface);font-size:12px}
.board-demo .demo-brand{font-size:16px}
.board-demo .demo-workspace{font-size:11px;color:var(--demo-muted)}
.board-demo .reset-demo{background:transparent;border:1px solid var(--demo-line);padding:8px 12px;font-size:11px;border-radius:0;min-height:40px}
.board-demo .demo-tabs{padding:0 24px;gap:24px;background:var(--demo-surface);border-color:var(--demo-line)}
.board-demo .demo-tabs button{padding:16px 0;font-size:12px;gap:8px;min-height:48px}
.board-demo .demo-panel{padding:28px;min-height:380px}
.board-demo .demo-heading{position:relative;padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--demo-line);align-items:center}
.board-demo #demo-board>.demo-heading:after{content:'';position:absolute;bottom:-3px;left:0;width:110px;height:5px;background:url('/assets/spectrum-brush.svg') center/100% 100%}
.board-demo .demo-heading h3{font-size:30px;font-weight:550;letter-spacing:-1px;margin:10px 0}
.board-demo .demo-heading p{font-size:12px;line-height:1.7;color:var(--demo-muted)}
.board-demo .demo-breadcrumb{font-size:10px!important;display:flex;gap:12px}
.board-demo .avatar-stack b{width:32px;height:32px;font-size:9px;border-color:var(--demo-bg)}
.board-demo .demo-hint{font-size:11px;color:var(--demo-muted);line-height:1.7;margin:12px 0 16px;max-width:none}
.demo-board-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:4px 2px 12px;scrollbar-width:thin}
.board-demo .board-columns{grid-template-columns:repeat(4,minmax(240px,1fr));gap:18px;min-width:1014px}
.board-demo .board-column{--lane:var(--demo-blue);border:1px solid var(--lane);border-top:4px solid var(--lane);border-radius:0;background:color-mix(in srgb,var(--lane) var(--demo-tint),var(--demo-bg));padding:12px;min-height:340px;transition:background .15s,outline-color .15s}
.board-demo [data-column="1"]{--lane:var(--demo-amber)}
.board-demo [data-column="2"]{--lane:var(--demo-violet)}
.board-demo [data-column="3"]{--lane:var(--demo-green)}
.board-demo .board-column h4{margin:-12px -12px 16px;padding:18px 14px;min-height:66px;border-bottom:1px solid var(--lane);background:color-mix(in srgb,var(--lane) var(--demo-header-tint),var(--demo-surface));font:650 13px 'Open Sans',Arial,sans-serif;gap:10px;white-space:nowrap}
.board-demo .board-column h4>span{padding:4px 8px;min-width:28px;text-align:center;border:1px solid var(--lane);background:var(--demo-surface);color:var(--demo-ink);font-size:11px}
.board-demo .column-dot{width:6px;height:6px;background:var(--lane)}
.board-demo .task-list{gap:12px;min-height:220px}
.board-demo .task-card{position:relative;padding:16px;background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:7px;box-shadow:0 12px 40px #2921370a;cursor:grab;overflow-wrap:anywhere}
.board-demo .task-tag{display:block;padding:2px 0 0 30px;min-height:28px;font-size:9px;letter-spacing:1px;color:var(--demo-muted)}
.board-demo .task-card h5{font-size:13px;font-weight:600;line-height:1.5;margin:9px 0;letter-spacing:0}
.board-demo .task-card>p{font-size:11px;color:var(--demo-muted);line-height:1.7;margin:0 0 12px}
.board-demo .task-footer{border-top:1px solid var(--demo-line);padding-top:10px;font:10px 'Open Sans',Arial,sans-serif;gap:8px;color:var(--demo-muted);flex-wrap:nowrap}
.board-demo .task-footer button{border:1px solid var(--demo-line);background:transparent;font-size:16px;min-width:36px;min-height:36px;border-radius:0}
.board-demo .demo-task-grab{position:absolute;top:9px;left:9px;width:36px;height:32px;padding:0;font-size:22px;background:transparent;color:var(--demo-muted);touch-action:none;cursor:grab;user-select:none}
.board-demo .drag-over{outline:2px solid var(--accent);outline-offset:2px}
.board-demo .dragging{opacity:.35}
.demo-empty{padding:22px 12px;border:1px dashed var(--lane);background:var(--demo-surface);font-size:11px;line-height:1.7;text-align:center;color:var(--demo-muted)}
.demo-scrapbook{margin-top:28px;padding-top:24px;border-top:1px solid var(--demo-line)}
#demo-notes .demo-scrapbook{margin:0;padding:0;border:0}
.demo-scrapbook-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.demo-scrapbook-heading h3{font-size:23px;font-weight:550;letter-spacing:-.7px;margin:0 0 8px}
.demo-scrapbook-heading p{font-size:12px;color:var(--demo-muted);line-height:1.7}
.demo-canvas-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:8px}
.demo-canvas{position:relative;min-width:1100px;height:340px;background-image:radial-gradient(color-mix(in srgb,var(--demo-muted) 25%,transparent) 1px,transparent 1px);background-size:20px 20px}
.demo-canvas-card{position:absolute;width:236px;height:240px;box-sizing:border-box;margin:0;isolation:isolate;user-select:none}
.demo-postit{display:flex;flex-direction:column;background:var(--note-paper);color:#332d25;border:0;border-radius:2px 2px 16px 2px;padding:40px 20px 18px;box-shadow:2px 8px 12px #24201c26;transform:rotate(-1.5deg)}
.demo-postit:nth-child(even){transform:rotate(1.5deg)}
.demo-postit h4{font-size:18px;line-height:1.3;letter-spacing:-.3px;margin:0 0 8px;font-weight:600}
.demo-postit p{font-size:13px;line-height:1.6;color:#51483c;margin:0 0 10px}
.demo-paper-footer{display:block;margin-top:auto;font-size:10px;line-height:1.5;color:#534c43}
.board-demo .demo-grab{position:absolute;z-index:1;top:4px;left:7px;width:36px;height:32px;display:grid;place-items:center;padding:0;background:transparent;color:#554d42;font-size:22px;cursor:grab;touch-action:none;user-select:none}
.demo-photo{height:262px;padding:38px 12px 12px;background:var(--demo-surface);border:1px solid var(--demo-line);border-bottom:3px solid var(--demo-violet);box-shadow:0 4px 12px #0002;transform:rotate(-1.5deg)}
.demo-photo:before{content:'';position:absolute;top:7px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--demo-violet);box-shadow:1px 2px 3px #0005}
.board-demo .demo-photo .demo-grab{color:var(--demo-muted)}
.demo-photo img{display:block;object-fit:cover;width:100%;height:148px;background:#101014;pointer-events:none}
.demo-photo figcaption{padding-top:10px;font-size:12px;line-height:1.5}
.demo-photo figcaption strong,.demo-photo figcaption span{display:block}
.demo-photo figcaption span{font-size:10px;color:var(--demo-muted);margin-top:3px}
.demo-document{padding:38px 12px 12px;background:var(--demo-surface);border:1px solid var(--demo-line);border-bottom:3px solid var(--demo-blue);box-shadow:0 4px 12px #0002;height:262px}
.demo-document:before,.demo-document:after{content:'';position:absolute;inset:3px -3px -3px 3px;background:var(--demo-surface);border:1px solid #8885;z-index:-1;transform:rotate(1.5deg)}
.demo-document:after{inset:6px -6px -6px 6px;transform:rotate(-1deg);z-index:-2}
.board-demo .demo-document .demo-grab{color:var(--demo-muted)}
.demo-document>a{display:block;color:inherit}
.demo-document img{display:block;width:100%;height:148px;object-fit:contain;background:#f4f1eb}
.demo-document strong{display:block;margin-top:8px;font-size:12px;line-height:1.5;font-weight:600}
.demo-document small{display:block;margin-top:3px;font-size:10px;color:var(--demo-muted)}
.demo-document>a:hover strong{text-decoration:underline;text-underline-offset:3px}
.demo-canvas-card:focus-within{z-index:2;box-shadow:3px 10px 20px #24201c40}
.demo-canvas-card[data-moving]{z-index:3;transform:none;box-shadow:4px 14px 28px #24201c44}
.demo-postit .demo-grab:focus-visible{outline-color:#332d25}
.demo-task-preview{position:fixed;z-index:30;pointer-events:none;max-width:260px;padding:18px;background:var(--paper);color:var(--ink);border:1px solid var(--accent);box-shadow:0 12px 40px #0003;font-size:13px;transform:rotate(-2deg)}
.board-demo .demo-caption{border-color:var(--demo-line);background:var(--demo-surface);padding:16px 24px;font-size:11px}
@media(max-width:760px){.feature-intro{display:block}.feature-intro h2{margin-bottom:22px}.board-demo .demo-panel{padding:20px 16px}.board-demo .demo-heading h3{font-size:26px}.board-demo .demo-heading>p{font-size:11px}.board-demo .demo-chrome{padding:14px 16px}.board-demo .demo-tabs{padding:0 16px;gap:16px}.board-demo .demo-tabs button{font-size:11px}.demo-scrapbook-heading{flex-wrap:wrap;gap:10px}.board-demo .demo-hint{font-size:10px}.board-demo .demo-caption{padding:16px;flex-wrap:wrap}.board-demo .demo-workspace{display:none}.board-demo .demo-heading{gap:12px}.board-demo .avatar-stack b{width:27px;height:27px;font-size:8px}}
@media(forced-colors:active){.board-demo .board-column,.board-demo .board-column h4,.demo-postit,.demo-photo{border:1px solid CanvasText}.board-demo .drag-over{outline-color:Highlight}}