/* App-shaped LabDashboard: local interaction demo, scoped to section 07. */
.lab-product-demo{--lab-brand:light-dark(#5561c8,#a3a5ff);--lab-red:light-dark(#b82c38,#f19ca3);--lab-amber:light-dark(#9a5c11,#efbf73);--lab-green:light-dark(#247749,#89cea5);--lab-blue:light-dark(#5274c3,#8ba7ea)}
/* Decorative glints must not turn the tile into a focus-scroll container. */
.lab-product-demo .walkthrough .glass-stage{overflow:clip}
.lab-product-demo button,.lab-product-demo input,.lab-product-demo select,.lab-product-demo textarea{font-family:inherit}
.lab-product-demo button:focus-visible,.lab-product-demo input:focus-visible,.lab-product-demo select:focus-visible,.lab-product-demo textarea:focus-visible,.lab-product-demo [role="button"]:focus-visible{outline:2px solid var(--lab-brand);outline-offset:3px}
.lab-product-demo .lab-page{height:558px;display:flex;flex-direction:column;background:var(--p-bg)}
.lab-product-demo .lab-toolbar{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--p-line);flex-shrink:0;min-height:64px}
.lab-product-demo .lab-toolbar h3{font-size:16px;letter-spacing:-.2px;font-weight:600;margin:0;white-space:nowrap}
.lab-product-demo .lab-view-switch{display:flex;gap:2px;border:1px solid var(--p-line);border-radius:6px;padding:3px;background:var(--p-bg)}
.lab-product-demo .lab-view-switch button{font-size:12px;border:0;background:none;padding:5px 12px;border-radius:4px;cursor:pointer;color:var(--p-sub)}
.lab-product-demo .lab-view-switch button[aria-pressed="true"]{color:var(--lab-brand);background:var(--p-tint);font-weight:600}
.lab-product-demo .lab-search{display:flex;gap:6px;align-items:center;margin-left:auto;color:var(--p-sub);border:1px solid var(--p-line);border-radius:5px;padding:6px 9px;width:175px}
.lab-product-demo .lab-search svg{height:14px;width:14px;flex:none}
.lab-product-demo .lab-search input{width:100%;min-width:0;border:0;background:none;color:var(--p-ink);font-size:12px;outline-offset:4px}
.lab-product-demo .lab-new{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 11px;border:0;border-radius:5px;background:#5561c8;color:#fff;font-size:12px;white-space:nowrap;cursor:pointer}
.lab-product-demo .lab-new svg{width:14px;height:14px}
.lab-product-demo .lab-canceled{font-size:11px;border:1px solid var(--p-line);border-radius:5px;background:var(--p-bg);color:var(--p-sub);padding:7px;cursor:pointer}
.lab-product-demo .lab-attention{flex-shrink:0;border-bottom:1px solid var(--p-line);background:light-dark(#fdf8ed,#322919);color:var(--lab-amber);padding:0 20px;font-size:11px}
.lab-product-demo .lab-attention-line{display:flex;align-items:center;gap:8px;min-height:35px}
.lab-product-demo .lab-attention-line>svg{width:13px;height:13px}
.lab-product-demo .lab-attention-line strong{font-weight:500}
.lab-product-demo .lab-attention-line button{display:flex;gap:6px;align-items:center;border:0;background:none;color:inherit;padding:4px;font-size:11px;cursor:pointer}
.lab-product-demo .lab-attention-line button svg{width:12px;height:12px}
.lab-product-demo .lab-overdue-list{padding-bottom:8px}
.lab-product-demo .lab-overdue-list button{display:flex;justify-content:space-between;width:100%;text-align:left;padding:8px;background:var(--p-bg);color:var(--p-ink);border:1px solid var(--p-line);border-radius:4px;font-size:12px;cursor:pointer}
.lab-product-demo .lab-overdue-list button span{color:var(--lab-red);margin-left:12px;white-space:nowrap}
.lab-product-demo .lab-board-viewport{flex:1;min-height:0;overflow:auto;padding:14px 16px;background:var(--p-soft);scrollbar-width:thin;scrollbar-color:var(--p-line) transparent;overscroll-behavior:contain}
.lab-product-demo .lab-board-inner{min-width:660px}
.lab-product-demo .lab-column-heads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 13px 10px;position:sticky;top:-14px;z-index:2;background:var(--p-soft)}
.lab-product-demo .lab-column-heads>div{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;padding-top:5px}
.lab-product-demo .lab-column-heads>div>span:last-child{font-weight:400;color:var(--p-sub)}
.lab-product-demo .lab-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none}
.lab-product-demo .lab-status-dot.is-planned{background:var(--lab-blue)}
.lab-product-demo .lab-status-dot.is-in_progress{background:var(--lab-amber)}
.lab-product-demo .lab-status-dot.is-done{background:var(--lab-green)}
.lab-product-demo .lab-lane{border:1px solid var(--p-line);border-radius:8px;background:var(--p-bg);margin-bottom:12px}
.lab-product-demo .lab-lane-toggle{border:0;background:none;color:var(--p-ink);display:flex;align-items:center;gap:7px;width:100%;padding:9px 12px;text-align:left;cursor:pointer}
.lab-product-demo .lab-lane-toggle>svg{width:12px;height:12px;color:var(--p-sub)}
.lab-product-demo .lab-lane-toggle strong{font-size:12px;font-weight:500}
.lab-product-demo .lab-lane-toggle>span{font-size:10px;color:var(--p-sub)}
.lab-product-demo .lab-lane-counts{display:flex;gap:12px;margin-left:auto}
.lab-product-demo .lab-lane-counts>span{display:flex;align-items:center;gap:5px}
.lab-product-demo .lab-lane-counts i{width:5px;height:5px}
.lab-product-demo .lab-lane-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 12px 12px}
.lab-product-demo .lab-drop-cell{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:52px;border:1px dashed transparent;border-radius:7px}
.lab-product-demo .lab-dragging .lab-drop-cell{border-color:var(--lab-brand)}
.lab-product-demo .lab-task-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--p-line);border-radius:8px;background:var(--p-bg);cursor:pointer;min-width:0;transition:border-color .18s,box-shadow .18s}
.lab-product-demo .lab-task-card:hover{border-color:color-mix(in srgb,var(--lab-brand) 50%,var(--p-line));box-shadow:0 2px 7px var(--p-shadow)}
.lab-product-demo .lab-task-card h4{font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0;margin:0;color:var(--p-ink)}
.lab-product-demo .lab-task-card.is-done h4{color:var(--p-sub);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--p-sub) 45%,transparent)}
.lab-product-demo .lab-card-links{display:flex;flex-wrap:wrap;gap:4px}
.lab-product-demo .lab-record-chip{display:flex;align-items:center;gap:4px;max-width:100%;border:1px solid var(--p-line);border-radius:4px;background:var(--p-soft);color:var(--p-sub);font-size:10px;padding:3px 6px;text-align:left;cursor:pointer}
.lab-product-demo .lab-record-chip svg{width:11px;height:11px;flex:none}
.lab-product-demo .lab-record-chip span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lab-product-demo .lab-record-chip:hover{color:var(--lab-brand);border-color:var(--lab-brand)}
.lab-product-demo .lab-card-meta{display:flex;align-items:center;gap:7px;margin-top:auto;min-height:24px}
.lab-product-demo .lab-avatar{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:var(--p-tint);color:var(--lab-brand);font-size:9px;font-weight:500;flex-shrink:0}
.lab-product-demo .lab-avatar-maya{background:light-dark(#f2e7de,#453329);color:light-dark(#9d6142,#dfae93)}
.lab-product-demo .lab-priority{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--p-soft);color:var(--p-sub)}
.lab-product-demo .lab-priority.is-medium{background:light-dark(#fff5e3,#3d301c);color:var(--lab-amber)}
.lab-product-demo .lab-priority.is-high,.lab-product-demo .lab-priority.is-urgent{background:light-dark(#fceef0,#482a31);color:var(--lab-red)}
.lab-product-demo .lab-due{margin-left:auto;font-size:10px;color:var(--p-sub)}
.lab-product-demo .lab-due.is-late{color:var(--lab-red)}
.lab-product-demo .lab-mine-grid .lab-lane-cells{padding:0 12px}
.lab-product-demo .lab-board-footer{display:flex;justify-content:space-between;gap:8px;flex-shrink:0;padding:8px 16px;border-top:1px solid var(--p-line);color:var(--p-sub);font-size:10px}
.lab-product-demo .lab-empty{font-size:13px;padding:50px;text-align:center;color:var(--p-sub)}
.lab-product-demo .lab-canceled-items{border-top:1px solid var(--p-line);padding-top:15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lab-product-demo .lab-canceled-items>h4{grid-column:1/-1;font-size:12px;font-weight:500;margin:0}
.lab-product-demo .lab-view-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.lab-product-demo .lab-view-tiles>button{display:flex;gap:12px;padding:16px;border:1px solid var(--p-line);border-radius:10px;color:var(--p-ink);background:var(--p-bg);text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.lab-product-demo .lab-view-tiles>button[aria-pressed="true"]{background:var(--p-tint);border-color:color-mix(in srgb,var(--lab-brand) 45%,var(--p-line))}
.lab-product-demo .lab-view-icon{margin-top:2px;color:var(--lab-brand)}
.lab-product-demo .lab-view-icon svg{width:18px;height:18px}
.lab-product-demo .lab-view-name{display:block;color:var(--p-sub);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.lab-product-demo .lab-view-tiles strong{display:block;font-size:15px;font-weight:500;margin-bottom:4px}
.lab-product-demo .lab-view-tiles small{display:block;font-size:12px;color:var(--p-sub);line-height:1.5}
.lab-product-demo .lab-view-tiles>button>svg{margin-left:auto;flex:none;width:15px;height:15px;color:var(--p-sub)}
.lab-product-demo .lab-demo-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px;font-size:11px;color:var(--p-sub)}
.lab-product-demo .lab-feedback{margin:0;font-size:11px;line-height:1.5;color:var(--p-sub)}
.lab-product-demo .lab-demo-controls>div{display:flex;gap:7px;flex-shrink:0}
.lab-product-demo .lab-demo-controls button{display:flex;gap:6px;align-items:center;background:var(--p-bg);border:1px solid var(--p-line);border-radius:5px;color:var(--p-ink);padding:7px 10px;font-size:11px;cursor:pointer}
.lab-product-demo .lab-demo-controls svg{width:13px;height:13px}
.lab-product-demo .lab-task-dialog{padding:0;border:1px solid var(--p-line);border-radius:12px;box-shadow:0 24px 90px #0004;background:var(--p-bg);color:var(--p-ink);width:min(860px,calc(100vw - 40px));max-width:none;max-height:85dvh;overflow:auto;margin:auto;font-size:14px;line-height:1.5}
.lab-product-demo .lab-task-dialog::backdrop{background:#15172559;backdrop-filter:blur(2px)}
.lab-product-demo .lab-task-dialog form{margin:0}
.lab-product-demo .lab-task-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--p-line)}
.lab-product-demo .lab-task-header>input{flex:1;min-width:0;border:0;border-radius:3px;padding:4px 0;font-size:18px;font-weight:500;background:none;color:var(--p-ink)}
.lab-product-demo .lab-save-status{font-size:11px;color:var(--p-sub);white-space:nowrap}
.lab-product-demo .lab-task-close{display:grid;place-items:center;border:0;background:none;color:var(--p-sub);padding:5px;cursor:pointer}
.lab-product-demo .lab-task-body{display:grid;grid-template-columns:minmax(0,1fr) 248px;min-height:350px}
.lab-product-demo .lab-task-description{padding:22px 24px;min-width:0}
.lab-product-demo .lab-task-description textarea{width:100%;min-height:116px;font-size:14px;line-height:1.65;color:var(--p-ink);background:none;border:0;border-radius:3px;resize:vertical;display:block;padding:0;margin-bottom:20px}
.lab-product-demo .lab-task-description>h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;color:var(--p-sub);margin:0 0 10px}
.lab-product-demo .lab-detail-link{display:flex;align-items:center;border:1px solid var(--p-line);background:var(--p-soft);border-radius:5px;margin-bottom:6px}
.lab-product-demo .lab-detail-link button{border:0;background:none;color:var(--p-ink);cursor:pointer;display:flex;align-items:center;gap:7px;padding:10px;font-size:12px;min-width:0}
.lab-product-demo .lab-detail-link button:first-child{flex:1;text-align:left}
.lab-product-demo .lab-detail-link button:first-child>span{overflow-wrap:anywhere}
.lab-product-demo .lab-detail-link svg{width:14px;height:14px;flex-shrink:0}
.lab-product-demo .lab-detail-link small{font-size:9px;text-transform:uppercase;color:var(--p-sub);margin-left:auto}
.lab-product-demo .lab-detail-link button:hover{color:var(--lab-brand)}
.lab-product-demo .lab-link-record{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border:1px dashed var(--p-line);border-radius:5px;background:none;color:var(--p-sub);font-size:12px;cursor:pointer}
.lab-product-demo .lab-link-record svg{width:13px;height:13px}
.lab-product-demo .lab-link-picker{margin-top:6px;border:1px solid var(--p-line);border-radius:5px;padding:5px;box-shadow:0 6px 15px var(--p-shadow)}
.lab-product-demo .lab-link-picker button{display:flex;gap:7px;align-items:center;border:0;background:none;color:var(--p-ink);font-size:12px;padding:8px;text-align:left;width:100%;cursor:pointer}
.lab-product-demo .lab-link-picker small{margin-left:auto;color:var(--p-sub);font-size:9px}
.lab-product-demo .lab-no-links{font-size:12px;color:var(--p-sub)}
.lab-product-demo .lab-task-fields{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--p-line);padding:22px 20px}
.lab-product-demo .lab-task-fields label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--p-sub)}
.lab-product-demo .lab-task-fields select,.lab-product-demo .lab-task-fields input{width:100%;font-size:13px;padding:7px 8px;border:1px solid var(--p-line);border-radius:5px;color:var(--p-ink);background:var(--p-bg);min-height:34px;box-sizing:border-box}
.lab-product-demo .lab-task-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--p-line);font-size:11px;color:var(--p-sub)}
.lab-product-demo .lab-task-finish{background:#5561c8;color:#fff;padding:7px 17px;border:0;border-radius:6px;font-size:13px;cursor:pointer}
.lab-product-demo .lab-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:900px){.lab-product-demo .lab-toolbar{gap:8px;padding:11px 12px;flex-wrap:wrap}.lab-product-demo .lab-search{width:135px}.lab-product-demo .lab-view-tiles>button{padding:13px;gap:8px}.lab-product-demo .lab-view-tiles small{font-size:11px}.lab-product-demo .lab-view-tiles>button>svg{display:none}.lab-product-demo .lab-view-tiles strong{font-size:13px}}
@media(max-width:700px){
 .lab-product-demo .tab-strip{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
 .lab-product-demo .tab-strip .app-tab{flex-shrink:0;font-size:10px;padding:6px}
 .lab-product-demo .lab-page{height:530px}
 .lab-product-demo .lab-toolbar h3{font-size:14px;margin-right:auto}
 .lab-product-demo .lab-view-switch{order:3;width:auto}
 .lab-product-demo .lab-view-switch button{font-size:11px;padding:6px 10px}
 .lab-product-demo .lab-search{order:4;flex:1;min-width:70px;width:auto;padding:6px}
 .lab-product-demo .lab-new{margin-left:0;font-size:11px;padding:7px 9px}
 .lab-product-demo .lab-attention{padding:0 12px}
 .lab-product-demo .lab-board-viewport{padding:12px 8px}
 .lab-product-demo .lab-board-inner{min-width:650px}
 .lab-product-demo .lab-board-footer{font-size:9px;padding:8px;flex-wrap:wrap}
 .lab-product-demo .lab-view-tiles{gap:5px;margin-top:12px}
 .lab-product-demo .lab-view-tiles>button{padding:12px 9px;display:block;border-radius:7px}
 .lab-product-demo .lab-view-icon{display:none}
 .lab-product-demo .lab-view-name{font-size:10px;margin-bottom:4px}
 .lab-product-demo .lab-view-tiles strong{font-size:12px;line-height:1.4;margin:0}
 .lab-product-demo .lab-view-tiles small{display:none}
 .lab-product-demo .lab-demo-controls{align-items:flex-start;gap:12px}
 .lab-product-demo .lab-feedback{font-size:10px}
 .lab-product-demo .lab-demo-controls button{font-size:10px;padding:7px}
 .lab-product-demo .lab-task-dialog{width:calc(100vw - 24px);max-height:88dvh}
 .lab-product-demo .lab-task-header{padding:12px;gap:6px}
 .lab-product-demo .lab-task-header>input{font-size:15px}
 .lab-product-demo .lab-save-status{display:none}
 .lab-product-demo .lab-task-body{grid-template-columns:1fr}
 .lab-product-demo .lab-task-description{padding:16px}
 .lab-product-demo .lab-task-description textarea{font-size:13px;min-height:110px}
 .lab-product-demo .lab-task-fields{border-left:0;border-top:1px solid var(--p-line);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .lab-product-demo .lab-task-fields select,.lab-product-demo .lab-task-fields input{font-size:12px}
 .lab-product-demo .lab-task-footer{padding:12px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.lab-product-demo *{scroll-behavior:auto!important;transition:none!important}}