/* Mont, from the machine's own font library.
 *
 * Only local() sources: the family is installed on the design machine, so the browser loads it
 * from there and nothing is copied into this repository or served to anyone. A machine without
 * Mont falls straight through to the next family in --font rather than downloading anything,
 * which is also what keeps the published demo free of a font it has no licence to redistribute.
 * Mont ships discrete weights where Inter was variable, so the stack below declares the five the
 * product actually asks for and lets the browser round the in-between values (450, 550, 620) to
 * the nearest real cut. */
@font-face{font-family:Mont;font-weight:300;font-style:normal;font-display:swap;src:local('Mont Light'),local('Mont-Light')}
@font-face{font-family:Mont;font-weight:400;font-style:normal;font-display:swap;src:local('Mont Book'),local('Mont-Book')}
@font-face{font-family:Mont;font-weight:500;font-style:normal;font-display:swap;src:local('Mont Regular'),local('Mont-Regular')}
@font-face{font-family:Mont;font-weight:600;font-style:normal;font-display:swap;src:local('Mont SemiBold'),local('Mont-SemiBold')}
@font-face{font-family:Mont;font-weight:700;font-style:normal;font-display:swap;src:local('Mont Bold'),local('Mont-Bold')}
@font-face{font-family:Mont;font-weight:300;font-style:italic;font-display:swap;src:local('Mont Light Italic'),local('Mont-LightItalic')}
@font-face{font-family:Mont;font-weight:400;font-style:italic;font-display:swap;src:local('Mont Book Italic'),local('Mont-BookItalic')}
@font-face{font-family:Mont;font-weight:600;font-style:italic;font-display:swap;src:local('Mont SemiBold Italic'),local('Mont-SemiBoldItalic')}
:root{--bg:#100c19;--sidebar:#130f1d;--panel:#1b1526;--panel2:#21192e;--hover:#2a203b;--line:rgba(220,193,255,.09);--line2:rgba(217,170,255,.19);--text:#f4eefc;--muted:#a397b5;--faint:#a092b0;--accent:#c17aec;--accent2:#9455eb;--purple:#bc91ff;--green:#8cdcb9;--amber:#f1c58b;--red:#f494a9;--blue:#99bcf9;--radius:18px;--shadow:0 18px 65px #08050e66;--font:Mont,Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.5}body{overflow-x:hidden}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}button{border:0}a{color:var(--purple);text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #d7a1ff;outline-offset:4px}button:focus:not(:focus-visible){outline:none}input,select,textarea{width:100%;color:var(--text);border:1px solid var(--line2);border-radius:10px;background:#14101e;padding:11px 12px;min-height:42px;outline:0}textarea{resize:vertical;min-height:96px}select{appearance:auto}input[type=checkbox]{width:17px;min-height:auto;accent-color:var(--accent);cursor:pointer}input[type=file]{padding:8px}h1,h2,h3,h4,p{margin:0}h1{font-size:32px;font-weight:620;letter-spacing:-1.1px;line-height:1.22}h2{font-size:17px;font-weight:600;letter-spacing:-.35px}h3{font-size:14px;font-weight:600}h4{font-size:12px}p{color:var(--muted)}strong{font-weight:600}small{font-size:11px;color:var(--muted)}svg.icon{width:15px;height:15px;fill:none;flex-shrink:0;vertical-align:middle}img{max-width:100%}::selection{background:#9b5ae455}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-100px;left:15px;z-index:1000;background:#fff;color:#180a2b;padding:12px;border-radius:8px}.skip-link:focus{top:10px}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:12px}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.stack{display:grid;gap:16px}.muted{color:var(--muted)}.faint{color:var(--faint)}.purple{color:var(--purple)}.green{color:var(--green)}.amber{color:var(--amber)}.red{color:var(--red)}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mt12{margin-top:12px}.mt20{margin-top:20px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}.rule{height:1px;background:var(--line);margin:18px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:37px;padding:8px 13px;background:#2b203b;border:1px solid var(--line2);border-radius:9px;white-space:nowrap;font-size:12px;font-weight:550;transition:background .18s,transform .18s,border-color .18s}.btn:hover{background:#372749;border-color:#b389d944;transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}.btn.primary{color:#190d26;background:#e6cdff;border-color:#e6cdff;box-shadow:none;font-weight:600;letter-spacing:.15px}.btn.primary:hover{background:#f2e3ff;border-color:#f2e3ff}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.ghost:hover{background:var(--hover);color:var(--text)}.btn.small{min-height:30px;padding:5px 10px;font-size:11px}.btn.square{width:36px;padding:0}.btn.danger{color:var(--red);background:#45223166;border-color:#bc577744}.btn.full{width:100%}.btn.text{border:0;background:none;color:var(--purple);padding:3px 0;min-height:0;border-radius:4px}.badge{display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:3px 8px;border-radius:6px;white-space:nowrap;font-size:10px;font-weight:550;color:#c6bad6;background:#ffffff07;border:1px solid var(--line)}.badge.green{color:var(--green);background:#78d7b10d;border-color:#78d7b122}.badge.amber{color:var(--amber);background:#f1c58b0e;border-color:#f1c58b20}.badge.red{color:var(--red);background:#f494a90e;border-color:#f494a920}.badge.purple{color:#d3acff;background:#ac77f213;border-color:#ac77f223}.badge.blue{color:var(--blue);background:#99bcf912}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:currentColor}.avatar{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;flex-shrink:0;border-radius:50%;border:2px solid #2b203b;background:linear-gradient(130deg,#56415e,#2a2537);color:#e3d3f1;font-size:9px;font-weight:650;letter-spacing:.2px}.avatar.big{width:43px;height:43px;font-size:12px}.avatar-stack{display:flex;padding-left:6px}.avatar-stack .avatar{margin-left:-6px}.panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);overflow:hidden}
/* Almost every panel is a cell in a grid or a stack, where the gap does the spacing and a margin
   of its own would double it. A panel sitting directly in a page's flow has no gap to inherit, so
   it needs one: the approvals queue on the Projects page had none and ran straight into the pillar
   tabs below it, which made the queue and the tabs read as one object. 24px sits between the
   heading above it (25) and the toolbar below (20), so the page keeps one rhythm. */
.panel.page-block{margin-bottom:24px}.panel-header{padding:20px 21px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-body{padding:0 21px 20px}.panel.padded{padding:23px}.panel-header h2{font-size:14px}.panel-header p{font-size:11px;margin-top:3px}.progress{height:5px;overflow:hidden;background:#eee1ff09;border-radius:4px}.progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9b69d2,#d796ee);transition:width .5s cubic-bezier(.2,.7,.3,1)}.progress.green>span{background:var(--green)}.progress.amber>span{background:var(--amber)}.progress.red>span{background:var(--red)}
.boot{height:100vh;display:grid;place-content:center;gap:25px;text-align:center}.boot img{height:85px;margin:auto;animation:soft-glow 3s ease-in-out infinite}.app-shell{min-height:100vh;display:grid;grid-template-columns:224px minmax(0,1fr)}.sidebar{position:fixed;z-index:40;top:0;bottom:0;left:0;width:224px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:26px 15px 16px;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;padding:0 12px 28px}.brand img{height:40px;width:33px;object-fit:contain}.brand .wordmark{display:block;height:26px;width:auto;object-fit:contain}.nav-label{font-size:9px;color:var(--faint);letter-spacing:1.4px;margin:0 13px 10px}.nav-group{display:grid;gap:4px;margin-bottom:22px}.nav-link{display:flex;align-items:center;gap:11px;padding:11px 13px;min-height:40px;border-radius:9px;background:none;color:#ab9ebc;text-align:left;font-size:12px;position:relative;transition:all .15s}.nav-link .icon{width:14px;height:14px;color:#8e7e9e}.nav-link:hover{background:#ffffff04;color:var(--text)}.nav-link.active{background:linear-gradient(90deg,#aa64df23,#aa64df0c);color:#e4bafa}.nav-link.active .icon{color:#d49cf2}.nav-link.active:before{content:'';position:absolute;left:-15px;width:3px;height:19px;background:#c982ed;border-radius:0 3px 3px 0}.nav-count{margin-left:auto;background:#b772ed22;border-radius:5px;padding:1px 5px;font-size:10px;color:#ce9bec}.sidebar-bottom{margin-top:auto;padding-top:14px}.sidebar-profile{margin:14px 3px 0;padding:10px;border:1px solid var(--line);border-radius:11px;background:#24193044;display:flex;align-items:center;gap:9px}.sidebar-profile .grow{min-width:0}/* A name can be any length, so it truncates and keeps its full value in a tooltip. A role is short enough to wrap, and wrapping tells the truth where an ellipsis would not. */.sidebar-profile strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-profile small{display:block;font-size:9px;line-height:1.45}.sidebar-profile .btn{flex-shrink:0}.sidebar-profile .btn.square{width:28px}.workspace{grid-column:2;min-width:0}.topbar{height:74px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:#100c19e8;position:sticky;top:0;z-index:30;backdrop-filter:blur(18px)}.crumb{display:flex;gap:12px;align-items:center;color:var(--faint);font-size:11px}.crumb .icon{width:7px;height:9px}.crumb strong{color:#b9aaca;font-weight:500}/* Sits between the menu button and the breadcrumb, where a back button is looked for. */
.back-button{color:#b9aaca}
.back-button .back-label{white-space:nowrap}.top-actions{display:flex;gap:12px;align-items:center}.search-button{display:flex;align-items:center;gap:10px;background:#1d1629;border:1px solid var(--line);padding:8px 12px;border-radius:8px;color:var(--faint);font-size:11px;width:570px;min-width:0;flex-shrink:1;overflow:hidden}.search-button .icon{height:12px;width:12px}.kbd{font-size:9px;border:1px solid var(--line2);border-radius:4px;color:var(--faint);padding:1px 5px;margin-left:auto}.mobile-menu{display:none}.page{padding:29px 32px 45px;max-width:1780px;margin:auto;min-width:0}.page-title{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:25px}.page-title p{margin-top:7px;font-size:12px}.content-rail{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:24px;align-items:start}.main-stack{display:grid;gap:23px;min-width:0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.hero{position:relative;min-height:230px;border-radius:19px;padding:29px 30px;background:radial-gradient(ellipse at 78% 60%,#63308c70,transparent 56%),linear-gradient(115deg,#302039,#20132f 80%);border:1px solid #d096f01a;overflow:hidden}.hero:after{position:absolute;inset:0;content:'';pointer-events:none;background-image:radial-gradient(#ddb3f814 .6px,transparent .6px);background-size:19px 19px;mask-image:linear-gradient(90deg,transparent,#000)}.hero-copy{position:relative;z-index:2;max-width:64%}.hero h2{font-size:33px;line-height:1.22;letter-spacing:-1.1px;font-weight:560;margin:11px 0}.hero h2 em{font-style:normal;color:#d39aef}.hero p{font-size:11px;max-width:315px;line-height:1.8;color:#b5a0c6}.hero .btn{margin-top:20px}.orb-ring{position:absolute;inset:6px;border:1px solid #d79cff23;border-radius:50%;transform:rotateX(56deg) rotateZ(-26deg);box-shadow:0 0 28px #bd64e511,inset 0 0 25px #bd64e511}.orb-ring:nth-child(2){inset:20px;transform:rotateY(55deg) rotateZ(30deg)}.orb-ring:nth-child(3){inset:-2px;border-style:dashed;opacity:.5;transform:rotateX(30deg) rotateZ(-25deg)}.orbit-dot{position:absolute;width:6px;height:6px;background:#e1afff;box-shadow:0 0 12px #d394ff;border-radius:50%;top:35px;right:26px}.metric{padding:18px 20px;position:relative}.metric .eyebrow{letter-spacing:.5px;text-transform:none;font-size:11px;color:#b8a6c8}.metric strong{font-size:31px;font-weight:560;display:block;letter-spacing:-1.3px;margin:9px 0 0;line-height:1.15}.metric small{font-size:10px}.metric-icon{display:grid;place-items:center;border-radius:8px;background:#b77aea13;width:29px;height:29px;color:#c990ed}.metric-label{display:flex;justify-content:space-between;align-items:center}.spark-bars{display:flex;align-items:end;height:26px;gap:4px;position:absolute;right:18px;bottom:27px}.spark-bars i{width:5px;background:#bd8eec30;border-radius:2px;animation:rise .7s both}.spark-bars i:last-child{background:#d198f0}.section-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.section-line h2{font-size:14px}.section-line small{font-size:10px}.attention{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}.attention:last-child{border:0;padding-bottom:0}.attention-icon{background:#ce9bec10;border:1px solid #ce9bec11;border-radius:10px;display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;color:var(--purple)}.attention p{font-size:10px;margin-top:3px}.attention strong{font-size:11px;font-weight:550}.task-list{display:grid}.task-row{display:flex;gap:11px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
/* Sub-items sit under the item they belong to. The rule down the left says "part of the thing
   above" without boxing one list row inside another, and the indent lines the titles up with the
   parent's rather than with its checkbox. */
.task-children{margin-left:29px;padding-left:12px;border-left:2px solid #c196dc2e}
.task-children .task-row:last-child{border-bottom:0}
.task-children .task-title{font-size:11px;color:#cdbfd9}.task-row:last-child{border:0}.task-row .task-title{display:block;font-size:12px;font-weight:500;background:none;padding:0;text-align:left;color:#e2d8ec;line-height:1.45}.task-row small{font-size:10px;display:block;margin-top:4px}.task-meta{display:flex;align-items:center;gap:10px}.task-meta .icon{width:11px;height:11px}.task-check{width:18px;height:18px;min-width:18px;border:1px solid #5b476a;border-radius:5px;background:transparent;display:grid;place-items:center;padding:0;color:var(--green)}.task-check:hover{border-color:var(--accent)}.task-check .icon{width:10px;height:10px}.task-check.done{border-color:#80dcb348;background:#80dcb31b}.task-row.done .task-title{text-decoration:line-through;color:var(--faint)}.grip{background:none;color:var(--faint);width:22px;padding:4px;touch-action:none;cursor:grab;min-height:30px}.grip .icon{width:8px;height:13px}.grip:active{cursor:grabbing}.pillars-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.pillar-card{padding:16px;text-align:left;transition:border-color .2s,transform .2s}.pillar-card:hover{transform:translateY(-3px);border-color:#c98eef55}.pillar-symbol{height:27px;width:27px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:600;background:#af87dc18;border:1px solid #cda3ee15;color:#ccaceb}.pillar-card strong{font-size:11px}.pillar-card .progress{margin:17px 0 9px;height:4px}.pillar-card small{font-size:9px}.activity-line{padding:10px 0;display:flex;gap:11px;font-size:11px;border-bottom:1px solid var(--line)}.activity-line:last-child{border:0}.activity-line .avatar{width:26px;height:26px}.activity-line p{font-size:10px;line-height:1.6}.activity-line time{font-size:9px;display:block;color:var(--faint);margin-top:3px}.sidekick-rail{border:1px solid #bd77e92c;border-radius:var(--radius);background:radial-gradient(ellipse at top,#58307628,transparent 42%),#191322;position:sticky;top:97px;overflow:hidden}.sidekick-head{padding:19px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.sidekick-head img{width:23px;height:28px;object-fit:contain}.sidekick-head strong{font-size:12px}.sidekick-head small{display:block;font-size:9px}.sidekick-visual{height:140px;position:relative;display:grid;place-items:center;margin-top:2px}.sidekick-visual:before{content:'';width:95px;height:95px;border-radius:50%;position:absolute;background:#ab64d324;filter:blur(24px)}.sidekick-visual img{position:relative;width:61px;height:76px;object-fit:contain;animation:soft-glow 5s ease-in-out infinite;filter:drop-shadow(0 0 10px #b667eb30)}.sidekick-body{padding:0 19px 19px}.sidekick-body h3{font-size:17px;letter-spacing:-.5px;line-height:1.4}.sidekick-body>p{font-size:11px;line-height:1.8;margin-top:9px}.sidekick-callout{margin:20px 0 15px;border-radius:11px;background:#8e50be0e;border:1px solid #bc8de622;padding:14px}.sidekick-callout .eyebrow{font-size:8px;letter-spacing:1px;color:#c294e5}.sidekick-callout h4{font-size:11px;margin:9px 0 8px;line-height:1.5}.sidekick-callout p{font-size:10px;line-height:1.7}.suggestion{display:flex;align-items:center;justify-content:space-between;width:100%;border-bottom:1px solid var(--line);background:none;color:#b7a5c7;text-align:left;padding:11px 0;font-size:10px}.suggestion .icon{width:10px;height:10px;color:#9b78b6}.suggestion:hover{color:var(--text)}.sidekick-input{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;background:#0f0c17;border:1px solid var(--line2);margin-top:15px}.sidekick-input input{border:0;background:none;padding:3px;min-height:25px;font-size:10px}.sidekick-input button{width:27px;height:27px;min-height:0;padding:0;border-radius:9px}.sidekick-input button .icon{width:11px;height:11px}.sidekick-footer{padding:12px 19px;border-top:1px solid var(--line);font-size:9px;line-height:1.6;color:var(--faint)}.notice{font-size:10px;color:#bba4ce;background:#21172b;border:1px solid #ce99ec18;border-radius:9px;padding:9px 12px;line-height:1.7}.notice .icon{width:11px;height:11px;margin-right:5px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:0 0 20px;flex-wrap:wrap}.tabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.tab{background:none;border:1px solid transparent;border-radius:8px;font-size:11px;padding:7px 12px;color:var(--muted);white-space:nowrap}.tab:hover{background:var(--hover);color:var(--text)}.tab.active{background:#af72e222;border-color:#c78bef22;color:#e2b7f8}.tabs.underline{gap:17px;border-bottom:1px solid var(--line);padding:0 0 0;margin-bottom:24px}.tabs.underline .tab{border-radius:0;padding:12px 2px;border:0;border-bottom:2px solid transparent;background:none;font-size:12px}.tabs.underline .tab.active{color:#dca5f8;border-bottom-color:#c68dec}.input-icon{position:relative}.input-icon .icon{position:absolute;left:12px;top:13px;width:12px;height:12px;color:var(--faint)}.input-icon input{padding-left:34px;font-size:11px;min-height:36px;width:230px}.view-toggle{display:flex;border:1px solid var(--line);border-radius:8px;padding:3px;background:#1b1425;gap:2px}.view-toggle .btn{min-height:27px;padding:5px 9px;border:0;background:none;color:var(--faint)}.view-toggle .btn.active{background:#3a274c;color:#d5a7f0}.view-toggle .icon{width:12px;height:12px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project-card{padding:22px;position:relative;transition:transform .2s,border-color .2s;min-width:0}.project-card:hover{transform:translateY(-3px);border-color:#cb8fea40}.project-card h3{font-size:16px;letter-spacing:-.3px;margin-top:18px}.project-card p{font-size:11px;line-height:1.8;margin:9px 0 19px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}.project-card .progress{margin:9px 0 17px}.project-card .project-name{padding:0;background:none;color:inherit;text-align:left;font-size:inherit;font-weight:inherit}.project-card .project-name:after{position:absolute;content:'';inset:0}.project-card .btn{position:relative;z-index:2}.project-card-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;border-top:1px solid var(--line);padding-top:15px}.project-card-footer small{font-size:10px}.project-icon{height:39px;width:39px;display:grid;place-items:center;background:linear-gradient(135deg,#915ac32b,#ae65d40c);border:1px solid #cf9fe626;border-radius:11px;color:#d29bed;font-size:15px}.data-table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table th{font-size:10px;letter-spacing:.2px;color:var(--faint);font-weight:500;text-align:left;border-bottom:1px solid var(--line);padding:14px 17px}.data-table td{padding:15px 17px;border-bottom:1px solid var(--line);font-size:11px}.data-table tr:last-child td{border-bottom:0}.data-table td .btn.text{font-size:11px}.data-table tbody tr:hover{background:#ffffff02}.project-summary{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:21px}.summary-text{font-size:12px;line-height:1.9;margin:12px 0 20px;white-space:pre-wrap}.key-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-top:17px;border-top:1px solid var(--line)}.key-grid small{display:block;font-size:10px;margin-bottom:6px}.key-grid strong{font-size:12px;font-weight:500}.workflow{display:flex;gap:5px;overflow:auto;padding:20px 0}.workflow-step{min-width:66px;flex:1}.workflow-step i{display:block;height:4px;background:#ffffff0b;border-radius:3px;margin-bottom:9px}.workflow-step.past i{background:#9b72c9}.workflow-step.current i{background:#da9afb;box-shadow:0 0 15px #ce8fed44}.workflow-step span{font-size:9px;color:var(--faint)}.workflow-step.current span{color:#e0b1fb}.board-scroll{overflow:auto;max-width:100%;padding:0 0 16px;min-height:410px}.board{display:grid;grid-template-columns:repeat(6,minmax(209px,1fr));gap:15px;min-width:1329px;align-items:start}.lane{background:#191221;border-radius:13px;border:1px solid var(--line);padding:12px;min-height:280px}.lane-title{display:flex;gap:7px;align-items:center;padding:3px 1px 13px;font-size:11px}.lane-title .count{color:var(--faint);font-size:10px;padding:1px 6px;background:#ffffff05;border-radius:5px}.lane-title .btn{margin-left:auto;min-height:24px;width:24px}/* A column holds its cards in a box of its own rather than growing the page under them. Twelve
   items in one lane made the board 3415px tall on a 900px screen - you scrolled past two and a
   half screens of one column to reach the bottom of it, and every lane heading went off the top on
   the way, so you could no longer tell which column you were reading.
   Bounded against the viewport rather than against where the board sits in the page, because that
   position is not a constant: the board starts 346px down inside a project and 790px down on All
   work, and a single number measured from the top of the document is wrong on one of them. What is
   subtracted is the chrome that is on screen at the same time - the 74px sticky topbar, this lane's
   own heading and padding, and room to see the page continue underneath. min-height still wins on a
   very short window, which is what stops this collapsing to nothing there.

   contain:paint is doing work here and is not tidying. Bounding the box alone left the page still
   scrolling to 3155px against 1623px of content - a screen and a half of blank space under the
   board - because the cards this now clips went on contributing their old size to the document's
   scroll area. Measured one declaration at a time: overflow:clip did not fix it and containment
   did, taking the page to exactly the height of what is on it. Removing it brings the empty space
   back. */
.lane-items{display:grid;gap:10px;min-height:200px;align-content:start;transition:background .2s;border-radius:8px;padding:2px;
  max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain;contain:paint}/* The control that opens the rest of a column, and a sibling of .lane-items rather than a child of
   it. Inside, it would be the last thing in a scrolling box - you would have to scroll a long
   column to its bottom to reach the button that exists because the column is long. */
.lane-more{width:100%;margin-top:9px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:#ffffff05;color:var(--muted);font-size:10.5px;font-weight:550;transition:background .15s,color .15s,border-color .15s}
.lane-more:hover{background:var(--hover);color:var(--text);border-color:var(--line2)}
.lane-items.drop-target{background:#b479e61b;outline:1px dashed #c085e68c;outline-offset:4px}.work-card{background:#241a30;border:1px solid #c196dc15;padding:13px;border-radius:11px;box-shadow:0 2px 6px #00000012;min-width:0;transition:border-color .15s,box-shadow .15s}.work-card:hover{border-color:#b87bdd55;box-shadow:0 6px 24px #00000020}.work-card .card-title{display:block;background:none;padding:0;font-size:12px;text-align:left;font-weight:500;line-height:1.6;margin:7px 0 11px;min-height:38px;color:#e3d7ed;width:100%;overflow-wrap:anywhere}.work-card small{font-size:9px}.work-card .card-top{display:flex;align-items:center;justify-content:space-between}.work-card .grip{height:20px;min-height:20px;margin:-5px -5px 0 0}.work-card .card-bottom{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:11px;margin-top:10px}.work-card .avatar{width:24px;height:24px;font-size:8px}.work-card .card-bottom .grow{font-size:9px;color:var(--muted)}.work-card .icon{width:10px;height:10px}.work-card .dependencies{font-size:9px;color:#e2b380;padding:7px 0 0;display:flex;gap:5px}
/* Sub-items live inside the card of the item they belong to. The left rule is what says "part of
   the thing above" without a second border drawing a box inside a box. Each row stays on one line
   however long the title is: a card that grows a line per sub-item stops being scannable, which is
   the whole reason they were not nested here before. */
.card-subs{margin-top:10px;padding-left:10px;border-left:2px solid #c196dc2e;display:grid;gap:6px}
.card-subs-head{font-size:9px;color:var(--faint);letter-spacing:.2px}
.card-sub{display:flex;align-items:center;gap:7px;min-width:0}
.card-sub .task-check{width:14px;height:14px;min-width:14px;border-radius:4px}
.card-sub .task-check .icon{width:9px;height:9px}
.card-sub-title{background:none;padding:0;border:0;font-size:11px;line-height:1.5;color:#cdbfd9;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.card-sub-title:hover{color:var(--text)}
.card-sub-status{font-size:9px;color:var(--faint);white-space:nowrap;flex-shrink:0}
.card-sub.done .card-sub-title{color:var(--faint);text-decoration:line-through}
/* Opens the rest of a card's sub-items in place. It is a real control now rather than a link into
   the dialog, so it gets a hit area and a hover state - but it lives inside a card, so it stays
   small enough not to compete with the sub-items it reveals. */
.card-sub-more{background:none;border:0;padding:4px 0 1px;font-size:9.5px;font-weight:550;color:#c8a3e1;text-align:left;transition:color .15s}
.card-sub-more:hover{color:#e8cdfa}.dragging{opacity:.35!important}.drag-ghost{position:fixed!important;z-index:1000!important;pointer-events:none!important;margin:0!important;box-shadow:0 22px 45px #0008!important;transform:rotate(2deg) scale(1.025);opacity:.97;border-color:#d19bef!important}.drop-before{box-shadow:0 -3px 0 #d69cf7!important}.board-help{font-size:10px;color:var(--faint);margin-top:7px;display:flex;align-items:center;gap:7px}.day-overview{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:22px}.day-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:20px 0}.day-cell{background:#1a1323;border:1px solid var(--line);padding:14px 5px;text-align:center;border-radius:11px}.day-cell span{display:block;font-size:10px;color:var(--faint)}.day-cell strong{font-size:20px;font-weight:500;display:block;margin-top:5px}.day-cell.active{border-color:#c58aee55;background:#9656c526;color:#e9c8fa}.day-cell.active span{color:#ce9deb}.day-cell i{display:block;width:4px;height:4px;border-radius:50%;background:var(--purple);margin:7px auto 0}.day-list{padding:0 21px 12px}.day-list .task-row{padding:18px 0}.focus-widget{padding:24px;text-align:center;background:radial-gradient(ellipse at top,#a45ddd12,transparent 75%),var(--panel)}.focus-time{font-size:48px;font-variant-numeric:tabular-nums;font-weight:450;letter-spacing:-2px;margin:22px 0 5px}.focus-widget p{font-size:11px;line-height:1.8}.focus-widget .row{justify-content:center;margin-top:19px}.workload-list{display:grid;gap:12px}.person-card{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(170px,1.5fr) minmax(180px,1.2fr) 95px;gap:22px;align-items:center;padding:19px 22px}.person-card .name{font-size:12px}.person-card .role{display:block;font-size:10px;margin-top:4px}.person-card .progress{margin:9px 0}.person-card small{font-size:10px}.people-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:24px}.request-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.request-card{padding:21px}.request-card h3{font-size:15px;line-height:1.5;margin:16px 0 10px;letter-spacing:-.2px}.request-card p{font-size:11px;line-height:1.9;white-space:pre-wrap;margin-bottom:19px}.request-card footer{border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}.request-card small{font-size:9px}.dropzone{border:1px dashed #bb80e443;border-radius:16px;background:linear-gradient(110deg,#9d6cc509,#d496f00a);padding:30px 20px;display:flex;align-items:center;justify-content:center;gap:15px;min-height:128px;margin-bottom:23px;transition:background .15s,border-color .15s}.dropzone.dragover{background:#b27ce42b;border-color:#d39df8}.dropzone .upload-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid #d99cff20;border-radius:13px;color:#cf98ef;background:#9a5bbe13}.dropzone .upload-icon .icon{width:19px;height:19px}.dropzone h3{font-size:13px}.dropzone p{font-size:10px;margin-top:5px}.dropzone .btn{margin-left:14px}.file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.file-card{overflow:hidden}.file-preview{height:155px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#623a7444,transparent),#171020;border-bottom:1px solid var(--line);position:relative;width:100%;padding:0;overflow:hidden}.file-preview img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.file-preview:hover img{transform:scale(1.03)}.file-preview>.icon{height:37px;width:37px;color:#b78ece}.file-preview .badge{position:absolute;bottom:10px;left:10px;background:#100919cc}.file-info{padding:15px}.file-info strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-info small{font-size:9px;display:block;margin:5px 0 11px}.file-info .between{gap:4px}.notes-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}.note-card{padding:20px;cursor:pointer;text-align:left}.note-card p{font-size:11px;margin-top:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.8}.note-card .eyebrow{font-size:8px;margin-top:17px}.timeline-box{overflow:hidden}.timeline-month{padding:18px 20px;border-bottom:1px solid var(--line)}.timeline-scroll{overflow-x:auto}.timeline{min-width:800px;display:grid;grid-template-columns:215px minmax(560px,1fr)}.timeline-labels{border-right:1px solid var(--line);background:#1b1526;z-index:1}.timeline-label{height:70px;padding:18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.timeline-label strong{font-size:11px}.timeline-label small{font-size:9px}.timeline-label.top{height:47px;color:var(--faint);font-size:10px}.timeline-chart{position:relative}.timeline-dates{height:47px;display:grid;grid-template-columns:repeat(28,1fr);align-items:center;border-bottom:1px solid var(--line)}.timeline-dates span{font-size:9px;color:var(--faint);text-align:center}.timeline-track{height:70px;position:relative;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 28 - 1px),#ffffff04 calc(100% / 28 - 1px),#ffffff04 calc(100% / 28))}.timeline-bar{position:absolute;top:23px;height:25px;min-width:8px;border-radius:6px;background:linear-gradient(90deg,#8552bc,#ba80d5);border:1px solid #dcaaed44;font-size:9px;padding:3px 10px;text-align:left;color:#f4e4ff;overflow:hidden;white-space:nowrap;transition:filter .2s}.timeline-bar:hover{filter:brightness(1.2)}.today-line{position:absolute;top:47px;bottom:0;width:1px;background:#dd9ef284;pointer-events:none}.today-line:before{content:'Today';font-size:8px;position:absolute;top:0;left:-12px;background:#7f468f;color:white;border-radius:3px;padding:1px 4px}.impact-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}.impact-card{padding:25px}.impact-card .value{font-size:38px;letter-spacing:-1.5px;margin:15px 0 6px;font-weight:500}.impact-card .desc{font-size:10px;line-height:1.8}.impact-card .icon{width:19px;height:19px}.outcome-row{display:grid;grid-template-columns:95px 1fr 30px;gap:15px;align-items:center;margin:20px 0;font-size:11px}.stakeholder-card{padding:24px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px;align-items:center}.stakeholder-card h3{font-size:17px}.stakeholder-card p{font-size:11px;line-height:1.8;margin-top:8px}.stakeholder-card .key-grid{padding:0;border:0;gap:15px}.stakeholder-card .key-grid strong{font-size:11px}.chat-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;min-height:calc(100vh - 230px)}.chat-context{border-right:1px solid var(--line);padding-right:22px}.chat-context p{font-size:11px;line-height:1.8;margin-top:12px}.chat-context select{font-size:11px;margin:16px 0}.chat-area{display:flex;flex-direction:column;min-width:0;max-width:860px;width:100%;margin:auto;min-height:calc(100vh - 230px)}.chat-welcome{text-align:center;margin:auto;padding:35px 10px;max-width:600px;align-self:center}.chat-welcome img{height:93px;filter:drop-shadow(0 0 24px #b367e52f);margin-bottom:27px;animation:soft-glow 5s ease-in-out infinite}.chat-welcome h2{font-size:30px;line-height:1.3;font-weight:500;letter-spacing:-1px}.chat-welcome p{font-size:12px;line-height:1.8;margin:13px auto 25px;max-width:420px}.prompt-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.prompt-grid button{border:1px solid var(--line2);background:#21162c;text-align:left;padding:14px;border-radius:10px;font-size:11px;display:flex;align-items:center;gap:10px;color:#cdbadb}.prompt-grid button:hover{border-color:#ce92f050;background:#2a1a39}.prompt-grid .icon{color:#c791eb;width:12px;height:12px}.chat-composer{margin-top:auto;padding-top:20px}.chat-composer form{display:flex;align-items:center;gap:13px;border:1px solid #bd83e548;padding:12px 14px;border-radius:14px;background:#21172c;box-shadow:0 7px 40px #08051030}.chat-composer textarea{min-height:27px;height:27px;max-height:150px;padding:2px;background:none;border:0;resize:none;font-size:12px}.chat-composer small{display:block;font-size:9px;text-align:center;margin:10px 0 0;color:var(--faint)}.messages{display:grid;gap:20px;padding:7px 0 25px}.message{padding:19px 21px;border:1px solid var(--line);border-radius:15px;background:#1c1427;max-width:95%}.message.user{margin-left:auto;background:#50316a39;border-color:#bd89dd22;max-width:85%}.message-label{display:flex;align-items:center;gap:7px;font-size:9px;color:#b994d4;margin-bottom:11px}.message-label img{width:14px;height:18px}.message-body{white-space:pre-wrap;font-size:12px;line-height:1.9;color:#ded2e7;overflow-wrap:anywhere}.message-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.message-sources button{background:#ac79d712;border:1px solid #b788d622;color:#cfa5ed;border-radius:6px;font-size:9px;padding:5px 8px;text-align:left}.thinking{padding:15px 20px;color:var(--muted);font-size:11px;display:flex;gap:5px;align-items:center}.thinking i{display:block;width:4px;height:4px;border-radius:50%;background:#bb80df;animation:thinking 1.4s infinite}.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}/* The pillar a project belongs to, beside its name on the roadmap. The mark sits on its own row
   with the name so a wrapped two-line project title does not push it out of line with the bar. */
.timeline-label-row{display:flex;align-items:flex-start;gap:9px}
.timeline-label-row .timeline-mark{margin-top:2px}
/* The name is a button and the pillar beneath it is a <small>, both inline by default, so they
   ran together on one line and read as one word: "test 2Catalyst". */
.timeline-label-row .btn.text{display:block;width:100%}
.timeline-label-row small{display:block;margin-top:2px}
.timeline-mark{width:22px;height:22px;flex-shrink:0;border-radius:6px;object-fit:contain}
span.timeline-mark{display:inline-flex;align-items:center;justify-content:center;background:#2b203b;border:1px solid var(--line2);font-size:10px;font-weight:650}
/* Sticky notes. Deliberately quieter than a work item: these are somebody's own small jobs, and a
   list that shouts competes with the actual plan beside it. Colour is the one loud thing, because
   it is the only way one note is told from another without reading all of them.
   One tile width covers both homes: auto-fill gives a single column in the 275px My Day rail and
   four or five across the full-width All work page, with no second rule and no page-aware markup. */
.sticky-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr))}
/* The hue is held once per colour and mixed twice, so a card and its swatch can never drift apart
   and a sixth colour is one line rather than four. */
.sticky[data-colour=yellow],.sticky-swatch[data-colour=yellow]{--note-hue:#efc963}
.sticky[data-colour=pink],.sticky-swatch[data-colour=pink]{--note-hue:#ef86b4}
.sticky[data-colour=blue],.sticky-swatch[data-colour=blue]{--note-hue:#72b7ef}
.sticky[data-colour=green],.sticky-swatch[data-colour=green]{--note-hue:#72d7a4}
.sticky[data-colour=purple],.sticky-swatch[data-colour=purple]{--note-hue:#b98cef}
.sticky{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--note-hue) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--note-hue) 38%,transparent)}
.sticky .task-check{margin-top:1px;flex-shrink:0}
/* The body is a button so the whole line opens the editor, but it has to read as text: give it a
   control's affordances and every note on the page looks like something that does something. */
.sticky-body{background:none;border:0;padding:0;text-align:left;font:inherit;font-size:12px;
  line-height:1.55;color:var(--text);word-break:break-word;white-space:pre-wrap;cursor:text}
.sticky-body:hover{text-decoration:underline;text-decoration-color:var(--note-hue)}
.sticky-text{display:grid;gap:6px;justify-items:start;min-width:0}
/* Which project a note was written on, shown where every note is listed. Quiet, because the note is
   the point; a link, because the project is the next place you would go. */
.sticky-project{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 7px 2px 3px;border-radius:999px;background:color-mix(in srgb,var(--note-hue) 14%,transparent);
  font-size:9px;font-weight:550;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-project:hover{color:var(--text)}
.sticky-project .pillar-badge{transform:scale(.8)}
.sticky-scope{font-size:11px;color:var(--muted);margin:0 0 10px}
.sticky.done{background:#ffffff08;border-color:var(--line)}
.sticky.done .sticky-body{color:var(--muted);text-decoration:line-through}
.sticky.editing{display:block;padding:9px}
.sticky.editing .field{margin:0}
.sticky textarea{font-size:12px;line-height:1.55;min-height:62px;resize:vertical}
/* The compose box is one surface, the shape the Sidekick composer already uses: the box you type
   into holds its own controls along the bottom. The palette belongs to the note being written, and
   laid out beside the box it sat in open space between the words and the button, belonging to
   neither - five coloured dots reading as decoration somebody had dropped in the gap. */
.sticky-new{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:11px 12px;
  border:1px solid var(--line2);border-radius:12px;background:#0f0c17}
.sticky-new .field{margin:0}
.sticky-new textarea{min-height:40px;padding:0;border:0;background:none;font-size:12px;resize:none}
.sticky-new .sticky-foot{margin-top:0}
/* The ring belongs to the box, the way it does on the Sidekick composer. Left on the textarea, the
   shared focus outline drew itself 4px outside a borderless field and read as a second, crooked
   box floating inside the first one. */
.sticky-new:focus-within{border-color:#cf9bf07d;box-shadow:0 0 0 3px rgba(199,142,239,.11)}
.sticky-new textarea:focus-visible{outline:none}
.sticky-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;flex-wrap:wrap}
.sticky-foot .btn{flex-shrink:0}
.sticky-colours{border:0;padding:0;margin:0;display:flex;align-items:center;gap:5px}
/* The radio itself covers the swatch at zero opacity rather than being hidden: an input with
   display:none is not focusable, and the arrow-key selection is half the reason it is a radio. */
.sticky-swatch{position:relative;display:grid;place-items:center;width:20px;height:20px}
.sticky-swatch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
/* The unchosen colours sit back - smaller and half lit - so the row reads as one setting rather
   than five buttons shouldering the one real button beside it. That was the complaint: at equal
   size and full strength a palette and a primary action look like the same kind of thing.
   The chosen one grows a halo, so which colour is selected is carried by size and by shape and not
   only by which dot is brightest - the one cue a row of five colours cannot rely on. */
.sticky-swatch i{display:block;width:12px;height:12px;border-radius:50%;background:var(--note-hue);
  opacity:.45;transition:opacity .15s,width .15s,height .15s,box-shadow .15s}
.sticky-swatch:hover i{opacity:.8}
.sticky-swatch input:checked+i{width:14px;height:14px;opacity:1;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--note-hue) 40%,transparent)}
/* An outline rather than another box-shadow, or focusing the chosen swatch would rub out its ring. */
.sticky-swatch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:3px}
/* The vendored chevron points right, so a disclosure turns it a quarter rather than a half. */
.sticky-chevron .icon{transition:transform .15s}
.sticky-chevron[aria-expanded=true] .icon{transform:rotate(90deg)}
/* A collapsed panel has nothing in its body, and an empty body still carried its own padding -
   a band of blank panel under the heading that looked like something had failed to render. */
.panel-body:empty{padding:0}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.access-list{margin-top:18px;border-top:1px solid var(--line)}
.access-search{margin-top:18px}
.input-icon.access-search input{width:100%}
.access-none{font-size:11px;line-height:1.8;padding:18px 0;color:var(--faint);border-top:1px solid var(--line);margin-top:18px}
.file-actions{gap:4px}
.access-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.access-row small{display:block}
/* Capped so a long job title ellipses instead of squeezing the select it sits beside. */
.access-row .grow strong,.access-row .grow small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.access-pick{flex:0 0 auto;width:148px}
.access-pick select{min-height:34px;padding:6px 9px;font-size:11px}
@media(max-width:520px){.access-row{flex-wrap:wrap}.access-pick{width:100%}}.setting-row:last-child{border:0}.setting-row p{font-size:11px;line-height:1.8;margin-top:5px}.toggle{min-width:37px;width:37px;height:22px;border:1px solid #4f3b60;border-radius:15px;background:#2b2135;position:relative}.toggle:after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#aa93ba;transition:transform .2s}.toggle[aria-checked=true]{background:#945bc2;border-color:#bd85dd}.toggle[aria-checked=true]:after{transform:translateX(14px);background:#f1dafb}.empty{padding:40px 24px;text-align:center;display:grid;justify-items:center;gap:12px}.empty>.icon{width:27px;height:27px;color:#9d78ba;margin-bottom:7px}.empty h3{font-size:14px}.empty p{font-size:11px;max-width:330px;line-height:1.8}.upload-progress{width:100%;max-width:400px;margin:12px auto;font-size:11px}.upload-progress .progress{margin-top:6px}
/* Native dialogs: focus-trapped by the browser, with semantic forms. */
dialog{background:#1b1326;color:var(--text);border:1px solid #c58de534;border-radius:18px;padding:0;width:min(650px,calc(100vw - 30px));max-height:calc(100dvh - 50px);box-shadow:0 32px 160px #000a;overflow:hidden}dialog::backdrop{background:#08050fad;backdrop-filter:blur(6px)}dialog[open]{display:flex;flex-direction:column;animation:dialog-in .22s cubic-bezier(.2,.8,.2,1)}dialog.wide{width:min(900px,calc(100vw - 30px))}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 23px;border-bottom:1px solid var(--line);flex-shrink:0;background:#1b1326f5}.dialog-head h2{font-size:17px;letter-spacing:-.4px;line-height:1.4}.dialog-head .eyebrow{font-size:8px;margin-bottom:4px}.dialog-body{padding:23px;overflow-y:auto;min-height:0}.dialog-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:17px 23px;border-top:1px solid var(--line);flex-shrink:0;background:#1b1326f7}.field{display:block;margin-bottom:17px;min-width:0}.field>span{display:block;font-size:11px;font-weight:500;color:#bdaaCC;margin-bottom:7px}.field small{display:block;margin-top:6px;font-size:9px;line-height:1.6}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 17px}.form-grid .full{grid-column:1/-1}.field textarea{font-size:12px;line-height:1.75}.field select{font-size:11px}.field select[multiple]{min-height:96px}.dialog-title-input{font-size:21px;letter-spacing:-.4px;font-weight:500;background:transparent;border-color:transparent;padding:0;min-height:42px;border-radius:0}.dialog-title-input:focus{border-bottom-color:var(--accent)}.detail-tabs{display:flex;gap:7px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:12px}.detail-section{margin:25px 0}.detail-section h3{font-size:12px;margin-bottom:13px}.comment{display:flex;gap:10px;margin:14px 0}.comment p{font-size:11px;white-space:pre-wrap;color:#cdbfd6;line-height:1.8;margin-top:5px}.comment small{font-size:9px;color:var(--faint)}.comment strong{font-size:10px}.form-error{background:#632a382d;border:1px solid #c0647b40;border-radius:9px;color:#ffb2c6;font-size:11px;padding:11px 13px;margin:0 0 17px;line-height:1.8}.form-error:empty{display:none}.check-label{display:flex;gap:9px;align-items:center;font-size:11px;color:var(--muted)}/* The UA sheet hides [hidden] elements with display:none, which any author display rule beats.
   Searching the collaborator list hides rows, so the rule has to be restated here to have effect. */
.check-label[hidden]{display:none}.disclosure{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:13px 0}.disclosure summary{cursor:pointer;font-size:11px;color:#c8a3e1}.disclosure[open] summary{margin-bottom:17px}.search-dialog{padding:0}.palette-search{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid var(--line)}.palette-search input{border:0;background:none;min-height:34px;padding:0;font-size:14px}.palette-list{padding:10px;max-height:450px;overflow:auto}.palette-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px;background:none;text-align:left;border-radius:8px;color:#d9c9e6;font-size:12px}.palette-item:hover,.palette-item:focus{background:#9b61c51c}.palette-item small{display:block;font-size:9px;color:var(--faint)}.palette-item .icon{color:#ac80cb;width:13px;height:13px}.palette-footer{padding:12px 20px;font-size:9px;color:var(--faint);border-top:1px solid var(--line)}.file-lightbox img{width:100%;max-height:70vh;object-fit:contain}.file-frame{display:block;width:100%;height:72vh;border:1px solid var(--line);border-radius:10px;background:#fff}.plain-document{white-space:pre-wrap;font-size:12px;line-height:1.9;color:#d2c3df}.user-form{margin-top:20px}.auth-screen{min-height:100vh;display:grid;grid-template-columns:1.2fr 1fr;background:radial-gradient(ellipse at 15% 35%,#3d20564a,transparent 60%),var(--bg);overflow:hidden}.auth-visual{display:flex;flex-direction:column;justify-content:space-between;padding:45px 55px;position:relative;min-height:100vh;border-right:1px solid var(--line)}.auth-visual .brand{padding:0}.auth-hero{max-width:460px;position:relative;z-index:2}.auth-hero h1{font-size:53px;line-height:1.11;letter-spacing:-2.5px;font-weight:500}.auth-hero h1 span{color:#d49aec}.auth-hero p{font-size:13px;max-width:340px;line-height:1.9;margin-top:22px}.auth-art{height:225px;position:relative;margin-bottom:45px;margin-top:40px;display:grid;place-items:center}.auth-art img{height:162px;width:140px;object-fit:contain;filter:drop-shadow(0 0 35px #ca7dff36);animation:float-logo 9s ease-in-out infinite;transform:rotate(-12deg)}.auth-art .orb-ring{inset:0 85px}.auth-foot{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8e749f;display:flex;gap:21px}.auth-form-wrap{padding:45px;display:grid;place-items:center;min-width:0}.auth-form{max-width:360px;width:100%}.auth-form h2{font-size:27px;letter-spacing:-1px;font-weight:550;margin:8px 0 11px}.auth-form>p{font-size:12px;line-height:1.8;margin-bottom:27px}.auth-form .eyebrow{font-size:9px}.auth-form input{min-height:44px;font-size:12px}.auth-form .field{margin-bottom:18px}.auth-form .primary{min-height:45px;margin-top:18px}.auth-form .auth-note{font-size:10px;line-height:1.9;margin-top:20px;color:var(--faint)}.auth-form .shield-note{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);margin-top:22px}.auth-form .shield-note .icon{width:11px;height:11px}.preview-login{padding:21px;border:1px solid #cc94ed24;border-radius:14px;background:#291a3729;margin-bottom:17px}.preview-login p{font-size:11px;line-height:1.8;margin-top:8px}.preview-login .btn{margin-top:17px}#toasts{position:fixed;z-index:1200;bottom:24px;left:50%;transform:translateX(-50%);display:grid;gap:10px;width:max-content;max-width:calc(100vw - 25px);pointer-events:none}.toast{pointer-events:auto;background:#302039;border:1px solid #ca9de44d;border-radius:11px;padding:13px 16px;display:flex;align-items:center;gap:11px;box-shadow:0 10px 40px #0006;font-size:11px;animation:toast-in .2s;max-width:580px}.toast.error{background:#3d202c;border-color:#c16c8666;color:#ffcedc}.toast .icon{width:13px;height:13px;color:#c893e5}.toast.error .icon{color:#f1a2b9}.toast button{background:#ffffff08;border:1px solid #ffffff18;border-radius:5px;color:#e5b8fb;font-size:10px;padding:3px 9px;white-space:nowrap}.menu-shade{display:none}.compact .task-row{padding-top:9px;padding-bottom:9px}.compact .project-card{padding:16px}.compact .page{padding-top:22px}.confetti{position:fixed;z-index:1100;width:5px;height:9px;border-radius:70%;background:#d194f2;pointer-events:none}.no-motion *,.no-motion *:before,.no-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes float-logo{0%,100%{transform:translateY(0) rotate(-11deg)}50%{transform:translateY(-8px) rotate(-4deg)}}@keyframes soft-glow{0%,100%{opacity:.86;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}@keyframes rise{from{transform:scaleY(.3);transform-origin:bottom;opacity:.3}to{transform:scaleY(1);transform-origin:bottom;opacity:1}}@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes thinking{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media(min-width:1750px){.sidebar{width:245px}.app-shell{grid-template-columns:245px minmax(0,1fr)}.page{padding:35px 42px}.topbar{padding:0 42px}.content-rail{grid-template-columns:minmax(0,1fr) 315px;gap:28px}.sidekick-body{padding:0 23px 23px}.hero{min-height:248px}.hero h2{font-size:37px}}
@media(max-width:1320px){.content-rail{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.sidebar{width:203px;padding-left:12px;padding-right:12px}.app-shell{grid-template-columns:203px minmax(0,1fr)}.page{padding:25px 24px}.topbar{padding:0 24px}.search-button{width:450px}.hero{padding:25px}.hero h2{font-size:29px}.hero-copy{max-width:67%}.pillars-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.request-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.person-card{grid-template-columns:1.3fr 1.5fr 95px}.person-card .person-pillars{display:none}.two-col{gap:14px}.metric{padding:16px}.metric strong{font-size:27px}.spark-bars{right:13px;gap:3px}.spark-bars i{width:3px}.day-overview{grid-template-columns:minmax(0,1fr) 240px}.file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stakeholder-card{grid-template-columns:1.3fr 1fr}.stakeholder-card .stakeholder-value{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}.hero .eyebrow{font-size:8px}}
@media(max-width:1100px){.content-rail{display:block}.sidekick-rail{display:none}.hero-copy{max-width:62%}.hero h2{font-size:34px}.pillars-grid{grid-template-columns:repeat(4,1fr)}.day-overview{display:block}.day-widgets{display:grid;grid-template-columns:1fr 1fr;margin-top:22px}.chat-layout{grid-template-columns:175px minmax(0,1fr);gap:18px}.settings-grid{grid-template-columns:1fr}.search-button .search-label{display:none}.search-button{min-width:90px}.auth-hero h1{font-size:42px}.auth-visual{padding:35px}.auth-art .orb-ring{inset:0 35px}.project-summary{grid-template-columns:1fr}.impact-card .value{font-size:31px}.impact-card{padding:20px}.three-col{gap:12px}.person-card{gap:14px}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:transform .22s;width:235px}.sidebar.open{transform:translateX(0)}.app-shell{display:block}.workspace{width:100%}.topbar{height:64px;padding:0 18px;gap:10px}.mobile-menu{display:inline-flex}.crumb{font-size:10px;gap:8px}.crumb>span{display:none}.crumb>.icon{display:none}.top-actions{gap:5px}.top-actions>.btn.primary{padding:8px 10px;font-size:10px}.top-actions .search-button{padding:9px;width:auto}.search-button .kbd{display:none}.top-actions .desktop-only{display:none}.page{padding:24px 18px}.page-title h1{font-size:28px}.page-title{align-items:flex-start;gap:10px;margin-bottom:23px}.page-title p{font-size:11px;line-height:1.7}.page-title>.row{flex-wrap:wrap;justify-content:flex-end}.page-title>.btn{font-size:10px;min-height:32px;padding:7px 10px}.menu-shade.visible{display:block;position:fixed;inset:0;background:#06040bb8;z-index:39;backdrop-filter:blur(4px)}.hero{padding:24px;min-height:232px}.hero h2{font-size:31px}.hero-copy{max-width:65%}.pillars-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pillar-card{padding:12px}.pillar-card .row{gap:6px}.pillar-card strong{font-size:10px}.pillar-symbol{width:22px;height:22px;font-size:9px}.panel-header{padding-left:18px;padding-right:18px}.panel-body{padding-left:18px;padding-right:18px}.three-col{gap:10px}.metric{padding:15px}.metric small{font-size:9px}.metric .eyebrow{font-size:10px}.metric-icon{width:25px;height:25px}.spark-bars{display:none}.auth-screen{grid-template-columns:1fr}.auth-visual{display:none}.auth-form-wrap{min-height:100vh;padding:32px 24px;background:radial-gradient(ellipse at top,#44255555,transparent 70%)}.auth-form:before{content:'';display:block;width:50px;height:62px;background:url('/assets/chumley-logo.png') center/contain no-repeat;margin-bottom:35px}.request-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.person-card{padding:17px;grid-template-columns:1fr 1fr;gap:15px}.person-card>.btn{grid-column:2;justify-self:end}.person-card .person-load{grid-column:2;grid-row:1}.people-summary{gap:10px}.chat-layout{display:block}.chat-context{display:none}.chat-area{min-height:calc(100dvh - 210px)}.chat-welcome{padding:25px 0}.chat-welcome h2{font-size:27px}.chat-welcome img{height:70px;margin-bottom:20px}.impact-metrics{gap:10px}.impact-card{padding:17px}.impact-card .value{font-size:27px}.impact-card .desc{font-size:9px}.stakeholder-card{padding:20px;gap:18px}.two-col{gap:17px}.dropzone{flex-wrap:wrap;justify-content:flex-start;padding:23px}.dropzone .btn{margin-left:auto}.notes-list{gap:12px}.settings-grid{gap:16px}.board{grid-template-columns:repeat(6,215px);min-width:1365px}.day-strip{gap:6px}.day-cell{padding:12px 5px}.day-cell strong{font-size:18px}.hero .eyebrow{font-size:8px}}
@media(max-width:520px){.back-button .back-label{display:none}.topbar{padding:0 12px}.top-actions .btn[data-action=sidekick-panel]{display:none}.crumb{font-size:10px}.page{padding:22px 15px}.page-title{flex-wrap:wrap}.page-title h1{font-size:27px}.page-title>div:first-child{max-width:100%}.hero{padding:23px 20px;min-height:247px}.hero-copy{max-width:82%}.hero h2{font-size:29px}.hero p{max-width:220px;font-size:10px}.hero .btn{font-size:10px}.three-col{gap:8px}.metric{padding:13px 11px}.metric-icon{width:22px;height:22px;border-radius:6px}.metric-icon .icon{width:10px;height:10px}.metric .eyebrow{font-size:9px}.metric strong{font-size:26px;margin:8px 0 4px}.metric small{font-size:8px}.metric-label{gap:3px}.two-col{grid-template-columns:1fr}.panel-header{padding:18px 16px 12px}.panel-body{padding:0 16px 18px}.panel-header h2{font-size:13px}.panel-header .btn{font-size:10px}.attention p{font-size:9px}.attention strong{font-size:11px}.attention-icon{height:29px;width:29px;border-radius:8px}.attention .btn{padding:5px 6px;font-size:9px}.task-row{gap:9px}.task-row .task-title{font-size:11px}.task-row small{font-size:9px}.task-meta{gap:5px}.task-meta .badge{font-size:8px;padding:3px 5px}.task-meta .task-hours{display:none}.task-meta .avatar{display:none}.pillars-grid{grid-template-columns:repeat(2,1fr)}.pillar-card{padding:15px}.pillar-card strong{font-size:11px}.project-grid{grid-template-columns:1fr}.request-grid{grid-template-columns:1fr}.project-card{padding:22px}.toolbar{gap:12px}.toolbar>.tabs{width:100%;gap:2px}.tab{padding:6px 9px;font-size:10px}.tabs.underline{gap:14px;overflow-x:auto;flex-wrap:nowrap}.tabs.underline .tab{font-size:11px}.input-icon input{width:190px}.project-summary{gap:16px}.key-grid{gap:14px}.page-title .avatar-stack{display:none}.project-header-buttons{width:100%;justify-content:flex-start!important}.day-overview{display:block}.day-list{padding:0 16px 10px}.day-strip{gap:4px}.day-cell{padding:9px 3px;border-radius:9px}.day-cell span{font-size:9px}.day-cell strong{font-size:17px}.day-widgets{grid-template-columns:1fr}.person-card{grid-template-columns:1fr;gap:15px}.person-card .person-load{grid-column:1;grid-row:auto}.person-card>.btn{grid-column:1;justify-self:start}.people-summary .metric strong{font-size:24px}.people-summary .metric small{font-size:9px}.file-grid{grid-template-columns:1fr 1fr;gap:11px}.file-preview{height:125px}.file-info{padding:12px}.file-info strong{font-size:10px}.file-info .btn{padding:5px 7px;font-size:9px}.file-info .btn .icon{width:10px;height:10px}.dropzone{padding:22px 16px;gap:12px}.dropzone .upload-icon{width:36px;height:36px}.dropzone h3{font-size:12px}.dropzone p{font-size:9px}.dropzone .btn{margin-left:48px}.notes-list{grid-template-columns:1fr}.impact-metrics{grid-template-columns:1fr}.impact-card .value{font-size:34px}.impact-card .desc{font-size:11px}.stakeholder-card{grid-template-columns:1fr}.stakeholder-card .key-grid{border-top:1px solid var(--line);padding-top:18px}.stakeholder-card .stakeholder-value{grid-column:1}.chat-welcome h2{font-size:26px}.prompt-grid{gap:8px}.prompt-grid button{font-size:10px;padding:12px;line-height:1.6;gap:8px}.chat-composer form{padding:11px;gap:10px}.chat-composer small{font-size:8px}.message{padding:17px;max-width:100%}.message-body{font-size:11px}.message-label{font-size:8px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:1}.dialog-body{padding:19px}.dialog-head{padding:18px 19px}.dialog-foot{padding:14px 19px}.dialog-head h2{font-size:16px}.dialog-title-input{font-size:18px}.auth-form h2{font-size:26px}.setting-row p{font-size:10px}.setting-row strong{font-size:12px}.toast{font-size:10px;padding:11px 13px}h2{font-size:16px}.desktop-only{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sidebar{scrollbar-width:none;-ms-overflow-style:none}.sidebar::-webkit-scrollbar{width:0;height:0;display:none}
.orb-stage{position:relative;width:min(258px,64vw);aspect-ratio:1/1;margin:0 auto 6px;display:grid;place-items:center}.orb-canvas{position:absolute;inset:0;pointer-events:none}.orb-canvas canvas{display:block;width:100%;height:100%}.chat-welcome .orb-stage img{position:relative;margin-bottom:0}.orb-stage.orb-live img{opacity:0;animation:none}@media(max-width:800px){.orb-stage{width:min(200px,60vw);margin-bottom:2px}}

/* ---- Delivery forecast ------------------------------------------------------------------- */
.panel-note{font-size:11px;line-height:1.8;color:var(--muted)}
.empty-line{font-size:11px;color:var(--faint);padding:18px 0;text-align:center}
.queue-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.queue-row:last-child{border-bottom:0}
.queue-row .grow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.queue-row strong{font-size:11px}
.queue-row small{font-size:10px;color:var(--faint);display:block;width:100%}
.queue-when{text-align:right;display:grid;gap:5px;justify-items:end;flex-shrink:0}
.queue-when strong{font-size:11px;white-space:nowrap}
.queue-when small{font-size:10px;color:var(--faint)}
.what-if-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.what-if-form .field{margin:0;flex:1 1 190px}
/* One height for all three controls in this row.
   They were 42px, 43.5px and 37px, because .field select is set to 11px, .field input inherits
   13px and .btn is 12px with its own smaller padding - three font sizes and two padding scales
   meeting in one row. align-items:flex-end lined their bottoms up, which is what made the button
   look dropped: same baseline, visibly shorter box. 44px is the tallest natural height of the
   three, so nothing is compressed to reach it. */
.what-if-form{--control-h:44px}
.what-if-form .field select,
.what-if-form .field input,
.what-if-form .btn{height:var(--control-h);min-height:var(--control-h)}
.what-if-form .field:nth-of-type(2){flex:0 0 120px}
.cascade-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-top:20px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:#ffffff05}
.cascade-head h4{font-size:14px;margin:4px 0 3px}
.cascade-head small{font-size:10px;color:var(--faint)}
.cascade-dates{text-align:right}
.cascade-dates strong{display:block;font-size:12px;margin:4px 0}
.cascade-dates small{display:block;font-size:10px;color:var(--faint)}
.cascade-list{display:grid;gap:8px;margin-top:10px}
.cascade-item{display:flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:8px;background:#ffffff04}
.cascade-item strong{font-size:11px;display:block}
.cascade-item small{font-size:10px;color:var(--faint)}
.cascade-shift{text-align:right;flex-shrink:0;display:grid;gap:4px;justify-items:end}
.cascade-shift small{font-size:10px;color:var(--muted);white-space:nowrap}
.cascade-shift span{font-size:10px;font-weight:550;color:var(--amber);white-space:nowrap}
.notice.danger{color:#f0b9c6;background:#2b1620;border-color:#f494a92e}
.gantt-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:10px;color:var(--faint)}
.gantt-legend .key{width:11px;height:11px;border-radius:3px;display:inline-block;margin-left:9px}
.gantt-legend .key:first-child{margin-left:0}
.gantt-legend .key.bar-critical{background:#f494a9}
.gantt-legend .key.bar-active{background:#c17aec}
.gantt-legend .key.bar-pending{background:#4a3c63}
.gantt-legend .key.bar-blocked{background:#f1c58b}
/* Frappe Gantt (MIT) ships a light theme driven by custom properties, so the workspace palette is
   applied here rather than by editing the vendored stylesheet. */
.gantt-frame{--g-bar-color:#3d3054;--g-bar-border:#3d3054;--g-arrow-color:#8878a5;--g-border-color:var(--line);
  --g-row-color:rgba(255,255,255,.015);--g-row-border-color:rgba(220,193,255,.07);--g-header-background:#171122;
  --g-text-dark:#f4eefc;--g-text-light:#f4eefc;--g-text-muted:#a092b0;--g-tick-color:rgba(220,193,255,.06);
  --g-tick-color-thick:rgba(220,193,255,.13);--g-today-highlight:#c17aec;--g-weekend-highlight-color:rgba(255,255,255,.022);
  --g-weekend-label-color:#6f6280;--g-progress-color:#523f6e;--g-actions-background:#241a31;--g-popup-actions:#241a31;
  overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#130f1d}
/* The chart scrolls inside Frappe's own container rather than this frame. Its date header is sticky
   to the nearest box that scrolls, and that container only ever scrolled sideways - with the frame
   doing the vertical scroll, the dates went up and out of sight with the first row. */
.gantt-frame .gantt-container{height:auto;max-height:540px}
.rt-controls .forecast-project select{min-height:30px;padding:4px 30px 4px 10px;font-size:11px;max-width:280px}
/* The month label pins to the left edge while the header scrolls under it, and the vendored rule
   gives it a hardcoded white background to hide what passes behind. Every other colour in here is
   a --g- variable, so this is the one that did not follow the theme: light text on white, which
   read as a blank white block. It has to stay opaque to do its job, so it takes the header's own
   colour rather than becoming transparent. */
.gantt-frame .current-upper{background:var(--g-header-background)}
.gantt-frame .bar-wrapper.bar-critical .bar{fill:#7b2f45;stroke:#f494a9;stroke-width:1}
.gantt-frame .bar-wrapper.bar-active .bar{fill:#54356f;stroke:#c17aec;stroke-width:1}
.gantt-frame .bar-wrapper.bar-pending .bar{fill:#332845;stroke:#4a3c63;stroke-width:1}
.gantt-frame .bar-wrapper.bar-blocked .bar{fill:#6b4a24;stroke:#f1c58b;stroke-width:1}
.gantt-frame .bar-label{fill:#f4eefc;font-size:11px}
/* The bars open the work item, so they take focus. An outline on an SVG group is drawn
   inconsistently between engines; stroking the bar itself is not. */
.gantt-frame .bar-wrapper:focus-visible{outline:none}
.gantt-frame .bar-wrapper:focus-visible .bar{stroke:#d7a1ff;stroke-width:2}
.gantt-frame .popup-wrapper{background:#241a31;color:var(--text);border:1px solid var(--line);font-size:11px;line-height:1.7}
.gantt-frame .popup-wrapper .title{color:var(--text);font-size:11px}
.gantt-frame .popup-wrapper .subtitle,.gantt-frame .popup-wrapper .details{color:var(--muted);font-size:10px}
@media(max-width:800px){.what-if-form{flex-direction:column;align-items:stretch}.what-if-form .field,.what-if-form .field:nth-of-type(2){flex:1 1 auto}.cascade-item,.queue-row{flex-wrap:wrap}.cascade-shift,.queue-when{text-align:left;justify-items:start}.gantt-frame .gantt-container{max-height:420px}}

/* The Sidekick rail runs the same interactive orb as the Sidekick page. .sidekick-visual fixes a
   height, but the orb needs a square box, so the size is set here for the rail's 282px column.
   Without WebGL the orb never adds .orb-live, and the mark below keeps its own glow. */
.sidekick-visual.orb-stage{width:min(178px,72%);height:auto;aspect-ratio:1/1;margin:4px auto 0}
.sidekick-visual.orb-stage img{width:57px;height:71px}
.voice-mic .icon{width:13px;height:13px}.voice-mic.listening{background:#b06ce6;border-color:#d8a7f2;color:#1c0f28}.voice-mic.listening .icon{color:#1c0f28}.voice-mic.listening:after{content:'';position:absolute;inset:-4px;border-radius:11px;border:1px solid #d59bf5;animation:mic-pulse 1.5s ease-out infinite;pointer-events:none}.voice-mic{position:relative}@keyframes mic-pulse{0%{opacity:.75;transform:scale(.94)}100%{opacity:0;transform:scale(1.18)}}.voice-reply .icon{width:12px;height:12px}.voice-reply[aria-pressed=false]{color:var(--faint)}.voice-reply[aria-pressed=false] .icon{color:var(--faint)}.voice-reply[aria-pressed=true]{color:#e4bafa;border-color:#c98eef66;background:#aa64df1f}.voice-reply[aria-pressed=true] .icon{color:#d49cf2}.msg-speak{margin-left:auto;background:none;border:0;padding:3px;min-height:0;color:#8e7e9e;border-radius:5px}.msg-speak .icon{width:11px;height:11px;display:block}.msg-speak:hover{color:#d49cf2;background:#ffffff08}.msg-speak.speaking{color:#d49cf2}.msg-speak.speaking .icon{animation:soft-glow 1.4s ease-in-out infinite}.voice-status{font-size:9px;text-align:center;margin:9px 0 0;color:#c294e5;min-height:12px}.voice-status:empty{margin:0;min-height:0}.voice-status.problem{color:var(--red);max-width:520px;margin-left:auto;margin-right:auto;line-height:1.7}
/* The same status line appears under the Sidekick composer, where it is centred under the field,
   and under Hear it in Settings, where centring it would leave it floating away from the button
   it belongs to. */
.setting-row .voice-status{text-align:left;font-size:10px}.setting-row .natural-status{font-size:10px;line-height:1.6;color:var(--faint);margin-top:10px}.setting-row .natural-status:empty{display:none}
.setting-row .voice-status.problem{max-width:none;margin-left:0;margin-right:0}@media(max-width:800px){.voice-reply span{display:none}}

/* ---- Pillar pixel cards ------------------------------------------------------------------
   The pixel field is painted into a canvas behind the card content. .panel already clips to the
   card radius, so the field needs no rounding of its own. Layers: glow, pixels, then content. */
.pillar-card{position:relative;isolation:isolate}
.pixel-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.26}
.pillar-card>*:not(.pixel-canvas){position:relative;z-index:2}
.pillar-card:before{content:'';position:absolute;inset:0;margin:auto;aspect-ratio:1;z-index:0;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,var(--pixel-active,#bc91ff),transparent 72%);
  opacity:0;transition:opacity .8s cubic-bezier(.5,1,.89,1)}
.pillar-card:hover:before,.pillar-card:focus-visible:before{opacity:.07}
/* The pillar's own colour picks up the border on hover, replacing the shared purple. */
.pillar-card:hover,.pillar-card:focus-visible{border-color:color-mix(in srgb,var(--pixel-active) 28%,transparent)}
@media(prefers-reduced-motion:reduce){.pillar-card:before{transition:none}}
.search-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A 570px search bar only fits where the topbar has room for it. These let
   the shrink reach it: without min-width:0 the flex items keep their
   automatic minimum size and the row overflows instead of yielding. */
.topbar>.row{min-width:0}.top-actions{min-width:0}.crumb{min-width:0}

/* ---- Text CTAs ---------------------------------------------------------------------------
   The theme layer gives every .btn a glass treatment - translucent fill, an inset top
   highlight and a backdrop blur. On the bordered variants that is the intent, but .btn.text is
   meant to read as a bare inline link, and there the inset highlight and blur painted a faint
   rounded rectangle around it: a phantom pill with no fill. .btn.text beats .btn on specificity,
   so these declarations switch that treatment off without touching the other variants.
   These CTAs also had no hover or focus feedback at all - rest, hover and focus computed
   identically - so the colour lifts and the arrow steps forward on the way in. */
.btn.text{box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:color .18s}
.btn.text:hover,.btn.text:focus-visible{background:none;color:#d9c4ff;transform:none}
/* A forward action reads label-then-arrow; a decorative glyph (spark, clock) still leads. */
.btn.text .icon-arrow{order:1}
.btn.text .icon{transition:transform .18s}
.btn.text:hover .icon-arrow,.btn.text:focus-visible .icon-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.btn.text .icon{transition:none}
  .btn.text:hover .icon-arrow,.btn.text:focus-visible .icon-arrow{transform:none}}

/* ---- Pillar marks ------------------------------------------------------------------------
   Each pillar ships its own squircle icon, so the shared lettered-chip treatment (purple
   gradient, border, inner highlight) has to come off or it frames a frame. Pseudo-element
   layers in the theme never reach these, because a replaced element has no ::before/::after.
   Typed as img.* so this outranks the theme's later .pillar-symbol/.project-icon group. */
img.pillar-logo{background:none;border:0;box-shadow:none;overflow:visible;object-fit:contain;
  padding:0;border-radius:8px}
img.pillar-logo.pillar-symbol{width:27px;height:27px}
img.pillar-logo.project-icon{width:39px;height:39px;border-radius:11px}
@media(max-width:800px){img.pillar-logo.pillar-symbol{width:22px;height:22px}}
.voice-controls{display:grid;grid-template-columns:1fr 130px;gap:10px;margin-top:12px}.voice-controls .field{margin:0}.setting-row .grow{min-width:0}@media(max-width:560px){.voice-controls{grid-template-columns:1fr}}

/* ---- Input fields ------------------------------------------------------------------------
   Two problems, both from treatments meant for standalone controls landing on nested ones.

   1. The theme's glass group includes .chat-composer textarea, but that textarea is the text
      surface *inside* an already-bordered form. It was getting its own fill, inner highlight and
      10px radius inside the form's 14px radius: a box drawn inside a box. Scoped through the
      form so it outranks the theme, the textarea goes back to being bare text on the form's box.
   2. The global focus ring is 2px of full-strength #d7a1ff at a 4px offset. On a button that
      reads fine; on a text field it drew a hard bright pill between the border and the text,
      with the first character almost touching it. Form controls now take a tighter, softer ring
      that hugs the edge, and the composer moves its focus onto the wrapper - the box the reader
      actually perceives as the control - so focus stays clearly visible either way. */
.chat-composer form textarea{background:none;box-shadow:none;border-radius:0;padding:4px 2px}
.chat-composer form textarea:focus,.chat-composer form textarea:focus-visible{outline:none}
.chat-composer form{transition:border-color .18s,box-shadow .18s}
.chat-composer form:focus-within{border-color:#cf9bf07d;
  box-shadow:0 7px 40px #08051030,0 0 0 3px rgba(199,142,239,.13)}
/* Softer, tighter ring for text controls. Buttons and links keep the roomier 4px offset. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(215,161,255,.55);outline-offset:1px;border-color:#c78eef8c}
.sidekick-input{transition:border-color .18s,box-shadow .18s}
.sidekick-input:focus-within{border-color:#cf9bf07d;box-shadow:0 0 0 3px rgba(199,142,239,.11)}
.sidekick-input input:focus-visible{outline:none}
/* The search palette's field is the row, not the input. .palette-search is the same shape as
   .sidekick-input above - an icon beside a deliberately bare input - but the pass that moved
   focus onto the wrapper missed it, and it shows there more than anywhere else. The input is
   580px wide with padding:0, so the ring drew a bright capsule tight around the text with the
   first character touching it; it kept the 10px radius the global input rule hands every field,
   despite having no border to round; and it stopped short of the search icon, which is plainly
   part of the same control. Three boxes - ring, radius, row - describing one field.
   The row takes the focus instead. var(--accent) doubles the rule the row already draws, and
   because each theme sets its own it lands in the same place on both: sampled off the rendered
   page, the line is 5.40:1 against the row in dark and 5.46:1 in light, where WCAG 2.4.11 asks
   for 3:1. So this is a more visible indicator than the ring it replaces, not a quieter one,
   and it covers the icon too. Sampled rather than computed on purpose - the dialog's surface is
   a gradient, so no ancestor has a backgroundColor that describes what is behind the line, and
   reading one compares it against transparent black and reports a surface that is not there. */
.palette-search{transition:background-color .18s,border-color .18s,box-shadow .18s}
.palette-search:focus-within{background:color-mix(in srgb,var(--accent) 7%,transparent);
  border-bottom-color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
.palette-search input:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){.chat-composer form,.sidekick-input,.palette-search{transition:none}}

/* ---- Monoline icons ----------------------------------------------------------------------
   ico() draws every glyph as open strokes on a shared 24x24 grid, so weight is the only thing
   left to tune here. A stroke that simply scales with its box goes spindly at 10px and slabby
   at 37px, so it is thickened for the small instances and thinned for the large ones rather
   than left proportional. Nothing needs a fill or a per-icon override any more: a light glyph
   on a dark surface and a dark glyph on a light chip are both just currentColor. */
svg.icon{stroke-width:1.9}
.task-meta .icon,.task-check .icon,.suggestion .icon,.work-card .icon,
.metric-icon .icon,.file-info .btn .icon,.notice .icon,.sidekick-input button .icon,
.msg-speak .icon,.crumb .icon,.grip .icon{stroke-width:2.4}
.impact-card .icon,.dropzone .upload-icon .icon,.empty>.icon{stroke-width:1.6}
.file-preview>.icon{stroke-width:1.35}
/* These two were sized to the old icons' tall, narrow viewBoxes. One square grid now means an
   unequal box would stretch the strokes along with it. */
.crumb .icon{width:9px;height:9px}
.grip .icon{width:13px;height:13px}
.record-banner{display:flex;align-items:center;gap:13px;padding:14px 17px;margin-bottom:20px;border-radius:13px;border:1px solid #f494a955;background:linear-gradient(120deg,#f494a916,#f494a904)}.record-banner strong{font-size:12px;display:block}.record-banner small{font-size:10px;color:var(--muted)}.record-dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0;animation:record-pulse 1.4s ease-in-out infinite}@keyframes record-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 #f494a966}50%{opacity:.55;box-shadow:0 0 0 7px #f494a900}}.live-transcript{font-size:12px;line-height:1.9;color:#ded2e7;white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow-y:auto}.meeting-card .panel-header small{font-size:10px;color:var(--faint);display:block;margin-top:5px}.minute-summary{font-size:12px;line-height:1.9;color:#ded2e7;white-space:pre-wrap;margin-bottom:18px}.minute-block{margin-top:16px}.minute-block .eyebrow{margin-bottom:8px}.minute-block ul{list-style:none;display:grid;gap:7px}.minute-block li{font-size:11px;line-height:1.7;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#ffffff04;display:flex;align-items:flex-start;gap:9px}.minute-block li .btn{margin-left:auto;flex-shrink:0}.muted{color:var(--faint);font-size:11px}

/* Meetings: the setup card, what-you-get tiles and the minute sections. */
.record-hero{background:linear-gradient(155deg,#221a31,#1b1526 58%)}
.record-hero-main{display:flex;gap:17px;padding:21px 21px 0}
.record-emblem{flex:0 0 auto;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(160deg,#8a55e63d,#c17aec2e);border:1px solid #c17aec4d;color:#e9d9ff}
.record-emblem svg{width:23px;height:23px}
.record-hero h2{margin:1px 0 5px;font-size:19px;letter-spacing:-.2px}
.record-hero>.record-hero-main p{margin:0 0 15px;color:var(--muted);font-size:12.5px}
.record-form{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) auto;gap:0 14px;align-items:end}
.record-form .field{margin-bottom:16px}
.record-go{padding-bottom:16px}
.record-consent{display:flex;gap:9px;align-items:flex-start;margin:0;padding:12px 21px 15px;border-top:1px solid var(--line);font-size:11px;line-height:1.75;color:var(--faint)}
.record-consent svg{flex:0 0 auto;width:13px;height:13px;margin-top:3px;color:#c294e5}
.record-consent strong{color:#cdb6e0;font-weight:600}
.record-hero.compact .record-hero-main{padding:17px 21px 0}
.record-hero.compact h2{font-size:15px;margin-bottom:3px}
.record-hero.compact>.record-hero-main p{display:none}
.record-hero.compact .record-emblem{width:40px;height:40px;border-radius:13px}
.record-hero.compact .record-emblem svg{width:18px;height:18px}
.meeting-history{margin-top:26px}
.meeting-history .empty{padding:28px 24px 10px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.section-head .eyebrow{margin:0}
.section-count{font-size:11px;color:var(--faint)}
.minute-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.minute-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:550;color:#cdb6e0;background:#2a1f3a;border:1px solid var(--line)}
.minute-chip svg{width:12px;height:12px;color:#c294e5}
.minute-head{display:flex;align-items:center;gap:8px;margin:19px 0 9px}
.minute-head svg{width:14px;height:14px;color:#c294e5}
.minute-head .eyebrow{margin:0}
.minute-tally{margin-left:auto;font-size:10px;font-weight:600;color:var(--faint)}
.minute-add{opacity:.6;transition:opacity .14s ease}
.minute-block li:hover .minute-add,.minute-add:focus-visible{opacity:1}
.minute-pending{display:flex;align-items:center;gap:13px}
.minute-pending svg{width:17px;height:17px;color:#c294e5}
.minute-pending small{display:block;color:var(--faint);font-size:11px;margin-top:3px}
@media(hover:none){.minute-add{opacity:1}}
.minute-block li>.grow{line-height:1.75}
@media(max-width:1100px){.record-form{grid-template-columns:1fr}.record-go{padding-bottom:16px}}
@media(max-width:800px){.record-hero-main{flex-direction:column;gap:12px;padding:17px 16px 0}.record-consent{padding:12px 16px 14px}}

/* The timeline, by person: rows are people, columns are days. */
.rt-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.rt-controls .tabs{margin-left:4px}
.rt-scroll{overflow:auto;max-height:min(68vh,620px);border:1px solid var(--line);border-radius:14px;background:#170f22;overscroll-behavior:contain}
.rt{--person:212px;--day:44px;min-width:calc(var(--person) + var(--cols) * var(--day))}
.rt-head,.rt-lane{display:grid;grid-template-columns:var(--person) 1fr;align-items:stretch}
.rt-head{position:sticky;top:0;z-index:4;background:#1d1529;border-bottom:1px solid var(--line2)}
.rt-corner{position:sticky;left:0;z-index:5}
.rt-head-cols{display:flex;flex-direction:column;min-width:0}
.rt-months,.rt-days,.rt-markers,.rt-cells,.rt-bars{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.rt-month{font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);padding:6px 8px 4px;border-left:1px solid var(--line)}
.rt-day{display:grid;justify-items:center;gap:1px;padding:4px 0 6px;border-left:1px solid var(--line);font-variant-numeric:tabular-nums}
.rt-day small{font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.rt-day strong{font-size:11.5px;color:#d9cbe8}
.rt-day.weekend{background:#120d1b}
.rt-day.weekend small,.rt-day.weekend strong{color:#6f6280}
.rt-day.today{background:#2c1c40}
.rt-day.today small,.rt-day.today strong{color:var(--accent)}
.rt-markers{min-height:0}
.rt-marker{display:flex;align-items:flex-end;justify-content:center;color:#f1c58b;padding-bottom:3px;min-width:0}
.rt-marker svg{width:11px;height:11px;flex:0 0 auto}
.rt-corner small svg{width:9px;height:9px;vertical-align:-1px;color:#f1c58b}
.rt-corner{display:grid;align-content:center;gap:2px;padding:8px 13px}
.rt-corner small{font-size:10px}
.rt-body{display:grid}
.rt-lane{border-top:1px solid var(--line)}
.rt-lane:first-child{border-top:0}
.rt-person{position:sticky;left:0;z-index:2;background:#1b1425;border-right:1px solid var(--line2);padding:11px 13px;display:grid;gap:6px;align-content:start}
.rt-person strong{display:block;font-size:12.5px;line-height:1.35}
.rt-person small{display:block;font-size:10px;color:var(--faint);line-height:1.5}
.rt-person-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.rt-person-load{font-size:9.5px !important;color:#8b7d9c !important}
.rt-nobody{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2a1f3a;border:1px solid var(--line2);color:#a897ba}
.rt-nobody svg{width:15px;height:15px}
.rt-track{position:relative;min-width:0;padding:9px 0 15px}
.rt-cells{position:absolute;inset:0}
.rt-cell{position:relative;border-left:1px solid var(--line);background:linear-gradient(to top,#c17aec10 calc(var(--fill,0) * 100%),transparent calc(var(--fill,0) * 100%))}
.rt-cell:after{content:'';position:absolute;left:3px;right:2px;bottom:4px;height:3px;border-radius:2px;background:var(--accent);opacity:calc(var(--fill,0) * .5)}
.rt-cell.weekend{background:#120d1b}
.rt-cell.today{box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 #c17aec4d}
.rt-cell.full{background:#c17aec1a}
.rt-cell.full:after{opacity:.8}
.rt-cell.weekend:after{display:none}
.rt-bars{position:relative;gap:5px 0;align-content:start;pointer-events:none}
.rt-bar{pointer-events:auto}
.rt-bar{min-width:0;display:flex;align-items:center;gap:5px;height:25px;padding:0 8px;border-radius:7px;font-size:10.5px;font-weight:550;color:#160e22;cursor:pointer;border:1px solid transparent;margin:0 2px}
.rt-bar[data-movable]{cursor:grab}
.rt-bar-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-bar svg{width:11px;height:11px;flex:0 0 auto}
.rt-bar:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.rt-bar.tone-pending{background:#b79ae0}
.rt-bar.tone-active{background:#8cdcb9}
.rt-bar.tone-critical{background:#f494a9}
.rt-bar.tone-blocked{background:#f1c58b}
.rt-bar.tone-late{background:#f4a9c0;box-shadow:inset 0 0 0 1px #7d1030}
.rt-bar.clip-left{border-top-left-radius:2px;border-bottom-left-radius:2px;margin-left:0}
.rt-bar.clip-right{border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:0}
.rt-idle{font-size:10px;color:#6f6280;padding-left:10px;display:flex;align-items:center;height:25px}
.rt-legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:10px;color:var(--faint);margin-top:12px}
.rt-key{width:16px;height:9px;border-radius:3px;display:inline-block}
.rt-key:not(:first-child){margin-left:9px}
.rt-key.tone-pending{background:#b79ae0}
.rt-key.tone-active{background:#8cdcb9}
.rt-key.tone-critical{background:#f494a9}
.rt-key.tone-blocked{background:#f1c58b}
.rt-key.tone-late{background:#f4a9c0;box-shadow:inset 0 0 0 1px #7d1030}
.rt-key-fill{background:linear-gradient(to top,#c17aec3d 60%,transparent 60%);border:1px solid var(--line2)}
.rt-dragging{opacity:.35}
.rt-ghost{position:fixed;z-index:70;pointer-events:none;height:25px;display:flex;align-items:center;padding:0 8px;border-radius:7px;font-size:10.5px;font-weight:550;color:#160e22;box-shadow:0 12px 30px #08050e88}
.rt-drop{outline:2px dashed var(--accent);outline-offset:-2px;border-radius:8px}
@media(max-width:900px){.rt{--person:150px;--day:38px}.rt-person{padding:9px 10px}.rt-person-load{display:none !important}}

/* Board cards: labels, a tickable checklist and the badges that go with them. */
.badge.label{font-size:9.5px;letter-spacing:.2px;padding:2px 7px;min-height:19px}
.card-bottom small.amber{color:var(--amber)}
.checklist{margin:0 0 17px;border:1px solid var(--line);border-radius:11px;background:#1d1529;overflow:hidden}
.checklist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 8px}
.checklist-head .eyebrow{margin:0}
.checklist-head small{font-size:10px;color:var(--faint)}
.check-row{display:flex;align-items:flex-start;gap:9px;width:100%;padding:8px 12px;background:none;border:0;border-top:1px solid var(--line);color:var(--text);font:inherit;font-size:12px;line-height:1.6;text-align:left;cursor:pointer}
.check-row:hover:not(:disabled){background:var(--hover)}
.check-row:disabled{cursor:default;opacity:.75}
.check-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.check-box{flex:0 0 auto;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:5px;border:1px solid var(--line2);background:#160f22;color:#160e22}
.check-box svg{width:11px;height:11px}
.check-row.is-done .check-box{background:var(--green);border-color:var(--green)}
.check-row.is-done>.grow{color:var(--faint);text-decoration:line-through}

/* Board toolbar, stage limits and swimlanes. */
.board-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.board-filter{margin:0;min-width:0}
.board-filter select{font-size:11px;background-color:#1d1529;color:var(--text);border:1px solid var(--line)}
.board-hidden{font-size:10.5px;color:var(--amber)}
.lane-title.over-limit strong{color:var(--red)}
.lane-title .badge.red{padding:2px 6px;min-height:18px;font-size:9px}
.swimlane{margin-bottom:24px}
.swimlane-head{display:flex;align-items:baseline;gap:9px;padding:0 0 9px}
.swimlane-head strong{font-size:12.5px}
.swimlane-head small{font-size:10px;color:var(--faint)}
.swimlane+.swimlane{border-top:1px solid var(--line);padding-top:20px}

/* Inside a swimlane the six stages repeat for every group, so an empty stage must not reserve a
   full column of height: the drop target stays generous enough to hit without the wasted space. */
.swimlane .lane{min-height:0}
.swimlane .lane-items{min-height:64px}
.swimlane .board-scroll,.board-scroll:has(.swimlane){min-height:0}

/* ---- Underline tabs -----------------------------------------------------------------------
   The theme paints every .tab as glass: a translucent fill, a border and a 1px inset highlight
   along its top edge. The underline variant resets the fill and the border but never reset the
   inset, so a faint line was being drawn above every tab - reading as a row of broken rules -
   and the active tab picked up a bright one plus a purple bloom, which together looked like a
   box around the label. An underline tab is type and a 2px rule and nothing else.
   The rule is also pulled down onto the group's own border so the two share a line rather than
   stacking 2px on top of 1px, and hover moves the colour instead of dropping in a fill. */
.tabs.underline .tab,.tabs.underline .tab.active,.tabs.underline .tab:hover{
  background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
/* The group's baseline is painted as an inset shadow rather than a real border, so the active
   tab's 2px rule can sit exactly on it. Pulling the tab down over a real border with a negative
   margin also worked, but it made the strip's content 1px taller than its box - which is
   invisible at full width and becomes a stray 1px scroll once the strip starts scrolling
   sideways on a narrow screen. */
.tabs.underline{border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
.tabs.underline .tab{padding:11px 2px 12px;color:var(--muted)}
.tabs.underline .tab:hover{color:var(--text);border-bottom-color:#c68dec4d}
.tabs.underline .tab.active{color:#dca5f8;border-bottom-color:#c68dec}

/* ---- Selects -------------------------------------------------------------------------------
   Every select drew the operating system's own arrow, which matches nothing else on the page now
   that the icons are monoline. appearance:none removes it, and because a select cannot hold a
   child element the replacement has to arrive as a background image - the same chevron geometry
   the icon set uses, at the same weight. The colour is baked in rather than currentColor, which
   a background image cannot read. */
select{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a291b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:13px 13px}
select[multiple]{background-image:none;padding-right:12px}

/* ---- Dates ---------------------------------------------------------------------------------
   The native indicator is switched off and the chevron's sibling drawn in its place, for the same
   reason the select has one: the operating system's glyph matches none of the monoline icons. It
   also stops the icon opening the system calendar, which is the panel we are replacing.

   The field keeps its own text, so typing a date by hand still works and a browser that never runs
   datepicker.mjs is no worse off than it is today. */
input[type="date"]{padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a291b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px 14px}
input[type="date"]::-webkit-calendar-picker-indicator{display:none}
input[type="date"]::-webkit-inner-spin-button{display:none}

/* The panel itself. In the top layer because almost every date in this product is edited inside a
   dialog, and an ordinary element cannot be raised above one however much z-index it is given. */
.daypick{
  position:fixed;margin:0;inset:auto;
  width:274px;padding:12px;
  border:1px solid var(--line2);border-radius:14px;
  background:#1b1326;color:var(--text);
  box-shadow:0 26px 70px #000a;
  overflow:visible;
}
.daypick:popover-open{display:block}
.daypick-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.daypick-head strong{font-size:12px;font-weight:600;letter-spacing:-.2px}
.daypick-week,.daypick-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.daypick-week{margin-bottom:4px}
.daypick-week span{text-align:center;font-size:9px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--faint);padding:4px 0}
.daypick-day{
  display:flex;align-items:center;justify-content:center;
  height:32px;padding:0;border:1px solid transparent;border-radius:8px;
  background:none;color:var(--text);font-size:11px;font-weight:500;
  transition:background .14s,border-color .14s;
}
.daypick-day:hover:not(:disabled){background:var(--hover)}
.daypick-day.is-outside{color:var(--faint)}
/* Today is a ring and the chosen day is a fill, so a day that is both still reads as chosen -
   two fills would make them fight and the answer would depend on rule order. */
.daypick-day.is-today{border-color:var(--line2);font-weight:650}
.daypick-day.is-selected{background:#e6cdff;border-color:#e6cdff;color:#190d26;font-weight:650}
.daypick-day:disabled{opacity:.3;cursor:not-allowed}
/* The heading is the way out of the month you are in: it zooms to the twelve months of the year,
   and again to twelve years. It only looks like a control while it is one - on the year page there
   is nowhere further out to go, so it is drawn as a plain label instead. */
.daypick-title{display:inline-flex;align-items:center;gap:4px;
  padding:5px 9px;border:1px solid transparent;border-radius:8px;background:none;
  color:var(--text);font-size:12px;font-weight:600;letter-spacing:-.2px;
  transition:background .14s,border-color .14s}
button.daypick-title:hover{background:var(--hover);border-color:var(--line2)}
.daypick-title svg{width:13px;height:13px;flex-shrink:0}
/* Months and years are the same grid at two scales, so they share a rule: three to a row, and
   twelve of them, which is the one shape that reads as a year either way round. */
.daypick-span{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:2px}
.daypick-cell{display:flex;align-items:center;justify-content:center;
  height:42px;padding:0;border:1px solid transparent;border-radius:9px;
  background:none;color:var(--text);font-size:11.5px;font-weight:500;
  transition:background .14s,border-color .14s}
.daypick-cell:hover:not(:disabled){background:var(--hover)}
.daypick-cell.is-today{border-color:var(--line2);font-weight:650}
.daypick-cell.is-selected{background:#e6cdff;border-color:#e6cdff;color:#190d26;font-weight:650}
.daypick-cell:disabled{opacity:.3;cursor:not-allowed}
.daypick-foot{display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}

/* The closed control has been the product's own for a while. The list it opens was still the
   operating system's: a grey slab with a system-blue highlight that matches nothing else on the
   page, and on the dark theme a bright rectangle thrown over it. `appearance: base-select` hands
   that popup to CSS. A browser without it keeps the OS popup, which is exactly what everybody
   sees today, so this only ever adds - and the native semantics, keyboard handling and screen
   reader behaviour stay the browser's, which is the reason to do it this way rather than to
   build a listbox out of divs.

   The native picker icon is switched off: the closed control already draws its chevron as a
   background image, and two chevrons would be worse than the one from the system. */
@supports (appearance:base-select){
  select:not([multiple]),::picker(select){appearance:base-select}
  select::picker-icon{display:none}
  ::picker(select){
    border:1px solid var(--line2);border-radius:12px;background:#1b1326;
    padding:6px;box-shadow:0 26px 70px #000a;
    /* A picker is a popover, so it sits at display:none between openings. Without allow-discrete
       on display and overlay it cannot animate in at all - it would simply appear. */
    opacity:0;translate:0 -5px;
    transition:opacity .15s ease,translate .15s cubic-bezier(.2,.8,.2,1),
               overlay .15s allow-discrete,display .15s allow-discrete;
  }
  ::picker(select):popover-open{opacity:1;translate:0 0}
  @starting-style{::picker(select):popover-open{opacity:0;translate:0 -5px}}
  option{
    display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
    font-size:11px;line-height:1.5;color:var(--text);background:transparent;cursor:pointer;
  }
  /* :checked is the chosen row and :hover/:focus the one under the pointer or the caret; both
     have to read, because arrowing through a list where only the chosen row is marked gives no
     sense of where you are. */
  option:hover,option:focus{background:var(--hover);outline:0}
  option:checked{color:#e6cdff;font-weight:550}
  option::checkmark{order:1;margin-left:auto;color:var(--purple);font-size:12px}
  option:disabled{color:var(--faint);cursor:not-allowed}
}

/* ---- Board toolbar ------------------------------------------------------------------------
   One row was carrying three control heights and two corner languages: 42px square-ish selects
   beside 33px pills. The selects match the pills they sit with - same height, same radius, same
   padding - so a row of filters reads as one set of controls.

   They used to share a fixed width as well, on the reasoning that uniform width is what makes a
   row read as a set. Measured, that was the wrong half to make uniform. The pills beside them
   size to their own words, so "Anyone" sat in a 158px box with 73px of dead space between the
   label and its chevron while "By owner" fitted snugly at 77px - one row, two sizing rules, and
   the selects were the half that looked unfinished.

   field-sizing sizes a select to the option actually on show, which is the pills' rule applied to
   a control that could not follow it before. A browser without it keeps the shared width, which
   is exactly what everybody sees today, so this only ever adds.

   The height is padding rather than a number, for the same reason and a worse bug. A flat
   height:33px on zero vertical padding left the label anchored to the top of a box 14.5px taller
   than the line it held, while the chevron - a background image, centred - sat at the true middle.
   Label and chevron were 7px out of line with each other on every filter in the row, which is what
   somebody sees when they say the control looks wrong. Matching the pills' own recipe (7px block
   padding on the same line-height) makes the box exactly as tall as what is in it, so there is no
   slack left for the two halves to drift apart in. */
.board-filter{flex:0 1 158px}
.board-filter select{min-height:0;padding:7px 30px 7px 12px;border-radius:999px;
  background-position:right 10px center;background-size:12px 12px}
@supports (field-sizing:content){
  .board-filter{flex:0 0 auto;min-width:0}
  /* Capped, because a filter can be showing a project name longer than the row it sits in. The
     number is measured rather than picked: the longest name in the sample workspace needs 221px,
     and 190 - the first guess - cut "Intelligent customer onboarding" short on a control that had
     room for it. Past the cap the value is cut with an ellipsis rather than pushing its
     neighbours onto another line, and the dropdown still lists the name in full. */
  .board-filter select{field-sizing:content;width:auto;max-width:230px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Below 520px the pills in this row shrink to 29px, so the selects shrink with them rather than
   standing 4px taller than everything they sit beside - by shrinking the padding, since that is
   what sets the height here now. */
@media(max-width:520px){.board-filter select{min-height:0;padding:6px 27px 6px 11px;font-size:10px;
  background-position:right 9px center;background-size:11px 11px}
  /* A narrower cap on a phone: 230px is most of the screen, and a filter wide enough to sit alone
     on its own line tells you less than two that fit beside each other. */
  @supports (field-sizing:content){.board-filter select{max-width:170px}}}

/* ---- Progress ring ------------------------------------------------------------------------
   Drawn as a stroked circle rather than a conic gradient. A conic gradient cannot round the
   ends of its arc, so the old ring stopped on two hard square cuts, and it needed a disc
   stacked on top to punch out the middle. One circle with a round cap needs neither.
   The label is the other half of the fix: at its offset below the centre the ring's inner
   opening is only about as wide as "RECORDED PROGRESS" itself, so the words ran into the stroke
   on both sides. Capping its width wraps it onto two lines, which is what makes the clearance
   rather than guessing at a smaller type size. */
.ring-progress{--percent:0;position:relative;width:124px;height:124px;display:grid;place-items:center}
.ring-progress svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-progress circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring-progress .ring-track{stroke:#ffffff0f}
.ring-progress .ring-value{stroke:#c587ee;stroke-dasharray:282.74;
  stroke-dashoffset:calc(282.74 - 2.8274 * var(--percent));transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.3,1)}
.ring-progress>span{position:relative;text-align:center;font-size:27px;font-weight:500;letter-spacing:-1px;line-height:1.15}
.ring-progress small{display:block;max-width:78px;margin:5px auto 0;font-size:9px;line-height:1.4;letter-spacing:.4px}
@media(prefers-reduced-motion:reduce){.ring-progress .ring-value{transition:none}}

/* The table view: one row per work item, editable in place. */
.table-scroll{overflow:auto;max-height:min(70vh,660px);border:1px solid var(--line);border-radius:13px;background:#170f22}
.work-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:940px}
.work-table th{position:sticky;top:0;z-index:2;background:#1d1529;text-align:left;padding:0;border-bottom:1px solid var(--line2);white-space:nowrap}
.th-sort{display:flex;align-items:center;gap:5px;width:100%;padding:10px 11px;background:none;border:0;color:var(--faint);font:inherit;font-size:10px;font-weight:650;letter-spacing:.9px;text-transform:uppercase;cursor:pointer}
.th-sort:hover{color:var(--text)}
.th-sort.active{color:var(--accent)}
.th-sort svg{width:11px;height:11px}
.work-table td{padding:6px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
.work-table tbody tr:hover{background:#1e1629}
.work-table tbody tr.is-selected{background:#2a1f3a}
.work-table tbody tr.is-done .cell-title{opacity:.6}
.cell-pick{width:34px;padding-left:12px !important}
.cell-pick input{accent-color:var(--accent);width:14px;height:14px}
.cell-id{width:96px;color:var(--faint);font-variant-numeric:tabular-nums}
.cell-title{min-width:230px}
.cell-title .linkish{background:none;border:0;padding:0;color:var(--text);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.cell-title .linkish:hover{color:var(--accent);text-decoration:underline}
.cell-number{text-align:right;font-variant-numeric:tabular-nums}
.cell-labels{max-width:210px}
.cell-plain{color:var(--muted)}
.cell-input{width:100%;min-width:78px;padding:5px 7px;font-size:11.5px;border-radius:7px;border:1px solid transparent;background-color:transparent;color:var(--text)}
.cell-input:hover{border-color:var(--line)}
.cell-input:focus{border-color:var(--accent2);background-color:#1d1529;outline:none}
.work-table td.red .cell-input,.work-table td.red .cell-plain{color:var(--red)}
.work-table td.amber .cell-input,.work-table td.amber .cell-plain{color:var(--amber)}
.bulk-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 13px;margin-bottom:13px;border-radius:11px;border:1px solid #c17aec4d;background:#241a34}
.bulk-bar strong{font-size:11.5px}

/* The calendar view: a month of due dates. */
.cal-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px}
/* The month and year are chosen rather than stepped to. The arrows either side stay, because
   moving one month is the commonest thing anybody does here and a select is a worse way to do it;
   what they cannot do on their own is reach next March. */
.cal-jump{display:flex;gap:6px}
/* Padding sets the height, not a number: 18px of line plus 5px each side plus the borders is the
   same 30px this asked for before, but with nothing left over for the label to sit high in. The
   board filters had the same shape and were 7px out of line because of it - see the note there. */
.cal-jump select{width:auto;min-height:0;padding:5px 30px 5px 10px;font-size:12px;border-radius:8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.cal-head{background:#1d1529;padding:8px 10px;font-size:9.5px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.cal-cell{background:#170f22;min-height:104px;padding:7px 8px;display:flex;flex-direction:column;gap:4px}
.cal-cell.weekend{background:#140e1e}
.cal-cell.outside{opacity:.45}
.cal-cell.today{background:#241834;box-shadow:inset 0 0 0 1px var(--accent)}
.cal-date{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);margin-bottom:1px}
.cal-cell.today .cal-date{color:var(--accent);font-weight:650}
.cal-item{display:block;width:100%;text-align:left;padding:4px 7px;border-radius:6px;border:0;font:inherit;font-size:10.5px;line-height:1.35;color:#160e22;font-weight:550;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-item:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.cal-item.tone-normal{background:#b79ae0}
.cal-item.tone-critical{background:#f494a9}
.cal-item.tone-late{background:#f4a9c0;box-shadow:inset 0 0 0 1px #7d1030}
.cal-item.tone-done{background:#8cdcb9;opacity:.8}
.cal-more{font-size:9.5px;color:var(--faint)}
.cal-legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:10px;color:var(--faint);margin-top:11px}
.cal-key{width:14px;height:9px;border-radius:3px;display:inline-block}
.cal-key:not(:first-child){margin-left:9px}
.cal-key.tone-normal{background:#b79ae0}
.cal-key.tone-critical{background:#f494a9}
.cal-key.tone-late{background:#f4a9c0;box-shadow:inset 0 0 0 1px #7d1030}
.cal-key.tone-done{background:#8cdcb9}
@media(max-width:900px){.cal-cell{min-height:78px}.cal-item{font-size:9.5px}}

/* ---- Saved views ---------------------------------------------------------------------------
   The chips sit above the filter row rather than inside it, because they set the filter row
   rather than being one more control in it. The active chip is the one whose settings are
   currently on screen; touch any filter afterwards and it stops claiming to be. */
.view-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px;color:var(--faint)}
.view-chips>svg{width:13px;height:13px;flex-shrink:0}
.view-chips .eyebrow{margin:0 4px 0 0}
.view-chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--panel);overflow:hidden}
.view-chip>button{border:0;background:none;font:inherit;color:var(--text);font-size:10.5px;padding:4px 11px;cursor:pointer;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-chip>button:hover{background:var(--hover)}
.view-chip.active{border-color:#c78bef44;background:#af72e222}
.view-chip.active>button{color:#e2b7f8;font-weight:600}
.view-chip .view-drop{padding:4px 6px 4px 2px;color:var(--faint);opacity:0;transition:opacity .12s}
.view-chip:hover .view-drop,.view-chip .view-drop:focus-visible{opacity:1}
.view-chip .view-drop svg{width:11px;height:11px}
.view-chip .view-drop:hover{color:#b3123c}
.view-chip button:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
@media(max-width:700px){.view-chip .view-drop{opacity:1}}

/* ---- Label administration ------------------------------------------------------------------ */
.label-admin{display:flex;flex-direction:column;gap:2px;margin-top:13px}
/* Seven rows, then the list scrolls inside itself; app.mjs measures the box (capLists). The rows
   must not shrink to fit it, which a flex column would otherwise do in place of scrolling. The fade
   at the foot is a mask rather than a colour, so it reads the same in either theme. */
[data-capped]{overflow-y:auto;overscroll-behavior:contain}
.activity-log{margin-top:13px;border-top:1px solid var(--line)}
/* Beside Sidekick & integrations the log is as tall as that panel and scrolls inside it, rather than
   stopping at seven rows with a block of nothing underneath. Its own height is left out of the row's
   sizing (flex-basis 0) so the neighbour decides how tall the row is, and the seven-row cap that
   capLists sets is lifted only while the two sit side by side; stacked on a narrow screen, it holds. */
@media(min-width:1101px){
  .settings-grid>.activity-panel{display:flex;flex-direction:column}
  .activity-panel>.panel-body{flex:1;min-height:0;display:flex;flex-direction:column}
  .activity-panel .activity-log{flex:1 1 0;min-height:240px;max-height:none!important}
  /* The labels list does the same beside People & access: it runs to the foot of its card rather
     than stopping at seven rows with the rest of the card empty below it. */
  .settings-grid>.labels-panel{display:flex;flex-direction:column}
  .labels-panel>.panel-body{flex:1;min-height:0;display:flex;flex-direction:column}
  .labels-panel .label-admin{flex:1 1 0;min-height:240px;max-height:none!important}
}
/* Finished work as history on the forecast (finishedSpan in shared/domain.mjs). Muted, so the plan
   still leads; green, the colour Done wears everywhere else; and a dashed edge where the dates are not
   recorded, so a guess never reads as a fact. */
.gantt-frame .bar-wrapper:is(.bar-done,.bar-done-estimated) .bar{fill:color-mix(in srgb,var(--green) 22%,transparent);stroke:var(--green);stroke-width:1;opacity:.75}
.gantt-frame .bar-wrapper.bar-done-estimated .bar{fill:transparent;stroke-dasharray:4 3}
.gantt-frame .bar-wrapper:is(.bar-done,.bar-done-estimated) .bar-label{fill:var(--muted)}
.gantt-legend .key.bar-done{background:color-mix(in srgb,var(--green) 40%,transparent);border:1px solid var(--green)}
.gantt-legend .key.bar-done-estimated{background:transparent;border:1px dashed var(--green)}
.rt-bar.tone-done{background:color-mix(in srgb,var(--green) 22%,transparent);color:var(--muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 70%,transparent);opacity:.8}
.rt-bar.tone-done.estimated{background:transparent;box-shadow:none;outline:1px dashed color-mix(in srgb,var(--green) 70%,transparent);outline-offset:-1px}
.rt-key.tone-done{background:color-mix(in srgb,var(--green) 40%,transparent)}
.rt-key.tone-done.estimated{background:transparent;outline:1px dashed var(--green);outline-offset:-1px}
.history-toggle{display:inline-flex;align-items:center;gap:6px}
.history-toggle .icon{width:12px;height:12px}

/* A person's load with its overdue share in red, after the on-time part (loadBar in app.mjs). */
.progress.load-bar{display:flex}
.progress.load-bar>span{flex:0 0 auto}
.progress.load-bar>span.late{background:var(--red);border-radius:0 99px 99px 0}
.progress.load-bar>span:first-child:not(:last-child){border-radius:99px 0 0 99px}
@media(max-width:800px){.people-summary{grid-template-columns:repeat(2,1fr)}}

/* The bell and what it opens (notifyPanelHtml in app.mjs). The count takes its text colour from
   --bg so it inverts with the theme: a fixed dark numeral reads on the dark theme's light accent and
   fails on the light theme's dark one. The panel is in the top layer, so nothing on the page can clip
   it, and on a phone it becomes a sheet across the width. */
.bell-wrap{position:relative;display:inline-flex}
.bell-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:grid;place-items:center;
  font-size:9px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;background:var(--accent);color:var(--bg);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.notify-panel{position:fixed;inset:auto;margin:0;width:min(392px,calc(100vw - 24px));max-height:min(580px,calc(100dvh - 100px));padding:0;
  display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line2);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);transform-origin:top right}
.notify-panel:popover-open{display:flex}
.notify-panel.sheet{width:calc(100vw - 24px);max-height:calc(100dvh - 90px);transform-origin:top center}
.notify-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px 10px}
.notify-head h2{font-size:14px;letter-spacing:-.2px}
.notify-head small{font-size:10px;color:var(--muted)}
.notify-tabs{display:flex;gap:4px;padding:0 12px 10px;border-bottom:1px solid var(--line)}
.notify-tab{padding:6px 11px;border-radius:999px;background:none;font-size:11px;color:var(--muted);border:1px solid transparent}
.notify-tab:hover{color:var(--text);background:var(--hover)}
.notify-tab[aria-selected=true]{color:var(--text);background:var(--hover);border-color:var(--line2)}
.notify-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
.notify-attention{display:grid;gap:2px;padding:12px 8px 8px;border-bottom:1px solid var(--line)}
.notify-attention .eyebrow{font-size:9px;padding:0 8px 4px}
.notify-attn{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:10px;background:none;text-align:left;font-size:11px;color:var(--text)}
.notify-attn>span:nth-child(2){flex:1}
.notify-attn>.icon{width:11px;height:11px;color:var(--faint)}
.notify-attn:hover,.notify-attn:focus-visible{background:var(--hover)}
.notify-list{list-style:none;margin:0;padding:4px 8px 8px}
.notify-day{padding:12px 8px 4px;font-size:9px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
.notify-item{display:flex;align-items:flex-start;gap:11px;width:100%;padding:10px 8px;border-radius:11px;background:none;text-align:left;position:relative}
.notify-item:hover,.notify-item:focus-visible{background:var(--hover)}
.notify-item:focus-visible,.notify-attn:focus-visible,.notify-tab:focus-visible{outline-offset:-2px}
.notify-icon{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.notify-icon .icon{width:13px;height:13px}
.notify-icon.comment,.notify-icon.blue,.notify-icon.request{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.notify-icon.ready,.notify-icon.approved{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.notify-icon.flagged,.notify-icon.red,.notify-icon.declined{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.notify-icon.amber,.notify-icon.status{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.notify-copy{display:grid;gap:4px;min-width:0;flex:1}
.notify-text{font-size:11px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.notify-item.unread .notify-text{color:var(--text)}
.notify-text strong{font-weight:600;color:var(--text)}
.notify-copy time{font-size:9px;color:var(--faint)}
.notify-dot{flex:0 0 auto;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--accent)}
.notify-empty{display:grid;justify-items:center;gap:8px;padding:36px 28px;text-align:center}
.notify-empty .icon{width:22px;height:22px;color:var(--faint)}
.notify-empty strong{font-size:12px}
.notify-empty p{font-size:11px;line-height:1.7;color:var(--muted);max-width:280px}

/* What an item is waiting on (depCardHtml in app.mjs). The trigger keeps the amber it always had and
   gains an underline on hover, which is how a piece of text says it does something. The card sits in
   the top layer, so it is placed in viewport pixels and nothing on the page can clip it. */
.dep-trigger{display:inline-flex;align-items:center;gap:5px;padding:0;min-height:0;background:none;font:inherit;color:var(--amber);
  text-decoration:underline dotted transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.dep-trigger:hover,.dep-trigger[aria-expanded=true]{text-decoration-color:currentColor}
.work-card .dependencies .dep-trigger{color:inherit}
.badge.dep-open{cursor:pointer;font:inherit;font-size:10px;font-weight:550;transition:border-color .15s}
.badge.dep-open:hover,.badge.dep-open[aria-expanded=true]{border-color:currentColor}
.dep-flyout{position:fixed;inset:auto;margin:0;width:min(340px,calc(100vw - 24px));max-height:min(420px,calc(100dvh - 24px));overflow:auto;overscroll-behavior:contain;
  padding:0;border:1px solid var(--line2);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.dep-head{display:grid;gap:4px;padding:13px 15px 11px;border-bottom:1px solid var(--line)}
.dep-head .eyebrow{color:var(--amber);font-size:9px}
.dep-head strong{font-size:12px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.dep-head small{font-size:10px;color:var(--muted)}
.dep-list{list-style:none;margin:0;padding:5px}
.dep-item{display:grid;gap:7px;width:100%;padding:9px 10px;border-radius:9px;background:none;text-align:left}
.dep-item:hover,.dep-item:focus-visible{background:var(--hover)}
.dep-item:focus-visible{outline-offset:-2px}
.dep-title{font-size:11px;font-weight:550;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.dep-meta{display:flex;align-items:center;gap:7px;min-width:0}
.dep-meta small{font-size:9px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep-meta .badge{min-height:19px;padding:1px 7px;font-size:9px}
/* The stage an item is at, first on its line under the title, the same chip the dependency card
   uses so a status reads the same wherever it appears. */
.task-sub .badge{min-height:19px;padding:1px 7px;font-size:9px;vertical-align:middle;margin-right:8px}
.dep-meta .avatar{width:20px;height:20px;font-size:7px;margin:0}
.dep-foot{display:flex;align-items:center;gap:6px;margin:0;padding:9px 15px 12px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.dep-foot .icon{width:11px;height:11px;color:var(--green)}
/* A finger needs more than a line of 10px text to aim at, so on touch screens the trigger grows its
   hit area without moving anything around it. */
@media(pointer:coarse){.dep-trigger{position:relative}.dep-trigger:after{content:'';position:absolute;inset:-10px -6px}}
/* Cross-business is the fifth card on the Overview: the work that spans the four pillars. Where the
   grid drops to two or four columns it would sit alone under the others, so there it takes the full
   row - one wide card reads as "and across all of them" rather than as a pillar that lost its pair. */
@media(max-width:1320px){.pillar-card.pillar-cross-business{grid-column:1/-1}}

/* A card that lifts on hover throws its glow 34px below itself, and whatever comes next in the page
   is painted after it - the next panel, the next card in a column - so the glow was cut off in a
   straight line where that neighbour began. Lifted above its neighbours while hovered, the glow lands
   on top of them instead. Two is enough to clear a sibling and stays under the topbar (30).
   Inside a board column it is also clipped by the column itself, which scrolls and so has to clip.
   There the glow is drawn shorter and the column is given the room for it, the padding taken back
   by an equal negative margin so the cards keep exactly the width and position they had. */
.pillar-card:hover,.project-card:hover,.work-card:hover,.work-tile:hover,.metric.is-link:hover{position:relative;z-index:2}
.lane-items{padding:2px 10px 14px;margin:0 -8px -12px}
.lane-items .work-card:hover{box-shadow:var(--rim,none),0 8px 16px -10px rgba(139,92,246,.6)}
:root[data-theme="light"] .lane-items .work-card:hover{box-shadow:none}
/* The theme switch (switchTheme in app.mjs) uncovers the new page in a circle over a still of the
   old one. The browser's own cross-fade is switched off for it, or the two would fade through each
   other at the same time as the circle grows. */
html.theme-turn::view-transition-old(root),html.theme-turn::view-transition-new(root){animation:none;mix-blend-mode:normal}
[data-capped]>*{flex-shrink:0}
[data-capped].has-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
.label-admin-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line)}
.label-admin-row:first-child{border-top:0}
.label-admin-row small{color:var(--faint);white-space:nowrap}

/* ---- Earlier meetings ------------------------------------------------------------------------
   Three sets of minutes in full, then a line each. The line carries enough to choose by - when,
   what it was called, and how much came out of it - so opening one is a decision, not a hunt. */
.meeting-earlier{margin-top:20px}
.meeting-earlier .section-head{margin-bottom:9px}
.meeting-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:11px 15px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:6px;
  color:var(--text);font:inherit;font-size:12px;cursor:pointer;transition:border-color .12s,background .12s}
.meeting-row:hover{background:var(--hover);border-color:#c78bef44}
.meeting-row:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.meeting-row-when{color:var(--faint);font-size:10.5px;white-space:nowrap;min-width:82px}
.meeting-row-title{display:flex;flex-direction:column;gap:1px;min-width:0}
.meeting-row-title small{color:var(--faint);font-size:10px}
.meeting-row-title,.meeting-row-title small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meeting-row-tally{display:flex;align-items:center;gap:4px;color:var(--faint);font-size:10.5px;white-space:nowrap}
.meeting-row-tally svg{width:12px;height:12px;margin-left:5px}
.meeting-row>svg:last-child{width:14px;height:14px;color:var(--faint);flex-shrink:0;transform:rotate(90deg)}
.meeting-earlier .meeting-card{margin-bottom:6px}
@media(max-width:700px){.meeting-row-when{display:none}.meeting-row-tally{display:none}}

/* ---- Cross-project cards and rows -------------------------------------------------------------
   On a board that spans projects, the project is the first thing you need and the last thing the
   card had room for, so it sits under the title as a quiet link rather than another badge. */
.card-project{display:inline-flex;align-items:center;gap:5px;margin:-2px 0 7px;padding:0;border:0;background:none;
  font:inherit;font-size:9.5px;color:var(--faint);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-project:hover{color:var(--accent)}
.card-project:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:3px}
.card-project svg{width:11px;height:11px;flex-shrink:0}
.work-table .cell-project{max-width:150px}
.work-table .cell-project .linkish{display:block;width:100%;background:none;border:0;padding:0;border-radius:0;
  font-size:10.5px;line-height:1.4;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-table .cell-project .linkish:hover{color:var(--accent);text-decoration:underline}
/* One line of figures above the cross-project board, not four panels in front of it. */
/* Three cards, not one strip.
   The strip existed to keep the board above the fold, and cards do cost height. It is spent
   deliberately: these are the same eyebrow / figure / caption panels as My Day and Team &
   workload, at the same size, so a headline figure looks identical wherever it appears in the
   product. That is worth more than the ~40px, and it is the reason there is no size override
   here - an override would put this page back out of step with the other two.
   A zero for overdue or unaccountable work is good news, so it is dimmed. At full strength it
   pulled the eye exactly as hard as a real count. */
.work-summary{margin-bottom:16px}
.work-summary strong.zero{color:var(--faint);font-weight:500}
/* How many items the filters matched is a filter status, not a headline figure, so it sits with
   the board it describes instead of becoming a fourth card in a three-card row. */
.filter-count{font-size:11px;color:var(--faint);margin:-2px 0 13px}

/* ---- Sound for the focus timer ---------------------------------------------------------------
   Under the timer, quiet until chosen. The dot only appears while something is actually playing,
   because a control that claims to be on when it is not is worse than no control. */
.focus-sound{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.focus-sound .row{gap:7px}
.focus-sound select{flex:1;min-width:0}
.focus-sound small{font-size:10px;line-height:1.7;color:var(--faint)}
.focus-sound[data-playing]:not([data-playing=""]) select{border-color:#c78bef55}
/* The dot sits on the line that describes the sound, so "playing" reads as a sentence rather
   than as a stray mark floating above the control. */
.focus-sound .sound-dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px #6ee7b722;flex-shrink:0}
.focus-sound[data-playing]:not([data-playing=""]) .sound-dot{display:inline-block}
.focus-sound small{display:flex;align-items:baseline;gap:8px}
.focus-volume{display:flex;align-items:center;gap:9px;color:var(--faint)}
.focus-volume svg{width:14px;height:14px;flex-shrink:0}
.focus-volume input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:3px;cursor:pointer}
.focus-soundless{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:7px;font-size:10px;color:var(--faint)}
.focus-soundless svg{width:13px;height:13px;flex-shrink:0}

/* ---- The mark in the dashboard hero card ------------------------------------------------------
   The copy is capped at 64% of the card, so the right third has always been space held for this.
   Centring is on the wrapper and the float is on the image: float-logo animates `transform`, so a
   translateY(-50%) on the same element would be overwritten the moment the animation started -
   which is how this drifted above centre before. */
.hero-art{position:absolute;z-index:1;right:7%;top:50%;transform:translateY(-50%);
  width:148px;height:148px;display:grid;place-items:center;pointer-events:none}
.hero-art img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 32px #ca7dff3d);animation:float-logo 9s ease-in-out infinite}
@media(max-width:1100px){.hero-art{width:112px;height:112px;right:5%}}
@media(max-width:760px){.hero-art{display:none}}   /* the copy takes 82% here; there is no room */

/* ---- Pillar coding on work items --------------------------------------------------------------
   One variable per pillar, consumed by both the card badge and the timeline stripe, so a pillar
   looks like itself wherever it appears. The values are the pillar cards' own accent colours.
   Catalyst and Concierge share an initial letter, so colour and mark carry the identity and no
   lettering is used anywhere. */
.pillar-catalyst{--pillar:#8cdcb9}
.pillar-navigator{--pillar:#f494a9}
.pillar-orchestrator{--pillar:#bc91ff}
.pillar-concierge{--pillar:#99bcf9}
.pillar-cross-business{--pillar:#9d90ad}

/* Grouped with the id so .card-top keeps its two children and its space-between layout. */
.card-ident{display:flex;align-items:center;gap:6px;min-width:0}
.pillar-badge{display:grid;place-items:center;width:21px;height:21px;flex-shrink:0;border-radius:6px;
  background:color-mix(in srgb,var(--pillar,#9d90ad) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--pillar,#9d90ad) 45%,transparent)}
.pillar-badge img{display:block;width:15px;height:15px;object-fit:contain}
.pillar-badge svg{width:12px;height:12px;color:var(--pillar,#9d90ad)}

/* In the timeline the bar's fill already carries status, and the two palettes collide - both run
   pink, green and purple - so the pillar is a mark on a dark disc rather than a colour. The disc
   holds its own contrast against any fill, and the ring keeps the pillar's colour present. */
.rt-pip{display:grid;place-items:center;width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  background:#150e20e6;box-shadow:inset 0 0 0 1.5px var(--pillar,#9d90ad)}
.rt-pip img{display:block;width:10px;height:10px}
/* Cross-business has no mark, so the ring alone identifies it. */
.rt-pip:empty:after{content:'';width:5px;height:5px;border-radius:50%;background:var(--pillar,#9d90ad)}


/* ---- The work table lines up with its own headings --------------------------------------------
   Five of the nine columns hold an editable control, and a control brings its own inset: a 1px
   border, 7px of padding and about 3px of native chrome inside a select or a date field. Sitting
   inside the cell's own 11px that put their text 22px from the column edge while ID, Work item
   and Labels - which are plain text - started at 11px. So the table had two left margins and the
   headings agreed with only one of them.
   The cell gives up its horizontal padding to the control instead of stacking with it. The
   control is already width:100%, so it now fills the cell edge to edge, which also makes the
   hover and focus rectangle cover the whole cell rather than floating inside it.
   Measured after: every column's text starts at the same offset as its heading. */
.work-table td:has(.cell-input){padding-left:0;padding-right:0}

/* A <button> is centred by default. .cell-title sets text-align:left on its own link and
   .cell-project never did, so project names were centred inside a 128px button - which means
   every row started at a different x and the column read as ragged even though every cell box
   was in the same place. Stated once for the table rather than per column. */
.work-table .linkish{text-align:left}

/* text-align on a cell does not reach the value inside an <input>. The Left column's td is
   right-aligned and its numbers were still sitting at the left of the field, so the column, its
   heading and its values pointed in two different directions. */
/* 1px border + 10px padding = the 11px the heading's own padding gives it, so the numbers and
   the word Left end on the same pixel rather than three apart. */
.work-table .cell-number .cell-input{text-align:right;padding-right:10px}

/* A right-aligned column needs a right-aligned heading. .cell-number puts the numbers against
   the right edge while the heading stayed at the left, so "Left" and its values sat at opposite
   ends of the same column. .th-sort is already a flex row, so this moves the label and its sort
   chevron together. */
.work-table th.col-number .th-sort{justify-content:flex-end}

/* ---- Delete sits apart from the rest of the dialog footer -------------------------------------
   The footer is justify-content:flex-end, so everything gathers on the right. Delete is the one
   action there that cannot be undone, and putting it next to Save changes makes the distance the
   pointer has to travel between "finish" and "destroy" about a centimetre. An auto margin on the
   first item pushes the rest away from it and leaves them grouped as they were.
   Scoped to .dialog-foot so it only affects a footer's Delete, and driven off .danger rather than
   :first-child so the two dialogs that have one keep agreeing even if their footers gain a
   button. */
.dialog-foot .btn.danger{margin-right:auto}

/* ---- The confirmation --------------------------------------------------------------------------
   Sized to a question rather than to a form, and with no border under the heading: the heading and
   the sentence below it are one thought, and a rule between them makes the sentence read like a
   separate section. The head carries no close button either - the two answers are in the footer,
   and a third way out that means neither is how you get someone clicking an X to mean "no". */
#confirm-modal{width:min(430px,calc(100vw - 30px))}
#confirm-modal .dialog-head{border-bottom:0;padding-bottom:0;background:none}
#confirm-modal .dialog-body{padding-top:11px}
#confirm-modal .dialog-body:empty{padding:0}
#confirm-modal .dialog-body p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
#confirm-modal .dialog-foot{border-top:0;background:none}
/* The rule above sends a footer's Delete to the far left, which is right where it is a secondary
   escape hatch beside Save and wrong here, where it is one of the two answers being offered. */
#confirm-modal .dialog-foot .btn.danger{margin-right:0}

/* ---- A request card keeps its actions together -----------------------------------------------
   The footer holds a status line and, for a request nobody has committed to yet, the two things
   you can do with it. justify-content:space-between spreads three children to left, centre and
   right, so Shape project - the whole point of the card - sat with about 50px of empty card on
   either side, reading as unrelated to either neighbour rather than as the action to take.
   Only the status text belongs on the left, so it takes the auto margin and the buttons gather on
   the right the way a dialog's do. Archive stays beside it rather than being exiled to the far
   left like a dialog's Delete: it asks first and the request is still there under Archived, so it
   is not the kind of mistake worth spending the width of a card to prevent.
   This has to be right for one, two or three children, because a card carries the status alone
   once it is archived and the status plus Open project once it is triaged. Both of those lay out
   exactly as space-between left them. */
.request-card footer{justify-content:flex-end}
.request-card footer>small{margin-right:auto}

/* ---- The title field in a work-item dialog ----------------------------------------------------
   It is meant to read as an editable headline rather than a boxed input: transparent, no box, an
   accent underline when you are in it. Two things were undoing that.

   The tight focus ring for text controls pairs `outline:2px` with `border-color`, which is right
   for a boxed field and wrong here - it materialised a border this field deliberately does not
   have, then drew a ring 1px outside it, so a focused title showed two nested rectangles 1px
   apart. And at rest the field had no border, no background and no padding, so nothing announced
   that the headline was editable at all.

   One indicator in each state: a quiet rule at rest, an accent rule plus a faint tint on focus.
   The ring is suppressed here on purpose - the underline runs the full width of the control and
   the accent against the dialog ground is far past 3:1, so it is a sufficient focus indicator on
   its own, and adding a ring back would restore the second rectangle. */
.dialog-title-input{border:0;border-bottom:1px solid var(--line2);border-radius:0;
  padding:0 0 9px;min-height:45px;transition:border-color .16s,background-color .16s}
.dialog-title-input::placeholder{color:#8b7c9e}
.dialog-title-input:hover:not(:focus){border-bottom-color:#a98cc4}
/* :focus and :focus-visible get the same treatment, so a click and a Tab look alike. */
.dialog-title-input:focus,.dialog-title-input:focus-visible{
  outline:none;border:0;border-bottom:2px solid var(--accent);
  background:linear-gradient(180deg,transparent 40%,#c17aec12);padding-bottom:8px}

/* A KPI card that leads somewhere.
   It is a <button> so it is reachable by keyboard and announced as a control; everything below
   is about making a button look like the panel it replaced rather than like a form submit. The
   arrow sits in the corner instead of after the caption, so the caption can wrap without the
   affordance wandering off with it. */
.metric.is-link{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s}
.metric.is-link:hover{transform:translateY(-2px);border-color:#c98eef55}
.metric.is-link:active{transform:none}
.metric-go{position:absolute;right:16px;bottom:14px;display:grid;place-items:center;opacity:0;transition:opacity .18s,transform .18s;transform:translateX(-4px);color:var(--accent)}
.metric-go .icon{width:13px;height:13px}
.metric.is-link:hover .metric-go,.metric.is-link:focus-visible .metric-go{opacity:1;transform:none}
/* The caption sits above the arrow's corner, so it is given room rather than being overlapped. */
.metric.is-link small{padding-right:24px;display:block}
@media(prefers-reduced-motion:reduce){.metric.is-link,.metric-go{transition:none}.metric.is-link:hover{transform:none}}
.no-motion .metric.is-link{transition:none}
.no-motion .metric.is-link:hover{transform:none}

/* Leadership: the attention queue. One row per thing that wants a person rather than a process. */
.attention-row{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.attention-row:last-child{border-bottom:0;padding-bottom:0}
.attention-row .grow{min-width:0}
.attention-row .task-title{display:block;background:none;padding:0;text-align:left;font-size:12px;font-weight:500;color:var(--text);line-height:1.45}
.attention-row small{display:block;font-size:10px;margin-top:4px;color:var(--faint)}
.attention-row .progress{margin:8px 0 5px}
.attention-row .btn{flex-shrink:0}
/* A flag is somebody's sentence, so it is set as one - quoted, attributed, and not truncated. */
.attention-reason{font-size:10px;line-height:1.7;margin-top:7px;color:#d9b7f0;background:#8e50be14;border-left:2px solid var(--accent);border-radius:0 7px 7px 0;padding:7px 10px}
.attention-reason .icon{width:10px;height:10px;margin-right:4px;vertical-align:-1px}
.attention-reason em{font-style:normal;color:var(--faint)}
.attention-row.is-late .task-title{color:#f7c3d0}
/* Help text inside a disclosure, where <small> alone would sit tight against the list below it. */
.stack-help{display:block;font-size:10px;line-height:1.7;margin:0 0 11px;color:var(--faint)}

/* Several people on one work item. The faces overlap so a team of three costs little more room
   than one, and the last one sits on top rather than under, which reads as a stack rather than
   a smudge. */
.avatar-stack{display:inline-flex;align-items:center;flex-shrink:0}
.avatar-stack .avatar{margin-right:-7px;box-shadow:0 0 0 2px var(--panel)}
.avatar-stack .avatar:last-child{margin-right:0}
.avatar-stack .avatar.more{background:#ffffff0e;color:var(--faint);font-size:8px}
.work-card .avatar-stack .avatar{box-shadow:0 0 0 2px #241a30}

/* A flag on the work item it concerns. Amber rather than red: it is a request for attention,
   not a failure, and the page already spends red on things that have actually gone wrong. */
.flag-banner{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;margin-bottom:16px;border-radius:11px;background:#f1c58b14;border:1px solid #f1c58b33}
.flag-banner>.icon{width:14px;height:14px;color:var(--amber);flex-shrink:0;margin-top:2px}
.flag-banner strong{display:block;font-size:11px;color:var(--amber)}
.flag-banner p{font-size:11px;line-height:1.7;margin-top:5px;color:var(--text)}
.flag-banner small{display:block;font-size:9px;margin-top:6px;color:var(--faint)}
.flag-banner .btn{flex-shrink:0}
/* Microsoft's own mark, inline rather than vendored: four rectangles need no icon set, and its
   colours are fixed by their brand guidelines so they must not follow Chumley's theme. The button
   around them uses the glass tokens, so that part does follow it, into light mode and back. */
.sso-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:45px;border:1px solid var(--glass-edge);border-radius:9px;background:var(--glass);color:var(--text);font-size:12px;font-weight:500;text-decoration:none;transition:background .18s,border-color .18s}
.sso-button:hover,.sso-button:focus-visible{background:var(--hover);border-color:var(--accent)}
.sso-button svg{flex-shrink:0}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0}
.auth-divider:before,.auth-divider:after{content:'';height:1px;background:var(--line);flex:1}
.auth-divider span{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);white-space:nowrap}

/* ---- Work item cards (All work > Cards) ----------------------------------
   The project card's proportions, so the two card views read as one family. The whole card opens
   the item - the title's ::after covers it - and the controls inside sit above that cover. A grid
   that fills by width rather than a fixed three, so it is one column on a phone without a rule. */
.work-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin-top:4px}
.work-tile{padding:18px 20px;position:relative;display:flex;flex-direction:column;gap:11px;min-width:0;transition:transform .2s,border-color .2s}
.work-tile:hover{transform:translateY(-3px);border-color:#cb8fea40}
.work-tile h3{font-size:14px;line-height:1.35;letter-spacing:-.2px;margin:2px 0 0;text-wrap:balance}
.work-tile .tile-title{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.work-tile .tile-title:after{content:'';position:absolute;inset:0;border-radius:inherit}
.work-tile .tile-title:focus-visible{outline:none}
.work-tile:has(.tile-title:focus-visible){outline:2px solid var(--accent,#b67df0);outline-offset:2px}
.work-tile .tile-where,.work-tile .tile-tags,.work-tile .tile-footer .avatar-stack{position:relative;z-index:1}
.tile-where{display:flex;flex-direction:column;gap:3px;min-width:0}
.tile-where .linkish{align-self:flex-start;max-width:100%;padding:0;border:0;background:none;color:#c8a3e1;font:inherit;font-size:11px;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-where .linkish:hover{text-decoration:underline}
.tile-where small{font-size:10px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-tile p{font-size:11px;line-height:1.75;margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.tile-tags{gap:6px}
.tile-subs small{font-size:10px}
.work-tile .progress{margin:-5px 0 0}
.tile-footer{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:13px;border-top:1px solid var(--line);min-width:0}
.tile-footer small{font-size:10px;white-space:nowrap}
.tile-footer .grow{overflow:hidden;text-overflow:ellipsis}
.work-tile.is-done>*:not(.tile-footer){opacity:.62}
.tile-more{display:flex;justify-content:center;margin-top:18px}
.tile-stage{margin-top:26px}
.tile-stage:first-of-type{margin-top:6px}
.tile-stage-head,.stage-row th{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:0;margin:0 0 12px}
.tile-stage-head .count,.stage-row .count{font-size:10px;font-weight:500;color:var(--muted);background:var(--hover);border-radius:20px;padding:2px 8px}
/* Not sticky: only the column headings stay put; a stage heading scrolls with its rows. */
.work-table .stage-row th{position:static;z-index:auto;white-space:normal;display:table-cell;text-align:left;padding:16px 12px 8px;margin:0;border-bottom:1px solid var(--line);background:none}
.work-table .stage-row th>*{vertical-align:middle;margin-right:6px}
.work-table tbody.stage-group:first-of-type .stage-row th{padding-top:8px}
:root[data-theme="light"] .tile-where .linkish{color:#7a3fc4}
@media(prefers-reduced-motion:reduce){.work-tile,.work-tile:hover{transition:none;transform:none}}
@media(max-width:520px){.work-tile-grid{grid-template-columns:1fr;gap:12px}.work-tile{padding:16px}}
.no-motion .work-tile,.no-motion .work-tile:hover{transition:none;transform:none}

/* ---- Timeline clash note (project requests) --------------------------------
   Amber when a request's dates overlap projects already running, quiet when they do not. It sits
   in the request form, on the inbox card and in the super admin's shaping dialog. */
.clash-note{display:flex;gap:9px;align-items:flex-start;font-size:11px;line-height:1.7;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:4px 0 14px}
.clash-note>svg{flex:none;width:14px;height:14px;margin-top:2px}
.clash-note.clear{color:var(--muted)}
.clash-note.clear>svg{color:var(--green,#5fd39a)}
.clash-note.warn{display:block;border-color:#f0b45a55;background:#f0b45a12;color:var(--text)}
.clash-head{display:flex;gap:8px;align-items:center}
.clash-head svg{flex:none;width:14px;height:14px;color:#f0b45a}
.clash-head strong{font-size:12px;font-weight:600}
.clash-note.warn p{margin:6px 0 8px;font-size:11px;line-height:1.7;color:var(--muted)}
.clash-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.clash-list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-top:5px;border-top:1px solid #f0b45a26;min-width:0}
.clash-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.clash-list li small{flex:none;font-size:10px;color:var(--muted)}
.clash-more{display:block;margin-top:6px;font-size:10px;color:var(--muted)}
.request-when{display:flex;gap:6px;align-items:center;margin:-6px 0 12px;color:var(--muted)}
.request-when svg{width:12px;height:12px}
.request-card .clash-note{margin:0 0 14px}
:root[data-theme="light"] .clash-note.warn{border-color:#c47a0e55;background:#fff6e8}
:root[data-theme="light"] .clash-head svg{color:#b86e00}
@media(max-width:520px){.clash-list li{flex-direction:column;gap:1px}.clash-list li span{white-space:normal}}

/* ---- Dictation into a text box ------------------------------------------------
   The microphone sits inside the box's bottom-right corner, so it reads as part of the field
   rather than another control in the form; the text keeps clear of it. While it listens it takes
   the accent and a slow ring, and a line underneath says what to say. */
/* The box, not the whole block, is what the microphone is placed against, so the line that
   appears underneath while listening cannot push it off the box. */
.dictate-wrap{display:block}
.dictate-box{position:relative}
.dictate-box>textarea{padding-right:44px;width:100%;display:block}
.dictate-mic{position:absolute;right:8px;bottom:9px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--panel,#241a30);color:var(--muted);cursor:pointer;padding:0;transition:color .15s,background .15s,border-color .15s}
.dictate-mic svg{width:14px;height:14px}
.dictate-mic:hover{color:var(--text);border-color:#c98eef66}
.dictate-mic:focus-visible{outline:2px solid #b67df0;outline-offset:2px}
.dictate-mic.listening{background:#b67df0;border-color:#b67df0;color:#fff;animation:dictate-ring 1.6s ease-out infinite}
@keyframes dictate-ring{0%{box-shadow:0 0 0 0 #b67df066}100%{box-shadow:0 0 0 9px #b67df000}}
.dictate-status{display:block;font-size:10px;line-height:1.6;color:#c8a3e1;margin-top:6px}
.dictate-status:empty{display:none}
.dictate-wrap.dictating textarea{border-color:#b67df0}
.sticky .dictate-box>textarea,.sticky-new .dictate-box>textarea{padding-right:40px}
:root[data-theme="light"] .dictate-mic{background:#fff}
:root[data-theme="light"] .dictate-mic.listening{background:#9b5ee0;border-color:#9b5ee0;color:#fff}
:root[data-theme="light"] .dictate-status{color:#7a3fc4}
@media(prefers-reduced-motion:reduce){.dictate-mic.listening{animation:none}}
.no-motion .dictate-mic.listening{animation:none}

/* Who can read a meeting's notes: private to the note-taker until they share them with the project. */
.meeting-reach{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:10px;color:var(--faint)}
.meeting-reach .icon{width:11px;height:11px}
.meeting-reach.shared{color:var(--muted)}